Merge branch 'master' of https://github.com/primefaces/primevue
tugcekucukoglu
commit
7e4946c047
|
|
@ -178,9 +178,9 @@ export default {
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const active = ref('0');
|
||||
const active = ref('0');
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,6 +22,10 @@
|
|||
"name": "Components",
|
||||
"icon": "pi pi-compass",
|
||||
"children": [
|
||||
{
|
||||
"name": "Accordion",
|
||||
"to": "/accordion"
|
||||
},
|
||||
{
|
||||
"name": "Avatar",
|
||||
"to": "/avatar"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,88 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Accordion is defined using <i>AccordionPanel</i>, <i>AccordionHeader</i> and <i>AccordionContent</i> components. Each AccordionPanel must contain a unique <i>value</i> property to specify the active item.</p>
|
||||
</DocSectionText>
|
||||
<div class="card">
|
||||
<Accordion value="0">
|
||||
<AccordionPanel value="0">
|
||||
<AccordionHeader>Header I</AccordionHeader>
|
||||
<AccordionContent>
|
||||
<p class="m-0!">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
</AccordionContent>
|
||||
</AccordionPanel>
|
||||
<AccordionPanel value="1">
|
||||
<AccordionHeader>Header II</AccordionHeader>
|
||||
<AccordionContent>
|
||||
<p class="m-0!">
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
|
||||
ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
|
||||
</p>
|
||||
</AccordionContent>
|
||||
</AccordionPanel>
|
||||
<AccordionPanel value="2">
|
||||
<AccordionHeader>Header III</AccordionHeader>
|
||||
<AccordionContent>
|
||||
<p class="m-0!">
|
||||
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
|
||||
qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
|
||||
</p>
|
||||
</AccordionContent>
|
||||
</AccordionPanel>
|
||||
</Accordion>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Accordion from '@/volt/accordion';
|
||||
import AccordionContent from '@/volt/accordion/accordioncontent';
|
||||
import AccordionHeader from '@/volt/accordion/accordionheader';
|
||||
import AccordionPanel from '@/volt/accordion/accordionpanel';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const code = ref(`
|
||||
<template>
|
||||
<div class="card">
|
||||
<Accordion value="0">
|
||||
<AccordionPanel value="0">
|
||||
<AccordionHeader>Header I</AccordionHeader>
|
||||
<AccordionContent>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
</AccordionContent>
|
||||
</AccordionPanel>
|
||||
<AccordionPanel value="1">
|
||||
<AccordionHeader>Header II</AccordionHeader>
|
||||
<AccordionContent>
|
||||
<p>
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
|
||||
ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
|
||||
</p>
|
||||
</AccordionContent>
|
||||
</AccordionPanel>
|
||||
<AccordionPanel value="2">
|
||||
<AccordionHeader>Header III</AccordionHeader>
|
||||
<AccordionContent>
|
||||
<p>
|
||||
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
|
||||
qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
|
||||
</p>
|
||||
</AccordionContent>
|
||||
</AccordionPanel>
|
||||
</Accordion>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Accordion from '@/volt/accordion';
|
||||
import AccordionPanel from '@/volt/accordion/accordionpanel';
|
||||
import AccordionHeader from '@/volt/accordion/accordionheader';
|
||||
import AccordionContent from '@/volt/accordion/accordioncontent';
|
||||
<\/script>
|
||||
`);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,107 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Panels can be controlled programmatically using <i>value</i> property as a model.</p>
|
||||
</DocSectionText>
|
||||
<div class="card">
|
||||
<div class="flex mb-4 gap-2 justify-end">
|
||||
<Button @click="active = '0'" rounded label="1" class="w-8 h-8 p-0" :outlined="active !== '0'" />
|
||||
<Button @click="active = '1'" rounded label="2" class="w-8 h-8 p-0" :outlined="active !== '1'" />
|
||||
<Button @click="active = '2'" rounded label="3" class="w-8 h-8 p-0" :outlined="active !== '2'" />
|
||||
</div>
|
||||
|
||||
<Accordion v-model:value="active">
|
||||
<AccordionPanel value="0">
|
||||
<AccordionHeader>Header I</AccordionHeader>
|
||||
<AccordionContent>
|
||||
<p class="m-0!">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
</AccordionContent>
|
||||
</AccordionPanel>
|
||||
<AccordionPanel value="1">
|
||||
<AccordionHeader>Header II</AccordionHeader>
|
||||
<AccordionContent>
|
||||
<p class="m-0!">
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
|
||||
ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
|
||||
</p>
|
||||
</AccordionContent>
|
||||
</AccordionPanel>
|
||||
<AccordionPanel value="2">
|
||||
<AccordionHeader>Header III</AccordionHeader>
|
||||
<AccordionContent>
|
||||
<p class="m-0!">
|
||||
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
|
||||
qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
|
||||
</p>
|
||||
</AccordionContent>
|
||||
</AccordionPanel>
|
||||
</Accordion>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Accordion from '@/volt/accordion';
|
||||
import AccordionContent from '@/volt/accordion/accordioncontent';
|
||||
import AccordionHeader from '@/volt/accordion/accordionheader';
|
||||
import AccordionPanel from '@/volt/accordion/accordionpanel';
|
||||
import Button from '@/volt/button';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const active = ref('0');
|
||||
|
||||
const code = ref(`
|
||||
<template>
|
||||
<div class="card">
|
||||
<div class="flex mb-4 gap-2 justify-end">
|
||||
<Button @click="active = '0'" rounded label="1" class="w-8 h-8 p-0" :outlined="active !== '0'" />
|
||||
<Button @click="active = '1'" rounded label="2" class="w-8 h-8 p-0" :outlined="active !== '1'" />
|
||||
<Button @click="active = '2'" rounded label="3" class="w-8 h-8 p-0" :outlined="active !== '2'" />
|
||||
</div>
|
||||
|
||||
<Accordion v-model:value="active">
|
||||
<AccordionPanel value="0">
|
||||
<AccordionHeader>Header I</AccordionHeader>
|
||||
<AccordionContent>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
</AccordionContent>
|
||||
</AccordionPanel>
|
||||
<AccordionPanel value="1">
|
||||
<AccordionHeader>Header II</AccordionHeader>
|
||||
<AccordionContent>
|
||||
<p>
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
|
||||
ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
|
||||
</p>
|
||||
</AccordionContent>
|
||||
</AccordionPanel>
|
||||
<AccordionPanel value="2">
|
||||
<AccordionHeader>Header III</AccordionHeader>
|
||||
<AccordionContent>
|
||||
<p>
|
||||
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
|
||||
qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
|
||||
</p>
|
||||
</AccordionContent>
|
||||
</AccordionPanel>
|
||||
</Accordion>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Accordion from '@/volt/accordion';
|
||||
import AccordionPanel from '@/volt/accordion/accordionpanel';
|
||||
import AccordionHeader from '@/volt/accordion/accordionheader';
|
||||
import AccordionContent from '@/volt/accordion/accordioncontent';
|
||||
import Button from '@/volt/button';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const active = ref('0');
|
||||
<\/script>
|
||||
`);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,94 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Enabling <i>disabled</i> property of an AccordionPanel prevents user interaction.</p>
|
||||
</DocSectionText>
|
||||
<div class="card">
|
||||
<Accordion :value="['0']" multiple>
|
||||
<AccordionPanel value="0">
|
||||
<AccordionHeader>Header I</AccordionHeader>
|
||||
<AccordionContent>
|
||||
<p class="m-0!">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
</AccordionContent>
|
||||
</AccordionPanel>
|
||||
<AccordionPanel value="1">
|
||||
<AccordionHeader>Header II</AccordionHeader>
|
||||
<AccordionContent>
|
||||
<p class="m-0!">
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
|
||||
ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
|
||||
</p>
|
||||
</AccordionContent>
|
||||
</AccordionPanel>
|
||||
<AccordionPanel value="2">
|
||||
<AccordionHeader>Header III</AccordionHeader>
|
||||
<AccordionContent>
|
||||
<p class="m-0!">
|
||||
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
|
||||
qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
|
||||
</p>
|
||||
</AccordionContent>
|
||||
</AccordionPanel>
|
||||
<AccordionPanel value="3" disabled>
|
||||
<AccordionHeader>Header IV</AccordionHeader>
|
||||
</AccordionPanel>
|
||||
</Accordion>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Accordion from '@/volt/accordion';
|
||||
import AccordionContent from '@/volt/accordion/accordioncontent';
|
||||
import AccordionHeader from '@/volt/accordion/accordionheader';
|
||||
import AccordionPanel from '@/volt/accordion/accordionpanel';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const code = ref(`
|
||||
<template>
|
||||
<div class="card">
|
||||
<Accordion :value="['0']" multiple>
|
||||
<AccordionPanel value="0">
|
||||
<AccordionHeader>Header I</AccordionHeader>
|
||||
<AccordionContent>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
</AccordionContent>
|
||||
</AccordionPanel>
|
||||
<AccordionPanel value="1">
|
||||
<AccordionHeader>Header II</AccordionHeader>
|
||||
<AccordionContent>
|
||||
<p>
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
|
||||
ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
|
||||
</p>
|
||||
</AccordionContent>
|
||||
</AccordionPanel>
|
||||
<AccordionPanel value="2">
|
||||
<AccordionHeader>Header III</AccordionHeader>
|
||||
<AccordionContent>
|
||||
<p>
|
||||
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
|
||||
qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
|
||||
</p>
|
||||
</AccordionContent>
|
||||
</AccordionPanel>
|
||||
<AccordionPanel value="3" disabled>
|
||||
<AccordionHeader>Header IV</AccordionHeader>
|
||||
</AccordionPanel>
|
||||
</Accordion>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Accordion from '@/volt/accordion';
|
||||
import AccordionPanel from '@/volt/accordion/accordionpanel';
|
||||
import AccordionHeader from '@/volt/accordion/accordionheader';
|
||||
import AccordionContent from '@/volt/accordion/accordioncontent';
|
||||
<\/script>
|
||||
`);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>AccordionPanel can be generated dynamically using the standard <i>v-for</i> directive.</p>
|
||||
</DocSectionText>
|
||||
<div class="card">
|
||||
<Accordion value="0">
|
||||
<AccordionPanel v-for="tab in tabs" :key="tab.title" :value="tab.value">
|
||||
<AccordionHeader>{{ tab.title }}</AccordionHeader>
|
||||
<AccordionContent>
|
||||
<p class="m-0!">{{ tab.content }}</p>
|
||||
</AccordionContent>
|
||||
</AccordionPanel>
|
||||
</Accordion>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Accordion from '@/volt/accordion';
|
||||
import AccordionContent from '@/volt/accordion/accordioncontent';
|
||||
import AccordionHeader from '@/volt/accordion/accordionheader';
|
||||
import AccordionPanel from '@/volt/accordion/accordionpanel';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const tabs = ref([
|
||||
{ title: 'Title 1', content: 'Content 1', value: '0' },
|
||||
{ title: 'Title 2', content: 'Content 2', value: '1' },
|
||||
{ title: 'Title 3', content: 'Content 3', value: '2' }
|
||||
]);
|
||||
|
||||
const code = ref(`
|
||||
<template>
|
||||
<div class="card">
|
||||
<Accordion value="0">
|
||||
<AccordionPanel v-for="tab in tabs" :key="tab.title" :value="tab.value">
|
||||
<AccordionHeader>{{ tab.title }}</AccordionHeader>
|
||||
<AccordionContent>
|
||||
<p>{{ tab.content }}</p>
|
||||
</AccordionContent>
|
||||
</AccordionPanel>
|
||||
</Accordion>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Accordion from '@/volt/accordion';
|
||||
import AccordionPanel from '@/volt/accordion/accordionpanel';
|
||||
import AccordionHeader from '@/volt/accordion/accordionheader';
|
||||
import AccordionContent from '@/volt/accordion/accordioncontent';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const tabs = ref([
|
||||
{ title: 'Title 1', content: 'Content 1', value: '0' },
|
||||
{ title: 'Title 2', content: 'Content 2', value: '1' },
|
||||
{ title: 'Title 3', content: 'Content 3', value: '2' }
|
||||
]);
|
||||
<\/script>
|
||||
`);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocSectionCode :code="code" lang="script" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const code = ref(`import Accordion from '@/volt/accordion';
|
||||
import AccordionPanel from '@/volt/accordion/accordionpanel';
|
||||
import AccordionHeader from '@/volt/accordion/accordionheader';
|
||||
import AccordionContent from '@/volt/accordion/accordioncontent';
|
||||
`);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,88 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Only one tab at a time can be active by default, enabling <i>multiple</i> property changes this behavior to allow multiple panels. In this case <i>value</i> needs to be an array.</p>
|
||||
</DocSectionText>
|
||||
<div class="card">
|
||||
<Accordion :value="['0']" multiple>
|
||||
<AccordionPanel value="0">
|
||||
<AccordionHeader>Header I</AccordionHeader>
|
||||
<AccordionContent>
|
||||
<p class="m-0!">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
</AccordionContent>
|
||||
</AccordionPanel>
|
||||
<AccordionPanel value="1">
|
||||
<AccordionHeader>Header II</AccordionHeader>
|
||||
<AccordionContent>
|
||||
<p class="m-0!">
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
|
||||
ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
|
||||
</p>
|
||||
</AccordionContent>
|
||||
</AccordionPanel>
|
||||
<AccordionPanel value="2">
|
||||
<AccordionHeader>Header III</AccordionHeader>
|
||||
<AccordionContent>
|
||||
<p class="m-0!">
|
||||
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
|
||||
qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
|
||||
</p>
|
||||
</AccordionContent>
|
||||
</AccordionPanel>
|
||||
</Accordion>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Accordion from '@/volt/accordion';
|
||||
import AccordionContent from '@/volt/accordion/accordioncontent';
|
||||
import AccordionHeader from '@/volt/accordion/accordionheader';
|
||||
import AccordionPanel from '@/volt/accordion/accordionpanel';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const code = ref(`
|
||||
<template>
|
||||
<div class="card">
|
||||
<Accordion :value="['0']" multiple>
|
||||
<AccordionPanel value="0">
|
||||
<AccordionHeader>Header I</AccordionHeader>
|
||||
<AccordionContent>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
</AccordionContent>
|
||||
</AccordionPanel>
|
||||
<AccordionPanel value="1">
|
||||
<AccordionHeader>Header II</AccordionHeader>
|
||||
<AccordionContent>
|
||||
<p>
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
|
||||
ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
|
||||
</p>
|
||||
</AccordionContent>
|
||||
</AccordionPanel>
|
||||
<AccordionPanel value="2">
|
||||
<AccordionHeader>Header III</AccordionHeader>
|
||||
<AccordionContent>
|
||||
<p>
|
||||
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
|
||||
qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
|
||||
</p>
|
||||
</AccordionContent>
|
||||
</AccordionPanel>
|
||||
</Accordion>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Accordion from '@/volt/accordion';
|
||||
import AccordionPanel from '@/volt/accordion/accordionpanel';
|
||||
import AccordionHeader from '@/volt/accordion/accordionheader';
|
||||
import AccordionContent from '@/volt/accordion/accordioncontent';
|
||||
<\/script>
|
||||
`);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,128 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Custom content for a header is defined with the default slot.</p>
|
||||
</DocSectionText>
|
||||
<div class="card">
|
||||
<Accordion value="0" expandIcon="pi pi-plus" collapseIcon="pi pi-minus">
|
||||
<AccordionPanel value="0">
|
||||
<AccordionHeader>
|
||||
<span class="flex items-center gap-2 w-full">
|
||||
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
|
||||
<span class="font-bold whitespace-nowrap">Amy Elsner</span>
|
||||
<Badge value="3" class="ml-auto mr-2" />
|
||||
</span>
|
||||
</AccordionHeader>
|
||||
<AccordionContent>
|
||||
<p class="m-0!">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
</AccordionContent>
|
||||
</AccordionPanel>
|
||||
<AccordionPanel value="1">
|
||||
<AccordionHeader>
|
||||
<span class="flex items-center gap-2 w-full">
|
||||
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
|
||||
<span class="font-bold whitespace-nowrap">Onyama Limba</span>
|
||||
<Badge value="4" class="ml-auto mr-2" />
|
||||
</span>
|
||||
</AccordionHeader>
|
||||
<AccordionContent>
|
||||
<p class="m-0!">
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
|
||||
ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
|
||||
</p>
|
||||
</AccordionContent>
|
||||
</AccordionPanel>
|
||||
<AccordionPanel value="2">
|
||||
<AccordionHeader>
|
||||
<span class="flex items-center gap-2 w-full">
|
||||
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
|
||||
<span class="font-bold whitespace-nowrap">Ioni Bowcher</span>
|
||||
<Badge value="2" class="ml-auto mr-2" />
|
||||
</span>
|
||||
</AccordionHeader>
|
||||
<AccordionContent>
|
||||
<p class="m-0!">
|
||||
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
|
||||
qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
|
||||
</p>
|
||||
</AccordionContent>
|
||||
</AccordionPanel>
|
||||
</Accordion>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Accordion from '@/volt/accordion';
|
||||
import AccordionContent from '@/volt/accordion/accordioncontent';
|
||||
import AccordionHeader from '@/volt/accordion/accordionheader';
|
||||
import AccordionPanel from '@/volt/accordion/accordionpanel';
|
||||
import Avatar from '@/volt/avatar';
|
||||
import Badge from '@/volt/badge';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const code = ref(`
|
||||
<template>
|
||||
<div class="card">
|
||||
<Accordion value="0" expandIcon="pi pi-plus" collapseIcon="pi pi-minus">
|
||||
<AccordionPanel value="0">
|
||||
<AccordionHeader>
|
||||
<span class="flex items-center gap-2 w-full">
|
||||
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
|
||||
<span class="font-bold whitespace-nowrap">Amy Elsner</span>
|
||||
<Badge value="3" class="ml-auto mr-2" />
|
||||
</span>
|
||||
</AccordionHeader>
|
||||
<AccordionContent>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
</AccordionContent>
|
||||
</AccordionPanel>
|
||||
<AccordionPanel value="1">
|
||||
<AccordionHeader>
|
||||
<span class="flex items-center gap-2 w-full">
|
||||
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
|
||||
<span class="font-bold whitespace-nowrap">Onyama Limba</span>
|
||||
<Badge value="4" class="ml-auto mr-2" />
|
||||
</span>
|
||||
</AccordionHeader>
|
||||
<AccordionContent>
|
||||
<p>
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
|
||||
ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
|
||||
</p>
|
||||
</AccordionContent>
|
||||
</AccordionPanel>
|
||||
<AccordionPanel value="2">
|
||||
<AccordionHeader>
|
||||
<span class="flex items-center gap-2 w-full">
|
||||
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
|
||||
<span class="font-bold whitespace-nowrap">Ioni Bowcher</span>
|
||||
<Badge value="2" class="ml-auto mr-2" />
|
||||
</span>
|
||||
</AccordionHeader>
|
||||
<AccordionContent>
|
||||
<p>
|
||||
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
|
||||
qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
|
||||
</p>
|
||||
</AccordionContent>
|
||||
</AccordionPanel>
|
||||
</Accordion>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Avatar from '@/volt/avatar';
|
||||
import Badge from '@/volt/badge';
|
||||
import Accordion from '@/volt/accordion';
|
||||
import AccordionPanel from '@/volt/accordion/accordionpanel';
|
||||
import AccordionHeader from '@/volt/accordion/accordionheader';
|
||||
import AccordionContent from '@/volt/accordion/accordioncontent';
|
||||
<\/script>
|
||||
`);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
<template>
|
||||
<DocComponent title="Vue Accordion Component" header="Accordion" description="Accordion groups a collection of contents in panels." :componentDocs="docs" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BasicDoc from '@/doc/accordion/BasicDoc.vue';
|
||||
import ControlledDoc from '@/doc/accordion/ControlledDoc.vue';
|
||||
import Disabled from '@/doc/accordion/DisabledDoc.vue';
|
||||
import DynamicDoc from '@/doc/accordion/DynamicDoc.vue';
|
||||
import ImportDoc from '@/doc/accordion/ImportDoc.vue';
|
||||
import MultipleDoc from '@/doc/accordion/MultipleDoc.vue';
|
||||
import TemplateDoc from '@/doc/accordion/TemplateDoc.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: 'multiple',
|
||||
label: 'Multiple',
|
||||
component: MultipleDoc
|
||||
},
|
||||
{
|
||||
id: 'disabled',
|
||||
label: 'Disabled',
|
||||
component: Disabled
|
||||
},
|
||||
{
|
||||
id: 'controlled',
|
||||
label: 'Controlled',
|
||||
component: ControlledDoc
|
||||
},
|
||||
{
|
||||
id: 'template',
|
||||
label: 'Template',
|
||||
component: TemplateDoc
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<template>
|
||||
<AccordionContent
|
||||
unstyled
|
||||
:pt="theme"
|
||||
:ptOptions="{
|
||||
mergeProps: ptViewMerge
|
||||
}"
|
||||
>
|
||||
<slot></slot>
|
||||
</AccordionContent>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import AccordionContent from 'primevue/accordioncontent';
|
||||
import { ref } from 'vue';
|
||||
import { ptViewMerge } from '../utils';
|
||||
|
||||
const theme = ref({
|
||||
root: `flex flex-col`,
|
||||
content: `bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0 pt-0 px-[1.125rem] pb-[1.125rem]`,
|
||||
transition: {
|
||||
enterFromClass: 'max-h-0',
|
||||
enterActiveClass: 'overflow-hidden transition-[max-height] duration-1000 ease-[cubic-bezier(0.42,0,0.58,1)]',
|
||||
enterToClass: 'max-h-[1000px]',
|
||||
leaveFromClass: 'max-h-[1000px]',
|
||||
leaveActiveClass: 'overflow-hidden transition-[max-height] duration-[450ms] ease-[cubic-bezier(0,1,0,1)]',
|
||||
leaveToClass: 'max-h-0'
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<template>
|
||||
<AccordionHeader
|
||||
unstyled
|
||||
:pt="theme"
|
||||
:ptOptions="{
|
||||
mergeProps: ptViewMerge
|
||||
}"
|
||||
>
|
||||
<template #toggleicon="{ active }">
|
||||
<ChevronDown v-if="active" />
|
||||
<ChevronUp v-else />
|
||||
</template>
|
||||
<slot></slot>
|
||||
</AccordionHeader>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import ChevronUp from '@primevue/icons/chevrondown';
|
||||
import ChevronDown from '@primevue/icons/chevronup';
|
||||
import AccordionHeader from 'primevue/accordionheader';
|
||||
import { ref } from 'vue';
|
||||
import { ptViewMerge } from '../utils';
|
||||
|
||||
const theme = ref({
|
||||
root: `cursor-pointer disabled:pointer-events-none disabled:opacity-60 flex items-center justify-between p-[1.125rem] font-semibold
|
||||
bg-surface-0 dark:bg-surface-900
|
||||
text-surface-500 dark:text-surface-400
|
||||
hover:text-surface-700 dark:hover:text-surface-0
|
||||
p-active:text-surface-700 dark:p-active:text-surface-0
|
||||
transition-colors duration-200
|
||||
focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-[-1px] focus-visible:outline-primary`,
|
||||
toggleicon: ``
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<template>
|
||||
<AccordionPanel
|
||||
unstyled
|
||||
:pt="theme"
|
||||
:ptOptions="{
|
||||
mergeProps: ptViewMerge
|
||||
}"
|
||||
>
|
||||
<slot></slot>
|
||||
</AccordionPanel>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import AccordionPanel from 'primevue/accordionpanel';
|
||||
import { ref } from 'vue';
|
||||
import { ptViewMerge } from '../utils';
|
||||
|
||||
const theme = ref({
|
||||
root: `flex flex-col border-b border-surface-200 dark:border-surface-700`
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<template>
|
||||
<Accordion
|
||||
unstyled
|
||||
:pt="theme"
|
||||
:ptOptions="{
|
||||
mergeProps: ptViewMerge
|
||||
}"
|
||||
>
|
||||
<slot></slot>
|
||||
</Accordion>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Accordion from 'primevue/accordion';
|
||||
import { ref } from 'vue';
|
||||
import { ptViewMerge } from '../utils';
|
||||
|
||||
const theme = ref({
|
||||
root: ``
|
||||
});
|
||||
</script>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<component v-if="!asChild" :is="as" v-ripple :class="cx('root')" @click="onClick" v-bind="attrs">
|
||||
<component v-if="!asChild" :is="as" v-ripple :data-p="dataP" :class="cx('root')" @click="onClick" v-bind="attrs">
|
||||
<slot :active="$pcAccordionPanel.active"></slot>
|
||||
<slot name="toggleicon" :active="$pcAccordionPanel.active" :class="cx('toggleicon')">
|
||||
<component
|
||||
|
|
@ -22,7 +22,8 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { findSingle, getAttribute, focus } from '@primeuix/utils/dom';
|
||||
import { cn } from '@primeuix/utils';
|
||||
import { findSingle, focus, getAttribute } from '@primeuix/utils/dom';
|
||||
import ChevronDownIcon from '@primevue/icons/chevrondown';
|
||||
import ChevronUpIcon from '@primevue/icons/chevronup';
|
||||
import Ripple from 'primevue/ripple';
|
||||
|
|
@ -158,6 +159,11 @@ export default {
|
|||
active: this.$pcAccordionPanel.active
|
||||
}
|
||||
};
|
||||
},
|
||||
dataP() {
|
||||
return cn({
|
||||
active: this.$pcAccordionPanel.active
|
||||
});
|
||||
}
|
||||
},
|
||||
components: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue