Remove pt demos
tugcekucukoglu
parent
2a785c2420
commit
44e640bfb4
|
|
@ -1,127 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs"> </DocSectionText>
|
||||
<div class="card">
|
||||
<Accordion :activeIndex="0">
|
||||
<AccordionTab
|
||||
v-for="(tab, index) in tabs"
|
||||
:key="tab.title"
|
||||
:header="tab.title"
|
||||
:pt="{
|
||||
headerAction: ({ props, parent }) => ({
|
||||
class: panelClass(props, parent, index)
|
||||
})
|
||||
}"
|
||||
>
|
||||
<p>{{ tab.content }}</p>
|
||||
</AccordionTab>
|
||||
</Accordion>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tabs: Array.from({ length: 3 }, (_, i) => ({
|
||||
title: `Header ${i + 1}`,
|
||||
content: `Tab ${i + 1} Content`
|
||||
})),
|
||||
code: {
|
||||
basic: `
|
||||
<Accordion :activeIndex="0">
|
||||
<AccordionTab v-for="(tab, index) in tabs" :key="tab.title" :header="tab.title"
|
||||
:pt="{
|
||||
headerAction: ({ props, parent }) => ({
|
||||
class: panelClass(props, parent, index)
|
||||
})
|
||||
}">
|
||||
<p>{{ tab.content }}</p>
|
||||
</AccordionTab>
|
||||
</Accordion>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<Accordion :activeIndex="0">
|
||||
<AccordionTab v-for="(tab, index) in tabs" :key="tab.title" :header="tab.title"
|
||||
:pt="{
|
||||
headerAction: ({ props, parent }) => ({
|
||||
class: panelClass(props, parent, index)
|
||||
})
|
||||
}">
|
||||
<p>{{ tab.content }}</p>
|
||||
</AccordionTab>
|
||||
</Accordion>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tabs: Array.from({ length: 3 }, (_, i) => ({
|
||||
title: \`Header \${i + 1}\`,
|
||||
content: \`Tab \${i + 1} Content\`
|
||||
}))
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
panelClass(props, parent, index) {
|
||||
return [
|
||||
{
|
||||
'bg-primary': parent.state.d_activeIndex === index
|
||||
}
|
||||
];
|
||||
}
|
||||
}
|
||||
}
|
||||
<\/script>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<Accordion :activeIndex="0">
|
||||
<AccordionTab v-for="(tab, index) in tabs" :key="tab.title" :header="tab.title"
|
||||
:pt="{
|
||||
headerAction: ({ props, parent }) => ({
|
||||
class: panelClass(props, parent, index)
|
||||
})
|
||||
}">
|
||||
<p>{{ tab.content }}</p>
|
||||
</AccordionTab>
|
||||
</Accordion>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const tabs = ref(Array.from({ length: 3 }, (_, i) => ({
|
||||
title: \`Header \${i + 1}\`,
|
||||
content: \`Tab \${i + 1} Content\`
|
||||
})));
|
||||
|
||||
const panelClass = (props, parent, index) => {
|
||||
return [
|
||||
{
|
||||
'bg-primary': parent.state.d_activeIndex === index
|
||||
}
|
||||
];
|
||||
};
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
panelClass(props, parent, index) {
|
||||
return [
|
||||
{
|
||||
'bg-primary': parent.state.d_activeIndex === index
|
||||
}
|
||||
];
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
|
||||
import PtDoc from './PTDoc.vue';
|
||||
import PTImage from './PTImage.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -34,11 +33,6 @@ export default {
|
|||
label: 'AccordionTab PT Options',
|
||||
component: DocApiTable,
|
||||
data: getPTOption('AccordionTab')
|
||||
},
|
||||
{
|
||||
id: 'pt.demo',
|
||||
label: 'Demo',
|
||||
component: PtDoc
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,109 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs"></DocSectionText>
|
||||
<div class="card flex justify-content-center">
|
||||
<AutoComplete
|
||||
v-model="value"
|
||||
:suggestions="items"
|
||||
@complete="search"
|
||||
:pt="{
|
||||
input: { class: 'w-16rem' },
|
||||
item: ({ props, state, context }) => ({
|
||||
class: context.selected ? 'bg-blue-300' : context.focused ? 'bg-blue-100' : undefined
|
||||
})
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
items: [],
|
||||
code: {
|
||||
basic: `
|
||||
<AutoComplete
|
||||
v-model="value"
|
||||
:suggestions="items"
|
||||
@complete="search"
|
||||
:pt="{
|
||||
input: { class: 'w-16rem' },
|
||||
item: ({ props, state, context }) => ({
|
||||
class: context.selected ? 'bg-blue-300' : context.focused ? 'bg-blue-100' : undefined
|
||||
})
|
||||
}"
|
||||
/>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<AutoComplete
|
||||
v-model="value"
|
||||
:suggestions="items"
|
||||
@complete="search"
|
||||
:pt="{
|
||||
input: { class: 'w-16rem' },
|
||||
item: ({ props, state, context }) => ({
|
||||
class: context.selected ? 'bg-blue-300' : context.focused ? 'bg-blue-100' : undefined
|
||||
})
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
items: []
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
search(event) {
|
||||
this.items = [...Array(10).keys()].map((item) => event.query + '-' + item);
|
||||
}
|
||||
}
|
||||
};
|
||||
<\/script>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<AutoComplete
|
||||
v-model="value"
|
||||
:suggestions="items"
|
||||
@complete="search"
|
||||
:pt="{
|
||||
input: { class: 'w-16rem' },
|
||||
item: ({ props, state, context }) => ({
|
||||
class: context.selected ? 'bg-blue-300' : context.focused ? 'bg-blue-100' : undefined
|
||||
})
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const value = ref("");
|
||||
const items = ref([]);
|
||||
|
||||
const search = (event) => {
|
||||
items.value = [...Array(10).keys()].map((item) => event.query + '-' + item);
|
||||
}
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
search(event) {
|
||||
this.items = [...Array(10).keys()].map((item) => event.query + '-' + item);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
|
||||
import PtDoc from './PTDoc.vue';
|
||||
import PTImage from './PTImage.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -28,11 +27,6 @@ export default {
|
|||
label: 'AutoComplete PT Options',
|
||||
component: DocApiTable,
|
||||
data: getPTOption('AutoComplete')
|
||||
},
|
||||
{
|
||||
id: 'pt.demo',
|
||||
label: 'Demo',
|
||||
component: PtDoc
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,43 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs"> </DocSectionText>
|
||||
<div class="card flex justify-content-center">
|
||||
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" :pt="{ image: { class: 'w-4rem h-4rem' } }" />
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
basic: `
|
||||
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png"
|
||||
:pt="{
|
||||
image: { class: 'w-4rem h-4rem' }
|
||||
}"
|
||||
/>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png"
|
||||
:pt="{
|
||||
image: { class: 'w-4rem h-4rem' }
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png"
|
||||
:pt="{
|
||||
image: { class: 'w-4rem h-4rem' }
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
|
||||
import PtDoc from './PTDoc.vue';
|
||||
import PTImage from './PTImage.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -34,11 +33,6 @@ export default {
|
|||
label: 'AvatarGroup PT Options',
|
||||
component: DocApiTable,
|
||||
data: getPTOption('AvatarGroup')
|
||||
},
|
||||
{
|
||||
id: 'pt.demo',
|
||||
label: 'Demo',
|
||||
component: PtDoc
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,100 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs"> </DocSectionText>
|
||||
<div class="card flex justify-content-center align-items-center gap-2">
|
||||
<Badge
|
||||
value="2"
|
||||
:pt="{
|
||||
root: 'bg-primary border-round-xl'
|
||||
}"
|
||||
/>
|
||||
<i
|
||||
v-badge.danger="{
|
||||
value: '5+',
|
||||
pt: {
|
||||
root: 'bg-primary'
|
||||
}
|
||||
}"
|
||||
class="pi pi-calendar text-4xl"
|
||||
/>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
basic: `
|
||||
// component
|
||||
<Badge
|
||||
value="2"
|
||||
:pt="{
|
||||
root: 'bg-primary border-round-xl'
|
||||
}"
|
||||
/>
|
||||
|
||||
// directive
|
||||
<i
|
||||
v-badge.danger="{
|
||||
value: '5+',
|
||||
pt: {
|
||||
root: 'bg-primary'
|
||||
}
|
||||
}"
|
||||
class="pi pi-calendar text-4xl"
|
||||
/>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center align-items-center gap-2">
|
||||
// component
|
||||
<Badge
|
||||
value="2"
|
||||
:pt="{
|
||||
root: 'bg-primary border-round-xl'
|
||||
}"
|
||||
/>
|
||||
|
||||
// directive
|
||||
<i
|
||||
v-badge.danger="{
|
||||
value: '5+',
|
||||
pt: {
|
||||
root: 'bg-primary'
|
||||
}
|
||||
}"
|
||||
class="pi pi-calendar text-4xl"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center align-items-center gap-2">
|
||||
// component
|
||||
<Badge
|
||||
value="2"
|
||||
:pt="{
|
||||
root: 'bg-primary border-round-xl'
|
||||
}"
|
||||
/>
|
||||
|
||||
// directive
|
||||
<i
|
||||
v-badge.danger="{
|
||||
value: '5+',
|
||||
pt: {
|
||||
root: 'bg-primary'
|
||||
}
|
||||
}"
|
||||
class="pi pi-calendar text-4xl"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
|
||||
import PtDoc from './PTDoc.vue';
|
||||
import PTImage from './PTImage.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -28,11 +27,6 @@ export default {
|
|||
label: 'Badge PT Options',
|
||||
component: DocApiTable,
|
||||
data: getPTOption('Badge')
|
||||
},
|
||||
{
|
||||
id: 'pt.demo',
|
||||
label: 'Demo',
|
||||
component: PtDoc
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,56 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs"> </DocSectionText>
|
||||
<div class="card">
|
||||
<div class="mb-3">
|
||||
<Button label="Block" @click="blocked = true" class="mr-2"></Button>
|
||||
<Button label="Unblock" @click="blocked = false"></Button>
|
||||
</div>
|
||||
<BlockUI :blocked="blocked" :pt="{ root: { class: 'surface-ground p-2 border-round-sm' } }">
|
||||
<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>
|
||||
</BlockUI>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
blocked: false,
|
||||
code: {
|
||||
basic: `
|
||||
<BlockUI :blocked="blocked" :pt="{ root: { class: 'surface-ground p-2 border-round-sm' } }">
|
||||
<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>
|
||||
</BlockUI>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<BlockUI :blocked="blocked" :pt="{ root: { class: 'surface-ground p-2 border-round-sm' } }">
|
||||
<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>
|
||||
</BlockUI>
|
||||
</template>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<BlockUI :blocked="blocked" :pt="{ root: { class: 'surface-ground p-2 border-round-sm' } }">
|
||||
<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>
|
||||
</BlockUI>
|
||||
</template>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
|
||||
import PtDoc from './PTDoc.vue';
|
||||
import PTImage from './PTImage.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -28,11 +27,6 @@ export default {
|
|||
label: 'BlockUI PT Options',
|
||||
component: DocApiTable,
|
||||
data: getPTOption('BlockUI')
|
||||
},
|
||||
{
|
||||
id: 'pt.demo',
|
||||
label: 'Demo',
|
||||
component: PtDoc
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,107 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs"> </DocSectionText>
|
||||
<div class="card flex justify-content-center">
|
||||
<Breadcrumb
|
||||
:home="home"
|
||||
:model="items"
|
||||
:pt="{
|
||||
root: { class: 'surface-ground' },
|
||||
label: ({ props }) => ({
|
||||
class: props.index === items.length - 1 ? 'font-italic' : undefined
|
||||
})
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
home: {
|
||||
icon: 'pi pi-home',
|
||||
to: '/'
|
||||
},
|
||||
items: [{ label: 'Computer' }, { label: 'Notebook' }, { label: 'Accessories' }, { label: 'Backpacks' }, { label: 'Item' }],
|
||||
code: {
|
||||
basic: `
|
||||
<Breadcrumb :home="home" :model="items"
|
||||
:pt="{
|
||||
root: { class: 'surface-ground' },
|
||||
label: ({ props }) => ({
|
||||
class: props.index === items.length - 1 ? 'font-italic' : undefined
|
||||
})
|
||||
}"
|
||||
/>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<Breadcrumb :home="home" :model="items"
|
||||
:pt="{
|
||||
root: { class: 'surface-ground' },
|
||||
label: ({ props }) => ({
|
||||
class: props.index === items.length - 1 ? 'font-italic' : undefined
|
||||
})
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
home: {
|
||||
icon: 'pi pi-home',
|
||||
to: '/',
|
||||
},
|
||||
items: [
|
||||
{label: 'Computer'},
|
||||
{label: 'Notebook'},
|
||||
{label: 'Accessories'},
|
||||
{label: 'Backpacks'},
|
||||
{label: 'Item'}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
<\/script>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<Breadcrumb :home="home" :model="items"
|
||||
:pt="{
|
||||
root: { class: 'surface-ground' },
|
||||
label: ({ props }) => ({
|
||||
class: props.index === items.length - 1 ? 'font-italic' : undefined
|
||||
})
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const home = ref({
|
||||
icon: 'pi pi-home',
|
||||
to: '/',
|
||||
});
|
||||
|
||||
const items = ref([
|
||||
{label: 'Computer'},
|
||||
{label: 'Notebook'},
|
||||
{label: 'Accessories'},
|
||||
{label: 'Backpacks'},
|
||||
{label: 'Item'}
|
||||
]);
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
|
||||
import PtDoc from './PTDoc.vue';
|
||||
import PTImage from './PTImage.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -28,11 +27,6 @@ export default {
|
|||
label: 'Breadcrumb PT Options',
|
||||
component: DocApiTable,
|
||||
data: getPTOption('Breadcrumb')
|
||||
},
|
||||
{
|
||||
id: 'pt.demo',
|
||||
label: 'Demo',
|
||||
component: PtDoc
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,47 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs"> </DocSectionText>
|
||||
<div class="card flex flex-wrap gap-3 justify-content-center">
|
||||
<Button label="Submit" icon="pi pi-check" :pt="{ root: { class: 'bg-indigo-600 border-indigo-600' } }" />
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
basic: `
|
||||
<Button label="Submit" icon="pi pi-check"
|
||||
:pt="{
|
||||
root: { class: 'bg-indigo-600 border-indigo-600' }
|
||||
}"
|
||||
/>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex flex-wrap gap-3 justify-content-center">
|
||||
<Button label="Submit" icon="pi pi-check"
|
||||
:pt="{
|
||||
root: { class: 'bg-indigo-600 border-indigo-600' }
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex flex-wrap gap-3 justify-content-center">
|
||||
<Button label="Submit" icon="pi pi-check"
|
||||
:pt="{
|
||||
root: { class: 'bg-indigo-600 border-indigo-600' }
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
|
||||
import PtDoc from './PTDoc.vue';
|
||||
import PTImage from './PTImage.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -28,11 +27,6 @@ export default {
|
|||
label: 'Button PT Options',
|
||||
component: DocApiTable,
|
||||
data: getPTOption('Button')
|
||||
},
|
||||
{
|
||||
id: 'pt.demo',
|
||||
label: 'Demo',
|
||||
component: PtDoc
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,88 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs"> </DocSectionText>
|
||||
<div class="card flex justify-content-center">
|
||||
<Calendar
|
||||
v-model="date"
|
||||
showIcon
|
||||
:pt="{
|
||||
input: { class: 'w-16rem' },
|
||||
dropdownButton: {
|
||||
root: { class: 'bg-teal-500 border-teal-500' }
|
||||
}
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
date: null,
|
||||
code: {
|
||||
basic: `
|
||||
<Calendar
|
||||
v-model="date"
|
||||
showIcon
|
||||
:pt="{
|
||||
input: { class: 'w-16rem' },
|
||||
dropdownButton: {
|
||||
root: { class: 'bg-teal-500 border-teal-500' }
|
||||
}
|
||||
}"
|
||||
/>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<Calendar
|
||||
v-model="date"
|
||||
showIcon
|
||||
:pt="{
|
||||
input: { class: 'w-16rem' },
|
||||
dropdownButton: {
|
||||
root: { class: 'bg-teal-500 border-teal-500' }
|
||||
}
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
date: null
|
||||
};
|
||||
}
|
||||
};
|
||||
<\/script>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<Calendar
|
||||
v-model="date"
|
||||
showIcon
|
||||
:pt="{
|
||||
input: { class: 'w-16rem' },
|
||||
dropdownButton: {
|
||||
root: { class: 'bg-teal-500 border-teal-500' }
|
||||
}
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const date = ref();
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
|
||||
import PtDoc from './PTDoc.vue';
|
||||
import PTImage from './PTImage.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -28,11 +27,6 @@ export default {
|
|||
label: 'Calendar PT Options',
|
||||
component: DocApiTable,
|
||||
data: getPTOption('Calendar')
|
||||
},
|
||||
{
|
||||
id: 'pt.demo',
|
||||
label: 'Demo',
|
||||
component: PtDoc
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,67 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs"> </DocSectionText>
|
||||
<div class="card">
|
||||
<Card :pt="{ body: { class: 'bg-primary border-round-lg' } }">
|
||||
<template #title> Simple Card </template>
|
||||
<template #content>
|
||||
<p>
|
||||
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>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
basic: `
|
||||
<Card :pt="{ body: { class: 'bg-primary border-round-lg' } }">
|
||||
<template #title> Simple Card </template>
|
||||
<template #content>
|
||||
<p>
|
||||
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>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<Card :pt="{ body: { class: 'bg-primary border-round-lg' } }">
|
||||
<template #title> Simple Card </template>
|
||||
<template #content>
|
||||
<p>
|
||||
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>
|
||||
</template>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<Card :pt="{ body: { class: 'bg-primary border-round-lg' } }">
|
||||
<template #title> Simple Card </template>
|
||||
<template #content>
|
||||
<p>
|
||||
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>
|
||||
</template>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
|
||||
import PtDoc from './PTDoc.vue';
|
||||
import PTImage from './PTImage.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -28,11 +27,6 @@ export default {
|
|||
label: 'Card PT Options',
|
||||
component: DocApiTable,
|
||||
data: getPTOption('Card')
|
||||
},
|
||||
{
|
||||
id: 'pt.demo',
|
||||
label: 'Demo',
|
||||
component: PtDoc
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,299 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs"></DocSectionText>
|
||||
<div class="card">
|
||||
<Carousel
|
||||
:value="products"
|
||||
:numVisible="3"
|
||||
:numScroll="3"
|
||||
:responsiveOptions="responsiveOptions"
|
||||
:pt="{
|
||||
indicatorButton: { class: 'border-round-lg' }
|
||||
}"
|
||||
>
|
||||
<template #item="slotProps">
|
||||
<div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
|
||||
<div class="mb-3">
|
||||
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-6" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="mb-1">{{ slotProps.data.name }}</h4>
|
||||
<h6 class="mt-0 mb-3">${{ slotProps.data.price }}</h6>
|
||||
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
|
||||
<div class="mt-5 flex align-items-center justify-content-center gap-2">
|
||||
<Button icon="pi pi-search" rounded />
|
||||
<Button icon="pi pi-star-fill" rounded severity="secondary" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Carousel>
|
||||
</div>
|
||||
<DocSectionCode :code="code" :service="['ProductService']" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ProductService } from '@/service/ProductService';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
products: null,
|
||||
responsiveOptions: [
|
||||
{
|
||||
breakpoint: '1400px',
|
||||
numVisible: 2,
|
||||
numScroll: 1
|
||||
},
|
||||
{
|
||||
breakpoint: '1199px',
|
||||
numVisible: 3,
|
||||
numScroll: 1
|
||||
},
|
||||
{
|
||||
breakpoint: '767px',
|
||||
numVisible: 2,
|
||||
numScroll: 1
|
||||
},
|
||||
{
|
||||
breakpoint: '575px',
|
||||
numVisible: 1,
|
||||
numScroll: 1
|
||||
}
|
||||
],
|
||||
code: {
|
||||
basic: `
|
||||
<Carousel
|
||||
:value="products"
|
||||
:numVisible="3"
|
||||
:numScroll="3"
|
||||
:responsiveOptions="responsiveOptions"
|
||||
:pt="{
|
||||
indicatorButton: { class: 'border-round-lg' }
|
||||
}"
|
||||
>
|
||||
<template #item="slotProps">
|
||||
<div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
|
||||
<div class="mb-3">
|
||||
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-6" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="mb-1">{{ slotProps.data.name }}</h4>
|
||||
<h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
|
||||
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
|
||||
<div class="mt-5 flex align-items-center justify-content-center gap-2">
|
||||
<Button icon="pi pi-search" rounded />
|
||||
<Button icon="pi pi-star-fill" rounded severity="secondary" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Carousel>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<Carousel
|
||||
:value="products"
|
||||
:numVisible="3"
|
||||
:numScroll="3"
|
||||
:responsiveOptions="responsiveOptions"
|
||||
:pt="{
|
||||
indicatorButton: { class: 'border-round-lg' }
|
||||
}"
|
||||
>
|
||||
<template #item="slotProps">
|
||||
<div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
|
||||
<div class="mb-3">
|
||||
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-6" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="mb-1">{{ slotProps.data.name }}</h4>
|
||||
<h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
|
||||
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
|
||||
<div class="mt-5 flex align-items-center justify-content-center gap-2">
|
||||
<Button icon="pi pi-search" rounded />
|
||||
<Button icon="pi pi-star-fill" rounded severity="secondary" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Carousel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ProductService } from '@/service/ProductService';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
products: null,
|
||||
responsiveOptions: [
|
||||
{
|
||||
breakpoint: '1400px',
|
||||
numVisible: 2,
|
||||
numScroll: 1
|
||||
},
|
||||
{
|
||||
breakpoint: '1199px',
|
||||
numVisible: 3,
|
||||
numScroll: 1
|
||||
},
|
||||
{
|
||||
breakpoint: '767px',
|
||||
numVisible: 2,
|
||||
numScroll: 1
|
||||
},
|
||||
{
|
||||
breakpoint: '575px',
|
||||
numVisible: 1,
|
||||
numScroll: 1
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
ProductService.getProductsSmall().then((data) => (this.products = data.slice(0, 9)));
|
||||
},
|
||||
methods: {
|
||||
getSeverity(status) {
|
||||
switch (status) {
|
||||
case 'INSTOCK':
|
||||
return 'success';
|
||||
|
||||
case 'LOWSTOCK':
|
||||
return 'warning';
|
||||
|
||||
case 'OUTOFSTOCK':
|
||||
return 'danger';
|
||||
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
<\/script>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<Carousel
|
||||
:value="products"
|
||||
:numVisible="3"
|
||||
:numScroll="3"
|
||||
:responsiveOptions="responsiveOptions"
|
||||
:pt="{
|
||||
indicatorButton: { class: 'border-round-lg' }
|
||||
}"
|
||||
>
|
||||
<template #item="slotProps">
|
||||
<div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
|
||||
<div class="mb-3">
|
||||
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-6" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="mb-1">{{ slotProps.data.name }}</h4>
|
||||
<h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
|
||||
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
|
||||
<div class="mt-5 flex align-items-center justify-content-center gap-2">
|
||||
<Button icon="pi pi-search" rounded />
|
||||
<Button icon="pi pi-star-fill" rounded severity="secondary" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Carousel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import { ProductService } from '@/service/ProductService';
|
||||
|
||||
onMounted(() => {
|
||||
ProductService.getProductsSmall().then((data) => (products.value = data.slice(0, 9)));
|
||||
})
|
||||
|
||||
const products = ref();
|
||||
const responsiveOptions = ref([
|
||||
{
|
||||
breakpoint: '1400px',
|
||||
numVisible: 2,
|
||||
numScroll: 1
|
||||
},
|
||||
{
|
||||
breakpoint: '1199px',
|
||||
numVisible: 3,
|
||||
numScroll: 1
|
||||
},
|
||||
{
|
||||
breakpoint: '767px',
|
||||
numVisible: 2,
|
||||
numScroll: 1
|
||||
},
|
||||
{
|
||||
breakpoint: '575px',
|
||||
numVisible: 1,
|
||||
numScroll: 1
|
||||
}
|
||||
]);
|
||||
|
||||
const getSeverity = (status) => {
|
||||
switch (status) {
|
||||
case 'INSTOCK':
|
||||
return 'success';
|
||||
|
||||
case 'LOWSTOCK':
|
||||
return 'warning';
|
||||
|
||||
case 'OUTOFSTOCK':
|
||||
return 'danger';
|
||||
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
<\/script>
|
||||
`,
|
||||
data: `
|
||||
/* ProductService */
|
||||
{
|
||||
id: '1000',
|
||||
code: 'f230fh0g3',
|
||||
name: 'Bamboo Watch',
|
||||
description: 'Product Description',
|
||||
image: 'bamboo-watch.jpg',
|
||||
price: 65,
|
||||
category: 'Accessories',
|
||||
quantity: 24,
|
||||
inventoryStatus: 'INSTOCK',
|
||||
rating: 5
|
||||
},
|
||||
...`
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
ProductService.getProductsSmall().then((data) => (this.products = data.slice(0, 9)));
|
||||
},
|
||||
methods: {
|
||||
getSeverity(status) {
|
||||
switch (status) {
|
||||
case 'INSTOCK':
|
||||
return 'success';
|
||||
|
||||
case 'LOWSTOCK':
|
||||
return 'warning';
|
||||
|
||||
case 'OUTOFSTOCK':
|
||||
return 'danger';
|
||||
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
|
||||
import PtDoc from './PTDoc.vue';
|
||||
import PTImage from './PTImage.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -28,11 +27,6 @@ export default {
|
|||
label: 'Carousel PT Options',
|
||||
component: DocApiTable,
|
||||
data: getPTOption('Carousel')
|
||||
},
|
||||
{
|
||||
id: 'pt.demo',
|
||||
label: 'Demo',
|
||||
component: PtDoc
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,314 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs"></DocSectionText>
|
||||
<div class="card flex justify-content-center">
|
||||
<CascadeSelect
|
||||
v-model="selectedCity"
|
||||
:options="countries"
|
||||
optionLabel="cname"
|
||||
optionGroupLabel="name"
|
||||
:optionGroupChildren="['states', 'cities']"
|
||||
placeholder="Select a City"
|
||||
:pt="{
|
||||
root: { style: { minWidth: '14rem' } }
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
selectedCity: null,
|
||||
countries: [
|
||||
{
|
||||
name: 'Australia',
|
||||
code: 'AU',
|
||||
states: [
|
||||
{
|
||||
name: 'New South Wales',
|
||||
cities: [
|
||||
{ cname: 'Sydney', code: 'A-SY' },
|
||||
{ cname: 'Newcastle', code: 'A-NE' },
|
||||
{ cname: 'Wollongong', code: 'A-WO' }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Queensland',
|
||||
cities: [
|
||||
{ cname: 'Brisbane', code: 'A-BR' },
|
||||
{ cname: 'Townsville', code: 'A-TO' }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Canada',
|
||||
code: 'CA',
|
||||
states: [
|
||||
{
|
||||
name: 'Quebec',
|
||||
cities: [
|
||||
{ cname: 'Montreal', code: 'C-MO' },
|
||||
{ cname: 'Quebec City', code: 'C-QU' }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Ontario',
|
||||
cities: [
|
||||
{ cname: 'Ottawa', code: 'C-OT' },
|
||||
{ cname: 'Toronto', code: 'C-TO' }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'United States',
|
||||
code: 'US',
|
||||
states: [
|
||||
{
|
||||
name: 'California',
|
||||
cities: [
|
||||
{ cname: 'Los Angeles', code: 'US-LA' },
|
||||
{ cname: 'San Diego', code: 'US-SD' },
|
||||
{ cname: 'San Francisco', code: 'US-SF' }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Florida',
|
||||
cities: [
|
||||
{ cname: 'Jacksonville', code: 'US-JA' },
|
||||
{ cname: 'Miami', code: 'US-MI' },
|
||||
{ cname: 'Tampa', code: 'US-TA' },
|
||||
{ cname: 'Orlando', code: 'US-OR' }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Texas',
|
||||
cities: [
|
||||
{ cname: 'Austin', code: 'US-AU' },
|
||||
{ cname: 'Dallas', code: 'US-DA' },
|
||||
{ cname: 'Houston', code: 'US-HO' }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
code: {
|
||||
basic: `
|
||||
<CascadeSelect
|
||||
v-model="selectedCity"
|
||||
:options="countries"
|
||||
optionLabel="cname"
|
||||
optionGroupLabel="name"
|
||||
:optionGroupChildren="['states', 'cities']"
|
||||
placeholder="Select a City"
|
||||
:pt="{
|
||||
root: { style: { minWidth: '14rem' } }
|
||||
}"
|
||||
/>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<CascadeSelect
|
||||
v-model="selectedCity"
|
||||
:options="countries"
|
||||
optionLabel="cname"
|
||||
optionGroupLabel="name"
|
||||
:optionGroupChildren="['states', 'cities']"
|
||||
placeholder="Select a City"
|
||||
:pt="{
|
||||
root: { style: { minWidth: '14rem' } }
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
selectedCity: null,
|
||||
countries: [
|
||||
{
|
||||
name: 'Australia',
|
||||
code: 'AU',
|
||||
states: [
|
||||
{
|
||||
name: 'New South Wales',
|
||||
cities: [
|
||||
{ cname: 'Sydney', code: 'A-SY' },
|
||||
{ cname: 'Newcastle', code: 'A-NE' },
|
||||
{ cname: 'Wollongong', code: 'A-WO' }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Queensland',
|
||||
cities: [
|
||||
{ cname: 'Brisbane', code: 'A-BR' },
|
||||
{ cname: 'Townsville', code: 'A-TO' }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Canada',
|
||||
code: 'CA',
|
||||
states: [
|
||||
{
|
||||
name: 'Quebec',
|
||||
cities: [
|
||||
{ cname: 'Montreal', code: 'C-MO' },
|
||||
{ cname: 'Quebec City', code: 'C-QU' }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Ontario',
|
||||
cities: [
|
||||
{ cname: 'Ottawa', code: 'C-OT' },
|
||||
{ cname: 'Toronto', code: 'C-TO' }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'United States',
|
||||
code: 'US',
|
||||
states: [
|
||||
{
|
||||
name: 'California',
|
||||
cities: [
|
||||
{ cname: 'Los Angeles', code: 'US-LA' },
|
||||
{ cname: 'San Diego', code: 'US-SD' },
|
||||
{ cname: 'San Francisco', code: 'US-SF' }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Florida',
|
||||
cities: [
|
||||
{ cname: 'Jacksonville', code: 'US-JA' },
|
||||
{ cname: 'Miami', code: 'US-MI' },
|
||||
{ cname: 'Tampa', code: 'US-TA' },
|
||||
{ cname: 'Orlando', code: 'US-OR' }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Texas',
|
||||
cities: [
|
||||
{ cname: 'Austin', code: 'US-AU' },
|
||||
{ cname: 'Dallas', code: 'US-DA' },
|
||||
{ cname: 'Houston', code: 'US-HO' }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
<\/script>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<CascadeSelect
|
||||
v-model="selectedCity"
|
||||
:options="countries"
|
||||
optionLabel="cname"
|
||||
optionGroupLabel="name"
|
||||
:optionGroupChildren="['states', 'cities']"
|
||||
placeholder="Select a City"
|
||||
:pt="{
|
||||
root: { style: { minWidth: '14rem' } }
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const selectedCity = ref();
|
||||
const countries = ref([
|
||||
{
|
||||
name: 'Australia',
|
||||
code: 'AU',
|
||||
states: [
|
||||
{
|
||||
name: 'New South Wales',
|
||||
cities: [
|
||||
{ cname: 'Sydney', code: 'A-SY' },
|
||||
{ cname: 'Newcastle', code: 'A-NE' },
|
||||
{ cname: 'Wollongong', code: 'A-WO' }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Queensland',
|
||||
cities: [
|
||||
{ cname: 'Brisbane', code: 'A-BR' },
|
||||
{ cname: 'Townsville', code: 'A-TO' }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Canada',
|
||||
code: 'CA',
|
||||
states: [
|
||||
{
|
||||
name: 'Quebec',
|
||||
cities: [
|
||||
{ cname: 'Montreal', code: 'C-MO' },
|
||||
{ cname: 'Quebec City', code: 'C-QU' }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Ontario',
|
||||
cities: [
|
||||
{ cname: 'Ottawa', code: 'C-OT' },
|
||||
{ cname: 'Toronto', code: 'C-TO' }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'United States',
|
||||
code: 'US',
|
||||
states: [
|
||||
{
|
||||
name: 'California',
|
||||
cities: [
|
||||
{ cname: 'Los Angeles', code: 'US-LA' },
|
||||
{ cname: 'San Diego', code: 'US-SD' },
|
||||
{ cname: 'San Francisco', code: 'US-SF' }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Florida',
|
||||
cities: [
|
||||
{ cname: 'Jacksonville', code: 'US-JA' },
|
||||
{ cname: 'Miami', code: 'US-MI' },
|
||||
{ cname: 'Tampa', code: 'US-TA' },
|
||||
{ cname: 'Orlando', code: 'US-OR' }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Texas',
|
||||
cities: [
|
||||
{ cname: 'Austin', code: 'US-AU' },
|
||||
{ cname: 'Dallas', code: 'US-DA' },
|
||||
{ cname: 'Houston', code: 'US-HO' }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]);
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
|
||||
import PtDoc from './PTDoc.vue';
|
||||
import PTImage from './PTImage.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -28,11 +27,6 @@ export default {
|
|||
label: 'CascadeSelect PT Options',
|
||||
component: DocApiTable,
|
||||
data: getPTOption('CascadeSelect')
|
||||
},
|
||||
{
|
||||
id: 'pt.demo',
|
||||
label: 'Demo',
|
||||
component: PtDoc
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,166 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>A pie chart is a circular statistical graphic which is divided into slices to illustrate numerical proportion.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex justify-content-center">
|
||||
<Chart
|
||||
type="pie"
|
||||
:data="chartData"
|
||||
:options="chartOptions"
|
||||
:pt="{
|
||||
root: { class: 'w-full md:w-30rem' }
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
<DocSectionCode :code="code" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
chartData: null,
|
||||
chartOptions: {
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
usePointStyle: true
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
code: {
|
||||
basic: `
|
||||
<Chart
|
||||
type="pie"
|
||||
:data="chartData"
|
||||
:options="chartOptions"
|
||||
:pt="{
|
||||
root: { class: 'w-full md:w-30rem' }
|
||||
}"
|
||||
/>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<Chart
|
||||
type="pie"
|
||||
:data="chartData"
|
||||
:options="chartOptions"
|
||||
:pt="{
|
||||
root: { class: 'w-full md:w-30rem' }
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
chartData: null,
|
||||
chartOptions: {
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
usePointStyle: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.chartData = this.setChartData();
|
||||
},
|
||||
methods: {
|
||||
setChartData() {
|
||||
const documentStyle = getComputedStyle(document.body);
|
||||
|
||||
return {
|
||||
labels: ['A', 'B', 'C'],
|
||||
datasets: [
|
||||
{
|
||||
data: [540, 325, 702],
|
||||
backgroundColor: [documentStyle.getPropertyValue('--cyan-500'), documentStyle.getPropertyValue('--orange-500'), documentStyle.getPropertyValue('--gray-500')],
|
||||
hoverBackgroundColor: [documentStyle.getPropertyValue('--cyan-400'), documentStyle.getPropertyValue('--orange-400'), documentStyle.getPropertyValue('--gray-400')]
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
<\/script>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<Chart
|
||||
type="pie"
|
||||
:data="chartData"
|
||||
:options="chartOptions"
|
||||
:pt="{
|
||||
root: { class: 'w-full md:w-30rem' }
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
|
||||
onMounted(() => {
|
||||
chartData.value = setChartData();
|
||||
});
|
||||
|
||||
const chartData = ref();
|
||||
const chartOptions = ref({
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
usePointStyle: true
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const setChartData = () => {
|
||||
const documentStyle = getComputedStyle(document.body);
|
||||
|
||||
return {
|
||||
labels: ['A', 'B', 'C'],
|
||||
datasets: [
|
||||
{
|
||||
data: [540, 325, 702],
|
||||
backgroundColor: [documentStyle.getPropertyValue('--cyan-500'), documentStyle.getPropertyValue('--orange-500'), documentStyle.getPropertyValue('--gray-500')],
|
||||
hoverBackgroundColor: [documentStyle.getPropertyValue('--cyan-400'), documentStyle.getPropertyValue('--orange-400'), documentStyle.getPropertyValue('--gray-400')]
|
||||
}
|
||||
]
|
||||
};
|
||||
};
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.chartData = this.setChartData();
|
||||
},
|
||||
methods: {
|
||||
setChartData() {
|
||||
const documentStyle = getComputedStyle(document.body);
|
||||
|
||||
return {
|
||||
labels: ['A', 'B', 'C'],
|
||||
datasets: [
|
||||
{
|
||||
data: [540, 325, 702],
|
||||
backgroundColor: [documentStyle.getPropertyValue('--cyan-500'), documentStyle.getPropertyValue('--orange-500'), documentStyle.getPropertyValue('--gray-500')],
|
||||
hoverBackgroundColor: [documentStyle.getPropertyValue('--cyan-400'), documentStyle.getPropertyValue('--orange-400'), documentStyle.getPropertyValue('--gray-400')]
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
|
||||
import PtDoc from './PTDoc.vue';
|
||||
import PTImage from './PTImage.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -28,11 +27,6 @@ export default {
|
|||
label: 'Chart PT Options',
|
||||
component: DocApiTable,
|
||||
data: getPTOption('Chart')
|
||||
},
|
||||
{
|
||||
id: 'pt.demo',
|
||||
label: 'Demo',
|
||||
component: PtDoc
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,84 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs"></DocSectionText>
|
||||
<div class="card flex justify-content-center">
|
||||
<Checkbox
|
||||
v-model="checked"
|
||||
binary
|
||||
:pt="{
|
||||
input: ({ props, state }) => ({
|
||||
class: state.focused ? 'border-orange-400' : undefined
|
||||
})
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checked: false,
|
||||
code: {
|
||||
basic: `
|
||||
<Checkbox
|
||||
v-model="checked"
|
||||
binary
|
||||
:pt="{
|
||||
input: ({ props, state }) => ({
|
||||
class: state.focused ? 'border-orange-400' : undefined
|
||||
})
|
||||
}"
|
||||
/>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<Checkbox
|
||||
v-model="checked"
|
||||
binary
|
||||
:pt="{
|
||||
input: ({ props, state }) => ({
|
||||
class: state.focused ? 'border-orange-400' : undefined
|
||||
})
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checked: false
|
||||
};
|
||||
}
|
||||
};
|
||||
<\/script>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<Checkbox
|
||||
v-model="checked"
|
||||
binary
|
||||
:pt="{
|
||||
input: ({ props, state }) => ({
|
||||
class: state.focused ? 'border-orange-400' : undefined
|
||||
})
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const checked = ref(false);
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
|
||||
import PtDoc from './PTDoc.vue';
|
||||
import PTImage from './PTImage.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -28,11 +27,6 @@ export default {
|
|||
label: 'Checkbox PT Options',
|
||||
component: DocApiTable,
|
||||
data: getPTOption('Checkbox')
|
||||
},
|
||||
{
|
||||
id: 'pt.demo',
|
||||
label: 'Demo',
|
||||
component: PtDoc
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,59 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs"> </DocSectionText>
|
||||
<div class="card flex justify-content-center">
|
||||
<Chip
|
||||
label="Amy Elsner"
|
||||
image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png"
|
||||
:pt="{
|
||||
root: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)', borderRadius: '24px' } },
|
||||
label: { class: 'text-white' }
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
basic: `
|
||||
<Chip
|
||||
label="Amy Elsner"
|
||||
image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png"
|
||||
:pt="{
|
||||
root: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)', borderRadius: '24px' } },
|
||||
label: { class: 'text-white' }
|
||||
}"
|
||||
/>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<Chip
|
||||
label="Amy Elsner"
|
||||
image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png"
|
||||
:pt="{
|
||||
root: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)', borderRadius: '24px' } },
|
||||
label: { class: 'text-white' }
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<Chip
|
||||
label="Amy Elsner"
|
||||
image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png"
|
||||
:pt="{
|
||||
root: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)', borderRadius: '24px' } },
|
||||
label: { class: 'text-white' }
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
|
||||
import PtDoc from './PTDoc.vue';
|
||||
import PTImage from './PTImage.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -28,11 +27,6 @@ export default {
|
|||
label: 'Chip PT Options',
|
||||
component: DocApiTable,
|
||||
data: getPTOption('Chip')
|
||||
},
|
||||
{
|
||||
id: 'pt.demo',
|
||||
label: 'Demo',
|
||||
component: PtDoc
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,80 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs"></DocSectionText>
|
||||
<div class="card">
|
||||
<Chips
|
||||
v-model="value"
|
||||
:pt="{
|
||||
root: { class: 'flex' },
|
||||
container: { class: 'flex-1' },
|
||||
token: { class: 'bg-primary' }
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: null,
|
||||
code: {
|
||||
basic: `
|
||||
<Chips
|
||||
v-model="value"
|
||||
:pt="{
|
||||
root: { class: 'flex' },
|
||||
container: { class: 'flex-1' },
|
||||
token: { class: 'bg-primary' }
|
||||
}"
|
||||
/>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<Chips
|
||||
v-model="value"
|
||||
:pt="{
|
||||
root: { class: 'flex' },
|
||||
container: { class: 'flex-1' },
|
||||
token: { class: 'bg-primary' }
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: null
|
||||
};
|
||||
}
|
||||
};
|
||||
<\/script>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<Chips
|
||||
v-model="value"
|
||||
:pt="{
|
||||
root: { class: 'flex' },
|
||||
container: { class: 'flex-1' },
|
||||
token: { class: 'bg-primary' }
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const value = ref();
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
|
||||
import PtDoc from './PTDoc.vue';
|
||||
import PTImage from './PTImage.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -28,11 +27,6 @@ export default {
|
|||
label: 'Chips PT Options',
|
||||
component: DocApiTable,
|
||||
data: getPTOption('Chips')
|
||||
},
|
||||
{
|
||||
id: 'pt.demo',
|
||||
label: 'Demo',
|
||||
component: PtDoc
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,76 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs"></DocSectionText>
|
||||
<div class="card flex justify-content-center">
|
||||
<ColorPicker
|
||||
v-model="color"
|
||||
inline
|
||||
:pt="{
|
||||
colorHandler: { class: 'w-1rem h-1rem' }
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
color: null,
|
||||
code: {
|
||||
basic: `
|
||||
<ColorPicker
|
||||
v-model="color"
|
||||
inline
|
||||
:pt="{
|
||||
colorHandler: { class: 'w-1rem h-1rem' }
|
||||
}"
|
||||
/>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<ColorPicker
|
||||
v-model="color"
|
||||
inline
|
||||
:pt="{
|
||||
colorHandler: { class: 'w-1rem h-1rem' }
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
color: null
|
||||
};
|
||||
}
|
||||
};
|
||||
<\/script>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<ColorPicker
|
||||
v-model="color"
|
||||
inline
|
||||
:pt="{
|
||||
colorHandler: { class: 'w-1rem h-1rem' }
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const color = ref();
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
|
||||
import PtDoc from './PTDoc.vue';
|
||||
import PTImage from './PTImage.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -28,11 +27,6 @@ export default {
|
|||
label: 'ColorPicker PT Options',
|
||||
component: DocApiTable,
|
||||
data: getPTOption('ColorPicker')
|
||||
},
|
||||
{
|
||||
id: 'pt.demo',
|
||||
label: 'Demo',
|
||||
component: PtDoc
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,113 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs"> </DocSectionText>
|
||||
<ConfirmDialog group="pt" :pt="{ headerTitle: { class: 'text-primary' } }" />
|
||||
<div class="card flex flex-wrap gap-2 justify-content-center">
|
||||
<Button @click="confirm()" icon="pi pi-check" label="Confirm"></Button>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
basic: `
|
||||
<ConfirmDialog
|
||||
group="pt"
|
||||
:pt="{
|
||||
headerTitle: { class: 'text-primary' }
|
||||
}"
|
||||
/>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<ConfirmDialog
|
||||
group="pt"
|
||||
:pt="{
|
||||
headerTitle: { class: 'text-primary' }
|
||||
}"
|
||||
/>
|
||||
<div class="card flex flex-wrap gap-2 justify-content-center">
|
||||
<Button @click="confirm()" icon="pi pi-check" label="Confirm"></Button>
|
||||
</div>
|
||||
<Toast />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
confirm() {
|
||||
this.$confirm.require({
|
||||
message: 'Are you sure you want to proceed?',
|
||||
header: 'Confirmation',
|
||||
icon: 'pi pi-exclamation-triangle',
|
||||
accept: () => {
|
||||
this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
|
||||
},
|
||||
reject: () => {
|
||||
this.$toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
<\/script>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<ConfirmDialog
|
||||
group="pt"
|
||||
:pt="{
|
||||
headerTitle: { class: 'text-primary' }
|
||||
}"
|
||||
/>
|
||||
<div class="card flex flex-wrap gap-2 justify-content-center">
|
||||
<Button @click="confirm()" icon="pi pi-check" label="Confirm"></Button>
|
||||
</div>
|
||||
<Toast />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useConfirm } from "primevue/useconfirm";
|
||||
import { useToast } from "primevue/usetoast";
|
||||
|
||||
const confirm = useConfirm();
|
||||
const toast = useToast();
|
||||
|
||||
const confirm = () => {
|
||||
confirm.require({
|
||||
message: 'Are you sure you want to proceed?',
|
||||
header: 'Confirmation',
|
||||
icon: 'pi pi-exclamation-triangle',
|
||||
accept: () => {
|
||||
toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
|
||||
},
|
||||
reject: () => {
|
||||
toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
|
||||
}
|
||||
});
|
||||
};
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
confirm() {
|
||||
this.$confirm.require({
|
||||
group: 'pt',
|
||||
message: 'Are you sure you want to proceed?',
|
||||
header: 'Confirmation',
|
||||
icon: 'pi pi-exclamation-triangle',
|
||||
accept: () => {
|
||||
this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
|
||||
},
|
||||
reject: () => {
|
||||
this.$toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
|
||||
import PtDoc from './PTDoc.vue';
|
||||
import PTImage from './PTImage.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -28,11 +27,6 @@ export default {
|
|||
label: 'ConfirmDialog PT Options',
|
||||
component: DocApiTable,
|
||||
data: getPTOption('ConfirmDialog')
|
||||
},
|
||||
{
|
||||
id: 'pt.demo',
|
||||
label: 'Demo',
|
||||
component: PtDoc
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,120 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs"> </DocSectionText>
|
||||
<ConfirmPopup
|
||||
group="pt"
|
||||
:pt="{
|
||||
root: { class: 'surface-100' }
|
||||
}"
|
||||
/>
|
||||
<div class="card flex flex-wrap gap-2 justify-content-center">
|
||||
<Button @click="confirm($event)" icon="pi pi-check" label="Confirm"></Button>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
basic: `
|
||||
<ConfirmPopup
|
||||
group="pt"
|
||||
:pt="{
|
||||
root: { class: 'surface-100' }
|
||||
}"
|
||||
/>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<ConfirmPopup
|
||||
group="pt"
|
||||
:pt="{
|
||||
root: { class: 'surface-100' }
|
||||
}"
|
||||
/>
|
||||
<Toast />
|
||||
<div class="card flex flex-wrap gap-2 justify-content-center">
|
||||
<Button @click="confirm($event)" icon="pi pi-check" label="Confirm"></Button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
confirm(event) {
|
||||
this.$confirm.require({
|
||||
group: 'pt',
|
||||
target: event.currentTarget,
|
||||
message: 'Are you sure you want to proceed?',
|
||||
icon: 'pi pi-exclamation-triangle',
|
||||
accept: () => {
|
||||
this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
|
||||
},
|
||||
reject: () => {
|
||||
this.$toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
<\/script>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<ConfirmPopup
|
||||
group="pt"
|
||||
:pt="{
|
||||
root: { class: 'surface-100' }
|
||||
}"
|
||||
/>
|
||||
<Toast />
|
||||
<div class="card flex flex-wrap gap-2 justify-content-center">
|
||||
<Button @click="confirm($event)" icon="pi pi-check" label="Confirm"></Button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useConfirm } from "primevue/useconfirm";
|
||||
import { useToast } from "primevue/usetoast";
|
||||
|
||||
const confirm = useConfirm();
|
||||
const toast = useToast();
|
||||
|
||||
const confirm = (event) => {
|
||||
confirm.require({
|
||||
group: 'pt',
|
||||
target: event.currentTarget,
|
||||
message: 'Are you sure you want to proceed?',
|
||||
icon: 'pi pi-exclamation-triangle',
|
||||
accept: () => {
|
||||
toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
|
||||
},
|
||||
reject: () => {
|
||||
toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
|
||||
}
|
||||
});
|
||||
};
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
confirm(event) {
|
||||
this.$confirm.require({
|
||||
group: 'pt',
|
||||
target: event.currentTarget,
|
||||
message: 'Are you sure you want to proceed?',
|
||||
icon: 'pi pi-exclamation-triangle',
|
||||
accept: () => {
|
||||
this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
|
||||
},
|
||||
reject: () => {
|
||||
this.$toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
|
||||
import PtDoc from './PTDoc.vue';
|
||||
import PTImage from './PTImage.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -28,11 +27,6 @@ export default {
|
|||
label: 'ConfirmPopup PT Options',
|
||||
component: DocApiTable,
|
||||
data: getPTOption('ConfirmPopup')
|
||||
},
|
||||
{
|
||||
id: 'pt.demo',
|
||||
label: 'Demo',
|
||||
component: PtDoc
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,471 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs"> </DocSectionText>
|
||||
<div class="card flex md:justify-content-center">
|
||||
<img alt="Logo" src="https://primefaces.org/cdn/primevue/images/nature/nature3.jpg" class="w-full md:w-auto" @contextmenu="onImageRightClick" aria-haspopup="true" />
|
||||
<ContextMenu
|
||||
ref="menu"
|
||||
:model="items"
|
||||
:pt="{
|
||||
action: ({ props, state, context }) => ({ class: context.active ? 'bg-primary-200' : context.focused ? 'bg-primary-300' : undefined })
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
items: [
|
||||
{
|
||||
label: 'File',
|
||||
icon: 'pi pi-fw pi-file',
|
||||
items: [
|
||||
{
|
||||
label: 'New',
|
||||
icon: 'pi pi-fw pi-plus',
|
||||
items: [
|
||||
{
|
||||
label: 'Bookmark',
|
||||
icon: 'pi pi-fw pi-bookmark'
|
||||
},
|
||||
{
|
||||
label: 'Video',
|
||||
icon: 'pi pi-fw pi-video'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Delete',
|
||||
icon: 'pi pi-fw pi-trash'
|
||||
},
|
||||
{
|
||||
separator: true
|
||||
},
|
||||
{
|
||||
label: 'Export',
|
||||
icon: 'pi pi-fw pi-external-link'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Edit',
|
||||
icon: 'pi pi-fw pi-pencil',
|
||||
items: [
|
||||
{
|
||||
label: 'Left',
|
||||
icon: 'pi pi-fw pi-align-left'
|
||||
},
|
||||
{
|
||||
label: 'Right',
|
||||
icon: 'pi pi-fw pi-align-right'
|
||||
},
|
||||
{
|
||||
label: 'Center',
|
||||
icon: 'pi pi-fw pi-align-center'
|
||||
},
|
||||
{
|
||||
label: 'Justify',
|
||||
icon: 'pi pi-fw pi-align-justify'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Users',
|
||||
icon: 'pi pi-fw pi-user',
|
||||
items: [
|
||||
{
|
||||
label: 'New',
|
||||
icon: 'pi pi-fw pi-user-plus'
|
||||
},
|
||||
{
|
||||
label: 'Delete',
|
||||
icon: 'pi pi-fw pi-user-minus'
|
||||
},
|
||||
{
|
||||
label: 'Search',
|
||||
icon: 'pi pi-fw pi-users',
|
||||
items: [
|
||||
{
|
||||
label: 'Filter',
|
||||
icon: 'pi pi-fw pi-filter',
|
||||
items: [
|
||||
{
|
||||
label: 'Print',
|
||||
icon: 'pi pi-fw pi-print'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
icon: 'pi pi-fw pi-bars',
|
||||
label: 'List'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Events',
|
||||
icon: 'pi pi-fw pi-calendar',
|
||||
items: [
|
||||
{
|
||||
label: 'Edit',
|
||||
icon: 'pi pi-fw pi-pencil',
|
||||
items: [
|
||||
{
|
||||
label: 'Save',
|
||||
icon: 'pi pi-fw pi-calendar-plus'
|
||||
},
|
||||
{
|
||||
label: 'Delete',
|
||||
icon: 'pi pi-fw pi-calendar-minus'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Archive',
|
||||
icon: 'pi pi-fw pi-calendar-times',
|
||||
items: [
|
||||
{
|
||||
label: 'Remove',
|
||||
icon: 'pi pi-fw pi-calendar-minus'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
separator: true
|
||||
},
|
||||
{
|
||||
label: 'Quit',
|
||||
icon: 'pi pi-fw pi-power-off'
|
||||
}
|
||||
],
|
||||
code: {
|
||||
basic: `
|
||||
<img alt="Logo" src="/images/nature/nature3.jpg" class="w-full md:w-auto" @contextmenu="onImageRightClick" aria-haspopup="true" />
|
||||
<ContextMenu
|
||||
ref="menu"
|
||||
:model="items"
|
||||
:pt="{
|
||||
action: ({ props, state, context }) => ({ class: context.active ? 'bg-primary-200' : context.focused ? 'bg-primary-300' : undefined })
|
||||
}"
|
||||
/>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex md:justify-content-center">
|
||||
<img alt="Logo" src="https://primefaces.org/cdn/primevue/images/nature/nature3.jpg" @contextmenu="onImageRightClick" class="w-full md:w-auto" aria-haspopup="true" />
|
||||
<ContextMenu
|
||||
ref="menu"
|
||||
:model="items"
|
||||
:pt="{
|
||||
action: ({ props, state, context }) => ({ class: context.active ? 'bg-primary-200' : context.focused ? 'bg-primary-300' : undefined })
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
items: [
|
||||
{
|
||||
label: 'File',
|
||||
icon: 'pi pi-fw pi-file',
|
||||
items: [
|
||||
{
|
||||
label: 'New',
|
||||
icon: 'pi pi-fw pi-plus',
|
||||
items: [
|
||||
{
|
||||
label: 'Bookmark',
|
||||
icon: 'pi pi-fw pi-bookmark'
|
||||
},
|
||||
{
|
||||
label: 'Video',
|
||||
icon: 'pi pi-fw pi-video'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Delete',
|
||||
icon: 'pi pi-fw pi-trash'
|
||||
},
|
||||
{
|
||||
separator: true
|
||||
},
|
||||
{
|
||||
label: 'Export',
|
||||
icon: 'pi pi-fw pi-external-link'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Edit',
|
||||
icon: 'pi pi-fw pi-pencil',
|
||||
items: [
|
||||
{
|
||||
label: 'Left',
|
||||
icon: 'pi pi-fw pi-align-left'
|
||||
},
|
||||
{
|
||||
label: 'Right',
|
||||
icon: 'pi pi-fw pi-align-right'
|
||||
},
|
||||
{
|
||||
label: 'Center',
|
||||
icon: 'pi pi-fw pi-align-center'
|
||||
},
|
||||
{
|
||||
label: 'Justify',
|
||||
icon: 'pi pi-fw pi-align-justify'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Users',
|
||||
icon: 'pi pi-fw pi-user',
|
||||
items: [
|
||||
{
|
||||
label: 'New',
|
||||
icon: 'pi pi-fw pi-user-plus'
|
||||
},
|
||||
{
|
||||
label: 'Delete',
|
||||
icon: 'pi pi-fw pi-user-minus'
|
||||
},
|
||||
{
|
||||
label: 'Search',
|
||||
icon: 'pi pi-fw pi-users',
|
||||
items: [
|
||||
{
|
||||
label: 'Filter',
|
||||
icon: 'pi pi-fw pi-filter',
|
||||
items: [
|
||||
{
|
||||
label: 'Print',
|
||||
icon: 'pi pi-fw pi-print'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
icon: 'pi pi-fw pi-bars',
|
||||
label: 'List'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Events',
|
||||
icon: 'pi pi-fw pi-calendar',
|
||||
items: [
|
||||
{
|
||||
label: 'Edit',
|
||||
icon: 'pi pi-fw pi-pencil',
|
||||
items: [
|
||||
{
|
||||
label: 'Save',
|
||||
icon: 'pi pi-fw pi-calendar-plus'
|
||||
},
|
||||
{
|
||||
label: 'Delete',
|
||||
icon: 'pi pi-fw pi-calendar-minus'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Archive',
|
||||
icon: 'pi pi-fw pi-calendar-times',
|
||||
items: [
|
||||
{
|
||||
label: 'Remove',
|
||||
icon: 'pi pi-fw pi-calendar-minus'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
separator: true
|
||||
},
|
||||
{
|
||||
label: 'Quit',
|
||||
icon: 'pi pi-fw pi-power-off'
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onImageRightClick(event) {
|
||||
this.$refs.menu.show(event);
|
||||
}
|
||||
}
|
||||
};
|
||||
<\/script>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<img alt="Logo" src="https://primefaces.org/cdn/primevue/images/nature/nature3.jpg" @contextmenu="onImageRightClick" class="w-full md:w-auto" aria-haspopup="true" />
|
||||
<ContextMenu
|
||||
ref="menu"
|
||||
:model="items"
|
||||
:pt="{
|
||||
action: ({ props, state, context }) => ({ class: context.active ? 'bg-primary-200' : context.focused ? 'bg-primary-300' : undefined })
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const menu = ref();
|
||||
const items = ref([
|
||||
{
|
||||
label: 'File',
|
||||
icon: 'pi pi-fw pi-file',
|
||||
items: [
|
||||
{
|
||||
label: 'New',
|
||||
icon: 'pi pi-fw pi-plus',
|
||||
items: [
|
||||
{
|
||||
label: 'Bookmark',
|
||||
icon: 'pi pi-fw pi-bookmark'
|
||||
},
|
||||
{
|
||||
label: 'Video',
|
||||
icon: 'pi pi-fw pi-video'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Delete',
|
||||
icon: 'pi pi-fw pi-trash'
|
||||
},
|
||||
{
|
||||
separator: true
|
||||
},
|
||||
{
|
||||
label: 'Export',
|
||||
icon: 'pi pi-fw pi-external-link'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Edit',
|
||||
icon: 'pi pi-fw pi-pencil',
|
||||
items: [
|
||||
{
|
||||
label: 'Left',
|
||||
icon: 'pi pi-fw pi-align-left'
|
||||
},
|
||||
{
|
||||
label: 'Right',
|
||||
icon: 'pi pi-fw pi-align-right'
|
||||
},
|
||||
{
|
||||
label: 'Center',
|
||||
icon: 'pi pi-fw pi-align-center'
|
||||
},
|
||||
{
|
||||
label: 'Justify',
|
||||
icon: 'pi pi-fw pi-align-justify'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Users',
|
||||
icon: 'pi pi-fw pi-user',
|
||||
items: [
|
||||
{
|
||||
label: 'New',
|
||||
icon: 'pi pi-fw pi-user-plus'
|
||||
},
|
||||
{
|
||||
label: 'Delete',
|
||||
icon: 'pi pi-fw pi-user-minus'
|
||||
},
|
||||
{
|
||||
label: 'Search',
|
||||
icon: 'pi pi-fw pi-users',
|
||||
items: [
|
||||
{
|
||||
label: 'Filter',
|
||||
icon: 'pi pi-fw pi-filter',
|
||||
items: [
|
||||
{
|
||||
label: 'Print',
|
||||
icon: 'pi pi-fw pi-print'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
icon: 'pi pi-fw pi-bars',
|
||||
label: 'List'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Events',
|
||||
icon: 'pi pi-fw pi-calendar',
|
||||
items: [
|
||||
{
|
||||
label: 'Edit',
|
||||
icon: 'pi pi-fw pi-pencil',
|
||||
items: [
|
||||
{
|
||||
label: 'Save',
|
||||
icon: 'pi pi-fw pi-calendar-plus'
|
||||
},
|
||||
{
|
||||
label: 'Delete',
|
||||
icon: 'pi pi-fw pi-calendar-minus'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Archive',
|
||||
icon: 'pi pi-fw pi-calendar-times',
|
||||
items: [
|
||||
{
|
||||
label: 'Remove',
|
||||
icon: 'pi pi-fw pi-calendar-minus'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
separator: true
|
||||
},
|
||||
{
|
||||
label: 'Quit',
|
||||
icon: 'pi pi-fw pi-power-off'
|
||||
}
|
||||
]);
|
||||
|
||||
const onImageRightClick = (event) => {
|
||||
menu.value.show(event);
|
||||
};
|
||||
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onImageRightClick(event) {
|
||||
this.$refs.menu.show(event);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
|
||||
import PtDoc from './PTDoc.vue';
|
||||
import PTImage from './PTImage.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -28,11 +27,6 @@ export default {
|
|||
label: 'ContextMenu PT Options',
|
||||
component: DocApiTable,
|
||||
data: getPTOption('ContextMenu')
|
||||
},
|
||||
{
|
||||
id: 'pt.demo',
|
||||
label: 'Demo',
|
||||
component: PtDoc
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,259 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs"></DocSectionText>
|
||||
<DeferredDemo @load="loadDemoData">
|
||||
<div class="card">
|
||||
<DataTable
|
||||
:value="products"
|
||||
sortMode="multiple"
|
||||
:pt="{
|
||||
table: { style: { minWidth: '50rem' } }
|
||||
}"
|
||||
>
|
||||
<Column
|
||||
field="code"
|
||||
header="Code"
|
||||
sortable
|
||||
:pt="{
|
||||
sortBadge: { class: 'bg-primary' },
|
||||
headerCell: { style: { width: '25%' } }
|
||||
}"
|
||||
/>
|
||||
<Column
|
||||
field="name"
|
||||
header="Name"
|
||||
sortable
|
||||
:pt="{
|
||||
sortBadge: { class: 'bg-primary' },
|
||||
headerCell: { style: { width: '25%' } }
|
||||
}"
|
||||
/>
|
||||
<Column
|
||||
field="category"
|
||||
header="Category"
|
||||
sortable
|
||||
:pt="{
|
||||
sortBadge: { class: 'bg-primary' },
|
||||
headerCell: { style: { width: '25%' } }
|
||||
}"
|
||||
/>
|
||||
<Column
|
||||
field="quantity"
|
||||
header="Quantity"
|
||||
sortable
|
||||
:pt="{
|
||||
sortBadge: { class: 'bg-primary' },
|
||||
headerCell: { style: { width: '25%' } }
|
||||
}"
|
||||
/>
|
||||
</DataTable>
|
||||
</div>
|
||||
</DeferredDemo>
|
||||
<DocSectionCode :code="code" :service="['ProductService']" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ProductService } from '@/service/ProductService';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
products: null,
|
||||
code: {
|
||||
basic: `
|
||||
<DataTable
|
||||
:value="products"
|
||||
sortMode="multiple"
|
||||
:pt="{
|
||||
table: { style: { minWidth: '50rem' } }
|
||||
}"
|
||||
>
|
||||
<Column
|
||||
field="code"
|
||||
header="Code"
|
||||
sortable
|
||||
:pt="{
|
||||
sortBadge: { class: 'bg-primary' },
|
||||
headerCell: { style: { width: '25%' } }
|
||||
}"
|
||||
/>
|
||||
<Column
|
||||
field="name"
|
||||
header="Name"
|
||||
sortable
|
||||
:pt="{
|
||||
sortBadge: { class: 'bg-primary' },
|
||||
headerCell: { style: { width: '25%' } }
|
||||
}"
|
||||
/>
|
||||
<Column
|
||||
field="category"
|
||||
header="Category"
|
||||
sortable
|
||||
:pt="{
|
||||
sortBadge: { class: 'bg-primary' },
|
||||
headerCell: { style: { width: '25%' } }
|
||||
}"
|
||||
/>
|
||||
<Column
|
||||
field="quantity"
|
||||
header="Quantity"
|
||||
sortable
|
||||
:pt="{
|
||||
sortBadge: { class: 'bg-primary' },
|
||||
headerCell: { style: { width: '25%' } }
|
||||
}"
|
||||
/>
|
||||
</DataTable>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<DataTable
|
||||
:value="products"
|
||||
sortMode="multiple"
|
||||
:pt="{
|
||||
table: { style: { minWidth: '50rem' } }
|
||||
}"
|
||||
>
|
||||
<Column
|
||||
field="code"
|
||||
header="Code"
|
||||
sortable
|
||||
:pt="{
|
||||
sortBadge: { class: 'bg-primary' },
|
||||
headerCell: { style: { width: '25%' } }
|
||||
}"
|
||||
/>
|
||||
<Column
|
||||
field="name"
|
||||
header="Name"
|
||||
sortable
|
||||
:pt="{
|
||||
sortBadge: { class: 'bg-primary' },
|
||||
headerCell: { style: { width: '25%' } }
|
||||
}"
|
||||
/>
|
||||
<Column
|
||||
field="category"
|
||||
header="Category"
|
||||
sortable
|
||||
:pt="{
|
||||
sortBadge: { class: 'bg-primary' },
|
||||
headerCell: { style: { width: '25%' } }
|
||||
}"
|
||||
/>
|
||||
<Column
|
||||
field="quantity"
|
||||
header="Quantity"
|
||||
sortable
|
||||
:pt="{
|
||||
sortBadge: { class: 'bg-primary' },
|
||||
headerCell: { style: { width: '25%' } }
|
||||
}"
|
||||
/>
|
||||
</DataTable>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ProductService } from '@/service/ProductService';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
products: null
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
ProductService.getProductsMini().then((data) => (this.products = data));
|
||||
}
|
||||
};
|
||||
<\/script>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<DataTable
|
||||
:value="products"
|
||||
sortMode="multiple"
|
||||
:pt="{
|
||||
table: { style: { minWidth: '50rem' } }
|
||||
}"
|
||||
>
|
||||
<Column
|
||||
field="code"
|
||||
header="Code"
|
||||
sortable
|
||||
:pt="{
|
||||
sortBadge: { class: 'bg-primary' },
|
||||
headerCell: { style: { width: '25%' } }
|
||||
}"
|
||||
/>
|
||||
<Column
|
||||
field="name"
|
||||
header="Name"
|
||||
sortable
|
||||
:pt="{
|
||||
sortBadge: { class: 'bg-primary' },
|
||||
headerCell: { style: { width: '25%' } }
|
||||
}"
|
||||
/>
|
||||
<Column
|
||||
field="category"
|
||||
header="Category"
|
||||
sortable
|
||||
:pt="{
|
||||
sortBadge: { class: 'bg-primary' },
|
||||
headerCell: { style: { width: '25%' } }
|
||||
}"
|
||||
/>
|
||||
<Column
|
||||
field="quantity"
|
||||
header="Quantity"
|
||||
sortable
|
||||
:pt="{
|
||||
sortBadge: { class: 'bg-primary' },
|
||||
headerCell: { style: { width: '25%' } }
|
||||
}"
|
||||
/>
|
||||
</DataTable>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { ProductService } from '@/service/ProductService';
|
||||
|
||||
onMounted(() => {
|
||||
ProductService.getProductsMini().then((data) => (products.value = data));
|
||||
});
|
||||
|
||||
const products = ref();
|
||||
|
||||
<\/script>
|
||||
`,
|
||||
data: `
|
||||
{
|
||||
id: '1000',
|
||||
code: 'f230fh0g3',
|
||||
name: 'Bamboo Watch',
|
||||
description: 'Product Description',
|
||||
image: 'bamboo-watch.jpg',
|
||||
price: 65,
|
||||
category: 'Accessories',
|
||||
quantity: 24,
|
||||
inventoryStatus: 'INSTOCK',
|
||||
rating: 5
|
||||
},
|
||||
...
|
||||
`
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
loadDemoData() {
|
||||
ProductService.getProductsMini().then((data) => (this.products = data));
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
|
||||
import PtDoc from './PTDoc.vue';
|
||||
import PTImage from './PTImage.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -46,11 +45,6 @@ export default {
|
|||
label: 'Row PT Options',
|
||||
component: DocApiTable,
|
||||
data: getPTOption('Row')
|
||||
},
|
||||
{
|
||||
id: 'pt.demo',
|
||||
label: 'Demo',
|
||||
component: PtDoc
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,417 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs"> </DocSectionText>
|
||||
<div class="card">
|
||||
<DataView
|
||||
:value="products"
|
||||
:layout="layout"
|
||||
:pt="{
|
||||
grid: { class: 'surface-ground' }
|
||||
}"
|
||||
>
|
||||
<template #header>
|
||||
<div class="flex justify-content-end">
|
||||
<DataViewLayoutOptions
|
||||
v-model="layout"
|
||||
:pt="{
|
||||
listButton: ({ props }) => ({ class: props.modelValue === 'list' ? 'bg-teal-400 border-teal-400' : 'undefined' }),
|
||||
gridButton: ({ props }) => ({ class: props.modelValue === 'grid' ? 'bg-teal-400 border-teal-400' : 'undefined' })
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #list="slotProps">
|
||||
<div class="grid grid-nogutter">
|
||||
<div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
|
||||
<div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }">
|
||||
<img class="w-9 sm:w-16rem xl:w-10rem block xl:block mx-auto border-round" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" />
|
||||
<div class="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
|
||||
<div class="flex flex-column align-items-center sm:align-items-start gap-3">
|
||||
<div class="text-2xl font-bold text-900">{{ item.name }}</div>
|
||||
<Rating :modelValue="item.rating" readonly :cancel="false"></Rating>
|
||||
<div class="flex align-items-center gap-3">
|
||||
<span class="flex align-items-center gap-2">
|
||||
<i class="pi pi-tag"></i>
|
||||
<span class="font-semibold">{{ item.category }}</span>
|
||||
</span>
|
||||
<Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
|
||||
<span class="text-2xl font-semibold">${{ item.price }}</span>
|
||||
<Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #grid="slotProps">
|
||||
<div class="grid grid-nogutter">
|
||||
<div v-for="(item, index) in slotProps.items" :key="index" class="col-12 sm:col-6 lg:col-12 xl:col-4 p-2">
|
||||
<div class="p-4 border-1 surface-border surface-card border-round">
|
||||
<div class="flex flex-wrap align-items-center justify-content-between gap-2">
|
||||
<div class="flex align-items-center gap-2">
|
||||
<i class="pi pi-tag"></i>
|
||||
<span class="font-semibold">{{ item.category }}</span>
|
||||
</div>
|
||||
<Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
|
||||
</div>
|
||||
<div class="flex flex-column align-items-center gap-3 py-5">
|
||||
<img class="w-9 border-round" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" />
|
||||
<div class="text-2xl font-bold">{{ item.name }}</div>
|
||||
<Rating value="{product.rating}" readonly :cancel="false"></Rating>
|
||||
</div>
|
||||
<div class="flex align-items-center justify-content-between">
|
||||
<span class="text-2xl font-semibold">${{ item.price }}</span>
|
||||
<Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</DataView>
|
||||
</div>
|
||||
<DocSectionCode :code="code" :service="['ProductService']" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ProductService } from '@/service/ProductService';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
products: null,
|
||||
layout: 'grid',
|
||||
code: {
|
||||
basic: `
|
||||
<DataView
|
||||
:value="products"
|
||||
:layout="layout"
|
||||
:pt="{
|
||||
grid: { class: 'surface-ground' }
|
||||
}"
|
||||
>
|
||||
<template #header>
|
||||
<div class="flex justify-content-end">
|
||||
<DataViewLayoutOptions
|
||||
v-model="layout"
|
||||
:pt="{
|
||||
listButton: ({ props }) => ({ class: props.modelValue === 'list' ? 'bg-teal-400 border-teal-400' : 'undefined' }),
|
||||
gridButton: ({ props }) => ({ class: props.modelValue === 'grid' ? 'bg-teal-400 border-teal-400' : 'undefined' })
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #list="slotProps">
|
||||
<div class="grid grid-nogutter">
|
||||
<div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
|
||||
<div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }">
|
||||
<img class="w-9 sm:w-16rem xl:w-10rem block xl:block mx-auto border-round" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
|
||||
<div class="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
|
||||
<div class="flex flex-column align-items-center sm:align-items-start gap-3">
|
||||
<div class="text-2xl font-bold text-900">{{ item.name }}</div>
|
||||
<Rating :modelValue="item.rating" readonly :cancel="false"></Rating>
|
||||
<div class="flex align-items-center gap-3">
|
||||
<span class="flex align-items-center gap-2">
|
||||
<i class="pi pi-tag"></i>
|
||||
<span class="font-semibold">{{ item.category }}</span>
|
||||
</span>
|
||||
<Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
|
||||
<span class="text-2xl font-semibold">\${{ item.price }}</span>
|
||||
<Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #grid="slotProps">
|
||||
<div class="grid grid-nogutter">
|
||||
<div v-for="(item, index) in slotProps.items" :key="index" class="col-12 sm:col-6 lg:col-12 xl:col-4 p-2">
|
||||
<div class="p-4 border-1 surface-border surface-card border-round">
|
||||
<div class="flex flex-wrap align-items-center justify-content-between gap-2">
|
||||
<div class="flex align-items-center gap-2">
|
||||
<i class="pi pi-tag"></i>
|
||||
<span class="font-semibold">{{ item.category }}</span>
|
||||
</div>
|
||||
<Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
|
||||
</div>
|
||||
<div class="flex flex-column align-items-center gap-3 py-5">
|
||||
<img class="w-9 border-round" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
|
||||
<div class="text-2xl font-bold">{{ item.name }}</div>
|
||||
<Rating value="{product.rating}" readonly :cancel="false"></Rating>
|
||||
</div>
|
||||
<div class="flex align-items-center justify-content-between">
|
||||
<span class="text-2xl font-semibold">\${{ item.price }}</span>
|
||||
<Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</DataView>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<DataView
|
||||
:value="products"
|
||||
:layout="layout"
|
||||
:pt="{
|
||||
grid: { class: 'surface-ground' }
|
||||
}"
|
||||
>
|
||||
<template #header>
|
||||
<div class="flex justify-content-end">
|
||||
<DataViewLayoutOptions
|
||||
v-model="layout"
|
||||
:pt="{
|
||||
listButton: ({ props }) => ({ class: props.modelValue === 'list' ? 'bg-teal-400 border-teal-400' : 'undefined' }),
|
||||
gridButton: ({ props }) => ({ class: props.modelValue === 'grid' ? 'bg-teal-400 border-teal-400' : 'undefined' })
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #list="slotProps">
|
||||
<div class="grid grid-nogutter">
|
||||
<div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
|
||||
<div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }">
|
||||
<img class="w-9 sm:w-16rem xl:w-10rem block xl:block mx-auto border-round" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
|
||||
<div class="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
|
||||
<div class="flex flex-column align-items-center sm:align-items-start gap-3">
|
||||
<div class="text-2xl font-bold text-900">{{ item.name }}</div>
|
||||
<Rating :modelValue="item.rating" readonly :cancel="false"></Rating>
|
||||
<div class="flex align-items-center gap-3">
|
||||
<span class="flex align-items-center gap-2">
|
||||
<i class="pi pi-tag"></i>
|
||||
<span class="font-semibold">{{ item.category }}</span>
|
||||
</span>
|
||||
<Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
|
||||
<span class="text-2xl font-semibold">\${{ item.price }}</span>
|
||||
<Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #grid="slotProps">
|
||||
<div class="grid grid-nogutter">
|
||||
<div v-for="(item, index) in slotProps.items" :key="index" class="col-12 sm:col-6 lg:col-12 xl:col-4 p-2">
|
||||
<div class="p-4 border-1 surface-border surface-card border-round">
|
||||
<div class="flex flex-wrap align-items-center justify-content-between gap-2">
|
||||
<div class="flex align-items-center gap-2">
|
||||
<i class="pi pi-tag"></i>
|
||||
<span class="font-semibold">{{ item.category }}</span>
|
||||
</div>
|
||||
<Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
|
||||
</div>
|
||||
<div class="flex flex-column align-items-center gap-3 py-5">
|
||||
<img class="w-9 border-round" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
|
||||
<div class="text-2xl font-bold">{{ item.name }}</div>
|
||||
<Rating value="{product.rating}" readonly :cancel="false"></Rating>
|
||||
</div>
|
||||
<div class="flex align-items-center justify-content-between">
|
||||
<span class="text-2xl font-semibold">\${{ item.price }}</span>
|
||||
<Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</DataView>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ProductService } from '@/service/ProductService';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
products: null,
|
||||
layout: 'grid'
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
ProductService.getProducts().then((data) => (this.products = data.slice(0, 6)));
|
||||
},
|
||||
methods: {
|
||||
getSeverity(product) {
|
||||
switch (product.inventoryStatus) {
|
||||
case 'INSTOCK':
|
||||
return 'success';
|
||||
|
||||
case 'LOWSTOCK':
|
||||
return 'warning';
|
||||
|
||||
case 'OUTOFSTOCK':
|
||||
return 'danger';
|
||||
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
<\/script>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<DataView
|
||||
:value="products"
|
||||
:layout="layout"
|
||||
:pt="{
|
||||
grid: { class: 'surface-ground' }
|
||||
}"
|
||||
>
|
||||
<template #header>
|
||||
<div class="flex justify-content-end">
|
||||
<DataViewLayoutOptions
|
||||
v-model="layout"
|
||||
:pt="{
|
||||
listButton: ({ props }) => ({ class: props.modelValue === 'list' ? 'bg-teal-400 border-teal-400' : 'undefined' }),
|
||||
gridButton: ({ props }) => ({ class: props.modelValue === 'grid' ? 'bg-teal-400 border-teal-400' : 'undefined' })
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #list="slotProps">
|
||||
<div class="grid grid-nogutter">
|
||||
<div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
|
||||
<div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }">
|
||||
<img class="w-9 sm:w-16rem xl:w-10rem block xl:block mx-auto border-round" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
|
||||
<div class="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
|
||||
<div class="flex flex-column align-items-center sm:align-items-start gap-3">
|
||||
<div class="text-2xl font-bold text-900">{{ item.name }}</div>
|
||||
<Rating :modelValue="item.rating" readonly :cancel="false"></Rating>
|
||||
<div class="flex align-items-center gap-3">
|
||||
<span class="flex align-items-center gap-2">
|
||||
<i class="pi pi-tag"></i>
|
||||
<span class="font-semibold">{{ item.category }}</span>
|
||||
</span>
|
||||
<Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
|
||||
<span class="text-2xl font-semibold">\${{ item.price }}</span>
|
||||
<Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #grid="slotProps">
|
||||
<div class="grid grid-nogutter">
|
||||
<div v-for="(item, index) in slotProps.items" :key="index" class="col-12 sm:col-6 lg:col-12 xl:col-4 p-2">
|
||||
<div class="p-4 border-1 surface-border surface-card border-round">
|
||||
<div class="flex flex-wrap align-items-center justify-content-between gap-2">
|
||||
<div class="flex align-items-center gap-2">
|
||||
<i class="pi pi-tag"></i>
|
||||
<span class="font-semibold">{{ item.category }}</span>
|
||||
</div>
|
||||
<Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
|
||||
</div>
|
||||
<div class="flex flex-column align-items-center gap-3 py-5">
|
||||
<img class="w-9 border-round" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
|
||||
<div class="text-2xl font-bold">{{ item.name }}</div>
|
||||
<Rating value="{product.rating}" readonly :cancel="false"></Rating>
|
||||
</div>
|
||||
<div class="flex align-items-center justify-content-between">
|
||||
<span class="text-2xl font-semibold">\${{ item.price }}</span>
|
||||
<Button icon="pi pi-shopping-cart" rounded :disabled="item.inventoryStatus === 'OUTOFSTOCK'"></Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</DataView>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import { ProductService } from '@/service/ProductService';
|
||||
|
||||
onMounted(() => {
|
||||
ProductService.getProducts().then((data) => (products.value = data.slice(0, 6)));
|
||||
});
|
||||
|
||||
const products = ref();
|
||||
const layout = ref('grid');
|
||||
|
||||
const getSeverity = (product) => {
|
||||
switch (product.inventoryStatus) {
|
||||
case 'INSTOCK':
|
||||
return 'success';
|
||||
|
||||
case 'LOWSTOCK':
|
||||
return 'warning';
|
||||
|
||||
case 'OUTOFSTOCK':
|
||||
return 'danger';
|
||||
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
<\/script>
|
||||
`,
|
||||
data: `
|
||||
/* ProductService */
|
||||
{
|
||||
id: '1000',
|
||||
code: 'f230fh0g3',
|
||||
name: 'Bamboo Watch',
|
||||
description: 'Product Description',
|
||||
image: 'bamboo-watch.jpg',
|
||||
price: 65,
|
||||
category: 'Accessories',
|
||||
quantity: 24,
|
||||
inventoryStatus: 'INSTOCK',
|
||||
rating: 5
|
||||
},
|
||||
...
|
||||
`
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
ProductService.getProducts().then((data) => (this.products = data.slice(0, 6)));
|
||||
},
|
||||
methods: {
|
||||
getSeverity(product) {
|
||||
switch (product.inventoryStatus) {
|
||||
case 'INSTOCK':
|
||||
return 'success';
|
||||
|
||||
case 'LOWSTOCK':
|
||||
return 'warning';
|
||||
|
||||
case 'OUTOFSTOCK':
|
||||
return 'danger';
|
||||
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
|
||||
import PtDoc from './PTDoc.vue';
|
||||
import PTImage from './PTImage.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -34,11 +33,6 @@ export default {
|
|||
label: 'DataViewLayoutOptions PT Options',
|
||||
component: DocApiTable,
|
||||
data: getPTOption('DataViewLayoutOptions')
|
||||
},
|
||||
{
|
||||
id: 'pt.demo',
|
||||
label: 'Demo',
|
||||
component: PtDoc
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,103 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs"> </DocSectionText>
|
||||
<div class="card flex justify-content-center">
|
||||
<Button label="Show" icon="pi pi-external-link" @click="visible = true" />
|
||||
|
||||
<Dialog
|
||||
v-model:visible="visible"
|
||||
modal
|
||||
header="Header"
|
||||
:pt="{
|
||||
root: { class: 'w-12 sm:w-9 md:w-6' }
|
||||
}"
|
||||
>
|
||||
<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>
|
||||
</Dialog>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
code: {
|
||||
basic: `
|
||||
<Dialog
|
||||
v-model:visible="visible"
|
||||
modal
|
||||
header="Header"
|
||||
:pt="{
|
||||
root: { class: 'w-12 sm:w-9 md:w-6' }
|
||||
}"
|
||||
>
|
||||
<p>Lorem ipsum </p>
|
||||
</Dialog>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<Button label="Show" icon="pi pi-external-link" @click="visible = true" />
|
||||
|
||||
<Dialog
|
||||
v-model:visible="visible"
|
||||
modal
|
||||
header="Header"
|
||||
:pt="{
|
||||
root: { class: 'w-12 sm:w-9 md:w-6' }
|
||||
}"
|
||||
>
|
||||
<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>
|
||||
</Dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
visible: false
|
||||
};
|
||||
}
|
||||
};
|
||||
<\/script>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<Button label="Show" icon="pi pi-external-link" @click="visible = true" />
|
||||
|
||||
<Dialog
|
||||
v-model:visible="visible"
|
||||
modal
|
||||
header="Header"
|
||||
:pt="{
|
||||
root: { class: 'w-12 sm:w-9 md:w-6' }
|
||||
}"
|
||||
>
|
||||
<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>
|
||||
</Dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const visible = ref(false);
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
|
||||
import PtDoc from './PTDoc.vue';
|
||||
import PTImage from './PTImage.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -28,11 +27,6 @@ export default {
|
|||
label: 'Dialog PT Options',
|
||||
component: DocApiTable,
|
||||
data: getPTOption('Dialog')
|
||||
},
|
||||
{
|
||||
id: 'pt.demo',
|
||||
label: 'Demo',
|
||||
component: PtDoc
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,83 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs"> </DocSectionText>
|
||||
<div class="card">
|
||||
<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>
|
||||
|
||||
<Divider :pt="{ content: { class: 'text-primary' } }" align="center">
|
||||
<b>Center</b>
|
||||
</Divider>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
basic: `
|
||||
<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>
|
||||
|
||||
<Divider :pt="{ content: { class: 'text-primary' } }" align="center">
|
||||
<b>Center</b>
|
||||
</Divider>
|
||||
|
||||
<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>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<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>
|
||||
|
||||
<Divider :pt="{ content: { class: 'text-primary' } }" align="center">
|
||||
<b>Center</b>
|
||||
</Divider>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<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>
|
||||
|
||||
<Divider :pt="{ content: { class: 'text-primary' } }" align="center">
|
||||
<b>Center</b>
|
||||
</Divider>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
|
||||
import PtDoc from './PTDoc.vue';
|
||||
import PTImage from './PTImage.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -28,11 +27,6 @@ export default {
|
|||
label: 'Divider PT Options',
|
||||
component: DocApiTable,
|
||||
data: getPTOption('Divider')
|
||||
},
|
||||
{
|
||||
id: 'pt.demo',
|
||||
label: 'Demo',
|
||||
component: PtDoc
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,197 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs"> </DocSectionText>
|
||||
<div class="card dock-demo">
|
||||
<div class="dock-window">
|
||||
<Dock :model="items" position="bottom" :pt="{ container: { style: { background: 'linear-gradient(to right,#056BAE, #673976, #056BAE)', borderRadius: '12px' } } }">
|
||||
<template #icon="{ item }">
|
||||
<img :alt="item.label" :src="item.icon" style="width: 100%" />
|
||||
</template>
|
||||
</Dock>
|
||||
</div>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
items: [
|
||||
{
|
||||
label: 'Finder',
|
||||
icon: 'https://primefaces.org/cdn/primevue/images/dock/finder.svg'
|
||||
},
|
||||
{
|
||||
label: 'App Store',
|
||||
icon: 'https://primefaces.org/cdn/primevue/images/dock/appstore.svg'
|
||||
},
|
||||
{
|
||||
label: 'Photos',
|
||||
icon: 'https://primefaces.org/cdn/primevue/images/dock/photos.svg'
|
||||
},
|
||||
{
|
||||
label: 'Trash',
|
||||
icon: 'https://primefaces.org/cdn/primevue/images/dock/trash.png'
|
||||
}
|
||||
],
|
||||
code: {
|
||||
basic: `
|
||||
<Dock :model="items" position="bottom"
|
||||
:pt="{
|
||||
container: {
|
||||
style: { background: 'linear-gradient(to right,#056BAE, #673976, #056BAE)', borderRadius: '12px' }
|
||||
}
|
||||
}"
|
||||
>
|
||||
<template #icon="{ item }">
|
||||
<img :alt="item.label" :src="item.icon" style="width: 100%" />
|
||||
</template>
|
||||
</Dock>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card dock-demo">
|
||||
<div class="dock-window">
|
||||
<Dock :model="items" position="bottom"
|
||||
:pt="{
|
||||
container: {
|
||||
style: { background: 'linear-gradient(to right,#056BAE, #673976, #056BAE)', borderRadius: '12px' }
|
||||
}
|
||||
}"
|
||||
>
|
||||
<template #icon="{ item }">
|
||||
<img :alt="item.label" :src="item.icon" style="width: 100%" />
|
||||
</template>
|
||||
</Dock>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
items: [
|
||||
{
|
||||
label: 'Finder',
|
||||
icon: 'https://primefaces.org/cdn/primevue/images/dock/finder.svg'
|
||||
},
|
||||
{
|
||||
label: 'App Store',
|
||||
icon: 'https://primefaces.org/cdn/primevue/images/dock/appstore.svg'
|
||||
},
|
||||
{
|
||||
label: 'Photos',
|
||||
icon: 'https://primefaces.org/cdn/primevue/images/dock/photos.svg'
|
||||
},
|
||||
{
|
||||
label: 'Trash',
|
||||
icon: 'https://primefaces.org/cdn/primevue/images/dock/trash.png'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
<\/script>
|
||||
|
||||
<style scoped>
|
||||
.dock-demo > .dock-window {
|
||||
width: 100%;
|
||||
height: 450px;
|
||||
position: relative;
|
||||
background-image: url("https://primefaces.org/cdn/primevue/images/dock/window.jpg");
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.dock-demo > .p-dock {
|
||||
z-index: 1000;
|
||||
}
|
||||
</style>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card dock-demo">
|
||||
<div class="dock-window" style="backgroundimage: 'url(https://primefaces.org/cdn/primevue/images/dock/window.jpg))'">
|
||||
<Dock :model="items" position="bottom"
|
||||
:pt="{
|
||||
container: {
|
||||
style: { background: 'linear-gradient(to right,#056BAE, #673976, #056BAE)', borderRadius: '12px' }
|
||||
}
|
||||
}"
|
||||
>
|
||||
<template #icon="{ item }">
|
||||
<img :alt="item.label" :src="item.icon" style="width: 100%" />
|
||||
</template>
|
||||
</Dock>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const items = ref([
|
||||
{
|
||||
label: 'Finder',
|
||||
icon: 'https://primefaces.org/cdn/primevue/images/dock/finder.svg'
|
||||
},
|
||||
{
|
||||
label: 'App Store',
|
||||
icon: 'https://primefaces.org/cdn/primevue/images/dock/appstore.svg'
|
||||
},
|
||||
{
|
||||
label: 'Photos',
|
||||
icon: 'https://primefaces.org/cdn/primevue/images/dock/photos.svg'
|
||||
},
|
||||
{
|
||||
label: 'Trash',
|
||||
icon: 'https://primefaces.org/cdn/primevue/images/dock/trash.png'
|
||||
}
|
||||
]);
|
||||
|
||||
<\/script>
|
||||
|
||||
<style scoped>
|
||||
.dock-demo > .dock-window {
|
||||
width: 100%;
|
||||
height: 450px;
|
||||
position: relative;
|
||||
background-image: url("https://primefaces.org/cdn/primevue/images/dock/window.jpg");
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.dock-demo > .p-dock {
|
||||
z-index: 1000;
|
||||
}
|
||||
</style>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.dock-demo > .dock-window {
|
||||
width: 100%;
|
||||
height: 450px;
|
||||
position: relative;
|
||||
background-image: url('https://primefaces.org/cdn/primevue/images/dock/window.jpg');
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.dock-demo > .p-dock {
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.dock-demo .p-menubar {
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
|
||||
import PtDoc from './PTDoc.vue';
|
||||
import PTImage from './PTImage.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -28,11 +27,6 @@ export default {
|
|||
label: 'Dock PT Options',
|
||||
component: DocApiTable,
|
||||
data: getPTOption('Dock')
|
||||
},
|
||||
{
|
||||
id: 'pt.demo',
|
||||
label: 'Demo',
|
||||
component: PtDoc
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,117 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs"></DocSectionText>
|
||||
<div class="card flex justify-content-center">
|
||||
<Dropdown
|
||||
v-model="selectedCity"
|
||||
:options="cities"
|
||||
optionLabel="name"
|
||||
placeholder="Select a City"
|
||||
:pt="{
|
||||
root: { class: 'w-full md:w-14rem' },
|
||||
item: ({ props, state, context }) => ({
|
||||
class: context.selected ? 'bg-primary' : context.focused ? 'bg-blue-100' : undefined
|
||||
})
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
selectedCity: null,
|
||||
cities: [
|
||||
{ name: 'New York', code: 'NY' },
|
||||
{ name: 'Rome', code: 'RM' },
|
||||
{ name: 'London', code: 'LDN' },
|
||||
{ name: 'Istanbul', code: 'IST' },
|
||||
{ name: 'Paris', code: 'PRS' }
|
||||
],
|
||||
code: {
|
||||
basic: `
|
||||
<Dropdown
|
||||
v-model="selectedCity"
|
||||
:options="cities"
|
||||
optionLabel="name"
|
||||
placeholder="Select a City"
|
||||
:pt="{
|
||||
root: { class: 'w-full md:w-14rem' },
|
||||
item: ({ props, state, context }) => ({
|
||||
class: context.selected ? 'bg-primary' : context.focused ? 'bg-blue-100' : undefined
|
||||
})
|
||||
}"
|
||||
/>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<Dropdown
|
||||
v-model="selectedCity"
|
||||
:options="cities"
|
||||
optionLabel="name"
|
||||
placeholder="Select a City"
|
||||
:pt="{
|
||||
root: { class: 'w-full md:w-14rem' },
|
||||
item: ({ props, state, context }) => ({
|
||||
class: context.selected ? 'bg-primary' : context.focused ? 'bg-blue-100' : undefined
|
||||
})
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
selectedCity: null,
|
||||
cities: [
|
||||
{ name: 'New York', code: 'NY' },
|
||||
{ name: 'Rome', code: 'RM' },
|
||||
{ name: 'London', code: 'LDN' },
|
||||
{ name: 'Istanbul', code: 'IST' },
|
||||
{ name: 'Paris', code: 'PRS' }
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
<\/script>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<Dropdown
|
||||
v-model="selectedCity"
|
||||
:options="cities"
|
||||
optionLabel="name"
|
||||
placeholder="Select a City"
|
||||
:pt="{
|
||||
root: { class: 'w-full md:w-14rem' },
|
||||
item: ({ props, state, context }) => ({
|
||||
class: context.selected ? 'bg-primary' : context.focused ? 'bg-blue-100' : undefined
|
||||
})
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const selectedCity = ref();
|
||||
const cities = ref([
|
||||
{ name: 'New York', code: 'NY' },
|
||||
{ name: 'Rome', code: 'RM' },
|
||||
{ name: 'London', code: 'LDN' },
|
||||
{ name: 'Istanbul', code: 'IST' },
|
||||
{ name: 'Paris', code: 'PRS' }
|
||||
]);
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
|
||||
import PtDoc from './PTDoc.vue';
|
||||
import PTImage from './PTImage.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -28,11 +27,6 @@ export default {
|
|||
label: 'Dropdown PT Options',
|
||||
component: DocApiTable,
|
||||
data: getPTOption('Dropdown')
|
||||
},
|
||||
{
|
||||
id: 'pt.demo',
|
||||
label: 'Demo',
|
||||
component: PtDoc
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,40 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs"></DocSectionText>
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
basic: `
|
||||
<DynamicDialog
|
||||
:pt="{
|
||||
root: { class: 'w-12 sm:w-9 md:w-6' }
|
||||
}"
|
||||
/>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<DynamicDialog
|
||||
:pt="{
|
||||
root: { class: 'w-12 sm:w-9 md:w-6' }
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<DynamicDialog
|
||||
:pt="{
|
||||
root: { class: 'w-12 sm:w-9 md:w-6' }
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
|
||||
import PtDoc from './PTDoc.vue';
|
||||
import PTImage from './PTImage.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -28,11 +27,6 @@ export default {
|
|||
label: 'Dialog PT Options',
|
||||
component: DocApiTable,
|
||||
data: getPTOption('Dialog')
|
||||
},
|
||||
{
|
||||
id: 'pt.demo',
|
||||
label: 'Demo',
|
||||
component: PtDoc
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,76 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs"></DocSectionText>
|
||||
<div class="card">
|
||||
<Editor
|
||||
v-model="value"
|
||||
:pt="{
|
||||
content: { style: { height: '320px' } },
|
||||
toolbar: { class: 'surface-ground' }
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
<DocSectionCode :code="code" :dependencies="{ quill: '1.3.7' }" component="Editor" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
code: {
|
||||
basic: `
|
||||
<Editor
|
||||
v-model="value"
|
||||
:pt="{
|
||||
content: { style: { height: '320px' } },
|
||||
toolbar: { class: 'surface-ground' }
|
||||
}"
|
||||
/>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<Editor
|
||||
v-model="value"
|
||||
:pt="{
|
||||
content: { style: { height: '320px' } },
|
||||
toolbar: { class: 'surface-ground' }
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
<\/script>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<Editor
|
||||
v-model="value"
|
||||
:pt="{
|
||||
content: { style: { height: '320px' } },
|
||||
toolbar: { class: 'surface-ground' }
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const value = ref('');
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
|
||||
import PtDoc from './PTDoc.vue';
|
||||
import PTImage from './PTImage.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -28,11 +27,6 @@ export default {
|
|||
label: 'Editor PT Options',
|
||||
component: DocApiTable,
|
||||
data: getPTOption('Editor')
|
||||
},
|
||||
{
|
||||
id: 'pt.demo',
|
||||
label: 'Demo',
|
||||
component: PtDoc
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,76 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs"> </DocSectionText>
|
||||
<div class="card">
|
||||
<Fieldset legend="Header" :toggleable="true" :pt="{ legend: { class: 'bg-primary' }, legendTitle: { class: 'text-white' }, togglerIcon: { class: 'text-white' } }">
|
||||
<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>
|
||||
</Fieldset>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
basic: `
|
||||
<Fieldset
|
||||
legend="Header"
|
||||
:toggleable="true"
|
||||
:pt="{
|
||||
legend: { class: 'bg-primary' },
|
||||
legendTitle: { class: 'text-white' },
|
||||
togglerIcon: { class: 'text-white' }
|
||||
}">
|
||||
<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>
|
||||
</Fieldset>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<Fieldset
|
||||
legend="Header"
|
||||
:toggleable="true"
|
||||
:pt="{
|
||||
legend: { class: 'bg-primary' },
|
||||
legendTitle: { class: 'text-white' },
|
||||
togglerIcon: { class: 'text-white' }
|
||||
}">
|
||||
<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>
|
||||
</Fieldset>
|
||||
</div>
|
||||
</template>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<Fieldset
|
||||
legend="Header"
|
||||
:toggleable="true"
|
||||
:pt="{
|
||||
legend: { class: 'bg-primary' },
|
||||
legendTitle: { class: 'text-white' },
|
||||
togglerIcon: { class: 'text-white' }
|
||||
}">
|
||||
<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>
|
||||
</Fieldset>
|
||||
</div>
|
||||
</template>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
|
||||
import PtDoc from './PTDoc.vue';
|
||||
import PTImage from './PTImage.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -28,11 +27,6 @@ export default {
|
|||
label: 'Fieldset PT Options',
|
||||
component: DocApiTable,
|
||||
data: getPTOption('Fieldset')
|
||||
},
|
||||
{
|
||||
id: 'pt.demo',
|
||||
label: 'Demo',
|
||||
component: PtDoc
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,117 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs"></DocSectionText>
|
||||
<div class="card">
|
||||
<FileUpload
|
||||
name="demo[]"
|
||||
url="./upload.php"
|
||||
@upload="onAdvancedUpload($event)"
|
||||
:multiple="true"
|
||||
accept="image/*"
|
||||
:maxFileSize="1000000"
|
||||
:pt="{
|
||||
content: { class: 'surface-ground' }
|
||||
}"
|
||||
>
|
||||
<template #empty>
|
||||
<p>Drag and drop files to here to upload.</p>
|
||||
</template>
|
||||
</FileUpload>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
basic: `
|
||||
<FileUpload
|
||||
name="demo[]"
|
||||
url="./upload.php"
|
||||
@upload="onAdvancedUpload($event)"
|
||||
:multiple="true"
|
||||
accept="image/*"
|
||||
:maxFileSize="1000000"
|
||||
:pt="{
|
||||
content: { class: 'surface-ground' }
|
||||
}"
|
||||
>
|
||||
<template #empty>
|
||||
<p>Drag and drop files to here to upload.</p>
|
||||
</template>
|
||||
</FileUpload>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<FileUpload
|
||||
name="demo[]"
|
||||
url="./upload.php"
|
||||
@upload="onAdvancedUpload($event)"
|
||||
:multiple="true"
|
||||
accept="image/*"
|
||||
:maxFileSize="1000000"
|
||||
:pt="{
|
||||
content: { class: 'surface-ground' }
|
||||
}"
|
||||
>
|
||||
<template #empty>
|
||||
<p>Drag and drop files to here to upload.</p>
|
||||
</template>
|
||||
</FileUpload>
|
||||
<Toast />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
onAdvancedUpload() {
|
||||
this.$toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
|
||||
}
|
||||
}
|
||||
};
|
||||
<\/script>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<FileUpload
|
||||
name="demo[]"
|
||||
url="./upload.php"
|
||||
@upload="onAdvancedUpload($event)"
|
||||
:multiple="true"
|
||||
accept="image/*"
|
||||
:maxFileSize="1000000"
|
||||
:pt="{
|
||||
content: { class: 'surface-ground' }
|
||||
}"
|
||||
>
|
||||
<template #empty>
|
||||
<p>Drag and drop files to here to upload.</p>
|
||||
</template>
|
||||
</FileUpload>
|
||||
<Toast />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useToast } from "primevue/usetoast";
|
||||
const toast = useToast();
|
||||
|
||||
const onAdvancedUpload = () => {
|
||||
toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
|
||||
};
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onAdvancedUpload() {
|
||||
this.$toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
|
||||
import PtDoc from './PTDoc.vue';
|
||||
import PTImage from './PTImage.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -28,11 +27,6 @@ export default {
|
|||
label: 'FileUpload PT Options',
|
||||
component: DocApiTable,
|
||||
data: getPTOption('FileUpload')
|
||||
},
|
||||
{
|
||||
id: 'pt.demo',
|
||||
label: 'Demo',
|
||||
component: PtDoc
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,163 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs"></DocSectionText>
|
||||
<div class="card">
|
||||
<Galleria
|
||||
:value="images"
|
||||
:responsiveOptions="responsiveOptions"
|
||||
:numVisible="5"
|
||||
:pt="{
|
||||
root: { style: { maxWidth: '640px' } }
|
||||
}"
|
||||
>
|
||||
<template #item="slotProps">
|
||||
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
|
||||
</template>
|
||||
<template #thumbnail="slotProps">
|
||||
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
|
||||
</template>
|
||||
</Galleria>
|
||||
</div>
|
||||
<DocSectionCode :code="code" :service="['PhotoService']" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { PhotoService } from '@/service/PhotoService';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
images: null,
|
||||
responsiveOptions: [
|
||||
{
|
||||
breakpoint: '1300px',
|
||||
numVisible: 4
|
||||
},
|
||||
{
|
||||
breakpoint: '575px',
|
||||
numVisible: 1
|
||||
}
|
||||
],
|
||||
code: {
|
||||
basic: `
|
||||
<Galleria
|
||||
:value="images"
|
||||
:responsiveOptions="responsiveOptions"
|
||||
:numVisible="5"
|
||||
:pt="{
|
||||
root: { style: { maxWidth: '640px' } }
|
||||
}"
|
||||
>
|
||||
<template #item="slotProps">
|
||||
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
|
||||
</template>
|
||||
<template #thumbnail="slotProps">
|
||||
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
|
||||
</template>
|
||||
</Galleria>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card md:flex md:justify-content-center">
|
||||
<Galleria
|
||||
:value="images"
|
||||
:responsiveOptions="responsiveOptions"
|
||||
:numVisible="5"
|
||||
:pt="{
|
||||
root: { style: { maxWidth: '640px' } }
|
||||
}"
|
||||
>
|
||||
<template #item="slotProps">
|
||||
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
|
||||
</template>
|
||||
<template #thumbnail="slotProps">
|
||||
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
|
||||
</template>
|
||||
</Galleria>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { PhotoService } from '@/service/PhotoService';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
images: null,
|
||||
responsiveOptions: [
|
||||
{
|
||||
breakpoint: '1300px',
|
||||
numVisible: 4
|
||||
},
|
||||
{
|
||||
breakpoint: '575px',
|
||||
numVisible: 1
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
PhotoService.getImages().then((data) => (this.images = data));
|
||||
}
|
||||
};
|
||||
<\/script>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card md:flex md:justify-content-center">
|
||||
<Galleria
|
||||
:value="images"
|
||||
:responsiveOptions="responsiveOptions"
|
||||
:numVisible="5"
|
||||
:pt="{
|
||||
root: { style: { maxWidth: '640px' } }
|
||||
}"
|
||||
>
|
||||
<template #item="slotProps">
|
||||
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
|
||||
</template>
|
||||
<template #thumbnail="slotProps">
|
||||
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
|
||||
</template>
|
||||
</Galleria>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import { PhotoService } from '@/service/PhotoService';
|
||||
|
||||
onMounted(() => {
|
||||
PhotoService.getImages().then((data) => (images.value = data));
|
||||
});
|
||||
|
||||
const images = ref();
|
||||
const responsiveOptions = ref([
|
||||
{
|
||||
breakpoint: '1300px',
|
||||
numVisible: 4
|
||||
},
|
||||
{
|
||||
breakpoint: '575px',
|
||||
numVisible: 1
|
||||
}
|
||||
]);
|
||||
<\/script>
|
||||
`,
|
||||
data: `
|
||||
/* PhotoService */
|
||||
{
|
||||
itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1.jpg',
|
||||
thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1s.jpg',
|
||||
alt: 'Description for Image 1',
|
||||
title: 'Title 1'
|
||||
},
|
||||
...
|
||||
`
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
PhotoService.getImages().then((data) => (this.images = data));
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
|
||||
import PtDoc from './PTDoc.vue';
|
||||
import PTImage from './PTImage.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -28,11 +27,6 @@ export default {
|
|||
label: 'Galleria PT Options',
|
||||
component: DocApiTable,
|
||||
data: getPTOption('Galleria')
|
||||
},
|
||||
{
|
||||
id: 'pt.demo',
|
||||
label: 'Demo',
|
||||
component: PtDoc
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,68 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs"></DocSectionText>
|
||||
<div class="card flex justify-content-center">
|
||||
<Image
|
||||
src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg"
|
||||
alt="Image"
|
||||
width="250"
|
||||
preview
|
||||
:pt="{
|
||||
image: { class: 'w-15rem' }
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
basic: `
|
||||
<Image
|
||||
src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg"
|
||||
alt="Image"
|
||||
width="250"
|
||||
preview
|
||||
:pt="{
|
||||
image: { class: 'w-15rem' }
|
||||
}"
|
||||
/>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<Image
|
||||
src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg"
|
||||
alt="Image"
|
||||
width="250"
|
||||
preview
|
||||
:pt="{
|
||||
image: { class: 'w-15rem' }
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<Image
|
||||
src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg"
|
||||
alt="Image"
|
||||
width="250"
|
||||
preview
|
||||
:pt="{
|
||||
image: { class: 'w-15rem' }
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
|
||||
import PtDoc from './PTDoc.vue';
|
||||
import PTImage from './PTImage.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -28,11 +27,6 @@ export default {
|
|||
label: 'Image PT Options',
|
||||
component: DocApiTable,
|
||||
data: getPTOption('Image')
|
||||
},
|
||||
{
|
||||
id: 'pt.demo',
|
||||
label: 'Demo',
|
||||
component: PtDoc
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,69 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs"></DocSectionText>
|
||||
<div class="card flex justify-content-center">
|
||||
<InlineMessage
|
||||
:pt="{
|
||||
root: { class: 'bg-yellow-100' },
|
||||
icon: { class: 'hidden' }
|
||||
}"
|
||||
>
|
||||
Username is required
|
||||
</InlineMessage>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
basic: `
|
||||
<InlineMessage
|
||||
:pt="{
|
||||
root: { class: 'bg-yellow-100' },
|
||||
icon: { class: 'hidden' }
|
||||
}"
|
||||
>
|
||||
Username is required
|
||||
</InlineMessage>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<InlineMessage
|
||||
:pt="{
|
||||
root: { class: 'bg-indigo-100' },
|
||||
icon: { class: 'hidden' }
|
||||
}"
|
||||
>
|
||||
Username is required
|
||||
</InlineMessage>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<\/script>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<InlineMessage
|
||||
:pt="{
|
||||
root: { class: 'bg-indigo-100' },
|
||||
icon: { class: 'hidden' }
|
||||
}"
|
||||
>
|
||||
Username is required
|
||||
</InlineMessage>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
|
||||
import PtDoc from './PTDoc.vue';
|
||||
import PTImage from './PTImage.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -28,11 +27,6 @@ export default {
|
|||
label: 'InlineMessage PT Options',
|
||||
component: DocApiTable,
|
||||
data: getPTOption('InlineMessage')
|
||||
},
|
||||
{
|
||||
id: 'pt.demo',
|
||||
label: 'Demo',
|
||||
component: PtDoc
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,91 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs"></DocSectionText>
|
||||
<div class="card">
|
||||
<Inplace
|
||||
:pt="{
|
||||
display: { class: 'bg-primary' }
|
||||
}"
|
||||
>
|
||||
<template #display> View Content </template>
|
||||
<template #content>
|
||||
<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>
|
||||
</template>
|
||||
</Inplace>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
basic: `
|
||||
<Inplace
|
||||
:pt="{
|
||||
display: { class: 'bg-primary' }
|
||||
}"
|
||||
>
|
||||
<template #display> View Content </template>
|
||||
<template #content>
|
||||
<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>
|
||||
</template>
|
||||
</Inplace>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<Inplace
|
||||
:pt="{
|
||||
display: { class: 'bg-primary' }
|
||||
}"
|
||||
>
|
||||
<template #display> View Content </template>
|
||||
<template #content>
|
||||
<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>
|
||||
</template>
|
||||
</Inplace>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
<\/script>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<Inplace
|
||||
:pt="{
|
||||
display: { class: 'bg-primary' }
|
||||
}"
|
||||
>
|
||||
<template #display> View Content </template>
|
||||
<template #content>
|
||||
<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>
|
||||
</template>
|
||||
</Inplace>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
|
||||
import PtDoc from './PTDoc.vue';
|
||||
import PTImage from './PTImage.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -28,11 +27,6 @@ export default {
|
|||
label: 'Inplace PT Options',
|
||||
component: DocApiTable,
|
||||
data: getPTOption('Inplace')
|
||||
},
|
||||
{
|
||||
id: 'pt.demo',
|
||||
label: 'Demo',
|
||||
component: PtDoc
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,85 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs"></DocSectionText>
|
||||
<div class="card flex justify-content-center">
|
||||
<InputMask
|
||||
id="basic"
|
||||
v-model="value"
|
||||
mask="99-999999"
|
||||
placeholder="99-999999"
|
||||
:pt="{
|
||||
root: { class: 'border-teal-400' }
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
code: {
|
||||
basic: `
|
||||
<InputMask
|
||||
id="basic"
|
||||
v-model="value"
|
||||
mask="99-999999"
|
||||
placeholder="99-999999"
|
||||
:pt="{
|
||||
root: { class: 'border-teal-400' }
|
||||
}"
|
||||
/>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<InputMask
|
||||
id="basic"
|
||||
v-model="value"
|
||||
mask="99-999999"
|
||||
placeholder="99-999999"
|
||||
:pt="{
|
||||
root: { class: 'border-teal-400' }
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: null
|
||||
}
|
||||
}
|
||||
}
|
||||
<\/script>
|
||||
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<InputMask
|
||||
id="basic"
|
||||
v-model="value"
|
||||
mask="99-999999"
|
||||
placeholder="99-999999"
|
||||
:pt="{
|
||||
root: { class: 'border-teal-400' }
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const value = ref(null);
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
|
||||
import PtDoc from './PTDoc.vue';
|
||||
import PTImage from './PTImage.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -28,11 +27,6 @@ export default {
|
|||
label: 'InputMask PT Options',
|
||||
component: DocApiTable,
|
||||
data: getPTOption('InputMask')
|
||||
},
|
||||
{
|
||||
id: 'pt.demo',
|
||||
label: 'Demo',
|
||||
component: PtDoc
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,136 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs"></DocSectionText>
|
||||
<div class="card flex justify-content-center">
|
||||
<InputNumber
|
||||
v-model="value"
|
||||
showButtons
|
||||
buttonLayout="horizontal"
|
||||
:step="0.25"
|
||||
incrementButtonIcon="pi pi-plus"
|
||||
decrementButtonIcon="pi pi-minus"
|
||||
mode="currency"
|
||||
currency="EUR"
|
||||
:pt="{
|
||||
decrementButton: {
|
||||
root: {
|
||||
class: 'bg-orange-500 border-orange-500'
|
||||
}
|
||||
},
|
||||
incrementButton: {
|
||||
root: {
|
||||
class: 'bg-teal-500 border-teal-500'
|
||||
}
|
||||
}
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: 20,
|
||||
code: {
|
||||
basic: `
|
||||
<InputNumber
|
||||
v-model="value"
|
||||
showButtons
|
||||
buttonLayout="horizontal"
|
||||
:step="0.25"
|
||||
incrementButtonIcon="pi pi-plus"
|
||||
decrementButtonIcon="pi pi-minus"
|
||||
mode="currency"
|
||||
currency="EUR"
|
||||
:pt="{
|
||||
decrementButton: {
|
||||
root: {
|
||||
class: 'bg-orange-500 border-orange-500'
|
||||
}
|
||||
},
|
||||
incrementButton: {
|
||||
root: {
|
||||
class: 'bg-teal-500 border-teal-500'
|
||||
}
|
||||
}
|
||||
}"
|
||||
/>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<InputNumber
|
||||
v-model="value"
|
||||
showButtons
|
||||
buttonLayout="horizontal"
|
||||
:step="0.25"
|
||||
incrementButtonIcon="pi pi-plus"
|
||||
decrementButtonIcon="pi pi-minus"
|
||||
mode="currency"
|
||||
currency="EUR"
|
||||
:pt="{
|
||||
decrementButton: {
|
||||
root: {
|
||||
class: 'bg-orange-500 border-orange-500'
|
||||
}
|
||||
},
|
||||
incrementButton: {
|
||||
root: {
|
||||
class: 'bg-teal-500 border-teal-500'
|
||||
}
|
||||
}
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: 20
|
||||
};
|
||||
}
|
||||
};
|
||||
<\/script>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<InputNumber
|
||||
v-model="value"
|
||||
showButtons
|
||||
buttonLayout="horizontal"
|
||||
:step="0.25"
|
||||
incrementButtonIcon="pi pi-plus"
|
||||
decrementButtonIcon="pi pi-minus"
|
||||
mode="currency"
|
||||
currency="EUR"
|
||||
:pt="{
|
||||
decrementButton: {
|
||||
root: {
|
||||
class: 'bg-orange-500 border-orange-500'
|
||||
}
|
||||
},
|
||||
incrementButton: {
|
||||
root: {
|
||||
class: 'bg-teal-500 border-teal-500'
|
||||
}
|
||||
}
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const value = ref(20);
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
|
||||
import PtDoc from './PTDoc.vue';
|
||||
import PTImage from './PTImage.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -28,11 +27,6 @@ export default {
|
|||
label: 'InputNumber PT Options',
|
||||
component: DocApiTable,
|
||||
data: getPTOption('InputNumber')
|
||||
},
|
||||
{
|
||||
id: 'pt.demo',
|
||||
label: 'Demo',
|
||||
component: PtDoc
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,80 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs"></DocSectionText>
|
||||
<div class="card flex justify-content-center">
|
||||
<InputSwitch
|
||||
v-model="checked"
|
||||
:pt="{
|
||||
slider: ({ props }) => ({
|
||||
class: props.modelValue ? 'bg-teal-400' : 'bg-red-400'
|
||||
})
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checked: false,
|
||||
code: {
|
||||
basic: `
|
||||
<InputSwitch
|
||||
v-model="checked"
|
||||
:pt="{
|
||||
slider: ({ props }) => ({
|
||||
class: props.modelValue ? 'bg-teal-400' : 'bg-red-400'
|
||||
})
|
||||
}"
|
||||
/>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<InputSwitch
|
||||
v-model="checked"
|
||||
:pt="{
|
||||
slider: ({ props }) => ({
|
||||
class: props.modelValue ? 'bg-teal-400' : 'bg-red-400'
|
||||
})
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checked: false
|
||||
}
|
||||
}
|
||||
};
|
||||
<\/script>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<InputSwitch
|
||||
v-model="checked"
|
||||
:pt="{
|
||||
slider: ({ props }) => ({
|
||||
class: props.modelValue ? 'bg-teal-400' : 'bg-red-400'
|
||||
})
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const checked = ref(false);
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
|
||||
import PtDoc from './PTDoc.vue';
|
||||
import PTImage from './PTImage.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -28,11 +27,6 @@ export default {
|
|||
label: 'InputSwitch PT Options',
|
||||
component: DocApiTable,
|
||||
data: getPTOption('InputSwitch')
|
||||
},
|
||||
{
|
||||
id: 'pt.demo',
|
||||
label: 'Demo',
|
||||
component: PtDoc
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,77 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs"></DocSectionText>
|
||||
<div class="card flex justify-content-center">
|
||||
<InputText
|
||||
v-model="value"
|
||||
type="text"
|
||||
:pt="{
|
||||
root: { class: 'border-teal-400' }
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: null,
|
||||
code: {
|
||||
basic: `
|
||||
<InputText
|
||||
v-model="value"
|
||||
type="text"
|
||||
:pt="{
|
||||
root: { class: 'border-teal-400' }
|
||||
}"
|
||||
/>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<InputText
|
||||
v-model="value"
|
||||
type="text"
|
||||
:pt="{
|
||||
root: { class: 'border-teal-400' }
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: null
|
||||
}
|
||||
}
|
||||
}
|
||||
<\/script>
|
||||
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<InputText
|
||||
v-model="value"
|
||||
type="text"
|
||||
:pt="{
|
||||
root: { class: 'border-teal-400' }
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const value = ref(null);
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
|
||||
import PtDoc from './PTDoc.vue';
|
||||
import PTImage from './PTImage.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -28,11 +27,6 @@ export default {
|
|||
label: 'InputText PT Options',
|
||||
component: DocApiTable,
|
||||
data: getPTOption('InputText')
|
||||
},
|
||||
{
|
||||
id: 'pt.demo',
|
||||
label: 'Demo',
|
||||
component: PtDoc
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,72 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs"></DocSectionText>
|
||||
<div class="card flex justify-content-center">
|
||||
<Knob
|
||||
v-model="value"
|
||||
:pt="{
|
||||
value: { style: { stroke: 'var(--cyan-500)' } }
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: 0,
|
||||
code: {
|
||||
basic: `
|
||||
<Knob
|
||||
v-model="value"
|
||||
:pt="{
|
||||
value: { style: { stroke: 'var(--cyan-500)' } }
|
||||
}"
|
||||
/>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<Knob
|
||||
v-model="value"
|
||||
:pt="{
|
||||
value: { style: { stroke: 'var(--cyan-500)' } }
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: 0
|
||||
}
|
||||
}
|
||||
};
|
||||
<\/script>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<Knob
|
||||
v-model="value"
|
||||
:pt="{
|
||||
value: { style: { stroke: 'var(--cyan-500)' } }
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const value = ref(0);
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
|
||||
import PtDoc from './PTDoc.vue';
|
||||
import PTImage from './PTImage.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -28,11 +27,6 @@ export default {
|
|||
label: 'Knob PT Options',
|
||||
component: DocApiTable,
|
||||
data: getPTOption('Knob')
|
||||
},
|
||||
{
|
||||
id: 'pt.demo',
|
||||
label: 'Demo',
|
||||
component: PtDoc
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,113 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs"></DocSectionText>
|
||||
<div class="card flex justify-content-center">
|
||||
<Listbox
|
||||
v-model="selectedCity"
|
||||
:options="cities"
|
||||
optionLabel="name"
|
||||
:pt="{
|
||||
root: { class: 'w-full md:w-14rem' },
|
||||
item: ({ props, state, context }) => ({
|
||||
class: context.selected ? 'bg-primary' : context.focused ? 'bg-blue-100' : undefined
|
||||
})
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
selectedCity: null,
|
||||
cities: [
|
||||
{ name: 'New York', code: 'NY' },
|
||||
{ name: 'Rome', code: 'RM' },
|
||||
{ name: 'London', code: 'LDN' },
|
||||
{ name: 'Istanbul', code: 'IST' },
|
||||
{ name: 'Paris', code: 'PRS' }
|
||||
],
|
||||
code: {
|
||||
basic: `
|
||||
<Listbox
|
||||
v-model="selectedCity"
|
||||
:options="cities"
|
||||
optionLabel="name"
|
||||
:pt="{
|
||||
root: { class: 'w-full md:w-14rem' },
|
||||
item: ({ props, state, context }) => ({
|
||||
class: context.selected ? 'bg-primary' : context.focused ? 'bg-blue-100' : undefined
|
||||
})
|
||||
}"
|
||||
/>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<Listbox
|
||||
v-model="selectedCity"
|
||||
:options="cities"
|
||||
optionLabel="name"
|
||||
:pt="{
|
||||
root: { class: 'w-full md:w-14rem' },
|
||||
item: ({ props, state, context }) => ({
|
||||
class: context.selected ? 'bg-primary' : context.focused ? 'bg-blue-100' : undefined
|
||||
})
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
selectedCity: null,
|
||||
cities: [
|
||||
{ name: 'New York', code: 'NY' },
|
||||
{ name: 'Rome', code: 'RM' },
|
||||
{ name: 'London', code: 'LDN' },
|
||||
{ name: 'Istanbul', code: 'IST' },
|
||||
{ name: 'Paris', code: 'PRS' }
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
<\/script>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<Listbox
|
||||
v-model="selectedCity"
|
||||
:options="cities"
|
||||
optionLabel="name"
|
||||
:pt="{
|
||||
root: { class: 'w-full md:w-14rem' },
|
||||
item: ({ props, state, context }) => ({
|
||||
class: context.selected ? 'bg-primary' : context.focused ? 'bg-blue-100' : undefined
|
||||
})
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const selectedCity = ref();
|
||||
const cities = ref([
|
||||
{ name: 'New York', code: 'NY' },
|
||||
{ name: 'Rome', code: 'RM' },
|
||||
{ name: 'London', code: 'LDN' },
|
||||
{ name: 'Istanbul', code: 'IST' },
|
||||
{ name: 'Paris', code: 'PRS' }
|
||||
]);
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
|
||||
import PtDoc from './PTDoc.vue';
|
||||
import PTImage from './PTImage.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -28,11 +27,6 @@ export default {
|
|||
label: 'Listbox PT Options',
|
||||
component: DocApiTable,
|
||||
data: getPTOption('Listbox')
|
||||
},
|
||||
{
|
||||
id: 'pt.demo',
|
||||
label: 'Demo',
|
||||
component: PtDoc
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,425 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs"> </DocSectionText>
|
||||
<div class="card">
|
||||
<MegaMenu
|
||||
:model="items"
|
||||
:pt="{
|
||||
action: ({ props, state, context }) => ({
|
||||
class: context.active ? 'bg-primary-200 border-round-sm' : context.focused ? 'bg-primary-300 border-round-sm' : undefined
|
||||
})
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
items: [
|
||||
{
|
||||
label: 'Videos',
|
||||
icon: 'pi pi-fw pi-video',
|
||||
items: [
|
||||
[
|
||||
{
|
||||
label: 'Video 1',
|
||||
items: [{ label: 'Video 1.1' }, { label: 'Video 1.2' }]
|
||||
},
|
||||
{
|
||||
label: 'Video 2',
|
||||
items: [{ label: 'Video 2.1' }, { label: 'Video 2.2' }]
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
label: 'Video 3',
|
||||
items: [{ label: 'Video 3.1' }, { label: 'Video 3.2' }]
|
||||
},
|
||||
{
|
||||
label: 'Video 4',
|
||||
items: [{ label: 'Video 4.1' }, { label: 'Video 4.2' }]
|
||||
}
|
||||
]
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Users',
|
||||
icon: 'pi pi-fw pi-users',
|
||||
items: [
|
||||
[
|
||||
{
|
||||
label: 'User 1',
|
||||
items: [{ label: 'User 1.1' }, { label: 'User 1.2' }]
|
||||
},
|
||||
{
|
||||
label: 'User 2',
|
||||
items: [{ label: 'User 2.1' }, { label: 'User 2.2' }]
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
label: 'User 3',
|
||||
items: [{ label: 'User 3.1' }, { label: 'User 3.2' }]
|
||||
},
|
||||
{
|
||||
label: 'User 4',
|
||||
items: [{ label: 'User 4.1' }, { label: 'User 4.2' }]
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
label: 'User 5',
|
||||
items: [{ label: 'User 5.1' }, { label: 'User 5.2' }]
|
||||
},
|
||||
{
|
||||
label: 'User 6',
|
||||
items: [{ label: 'User 6.1' }, { label: 'User 6.2' }]
|
||||
}
|
||||
]
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Events',
|
||||
icon: 'pi pi-fw pi-calendar',
|
||||
items: [
|
||||
[
|
||||
{
|
||||
label: 'Event 1',
|
||||
items: [{ label: 'Event 1.1' }, { label: 'Event 1.2' }]
|
||||
},
|
||||
{
|
||||
label: 'Event 2',
|
||||
items: [{ label: 'Event 2.1' }, { label: 'Event 2.2' }]
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
label: 'Event 3',
|
||||
items: [{ label: 'Event 3.1' }, { label: 'Event 3.2' }]
|
||||
},
|
||||
{
|
||||
label: 'Event 4',
|
||||
items: [{ label: 'Event 4.1' }, { label: 'Event 4.2' }]
|
||||
}
|
||||
]
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Settings',
|
||||
icon: 'pi pi-fw pi-cog',
|
||||
items: [
|
||||
[
|
||||
{
|
||||
label: 'Setting 1',
|
||||
items: [{ label: 'Setting 1.1' }, { label: 'Setting 1.2' }]
|
||||
},
|
||||
{
|
||||
label: 'Setting 2',
|
||||
items: [{ label: 'Setting 2.1' }, { label: 'Setting 2.2' }]
|
||||
},
|
||||
{
|
||||
label: 'Setting 3',
|
||||
items: [{ label: 'Setting 3.1' }, { label: 'Setting 3.2' }]
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
label: 'Technology 4',
|
||||
items: [{ label: 'Setting 4.1' }, { label: 'Setting 4.2' }]
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
],
|
||||
code: {
|
||||
basic: `
|
||||
<MegaMenu
|
||||
:model="items"
|
||||
:pt="{
|
||||
action: ({ props, state, context }) => ({
|
||||
class: context.active ? 'bg-primary-200 border-round-sm' : context.focused ? 'bg-primary-300 border-round-sm' : undefined
|
||||
})
|
||||
}"
|
||||
/>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<MegaMenu
|
||||
:model="items"
|
||||
:pt="{
|
||||
action: ({ props, state, context }) => ({
|
||||
class: context.active ? 'bg-primary-200 border-round-sm' : context.focused ? 'bg-primary-300 border-round-sm' : undefined
|
||||
})
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
items: [
|
||||
{
|
||||
label: 'Videos',
|
||||
icon: 'pi pi-fw pi-video',
|
||||
items: [
|
||||
[
|
||||
{
|
||||
label: 'Video 1',
|
||||
items: [{ label: 'Video 1.1' }, { label: 'Video 1.2' }]
|
||||
},
|
||||
{
|
||||
label: 'Video 2',
|
||||
items: [{ label: 'Video 2.1' }, { label: 'Video 2.2' }]
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
label: 'Video 3',
|
||||
items: [{ label: 'Video 3.1' }, { label: 'Video 3.2' }]
|
||||
},
|
||||
{
|
||||
label: 'Video 4',
|
||||
items: [{ label: 'Video 4.1' }, { label: 'Video 4.2' }]
|
||||
}
|
||||
]
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Users',
|
||||
icon: 'pi pi-fw pi-users',
|
||||
items: [
|
||||
[
|
||||
{
|
||||
label: 'User 1',
|
||||
items: [{ label: 'User 1.1' }, { label: 'User 1.2' }]
|
||||
},
|
||||
{
|
||||
label: 'User 2',
|
||||
items: [{ label: 'User 2.1' }, { label: 'User 2.2' }]
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
label: 'User 3',
|
||||
items: [{ label: 'User 3.1' }, { label: 'User 3.2' }]
|
||||
},
|
||||
{
|
||||
label: 'User 4',
|
||||
items: [{ label: 'User 4.1' }, { label: 'User 4.2' }]
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
label: 'User 5',
|
||||
items: [{ label: 'User 5.1' }, { label: 'User 5.2' }]
|
||||
},
|
||||
{
|
||||
label: 'User 6',
|
||||
items: [{ label: 'User 6.1' }, { label: 'User 6.2' }]
|
||||
}
|
||||
]
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Events',
|
||||
icon: 'pi pi-fw pi-calendar',
|
||||
items: [
|
||||
[
|
||||
{
|
||||
label: 'Event 1',
|
||||
items: [{ label: 'Event 1.1' }, { label: 'Event 1.2' }]
|
||||
},
|
||||
{
|
||||
label: 'Event 2',
|
||||
items: [{ label: 'Event 2.1' }, { label: 'Event 2.2' }]
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
label: 'Event 3',
|
||||
items: [{ label: 'Event 3.1' }, { label: 'Event 3.2' }]
|
||||
},
|
||||
{
|
||||
label: 'Event 4',
|
||||
items: [{ label: 'Event 4.1' }, { label: 'Event 4.2' }]
|
||||
}
|
||||
]
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Settings',
|
||||
icon: 'pi pi-fw pi-cog',
|
||||
items: [
|
||||
[
|
||||
{
|
||||
label: 'Setting 1',
|
||||
items: [{ label: 'Setting 1.1' }, { label: 'Setting 1.2' }]
|
||||
},
|
||||
{
|
||||
label: 'Setting 2',
|
||||
items: [{ label: 'Setting 2.1' }, { label: 'Setting 2.2' }]
|
||||
},
|
||||
{
|
||||
label: 'Setting 3',
|
||||
items: [{ label: 'Setting 3.1' }, { label: 'Setting 3.2' }]
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
label: 'Technology 4',
|
||||
items: [{ label: 'Setting 4.1' }, { label: 'Setting 4.2' }]
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
<\/script>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<MegaMenu
|
||||
:model="items"
|
||||
:pt="{
|
||||
action: ({ props, state, context }) => ({
|
||||
class: context.active ? 'bg-primary-200 border-round-sm' : context.focused ? 'bg-primary-300 border-round-sm' : undefined
|
||||
})
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const items = ref([
|
||||
{
|
||||
label: 'Videos',
|
||||
icon: 'pi pi-fw pi-video',
|
||||
items: [
|
||||
[
|
||||
{
|
||||
label: 'Video 1',
|
||||
items: [{ label: 'Video 1.1' }, { label: 'Video 1.2' }]
|
||||
},
|
||||
{
|
||||
label: 'Video 2',
|
||||
items: [{ label: 'Video 2.1' }, { label: 'Video 2.2' }]
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
label: 'Video 3',
|
||||
items: [{ label: 'Video 3.1' }, { label: 'Video 3.2' }]
|
||||
},
|
||||
{
|
||||
label: 'Video 4',
|
||||
items: [{ label: 'Video 4.1' }, { label: 'Video 4.2' }]
|
||||
}
|
||||
]
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Users',
|
||||
icon: 'pi pi-fw pi-users',
|
||||
items: [
|
||||
[
|
||||
{
|
||||
label: 'User 1',
|
||||
items: [{ label: 'User 1.1' }, { label: 'User 1.2' }]
|
||||
},
|
||||
{
|
||||
label: 'User 2',
|
||||
items: [{ label: 'User 2.1' }, { label: 'User 2.2' }]
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
label: 'User 3',
|
||||
items: [{ label: 'User 3.1' }, { label: 'User 3.2' }]
|
||||
},
|
||||
{
|
||||
label: 'User 4',
|
||||
items: [{ label: 'User 4.1' }, { label: 'User 4.2' }]
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
label: 'User 5',
|
||||
items: [{ label: 'User 5.1' }, { label: 'User 5.2' }]
|
||||
},
|
||||
{
|
||||
label: 'User 6',
|
||||
items: [{ label: 'User 6.1' }, { label: 'User 6.2' }]
|
||||
}
|
||||
]
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Events',
|
||||
icon: 'pi pi-fw pi-calendar',
|
||||
items: [
|
||||
[
|
||||
{
|
||||
label: 'Event 1',
|
||||
items: [{ label: 'Event 1.1' }, { label: 'Event 1.2' }]
|
||||
},
|
||||
{
|
||||
label: 'Event 2',
|
||||
items: [{ label: 'Event 2.1' }, { label: 'Event 2.2' }]
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
label: 'Event 3',
|
||||
items: [{ label: 'Event 3.1' }, { label: 'Event 3.2' }]
|
||||
},
|
||||
{
|
||||
label: 'Event 4',
|
||||
items: [{ label: 'Event 4.1' }, { label: 'Event 4.2' }]
|
||||
}
|
||||
]
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Settings',
|
||||
icon: 'pi pi-fw pi-cog',
|
||||
items: [
|
||||
[
|
||||
{
|
||||
label: 'Setting 1',
|
||||
items: [{ label: 'Setting 1.1' }, { label: 'Setting 1.2' }]
|
||||
},
|
||||
{
|
||||
label: 'Setting 2',
|
||||
items: [{ label: 'Setting 2.1' }, { label: 'Setting 2.2' }]
|
||||
},
|
||||
{
|
||||
label: 'Setting 3',
|
||||
items: [{ label: 'Setting 3.1' }, { label: 'Setting 3.2' }]
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
label: 'Technology 4',
|
||||
items: [{ label: 'Setting 4.1' }, { label: 'Setting 4.2' }]
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
]);
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
|
||||
import PtDoc from './PTDoc.vue';
|
||||
import PTImage from './PTImage.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -28,11 +27,6 @@ export default {
|
|||
label: 'MegaMenu PT Options',
|
||||
component: DocApiTable,
|
||||
data: getPTOption('MegaMenu')
|
||||
},
|
||||
{
|
||||
id: 'pt.demo',
|
||||
label: 'Demo',
|
||||
component: PtDoc
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,193 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs"> </DocSectionText>
|
||||
<div class="card flex justify-content-center">
|
||||
<Menu
|
||||
:model="items"
|
||||
:pt="{
|
||||
submenuHeader: { class: 'text-surface-900' },
|
||||
action: ({ props, state, context }) => ({
|
||||
class: context.focused ? 'bg-primary-400' : undefined
|
||||
})
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
items: [
|
||||
{
|
||||
label: 'Options',
|
||||
items: [
|
||||
{
|
||||
label: 'Update',
|
||||
icon: 'pi pi-refresh',
|
||||
command: () => {
|
||||
this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Delete',
|
||||
icon: 'pi pi-times',
|
||||
command: () => {
|
||||
this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Navigate',
|
||||
items: [
|
||||
{
|
||||
label: 'Vue Website',
|
||||
icon: 'pi pi-external-link',
|
||||
url: 'https://vuejs.org/'
|
||||
},
|
||||
{
|
||||
label: 'Router',
|
||||
icon: 'pi pi-upload',
|
||||
to: '/fileupload'
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
code: {
|
||||
basic: `
|
||||
<Menu
|
||||
:model="items"
|
||||
:pt="{
|
||||
submenuHeader: { class: 'text-surface-900' },
|
||||
action: ({ props, state, context }) => ({
|
||||
class: context.focused ? 'bg-primary-400' : undefined
|
||||
})
|
||||
}"
|
||||
/>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<Menu
|
||||
:model="items"
|
||||
:pt="{
|
||||
submenuHeader: { class: 'text-surface-900' },
|
||||
action: ({ props, state, context }) => ({
|
||||
class: context.focused ? 'bg-primary-400' : undefined
|
||||
})
|
||||
}"
|
||||
/>
|
||||
<Toast />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
items: [
|
||||
{
|
||||
label: 'Options',
|
||||
items: [
|
||||
{
|
||||
label: 'Update',
|
||||
icon: 'pi pi-refresh',
|
||||
command: () => {
|
||||
this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Delete',
|
||||
icon: 'pi pi-times',
|
||||
command: () => {
|
||||
this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Navigate',
|
||||
items: [
|
||||
{
|
||||
label: 'Vue Website',
|
||||
icon: 'pi pi-external-link',
|
||||
url: 'https://vuejs.org/'
|
||||
},
|
||||
{
|
||||
label: 'Router',
|
||||
icon: 'pi pi-upload',
|
||||
to: '/fileupload'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
<\/script>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<Menu
|
||||
:model="items"
|
||||
:pt="{
|
||||
submenuHeader: { class: 'text-surface-900' },
|
||||
action: ({ props, state, context }) => ({
|
||||
class: context.focused ? 'bg-primary-400' : undefined
|
||||
})
|
||||
}"
|
||||
/>
|
||||
<Toast />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import { useToast } from "primevue/usetoast";
|
||||
|
||||
const toast = useToast();
|
||||
const items = ref([
|
||||
{
|
||||
label: 'Options',
|
||||
items: [
|
||||
{
|
||||
label: 'Update',
|
||||
icon: 'pi pi-refresh',
|
||||
command: () => {
|
||||
toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Delete',
|
||||
icon: 'pi pi-times',
|
||||
command: () => {
|
||||
toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Navigate',
|
||||
items: [
|
||||
{
|
||||
label: 'Vue Website',
|
||||
icon: 'pi pi-external-link',
|
||||
url: 'https://vuejs.org/'
|
||||
},
|
||||
{
|
||||
label: 'Router',
|
||||
icon: 'pi pi-upload',
|
||||
to: '/fileupload'
|
||||
}
|
||||
]
|
||||
}
|
||||
]);
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
|
||||
import PtDoc from './PTDoc.vue';
|
||||
import PTImage from './PTImage.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -28,11 +27,6 @@ export default {
|
|||
label: 'Menu PT Options',
|
||||
component: DocApiTable,
|
||||
data: getPTOption('Menu')
|
||||
},
|
||||
{
|
||||
id: 'pt.demo',
|
||||
label: 'Demo',
|
||||
component: PtDoc
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,446 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs"> </DocSectionText>
|
||||
<div class="card relative z-2">
|
||||
<Menubar
|
||||
:model="items"
|
||||
:pt="{
|
||||
action: ({ props, state, context }) => ({
|
||||
class: context.active ? 'bg-primary-200 border-round-sm' : context.focused ? 'bg-primary-300 border-round-sm' : undefined
|
||||
})
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
items: [
|
||||
{
|
||||
label: 'File',
|
||||
icon: 'pi pi-fw pi-file',
|
||||
items: [
|
||||
{
|
||||
label: 'New',
|
||||
icon: 'pi pi-fw pi-plus',
|
||||
items: [
|
||||
{
|
||||
label: 'Bookmark',
|
||||
icon: 'pi pi-fw pi-bookmark'
|
||||
},
|
||||
{
|
||||
label: 'Video',
|
||||
icon: 'pi pi-fw pi-video'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Delete',
|
||||
icon: 'pi pi-fw pi-trash'
|
||||
},
|
||||
{
|
||||
separator: true
|
||||
},
|
||||
{
|
||||
label: 'Export',
|
||||
icon: 'pi pi-fw pi-external-link'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Edit',
|
||||
icon: 'pi pi-fw pi-pencil',
|
||||
items: [
|
||||
{
|
||||
label: 'Left',
|
||||
icon: 'pi pi-fw pi-align-left'
|
||||
},
|
||||
{
|
||||
label: 'Right',
|
||||
icon: 'pi pi-fw pi-align-right'
|
||||
},
|
||||
{
|
||||
label: 'Center',
|
||||
icon: 'pi pi-fw pi-align-center'
|
||||
},
|
||||
{
|
||||
label: 'Justify',
|
||||
icon: 'pi pi-fw pi-align-justify'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Users',
|
||||
icon: 'pi pi-fw pi-user',
|
||||
items: [
|
||||
{
|
||||
label: 'New',
|
||||
icon: 'pi pi-fw pi-user-plus'
|
||||
},
|
||||
{
|
||||
label: 'Delete',
|
||||
icon: 'pi pi-fw pi-user-minus'
|
||||
},
|
||||
{
|
||||
label: 'Search',
|
||||
icon: 'pi pi-fw pi-users',
|
||||
items: [
|
||||
{
|
||||
label: 'Filter',
|
||||
icon: 'pi pi-fw pi-filter',
|
||||
items: [
|
||||
{
|
||||
label: 'Print',
|
||||
icon: 'pi pi-fw pi-print'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
icon: 'pi pi-fw pi-bars',
|
||||
label: 'List'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Events',
|
||||
icon: 'pi pi-fw pi-calendar',
|
||||
items: [
|
||||
{
|
||||
label: 'Edit',
|
||||
icon: 'pi pi-fw pi-pencil',
|
||||
items: [
|
||||
{
|
||||
label: 'Save',
|
||||
icon: 'pi pi-fw pi-calendar-plus'
|
||||
},
|
||||
{
|
||||
label: 'Delete',
|
||||
icon: 'pi pi-fw pi-calendar-minus'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Archive',
|
||||
icon: 'pi pi-fw pi-calendar-times',
|
||||
items: [
|
||||
{
|
||||
label: 'Remove',
|
||||
icon: 'pi pi-fw pi-calendar-minus'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Quit',
|
||||
icon: 'pi pi-fw pi-power-off'
|
||||
}
|
||||
],
|
||||
code: {
|
||||
basic: `
|
||||
<Menubar
|
||||
:model="items"
|
||||
:pt="{
|
||||
action: ({ props, state, context }) => ({
|
||||
class: context.active ? 'bg-primary-200 border-round-sm' : context.focused ? 'bg-primary-300 border-round-sm' : undefined
|
||||
})
|
||||
}"
|
||||
/>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card relative z-2">
|
||||
<Menubar
|
||||
:model="items"
|
||||
:pt="{
|
||||
action: ({ props, state, context }) => ({
|
||||
class: context.active ? 'bg-primary-200 border-round-sm' : context.focused ? 'bg-primary-300 border-round-sm' : undefined
|
||||
})
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
items: [
|
||||
{
|
||||
label: 'File',
|
||||
icon: 'pi pi-fw pi-file',
|
||||
items: [
|
||||
{
|
||||
label: 'New',
|
||||
icon: 'pi pi-fw pi-plus',
|
||||
items: [
|
||||
{
|
||||
label: 'Bookmark',
|
||||
icon: 'pi pi-fw pi-bookmark'
|
||||
},
|
||||
{
|
||||
label: 'Video',
|
||||
icon: 'pi pi-fw pi-video'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Delete',
|
||||
icon: 'pi pi-fw pi-trash'
|
||||
},
|
||||
{
|
||||
separator: true
|
||||
},
|
||||
{
|
||||
label: 'Export',
|
||||
icon: 'pi pi-fw pi-external-link'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Edit',
|
||||
icon: 'pi pi-fw pi-pencil',
|
||||
items: [
|
||||
{
|
||||
label: 'Left',
|
||||
icon: 'pi pi-fw pi-align-left'
|
||||
},
|
||||
{
|
||||
label: 'Right',
|
||||
icon: 'pi pi-fw pi-align-right'
|
||||
},
|
||||
{
|
||||
label: 'Center',
|
||||
icon: 'pi pi-fw pi-align-center'
|
||||
},
|
||||
{
|
||||
label: 'Justify',
|
||||
icon: 'pi pi-fw pi-align-justify'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Users',
|
||||
icon: 'pi pi-fw pi-user',
|
||||
items: [
|
||||
{
|
||||
label: 'New',
|
||||
icon: 'pi pi-fw pi-user-plus'
|
||||
},
|
||||
{
|
||||
label: 'Delete',
|
||||
icon: 'pi pi-fw pi-user-minus'
|
||||
},
|
||||
{
|
||||
label: 'Search',
|
||||
icon: 'pi pi-fw pi-users',
|
||||
items: [
|
||||
{
|
||||
label: 'Filter',
|
||||
icon: 'pi pi-fw pi-filter',
|
||||
items: [
|
||||
{
|
||||
label: 'Print',
|
||||
icon: 'pi pi-fw pi-print'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
icon: 'pi pi-fw pi-bars',
|
||||
label: 'List'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Events',
|
||||
icon: 'pi pi-fw pi-calendar',
|
||||
items: [
|
||||
{
|
||||
label: 'Edit',
|
||||
icon: 'pi pi-fw pi-pencil',
|
||||
items: [
|
||||
{
|
||||
label: 'Save',
|
||||
icon: 'pi pi-fw pi-calendar-plus'
|
||||
},
|
||||
{
|
||||
label: 'Delete',
|
||||
icon: 'pi pi-fw pi-calendar-minus'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Archive',
|
||||
icon: 'pi pi-fw pi-calendar-times',
|
||||
items: [
|
||||
{
|
||||
label: 'Remove',
|
||||
icon: 'pi pi-fw pi-calendar-minus'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Quit',
|
||||
icon: 'pi pi-fw pi-power-off'
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
<\/script>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card relative z-2">
|
||||
<Menubar
|
||||
:model="items"
|
||||
:pt="{
|
||||
action: ({ props, state, context }) => ({
|
||||
class: context.active ? 'bg-primary-200 border-round-sm' : context.focused ? 'bg-primary-300 border-round-sm' : undefined
|
||||
})
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const items = ref([
|
||||
{
|
||||
label: 'File',
|
||||
icon: 'pi pi-fw pi-file',
|
||||
items: [
|
||||
{
|
||||
label: 'New',
|
||||
icon: 'pi pi-fw pi-plus',
|
||||
items: [
|
||||
{
|
||||
label: 'Bookmark',
|
||||
icon: 'pi pi-fw pi-bookmark'
|
||||
},
|
||||
{
|
||||
label: 'Video',
|
||||
icon: 'pi pi-fw pi-video'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Delete',
|
||||
icon: 'pi pi-fw pi-trash'
|
||||
},
|
||||
{
|
||||
separator: true
|
||||
},
|
||||
{
|
||||
label: 'Export',
|
||||
icon: 'pi pi-fw pi-external-link'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Edit',
|
||||
icon: 'pi pi-fw pi-pencil',
|
||||
items: [
|
||||
{
|
||||
label: 'Left',
|
||||
icon: 'pi pi-fw pi-align-left'
|
||||
},
|
||||
{
|
||||
label: 'Right',
|
||||
icon: 'pi pi-fw pi-align-right'
|
||||
},
|
||||
{
|
||||
label: 'Center',
|
||||
icon: 'pi pi-fw pi-align-center'
|
||||
},
|
||||
{
|
||||
label: 'Justify',
|
||||
icon: 'pi pi-fw pi-align-justify'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Users',
|
||||
icon: 'pi pi-fw pi-user',
|
||||
items: [
|
||||
{
|
||||
label: 'New',
|
||||
icon: 'pi pi-fw pi-user-plus'
|
||||
},
|
||||
{
|
||||
label: 'Delete',
|
||||
icon: 'pi pi-fw pi-user-minus'
|
||||
},
|
||||
{
|
||||
label: 'Search',
|
||||
icon: 'pi pi-fw pi-users',
|
||||
items: [
|
||||
{
|
||||
label: 'Filter',
|
||||
icon: 'pi pi-fw pi-filter',
|
||||
items: [
|
||||
{
|
||||
label: 'Print',
|
||||
icon: 'pi pi-fw pi-print'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
icon: 'pi pi-fw pi-bars',
|
||||
label: 'List'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Events',
|
||||
icon: 'pi pi-fw pi-calendar',
|
||||
items: [
|
||||
{
|
||||
label: 'Edit',
|
||||
icon: 'pi pi-fw pi-pencil',
|
||||
items: [
|
||||
{
|
||||
label: 'Save',
|
||||
icon: 'pi pi-fw pi-calendar-plus'
|
||||
},
|
||||
{
|
||||
label: 'Delete',
|
||||
icon: 'pi pi-fw pi-calendar-minus'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Archive',
|
||||
icon: 'pi pi-fw pi-calendar-times',
|
||||
items: [
|
||||
{
|
||||
label: 'Remove',
|
||||
icon: 'pi pi-fw pi-calendar-minus'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Quit',
|
||||
icon: 'pi pi-fw pi-power-off'
|
||||
}
|
||||
]);
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
|
||||
import PtDoc from './PTDoc.vue';
|
||||
import PTImage from './PTImage.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -28,11 +27,6 @@ export default {
|
|||
label: 'Menubar PT Options',
|
||||
component: DocApiTable,
|
||||
data: getPTOption('Menubar')
|
||||
},
|
||||
{
|
||||
id: 'pt.demo',
|
||||
label: 'Demo',
|
||||
component: PtDoc
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,65 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs"></DocSectionText>
|
||||
<div class="card">
|
||||
<Message
|
||||
:pt="{
|
||||
root: { class: 'bg-yellow-100' }
|
||||
}"
|
||||
>
|
||||
Message Content
|
||||
</Message>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
basic: `
|
||||
<Message
|
||||
:pt="{
|
||||
root: { class: 'bg-yellow-100' }
|
||||
}"
|
||||
>
|
||||
Message Content
|
||||
</Message>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<Message
|
||||
:pt="{
|
||||
root: { class: 'bg-yellow-100' }
|
||||
}"
|
||||
>
|
||||
Message Content
|
||||
</Message>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<\/script>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<Message
|
||||
:pt="{
|
||||
root: { class: 'bg-yellow-100' }
|
||||
}"
|
||||
>
|
||||
Message Content
|
||||
</Message>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
|
||||
import PtDoc from './PTDoc.vue';
|
||||
import PTImage from './PTImage.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -28,11 +27,6 @@ export default {
|
|||
label: 'Message PT Options',
|
||||
component: DocApiTable,
|
||||
data: getPTOption('Message')
|
||||
},
|
||||
{
|
||||
id: 'pt.demo',
|
||||
label: 'Demo',
|
||||
component: PtDoc
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,121 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs"></DocSectionText>
|
||||
<div class="card flex justify-content-center">
|
||||
<MultiSelect
|
||||
v-model="selectedCities"
|
||||
:options="cities"
|
||||
optionLabel="name"
|
||||
placeholder="Select Cities"
|
||||
:maxSelectedLabels="3"
|
||||
:pt="{
|
||||
root: { class: 'w-full md:w-14rem' },
|
||||
item: ({ props, state, context }) => ({
|
||||
class: context.selected ? 'bg-blue-300' : context.focused ? 'bg-blue-100' : undefined
|
||||
})
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
selectedCities: null,
|
||||
cities: [
|
||||
{ name: 'New York', code: 'NY' },
|
||||
{ name: 'Rome', code: 'RM' },
|
||||
{ name: 'London', code: 'LDN' },
|
||||
{ name: 'Istanbul', code: 'IST' },
|
||||
{ name: 'Paris', code: 'PRS' }
|
||||
],
|
||||
code: {
|
||||
basic: `
|
||||
<MultiSelect
|
||||
v-model="selectedCities"
|
||||
:options="cities"
|
||||
optionLabel="name"
|
||||
placeholder="Select Cities"
|
||||
:maxSelectedLabels="3"
|
||||
:pt="{
|
||||
root: { class: 'w-full md:w-14rem' },
|
||||
item: ({ props, state, context }) => ({
|
||||
class: context.selected ? 'bg-blue-300' : context.focused ? 'bg-blue-100' : undefined
|
||||
})
|
||||
}"
|
||||
/>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<MultiSelect
|
||||
v-model="selectedCities"
|
||||
:options="cities"
|
||||
optionLabel="name"
|
||||
placeholder="Select Cities"
|
||||
:maxSelectedLabels="3"
|
||||
:pt="{
|
||||
root: { class: 'w-full md:w-14rem' },
|
||||
item: ({ props, state, context }) => ({
|
||||
class: context.selected ? 'bg-blue-300' : context.focused ? 'bg-blue-100' : undefined
|
||||
})
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
selectedCities: null,
|
||||
cities: [
|
||||
{ name: 'New York', code: 'NY' },
|
||||
{ name: 'Rome', code: 'RM' },
|
||||
{ name: 'London', code: 'LDN' },
|
||||
{ name: 'Istanbul', code: 'IST' },
|
||||
{ name: 'Paris', code: 'PRS' }
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
<\/script>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<MultiSelect
|
||||
v-model="selectedCities"
|
||||
:options="cities"
|
||||
optionLabel="name"
|
||||
placeholder="Select Cities"
|
||||
:maxSelectedLabels="3"
|
||||
:pt="{
|
||||
root: { class: 'w-full md:w-14rem' },
|
||||
item: ({ props, state, context }) => ({
|
||||
class: context.selected ? 'bg-blue-300' : context.focused ? 'bg-blue-100' : undefined
|
||||
})
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const selectedCities = ref();
|
||||
const cities = ref([
|
||||
{ name: 'New York', code: 'NY' },
|
||||
{ name: 'Rome', code: 'RM' },
|
||||
{ name: 'London', code: 'LDN' },
|
||||
{ name: 'Istanbul', code: 'IST' },
|
||||
{ name: 'Paris', code: 'PRS' }
|
||||
]);
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
|
||||
import PtDoc from './PTDoc.vue';
|
||||
import PTImage from './PTImage.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -28,11 +27,6 @@ export default {
|
|||
label: 'MultiSelect PT Options',
|
||||
component: DocApiTable,
|
||||
data: getPTOption('MultiSelect')
|
||||
},
|
||||
{
|
||||
id: 'pt.demo',
|
||||
label: 'Demo',
|
||||
component: PtDoc
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,177 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs"></DocSectionText>
|
||||
<div class="card xl:flex xl:justify-content-center">
|
||||
<OrderList
|
||||
v-model="products"
|
||||
dataKey="id"
|
||||
:pt="{
|
||||
list: { style: { height: 'auto' } },
|
||||
moveUpButton: {
|
||||
root: { class: 'bg-teal-400 border-teal-400' }
|
||||
}
|
||||
}"
|
||||
>
|
||||
<template #header> List of Products </template>
|
||||
<template #item="slotProps">
|
||||
<div class="flex flex-wrap p-2 align-items-center gap-3">
|
||||
<img class="w-4rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
|
||||
<div class="flex-1 flex flex-column gap-2">
|
||||
<span class="font-bold">{{ slotProps.item.name }}</span>
|
||||
<div class="flex align-items-center gap-2">
|
||||
<i class="pi pi-tag text-sm"></i>
|
||||
<span>{{ slotProps.item.category }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="font-bold text-900">${{ slotProps.item.price }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</OrderList>
|
||||
</div>
|
||||
<DocSectionCode :code="code" v-bind="$attrs" :service="['ProductService']" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ProductService } from '@/service/ProductService';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
products: null,
|
||||
code: {
|
||||
basic: `
|
||||
<OrderList
|
||||
v-model="products"
|
||||
dataKey="id"
|
||||
:pt="{
|
||||
list: { style: { height: 'auto' } },
|
||||
moveUpButton: {
|
||||
root: { class: 'bg-teal-400 border-teal-400' }
|
||||
}
|
||||
}"
|
||||
>
|
||||
<template #header> List of Products </template>
|
||||
<template #item="slotProps">
|
||||
<div class="flex flex-wrap p-2 align-items-center gap-3">
|
||||
<img class="w-4rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
|
||||
<div class="flex-1 flex flex-column gap-2">
|
||||
<span class="font-bold">{{ slotProps.item.name }}</span>
|
||||
<div class="flex align-items-center gap-2">
|
||||
<i class="pi pi-tag text-sm"></i>
|
||||
<span>{{ slotProps.item.category }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="font-bold text-900">$ {{ slotProps.item.price }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</OrderList>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card xl:flex xl:justify-content-center">
|
||||
<OrderList
|
||||
v-model="products"
|
||||
dataKey="id"
|
||||
:pt="{
|
||||
list: { style: { height: 'auto' } },
|
||||
moveUpButton: {
|
||||
root: { class: 'bg-teal-400 border-teal-400' }
|
||||
}
|
||||
}"
|
||||
>
|
||||
<template #header> List of Products </template>
|
||||
<template #item="slotProps">
|
||||
<div class="flex flex-wrap p-2 align-items-center gap-3">
|
||||
<img class="w-4rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
|
||||
<div class="flex-1 flex flex-column gap-2">
|
||||
<span class="font-bold">{{ slotProps.item.name }}</span>
|
||||
<div class="flex align-items-center gap-2">
|
||||
<i class="pi pi-tag text-sm"></i>
|
||||
<span>{{ slotProps.item.category }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="font-bold text-900">$ {{ slotProps.item.price }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</OrderList>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ProductService } from '@/service/ProductService'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
products: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
ProductService.getProductsSmall().then((data) => (this.products = data));
|
||||
}
|
||||
};
|
||||
<\/script>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card xl:flex xl:justify-content-center">
|
||||
<OrderList
|
||||
v-model="products"
|
||||
dataKey="id"
|
||||
:pt="{
|
||||
list: { style: { height: 'auto' } },
|
||||
moveUpButton: {
|
||||
root: { class: 'bg-teal-400 border-teal-400' }
|
||||
}
|
||||
}"
|
||||
>
|
||||
<template #header> List of Products </template>
|
||||
<template #item="slotProps">
|
||||
<div class="flex flex-wrap p-2 align-items-center gap-3">
|
||||
<img class="w-4rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
|
||||
<div class="flex-1 flex flex-column gap-2">
|
||||
<span class="font-bold">{{ slotProps.item.name }}</span>
|
||||
<div class="flex align-items-center gap-2">
|
||||
<i class="pi pi-tag text-sm"></i>
|
||||
<span>{{ slotProps.item.category }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="font-bold text-900">$ {{ slotProps.item.price }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</OrderList>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { ProductService } from '@/service/ProductService'
|
||||
|
||||
const products = ref(null);
|
||||
|
||||
onMounted(() => {
|
||||
ProductService.getProductsSmall().then((data) => (this.products = data));
|
||||
});
|
||||
<\/script>
|
||||
`,
|
||||
data: `
|
||||
/* ProductService */
|
||||
{
|
||||
id: '1000',
|
||||
code: 'f230fh0g3',
|
||||
name: 'Bamboo Watch',
|
||||
description: 'Product Description',
|
||||
image: 'bamboo-watch.jpg',
|
||||
price: 65,
|
||||
category: 'Accessories',
|
||||
quantity: 24,
|
||||
inventoryStatus: 'INSTOCK',
|
||||
rating: 5
|
||||
},
|
||||
...`
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
ProductService.getProductsSmall().then((data) => (this.products = data));
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
|
||||
import PtDoc from './PTDoc.vue';
|
||||
import PTImage from './PTImage.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -28,11 +27,6 @@ export default {
|
|||
label: 'OrderList PT Options',
|
||||
component: DocApiTable,
|
||||
data: getPTOption('OrderList')
|
||||
},
|
||||
{
|
||||
id: 'pt.demo',
|
||||
label: 'Demo',
|
||||
component: PtDoc
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,178 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs"></DocSectionText>
|
||||
<div class="card overflow-x-auto">
|
||||
<OrganizationChart
|
||||
:value="data"
|
||||
collapsible
|
||||
:pt="{
|
||||
node: ({ context }) => ({
|
||||
class: context.toggleable ? 'border-orange-400 border-round-sm' : 'border-teal-400 border-round-sm'
|
||||
})
|
||||
}"
|
||||
>
|
||||
<template #default="slotProps">
|
||||
<span>{{ slotProps.node.label }}</span>
|
||||
</template>
|
||||
</OrganizationChart>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
data: {
|
||||
label: 'Argentina',
|
||||
children: [
|
||||
{
|
||||
label: 'Argentina',
|
||||
children: [
|
||||
{
|
||||
label: 'Argentina'
|
||||
},
|
||||
{
|
||||
label: 'Croatia'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'France',
|
||||
children: [
|
||||
{
|
||||
label: 'France'
|
||||
},
|
||||
{
|
||||
label: 'Morocco'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
code: {
|
||||
basic: `
|
||||
<OrganizationChart
|
||||
:value="data"
|
||||
collapsible
|
||||
:pt="{
|
||||
node: ({ context }) => ({
|
||||
class: context.toggleable ? 'border-orange-400 border-round-sm' : 'border-teal-400 border-round-sm'
|
||||
})
|
||||
}"
|
||||
>
|
||||
<template #default="slotProps">
|
||||
<span>{{ slotProps.node.label }}</span>
|
||||
</template>
|
||||
</OrganizationChart>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card overflow-x-auto">
|
||||
<OrganizationChart
|
||||
:value="data"
|
||||
collapsible
|
||||
:pt="{
|
||||
node: ({ context }) => ({
|
||||
class: context.toggleable ? 'border-orange-400 border-round-sm' : 'border-teal-400 border-round-sm'
|
||||
})
|
||||
}"
|
||||
>
|
||||
<template #default="slotProps">
|
||||
<span>{{ slotProps.node.label }}</span>
|
||||
</template>
|
||||
</OrganizationChart>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
data: {
|
||||
label: 'Argentina',
|
||||
children: [
|
||||
{
|
||||
label: 'Argentina',
|
||||
children: [
|
||||
{
|
||||
label: 'Argentina'
|
||||
},
|
||||
{
|
||||
label: 'Croatia'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'France',
|
||||
children: [
|
||||
{
|
||||
label: 'France'
|
||||
},
|
||||
{
|
||||
label: 'Morocco'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
<\/script>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card overflow-x-auto">
|
||||
<OrganizationChart
|
||||
:value="data"
|
||||
collapsible
|
||||
:pt="{
|
||||
node: ({ context }) => ({
|
||||
class: context.toggleable ? 'border-orange-400 border-round-sm' : 'border-teal-400 border-round-sm'
|
||||
})
|
||||
}"
|
||||
>
|
||||
<template #default="slotProps">
|
||||
<span>{{ slotProps.node.label }}</span>
|
||||
</template>
|
||||
</OrganizationChart>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const data = ref({
|
||||
label: 'Argentina',
|
||||
children: [
|
||||
{
|
||||
label: 'Argentina',
|
||||
children: [
|
||||
{
|
||||
label: 'Argentina'
|
||||
},
|
||||
{
|
||||
label: 'Croatia'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'France',
|
||||
children: [
|
||||
{
|
||||
label: 'France'
|
||||
},
|
||||
{
|
||||
label: 'Morocco'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
|
||||
import PtDoc from './PTDoc.vue';
|
||||
import PTImage from './PTImage.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -28,11 +27,6 @@ export default {
|
|||
label: 'OrganizationChart PT Options',
|
||||
component: DocApiTable,
|
||||
data: getPTOption('OrganizationChart')
|
||||
},
|
||||
{
|
||||
id: 'pt.demo',
|
||||
label: 'Demo',
|
||||
component: PtDoc
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,87 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs"> </DocSectionText>
|
||||
<div class="card flex justify-content-center">
|
||||
<Button type="button" icon="pi pi-image" label="Image" @click="toggle" />
|
||||
|
||||
<OverlayPanel ref="op" :pt="{ root: { class: 'surface-ground' } }">
|
||||
<img src="https://primefaces.org/cdn/primevue/images/product/bamboo-watch.jpg" alt="Bamboo Watch" />
|
||||
</OverlayPanel>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
basic: `
|
||||
<Button type="button" icon="pi pi-image" label="Image" @click="toggle" />
|
||||
|
||||
<OverlayPanel ref="op"
|
||||
:pt="{
|
||||
root: { class: 'surface-ground' }
|
||||
}"
|
||||
>
|
||||
<img src="https://primefaces.org/cdn/primevue/images/product/bamboo-watch.jpg" alt="Bamboo Watch" />
|
||||
</OverlayPanel>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<Button type="button" icon="pi pi-image" label="Image" @click="toggle" />
|
||||
|
||||
<OverlayPanel ref="op"
|
||||
:pt="{
|
||||
root: { class: 'surface-ground' }
|
||||
}"
|
||||
>
|
||||
<img src="https://primefaces.org/cdn/primevue/images/product/bamboo-watch.jpg" alt="Bamboo Watch" />
|
||||
</OverlayPanel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
toggle(event) {
|
||||
this.$refs.op.toggle(event);
|
||||
}
|
||||
}
|
||||
};
|
||||
<\/script>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<Button type="button" icon="pi pi-image" label="Image" @click="toggle" />
|
||||
|
||||
<OverlayPanel ref="op"
|
||||
:pt="{
|
||||
root: { class: 'surface-ground' }
|
||||
}"
|
||||
>
|
||||
<img src="https://primefaces.org/cdn/primevue/images/product/bamboo-watch.jpg" alt="Bamboo Watch" />
|
||||
</OverlayPanel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const op = ref();
|
||||
const toggle = (event) => {
|
||||
op.value.toggle(event);
|
||||
}
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
toggle(event) {
|
||||
this.$refs.op.toggle(event);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
|
||||
import PtDoc from './PTDoc.vue';
|
||||
import PTImage from './PTImage.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -28,11 +27,6 @@ export default {
|
|||
label: 'OverlayPanel PT Options',
|
||||
component: DocApiTable,
|
||||
data: getPTOption('OverlayPanel')
|
||||
},
|
||||
{
|
||||
id: 'pt.demo',
|
||||
label: 'Demo',
|
||||
component: PtDoc
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,73 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs"></DocSectionText>
|
||||
<div class="card">
|
||||
<Paginator
|
||||
:rows="10"
|
||||
:totalRecords="120"
|
||||
:pt="{
|
||||
pageButton: ({ props, state, context }) => ({
|
||||
class: context.active ? 'bg-primary' : undefined
|
||||
})
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
basic: `
|
||||
<Paginator
|
||||
:rows="10"
|
||||
:totalRecords="120"
|
||||
:pt="{
|
||||
pageButton: ({ props, state, context }) => ({
|
||||
class: context.active ? 'bg-primary' : undefined
|
||||
})
|
||||
}"
|
||||
/>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<Paginator
|
||||
:rows="10"
|
||||
:totalRecords="120"
|
||||
:pt="{
|
||||
pageButton: ({ props, state, context }) => ({
|
||||
class: context.active ? 'bg-primary' : undefined
|
||||
})
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<\/script>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<Paginator
|
||||
:rows="10"
|
||||
:totalRecords="120"
|
||||
:pt="{
|
||||
pageButton: ({ props, state, context }) => ({
|
||||
class: context.active ? 'bg-primary' : undefined
|
||||
})
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
|
||||
import PtDoc from './PTDoc.vue';
|
||||
import PTImage from './PTImage.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -28,11 +27,6 @@ export default {
|
|||
label: 'Paginator PT Options',
|
||||
component: DocApiTable,
|
||||
data: getPTOption('Paginator')
|
||||
},
|
||||
{
|
||||
id: 'pt.demo',
|
||||
label: 'Demo',
|
||||
component: PtDoc
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,76 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" :level="2" />
|
||||
<div class="card">
|
||||
<Panel header="Header" :pt="{ header: { class: 'bg-primary' }, title: { class: 'text-white' }, toggler: { class: 'text-white hover:bg-primary-reverse' } }" toggleable>
|
||||
<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>
|
||||
</Panel>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
basic: `
|
||||
<Panel header="Header" toggleable
|
||||
:pt="{
|
||||
header: { class: 'bg-primary' },
|
||||
title: { class: 'text-white' },
|
||||
toggler: { class: 'text-white hover:bg-primary-reverse' }
|
||||
}">
|
||||
<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>
|
||||
</Panel>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<Panel header="Header" toggleable
|
||||
:pt="{
|
||||
header: { class: 'bg-primary' },
|
||||
title: { class: 'text-white' },
|
||||
toggler: { class: 'text-white hover:bg-primary-reverse' }
|
||||
}">
|
||||
<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>
|
||||
</Panel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<\/script>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<Panel header="Header" toggleable
|
||||
:pt="{
|
||||
header: { class: 'bg-primary' },
|
||||
title: { class: 'text-white' },
|
||||
toggler: { class: 'text-white hover:bg-primary-reverse' }
|
||||
}">
|
||||
<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>
|
||||
</Panel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
|
||||
import PtDoc from './PTDoc.vue';
|
||||
import PTImage from './PTImage.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -28,11 +27,6 @@ export default {
|
|||
label: 'Panel PT Options',
|
||||
component: DocApiTable,
|
||||
data: getPTOption('Panel')
|
||||
},
|
||||
{
|
||||
id: 'pt.demo',
|
||||
label: 'Demo',
|
||||
component: PtDoc
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,417 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs"> </DocSectionText>
|
||||
<div class="card flex justify-content-center">
|
||||
<PanelMenu
|
||||
:model="items"
|
||||
:pt="{
|
||||
root: { class: 'w-full md:w-25rem' }
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
items: [
|
||||
{
|
||||
label: 'File',
|
||||
icon: 'pi pi-fw pi-file',
|
||||
items: [
|
||||
{
|
||||
label: 'New',
|
||||
icon: 'pi pi-fw pi-plus',
|
||||
items: [
|
||||
{
|
||||
label: 'Bookmark',
|
||||
icon: 'pi pi-fw pi-bookmark'
|
||||
},
|
||||
{
|
||||
label: 'Video',
|
||||
icon: 'pi pi-fw pi-video'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Delete',
|
||||
icon: 'pi pi-fw pi-trash'
|
||||
},
|
||||
{
|
||||
label: 'Export',
|
||||
icon: 'pi pi-fw pi-external-link'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Edit',
|
||||
icon: 'pi pi-fw pi-pencil',
|
||||
items: [
|
||||
{
|
||||
label: 'Left',
|
||||
icon: 'pi pi-fw pi-align-left'
|
||||
},
|
||||
{
|
||||
label: 'Right',
|
||||
icon: 'pi pi-fw pi-align-right'
|
||||
},
|
||||
{
|
||||
label: 'Center',
|
||||
icon: 'pi pi-fw pi-align-center'
|
||||
},
|
||||
{
|
||||
label: 'Justify',
|
||||
icon: 'pi pi-fw pi-align-justify'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Users',
|
||||
icon: 'pi pi-fw pi-user',
|
||||
items: [
|
||||
{
|
||||
label: 'New',
|
||||
icon: 'pi pi-fw pi-user-plus'
|
||||
},
|
||||
{
|
||||
label: 'Delete',
|
||||
icon: 'pi pi-fw pi-user-minus'
|
||||
},
|
||||
{
|
||||
label: 'Search',
|
||||
icon: 'pi pi-fw pi-users',
|
||||
items: [
|
||||
{
|
||||
label: 'Filter',
|
||||
icon: 'pi pi-fw pi-filter',
|
||||
items: [
|
||||
{
|
||||
label: 'Print',
|
||||
icon: 'pi pi-fw pi-print'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
icon: 'pi pi-fw pi-bars',
|
||||
label: 'List'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Events',
|
||||
icon: 'pi pi-fw pi-calendar',
|
||||
items: [
|
||||
{
|
||||
label: 'Edit',
|
||||
icon: 'pi pi-fw pi-pencil',
|
||||
items: [
|
||||
{
|
||||
label: 'Save',
|
||||
icon: 'pi pi-fw pi-calendar-plus'
|
||||
},
|
||||
{
|
||||
label: 'Delete',
|
||||
icon: 'pi pi-fw pi-calendar-minus'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Archive',
|
||||
icon: 'pi pi-fw pi-calendar-times',
|
||||
items: [
|
||||
{
|
||||
label: 'Remove',
|
||||
icon: 'pi pi-fw pi-calendar-minus'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
code: {
|
||||
basic: `
|
||||
<PanelMenu
|
||||
:model="items"
|
||||
:pt="{
|
||||
root: { class: 'w-full md:w-25rem' }
|
||||
}"
|
||||
/>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<PanelMenu
|
||||
:model="items"
|
||||
:pt="{
|
||||
root: { class: 'w-full md:w-25rem' }
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
items: [
|
||||
{
|
||||
label: 'File',
|
||||
icon: 'pi pi-fw pi-file',
|
||||
items: [
|
||||
{
|
||||
label: 'New',
|
||||
icon: 'pi pi-fw pi-plus',
|
||||
items: [
|
||||
{
|
||||
label: 'Bookmark',
|
||||
icon: 'pi pi-fw pi-bookmark'
|
||||
},
|
||||
{
|
||||
label: 'Video',
|
||||
icon: 'pi pi-fw pi-video'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Delete',
|
||||
icon: 'pi pi-fw pi-trash'
|
||||
},
|
||||
{
|
||||
label: 'Export',
|
||||
icon: 'pi pi-fw pi-external-link'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Edit',
|
||||
icon: 'pi pi-fw pi-pencil',
|
||||
items: [
|
||||
{
|
||||
label: 'Left',
|
||||
icon: 'pi pi-fw pi-align-left'
|
||||
},
|
||||
{
|
||||
label: 'Right',
|
||||
icon: 'pi pi-fw pi-align-right'
|
||||
},
|
||||
{
|
||||
label: 'Center',
|
||||
icon: 'pi pi-fw pi-align-center'
|
||||
},
|
||||
{
|
||||
label: 'Justify',
|
||||
icon: 'pi pi-fw pi-align-justify'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Users',
|
||||
icon: 'pi pi-fw pi-user',
|
||||
items: [
|
||||
{
|
||||
label: 'New',
|
||||
icon: 'pi pi-fw pi-user-plus'
|
||||
},
|
||||
{
|
||||
label: 'Delete',
|
||||
icon: 'pi pi-fw pi-user-minus'
|
||||
},
|
||||
{
|
||||
label: 'Search',
|
||||
icon: 'pi pi-fw pi-users',
|
||||
items: [
|
||||
{
|
||||
label: 'Filter',
|
||||
icon: 'pi pi-fw pi-filter',
|
||||
items: [
|
||||
{
|
||||
label: 'Print',
|
||||
icon: 'pi pi-fw pi-print'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
icon: 'pi pi-fw pi-bars',
|
||||
label: 'List'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Events',
|
||||
icon: 'pi pi-fw pi-calendar',
|
||||
items: [
|
||||
{
|
||||
label: 'Edit',
|
||||
icon: 'pi pi-fw pi-pencil',
|
||||
items: [
|
||||
{
|
||||
label: 'Save',
|
||||
icon: 'pi pi-fw pi-calendar-plus'
|
||||
},
|
||||
{
|
||||
label: 'Delete',
|
||||
icon: 'pi pi-fw pi-calendar-minus'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Archive',
|
||||
icon: 'pi pi-fw pi-calendar-times',
|
||||
items: [
|
||||
{
|
||||
label: 'Remove',
|
||||
icon: 'pi pi-fw pi-calendar-minus'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
<\/script>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<PanelMenu
|
||||
:model="items"
|
||||
:pt="{
|
||||
root: { class: 'w-full md:w-25rem' }
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const items = ref([
|
||||
{
|
||||
label: 'File',
|
||||
icon: 'pi pi-fw pi-file',
|
||||
items: [
|
||||
{
|
||||
label: 'New',
|
||||
icon: 'pi pi-fw pi-plus',
|
||||
items: [
|
||||
{
|
||||
label: 'Bookmark',
|
||||
icon: 'pi pi-fw pi-bookmark'
|
||||
},
|
||||
{
|
||||
label: 'Video',
|
||||
icon: 'pi pi-fw pi-video'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Delete',
|
||||
icon: 'pi pi-fw pi-trash'
|
||||
},
|
||||
{
|
||||
label: 'Export',
|
||||
icon: 'pi pi-fw pi-external-link'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Edit',
|
||||
icon: 'pi pi-fw pi-pencil',
|
||||
items: [
|
||||
{
|
||||
label: 'Left',
|
||||
icon: 'pi pi-fw pi-align-left'
|
||||
},
|
||||
{
|
||||
label: 'Right',
|
||||
icon: 'pi pi-fw pi-align-right'
|
||||
},
|
||||
{
|
||||
label: 'Center',
|
||||
icon: 'pi pi-fw pi-align-center'
|
||||
},
|
||||
{
|
||||
label: 'Justify',
|
||||
icon: 'pi pi-fw pi-align-justify'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Users',
|
||||
icon: 'pi pi-fw pi-user',
|
||||
items: [
|
||||
{
|
||||
label: 'New',
|
||||
icon: 'pi pi-fw pi-user-plus'
|
||||
},
|
||||
{
|
||||
label: 'Delete',
|
||||
icon: 'pi pi-fw pi-user-minus'
|
||||
},
|
||||
{
|
||||
label: 'Search',
|
||||
icon: 'pi pi-fw pi-users',
|
||||
items: [
|
||||
{
|
||||
label: 'Filter',
|
||||
icon: 'pi pi-fw pi-filter',
|
||||
items: [
|
||||
{
|
||||
label: 'Print',
|
||||
icon: 'pi pi-fw pi-print'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
icon: 'pi pi-fw pi-bars',
|
||||
label: 'List'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Events',
|
||||
icon: 'pi pi-fw pi-calendar',
|
||||
items: [
|
||||
{
|
||||
label: 'Edit',
|
||||
icon: 'pi pi-fw pi-pencil',
|
||||
items: [
|
||||
{
|
||||
label: 'Save',
|
||||
icon: 'pi pi-fw pi-calendar-plus'
|
||||
},
|
||||
{
|
||||
label: 'Delete',
|
||||
icon: 'pi pi-fw pi-calendar-minus'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Archive',
|
||||
icon: 'pi pi-fw pi-calendar-times',
|
||||
items: [
|
||||
{
|
||||
label: 'Remove',
|
||||
icon: 'pi pi-fw pi-calendar-minus'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]);
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
|
||||
import PtDoc from './PTDoc.vue';
|
||||
import PTImage from './PTImage.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -28,11 +27,6 @@ export default {
|
|||
label: 'PanelMenu PT Options',
|
||||
component: DocApiTable,
|
||||
data: getPTOption('PanelMenu')
|
||||
},
|
||||
{
|
||||
id: 'pt.demo',
|
||||
label: 'Demo',
|
||||
component: PtDoc
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue