vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-10 09:22:34 +00:00
Code Issues Projects Releases Packages Wiki Activity

Demo fixes

Browse source
This commit is contained in:
Tuğçe Küçükoğlu 2023-03-09 14:39:38 +03:00
parent ef1adfafe8
commit 4eb73f5df2
8 changed files with 55 additions and 70 deletions
Download patch file Download diff file Expand all files Collapse all files

2
doc/datatable/ColumnGroupDoc.vue
View file

@ -196,7 +196,7 @@ export default {
} }
} }
} }
<\\/script> <\/script>
`, `,
composition: ` composition: `
<template> <template>

4
doc/datatable/ExportDoc.vue
View file

@ -73,7 +73,7 @@ export default {
} }
} }
} }
<\\/script> <\/script>
`, `,
composition: ` composition: `
<template> <template>
@ -105,7 +105,7 @@ const products = ref();
const exportCSV = () => { const exportCSV = () => {
dt.value.exportCSV(); dt.value.exportCSV();
}; };
<\\/script> <\/script>
` `
} }
}; };

12
doc/tabview/BasicDoc.vue
View file

@ -3,7 +3,7 @@
<p>TabView consists of one or more TabPanel elements.</p> <p>TabView consists of one or more TabPanel elements.</p>
</DocSectionText> </DocSectionText>
<div class="card"> <div class="card">
<TabView ref="tabview1"> <TabView>
<TabPanel header="Header I"> <TabPanel header="Header I">
<p> <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 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
@ -33,7 +33,7 @@ export default {
return { return {
code: { code: {
basic: ` basic: `
<TabView ref="tabview1"> <TabView>
<TabPanel header="Header I"> <TabPanel header="Header I">
<p> <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 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
@ -57,7 +57,7 @@ export default {
options: ` options: `
<template> <template>
<div class="card"> <div class="card">
<TabView ref="tabview1"> <TabView>
<TabPanel header="Header I"> <TabPanel header="Header I">
<p> <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 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
@ -81,12 +81,12 @@ export default {
</template> </template>
<script> <script>
<\\/script> <\/script>
`, `,
composition: ` composition: `
<template> <template>
<div class="card"> <div class="card">
<TabView ref="tabview1"> <TabView>
<TabPanel header="Header I"> <TabPanel header="Header I">
<p> <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 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
@ -110,7 +110,7 @@ export default {
</template> </template>
<script setup> <script setup>
<\\/script> <\/script>
` `
} }
}; };

47
doc/tabview/ControlledDoc.vue
View file

@ -4,12 +4,12 @@
</DocSectionText> </DocSectionText>
<div class="card"> <div class="card">
<div class="py-2"> <div class="py-2">
<Button @click="active1 = 0" text label="Activate 1st" /> <Button @click="active = 0" text label="Activate 1st" />
<Button @click="active1 = 1" text class="mr-2" label="Activate 2nd" /> <Button @click="active = 1" text class="mr-2" label="Activate 2nd" />
<Button @click="active1 = 2" text class="mr-2" label="Activate 3rd" /> <Button @click="active = 2" text class="mr-2" label="Activate 3rd" />
</div> </div>
<TabView ref="tabview2" v-model:activeIndex="active1"> <TabView v-model:activeIndex="active">
<TabPanel header="Header I"> <TabPanel header="Header I">
<p> <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 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
@ -37,16 +37,16 @@
export default { export default {
data() { data() {
return { return {
active1: 0, active: 0,
code: { code: {
basic: ` basic: `
<div class="py-2"> <div class="py-2">
<Button @click="active1 = 0" text label="Activate 1st" /> <Button @click="active = 0" text label="Activate 1st" />
<Button @click="active1 = 1" text class="mr-2" label="Activate 2nd" /> <Button @click="active = 1" text class="mr-2" label="Activate 2nd" />
<Button @click="active1 = 2" text class="mr-2" label="Activate 3rd" /> <Button @click="active = 2" text class="mr-2" label="Activate 3rd" />
</div> </div>
<TabView ref="tabview2" v-model:activeIndex="active1"> <TabView v-model:activeIndex="active">
<TabPanel header="Header I"> <TabPanel header="Header I">
<p> <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 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
@ -65,18 +65,17 @@ export default {
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. 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> </p>
</TabPanel> </TabPanel>
</TabView> </TabView>`,
`,
options: ` options: `
<template> <template>
<div class="card"> <div class="card">
<div class="py-2"> <div class="py-2">
<Button @click="active1 = 0" text label="Activate 1st" /> <Button @click="active = 0" text label="Activate 1st" />
<Button @click="active1 = 1" text class="mr-2" label="Activate 2nd" /> <Button @click="active = 1" text class="mr-2" label="Activate 2nd" />
<Button @click="active1 = 2" text class="mr-2" label="Activate 3rd" /> <Button @click="active = 2" text class="mr-2" label="Activate 3rd" />
</div> </div>
<TabView ref="tabview2" v-model:activeIndex="active1"> <TabView v-model:activeIndex="active">
<TabPanel header="Header I"> <TabPanel header="Header I">
<p> <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 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
@ -103,22 +102,21 @@ export default {
export default { export default {
data() { data() {
return { return {
active1: 0 active: 0
}; };
} }
}; };
<\\/script> <\/script>`,
`,
composition: ` composition: `
<template> <template>
<div class="card"> <div class="card">
<div class="py-2"> <div class="py-2">
<Button @click="active1 = 0" text label="Activate 1st" /> <Button @click="active = 0" text label="Activate 1st" />
<Button @click="active1 = 1" text class="mr-2" label="Activate 2nd" /> <Button @click="active = 1" text class="mr-2" label="Activate 2nd" />
<Button @click="active1 = 2" text class="mr-2" label="Activate 3rd" /> <Button @click="active = 2" text class="mr-2" label="Activate 3rd" />
</div> </div>
<TabView ref="tabview2" v-model:activeIndex="active1"> <TabView v-model:activeIndex="active">
<TabPanel header="Header I"> <TabPanel header="Header I">
<p> <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 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
@ -144,9 +142,8 @@ export default {
<script setup> <script setup>
import { ref } from 'vue'; import { ref } from 'vue';
const active1 = ref(0); const active = ref(0);
<\\/script> <\/script>`
`
} }
}; };
} }

17
doc/tabview/DisabledDoc.vue
View file

@ -3,7 +3,7 @@
<p>Enabling <i>disabled</i> property of a TabPanel prevents user interaction.</p> <p>Enabling <i>disabled</i> property of a TabPanel prevents user interaction.</p>
</DocSectionText> </DocSectionText>
<div class="card"> <div class="card">
<TabView ref="tabview3"> <TabView>
<TabPanel header="Header I"> <TabPanel header="Header I">
<p> <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 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
@ -34,7 +34,7 @@ export default {
return { return {
code: { code: {
basic: ` basic: `
<TabView ref="tabview3"> <TabView>
<TabPanel header="Header I"> <TabPanel header="Header I">
<p> <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 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
@ -55,12 +55,11 @@ export default {
</p> </p>
</TabPanel> </TabPanel>
<TabPanel header="Header IV" :disabled="true"></TabPanel> <TabPanel header="Header IV" :disabled="true"></TabPanel>
</TabView> </TabView>`,
`,
options: ` options: `
<template> <template>
<div class="card"> <div class="card">
<TabView ref="tabview3"> <TabView>
<TabPanel header="Header I"> <TabPanel header="Header I">
<p> <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 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
@ -85,12 +84,11 @@ export default {
</template> </template>
<script> <script>
<\\/script> <\/script>`,
`,
composition: ` composition: `
<template> <template>
<div class="card"> <div class="card">
<TabView ref="tabview3"> <TabView>
<TabPanel header="Header I"> <TabPanel header="Header I">
<p> <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 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
@ -115,8 +113,7 @@ export default {
</template> </template>
<script setup> <script setup>
<\\/script> <\/script>`
`
} }
}; };
} }

9
doc/tabview/DynamicDoc.vue
View file

@ -27,8 +27,7 @@ export default {
<TabPanel v-for="tab in tabs" :key="tab.title" :header="tab.title"> <TabPanel v-for="tab in tabs" :key="tab.title" :header="tab.title">
<p>{{ tab.content }}</p> <p>{{ tab.content }}</p>
</TabPanel> </TabPanel>
</TabView> </TabView>`,
`,
options: ` options: `
<template> <template>
<div class="card"> <div class="card">
@ -52,8 +51,7 @@ export default {
}; };
} }
}; };
<\\/script> <\/script>`,
`,
composition: ` composition: `
<template> <template>
<div class="card"> <div class="card">
@ -73,8 +71,7 @@ const tabs = ref([
{ title: 'Tab 2', content: 'Tab 2 Content' }, { title: 'Tab 2', content: 'Tab 2 Content' },
{ title: 'Tab 3', content: 'Tab 3 Content' } { title: 'Tab 3', content: 'Tab 3 Content' }
]); ]);
<\\/script> <\/script>`
`
} }
}; };
} }

9
doc/tabview/ScrollableDoc.vue
View file

@ -23,8 +23,7 @@ export default {
<TabPanel v-for="tab in scrollableTabs" :key="tab.title" :header="tab.title"> <TabPanel v-for="tab in scrollableTabs" :key="tab.title" :header="tab.title">
<p>{{ tab.content }}</p> <p>{{ tab.content }}</p>
</TabPanel> </TabPanel>
</TabView> </TabView>`,
`,
options: ` options: `
<template> <template>
<div class="card"> <div class="card">
@ -44,8 +43,7 @@ export default {
}; };
} }
}; };
<\\/script> <\/script>`,
`,
composition: ` composition: `
<template> <template>
<div class="card"> <div class="card">
@ -61,8 +59,7 @@ export default {
import { ref } from 'vue'; import { ref } from 'vue';
const scrollableTabs = ref(Array.from({ length: 50 }, (_, i) => ({ title: \`Tab \${i + 1}\`, content: \`Tab \${i + 1} Content\` }))); const scrollableTabs = ref(Array.from({ length: 50 }, (_, i) => ({ title: \`Tab \${i + 1}\`, content: \`Tab \${i + 1} Content\` })));
<\\/script> <\/script>`
`
} }
}; };
} }

17
doc/tabview/TemplateDoc.vue
View file

@ -3,7 +3,7 @@
<p>Custom content for the title section of a panel is defined using the header template.</p> <p>Custom content for the title section of a panel is defined using the header template.</p>
</DocSectionText> </DocSectionText>
<div class="card"> <div class="card">
<TabView ref="tabview4" class="tabview-custom"> <TabView class="tabview-custom">
<TabPanel> <TabPanel>
<template #header> <template #header>
<i class="pi pi-calendar mr-2"></i> <i class="pi pi-calendar mr-2"></i>
@ -46,7 +46,7 @@ export default {
return { return {
code: { code: {
basic: ` basic: `
<TabView ref="tabview4" class="tabview-custom"> <TabView class="tabview-custom">
<TabPanel> <TabPanel>
<template #header> <template #header>
<i class="pi pi-calendar mr-2"></i> <i class="pi pi-calendar mr-2"></i>
@ -78,12 +78,11 @@ export default {
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. 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> </p>
</TabPanel> </TabPanel>
</TabView> </TabView>`,
`,
options: ` options: `
<template> <template>
<div class="card"> <div class="card">
<TabView ref="tabview4" class="tabview-custom"> <TabView class="tabview-custom">
<TabPanel> <TabPanel>
<template #header> <template #header>
<i class="pi pi-calendar mr-2"></i> <i class="pi pi-calendar mr-2"></i>
@ -120,12 +119,11 @@ export default {
</template> </template>
<script> <script>
<\\/script> <\/script>`,
`,
composition: ` composition: `
<template> <template>
<div class="card"> <div class="card">
<TabView ref="tabview4" class="tabview-custom"> <TabView class="tabview-custom">
<TabPanel> <TabPanel>
<template #header> <template #header>
<i class="pi pi-calendar ml-2"></i> <i class="pi pi-calendar ml-2"></i>
@ -162,8 +160,7 @@ export default {
</template> </template>
<script setup> <script setup>
<\\/script> <\/script>`
`
} }
}; };
} }