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>

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

@ -2,17 +2,15 @@
<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: [
const docs = ref([
{
id: 'import',
label: 'Import',
@ -38,8 +36,5 @@ export default {
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>

13
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,11 +12,9 @@ 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: [
const docs = ref([
{
id: 'import',
label: 'Import',
@ -62,8 +60,5 @@ export default {
label: 'Disabled',
component: DisabledDoc
}
]
};
}
};
]);
</script>

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

@ -2,17 +2,15 @@
<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: [
const docs = ref([
{
id: 'import',
label: 'Import',
@ -38,8 +36,5 @@ export default {
label: 'Template',
component: TemplateDoc
}
]
};
}
};
]);
</script>

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

@ -18,17 +18,15 @@
</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: [
const docs = ref([
{
id: 'material',
label: 'Material',
@ -54,8 +52,5 @@ export default {
label: 'Video Tutorial',
component: VideoDoc
}
]
};
}
};
]);
</script>

13
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,11 +14,9 @@ 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: [
const docs = ref([
{
id: 'import',
label: 'Import',
@ -74,8 +72,5 @@ export default {
label: 'Disabled',
component: DisabledDoc
}
]
};
}
};
]);
</script>

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

@ -18,17 +18,15 @@
</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: [
const docs = ref([
{
id: 'material',
label: 'Material',
@ -54,8 +52,5 @@ export default {
label: 'Video Tutorial',
component: VideoDoc
}
]
};
}
};
]);
</script>

13
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,11 +25,9 @@ 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: [
const docs = ref([
{
id: 'tailwind',
label: 'Tailwind CSS',
@ -81,8 +79,5 @@ export default {
label: 'Example',
component: ExampleDoc
}
]
};
}
};
]);
</script>

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

@ -2,17 +2,15 @@
<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: [
const docs = ref([
{
id: 'import',
label: 'Import',
@ -38,8 +36,5 @@ export default {
label: 'Indeterminate',
component: IndeterminateDoc
}
]
};
}
};
]);
</script>

13
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,11 +10,9 @@ 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: [
const docs = ref([
{
id: 'import',
label: 'Import',
@ -50,8 +48,5 @@ export default {
label: 'Disabled',
component: DisabledDoc
}
]
};
}
};
]);
</script>

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

@ -2,18 +2,16 @@
<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: [
const docs = ref([
{
id: 'import',
label: 'Import',
@ -44,8 +42,5 @@ export default {
label: 'Disabled',
component: DisabledDoc
}
]
};
}
};
]);
</script>

13
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,11 +10,9 @@ 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: [
const docs = ref([
{
id: 'import',
label: 'Import',
@ -50,8 +48,5 @@ export default {
label: 'Disabled',
component: DisabledDoc
}
]
};
}
};
]);
</script>

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

@ -2,16 +2,14 @@
<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: [
const docs = ref([
{
id: 'import',
label: 'Import',
@ -32,8 +30,5 @@ export default {
label: 'List',
component: ListDoc
}
]
};
}
};
]);
</script>

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

@ -9,11 +9,9 @@ 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: [
const docs = ref([
{
id: 'import',
label: 'Import',
@ -44,8 +42,5 @@ export default {
label: 'Horizontal',
component: HorizontalDoc
}
]
};
}
};
]);
</script>

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

@ -2,18 +2,16 @@
<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: [
const docs = ref([
{
id: 'import',
label: 'Import',
@ -44,8 +42,5 @@ export default {
label: 'Disabled',
component: DisabledDoc
}
]
};
}
};
]);
</script>

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

@ -25,11 +25,9 @@ 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: [
const docs = ref([
{
id: 'tailwind',
label: 'Tailwind CSS',
@ -81,8 +79,5 @@ export default {
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>