vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Implemented Card for Volt, migrated some of the pages to composition

pull/7366/head
Cagatay Civici 2025-03-04 10:12:51 +03:00
parent cfa3242d7d
commit b7cee9f59f
22 changed files with 753 additions and 625 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/volt/assets/data/menu.json
View File

@ -26,6 +26,10 @@
"name": "Avatar",
"to": "/avatar"
},
{
"name": "Card",
"to": "/card"
},
{
"name": "Checkbox",
"to": "/checkbox"

61
apps/volt/doc/card/AdvancedDoc.vue Normal file
View File

@ -0,0 +1,61 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Card provides <i>header</i>, <i>title</i>, <i>subtitle</i>, <i>content</i> and <i>footer</i> as the named templates to place content.</p>
</DocSectionText>
<div class="mb-4 p-8 flex items-center justify-center">
<Card style="width: 25rem; overflow: hidden">
<template #header>
<img alt="user header" class="w-full" src="https://primefaces.org/cdn/primevue/images/card-vue.jpg" />
</template>
<template #title>Advanced Card</template>
<template #subtitle>Card subtitle</template>
<template #content>
<p class="m-0">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
quas!
</p>
</template>
<template #footer>
<div class="flex gap-4 mt-1">
<Button label="Cancel" severity="secondary" outlined class="w-full" />
<Button label="Save" class="w-full" />
</div>
</template>
</Card>
</div>
<DocSectionCode :code="code" />
</template>
<script setup>
import Button from '@/volt/button';
import Card from '@/volt/card';
const code = ref(`
<template>
<Card style="width: 25rem; overflow: hidden">
<template #header>
<img alt="user header" class="w-full" src="https://primefaces.org/cdn/primevue/images/card-vue.jpg" />
</template>
<template #title>Advanced Card</template>
<template #subtitle>Card subtitle</template>
<template #content>
<p class="m-0">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
quas!
</p>
</template>
<template #footer>
<div class="flex gap-4 mt-1">
<Button label="Cancel" severity="secondary" outlined class="w-full" />
<Button label="Save" class="w-full" />
</div>
</template>
</Card>
</template>
<script setup>
import Card from '@/volt/card';
import Button from '@/volt/button';
<\/script>
`);
</script>

39
apps/volt/doc/card/BasicDoc.vue Normal file
View File

@ -0,0 +1,39 @@
<template>
<DocSectionText v-bind="$attrs">
<p>A simple Card is created with a <i>title</i> property along with the content as children.</p>
</DocSectionText>
<div class="mb-4 p-8">
<Card>
<template #title>Simple Card</template>
<template #content>
<p class="m-0">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
quas!
</p>
</template>
</Card>
</div>
<DocSectionCode :code="code" />
</template>
<script setup>
import Card from '@/volt/card';
const code = ref(`
<template>
<Card>
<template #title>Simple Card</template>
<template #content>
<p class="m-0">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
quas!
</p>
</template>
</Card>
</template>
<script setup>
import Card from '@/volt/card';
<\/script>
`);
</script>

15
apps/volt/doc/card/ImportDoc.vue Normal file
View File

@ -0,0 +1,15 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocSectionCode :code="code" lang="script" />
</template>
<script>
export default {
data() {
return {
code: `import Card from '@/volt/card';
`
};
}
};
</script>

61
apps/volt/pages/avatar/index.vue
View File

@ -2,44 +2,39 @@
<DocComponent title="Vue Avatar Component" header="Avatar" description="Avatar represents people using icons, labels and images." :componentDocs="docs" />
</template>
<script>
<script setup>
import AvatarGroupDoc from '@/doc/avatar/AvatarGroupDoc.vue';
import IconDoc from '@/doc/avatar/IconDoc.vue';
import ImageDoc from '@/doc/avatar/ImageDoc.vue';
import ImportDoc from '@/doc/avatar/ImportDoc.vue';
import LabelDoc from '@/doc/avatar/LabelDoc.vue';
import { ref } from 'vue';
export default {
data() {
return {
docs: [
{
id: 'import',
label: 'Import',
component: ImportDoc
},
{
id: 'label',
label: 'Label',
component: LabelDoc
},
{
id: 'icon',
label: 'Icon',
component: IconDoc
},
{
id: 'image',
label: 'Image',
component: ImageDoc
},
{
id: 'avatargroup',
label: 'AvatarGroup',
component: AvatarGroupDoc
}
]
};
const docs = ref([
{
id: 'import',
label: 'Import',
component: ImportDoc
},
{
id: 'label',
label: 'Label',
component: LabelDoc
},
{
id: 'icon',
label: 'Icon',
component: IconDoc
},
{
id: 'image',
label: 'Image',
component: ImageDoc
},
{
id: 'avatargroup',
label: 'AvatarGroup',
component: AvatarGroupDoc
}
};
]);
</script>

28
apps/volt/pages/card/index.vue Normal file
View File

@ -0,0 +1,28 @@
<template>
<DocComponent title="Vue Card Component" header="Card" description="Card is a flexible container component." :componentDocs="docs" />
</template>
<script setup>
import AdvancedDoc from '@/doc/card/AdvancedDoc.vue';
import BasicDoc from '@/doc/card/BasicDoc.vue';
import ImportDoc from '@/doc/card/ImportDoc.vue';
import { ref } from 'vue';
const docs = ref([
{
id: 'import',
label: 'Import',
component: ImportDoc
},
{
id: 'basic',
label: 'Basic',
component: BasicDoc
},
{
id: 'advanced',
label: 'Advanced',
component: AdvancedDoc
}
]);
</script>

101
apps/volt/pages/checkbox/index.vue
View File

@ -2,7 +2,7 @@
<DocComponent title="Vue Checkbox Component" header="Checkbox" description="Checkbox is an extension to standard checkbox element with theming." :componentDocs="docs" />
</template>
<script>
<script setup>
import BasicDoc from '@/doc/checkbox/BasicDoc.vue';
import DisabledDoc from '@/doc/checkbox/DisabledDoc.vue';
import DynamicDoc from '@/doc/checkbox/DynamicDoc.vue';
@ -12,58 +12,53 @@ import ImportDoc from '@/doc/checkbox/ImportDoc.vue';
import IndeterminateDoc from '@/doc/checkbox/IndeterminateDoc.vue';
import InvalidDoc from '@/doc/checkbox/InvalidDoc.vue';
import SizesDoc from '@/doc/checkbox/SizesDoc.vue';
import { ref } from 'vue';
export default {
data() {
return {
docs: [
{
id: 'import',
label: 'Import',
component: ImportDoc
},
{
id: 'basic',
label: 'Basic',
component: BasicDoc
},
{
id: 'group',
label: 'Group',
component: GroupDoc
},
{
id: 'dynamic',
label: 'Dynamic',
component: DynamicDoc
},
{
id: 'indeterminate',
label: 'Indeterminate',
component: IndeterminateDoc
},
{
id: 'filled',
label: 'Filled',
component: FilledDoc
},
{
id: 'sizes',
label: 'Sizes',
component: SizesDoc
},
{
id: 'invalid',
label: 'Invalid',
component: InvalidDoc
},
{
id: 'disabled',
label: 'Disabled',
component: DisabledDoc
}
]
};
const docs = ref([
{
id: 'import',
label: 'Import',
component: ImportDoc
},
{
id: 'basic',
label: 'Basic',
component: BasicDoc
},
{
id: 'group',
label: 'Group',
component: GroupDoc
},
{
id: 'dynamic',
label: 'Dynamic',
component: DynamicDoc
},
{
id: 'indeterminate',
label: 'Indeterminate',
component: IndeterminateDoc
},
{
id: 'filled',
label: 'Filled',
component: FilledDoc
},
{
id: 'sizes',
label: 'Sizes',
component: SizesDoc
},
{
id: 'invalid',
label: 'Invalid',
component: InvalidDoc
},
{
id: 'disabled',
label: 'Disabled',
component: DisabledDoc
}
};
]);
</script>

61
apps/volt/pages/chip/index.vue
View File

@ -2,44 +2,39 @@
<DocComponent title="Vue Chip Component" header="Chip" description="Chip represents entities using icons, labels and images." :componentDocs="docs" />
</template>
<script>
<script setup>
import BasicDoc from '@/doc/chip/BasicDoc.vue';
import IconDoc from '@/doc/chip/IconDoc.vue';
import ImageDoc from '@/doc/chip/ImageDoc.vue';
import ImportDoc from '@/doc/chip/ImportDoc.vue';
import TemplateDoc from '@/doc/chip/TemplateDoc.vue';
import { ref } from 'vue';
export default {
data() {
return {
docs: [
{
id: 'import',
label: 'Import',
component: ImportDoc
},
{
id: 'basic',
label: 'Basic',
component: BasicDoc
},
{
id: 'icon',
label: 'Icon',
component: IconDoc
},
{
id: 'image',
label: 'Image',
component: ImageDoc
},
{
id: 'template',
label: 'Template',
component: TemplateDoc
}
]
};
const docs = ref([
{
id: 'import',
label: 'Import',
component: ImportDoc
},
{
id: 'basic',
label: 'Basic',
component: BasicDoc
},
{
id: 'icon',
label: 'Icon',
component: IconDoc
},
{
id: 'image',
label: 'Image',
component: ImageDoc
},
{
id: 'template',
label: 'Template',
component: TemplateDoc
}
};
]);
</script>

61
apps/volt/pages/icons/index.vue
View File

@ -18,44 +18,39 @@
</div>
</template>
<script>
<script setup>
import FontAwesomeDoc from '@/doc/icons/FontAwesomeDoc.vue';
import ImageDoc from '@/doc/icons/ImageDoc.vue';
import MaterialDoc from '@/doc/icons/MaterialDoc.vue';
import SVGDoc from '@/doc/icons/SVGDoc.vue';
import VideoDoc from '@/doc/icons/VideoDoc.vue';
import { ref } from 'vue';
export default {
data() {
return {
docs: [
{
id: 'material',
label: 'Material',
component: MaterialDoc
},
{
id: 'fontawesome',
label: 'FontAwesome',
component: FontAwesomeDoc
},
{
id: 'svg',
label: 'SVG',
component: SVGDoc
},
{
id: 'image',
label: 'Image',
component: ImageDoc
},
{
id: 'video',
label: 'Video Tutorial',
component: VideoDoc
}
]
};
const docs = ref([
{
id: 'material',
label: 'Material',
component: MaterialDoc
},
{
id: 'fontawesome',
label: 'FontAwesome',
component: FontAwesomeDoc
},
{
id: 'svg',
label: 'SVG',
component: SVGDoc
},
{
id: 'image',
label: 'Image',
component: ImageDoc
},
{
id: 'video',
label: 'Video Tutorial',
component: VideoDoc
}
};
]);
</script>

121
apps/volt/pages/inputnumber/index.vue
View File

@ -2,7 +2,7 @@
<DocComponent title="Vue InputNumber Component" header="InputNumber" description="InputNumber is an input component to provide numerical input." :componentDocs="docs" />
</template>
<script>
<script setup>
import ButtonsDoc from '@/doc/inputnumber/ButtonsDoc.vue';
import CurrencyDoc from '@/doc/inputnumber/CurrencyDoc.vue';
import DisabledDoc from '@/doc/inputnumber/DisabledDoc.vue';
@ -14,68 +14,63 @@ import NumeralsDoc from '@/doc/inputnumber/NumeralsDoc.vue';
import PrefixSuffixDoc from '@/doc/inputnumber/PrefixSuffixDoc.vue';
import SizesDoc from '@/doc/inputnumber/SizesDoc.vue';
import VerticalDoc from '@/doc/inputnumber/VerticalDoc.vue';
import { ref } from 'vue';
export default {
data() {
return {
docs: [
{
id: 'import',
label: 'Import',
component: ImportDoc
},
{
id: 'numerals',
label: 'Numerals',
component: NumeralsDoc
},
{
id: 'locale',
label: 'Locale',
component: LocaleDoc
},
{
id: 'currency',
label: 'Currency',
component: CurrencyDoc
},
{
id: 'prefixsuffix',
label: 'Prefix & Suffix',
component: PrefixSuffixDoc
},
{
id: 'buttons',
label: 'Buttons',
component: ButtonsDoc
},
{
id: 'vertical',
label: 'Vertical',
component: VerticalDoc
},
{
id: 'filled',
label: 'Filled',
component: FilledDoc
},
{
id: 'sizes',
label: 'Sizes',
component: SizesDoc
},
{
id: 'invalid',
label: 'Invalid',
component: InvalidDoc
},
{
id: 'disabled',
label: 'Disabled',
component: DisabledDoc
}
]
};
const docs = ref([
{
id: 'import',
label: 'Import',
component: ImportDoc
},
{
id: 'numerals',
label: 'Numerals',
component: NumeralsDoc
},
{
id: 'locale',
label: 'Locale',
component: LocaleDoc
},
{
id: 'currency',
label: 'Currency',
component: CurrencyDoc
},
{
id: 'prefixsuffix',
label: 'Prefix & Suffix',
component: PrefixSuffixDoc
},
{
id: 'buttons',
label: 'Buttons',
component: ButtonsDoc
},
{
id: 'vertical',
label: 'Vertical',
component: VerticalDoc
},
{
id: 'filled',
label: 'Filled',
component: FilledDoc
},
{
id: 'sizes',
label: 'Sizes',
component: SizesDoc
},
{
id: 'invalid',
label: 'Invalid',
component: InvalidDoc
},
{
id: 'disabled',
label: 'Disabled',
component: DisabledDoc
}
};
]);
</script>

61
apps/volt/pages/introduction/index.vue
View File

@ -18,44 +18,39 @@
</div>
</template>
<script>
<script setup>
import FontAwesomeDoc from '@/doc/icons/FontAwesomeDoc.vue';
import ImageDoc from '@/doc/icons/ImageDoc.vue';
import MaterialDoc from '@/doc/icons/MaterialDoc.vue';
import SVGDoc from '@/doc/icons/SVGDoc.vue';
import VideoDoc from '@/doc/icons/VideoDoc.vue';
import { ref } from 'vue';
export default {
data() {
return {
docs: [
{
id: 'material',
label: 'Material',
component: MaterialDoc
},
{
id: 'fontawesome',
label: 'FontAwesome',
component: FontAwesomeDoc
},
{
id: 'svg',
label: 'SVG',
component: SVGDoc
},
{
id: 'image',
label: 'Image',
component: ImageDoc
},
{
id: 'video',
label: 'Video Tutorial',
component: VideoDoc
}
]
};
const docs = ref([
{
id: 'material',
label: 'Material',
component: MaterialDoc
},
{
id: 'fontawesome',
label: 'FontAwesome',
component: FontAwesomeDoc
},
{
id: 'svg',
label: 'SVG',
component: SVGDoc
},
{
id: 'image',
label: 'Image',
component: ImageDoc
},
{
id: 'video',
label: 'Video Tutorial',
component: VideoDoc
}
};
]);
</script>

113
apps/volt/pages/nuxt/index.vue
View File

@ -15,7 +15,7 @@
</div>
</template>
<script>
<script setup>
import CSSVariablesDoc from '@/doc/nuxt/CSSVariablesDoc.vue';
import DownloadDoc from '@/doc/nuxt/DownloadDoc.vue';
import ExampleDoc from '@/doc/nuxt/ExampleDoc.vue';
@ -25,64 +25,59 @@ import TailwindDoc from '@/doc/nuxt/TailwindDoc.vue';
import ImportStylesDoc from '@/doc/nuxt/tailwind/ImportStylesDoc.vue';
import PostCSSImportDoc from '@/doc/nuxt/tailwind/PostCSSImportDoc.vue';
import PrimeUIPluginDoc from '@/doc/nuxt/tailwind/PrimeUIPluginDoc.vue';
import { ref } from 'vue';
export default {
data() {
return {
docs: [
{
id: 'tailwind',
label: 'Tailwind CSS',
component: TailwindDoc
},
{
id: 'download',
label: 'Download',
component: DownloadDoc
},
{
id: 'nuxtconfig',
label: 'Nuxt Config',
component: NuxtConfigDoc
},
{
id: 'styles',
label: 'Styles',
component: StylesDoc
},
{
id: 'tailwind-config',
label: 'Tailwind Config',
children: [
{
id: 'primeuiplugin',
label: 'PrimeUI Plugin',
component: PrimeUIPluginDoc
},
{
id: 'postcssimport',
label: 'PostCSS Import',
component: PostCSSImportDoc
},
{
id: 'importstyles',
label: 'Import Styles',
component: ImportStylesDoc
}
]
},
{
id: 'css-variables',
label: 'CSS Variables',
component: CSSVariablesDoc
},
{
id: 'example',
label: 'Example',
component: ExampleDoc
}
]
};
const docs = ref([
{
id: 'tailwind',
label: 'Tailwind CSS',
component: TailwindDoc
},
{
id: 'download',
label: 'Download',
component: DownloadDoc
},
{
id: 'nuxtconfig',
label: 'Nuxt Config',
component: NuxtConfigDoc
},
{
id: 'styles',
label: 'Styles',
component: StylesDoc
},
{
id: 'tailwind-config',
label: 'Tailwind Config',
children: [
{
id: 'primeuiplugin',
label: 'PrimeUI Plugin',
component: PrimeUIPluginDoc
},
{
id: 'postcssimport',
label: 'PostCSS Import',
component: PostCSSImportDoc
},
{
id: 'importstyles',
label: 'Import Styles',
component: ImportStylesDoc
}
]
},
{
id: 'css-variables',
label: 'CSS Variables',
component: CSSVariablesDoc
},
{
id: 'example',
label: 'Example',
component: ExampleDoc
}
};
]);
</script>

61
apps/volt/pages/progressbar/index.vue
View File

@ -2,44 +2,39 @@
<DocComponent title="Vue ProgressBar Component" header="ProgressBar" description="ProgressBar is a process status indicator." :componentDocs="docs" />
</template>
<script>
<script setup>
import BasicDoc from '@/doc/progressbar/BasicDoc.vue';
import DynamicDoc from '@/doc/progressbar/DynamicDoc.vue';
import ImportDoc from '@/doc/progressbar/ImportDoc.vue';
import IndeterminateDoc from '@/doc/progressbar/IndeterminateDoc.vue';
import TemplateDoc from '@/doc/progressbar/TemplateDoc.vue';
import { ref } from 'vue';
export default {
data() {
return {
docs: [
{
id: 'import',
label: 'Import',
component: ImportDoc
},
{
id: 'basic',
label: 'Basic',
component: BasicDoc
},
{
id: 'dynamic',
label: 'Dynamic',
component: DynamicDoc
},
{
id: 'template',
label: 'Template',
component: TemplateDoc
},
{
id: 'indeterminate',
label: 'Indeterminate',
component: IndeterminateDoc
}
]
};
const docs = ref([
{
id: 'import',
label: 'Import',
component: ImportDoc
},
{
id: 'basic',
label: 'Basic',
component: BasicDoc
},
{
id: 'dynamic',
label: 'Dynamic',
component: DynamicDoc
},
{
id: 'template',
label: 'Template',
component: TemplateDoc
},
{
id: 'indeterminate',
label: 'Indeterminate',
component: IndeterminateDoc
}
};
]);
</script>

81
apps/volt/pages/radiobutton/index.vue
View File

@ -2,7 +2,7 @@
<DocComponent title="Vue RadioButton Component" header="RadioButton" description="RadioButton is an extension to standard radio button element with theming." :componentDocs="docs" />
</template>
<script>
<script setup>
import DisabledDoc from '@/doc/radiobutton/DisabledDoc.vue';
import DynamicDoc from '@/doc/radiobutton/DynamicDoc.vue';
import FilledDoc from '@/doc/radiobutton/FilledDoc.vue';
@ -10,48 +10,43 @@ import GroupDoc from '@/doc/radiobutton/GroupDoc.vue';
import ImportDoc from '@/doc/radiobutton/ImportDoc.vue';
import InvalidDoc from '@/doc/radiobutton/InvalidDoc.vue';
import SizesDoc from '@/doc/radiobutton/SizesDoc.vue';
import { ref } from 'vue';
export default {
data() {
return {
docs: [
{
id: 'import',
label: 'Import',
component: ImportDoc
},
{
id: 'group',
label: 'Group',
component: GroupDoc
},
{
id: 'dynamic',
label: 'Dynamic',
component: DynamicDoc
},
{
id: 'filled',
label: 'Filled',
component: FilledDoc
},
{
id: 'sizes',
label: 'Sizes',
component: SizesDoc
},
{
id: 'invalid',
label: 'Invalid',
component: InvalidDoc
},
{
id: 'disabled',
label: 'Disabled',
component: DisabledDoc
}
]
};
const docs = ref([
{
id: 'import',
label: 'Import',
component: ImportDoc
},
{
id: 'group',
label: 'Group',
component: GroupDoc
},
{
id: 'dynamic',
label: 'Dynamic',
component: DynamicDoc
},
{
id: 'filled',
label: 'Filled',
component: FilledDoc
},
{
id: 'sizes',
label: 'Sizes',
component: SizesDoc
},
{
id: 'invalid',
label: 'Invalid',
component: InvalidDoc
},
{
id: 'disabled',
label: 'Disabled',
component: DisabledDoc
}
};
]);
</script>

71
apps/volt/pages/rating/index.vue
View File

@ -2,50 +2,45 @@
<DocComponent title="Vue Rating Component" header="Rating" description="Rating component is a star based selection input." :componentDocs="docs" />
</template>
<script>
<script setup>
import BasicDoc from '@/doc/rating/BasicDoc.vue';
import DisabledDoc from '@/doc/rating/DisabledDoc.vue';
import ImportDoc from '@/doc/rating/ImportDoc.vue';
import NumberOfStarsDoc from '@/doc/rating/NumberOfStarsDoc.vue';
import ReadOnlyDoc from '@/doc/rating/ReadOnlyDoc.vue';
import TemplateDoc from '@/doc/rating/TemplateDoc.vue';
import { ref } from 'vue';
export default {
data() {
return {
docs: [
{
id: 'import',
label: 'Import',
component: ImportDoc
},
{
id: 'basic',
label: 'Basic',
component: BasicDoc
},
{
id: 'numberofstars',
label: 'Number of Stars',
component: NumberOfStarsDoc
},
{
id: 'template',
label: 'Template',
component: TemplateDoc
},
{
id: 'readonly',
label: 'ReadOnly',
component: ReadOnlyDoc
},
{
id: 'disabled',
label: 'Disabled',
component: DisabledDoc
}
]
};
const docs = ref([
{
id: 'import',
label: 'Import',
component: ImportDoc
},
{
id: 'basic',
label: 'Basic',
component: BasicDoc
},
{
id: 'numberofstars',
label: 'Number of Stars',
component: NumberOfStarsDoc
},
{
id: 'template',
label: 'Template',
component: TemplateDoc
},
{
id: 'readonly',
label: 'ReadOnly',
component: ReadOnlyDoc
},
{
id: 'disabled',
label: 'Disabled',
component: DisabledDoc
}
};
]);
</script>

81
apps/volt/pages/selectbutton/index.vue
View File

@ -2,7 +2,7 @@
<DocComponent title="Vue SelectButton Component" header="SelectButton" description="SelectButton is used to choose single or multiple items from a list using buttons." :componentDocs="docs" :apiDocs="['SelectButton']" />
</template>
<script>
<script setup>
import BasicDoc from '@/doc/selectbutton/BasicDoc.vue';
import DisabledDoc from '@/doc/selectbutton/DisabledDoc.vue';
import ImportDoc from '@/doc/selectbutton/ImportDoc.vue';
@ -10,48 +10,43 @@ import InvalidDoc from '@/doc/selectbutton/InvalidDoc.vue';
import MultipleDoc from '@/doc/selectbutton/MultipleDoc.vue';
import SizesDoc from '@/doc/selectbutton/SizesDoc.vue';
import TemplateDoc from '@/doc/selectbutton/TemplateDoc.vue';
import { ref } from 'vue';
export default {
data() {
return {
docs: [
{
id: 'import',
label: 'Import',
component: ImportDoc
},
{
id: 'basic',
label: 'Basic',
component: BasicDoc
},
{
id: 'multiple',
label: 'Multiple',
component: MultipleDoc
},
{
id: 'template',
label: 'Template',
component: TemplateDoc
},
{
id: 'sizes',
label: 'Sizes',
component: SizesDoc
},
{
id: 'invalid',
label: 'Invalid',
component: InvalidDoc
},
{
id: 'disabled',
label: 'Disabled',
component: DisabledDoc
}
]
};
const docs = ref([
{
id: 'import',
label: 'Import',
component: ImportDoc
},
{
id: 'basic',
label: 'Basic',
component: BasicDoc
},
{
id: 'multiple',
label: 'Multiple',
component: MultipleDoc
},
{
id: 'template',
label: 'Template',
component: TemplateDoc
},
{
id: 'sizes',
label: 'Sizes',
component: SizesDoc
},
{
id: 'invalid',
label: 'Invalid',
component: InvalidDoc
},
{
id: 'disabled',
label: 'Disabled',
component: DisabledDoc
}
};
]);
</script>

51
apps/volt/pages/skeleton/index.vue
View File

@ -2,38 +2,33 @@
<DocComponent title="Vue Skeleton Component" header="Skeleton" description="Skeleton is a placeholder to display instead of the actual content." :componentDocs="docs" />
</template>
<script>
<script setup>
import CardDoc from '@/doc/skeleton/CardDoc.vue';
import ImportDoc from '@/doc/skeleton/ImportDoc.vue';
import ListDoc from '@/doc/skeleton/ListDoc.vue';
import ShapesDoc from '@/doc/skeleton/ShapesDoc.vue';
import { ref } from 'vue';
export default {
data() {
return {
docs: [
{
id: 'import',
label: 'Import',
component: ImportDoc
},
{
id: 'shapes',
label: 'Shapes',
component: ShapesDoc
},
{
id: 'card',
label: 'Card',
component: CardDoc
},
{
id: 'list',
label: 'List',
component: ListDoc
}
]
};
const docs = ref([
{
id: 'import',
label: 'Import',
component: ImportDoc
},
{
id: 'shapes',
label: 'Shapes',
component: ShapesDoc
},
{
id: 'card',
label: 'Card',
component: CardDoc
},
{
id: 'list',
label: 'List',
component: ListDoc
}
};
]);
</script>

69
apps/volt/pages/timeline/index.vue
View File

@ -9,43 +9,38 @@ import HorizontalDoc from '@/doc/timeline/HorizontalDoc.vue';
import ImportDoc from '@/doc/timeline/ImportDoc.vue';
import OppositeDoc from '@/doc/timeline/OppositeDoc.vue';
import TemplateDoc from '@/doc/timeline/TemplateDoc.vue';
import { ref } from 'vue';
export default {
data() {
return {
docs: [
{
id: 'import',
label: 'Import',
component: ImportDoc
},
{
id: 'basic',
label: 'Basic',
component: BasicDoc
},
{
id: 'alignment',
label: 'Alignment',
component: AlignmentDoc
},
{
id: 'opposite',
label: 'Opposite',
component: OppositeDoc
},
{
id: 'template',
label: 'Template',
component: TemplateDoc
},
{
id: 'horizontal',
label: 'Horizontal',
component: HorizontalDoc
}
]
};
const docs = ref([
{
id: 'import',
label: 'Import',
component: ImportDoc
},
{
id: 'basic',
label: 'Basic',
component: BasicDoc
},
{
id: 'alignment',
label: 'Alignment',
component: AlignmentDoc
},
{
id: 'opposite',
label: 'Opposite',
component: OppositeDoc
},
{
id: 'template',
label: 'Template',
component: TemplateDoc
},
{
id: 'horizontal',
label: 'Horizontal',
component: HorizontalDoc
}
};
]);
</script>

71
apps/volt/pages/togglebutton/index.vue
View File

@ -2,50 +2,45 @@
<DocComponent title="Vue ToggleButton Component" header="ToggleButton" description="ToggleButton is used to select a boolean value using a button." :componentDocs="docs" />
</template>
<script>
<script setup>
import BasicDoc from '@/doc/togglebutton/BasicDoc.vue';
import CustomizedDoc from '@/doc/togglebutton/CustomizedDoc.vue';
import DisabledDoc from '@/doc/togglebutton/DisabledDoc.vue';
import ImportDoc from '@/doc/togglebutton/ImportDoc.vue';
import InvalidDoc from '@/doc/togglebutton/InvalidDoc.vue';
import SizesDoc from '@/doc/togglebutton/SizesDoc.vue';
import { ref } from 'vue';
export default {
data() {
return {
docs: [
{
id: 'import',
label: 'Import',
component: ImportDoc
},
{
id: 'basic',
label: 'Basic',
component: BasicDoc
},
{
id: 'customized',
label: 'Customized',
component: CustomizedDoc
},
{
id: 'sizes',
label: 'Sizes',
component: SizesDoc
},
{
id: 'invalid',
label: 'Invalid',
component: InvalidDoc
},
{
id: 'disabled',
label: 'Disabled',
component: DisabledDoc
}
]
};
const docs = ref([
{
id: 'import',
label: 'Import',
component: ImportDoc
},
{
id: 'basic',
label: 'Basic',
component: BasicDoc
},
{
id: 'customized',
label: 'Customized',
component: CustomizedDoc
},
{
id: 'sizes',
label: 'Sizes',
component: SizesDoc
},
{
id: 'invalid',
label: 'Invalid',
component: InvalidDoc
},
{
id: 'disabled',
label: 'Disabled',
component: DisabledDoc
}
};
]);
</script>

111
apps/volt/pages/vite/index.vue
View File

@ -25,64 +25,59 @@ import TailwindDoc from '@/doc/vite/TailwindDoc.vue';
import ImportStylesDoc from '@/doc/vite/tailwind/ImportStylesDoc.vue';
import PostCSSImportDoc from '@/doc/vite/tailwind/PostCSSImportDoc.vue';
import PrimeUIPluginDoc from '@/doc/vite/tailwind/PrimeUIPluginDoc.vue';
import { ref } from 'vue';
export default {
data() {
return {
docs: [
{
id: 'tailwind',
label: 'Tailwind CSS',
component: TailwindDoc
},
{
id: 'download',
label: 'Download',
component: DownloadDoc
},
{
id: 'plugin',
label: 'Plugin',
component: PluginDoc
},
{
id: 'styles',
label: 'Styles',
component: StylesDoc
},
{
id: 'tailwind-config',
label: 'Tailwind Config',
children: [
{
id: 'primeuiplugin',
label: 'PrimeUI Plugin',
component: PrimeUIPluginDoc
},
{
id: 'postcssimport',
label: 'PostCSS Import',
component: PostCSSImportDoc
},
{
id: 'importstyles',
label: 'Import Styles',
component: ImportStylesDoc
}
]
},
{
id: 'css-variables',
label: 'CSS Variables',
component: CSSVariablesDoc
},
{
id: 'example',
label: 'Example',
component: ExampleDoc
}
]
};
const docs = ref([
{
id: 'tailwind',
label: 'Tailwind CSS',
component: TailwindDoc
},
{
id: 'download',
label: 'Download',
component: DownloadDoc
},
{
id: 'plugin',
label: 'Plugin',
component: PluginDoc
},
{
id: 'styles',
label: 'Styles',
component: StylesDoc
},
{
id: 'tailwind-config',
label: 'Tailwind Config',
children: [
{
id: 'primeuiplugin',
label: 'PrimeUI Plugin',
component: PrimeUIPluginDoc
},
{
id: 'postcssimport',
label: 'PostCSS Import',
component: PostCSSImportDoc
},
{
id: 'importstyles',
label: 'Import Styles',
component: ImportStylesDoc
}
]
},
{
id: 'css-variables',
label: 'CSS Variables',
component: CSSVariablesDoc
},
{
id: 'example',
label: 'Example',
component: ExampleDoc
}
};
]);
</script>

23
apps/volt/volt/button/index.vue Normal file
View File

@ -0,0 +1,23 @@
<template>
<Button
unstyled
:pt="theme"
:ptOptions="{
mergeProps: ptViewMerge
}"
>
<template v-for="(_, slotName) in $slots" v-slot:[slotName]="slotProps">
<slot :name="slotName" v-bind="slotProps ?? {}" />
</template>
</Button>
</template>
<script setup>
import Button from 'primevue/button';
import { ref } from 'vue';
import { ptViewMerge } from '../utils';
const theme = ref({
root: ``
});
</script>

33
apps/volt/volt/card/index.vue Normal file
View File

@ -0,0 +1,33 @@
<template>
<Card
unstyled
:pt="theme"
:ptOptions="{
mergeProps: ptViewMerge
}"
>
<template v-for="(_, slotName) in $slots" v-slot:[slotName]="slotProps">
<slot :name="slotName" v-bind="slotProps ?? {}" />
</template>
</Card>
</template>
<script setup>
import Card from 'primevue/card';
import { ref } from 'vue';
import { ptViewMerge } from '../utils';
const theme = ref({
root: `flex flex-col rounded-xl
bg-surface-0 dark:bg-surface-900
text-surface-700 dark:text-surface-0
shadow-md`,
header: ``,
body: `p-5 flex flex-col gap-2`,
caption: `flex flex-col gap-2`,
title: `font-medium text-xl`,
subtitle: `text-surface-500 dark:text-surface-400`,
content: ``,
footer: ``
});
</script>