Implemented Card for Volt, migrated some of the pages to composition
Cagatay Civici
parent
cfa3242d7d
commit
b7cee9f59f
|
|
@ -26,6 +26,10 @@
|
||||||
"name": "Avatar",
|
"name": "Avatar",
|
||||||
"to": "/avatar"
|
"to": "/avatar"
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"name": "Card",
|
||||||
|
"to": "/card"
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"name": "Checkbox",
|
"name": "Checkbox",
|
||||||
"to": "/checkbox"
|
"to": "/checkbox"
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -2,44 +2,39 @@
|
||||||
<DocComponent title="Vue Avatar Component" header="Avatar" description="Avatar represents people using icons, labels and images." :componentDocs="docs" />
|
<DocComponent title="Vue Avatar Component" header="Avatar" description="Avatar represents people using icons, labels and images." :componentDocs="docs" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script setup>
|
||||||
import AvatarGroupDoc from '@/doc/avatar/AvatarGroupDoc.vue';
|
import AvatarGroupDoc from '@/doc/avatar/AvatarGroupDoc.vue';
|
||||||
import IconDoc from '@/doc/avatar/IconDoc.vue';
|
import IconDoc from '@/doc/avatar/IconDoc.vue';
|
||||||
import ImageDoc from '@/doc/avatar/ImageDoc.vue';
|
import ImageDoc from '@/doc/avatar/ImageDoc.vue';
|
||||||
import ImportDoc from '@/doc/avatar/ImportDoc.vue';
|
import ImportDoc from '@/doc/avatar/ImportDoc.vue';
|
||||||
import LabelDoc from '@/doc/avatar/LabelDoc.vue';
|
import LabelDoc from '@/doc/avatar/LabelDoc.vue';
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
export default {
|
const docs = ref([
|
||||||
data() {
|
{
|
||||||
return {
|
id: 'import',
|
||||||
docs: [
|
label: 'Import',
|
||||||
{
|
component: ImportDoc
|
||||||
id: 'import',
|
},
|
||||||
label: 'Import',
|
{
|
||||||
component: ImportDoc
|
id: 'label',
|
||||||
},
|
label: 'Label',
|
||||||
{
|
component: LabelDoc
|
||||||
id: 'label',
|
},
|
||||||
label: 'Label',
|
{
|
||||||
component: LabelDoc
|
id: 'icon',
|
||||||
},
|
label: 'Icon',
|
||||||
{
|
component: IconDoc
|
||||||
id: 'icon',
|
},
|
||||||
label: 'Icon',
|
{
|
||||||
component: IconDoc
|
id: 'image',
|
||||||
},
|
label: 'Image',
|
||||||
{
|
component: ImageDoc
|
||||||
id: 'image',
|
},
|
||||||
label: 'Image',
|
{
|
||||||
component: ImageDoc
|
id: 'avatargroup',
|
||||||
},
|
label: 'AvatarGroup',
|
||||||
{
|
component: AvatarGroupDoc
|
||||||
id: 'avatargroup',
|
|
||||||
label: 'AvatarGroup',
|
|
||||||
component: AvatarGroupDoc
|
|
||||||
}
|
|
||||||
]
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
};
|
]);
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
<DocComponent title="Vue Checkbox Component" header="Checkbox" description="Checkbox is an extension to standard checkbox element with theming." :componentDocs="docs" />
|
<DocComponent title="Vue Checkbox Component" header="Checkbox" description="Checkbox is an extension to standard checkbox element with theming." :componentDocs="docs" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script setup>
|
||||||
import BasicDoc from '@/doc/checkbox/BasicDoc.vue';
|
import BasicDoc from '@/doc/checkbox/BasicDoc.vue';
|
||||||
import DisabledDoc from '@/doc/checkbox/DisabledDoc.vue';
|
import DisabledDoc from '@/doc/checkbox/DisabledDoc.vue';
|
||||||
import DynamicDoc from '@/doc/checkbox/DynamicDoc.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 IndeterminateDoc from '@/doc/checkbox/IndeterminateDoc.vue';
|
||||||
import InvalidDoc from '@/doc/checkbox/InvalidDoc.vue';
|
import InvalidDoc from '@/doc/checkbox/InvalidDoc.vue';
|
||||||
import SizesDoc from '@/doc/checkbox/SizesDoc.vue';
|
import SizesDoc from '@/doc/checkbox/SizesDoc.vue';
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
export default {
|
const docs = ref([
|
||||||
data() {
|
{
|
||||||
return {
|
id: 'import',
|
||||||
docs: [
|
label: 'Import',
|
||||||
{
|
component: ImportDoc
|
||||||
id: 'import',
|
},
|
||||||
label: 'Import',
|
{
|
||||||
component: ImportDoc
|
id: 'basic',
|
||||||
},
|
label: 'Basic',
|
||||||
{
|
component: BasicDoc
|
||||||
id: 'basic',
|
},
|
||||||
label: 'Basic',
|
{
|
||||||
component: BasicDoc
|
id: 'group',
|
||||||
},
|
label: 'Group',
|
||||||
{
|
component: GroupDoc
|
||||||
id: 'group',
|
},
|
||||||
label: 'Group',
|
{
|
||||||
component: GroupDoc
|
id: 'dynamic',
|
||||||
},
|
label: 'Dynamic',
|
||||||
{
|
component: DynamicDoc
|
||||||
id: 'dynamic',
|
},
|
||||||
label: 'Dynamic',
|
{
|
||||||
component: DynamicDoc
|
id: 'indeterminate',
|
||||||
},
|
label: 'Indeterminate',
|
||||||
{
|
component: IndeterminateDoc
|
||||||
id: 'indeterminate',
|
},
|
||||||
label: 'Indeterminate',
|
{
|
||||||
component: IndeterminateDoc
|
id: 'filled',
|
||||||
},
|
label: 'Filled',
|
||||||
{
|
component: FilledDoc
|
||||||
id: 'filled',
|
},
|
||||||
label: 'Filled',
|
{
|
||||||
component: FilledDoc
|
id: 'sizes',
|
||||||
},
|
label: 'Sizes',
|
||||||
{
|
component: SizesDoc
|
||||||
id: 'sizes',
|
},
|
||||||
label: 'Sizes',
|
{
|
||||||
component: SizesDoc
|
id: 'invalid',
|
||||||
},
|
label: 'Invalid',
|
||||||
{
|
component: InvalidDoc
|
||||||
id: 'invalid',
|
},
|
||||||
label: 'Invalid',
|
{
|
||||||
component: InvalidDoc
|
id: 'disabled',
|
||||||
},
|
label: 'Disabled',
|
||||||
{
|
component: DisabledDoc
|
||||||
id: 'disabled',
|
|
||||||
label: 'Disabled',
|
|
||||||
component: DisabledDoc
|
|
||||||
}
|
|
||||||
]
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
};
|
]);
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -2,44 +2,39 @@
|
||||||
<DocComponent title="Vue Chip Component" header="Chip" description="Chip represents entities using icons, labels and images." :componentDocs="docs" />
|
<DocComponent title="Vue Chip Component" header="Chip" description="Chip represents entities using icons, labels and images." :componentDocs="docs" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script setup>
|
||||||
import BasicDoc from '@/doc/chip/BasicDoc.vue';
|
import BasicDoc from '@/doc/chip/BasicDoc.vue';
|
||||||
import IconDoc from '@/doc/chip/IconDoc.vue';
|
import IconDoc from '@/doc/chip/IconDoc.vue';
|
||||||
import ImageDoc from '@/doc/chip/ImageDoc.vue';
|
import ImageDoc from '@/doc/chip/ImageDoc.vue';
|
||||||
import ImportDoc from '@/doc/chip/ImportDoc.vue';
|
import ImportDoc from '@/doc/chip/ImportDoc.vue';
|
||||||
import TemplateDoc from '@/doc/chip/TemplateDoc.vue';
|
import TemplateDoc from '@/doc/chip/TemplateDoc.vue';
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
export default {
|
const docs = ref([
|
||||||
data() {
|
{
|
||||||
return {
|
id: 'import',
|
||||||
docs: [
|
label: 'Import',
|
||||||
{
|
component: ImportDoc
|
||||||
id: 'import',
|
},
|
||||||
label: 'Import',
|
{
|
||||||
component: ImportDoc
|
id: 'basic',
|
||||||
},
|
label: 'Basic',
|
||||||
{
|
component: BasicDoc
|
||||||
id: 'basic',
|
},
|
||||||
label: 'Basic',
|
{
|
||||||
component: BasicDoc
|
id: 'icon',
|
||||||
},
|
label: 'Icon',
|
||||||
{
|
component: IconDoc
|
||||||
id: 'icon',
|
},
|
||||||
label: 'Icon',
|
{
|
||||||
component: IconDoc
|
id: 'image',
|
||||||
},
|
label: 'Image',
|
||||||
{
|
component: ImageDoc
|
||||||
id: 'image',
|
},
|
||||||
label: 'Image',
|
{
|
||||||
component: ImageDoc
|
id: 'template',
|
||||||
},
|
label: 'Template',
|
||||||
{
|
component: TemplateDoc
|
||||||
id: 'template',
|
|
||||||
label: 'Template',
|
|
||||||
component: TemplateDoc
|
|
||||||
}
|
|
||||||
]
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
};
|
]);
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -18,44 +18,39 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script setup>
|
||||||
import FontAwesomeDoc from '@/doc/icons/FontAwesomeDoc.vue';
|
import FontAwesomeDoc from '@/doc/icons/FontAwesomeDoc.vue';
|
||||||
import ImageDoc from '@/doc/icons/ImageDoc.vue';
|
import ImageDoc from '@/doc/icons/ImageDoc.vue';
|
||||||
import MaterialDoc from '@/doc/icons/MaterialDoc.vue';
|
import MaterialDoc from '@/doc/icons/MaterialDoc.vue';
|
||||||
import SVGDoc from '@/doc/icons/SVGDoc.vue';
|
import SVGDoc from '@/doc/icons/SVGDoc.vue';
|
||||||
import VideoDoc from '@/doc/icons/VideoDoc.vue';
|
import VideoDoc from '@/doc/icons/VideoDoc.vue';
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
export default {
|
const docs = ref([
|
||||||
data() {
|
{
|
||||||
return {
|
id: 'material',
|
||||||
docs: [
|
label: 'Material',
|
||||||
{
|
component: MaterialDoc
|
||||||
id: 'material',
|
},
|
||||||
label: 'Material',
|
{
|
||||||
component: MaterialDoc
|
id: 'fontawesome',
|
||||||
},
|
label: 'FontAwesome',
|
||||||
{
|
component: FontAwesomeDoc
|
||||||
id: 'fontawesome',
|
},
|
||||||
label: 'FontAwesome',
|
{
|
||||||
component: FontAwesomeDoc
|
id: 'svg',
|
||||||
},
|
label: 'SVG',
|
||||||
{
|
component: SVGDoc
|
||||||
id: 'svg',
|
},
|
||||||
label: 'SVG',
|
{
|
||||||
component: SVGDoc
|
id: 'image',
|
||||||
},
|
label: 'Image',
|
||||||
{
|
component: ImageDoc
|
||||||
id: 'image',
|
},
|
||||||
label: 'Image',
|
{
|
||||||
component: ImageDoc
|
id: 'video',
|
||||||
},
|
label: 'Video Tutorial',
|
||||||
{
|
component: VideoDoc
|
||||||
id: 'video',
|
|
||||||
label: 'Video Tutorial',
|
|
||||||
component: VideoDoc
|
|
||||||
}
|
|
||||||
]
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
};
|
]);
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
<DocComponent title="Vue InputNumber Component" header="InputNumber" description="InputNumber is an input component to provide numerical input." :componentDocs="docs" />
|
<DocComponent title="Vue InputNumber Component" header="InputNumber" description="InputNumber is an input component to provide numerical input." :componentDocs="docs" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script setup>
|
||||||
import ButtonsDoc from '@/doc/inputnumber/ButtonsDoc.vue';
|
import ButtonsDoc from '@/doc/inputnumber/ButtonsDoc.vue';
|
||||||
import CurrencyDoc from '@/doc/inputnumber/CurrencyDoc.vue';
|
import CurrencyDoc from '@/doc/inputnumber/CurrencyDoc.vue';
|
||||||
import DisabledDoc from '@/doc/inputnumber/DisabledDoc.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 PrefixSuffixDoc from '@/doc/inputnumber/PrefixSuffixDoc.vue';
|
||||||
import SizesDoc from '@/doc/inputnumber/SizesDoc.vue';
|
import SizesDoc from '@/doc/inputnumber/SizesDoc.vue';
|
||||||
import VerticalDoc from '@/doc/inputnumber/VerticalDoc.vue';
|
import VerticalDoc from '@/doc/inputnumber/VerticalDoc.vue';
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
export default {
|
const docs = ref([
|
||||||
data() {
|
{
|
||||||
return {
|
id: 'import',
|
||||||
docs: [
|
label: 'Import',
|
||||||
{
|
component: ImportDoc
|
||||||
id: 'import',
|
},
|
||||||
label: 'Import',
|
{
|
||||||
component: ImportDoc
|
id: 'numerals',
|
||||||
},
|
label: 'Numerals',
|
||||||
{
|
component: NumeralsDoc
|
||||||
id: 'numerals',
|
},
|
||||||
label: 'Numerals',
|
{
|
||||||
component: NumeralsDoc
|
id: 'locale',
|
||||||
},
|
label: 'Locale',
|
||||||
{
|
component: LocaleDoc
|
||||||
id: 'locale',
|
},
|
||||||
label: 'Locale',
|
{
|
||||||
component: LocaleDoc
|
id: 'currency',
|
||||||
},
|
label: 'Currency',
|
||||||
{
|
component: CurrencyDoc
|
||||||
id: 'currency',
|
},
|
||||||
label: 'Currency',
|
{
|
||||||
component: CurrencyDoc
|
id: 'prefixsuffix',
|
||||||
},
|
label: 'Prefix & Suffix',
|
||||||
{
|
component: PrefixSuffixDoc
|
||||||
id: 'prefixsuffix',
|
},
|
||||||
label: 'Prefix & Suffix',
|
{
|
||||||
component: PrefixSuffixDoc
|
id: 'buttons',
|
||||||
},
|
label: 'Buttons',
|
||||||
{
|
component: ButtonsDoc
|
||||||
id: 'buttons',
|
},
|
||||||
label: 'Buttons',
|
{
|
||||||
component: ButtonsDoc
|
id: 'vertical',
|
||||||
},
|
label: 'Vertical',
|
||||||
{
|
component: VerticalDoc
|
||||||
id: 'vertical',
|
},
|
||||||
label: 'Vertical',
|
{
|
||||||
component: VerticalDoc
|
id: 'filled',
|
||||||
},
|
label: 'Filled',
|
||||||
{
|
component: FilledDoc
|
||||||
id: 'filled',
|
},
|
||||||
label: 'Filled',
|
{
|
||||||
component: FilledDoc
|
id: 'sizes',
|
||||||
},
|
label: 'Sizes',
|
||||||
{
|
component: SizesDoc
|
||||||
id: 'sizes',
|
},
|
||||||
label: 'Sizes',
|
{
|
||||||
component: SizesDoc
|
id: 'invalid',
|
||||||
},
|
label: 'Invalid',
|
||||||
{
|
component: InvalidDoc
|
||||||
id: 'invalid',
|
},
|
||||||
label: 'Invalid',
|
{
|
||||||
component: InvalidDoc
|
id: 'disabled',
|
||||||
},
|
label: 'Disabled',
|
||||||
{
|
component: DisabledDoc
|
||||||
id: 'disabled',
|
|
||||||
label: 'Disabled',
|
|
||||||
component: DisabledDoc
|
|
||||||
}
|
|
||||||
]
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
};
|
]);
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -18,44 +18,39 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script setup>
|
||||||
import FontAwesomeDoc from '@/doc/icons/FontAwesomeDoc.vue';
|
import FontAwesomeDoc from '@/doc/icons/FontAwesomeDoc.vue';
|
||||||
import ImageDoc from '@/doc/icons/ImageDoc.vue';
|
import ImageDoc from '@/doc/icons/ImageDoc.vue';
|
||||||
import MaterialDoc from '@/doc/icons/MaterialDoc.vue';
|
import MaterialDoc from '@/doc/icons/MaterialDoc.vue';
|
||||||
import SVGDoc from '@/doc/icons/SVGDoc.vue';
|
import SVGDoc from '@/doc/icons/SVGDoc.vue';
|
||||||
import VideoDoc from '@/doc/icons/VideoDoc.vue';
|
import VideoDoc from '@/doc/icons/VideoDoc.vue';
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
export default {
|
const docs = ref([
|
||||||
data() {
|
{
|
||||||
return {
|
id: 'material',
|
||||||
docs: [
|
label: 'Material',
|
||||||
{
|
component: MaterialDoc
|
||||||
id: 'material',
|
},
|
||||||
label: 'Material',
|
{
|
||||||
component: MaterialDoc
|
id: 'fontawesome',
|
||||||
},
|
label: 'FontAwesome',
|
||||||
{
|
component: FontAwesomeDoc
|
||||||
id: 'fontawesome',
|
},
|
||||||
label: 'FontAwesome',
|
{
|
||||||
component: FontAwesomeDoc
|
id: 'svg',
|
||||||
},
|
label: 'SVG',
|
||||||
{
|
component: SVGDoc
|
||||||
id: 'svg',
|
},
|
||||||
label: 'SVG',
|
{
|
||||||
component: SVGDoc
|
id: 'image',
|
||||||
},
|
label: 'Image',
|
||||||
{
|
component: ImageDoc
|
||||||
id: 'image',
|
},
|
||||||
label: 'Image',
|
{
|
||||||
component: ImageDoc
|
id: 'video',
|
||||||
},
|
label: 'Video Tutorial',
|
||||||
{
|
component: VideoDoc
|
||||||
id: 'video',
|
|
||||||
label: 'Video Tutorial',
|
|
||||||
component: VideoDoc
|
|
||||||
}
|
|
||||||
]
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
};
|
]);
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -15,7 +15,7 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script setup>
|
||||||
import CSSVariablesDoc from '@/doc/nuxt/CSSVariablesDoc.vue';
|
import CSSVariablesDoc from '@/doc/nuxt/CSSVariablesDoc.vue';
|
||||||
import DownloadDoc from '@/doc/nuxt/DownloadDoc.vue';
|
import DownloadDoc from '@/doc/nuxt/DownloadDoc.vue';
|
||||||
import ExampleDoc from '@/doc/nuxt/ExampleDoc.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 ImportStylesDoc from '@/doc/nuxt/tailwind/ImportStylesDoc.vue';
|
||||||
import PostCSSImportDoc from '@/doc/nuxt/tailwind/PostCSSImportDoc.vue';
|
import PostCSSImportDoc from '@/doc/nuxt/tailwind/PostCSSImportDoc.vue';
|
||||||
import PrimeUIPluginDoc from '@/doc/nuxt/tailwind/PrimeUIPluginDoc.vue';
|
import PrimeUIPluginDoc from '@/doc/nuxt/tailwind/PrimeUIPluginDoc.vue';
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
export default {
|
const docs = ref([
|
||||||
data() {
|
{
|
||||||
return {
|
id: 'tailwind',
|
||||||
docs: [
|
label: 'Tailwind CSS',
|
||||||
{
|
component: TailwindDoc
|
||||||
id: 'tailwind',
|
},
|
||||||
label: 'Tailwind CSS',
|
{
|
||||||
component: TailwindDoc
|
id: 'download',
|
||||||
},
|
label: 'Download',
|
||||||
{
|
component: DownloadDoc
|
||||||
id: 'download',
|
},
|
||||||
label: 'Download',
|
{
|
||||||
component: DownloadDoc
|
id: 'nuxtconfig',
|
||||||
},
|
label: 'Nuxt Config',
|
||||||
{
|
component: NuxtConfigDoc
|
||||||
id: 'nuxtconfig',
|
},
|
||||||
label: 'Nuxt Config',
|
{
|
||||||
component: NuxtConfigDoc
|
id: 'styles',
|
||||||
},
|
label: 'Styles',
|
||||||
{
|
component: StylesDoc
|
||||||
id: 'styles',
|
},
|
||||||
label: 'Styles',
|
{
|
||||||
component: StylesDoc
|
id: 'tailwind-config',
|
||||||
},
|
label: 'Tailwind Config',
|
||||||
{
|
children: [
|
||||||
id: 'tailwind-config',
|
{
|
||||||
label: 'Tailwind Config',
|
id: 'primeuiplugin',
|
||||||
children: [
|
label: 'PrimeUI Plugin',
|
||||||
{
|
component: PrimeUIPluginDoc
|
||||||
id: 'primeuiplugin',
|
},
|
||||||
label: 'PrimeUI Plugin',
|
{
|
||||||
component: PrimeUIPluginDoc
|
id: 'postcssimport',
|
||||||
},
|
label: 'PostCSS Import',
|
||||||
{
|
component: PostCSSImportDoc
|
||||||
id: 'postcssimport',
|
},
|
||||||
label: 'PostCSS Import',
|
{
|
||||||
component: PostCSSImportDoc
|
id: 'importstyles',
|
||||||
},
|
label: 'Import Styles',
|
||||||
{
|
component: ImportStylesDoc
|
||||||
id: 'importstyles',
|
}
|
||||||
label: 'Import Styles',
|
]
|
||||||
component: ImportStylesDoc
|
},
|
||||||
}
|
{
|
||||||
]
|
id: 'css-variables',
|
||||||
},
|
label: 'CSS Variables',
|
||||||
{
|
component: CSSVariablesDoc
|
||||||
id: 'css-variables',
|
},
|
||||||
label: 'CSS Variables',
|
{
|
||||||
component: CSSVariablesDoc
|
id: 'example',
|
||||||
},
|
label: 'Example',
|
||||||
{
|
component: ExampleDoc
|
||||||
id: 'example',
|
|
||||||
label: 'Example',
|
|
||||||
component: ExampleDoc
|
|
||||||
}
|
|
||||||
]
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
};
|
]);
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -2,44 +2,39 @@
|
||||||
<DocComponent title="Vue ProgressBar Component" header="ProgressBar" description="ProgressBar is a process status indicator." :componentDocs="docs" />
|
<DocComponent title="Vue ProgressBar Component" header="ProgressBar" description="ProgressBar is a process status indicator." :componentDocs="docs" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script setup>
|
||||||
import BasicDoc from '@/doc/progressbar/BasicDoc.vue';
|
import BasicDoc from '@/doc/progressbar/BasicDoc.vue';
|
||||||
import DynamicDoc from '@/doc/progressbar/DynamicDoc.vue';
|
import DynamicDoc from '@/doc/progressbar/DynamicDoc.vue';
|
||||||
import ImportDoc from '@/doc/progressbar/ImportDoc.vue';
|
import ImportDoc from '@/doc/progressbar/ImportDoc.vue';
|
||||||
import IndeterminateDoc from '@/doc/progressbar/IndeterminateDoc.vue';
|
import IndeterminateDoc from '@/doc/progressbar/IndeterminateDoc.vue';
|
||||||
import TemplateDoc from '@/doc/progressbar/TemplateDoc.vue';
|
import TemplateDoc from '@/doc/progressbar/TemplateDoc.vue';
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
export default {
|
const docs = ref([
|
||||||
data() {
|
{
|
||||||
return {
|
id: 'import',
|
||||||
docs: [
|
label: 'Import',
|
||||||
{
|
component: ImportDoc
|
||||||
id: 'import',
|
},
|
||||||
label: 'Import',
|
{
|
||||||
component: ImportDoc
|
id: 'basic',
|
||||||
},
|
label: 'Basic',
|
||||||
{
|
component: BasicDoc
|
||||||
id: 'basic',
|
},
|
||||||
label: 'Basic',
|
{
|
||||||
component: BasicDoc
|
id: 'dynamic',
|
||||||
},
|
label: 'Dynamic',
|
||||||
{
|
component: DynamicDoc
|
||||||
id: 'dynamic',
|
},
|
||||||
label: 'Dynamic',
|
{
|
||||||
component: DynamicDoc
|
id: 'template',
|
||||||
},
|
label: 'Template',
|
||||||
{
|
component: TemplateDoc
|
||||||
id: 'template',
|
},
|
||||||
label: 'Template',
|
{
|
||||||
component: TemplateDoc
|
id: 'indeterminate',
|
||||||
},
|
label: 'Indeterminate',
|
||||||
{
|
component: IndeterminateDoc
|
||||||
id: 'indeterminate',
|
|
||||||
label: 'Indeterminate',
|
|
||||||
component: IndeterminateDoc
|
|
||||||
}
|
|
||||||
]
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
};
|
]);
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -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" />
|
<DocComponent title="Vue RadioButton Component" header="RadioButton" description="RadioButton is an extension to standard radio button element with theming." :componentDocs="docs" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script setup>
|
||||||
import DisabledDoc from '@/doc/radiobutton/DisabledDoc.vue';
|
import DisabledDoc from '@/doc/radiobutton/DisabledDoc.vue';
|
||||||
import DynamicDoc from '@/doc/radiobutton/DynamicDoc.vue';
|
import DynamicDoc from '@/doc/radiobutton/DynamicDoc.vue';
|
||||||
import FilledDoc from '@/doc/radiobutton/FilledDoc.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 ImportDoc from '@/doc/radiobutton/ImportDoc.vue';
|
||||||
import InvalidDoc from '@/doc/radiobutton/InvalidDoc.vue';
|
import InvalidDoc from '@/doc/radiobutton/InvalidDoc.vue';
|
||||||
import SizesDoc from '@/doc/radiobutton/SizesDoc.vue';
|
import SizesDoc from '@/doc/radiobutton/SizesDoc.vue';
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
export default {
|
const docs = ref([
|
||||||
data() {
|
{
|
||||||
return {
|
id: 'import',
|
||||||
docs: [
|
label: 'Import',
|
||||||
{
|
component: ImportDoc
|
||||||
id: 'import',
|
},
|
||||||
label: 'Import',
|
{
|
||||||
component: ImportDoc
|
id: 'group',
|
||||||
},
|
label: 'Group',
|
||||||
{
|
component: GroupDoc
|
||||||
id: 'group',
|
},
|
||||||
label: 'Group',
|
{
|
||||||
component: GroupDoc
|
id: 'dynamic',
|
||||||
},
|
label: 'Dynamic',
|
||||||
{
|
component: DynamicDoc
|
||||||
id: 'dynamic',
|
},
|
||||||
label: 'Dynamic',
|
{
|
||||||
component: DynamicDoc
|
id: 'filled',
|
||||||
},
|
label: 'Filled',
|
||||||
{
|
component: FilledDoc
|
||||||
id: 'filled',
|
},
|
||||||
label: 'Filled',
|
{
|
||||||
component: FilledDoc
|
id: 'sizes',
|
||||||
},
|
label: 'Sizes',
|
||||||
{
|
component: SizesDoc
|
||||||
id: 'sizes',
|
},
|
||||||
label: 'Sizes',
|
{
|
||||||
component: SizesDoc
|
id: 'invalid',
|
||||||
},
|
label: 'Invalid',
|
||||||
{
|
component: InvalidDoc
|
||||||
id: 'invalid',
|
},
|
||||||
label: 'Invalid',
|
{
|
||||||
component: InvalidDoc
|
id: 'disabled',
|
||||||
},
|
label: 'Disabled',
|
||||||
{
|
component: DisabledDoc
|
||||||
id: 'disabled',
|
|
||||||
label: 'Disabled',
|
|
||||||
component: DisabledDoc
|
|
||||||
}
|
|
||||||
]
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
};
|
]);
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -2,50 +2,45 @@
|
||||||
<DocComponent title="Vue Rating Component" header="Rating" description="Rating component is a star based selection input." :componentDocs="docs" />
|
<DocComponent title="Vue Rating Component" header="Rating" description="Rating component is a star based selection input." :componentDocs="docs" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script setup>
|
||||||
import BasicDoc from '@/doc/rating/BasicDoc.vue';
|
import BasicDoc from '@/doc/rating/BasicDoc.vue';
|
||||||
import DisabledDoc from '@/doc/rating/DisabledDoc.vue';
|
import DisabledDoc from '@/doc/rating/DisabledDoc.vue';
|
||||||
import ImportDoc from '@/doc/rating/ImportDoc.vue';
|
import ImportDoc from '@/doc/rating/ImportDoc.vue';
|
||||||
import NumberOfStarsDoc from '@/doc/rating/NumberOfStarsDoc.vue';
|
import NumberOfStarsDoc from '@/doc/rating/NumberOfStarsDoc.vue';
|
||||||
import ReadOnlyDoc from '@/doc/rating/ReadOnlyDoc.vue';
|
import ReadOnlyDoc from '@/doc/rating/ReadOnlyDoc.vue';
|
||||||
import TemplateDoc from '@/doc/rating/TemplateDoc.vue';
|
import TemplateDoc from '@/doc/rating/TemplateDoc.vue';
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
export default {
|
const docs = ref([
|
||||||
data() {
|
{
|
||||||
return {
|
id: 'import',
|
||||||
docs: [
|
label: 'Import',
|
||||||
{
|
component: ImportDoc
|
||||||
id: 'import',
|
},
|
||||||
label: 'Import',
|
{
|
||||||
component: ImportDoc
|
id: 'basic',
|
||||||
},
|
label: 'Basic',
|
||||||
{
|
component: BasicDoc
|
||||||
id: 'basic',
|
},
|
||||||
label: 'Basic',
|
{
|
||||||
component: BasicDoc
|
id: 'numberofstars',
|
||||||
},
|
label: 'Number of Stars',
|
||||||
{
|
component: NumberOfStarsDoc
|
||||||
id: 'numberofstars',
|
},
|
||||||
label: 'Number of Stars',
|
{
|
||||||
component: NumberOfStarsDoc
|
id: 'template',
|
||||||
},
|
label: 'Template',
|
||||||
{
|
component: TemplateDoc
|
||||||
id: 'template',
|
},
|
||||||
label: 'Template',
|
{
|
||||||
component: TemplateDoc
|
id: 'readonly',
|
||||||
},
|
label: 'ReadOnly',
|
||||||
{
|
component: ReadOnlyDoc
|
||||||
id: 'readonly',
|
},
|
||||||
label: 'ReadOnly',
|
{
|
||||||
component: ReadOnlyDoc
|
id: 'disabled',
|
||||||
},
|
label: 'Disabled',
|
||||||
{
|
component: DisabledDoc
|
||||||
id: 'disabled',
|
|
||||||
label: 'Disabled',
|
|
||||||
component: DisabledDoc
|
|
||||||
}
|
|
||||||
]
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
};
|
]);
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -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']" />
|
<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>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script setup>
|
||||||
import BasicDoc from '@/doc/selectbutton/BasicDoc.vue';
|
import BasicDoc from '@/doc/selectbutton/BasicDoc.vue';
|
||||||
import DisabledDoc from '@/doc/selectbutton/DisabledDoc.vue';
|
import DisabledDoc from '@/doc/selectbutton/DisabledDoc.vue';
|
||||||
import ImportDoc from '@/doc/selectbutton/ImportDoc.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 MultipleDoc from '@/doc/selectbutton/MultipleDoc.vue';
|
||||||
import SizesDoc from '@/doc/selectbutton/SizesDoc.vue';
|
import SizesDoc from '@/doc/selectbutton/SizesDoc.vue';
|
||||||
import TemplateDoc from '@/doc/selectbutton/TemplateDoc.vue';
|
import TemplateDoc from '@/doc/selectbutton/TemplateDoc.vue';
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
export default {
|
const docs = ref([
|
||||||
data() {
|
{
|
||||||
return {
|
id: 'import',
|
||||||
docs: [
|
label: 'Import',
|
||||||
{
|
component: ImportDoc
|
||||||
id: 'import',
|
},
|
||||||
label: 'Import',
|
{
|
||||||
component: ImportDoc
|
id: 'basic',
|
||||||
},
|
label: 'Basic',
|
||||||
{
|
component: BasicDoc
|
||||||
id: 'basic',
|
},
|
||||||
label: 'Basic',
|
{
|
||||||
component: BasicDoc
|
id: 'multiple',
|
||||||
},
|
label: 'Multiple',
|
||||||
{
|
component: MultipleDoc
|
||||||
id: 'multiple',
|
},
|
||||||
label: 'Multiple',
|
{
|
||||||
component: MultipleDoc
|
id: 'template',
|
||||||
},
|
label: 'Template',
|
||||||
{
|
component: TemplateDoc
|
||||||
id: 'template',
|
},
|
||||||
label: 'Template',
|
{
|
||||||
component: TemplateDoc
|
id: 'sizes',
|
||||||
},
|
label: 'Sizes',
|
||||||
{
|
component: SizesDoc
|
||||||
id: 'sizes',
|
},
|
||||||
label: 'Sizes',
|
{
|
||||||
component: SizesDoc
|
id: 'invalid',
|
||||||
},
|
label: 'Invalid',
|
||||||
{
|
component: InvalidDoc
|
||||||
id: 'invalid',
|
},
|
||||||
label: 'Invalid',
|
{
|
||||||
component: InvalidDoc
|
id: 'disabled',
|
||||||
},
|
label: 'Disabled',
|
||||||
{
|
component: DisabledDoc
|
||||||
id: 'disabled',
|
|
||||||
label: 'Disabled',
|
|
||||||
component: DisabledDoc
|
|
||||||
}
|
|
||||||
]
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
};
|
]);
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -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" />
|
<DocComponent title="Vue Skeleton Component" header="Skeleton" description="Skeleton is a placeholder to display instead of the actual content." :componentDocs="docs" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script setup>
|
||||||
import CardDoc from '@/doc/skeleton/CardDoc.vue';
|
import CardDoc from '@/doc/skeleton/CardDoc.vue';
|
||||||
import ImportDoc from '@/doc/skeleton/ImportDoc.vue';
|
import ImportDoc from '@/doc/skeleton/ImportDoc.vue';
|
||||||
import ListDoc from '@/doc/skeleton/ListDoc.vue';
|
import ListDoc from '@/doc/skeleton/ListDoc.vue';
|
||||||
import ShapesDoc from '@/doc/skeleton/ShapesDoc.vue';
|
import ShapesDoc from '@/doc/skeleton/ShapesDoc.vue';
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
export default {
|
const docs = ref([
|
||||||
data() {
|
{
|
||||||
return {
|
id: 'import',
|
||||||
docs: [
|
label: 'Import',
|
||||||
{
|
component: ImportDoc
|
||||||
id: 'import',
|
},
|
||||||
label: 'Import',
|
{
|
||||||
component: ImportDoc
|
id: 'shapes',
|
||||||
},
|
label: 'Shapes',
|
||||||
{
|
component: ShapesDoc
|
||||||
id: 'shapes',
|
},
|
||||||
label: 'Shapes',
|
{
|
||||||
component: ShapesDoc
|
id: 'card',
|
||||||
},
|
label: 'Card',
|
||||||
{
|
component: CardDoc
|
||||||
id: 'card',
|
},
|
||||||
label: 'Card',
|
{
|
||||||
component: CardDoc
|
id: 'list',
|
||||||
},
|
label: 'List',
|
||||||
{
|
component: ListDoc
|
||||||
id: 'list',
|
|
||||||
label: 'List',
|
|
||||||
component: ListDoc
|
|
||||||
}
|
|
||||||
]
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
};
|
]);
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -9,43 +9,38 @@ import HorizontalDoc from '@/doc/timeline/HorizontalDoc.vue';
|
||||||
import ImportDoc from '@/doc/timeline/ImportDoc.vue';
|
import ImportDoc from '@/doc/timeline/ImportDoc.vue';
|
||||||
import OppositeDoc from '@/doc/timeline/OppositeDoc.vue';
|
import OppositeDoc from '@/doc/timeline/OppositeDoc.vue';
|
||||||
import TemplateDoc from '@/doc/timeline/TemplateDoc.vue';
|
import TemplateDoc from '@/doc/timeline/TemplateDoc.vue';
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
export default {
|
const docs = ref([
|
||||||
data() {
|
{
|
||||||
return {
|
id: 'import',
|
||||||
docs: [
|
label: 'Import',
|
||||||
{
|
component: ImportDoc
|
||||||
id: 'import',
|
},
|
||||||
label: 'Import',
|
{
|
||||||
component: ImportDoc
|
id: 'basic',
|
||||||
},
|
label: 'Basic',
|
||||||
{
|
component: BasicDoc
|
||||||
id: 'basic',
|
},
|
||||||
label: 'Basic',
|
{
|
||||||
component: BasicDoc
|
id: 'alignment',
|
||||||
},
|
label: 'Alignment',
|
||||||
{
|
component: AlignmentDoc
|
||||||
id: 'alignment',
|
},
|
||||||
label: 'Alignment',
|
{
|
||||||
component: AlignmentDoc
|
id: 'opposite',
|
||||||
},
|
label: 'Opposite',
|
||||||
{
|
component: OppositeDoc
|
||||||
id: 'opposite',
|
},
|
||||||
label: 'Opposite',
|
{
|
||||||
component: OppositeDoc
|
id: 'template',
|
||||||
},
|
label: 'Template',
|
||||||
{
|
component: TemplateDoc
|
||||||
id: 'template',
|
},
|
||||||
label: 'Template',
|
{
|
||||||
component: TemplateDoc
|
id: 'horizontal',
|
||||||
},
|
label: 'Horizontal',
|
||||||
{
|
component: HorizontalDoc
|
||||||
id: 'horizontal',
|
|
||||||
label: 'Horizontal',
|
|
||||||
component: HorizontalDoc
|
|
||||||
}
|
|
||||||
]
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
};
|
]);
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -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" />
|
<DocComponent title="Vue ToggleButton Component" header="ToggleButton" description="ToggleButton is used to select a boolean value using a button." :componentDocs="docs" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script setup>
|
||||||
import BasicDoc from '@/doc/togglebutton/BasicDoc.vue';
|
import BasicDoc from '@/doc/togglebutton/BasicDoc.vue';
|
||||||
import CustomizedDoc from '@/doc/togglebutton/CustomizedDoc.vue';
|
import CustomizedDoc from '@/doc/togglebutton/CustomizedDoc.vue';
|
||||||
import DisabledDoc from '@/doc/togglebutton/DisabledDoc.vue';
|
import DisabledDoc from '@/doc/togglebutton/DisabledDoc.vue';
|
||||||
import ImportDoc from '@/doc/togglebutton/ImportDoc.vue';
|
import ImportDoc from '@/doc/togglebutton/ImportDoc.vue';
|
||||||
import InvalidDoc from '@/doc/togglebutton/InvalidDoc.vue';
|
import InvalidDoc from '@/doc/togglebutton/InvalidDoc.vue';
|
||||||
import SizesDoc from '@/doc/togglebutton/SizesDoc.vue';
|
import SizesDoc from '@/doc/togglebutton/SizesDoc.vue';
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
export default {
|
const docs = ref([
|
||||||
data() {
|
{
|
||||||
return {
|
id: 'import',
|
||||||
docs: [
|
label: 'Import',
|
||||||
{
|
component: ImportDoc
|
||||||
id: 'import',
|
},
|
||||||
label: 'Import',
|
{
|
||||||
component: ImportDoc
|
id: 'basic',
|
||||||
},
|
label: 'Basic',
|
||||||
{
|
component: BasicDoc
|
||||||
id: 'basic',
|
},
|
||||||
label: 'Basic',
|
{
|
||||||
component: BasicDoc
|
id: 'customized',
|
||||||
},
|
label: 'Customized',
|
||||||
{
|
component: CustomizedDoc
|
||||||
id: 'customized',
|
},
|
||||||
label: 'Customized',
|
{
|
||||||
component: CustomizedDoc
|
id: 'sizes',
|
||||||
},
|
label: 'Sizes',
|
||||||
{
|
component: SizesDoc
|
||||||
id: 'sizes',
|
},
|
||||||
label: 'Sizes',
|
{
|
||||||
component: SizesDoc
|
id: 'invalid',
|
||||||
},
|
label: 'Invalid',
|
||||||
{
|
component: InvalidDoc
|
||||||
id: 'invalid',
|
},
|
||||||
label: 'Invalid',
|
{
|
||||||
component: InvalidDoc
|
id: 'disabled',
|
||||||
},
|
label: 'Disabled',
|
||||||
{
|
component: DisabledDoc
|
||||||
id: 'disabled',
|
|
||||||
label: 'Disabled',
|
|
||||||
component: DisabledDoc
|
|
||||||
}
|
|
||||||
]
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
};
|
]);
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -25,64 +25,59 @@ import TailwindDoc from '@/doc/vite/TailwindDoc.vue';
|
||||||
import ImportStylesDoc from '@/doc/vite/tailwind/ImportStylesDoc.vue';
|
import ImportStylesDoc from '@/doc/vite/tailwind/ImportStylesDoc.vue';
|
||||||
import PostCSSImportDoc from '@/doc/vite/tailwind/PostCSSImportDoc.vue';
|
import PostCSSImportDoc from '@/doc/vite/tailwind/PostCSSImportDoc.vue';
|
||||||
import PrimeUIPluginDoc from '@/doc/vite/tailwind/PrimeUIPluginDoc.vue';
|
import PrimeUIPluginDoc from '@/doc/vite/tailwind/PrimeUIPluginDoc.vue';
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
export default {
|
const docs = ref([
|
||||||
data() {
|
{
|
||||||
return {
|
id: 'tailwind',
|
||||||
docs: [
|
label: 'Tailwind CSS',
|
||||||
{
|
component: TailwindDoc
|
||||||
id: 'tailwind',
|
},
|
||||||
label: 'Tailwind CSS',
|
{
|
||||||
component: TailwindDoc
|
id: 'download',
|
||||||
},
|
label: 'Download',
|
||||||
{
|
component: DownloadDoc
|
||||||
id: 'download',
|
},
|
||||||
label: 'Download',
|
{
|
||||||
component: DownloadDoc
|
id: 'plugin',
|
||||||
},
|
label: 'Plugin',
|
||||||
{
|
component: PluginDoc
|
||||||
id: 'plugin',
|
},
|
||||||
label: 'Plugin',
|
{
|
||||||
component: PluginDoc
|
id: 'styles',
|
||||||
},
|
label: 'Styles',
|
||||||
{
|
component: StylesDoc
|
||||||
id: 'styles',
|
},
|
||||||
label: 'Styles',
|
{
|
||||||
component: StylesDoc
|
id: 'tailwind-config',
|
||||||
},
|
label: 'Tailwind Config',
|
||||||
{
|
children: [
|
||||||
id: 'tailwind-config',
|
{
|
||||||
label: 'Tailwind Config',
|
id: 'primeuiplugin',
|
||||||
children: [
|
label: 'PrimeUI Plugin',
|
||||||
{
|
component: PrimeUIPluginDoc
|
||||||
id: 'primeuiplugin',
|
},
|
||||||
label: 'PrimeUI Plugin',
|
{
|
||||||
component: PrimeUIPluginDoc
|
id: 'postcssimport',
|
||||||
},
|
label: 'PostCSS Import',
|
||||||
{
|
component: PostCSSImportDoc
|
||||||
id: 'postcssimport',
|
},
|
||||||
label: 'PostCSS Import',
|
{
|
||||||
component: PostCSSImportDoc
|
id: 'importstyles',
|
||||||
},
|
label: 'Import Styles',
|
||||||
{
|
component: ImportStylesDoc
|
||||||
id: 'importstyles',
|
}
|
||||||
label: 'Import Styles',
|
]
|
||||||
component: ImportStylesDoc
|
},
|
||||||
}
|
{
|
||||||
]
|
id: 'css-variables',
|
||||||
},
|
label: 'CSS Variables',
|
||||||
{
|
component: CSSVariablesDoc
|
||||||
id: 'css-variables',
|
},
|
||||||
label: 'CSS Variables',
|
{
|
||||||
component: CSSVariablesDoc
|
id: 'example',
|
||||||
},
|
label: 'Example',
|
||||||
{
|
component: ExampleDoc
|
||||||
id: 'example',
|
|
||||||
label: 'Example',
|
|
||||||
component: ExampleDoc
|
|
||||||
}
|
|
||||||
]
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
};
|
]);
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
Loading…
Reference in New Issue