Merge branch 'prod'
tugcekucukoglu
commit
3005c27bcd
|
|
@ -489,7 +489,8 @@
|
|||
{
|
||||
"name": "Tailwind",
|
||||
"icon": "pi pi-heart",
|
||||
"to": "/tailwind"
|
||||
"href": "https://tailwind.primevue.org/",
|
||||
"badge": "NEW"
|
||||
},
|
||||
{
|
||||
"name": "Figma UI Kit",
|
||||
|
|
|
|||
|
|
@ -1,99 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox scrollable />
|
||||
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
|
||||
Tailwind CSS.
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export const TRANSITIONS = {
|
||||
toggleable: {
|
||||
enterFromClass: 'max-h-0',
|
||||
enterActiveClass: 'overflow-hidden transition-all duration-500 ease-in-out',
|
||||
enterToClass: 'max-h-40 ',
|
||||
leaveFromClass: 'max-h-40',
|
||||
leaveActiveClass: 'overflow-hidden transition-all duration-500 ease-in',
|
||||
leaveToClass: 'max-h-0'
|
||||
}
|
||||
};
|
||||
|
||||
export default {
|
||||
accordion: {
|
||||
root: 'mb-1',
|
||||
accordiontab: {
|
||||
root: 'mb-1',
|
||||
header: ({ props }) => ({
|
||||
class: [
|
||||
{ 'select-none pointer-events-none cursor-default opacity-60': props?.disabled } // Condition
|
||||
]
|
||||
}),
|
||||
headerAction: ({ context }) => ({
|
||||
class: [
|
||||
'flex items-center cursor-pointer relative no-underline select-none', // Alignments
|
||||
'p-5 transition duration-200 ease-in-out rounded-t-md font-bold transition-shadow duration-200', // Padding and transition
|
||||
'border border-gray-300 bg-gray-100 text-gray-600', // Borders and colors
|
||||
'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80 dark:hover:bg-gray-800/80 dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]', // Dark mode
|
||||
'hover:border-gray-300 hover:bg-gray-200 hover:text-gray-800', // Hover
|
||||
'focus:outline-none focus:outline-offset-0 focus:shadow-[inset_0_0_0_0.2rem_rgba(191,219,254,1)]', // Focus
|
||||
{ 'rounded-br-md rounded-bl-md': !context.active, 'rounded-br-0 rounded-bl-0 text-gray-800': context.active } // Condition
|
||||
]
|
||||
}),
|
||||
headerIcon: 'inline-block mr-2',
|
||||
headerTitle: 'leading-none',
|
||||
content: {
|
||||
class: [
|
||||
'p-5 border border-gray-300 bg-white text-gray-700 border-t-0 rounded-tl-none rounded-tr-none rounded-br-lg rounded-bl-lg',
|
||||
'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80' // Dark mode
|
||||
]
|
||||
},
|
||||
transition: TRANSITIONS.toggleable
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<Accordion :activeIndex="0">
|
||||
<AccordionTab header="Header I">
|
||||
<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>
|
||||
</AccordionTab>
|
||||
<AccordionTab header="Header II">
|
||||
<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>
|
||||
</AccordionTab>
|
||||
<AccordionTab header="Header III">
|
||||
<p>
|
||||
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
|
||||
officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
|
||||
</p>
|
||||
</AccordionTab>
|
||||
</Accordion>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,117 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
|
||||
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
|
||||
Tailwind CSS.
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export const TRANSITIONS = {
|
||||
overlay: {
|
||||
enterFromClass: 'opacity-0 scale-75',
|
||||
enterActiveClass: 'transition-transform transition-opacity duration-150 ease-in',
|
||||
leaveActiveClass: 'transition-opacity duration-150 ease-linear',
|
||||
leaveToClass: 'opacity-0'
|
||||
}
|
||||
};
|
||||
|
||||
export default {
|
||||
autocomplete: {
|
||||
root: ({ props }) => ({
|
||||
class: [
|
||||
'relative inline-flex',
|
||||
{
|
||||
'opacity-60 select-none pointer-events-none cursor-default': props.disabled
|
||||
},
|
||||
{ 'w-full': props.multiple }
|
||||
]
|
||||
}),
|
||||
container: {
|
||||
class: [
|
||||
'm-0 list-none cursor-text overflow-hidden flex items-center flex-wrap w-full',
|
||||
'px-3 py-2 gap-2',
|
||||
'font-sans text-base text-gray-700 dark:text-white/80 bg-white dark:bg-gray-900 border border-gray-300 dark:border-blue-900/40 transition duration-200 ease-in-out appearance-none rounded-md',
|
||||
'focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] hover:border-blue-500 focus:outline-none dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]'
|
||||
]
|
||||
},
|
||||
inputtoken: {
|
||||
class: ['py-0.375rem px-0', 'flex-1 inline-flex']
|
||||
},
|
||||
input: ({ props }) => ({
|
||||
class: [
|
||||
'm-0',
|
||||
' transition-colors duration-200 appearance-none rounded-lg',
|
||||
{ 'rounded-tr-none rounded-br-none': props.dropdown },
|
||||
{
|
||||
'font-sans text-base text-gray-700 dark:text-white/80 bg-white dark:bg-gray-900 p-3 border border-gray-300 dark:border-blue-900/40 focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)] hover:border-blue-500 focus:outline-none':
|
||||
!props.multiple,
|
||||
'font-sans text-base text-gray-700 dark:text-white/80 border-0 outline-none bg-transparent m-0 p-0 shadow-none rounded-none w-full': props.multiple
|
||||
}
|
||||
]
|
||||
}),
|
||||
token: {
|
||||
class: ['py-1 px-2 mr-2 bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-white/80 rounded-full', 'cursor-default inline-flex items-center']
|
||||
},
|
||||
dropdownbutton: {
|
||||
root: 'rounded-tl-none rounded-bl-none'
|
||||
},
|
||||
panel: {
|
||||
class: ['bg-white text-gray-700 border-0 rounded-md shadow-lg', 'max-h-[200px] overflow-auto', 'dark:bg-gray-900 dark:text-white/80']
|
||||
},
|
||||
list: 'py-3 list-none m-0',
|
||||
item: ({ context }) => ({
|
||||
class: [
|
||||
'cursor-pointer font-normal overflow-hidden relative whitespace-nowrap',
|
||||
'm-0 p-3 border-0 transition-shadow duration-200 rounded-none',
|
||||
'dark:text-white/80 dark:hover:bg-gray-800',
|
||||
'hover:text-gray-700 hover:bg-gray-200',
|
||||
{
|
||||
'text-gray-700': !context.focused && !context.selected,
|
||||
'bg-gray-300 text-gray-700 dark:text-white/80 dark:bg-gray-800/90': context.focused && !context.selected,
|
||||
'bg-blue-500 text-blue-700 dark:bg-blue-400 dark:text-white/80': context.focused && context.selected,
|
||||
'bg-blue-50 text-blue-700 dark:bg-blue-300 dark:text-white/80': !context.focused && context.selected
|
||||
}
|
||||
]
|
||||
}),
|
||||
itemgroup: {
|
||||
class: ['m-0 p-3 text-gray-800 bg-white font-bold', 'dark:bg-gray-900 dark:text-white/80', 'cursor-auto']
|
||||
},
|
||||
transition: TRANSITIONS.overlay
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<AutoComplete v-model="value" :suggestions="items" @complete="search" />
|
||||
</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>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,92 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
|
||||
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
|
||||
Tailwind CSS.
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export default {
|
||||
avatar: {
|
||||
root: ({ props, parent }) => ({
|
||||
class: [
|
||||
'flex items-center justify-center',
|
||||
'bg-gray-300 dark:bg-gray-800',
|
||||
{
|
||||
'rounded-lg': props.shape == 'square',
|
||||
'rounded-full': props.shape == 'circle'
|
||||
},
|
||||
{
|
||||
'text-base h-8 w-8': props.size == null || props.size == 'normal',
|
||||
'w-12 h-12 text-xl': props.size == 'large',
|
||||
'w-16 h-16 text-2xl': props.size == 'xlarge'
|
||||
},
|
||||
{
|
||||
'-ml-4 border-2 border-white dark:border-gray-900': parent.instance.$css !== undefined
|
||||
}
|
||||
]
|
||||
}),
|
||||
image: 'h-full w-full'
|
||||
},
|
||||
avatargroup: {
|
||||
root: 'flex items-center'
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<div class="flex flex-wrap gap-5">
|
||||
<div>
|
||||
<h5 class="mb-2">Image</h5>
|
||||
<div class="flex">
|
||||
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" class="mr-2" size="xlarge" shape="circle" />
|
||||
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" class="mr-2" size="large" shape="circle" />
|
||||
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h5 class="mb-2">Badge</h5>
|
||||
<Avatar v-badge.danger="4" class="relative" image="https://primefaces.org/cdn/primevue/images/organization/walter.jpg" size="xlarge" />
|
||||
</div>
|
||||
|
||||
<div class="mb-2">
|
||||
<h5>Gravatar</h5>
|
||||
<Avatar image="https://www.gravatar.com/avatar/05dfd4b41340d09cae045235eb0893c3?d=mp" class="flex align-items-center justify-content-center mr-2" size="xlarge" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card flex justify-content-center">
|
||||
<AvatarGroup>
|
||||
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" size="large" shape="circle" />
|
||||
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" size="large" shape="circle" />
|
||||
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" size="large" shape="circle" />
|
||||
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" size="large" shape="circle" />
|
||||
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/xuxuefeng.png" size="large" shape="circle" />
|
||||
<Avatar label="+2" shape="circle" size="large" style="background-color: '#9c27b0', color: '#ffffff'" />
|
||||
</AvatarGroup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,93 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
|
||||
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
|
||||
Tailwind CSS.
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export default {
|
||||
directives: {
|
||||
badge: {
|
||||
root: ({ context }) => ({
|
||||
class: [
|
||||
'absolute top-0 right-0 transform translate-x-1/2 -translate-y-1/2 origin-top-right m-0',
|
||||
'text-xs leading-6 flex items-center justify-center',
|
||||
'text-center text-white font-bold',
|
||||
{
|
||||
'rounded-full p-0': context.nogutter || context.dot,
|
||||
'rounded-[10px] px-2': !context.nogutter && !context.dot,
|
||||
'min-w-[0.5rem] w-2 h-2': context.dot,
|
||||
'min-w-[1.5rem] h-6': !context.dot
|
||||
},
|
||||
{
|
||||
'bg-blue-500 ': context.info || (!context.info && !context.success && !context.warning && !context.danger),
|
||||
'bg-green-500 ': context.success,
|
||||
'bg-orange-500 ': context.warning,
|
||||
'bg-red-500 ': context.danger
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
},
|
||||
badge: {
|
||||
root: ({ props }) => ({
|
||||
class: [
|
||||
'rounded-full p-0 text-center inline-block',
|
||||
'bg-blue-500 text-white font-bold',
|
||||
{
|
||||
'bg-gray-500 ': props.severity == 'secondary',
|
||||
'bg-green-500 ': props.severity == 'success',
|
||||
'bg-blue-500 ': props.severity == 'info',
|
||||
'bg-orange-500 ': props.severity == 'warning',
|
||||
'bg-purple-500 ': props.severity == 'help',
|
||||
'bg-red-500 ': props.severity == 'danger'
|
||||
},
|
||||
{
|
||||
'text-xs min-w-[1.5rem] h-[1.5rem] leading-[1.5rem]': props.size == null,
|
||||
'text-lg min-w-[2.25rem] h-[2.25rem] leading-[2.25rem]': props.size == 'large',
|
||||
'text-2xl min-w-[3rem] h-[3rem] leading-[3rem]': props.size == 'xlarge'
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex flex-wrap justify-center gap-2">
|
||||
<Badge value="2"></Badge>
|
||||
<Badge value="8" severity="success"></Badge>
|
||||
<Badge value="4" severity="info"></Badge>
|
||||
<Badge value="12" severity="warning"></Badge>
|
||||
<Badge value="3" severity="danger"></Badge>
|
||||
</div>
|
||||
|
||||
<div class="card flex flex-wrap justify-center gap-4 mt-4">
|
||||
<i v-badge="2" class="pi pi-bell relative text-gray-700 dark:text-white/80" style="font-size: 2rem" />
|
||||
<i v-badge.danger="'5+'" class="pi pi-calendar relative text-gray-700 dark:text-white/80" style="font-size: 2rem" />
|
||||
<i v-badge.danger class="pi pi-envelope relative text-gray-700 dark:text-white/80" style="font-size: 2rem" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,56 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
|
||||
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
|
||||
Tailwind CSS.
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export default {
|
||||
blockui: {
|
||||
root: 'relative',
|
||||
mask: 'bg-black/40'
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<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">
|
||||
<Panel header="Basic">
|
||||
<p class="text-gray-700 dark:text-white/80 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>
|
||||
</BlockUI>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const blocked = ref(false);
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,68 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
|
||||
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
|
||||
Tailwind CSS.
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export default {
|
||||
breadcrumb: {
|
||||
root: {
|
||||
class: ['overflow-x-auto', 'bg-white dark:bg-gray-900 border border-gray-300 dark:border-blue-900/40 rounded-md p-4']
|
||||
},
|
||||
menu: 'm-0 p-0 list-none flex items-center flex-nowrap',
|
||||
action: {
|
||||
class: [
|
||||
'text-decoration-none flex items-center',
|
||||
'transition-shadow duration-200 rounded-md text-gray-600 dark:text-white/70',
|
||||
'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]'
|
||||
]
|
||||
},
|
||||
icon: 'text-gray-600 dark:text-white/70',
|
||||
separator: {
|
||||
class: ['mx-2 text-gray-600 dark:text-white/70', 'flex items-center']
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<Breadcrumb :home="home" :model="items" />
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -1,138 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
|
||||
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
|
||||
Tailwind CSS.
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export default {
|
||||
button: {
|
||||
root: ({ props, context }) => ({
|
||||
class: [
|
||||
'items-center cursor-pointer inline-flex overflow-hidden relative select-none text-center align-bottom',
|
||||
'transition duration-200 ease-in-out',
|
||||
'focus:outline-none focus:outline-offset-0',
|
||||
{
|
||||
'text-white dark:text-gray-900 bg-blue-500 dark:bg-blue-400 border border-blue-500 dark:border-blue-400 hover:bg-blue-600 dark:hover:bg-blue-500 hover:border-blue-600 dark:hover:border-blue-500 focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(157,193,251,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(147,197,253,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
|
||||
!props.link && props.severity === null && !props.text && !props.outlined && !props.plain,
|
||||
'text-blue-600 bg-transparent border-transparent focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(157,193,251,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(147,197,253,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
|
||||
props.link
|
||||
},
|
||||
{
|
||||
'focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(176,185,198,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(203,213,225,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
|
||||
props.severity === 'secondary',
|
||||
'focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(136,234,172,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(134,239,172,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
|
||||
props.severity === 'success',
|
||||
'focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(157,193,251,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(147,197,253,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
|
||||
props.severity === 'info',
|
||||
'focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(250,207,133,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(252,211,77,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
|
||||
props.severity === 'warning',
|
||||
'focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(212,170,251,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(216,180,254,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
|
||||
props.severity === 'help',
|
||||
'focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(247,162,162,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(252,165,165,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
|
||||
props.severity === 'danger'
|
||||
},
|
||||
{
|
||||
'text-white dark:text-gray-900 bg-gray-500 dark:bg-gray-400 border border-gray-500 dark:border-gray-400 hover:bg-gray-600 dark:hover:bg-gray-500 hover:border-gray-600 dark:hover:border-gray-500':
|
||||
props.severity === 'secondary' && !props.text && !props.outlined && !props.plain,
|
||||
'text-white dark:text-gray-900 bg-green-500 dark:bg-green-400 border border-green-500 dark:border-green-400 hover:bg-green-600 dark:hover:bg-green-500 hover:border-green-600 dark:hover:border-green-500':
|
||||
props.severity === 'success' && !props.text && !props.outlined && !props.plain,
|
||||
'text-white dark:text-gray-900 dark:bg-blue-400 bg-blue-500 dark:bg-blue-400 border border-blue-500 dark:border-blue-400 hover:bg-blue-600 hover:border-blue-600 dark:hover:bg-blue-500 dark:hover:border-blue-500':
|
||||
props.severity === 'info' && !props.text && !props.outlined && !props.plain,
|
||||
'text-white dark:text-gray-900 bg-orange-500 dark:bg-orange-400 border border-orange-500 dark:border-orange-400 hover:bg-orange-600 dark:hover:bg-orange-500 hover:border-orange-600 dark:hover:border-orange-500':
|
||||
props.severity === 'warning' && !props.text && !props.outlined && !props.plain,
|
||||
'text-white dark:text-gray-900 bg-purple-500 dark:bg-purple-400 border border-purple-500 dark:border-purple-400 hover:bg-purple-600 dark:hover:bg-purple-500 hover:border-purple-600 dark:hover:border-purple-500':
|
||||
props.severity === 'help' && !props.text && !props.outlined && !props.plain,
|
||||
'text-white dark:text-gray-900 bg-red-500 dark:bg-red-400 border border-red-500 dark:border-red-400 hover:bg-red-600 dark:hover:bg-red-500 hover:border-red-600 dark:hover:border-red-500':
|
||||
props.severity === 'danger' && !props.text && !props.outlined && !props.plain
|
||||
},
|
||||
{ 'shadow-lg': props.raised },
|
||||
{ 'rounded-md': !props.rounded, 'rounded-full': props.rounded },
|
||||
{
|
||||
'bg-transparent border-transparent': props.text && !props.plain,
|
||||
'text-blue-500 dark:text-blue-400 hover:bg-blue-300/20': props.text && (props.severity === null || props.severity === 'info') && !props.plain,
|
||||
'text-gray-500 dark:text-gray-400 hover:bg-gray-300/20': props.text && props.severity === 'secondary' && !props.plain,
|
||||
'text-green-500 dark:text-green-400 hover:bg-green-300/20': props.text && props.severity === 'success' && !props.plain,
|
||||
'text-orange-500 dark:text-orange-400 hover:bg-orange-300/20': props.text && props.severity === 'warning' && !props.plain,
|
||||
'text-purple-500 dark:text-purple-400 hover:bg-purple-300/20': props.text && props.severity === 'help' && !props.plain,
|
||||
'text-red-500 dark:text-red-400 hover:bg-red-300/20': props.text && props.severity === 'danger' && !props.plain
|
||||
},
|
||||
{ 'shadow-lg': props.raised && props.text },
|
||||
{
|
||||
'text-gray-500 hover:bg-gray-300/20': props.plain && props.text,
|
||||
'text-gray-500 border border-gray-500 hover:bg-gray-300/20': props.plain && props.outlined,
|
||||
'text-white bg-gray-500 border border-gray-500 hover:bg-gray-600 hover:border-gray-600': props.plain && !props.outlined && !props.text
|
||||
},
|
||||
{
|
||||
'bg-transparent border': props.outlined && !props.plain,
|
||||
'text-blue-500 dark:text-blue-400 border border-blue-500 dark:border-blue-400 hover:bg-blue-300/20': props.outlined && (props.severity === null || props.severity === 'info') && !props.plain,
|
||||
'text-gray-500 dark:text-gray-400 border border-gray-500 dark:border-gray-400 hover:bg-gray-300/20': props.outlined && props.severity === 'secondary' && !props.plain,
|
||||
'text-green-500 dark:text-green-400 border border-green-500 dark:border-green-400 hover:bg-green-300/20': props.outlined && props.severity === 'success' && !props.plain,
|
||||
'text-orange-500 dark:text-orange-400 border border-orange-500 dark:border-orange-400 hover:bg-orange-300/20': props.outlined && props.severity === 'warning' && !props.plain,
|
||||
'text-purple-500 dark:text-purple-400 border border-purple-500 dark:border-purple-400 hover:bg-purple-300/20': props.outlined && props.severity === 'help' && !props.plain,
|
||||
'text-red-500 dark:text-red-400 border border-red-500 dark:border-red-400 hover:bg-red-300/20': props.outlined && props.severity === 'danger' && !props.plain
|
||||
},
|
||||
{ 'px-4 py-3 text-base': props.size === null, 'text-xs py-2 px-3': props.size === 'small', 'text-xl py-3 px-4': props.size === 'large' },
|
||||
{ 'flex-column': props.iconPos == 'top' || props.iconPos == 'bottom' },
|
||||
{ 'opacity-60 pointer-events-none cursor-default': context.disabled }
|
||||
]
|
||||
}),
|
||||
label: ({ props }) => ({
|
||||
class: [
|
||||
'flex-1',
|
||||
'duration-200',
|
||||
'font-bold',
|
||||
{
|
||||
'hover:underline': props.link
|
||||
},
|
||||
{ 'invisible w-0': props.label == null }
|
||||
]
|
||||
}),
|
||||
icon: ({ props }) => ({
|
||||
class: [
|
||||
'mx-0',
|
||||
{
|
||||
'mr-2': props.iconPos == 'left' && props.label != null,
|
||||
'ml-2 order-1': props.iconPos == 'right' && props.label != null,
|
||||
'mb-2': props.iconPos == 'top' && props.label != null,
|
||||
'mt-2 order-2': props.iconPos == 'bottom' && props.label != null
|
||||
}
|
||||
]
|
||||
}),
|
||||
badge: ({ props }) => ({
|
||||
class: [{ 'ml-2 w-4 h-4 leading-none flex items-center justify-center': props.badge }]
|
||||
})
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-center flex-wrap gap-3">
|
||||
<Button label="Primary" />
|
||||
<Button label="Secondary" severity="secondary" />
|
||||
<Button label="Success" severity="success" />
|
||||
<Button label="Info" severity="info" />
|
||||
<Button label="Warning" severity="warning" />
|
||||
<Button label="Help" severity="help" />
|
||||
<Button label="Danger" severity="danger" />
|
||||
</div>
|
||||
</template>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,171 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
|
||||
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
|
||||
Tailwind CSS.
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export const TRANSITIONS = {
|
||||
overlay: {
|
||||
enterFromClass: 'opacity-0 scale-75',
|
||||
enterActiveClass: 'transition-transform transition-opacity duration-150 ease-in',
|
||||
leaveActiveClass: 'transition-opacity duration-150 ease-linear',
|
||||
leaveToClass: 'opacity-0'
|
||||
}
|
||||
};
|
||||
|
||||
export default {
|
||||
calendar: {
|
||||
root: ({ props }) => ({
|
||||
class: [
|
||||
'inline-flex max-w-full relative',
|
||||
{
|
||||
'opacity-60 select-none pointer-events-none cursor-default': props.disabled
|
||||
}
|
||||
]
|
||||
}),
|
||||
input: {
|
||||
class: [
|
||||
'font-sans text-base text-gray-600 dark:text-white/80 bg-white dark:bg-gray-900 p-3 border border-gray-300 dark:border-blue-900/40 transition-colors duration-200 appearance-none rounded-lg',
|
||||
'hover:border-blue-500' //Hover
|
||||
]
|
||||
},
|
||||
panel: ({ props }) => ({
|
||||
class: [
|
||||
'bg-white dark:bg-gray-900',
|
||||
'min-w-[350px]',
|
||||
{
|
||||
'shadow-md border-0 absolute': !props.inline,
|
||||
'inline-block overflow-x-auto border border-gray-300 dark:border-blue-900/40 p-2 rounded-lg': props.inline
|
||||
}
|
||||
]
|
||||
}),
|
||||
header: {
|
||||
class: ['flex items-center justify-between', 'p-2 text-gray-700 dark:text-white/80 bg-white dark:bg-gray-900 font-semibold m-0 border-b border-gray-300 dark:border-blue-900/40 rounded-t-lg']
|
||||
},
|
||||
previousbutton: {
|
||||
class: [
|
||||
'flex items-center justify-center cursor-pointer overflow-hidden relative',
|
||||
'w-8 h-8 text-gray-600 dark:text-white/70 border-0 bg-transparent rounded-full transition-colors duration-200 ease-in-out',
|
||||
'hover:text-gray-700 dark:hover:text-white/80 hover:border-transparent hover:bg-gray-200 dark:hover:bg-gray-800/80 '
|
||||
]
|
||||
},
|
||||
title: 'leading-8 mx-auto',
|
||||
monthTitle: {
|
||||
class: ['text-gray-700 dark:text-white/80 transition duration-200 font-semibold p-2', 'mr-2', 'hover:text-blue-500']
|
||||
},
|
||||
yearTitle: {
|
||||
class: ['text-gray-700 dark:text-white/80 transition duration-200 font-semibold p-2', 'hover:text-blue-500']
|
||||
},
|
||||
nextbutton: {
|
||||
class: [
|
||||
'flex items-center justify-center cursor-pointer overflow-hidden relative',
|
||||
'w-8 h-8 text-gray-600 dark:text-white/70 border-0 bg-transparent rounded-full transition-colors duration-200 ease-in-out',
|
||||
'hover:text-gray-700 dark:hover:text-white/80 hover:border-transparent hover:bg-gray-200 dark:hover:bg-gray-800/80 '
|
||||
]
|
||||
},
|
||||
table: {
|
||||
class: ['border-collapse w-full', 'my-2']
|
||||
},
|
||||
tableheadercell: 'p-2',
|
||||
weekday: 'text-gray-600 dark:text-white/70',
|
||||
day: 'p-2',
|
||||
daylabel: ({ context }) => ({
|
||||
class: [
|
||||
'w-10 h-10 rounded-full transition-shadow duration-200 border-transparent border',
|
||||
'flex items-center justify-center mx-auto overflow-hidden relative',
|
||||
'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
|
||||
{
|
||||
'opacity-60 cursor-default': context.disabled,
|
||||
'cursor-pointer': !context.disabled
|
||||
},
|
||||
{
|
||||
'text-gray-600 dark:text-white/70 bg-transprent hover:bg-gray-200 dark:hover:bg-gray-800/80': !context.selected && !context.disabled,
|
||||
'text-blue-700 bg-blue-100 hover:bg-blue-200': context.selected && !context.disabled
|
||||
}
|
||||
]
|
||||
}),
|
||||
monthpicker: 'my-2',
|
||||
month: ({ context }) => ({
|
||||
class: [
|
||||
'w-1/3 inline-flex items-center justify-center cursor-pointer overflow-hidden relative',
|
||||
'p-2 transition-shadow duration-200 rounded-lg',
|
||||
'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
|
||||
{ 'text-gray-600 dark:text-white/70 bg-transprent hover:bg-gray-200 dark:hover:bg-gray-800/80': !context.selected && !context.disabled, 'text-blue-700 bg-blue-100 hover:bg-blue-200': context.selected && !context.disabled }
|
||||
]
|
||||
}),
|
||||
yearpicker: {
|
||||
class: ['my-2']
|
||||
},
|
||||
year: ({ context }) => ({
|
||||
class: [
|
||||
'w-1/2 inline-flex items-center justify-center cursor-pointer overflow-hidden relative',
|
||||
'p-2 transition-shadow duration-200 rounded-lg',
|
||||
'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
|
||||
{
|
||||
'text-gray-600 dark:text-white/70 bg-transprent hover:bg-gray-200 dark:hover:bg-gray-800/80': !context.selected && !context.disabled,
|
||||
'text-blue-700 bg-blue-100 hover:bg-blue-200': context.selected && !context.disabled
|
||||
}
|
||||
]
|
||||
}),
|
||||
timepicker: {
|
||||
class: ['flex justify-center items-center', 'border-t-1 border-solid border-gray-300 p-2']
|
||||
},
|
||||
separatorcontainer: 'flex items-center flex-col px-2',
|
||||
separator: 'text-xl',
|
||||
hourpicker: 'flex items-center flex-col px-2',
|
||||
minutepicker: 'flex items-center flex-col px-2',
|
||||
ampmpicker: 'flex items-center flex-col px-2',
|
||||
incrementbutton: {
|
||||
class: [
|
||||
'flex items-center justify-center cursor-pointer overflow-hidden relative',
|
||||
'w-8 h-8 text-gray-600 dark:text-white/70 border-0 bg-transparent rounded-full transition-colors duration-200 ease-in-out',
|
||||
'hover:text-gray-700 dark:hover:text-white/80 hover:border-transparent hover:bg-gray-200 dark:hover:bg-gray-800/80 '
|
||||
]
|
||||
},
|
||||
decrementbutton: {
|
||||
class: [
|
||||
'flex items-center justify-center cursor-pointer overflow-hidden relative',
|
||||
'w-8 h-8 text-gray-600 dark:text-white/70 border-0 bg-transparent rounded-full transition-colors duration-200 ease-in-out',
|
||||
'hover:text-gray-700 dark:hover:text-white/80 hover:border-transparent hover:bg-gray-200 dark:hover:bg-gray-800/80 '
|
||||
]
|
||||
},
|
||||
groupcontainer: 'flex',
|
||||
group: {
|
||||
class: ['flex-1', 'border-l border-gray-300 pr-0.5 pl-0.5 pt-0 pb-0', 'first:pl-0 first:border-l-0']
|
||||
},
|
||||
transition: TRANSITIONS.overlay
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<Calendar v-model="date" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const date = ref();
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,72 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
|
||||
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
|
||||
Tailwind CSS.
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export default {
|
||||
card: {
|
||||
root: {
|
||||
class: [
|
||||
'bg-white text-gray-700 shadow-md rounded-md', // Background, text color, box shadow, and border radius.
|
||||
'dark:bg-gray-900 dark:text-white ' //dark
|
||||
]
|
||||
},
|
||||
body: 'p-5', // Padding.
|
||||
title: 'text-2xl font-bold mb-2', // Font size, font weight, and margin bottom.
|
||||
subtitle: {
|
||||
class: [
|
||||
'font-normal mb-2 text-gray-600', // Font weight, margin bottom, and text color.
|
||||
'dark:text-white/60 ' //dark
|
||||
]
|
||||
},
|
||||
content: 'py-5', // Vertical padding.
|
||||
footer: 'pt-5' // Top padding.
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex items-center justify-center">
|
||||
<Card style="width: 25em">
|
||||
<template #header>
|
||||
<img alt="user header" src="https://primefaces.org/cdn/primevue/images/usercard.png" />
|
||||
</template>
|
||||
<template #title> Advanced Card </template>
|
||||
<template #subtitle> Card subtitle </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>
|
||||
<template #footer>
|
||||
<Button icon="pi pi-check" label="Save" />
|
||||
<Button icon="pi pi-times" label="Cancel" severity="secondary" style="margin-left: 0.5em" />
|
||||
</template>
|
||||
</Card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,146 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
|
||||
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded :service="['ProductService']" />
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
|
||||
Tailwind CSS.
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export default {
|
||||
carousel: {
|
||||
root: 'flex flex-col',
|
||||
content: 'flex flex-col overflow-auto',
|
||||
container: ({ props }) => ({
|
||||
class: [
|
||||
'flex',
|
||||
{
|
||||
'flex-row': props.orientation !== 'vertical',
|
||||
'flex-col': props.orientation == 'vertical'
|
||||
}
|
||||
]
|
||||
}),
|
||||
previousbutton: {
|
||||
class: ['flex justify-center items-center self-center overflow-hidden relative shrink-0 grow-0', 'w-8 h-8 text-gray-600 border-0 bg-transparent rounded-full transition duration-200 ease-in-out mx-2']
|
||||
},
|
||||
itemscontent: 'overflow-hidden w-full',
|
||||
itemscontainer: ({ props }) => ({
|
||||
class: [
|
||||
'flex ',
|
||||
{
|
||||
'flex-row': props.orientation !== 'vertical',
|
||||
'flex-col h-full': props.orientation == 'vertical'
|
||||
}
|
||||
]
|
||||
}),
|
||||
item: ({ props }) => ({
|
||||
class: [
|
||||
'flex shrink-0 grow',
|
||||
{
|
||||
'w-1/3': props.orientation !== 'vertical',
|
||||
'w-full': props.orientation == 'vertical'
|
||||
}
|
||||
]
|
||||
}),
|
||||
indicators: {
|
||||
class: ['flex flex-row justify-center flex-wrap']
|
||||
},
|
||||
indicator: 'mr-2 mb-2',
|
||||
indicatorbutton: ({ context }) => ({
|
||||
class: [
|
||||
'w-8 h-2 transition duration-200 rounded-0',
|
||||
'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
|
||||
{
|
||||
'bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600': !context.highlighted,
|
||||
'bg-blue-500 hover:bg-blue-600': context.highlighted
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="responsiveOptions">
|
||||
<template #item="slotProps">
|
||||
<div class="border bg-white dark:bg-gray-900 border-gray-300 dark:border-blue-900/40 rounded-lg m-2 text-center py-5 px-3">
|
||||
<div class="mb-3 flex justify-center">
|
||||
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-1/2 shadow-sm" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="mb-1 text-gray-700 font-medium dark:text-white/80">{{ slotProps.data.name }}</h4>
|
||||
<h6 class="mt-0 mb-3 font-medium text-gray-700 dark:text-white/80">\${{ slotProps.data.price }}</h6>
|
||||
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
|
||||
<div class="mt-5 flex flex-wrap gap-2 justify-center align-center">
|
||||
<Button icon="pi pi-search" rounded class="mr-2 text-gray-700 dark:text-white/80 inline-flex" />
|
||||
<Button icon="pi pi-star-fill" rounded severity="success" class="mr-2 text-gray-700 dark:text-white/80 inline-flex" />
|
||||
</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: '1199px',
|
||||
numVisible: 1,
|
||||
numScroll: 1
|
||||
},
|
||||
{
|
||||
breakpoint: '991px',
|
||||
numVisible: 2,
|
||||
numScroll: 1
|
||||
},
|
||||
{
|
||||
breakpoint: '767px',
|
||||
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>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,157 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
|
||||
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
|
||||
Tailwind CSS.
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export const TRANSITIONS = {
|
||||
overlay: {
|
||||
enterFromClass: 'opacity-0 scale-75',
|
||||
enterActiveClass: 'transition-transform transition-opacity duration-150 ease-in',
|
||||
leaveActiveClass: 'transition-opacity duration-150 ease-linear',
|
||||
leaveToClass: 'opacity-0'
|
||||
}
|
||||
};
|
||||
|
||||
export default {
|
||||
cascadeselect: {
|
||||
root: ({ props }) => ({
|
||||
class: [
|
||||
'inline-flex cursor-pointer select-none relative',
|
||||
'bg-white dark:bg-gray-900 border border-gray-300 dark:border-blue-900/40 transition duration-200 ease-in-out rounded-lg',
|
||||
{ 'opacity-60 select-none pointer-events-none cursor-default': props.disabled }
|
||||
]
|
||||
}),
|
||||
label: {
|
||||
class: ['block whitespace-nowrap overflow-hidden flex flex-1 w-1 text-overflow-ellipsis cursor-pointer', 'bg-transparent border-0 p-3 text-gray-700 dark:text-white/80', 'appearance-none rounded-md']
|
||||
},
|
||||
dropdownbutton: {
|
||||
class: ['flex items-center justify-center shrink-0', 'bg-transparent text-gray-600 dark:text-white/80 w-[3rem] rounded-tr-6 rounded-br-6']
|
||||
},
|
||||
panel: 'absolute py-3 bg-white dark:bg-gray-900 border-0 shadow-md',
|
||||
list: 'm-0 sm:p-0 list-none',
|
||||
item: {
|
||||
class: [
|
||||
'cursor-pointer font-normal whitespace-nowrap',
|
||||
'm-0 border-0 bg-transparent transition-shadow rounded-none',
|
||||
'text-gray-700 dark:text-white/80 hover:text-gray-700 dark:hover:text-white/80 hover:bg-gray-200 dark:hover:bg-gray-800/80'
|
||||
]
|
||||
},
|
||||
content: {
|
||||
class: ['flex items-center overflow-hidden relative', 'py-3 px-5']
|
||||
},
|
||||
groupicon: 'ml-auto',
|
||||
sublist: {
|
||||
class: ['block absolute left-full top-0', 'min-w-full z-10', 'py-3 bg-white dark:bg-gray-900 border-0 shadow-md']
|
||||
},
|
||||
transition: TRANSITIONS.overlay
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
|
||||
:optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -1,52 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" embedded />
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
|
||||
Tailwind CSS.
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<Chart type="bar" :data="chartData" :options="chartOptions" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const chartData = ref({
|
||||
labels: ['Q1', 'Q2', 'Q3', 'Q4'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'Sales',
|
||||
data: [540, 325, 702, 620],
|
||||
backgroundColor: ['rgba(255, 159, 64, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(153, 102, 255, 0.2)'],
|
||||
borderColor: ['rgb(255, 159, 64)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)', 'rgb(153, 102, 255)'],
|
||||
borderWidth: 1
|
||||
}
|
||||
]
|
||||
});
|
||||
const chartOptions = ref({
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true
|
||||
}
|
||||
}
|
||||
});
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,61 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
|
||||
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
|
||||
Tailwind CSS.
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export default {
|
||||
checkbox: {
|
||||
root: {
|
||||
class: ['cursor-pointer inline-flex relative select-none align-bottom', 'w-6 h-6']
|
||||
},
|
||||
input: ({ props, context }) => ({
|
||||
class: [
|
||||
'flex items-center justify-center',
|
||||
'border-2 w-6 h-6 text-gray-600 rounded-lg transition-colors duration-200',
|
||||
{
|
||||
'border-gray-300 bg-white dark:border-blue-900/40 dark:bg-gray-900': !context.checked,
|
||||
'border-blue-500 bg-blue-500 dark:border-blue-400 dark:bg-blue-400': context.checked
|
||||
},
|
||||
{
|
||||
'hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]': !props.disabled,
|
||||
'cursor-default opacity-60': props.disabled
|
||||
}
|
||||
]
|
||||
}),
|
||||
icon: 'w-4 h-4 transition-all duration-200 text-white text-base dark:text-gray-900'
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<Checkbox v-model="checked" :binary="true" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const checked = ref(false);
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,54 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
|
||||
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
|
||||
Tailwind CSS.
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export default {
|
||||
chip: {
|
||||
root: {
|
||||
class: ['inline-flex items-center', 'bg-gray-200 text-gray-800 rounded-[16px] px-3 dark:text-white/80 dark:bg-gray-900']
|
||||
},
|
||||
label: 'leading-6 mt-1.5 mb-1.5',
|
||||
icon: 'leading-6 mr-2',
|
||||
image: {
|
||||
class: ['w-9 h-9 ml-[-0.75rem] mr-2', 'rounded-full']
|
||||
},
|
||||
removeIcon: {
|
||||
class: ['ml-2 rounded-md transition duration-200 ease-in-out', 'cursor-pointer leading-6']
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex flex-wrap gap-2">
|
||||
<Chip label="Apple" icon="pi pi-apple" />
|
||||
<Chip label="Facebook" icon="pi pi-facebook" />
|
||||
<Chip label="Google" icon="pi pi-google" />
|
||||
<Chip label="Microsoft" icon="pi pi-microsoft" removable />
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,70 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
|
||||
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
|
||||
Tailwind CSS.
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export default {
|
||||
chips: {
|
||||
root: ({ props }) => ({
|
||||
class: [
|
||||
'flex',
|
||||
{
|
||||
'opacity-60 select-none pointer-events-none cursor-default': props.disabled
|
||||
}
|
||||
]
|
||||
}),
|
||||
container: {
|
||||
class: [
|
||||
'm-0 py-1.5 px-3 list-none cursor-text overflow-hidden flex items-center flex-wrap',
|
||||
'w-full',
|
||||
'font-sans text-base text-gray-600 dark:text-white/70 bg-white dark:bg-gray-900 p-3 border border-gray-300 dark:border-blue-900/40 transition-colors duration-200 appearance-none rounded-lg',
|
||||
'hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]'
|
||||
]
|
||||
},
|
||||
|
||||
inputtoken: {
|
||||
class: ['py-1.5 px-0', 'flex flex-1 inline-flex']
|
||||
},
|
||||
input: {
|
||||
class: ['font-sans text-base text-gray-700 dark:text-white/80 p-0 m-0', 'border-0 outline-none bg-transparent shadow-none rounded-none w-full']
|
||||
},
|
||||
token: {
|
||||
class: ['py-1 px-2 mr-2 bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-white/80 rounded-full', 'cursor-default inline-flex items-center']
|
||||
},
|
||||
removeTokenIcon: 'ml-2'
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<Chips v-model="value" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const value = ref();
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,92 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
|
||||
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
|
||||
Tailwind CSS.
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export const TRANSITIONS = {
|
||||
overlay: {
|
||||
enterFromClass: 'opacity-0 scale-75',
|
||||
enterActiveClass: 'transition-transform transition-opacity duration-150 ease-in',
|
||||
leaveActiveClass: 'transition-opacity duration-150 ease-linear',
|
||||
leaveToClass: 'opacity-0'
|
||||
}
|
||||
};
|
||||
|
||||
export default {
|
||||
colorpicker: {
|
||||
root: ({ props }) => ({
|
||||
class: [
|
||||
'inline-block',
|
||||
{
|
||||
'opacity-60 select-none pointer-events-none cursor-default': props.disabled
|
||||
}
|
||||
]
|
||||
}),
|
||||
input: {
|
||||
class: [
|
||||
'm-0',
|
||||
'font-sans text-base text-gray-600 bg-white dark:bg-gray-900 p-3 border border-gray-300 dark:border-blue-900/40 transition-colors duration-200 rounded-lg cursor-pointer',
|
||||
'hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
|
||||
'w-8 h-8'
|
||||
]
|
||||
},
|
||||
panel: ({ props }) => ({
|
||||
class: [
|
||||
'shadow-md',
|
||||
'bg-gray-800 border-gray-900',
|
||||
{
|
||||
'relative h-48 w-52': props.inline,
|
||||
'absolute h-48 w-52': !props.inline
|
||||
}
|
||||
]
|
||||
}),
|
||||
selector: 'absolute h-44 w-40 top-2 left-2',
|
||||
color: {
|
||||
class: 'h-44 w-40',
|
||||
style: 'background: linear-gradient(to top, #000 0%, rgb(0 0 0 / 0) 100%), linear-gradient(to right, #fff 0%, rgb(255 255 255 / 0) 100%)'
|
||||
},
|
||||
colorhandle: {
|
||||
class: ['rounded-full border border-solid cursor-pointer h-3 w-3 absolute opacity-85', 'border-white']
|
||||
},
|
||||
hue: {
|
||||
class: ['h-44 w-6 absolute top-2 left-44 opacity-85'],
|
||||
style: 'background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red)'
|
||||
},
|
||||
huehandle: 'border-solid border-2 cursor-pointer h-2 w-8 left-0 -ml-1 -mt-1 opacity-85 absolute',
|
||||
transition: TRANSITIONS.overlay
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<ColorPicker v-model="color" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const color = ref();
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,156 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
|
||||
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
|
||||
Tailwind CSS.
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export default {
|
||||
dialog: {
|
||||
root: ({ state }) => ({
|
||||
class: [
|
||||
'rounded-lg shadow-lg border-0',
|
||||
'max-h-90 transform scale-100',
|
||||
'm-0 w-[50vw]',
|
||||
'dark:border dark:border-blue-900/40',
|
||||
{
|
||||
'transition-none transform-none !w-screen !h-screen !max-h-full !top-0 !left-0': state.maximized
|
||||
}
|
||||
]
|
||||
}),
|
||||
header: {
|
||||
class: ['flex items-center justify-between shrink-0', 'bg-white text-gray-800 border-t-0 rounded-tl-lg rounded-tr-lg p-6', 'dark:bg-gray-900 dark:text-white/80']
|
||||
},
|
||||
headerTitle: 'font-bold text-lg',
|
||||
headerIcons: 'flex items-center',
|
||||
closeButton: {
|
||||
class: [
|
||||
'flex items-center justify-center overflow-hidden relative',
|
||||
'w-8 h-8 text-gray-500 border-0 bg-transparent rounded-full transition duration-200 ease-in-out mr-2 last:mr-0',
|
||||
'hover:text-gray-700 hover:border-transparent hover:bg-gray-200',
|
||||
'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]', // focus
|
||||
'dark:hover:text-white/80 dark:hover:border-transparent dark:hover:bg-gray-800/80 dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]'
|
||||
]
|
||||
},
|
||||
closeButtonIcon: 'w-4 h-4 inline-block',
|
||||
content: ({ state }) => ({
|
||||
class: [
|
||||
'overflow-y-auto',
|
||||
'bg-white text-gray-700 px-6 pb-8 pt-0',
|
||||
'rounded-bl-lg rounded-br-lg',
|
||||
'dark:bg-gray-900 dark:text-white/80 ',
|
||||
{
|
||||
grow: state.maximized
|
||||
}
|
||||
]
|
||||
}),
|
||||
footer: {
|
||||
class: ['shrink-0 ', 'border-t-0 bg-white text-gray-700 px-6 pb-6 text-right rounded-b-lg', 'dark:bg-gray-900 dark:text-white/80']
|
||||
},
|
||||
mask: ({ props }) => ({
|
||||
class: ['transition duration-200', { 'bg-black/40': props.modal }]
|
||||
}),
|
||||
transition: ({ props }) => {
|
||||
return props.position === 'top'
|
||||
? {
|
||||
enterFromClass: 'opacity-0 scale-75 translate-x-0 -translate-y-full translate-z-0',
|
||||
enterActiveClass: 'transition-all duration-200 ease-out',
|
||||
leaveActiveClass: 'transition-all duration-200 ease-out',
|
||||
leaveToClass: 'opacity-0 scale-75 translate-x-0 -translate-y-full translate-z-0'
|
||||
}
|
||||
: props.position === 'bottom'
|
||||
? {
|
||||
enterFromClass: 'opacity-0 scale-75 translate-y-full',
|
||||
enterActiveClass: 'transition-all duration-200 ease-out',
|
||||
leaveActiveClass: 'transition-all duration-200 ease-out',
|
||||
leaveToClass: 'opacity-0 scale-75 translate-x-0 translate-y-full translate-z-0'
|
||||
}
|
||||
: props.position === 'left' || props.position === 'topleft' || props.position === 'bottomleft'
|
||||
? {
|
||||
enterFromClass: 'opacity-0 scale-75 -translate-x-full translate-y-0 translate-z-0',
|
||||
enterActiveClass: 'transition-all duration-200 ease-out',
|
||||
leaveActiveClass: 'transition-all duration-200 ease-out',
|
||||
leaveToClass: 'opacity-0 scale-75 -translate-x-full translate-y-0 translate-z-0'
|
||||
}
|
||||
: props.position === 'right' || props.position === 'topright' || props.position === 'bottomright'
|
||||
? {
|
||||
enterFromClass: 'opacity-0 scale-75 translate-x-full translate-y-0 translate-z-0',
|
||||
enterActiveClass: 'transition-all duration-200 ease-out',
|
||||
leaveActiveClass: 'transition-all duration-200 ease-out',
|
||||
leaveToClass: 'opacity-0 scale-75 opacity-0 scale-75 translate-x-full translate-y-0 translate-z-0'
|
||||
}
|
||||
: {
|
||||
enterFromClass: 'opacity-0 scale-75',
|
||||
enterActiveClass: 'transition-all duration-200 ease-out',
|
||||
leaveActiveClass: 'transition-all duration-200 ease-out',
|
||||
leaveToClass: 'opacity-0 scale-75'
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<Toast />
|
||||
<ConfirmDialog></ConfirmDialog>
|
||||
<div class="card flex flex-wrap gap-2 justify-center">
|
||||
<Button @click="confirm1()" icon="pi pi-check" label="Confirm"></Button>
|
||||
<Button @click="confirm2()" icon="pi pi-times" label="Delete"></Button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useConfirm } from "primevue/useconfirm";
|
||||
import { useToast } from "primevue/usetoast";
|
||||
|
||||
const confirm = useConfirm();
|
||||
const toast = useToast();
|
||||
|
||||
const confirm1 = () => {
|
||||
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 });
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const confirm2 = () => {
|
||||
confirm.require({
|
||||
message: 'Do you want to delete this record?',
|
||||
header: 'Delete Confirmation',
|
||||
icon: 'pi pi-info-circle',
|
||||
acceptClass: 'p-button-danger',
|
||||
accept: () => {
|
||||
toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 });
|
||||
},
|
||||
reject: () => {
|
||||
toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
|
||||
}
|
||||
});
|
||||
};
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,107 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
|
||||
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
|
||||
Tailwind CSS.
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export const TRANSITIONS = {
|
||||
overlay: {
|
||||
enterFromClass: 'opacity-0 scale-75',
|
||||
enterActiveClass: 'transition-transform transition-opacity duration-150 ease-in',
|
||||
leaveActiveClass: 'transition-opacity duration-150 ease-linear',
|
||||
leaveToClass: 'opacity-0'
|
||||
}
|
||||
};
|
||||
export default {
|
||||
confirmpopup: {
|
||||
root: {
|
||||
class: [
|
||||
'bg-white text-gray-700 border-0 rounded-md shadow-lg',
|
||||
'z-40 transform origin-center',
|
||||
'mt-3 absolute left-0 top-0',
|
||||
'before:absolute before:w-0 before:-top-3 before:h-0 before:border-transparent before:border-solid before:ml-6 before:border-x-[0.75rem] before:border-b-[0.75rem] before:border-t-0 before:border-b-white dark:before:border-b-gray-900',
|
||||
'dark:border dark:border-blue-900/40 dark:bg-gray-900 dark:text-white/80'
|
||||
]
|
||||
},
|
||||
content: {
|
||||
class: 'p-5 items-center flex'
|
||||
},
|
||||
icon: {
|
||||
class: 'text-2xl'
|
||||
},
|
||||
message: {
|
||||
class: 'ml-4'
|
||||
},
|
||||
footer: {
|
||||
class: 'flex gap-2 justify-end align-center text-right px-5 py-5 pt-0'
|
||||
},
|
||||
transition: TRANSITIONS.overlay
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<Toast />
|
||||
<ConfirmPopup></ConfirmPopup>
|
||||
<div class="card flex flex-wrap gap-2 justify-center">
|
||||
<Button @click="confirm1($event)" icon="pi pi-check" label="Confirm"></Button>
|
||||
<Button @click="confirm2($event)" icon="pi pi-times" label="Delete" outlined severity="danger"></Button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useConfirm } from "primevue/useconfirm";
|
||||
import { useToast } from "primevue/usetoast";
|
||||
|
||||
const confirm = useConfirm();
|
||||
const toast = useToast();
|
||||
|
||||
const confirm1 = (event) => {
|
||||
confirm.require({
|
||||
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 });
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const confirm2 = (event) => {
|
||||
confirm.require({
|
||||
target: event.currentTarget,
|
||||
message: 'Do you want to delete this record?',
|
||||
icon: 'pi pi-info-circle',
|
||||
acceptClass: 'p-button-danger',
|
||||
accept: () => {
|
||||
toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 });
|
||||
},
|
||||
reject: () => {
|
||||
toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
|
||||
}
|
||||
});
|
||||
};
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,79 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
|
||||
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
|
||||
Tailwind CSS.
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
xport default {
|
||||
contextmenu: {
|
||||
root: 'py-1 bg-white dark:bg-gray-900 text-gray-700 dark:text-white/80 border-none shadow-md rounded-lg w-52',
|
||||
menu: {
|
||||
class: ['m-0 p-0 list-none', 'outline-none']
|
||||
},
|
||||
menuitem: 'relative',
|
||||
content: ({ context }) => ({
|
||||
class: [
|
||||
'transition-shadow duration-200 rounded-none',
|
||||
'hover:text-gray-700 dark:hover:text-white/80 hover:bg-gray-200 dark:hover:bg-gray-800/80', // Hover
|
||||
{
|
||||
'text-gray-700': !context.focused && !context.active,
|
||||
'bg-gray-300 text-gray-700 dark:text-white/80 dark:bg-gray-800/90': context.focused && !context.active,
|
||||
'bg-blue-500 text-blue-700 dark:bg-blue-400 dark:text-white/80': context.focused && context.active,
|
||||
'bg-blue-50 text-blue-700 dark:bg-blue-300 dark:text-white/80': !context.focused && context.active
|
||||
}
|
||||
]
|
||||
}),
|
||||
action: {
|
||||
class: ['cursor-pointer flex items-center no-underline overflow-hidden relative', 'text-gray-700 dark:text-white/80 py-3 px-5 select-none']
|
||||
},
|
||||
icon: 'text-gray-600 dark:text-white/70 mr-2',
|
||||
label: 'text-gray-600 dark:text-white/70',
|
||||
transition: {
|
||||
enterFromClass: 'opacity-0',
|
||||
enterActiveClass: 'transition-opacity duration-250'
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
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" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const menu = ref();
|
||||
const items = ref([
|
||||
{ label: 'View', icon: 'pi pi-fw pi-search' },
|
||||
{ label: 'Delete', icon: 'pi pi-fw pi-trash' }
|
||||
]);
|
||||
|
||||
const onImageRightClick = (event) => {
|
||||
menu.value.show(event);
|
||||
};
|
||||
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,527 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
|
||||
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" :service="['CustomerService']" embedded />
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
|
||||
Tailwind CSS.
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export const TRANSITIONS = {
|
||||
overlay: {
|
||||
enterFromClass: 'opacity-0 scale-75',
|
||||
enterActiveClass: 'transition-transform transition-opacity duration-150 ease-in',
|
||||
leaveActiveClass: 'transition-opacity duration-150 ease-linear',
|
||||
leaveToClass: 'opacity-0'
|
||||
}
|
||||
};
|
||||
|
||||
export default {
|
||||
datatable: {
|
||||
root: ({ props }) => ({
|
||||
class: [
|
||||
'relative',
|
||||
{
|
||||
'flex flex-col h-full': props.scrollable && props.scrollHeight === 'flex'
|
||||
}
|
||||
]
|
||||
}),
|
||||
loadingoverlay: {
|
||||
class: [
|
||||
'fixed w-full h-full t-0 l-0 bg-gray-100/40',
|
||||
'transition duration-200',
|
||||
'absolute flex items-center justify-center z-2',
|
||||
'dark:bg-gray-950/40' // Dark Mode
|
||||
]
|
||||
},
|
||||
loadingicon: 'w-8 h-8',
|
||||
wrapper: ({ props }) => ({
|
||||
class: [
|
||||
{
|
||||
relative: props.scrollable,
|
||||
'flex flex-col grow h-full': props.scrollable && props.scrollHeight === 'flex'
|
||||
}
|
||||
]
|
||||
}),
|
||||
header: ({ props }) => ({
|
||||
class: [
|
||||
'bg-slate-50 text-slate-700 border-gray-300 font-bold p-4',
|
||||
'dark:border-blue-900/40 dark:text-white/80 dark:bg-gray-900', // Dark Mode
|
||||
props.showGridlines ? 'border-x border-t border-b-0' : 'border-y border-x-0'
|
||||
]
|
||||
}),
|
||||
table: 'w-full border-spacing-0',
|
||||
thead: ({ context }) => ({
|
||||
class: [
|
||||
{
|
||||
'bg-slate-50 top-0 z-[1]': context.scrollable
|
||||
}
|
||||
]
|
||||
}),
|
||||
tbody: ({ instance, context }) => ({
|
||||
class: [
|
||||
{
|
||||
'sticky z-[1]': instance.frozenRow && context.scrollable
|
||||
}
|
||||
]
|
||||
}),
|
||||
tfoot: ({ context }) => ({
|
||||
class: [
|
||||
{
|
||||
'bg-slate-50 bottom-0 z-[1]': context.scrollable
|
||||
}
|
||||
]
|
||||
}),
|
||||
footer: {
|
||||
class: [
|
||||
'bg-slate-50 text-slate-700 border-t-0 border-b border-x-0 border-gray-300 font-bold p-4',
|
||||
'dark:border-blue-900/40 dark:text-white/80 dark:bg-gray-900' // Dark Mode
|
||||
]
|
||||
},
|
||||
column: {
|
||||
headercell: ({ context, props }) => ({
|
||||
class: [
|
||||
'text-left border-0 border-b border-solid border-gray-300 dark:border-blue-900/40 font-bold',
|
||||
'transition duration-200',
|
||||
context?.size === 'small' ? 'p-2' : context?.size === 'large' ? 'p-5' : 'p-4', // Size
|
||||
context.sorted ? 'bg-blue-50 text-blue-700' : 'bg-slate-50 text-slate-700', // Sort
|
||||
context.sorted ? 'dark:text-white/80 dark:bg-blue-300' : 'dark:text-white/80 dark:bg-gray-900', // Dark Mode
|
||||
{
|
||||
'sticky z-[1]': props.frozen || props.frozen === '', // Frozen Columns
|
||||
'border-x border-y': context?.showGridlines,
|
||||
'overflow-hidden space-nowrap border-y relative bg-clip-padding': context.resizable // Resizable
|
||||
}
|
||||
]
|
||||
}),
|
||||
headercontent: 'flex items-center',
|
||||
bodycell: ({ props, context }) => ({
|
||||
class: [
|
||||
'text-left border-0 border-b border-solid border-gray-300',
|
||||
context?.size === 'small' ? 'p-2' : context?.size === 'large' ? 'p-5' : 'p-4', // Size
|
||||
'dark:text-white/80 dark:border-blue-900/40', // Dark Mode
|
||||
{
|
||||
'sticky bg-inherit': props.frozen || props.frozen === '', // Frozen Columns
|
||||
'border-x border-y': context?.showGridlines
|
||||
}
|
||||
]
|
||||
}),
|
||||
footercell: ({ context }) => ({
|
||||
class: [
|
||||
'text-left border-0 border-b border-solid border-gray-300 font-bold',
|
||||
'bg-slate-50 text-slate-700',
|
||||
'transition duration-200',
|
||||
context?.size === 'small' ? 'p-2' : context?.size === 'large' ? 'p-5' : 'p-4', // Size
|
||||
'dark:text-white/80 dark:bg-gray-900 dark:border-blue-900/40', // Dark Mode
|
||||
{
|
||||
'border-x border-y': context?.showGridlines
|
||||
}
|
||||
]
|
||||
}),
|
||||
sorticon: ({ context }) => ({
|
||||
class: ['ml-2', context.sorted ? 'text-blue-700 dark:text-white/80' : 'text-slate-700 dark:text-white/70']
|
||||
}),
|
||||
sortbadge: {
|
||||
class: [
|
||||
'flex items-center justify-center align-middle',
|
||||
'rounded-[50%] w-[1.143rem] leading-[1.143rem] ml-2',
|
||||
'text-blue-700 bg-blue-50',
|
||||
'dark:text-white/80 dark:bg-blue-400' // Dark Mode
|
||||
]
|
||||
},
|
||||
columnfilter: 'inline-flex items-center ml-auto',
|
||||
filteroverlay: {
|
||||
class: [
|
||||
'bg-white text-gray-600 border-0 rounded-md min-w-[12.5rem]',
|
||||
'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80' //Dark Mode
|
||||
]
|
||||
},
|
||||
filtermatchmodedropdown: {
|
||||
root: 'min-[0px]:flex mb-2'
|
||||
},
|
||||
filterrowitems: 'm-0 p-0 py-3 list-none ',
|
||||
filterrowitem: ({ context }) => ({
|
||||
class: ['m-0 py-3 px-5 bg-transparent', 'transition duration-200', context?.highlighted ? 'text-blue-700 bg-blue-100 dark:text-white/80 dark:bg-blue-300' : 'text-gray-600 bg-transparent dark:text-white/80 dark:bg-transparent']
|
||||
}),
|
||||
filteroperator: {
|
||||
class: [
|
||||
'px-5 py-3 border-b border-solid border-gray-300 text-slate-700 bg-slate-50 rounded-t-md',
|
||||
'dark:border-blue-900/40 dark:text-white/80 dark:bg-gray-900' // Dark Mode
|
||||
]
|
||||
},
|
||||
filteroperatordropdown: {
|
||||
root: 'min-[0px]:flex'
|
||||
},
|
||||
filterconstraint: 'p-5 border-b border-solid border-gray-300 dark:border-blue-900/40',
|
||||
filteraddrule: 'py-3 px-5',
|
||||
filteraddrulebutton: {
|
||||
root: 'justify-center w-full min-[0px]:text-sm',
|
||||
label: 'flex-auto grow-0',
|
||||
icon: 'mr-2'
|
||||
},
|
||||
filterremovebutton: {
|
||||
root: 'ml-2',
|
||||
label: 'grow-0'
|
||||
},
|
||||
filterbuttonbar: 'flex items-center justify-between p-5',
|
||||
filterclearbutton: {
|
||||
root: 'w-auto min-[0px]:text-sm border-blue-500 text-blue-500 px-4 py-3'
|
||||
},
|
||||
filterapplybutton: {
|
||||
root: 'w-auto min-[0px]:text-sm px-4 py-3'
|
||||
},
|
||||
filtermenubutton: ({ context }) => ({
|
||||
class: [
|
||||
'inline-flex justify-center items-center cursor-pointer no-underline overflow-hidden relative ml-2',
|
||||
'w-8 h-8 rounded-[50%]',
|
||||
'transition duration-200',
|
||||
'hover:text-slate-700 hover:bg-gray-300/20', // Hover
|
||||
'focus:outline-0 focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]', // Focus
|
||||
'dark:text-white/70 dark:hover:text-white/80 dark:bg-gray-900', // Dark Mode
|
||||
{
|
||||
'bg-blue-50 text-blue-700': context.active
|
||||
}
|
||||
]
|
||||
}),
|
||||
headerfilterclearbutton: ({ context }) => ({
|
||||
class: [
|
||||
'inline-flex justify-center items-center cursor-pointer no-underline overflow-hidden relative',
|
||||
'text-left bg-transparent m-0 p-0 border-none select-none ml-2',
|
||||
{
|
||||
invisible: !context.hidden
|
||||
}
|
||||
]
|
||||
}),
|
||||
columnresizer: 'block absolute top-0 right-0 m-0 w-2 h-full p-0 cursor-col-resize border border-transparent',
|
||||
rowreordericon: 'cursor-move',
|
||||
roweditorinitbutton: {
|
||||
class: [
|
||||
'inline-flex items-center justify-center overflow-hidden relative',
|
||||
'text-left cursor-pointer select-none',
|
||||
'w-8 h-8 border-0 rounded-[50%]',
|
||||
'transition duration-200',
|
||||
'text-slate-700 border-transparent',
|
||||
'focus:outline-0 focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]', //Focus
|
||||
'hover:text-slate-700 hover:bg-gray-300/20', //Hover
|
||||
'dark:text-white/70' // Dark Mode
|
||||
]
|
||||
},
|
||||
roweditorsavebutton: {
|
||||
class: [
|
||||
'inline-flex items-center justify-center overflow-hidden relative',
|
||||
'text-left cursor-pointer select-none',
|
||||
'w-8 h-8 border-0 rounded-[50%]',
|
||||
'transition duration-200',
|
||||
'text-slate-700 border-transparent',
|
||||
'focus:outline-0 focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]', //Focus
|
||||
'hover:text-slate-700 hover:bg-gray-300/20', //Hover
|
||||
'dark:text-white/70' // Dark Mode
|
||||
]
|
||||
},
|
||||
roweditorcancelbutton: {
|
||||
class: [
|
||||
'inline-flex items-center justify-center overflow-hidden relative',
|
||||
'text-left cursor-pointer select-none',
|
||||
'w-8 h-8 border-0 rounded-[50%]',
|
||||
'transition duration-200',
|
||||
'text-slate-700 border-transparent',
|
||||
'focus:outline-0 focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]', //Focus
|
||||
'hover:text-slate-700 hover:bg-gray-300/20', //Hover
|
||||
'dark:text-white/70' // Dark Mode
|
||||
]
|
||||
},
|
||||
radiobuttonwrapper: {
|
||||
class: ['relative inline-flex cursor-pointer select-none align-bottom', 'w-6 h-6']
|
||||
},
|
||||
radiobutton: ({ context }) => ({
|
||||
class: [
|
||||
'flex justify-center items-center',
|
||||
'border-2 w-6 h-6 text-gray-700 rounded-full transition duration-200 ease-in-out',
|
||||
context.checked ? 'border-blue-500 bg-blue-500 dark:border-blue-400 dark:bg-blue-400' : 'border-gray-300 bg-white dark:border-blue-900/40 dark:bg-gray-900',
|
||||
{
|
||||
'hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]': !context.disabled,
|
||||
'cursor-default opacity-60': context.disabled
|
||||
}
|
||||
]
|
||||
}),
|
||||
radiobuttonicon: ({ context }) => ({
|
||||
class: ['transform rounded-full', 'block w-3 h-3 transition duration-200 bg-white dark:bg-gray-900', { 'backface-hidden scale-10 invisible': context.checked === false, 'transform scale-100 visible': context.checked === true }]
|
||||
}),
|
||||
headercheckboxwrapper: {
|
||||
class: ['cursor-pointer inline-flex relative select-none align-bottom', 'w-6 h-6']
|
||||
},
|
||||
headercheckbox: ({ context }) => ({
|
||||
class: [
|
||||
'flex items-center justify-center',
|
||||
'border-2 w-6 h-6 text-gray-600 rounded-lg transition-colors duration-200',
|
||||
context.checked ? 'border-blue-500 bg-blue-500 dark:border-blue-400 dark:bg-blue-400' : 'border-gray-300 bg-white dark:border-blue-900/40 dark:bg-gray-900',
|
||||
{
|
||||
'hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]': !context.disabled,
|
||||
'cursor-default opacity-60': context.disabled
|
||||
}
|
||||
]
|
||||
}),
|
||||
headercheckboxicon: 'w-4 h-4 transition-all duration-200 text-white text-base dark:text-gray-900',
|
||||
checkboxwrapper: {
|
||||
class: ['cursor-pointer inline-flex relative select-none align-bottom', 'w-6 h-6']
|
||||
},
|
||||
checkbox: ({ context }) => ({
|
||||
class: [
|
||||
'flex items-center justify-center',
|
||||
'border-2 w-6 h-6 text-gray-600 rounded-lg transition-colors duration-200',
|
||||
context.checked ? 'border-blue-500 bg-blue-500 dark:border-blue-400 dark:bg-blue-400' : 'border-gray-300 bg-white dark:border-blue-900/40 dark:bg-gray-900',
|
||||
{
|
||||
'hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]': !context.disabled,
|
||||
'cursor-default opacity-60': context.disabled
|
||||
}
|
||||
]
|
||||
}),
|
||||
checkboxicon: 'w-4 h-4 transition-all duration-200 text-white text-base dark:text-gray-900',
|
||||
transition: TRANSITIONS.overlay
|
||||
},
|
||||
bodyrow: ({ context }) => ({
|
||||
class: [
|
||||
context.selected ? 'bg-blue-50 text-blue-700 dark:bg-blue-300' : 'bg-white text-gray-600 dark:bg-gray-900',
|
||||
context.stripedRows ? (context.index % 2 === 0 ? 'bg-white text-gray-600 dark:bg-gray-900' : 'bg-blue-50/50 text-gray-600 dark:bg-gray-950') : '',
|
||||
'transition duration-200',
|
||||
'focus:outline focus:outline-[0.15rem] focus:outline-blue-200 focus:outline-offset-[-0.15rem]', // Focus
|
||||
'dark:text-white/80 dark:focus:outline dark:focus:outline-[0.15rem] dark:focus:outline-blue-300 dark:focus:outline-offset-[-0.15rem]', // Dark Mode
|
||||
{
|
||||
'cursor-pointer': context.selectable,
|
||||
'hover:bg-gray-300/20 hover:text-gray-600': context.selectable && !context.selected // Hover
|
||||
}
|
||||
]
|
||||
}),
|
||||
rowexpansion: 'bg-white text-gray-600 dark:bg-gray-900 dark:text-white/80',
|
||||
rowgroupheader: {
|
||||
class: ['sticky z-[1]', 'bg-white text-gray-600', 'transition duration-200']
|
||||
},
|
||||
rowgroupfooter: {
|
||||
class: ['sticky z-[1]', 'bg-white text-gray-600', 'transition duration-200']
|
||||
},
|
||||
rowgrouptoggler: {
|
||||
class: [
|
||||
'text-left m-0 p-0 cursor-pointer select-none',
|
||||
'inline-flex items-center justify-center overflow-hidden relative',
|
||||
'w-8 h-8 text-gray-500 border-0 bg-transparent rounded-[50%]',
|
||||
'transition duration-200',
|
||||
'dark:text-white/70' // Dark Mode
|
||||
]
|
||||
},
|
||||
rowgrouptogglericon: 'inline-block w-4 h-4',
|
||||
resizehelper: 'absolute hidden w-px z-10 bg-blue-500 dark:bg-blue-300'
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<DataTable v-model:filters="filters" :value="customers" paginator showGridlines :rows="10" dataKey="id"
|
||||
filterDisplay="menu" :loading="loading" :globalFilterFields="['name', 'country.name', 'representative.name', 'balance', 'status']">
|
||||
<template #header>
|
||||
<div class="flex justify-between">
|
||||
<Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" />
|
||||
</div>
|
||||
</template>
|
||||
<template #empty> No customers found. </template>
|
||||
<template #loading> Loading customers data. Please wait. </template>
|
||||
<Column field="name" header="Name" style="min-width: 12rem">
|
||||
<template #body="{ data }">
|
||||
{{ data.name }}
|
||||
</template>
|
||||
<template #filter="{ filterModel }">
|
||||
<InputText v-model="filterModel.value" type="text" class="p-column-filter" placeholder="Search by name" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column header="Country" filterField="country.name" style="min-width: 12rem">
|
||||
<template #body="{ data }">
|
||||
<div class="flex items-center gap-2">
|
||||
<img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${data.country.code}\`" style="width: 24px" />
|
||||
<span>{{ data.country.name }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #filter="{ filterModel }">
|
||||
<InputText v-model="filterModel.value" type="text" class="p-column-filter" placeholder="Search by country" />
|
||||
</template>
|
||||
<template #filterclear="{ filterCallback }">
|
||||
<Button type="button" icon="pi pi-times" @click="filterCallback()" severity="secondary"></Button>
|
||||
</template>
|
||||
<template #filterapply="{ filterCallback }">
|
||||
<Button type="button" icon="pi pi-check" @click="filterCallback()" severity="success"></Button>
|
||||
</template>
|
||||
<template #filterfooter>
|
||||
<div class="px-3 pt-0 pb-3 text-center">Customized Buttons</div>
|
||||
</template>
|
||||
</Column>
|
||||
<Column header="Agent" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="min-width: 14rem">
|
||||
<template #body="{ data }">
|
||||
<div class="flex items-center gap-2">
|
||||
<img :alt="data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${data.representative.image}\`" style="width: 32px" />
|
||||
<span>{{ data.representative.name }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #filter="{ filterModel }">
|
||||
<MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
|
||||
<template #option="slotProps">
|
||||
<div class="flex items-center gap-2">
|
||||
<img :alt="slotProps.option.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.option.image}\`" style="width: 32px" />
|
||||
<span>{{ slotProps.option.name }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</MultiSelect>
|
||||
</template>
|
||||
</Column>
|
||||
<Column header="Date" filterField="date" dataType="date" style="min-width: 10rem">
|
||||
<template #body="{ data }">
|
||||
{{ formatDate(data.date) }}
|
||||
</template>
|
||||
<template #filter="{ filterModel }">
|
||||
<Calendar v-model="filterModel.value" dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" mask="99/99/9999" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column header="Balance" filterField="balance" dataType="numeric" style="min-width: 10rem">
|
||||
<template #body="{ data }">
|
||||
{{ formatCurrency(data.balance) }}
|
||||
</template>
|
||||
<template #filter="{ filterModel }">
|
||||
<InputNumber v-model="filterModel.value" mode="currency" currency="USD" locale="en-US" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column header="Status" field="status" :filterMenuStyle="{ width: '14rem' }" style="min-width: 12rem">
|
||||
<template #body="{ data }">
|
||||
<Tag :value="data.status" :severity="getSeverity(data.status)" />
|
||||
</template>
|
||||
<template #filter="{ filterModel }">
|
||||
<Dropdown v-model="filterModel.value" :options="statuses" placeholder="Select One" class="p-column-filter" showClear>
|
||||
<template #option="slotProps">
|
||||
<Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
|
||||
</template>
|
||||
</Dropdown>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="activity" header="Activity" :showFilterMatchModes="false" style="min-width: 12rem">
|
||||
<template #body="{ data }">
|
||||
<ProgressBar :value="data.activity" :showValue="false" style="height: 6px"></ProgressBar>
|
||||
</template>
|
||||
<template #filter="{ filterModel }">
|
||||
<Slider v-model="filterModel.value" range class="m-3"></Slider>
|
||||
<div class="flex items-center justify-between px-2">
|
||||
<span>{{ filterModel.value ? filterModel.value[0] : 0 }}</span>
|
||||
<span>{{ filterModel.value ? filterModel.value[1] : 100 }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="verified" header="Verified" dataType="boolean" bodyClass="text-center" style="min-width: 8rem">
|
||||
<template #body="{ data }">
|
||||
<i class="pi" :class="{ 'pi-check-circle text-green-500 ': data.verified, 'pi-times-circle text-red-500': !data.verified }"></i>
|
||||
</template>
|
||||
<template #filter="{ filterModel }">
|
||||
<label for="verified-filter" class="font-bold"> Verified </label>
|
||||
<TriStateCheckbox v-model="filterModel.value" inputId="verified-filter" />
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { CustomerService } from '@/service/CustomerService';
|
||||
import { FilterMatchMode, FilterOperator } from 'primevue/api';
|
||||
|
||||
const customers = ref();
|
||||
const filters = ref();
|
||||
const representatives = ref([
|
||||
{ name: 'Amy Elsner', image: 'amyelsner.png' },
|
||||
{ name: 'Anna Fali', image: 'annafali.png' },
|
||||
{ name: 'Asiya Javayant', image: 'asiyajavayant.png' },
|
||||
{ name: 'Bernardo Dominic', image: 'bernardodominic.png' },
|
||||
{ name: 'Elwin Sharvill', image: 'elwinsharvill.png' },
|
||||
{ name: 'Ioni Bowcher', image: 'ionibowcher.png' },
|
||||
{ name: 'Ivan Magalhaes', image: 'ivanmagalhaes.png' },
|
||||
{ name: 'Onyama Limba', image: 'onyamalimba.png' },
|
||||
{ name: 'Stephen Shaw', image: 'stephenshaw.png' },
|
||||
{ name: 'XuXue Feng', image: 'xuxuefeng.png' }
|
||||
]);
|
||||
const statuses = ref(['unqualified', 'qualified', 'new', 'negotiation', 'renewal', 'proposal']);
|
||||
const loading = ref(true);
|
||||
|
||||
onMounted(() => {
|
||||
CustomerService.getCustomersMedium().then((data) => {
|
||||
customers.value = getCustomers(data);
|
||||
loading.value = false;
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
const initFilters = () => {
|
||||
filters.value = {
|
||||
global: { value: null, matchMode: FilterMatchMode.CONTAINS },
|
||||
name: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
|
||||
'country.name': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
|
||||
representative: { value: null, matchMode: FilterMatchMode.IN },
|
||||
date: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] },
|
||||
balance: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
|
||||
status: { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
|
||||
activity: { value: [0, 100], matchMode: FilterMatchMode.BETWEEN },
|
||||
verified: { value: null, matchMode: FilterMatchMode.EQUALS }
|
||||
};
|
||||
};
|
||||
|
||||
initFilters();
|
||||
|
||||
const formatDate = (value) => {
|
||||
return value.toLocaleDateString('en-US', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric'
|
||||
});
|
||||
};
|
||||
const formatCurrency = (value) => {
|
||||
return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
|
||||
};
|
||||
const clearFilter = () => {
|
||||
initFilters();
|
||||
};
|
||||
const getCustomers = (data) => {
|
||||
return [...(data || [])].map((d) => {
|
||||
d.date = new Date(d.date);
|
||||
|
||||
return d;
|
||||
});
|
||||
};
|
||||
const getSeverity = (status) => {
|
||||
switch (status) {
|
||||
case 'unqualified':
|
||||
return 'danger';
|
||||
|
||||
case 'qualified':
|
||||
return 'success';
|
||||
|
||||
case 'new':
|
||||
return 'info';
|
||||
|
||||
case 'negotiation':
|
||||
return 'warning';
|
||||
|
||||
case 'renewal':
|
||||
return null;
|
||||
}
|
||||
};
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,148 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
|
||||
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" :service="['ProductService']" embedded />
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
|
||||
Tailwind CSS.
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export default {
|
||||
dataview: {
|
||||
content: {
|
||||
class: [
|
||||
'bg-white blue-gray-700 border-0 p-0',
|
||||
'dark:bg-gray-900 dark:text-white/80' // Dark Mode
|
||||
]
|
||||
},
|
||||
grid: 'flex flex-wrap ml-0 mr-0 mt-0 bg-white dark:bg-gray-900',
|
||||
header: 'bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-white/80 border-gray-200 dark:border-blue-900/40 border-t border-b p-4 font-bold'
|
||||
},
|
||||
dataviewlayoutoptions: {
|
||||
listbutton: ({ props }) => ({
|
||||
class: [
|
||||
'items-center cursor-pointer inline-flex overflow-hidden relative select-none text-center align-bottom justify-center border',
|
||||
'transition duration-200',
|
||||
'w-12 pt-3 pb-3 rounded-lg rounded-r-none',
|
||||
props.modelValue === 'list' ? 'bg-blue-500 border-blue-500 text-white dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900' : 'bg-white border-gray-300 text-blue-gray-700 dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80' // highlighted state
|
||||
]
|
||||
}),
|
||||
gridbutton: ({ props }) => ({
|
||||
class: [
|
||||
'items-center cursor-pointer inline-flex overflow-hidden relative select-none text-center align-bottom justify-center border',
|
||||
'transition duration-200',
|
||||
'w-12 pt-3 pb-3 rounded-lg rounded-l-none',
|
||||
props.modelValue === 'grid' ? 'bg-blue-500 border-blue-500 text-white dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900' : 'bg-white border-gray-300 text-blue-gray-700 dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80' // highlighted state
|
||||
]
|
||||
})
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<DataView :value="products" :layout="layout">
|
||||
<template #header>
|
||||
<div class="flex justify-end bg-gray-100 dark:bg-gray-800">
|
||||
<DataViewLayoutOptions v-model="layout" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #list="slotProps">
|
||||
<div class="flex-initial shrink-0 w-full">
|
||||
<div class="flex flex-col xl:flex-row xl:items-start p-4 gap-4 bg-white dark:bg-gray-900">
|
||||
<img class="w-3/4 sm:w-64 xl:w-40 shadow-md block xl:block mx-auto rounded-md " :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.items.image}\`" :alt="slotProps.items.name" />
|
||||
<div class="flex flex-col sm:flex-row justify-between items-center xl:items-start flex-1 gap-4">
|
||||
<div class="flex flex-col items-center sm:items-start gap-3">
|
||||
<div class="text-2xl font-bold text-gray-700 dark:text-white/80">
|
||||
{{ slotProps.items.name }}
|
||||
</div>
|
||||
<Rating :modelValue="slotProps.items.rating" readonly :cancel="false"></Rating>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="flex items-center gap-2">
|
||||
<i class="pi pi-tag text-gray-700 dark:text-white/80"></i>
|
||||
<span class="font-semibold text-gray-700 dark:text-white/80">{{ slotProps.items.category }}</span>
|
||||
</span>
|
||||
<Tag :value="slotProps.items.inventoryStatus" :severity="getSeverity(slotProps.items)"></Tag>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex sm:flex-col items-center sm:align-end gap-3 sm:gap-2">
|
||||
<span class="text-2xl font-semibold text-gray-700 dark:text-white/80">\${{ slotProps.items.price }}</span>
|
||||
<Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.items.inventoryStatus === 'OUTOFSTOCK'"></Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #grid="slotProps">
|
||||
<div class="flex-initial shrink-0 w-full sm:w-1/2 lg:w-full xl:w-1/3 p-2">
|
||||
<div class="p-4 border rounded-md bg-white dark:bg-gray-900 border-gray-300 dark:border-blue-900/40">
|
||||
<div class="flex flex-wrap items-center justify-between gap-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<i class="pi pi-tag text-gray-700 dark:text-white/80"></i>
|
||||
<span class="font-semibold text-gray-700 dark:text-white/80">{{ slotProps.items.category }}</span>
|
||||
</div>
|
||||
<Tag :value="slotProps.items.inventoryStatus" :severity="getSeverity(slotProps.items)"></Tag>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-3 py-5">
|
||||
<img class="w-3/4 shadow-md rounded-md" :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.items.image}\`" :alt="slotProps.items.name" />
|
||||
<div class="text-2xl font-bold text-gray-700 dark:text-white/80">{{ slotProps.items.name }}</div>
|
||||
<Rating :modelValue="slotProps.items.rating" readonly :cancel="false"></Rating>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-2xl font-semibold text-gray-700 dark:text-white/80">\${{ slotProps.items.price }}</span>
|
||||
<Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.items.inventoryStatus === 'OUTOFSTOCK'"></Button>
|
||||
</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, 12)));
|
||||
});
|
||||
|
||||
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>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,137 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
|
||||
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
|
||||
Tailwind CSS.
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export default {
|
||||
dialog: {
|
||||
root: ({ state }) => ({
|
||||
class: [
|
||||
'rounded-lg shadow-lg border-0',
|
||||
'max-h-[90%] transform scale-100',
|
||||
'm-0 w-[50vw]',
|
||||
'dark:border dark:border-blue-900/40',
|
||||
{
|
||||
'transition-none transform-none !w-screen !h-screen !max-h-full !top-0 !left-0': state.maximized
|
||||
}
|
||||
]
|
||||
}),
|
||||
header: {
|
||||
class: ['flex items-center justify-between shrink-0', 'bg-white text-gray-800 border-t-0 rounded-tl-lg rounded-tr-lg p-6', 'dark:bg-gray-900 dark:text-white/80']
|
||||
},
|
||||
headerTitle: {
|
||||
class: 'font-bold text-lg'
|
||||
},
|
||||
headerIcons: {
|
||||
class: 'flex items-center'
|
||||
},
|
||||
closeButton: {
|
||||
class: [
|
||||
'flex items-center justify-center overflow-hidden relative',
|
||||
'w-8 h-8 text-gray-500 border-0 bg-transparent rounded-full transition duration-200 ease-in-out mr-2 last:mr-0',
|
||||
'hover:text-gray-700 hover:border-transparent hover:bg-gray-200',
|
||||
'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]', // focus
|
||||
'dark:hover:text-white/80 dark:hover:border-transparent dark:hover:bg-gray-800/80 dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]'
|
||||
]
|
||||
},
|
||||
closeButtonIcon: {
|
||||
class: 'w-4 h-4 inline-block'
|
||||
},
|
||||
content: ({ state, instance }) => ({
|
||||
class: [
|
||||
'overflow-y-auto',
|
||||
'bg-white text-gray-700 px-6 pb-8 pt-0',
|
||||
,
|
||||
'dark:bg-gray-900 dark:text-white/80',
|
||||
{
|
||||
grow: state.maximized
|
||||
},
|
||||
{
|
||||
'rounded-bl-lg rounded-br-lg': !instance.$slots.footer
|
||||
}
|
||||
]
|
||||
}),
|
||||
footer: {
|
||||
class: ['flex gap-2 shrink-0 justify-end align-center', 'border-t-0 bg-white text-gray-700 px-6 pb-6 text-right rounded-b-lg', 'dark:bg-gray-900 dark:text-white/80']
|
||||
},
|
||||
mask: ({ props }) => ({
|
||||
class: ['transition duration-200', { 'bg-black/40': props.modal }]
|
||||
}),
|
||||
transition: ({ props }) => {
|
||||
return props.position === 'top'
|
||||
? {
|
||||
enterFromClass: 'opacity-0 scale-75 translate-x-0 -translate-y-full translate-z-0',
|
||||
enterActiveClass: 'transition-all duration-200 ease-out',
|
||||
leaveActiveClass: 'transition-all duration-200 ease-out',
|
||||
leaveToClass: 'opacity-0 scale-75 translate-x-0 -translate-y-full translate-z-0'
|
||||
}
|
||||
: props.position === 'bottom'
|
||||
? {
|
||||
enterFromClass: 'opacity-0 scale-75 translate-y-full',
|
||||
enterActiveClass: 'transition-all duration-200 ease-out',
|
||||
leaveActiveClass: 'transition-all duration-200 ease-out',
|
||||
leaveToClass: 'opacity-0 scale-75 translate-x-0 translate-y-full translate-z-0'
|
||||
}
|
||||
: props.position === 'left' || props.position === 'topleft' || props.position === 'bottomleft'
|
||||
? {
|
||||
enterFromClass: 'opacity-0 scale-75 -translate-x-full translate-y-0 translate-z-0',
|
||||
enterActiveClass: 'transition-all duration-200 ease-out',
|
||||
leaveActiveClass: 'transition-all duration-200 ease-out',
|
||||
leaveToClass: 'opacity-0 scale-75 -translate-x-full translate-y-0 translate-z-0'
|
||||
}
|
||||
: props.position === 'right' || props.position === 'topright' || props.position === 'bottomright'
|
||||
? {
|
||||
enterFromClass: 'opacity-0 scale-75 translate-x-full translate-y-0 translate-z-0',
|
||||
enterActiveClass: 'transition-all duration-200 ease-out',
|
||||
leaveActiveClass: 'transition-all duration-200 ease-out',
|
||||
leaveToClass: 'opacity-0 scale-75 opacity-0 scale-75 translate-x-full translate-y-0 translate-z-0'
|
||||
}
|
||||
: {
|
||||
enterFromClass: 'opacity-0 scale-75',
|
||||
enterActiveClass: 'transition-all duration-200 ease-out',
|
||||
leaveActiveClass: 'transition-all duration-200 ease-out',
|
||||
leaveToClass: 'opacity-0 scale-75'
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<Button label="Show" icon="pi pi-external-link" @click="visible = true" />
|
||||
<Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50vw' }">
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -1,86 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
|
||||
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
|
||||
Tailwind CSS.
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export default {
|
||||
divider: {
|
||||
root: ({ props }) => ({
|
||||
class: [
|
||||
'flex relative', // alignments.
|
||||
{
|
||||
'w-full my-5 mx-0 py-0 px-5 before:block before:left-0 before:absolute before:top-1/2 before:w-full before:border-t before:border-gray-300 before:dark:border-blue-900/40': props.layout == 'horizontal', // Padding and borders for horizontal layout.
|
||||
'min-h-full mx-4 md:mx-5 py-5 before:block before:min-h-full before:absolute before:left-1/2 before:top-0 before:transform before:-translate-x-1/2 before:border-l before:border-gray-300 before:dark:border-blue-900/40':
|
||||
props.layout == 'vertical' // Padding and borders for vertical layout.
|
||||
},
|
||||
{
|
||||
'before:border-solid': props.type == 'solid',
|
||||
'before:border-dotted': props.type == 'dotted',
|
||||
'before:border-dashed': props.type == 'dashed'
|
||||
} // Border type condition.
|
||||
]
|
||||
}),
|
||||
content: 'px-1 bg-white z-10 dark:bg-gray-900' // Padding and background color.
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card text-gray-700 dark:text-white/80">
|
||||
<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 align="left" type="solid">
|
||||
<b>Left</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>
|
||||
|
||||
<Divider align="center" type="dotted">
|
||||
<b>Center</b>
|
||||
</Divider>
|
||||
|
||||
<p>
|
||||
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia
|
||||
deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
|
||||
</p>
|
||||
|
||||
<Divider align="right" type="dashed">
|
||||
<b>Right</b>
|
||||
</Divider>
|
||||
|
||||
<p>
|
||||
Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
|
||||
maiores alias consequatur aut perferendis doloribus asperiores repellat. Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien. Morbi dapibus luctus odio.
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,147 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
|
||||
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
|
||||
Tailwind CSS.
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export default {
|
||||
dock: {
|
||||
root: ({ props }) => ({
|
||||
class: [
|
||||
'absolute z-1 flex justify-center items-center pointer-events-none',
|
||||
{
|
||||
'left-0 bottom-0 w-full': props.position == 'bottom',
|
||||
'left-0 top-0 w-full': props.position == 'top',
|
||||
'left-0 top-0 h-full': props.position == 'left',
|
||||
'right-0 top-0 h-full': props.position == 'right'
|
||||
}
|
||||
]
|
||||
}),
|
||||
container: {
|
||||
class: ['flex pointer-events-auto', 'bg-white/10 border-white/20 p-2 border rounded-md']
|
||||
},
|
||||
menu: ({ props }) => ({
|
||||
class: [
|
||||
'm-0 p-0 list-none flex items-center justify-center',
|
||||
'outline-none',
|
||||
{
|
||||
'flex-col': props.position == 'left' || props.position == 'right'
|
||||
}
|
||||
]
|
||||
}),
|
||||
menuitem: ({ props, context, instance }) => ({
|
||||
class: [
|
||||
'p-2 rounded-md',
|
||||
'transition-all duration-200 ease-cubic-bezier-will-change-transform transform ',
|
||||
{
|
||||
'origin-bottom hover:mx-6': props.position == 'bottom',
|
||||
'origin-top hover:mx-6': props.position == 'top',
|
||||
'origin-left hover:my-6': props.position == 'left',
|
||||
'origin-right hover:my-6': props.position == 'right'
|
||||
},
|
||||
{
|
||||
'hover:scale-150': instance.currentIndex === context.index,
|
||||
'scale-125': instance.currentIndex - 1 === context.index || instance.currentIndex + 1 === context.index,
|
||||
'scale-110': instance.currentIndex - 2 === context.index || instance.currentIndex + 2 === context.index
|
||||
}
|
||||
]
|
||||
}),
|
||||
action: {
|
||||
class: ['flex flex-col items-center justify-center relative overflow-hidden cursor-default', 'w-16 h-16']
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card dock-demo">
|
||||
<div class="flex flex-wrap gap-3 mb-5">
|
||||
<div v-for="pos of positions" :key="pos.label" class="flex items-center">
|
||||
<RadioButton v-model="position" :value="pos.value" :inputId="pos.label" name="dock" />
|
||||
<label :for="pos.label" class="text-gray-700 dark:text-white/80 ml-2"> {{ pos.label }} </label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dock-window" style="backgroundimage: 'url(https://primefaces.org/cdn/primevue/images/dock/window.jpg))'">
|
||||
<Dock :model="items" :position="position">
|
||||
<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'
|
||||
}
|
||||
]);
|
||||
const position = ref('bottom');
|
||||
const positions = ref([
|
||||
{
|
||||
label: 'Bottom',
|
||||
value: 'bottom'
|
||||
},
|
||||
{
|
||||
label: 'Top',
|
||||
value: 'top'
|
||||
},
|
||||
{
|
||||
label: 'Left',
|
||||
value: 'left'
|
||||
},
|
||||
{
|
||||
label: 'Right',
|
||||
value: 'right'
|
||||
}
|
||||
]);
|
||||
|
||||
<\/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;
|
||||
}
|
||||
</style>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,125 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
|
||||
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
|
||||
Tailwind CSS.
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export const TRANSITIONS = {
|
||||
overlay: {
|
||||
enterFromClass: 'opacity-0 scale-75',
|
||||
enterActiveClass: 'transition-transform transition-opacity duration-150 ease-in',
|
||||
leaveActiveClass: 'transition-opacity duration-150 ease-linear',
|
||||
leaveToClass: 'opacity-0'
|
||||
}
|
||||
};
|
||||
|
||||
export default {
|
||||
dropdown: {
|
||||
root: ({ props }) => ({
|
||||
class: [
|
||||
'cursor-pointer inline-flex relative select-none',
|
||||
'bg-white border border-gray-400 transition-colors duration-200 ease-in-out rounded-md',
|
||||
'dark:bg-gray-900 dark:border-blue-900/40 dark:hover:border-blue-300',
|
||||
'w-full md:w-56',
|
||||
'hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
|
||||
{ 'opacity-60 select-none pointer-events-none cursor-default': props.disabled }
|
||||
]
|
||||
}),
|
||||
input: ({ props }) => ({
|
||||
class: [
|
||||
'cursor-pointer block flex flex-auto overflow-hidden text-ellipsis whitespace-nowrap relative',
|
||||
'bg-transparent border-0 text-gray-800',
|
||||
'dark:text-white/80',
|
||||
'p-3 transition duration-200 bg-transparent rounded appearance-none font-sans text-base',
|
||||
'focus:outline-none focus:shadow-none',
|
||||
{ 'pr-7': props.showClear }
|
||||
]
|
||||
}),
|
||||
trigger: {
|
||||
class: ['flex items-center justify-center shrink-0', 'bg-transparent text-gray-500 w-12 rounded-tr-lg rounded-br-lg']
|
||||
},
|
||||
wrapper: {
|
||||
class: ['max-h-[200px] overflow-auto', 'bg-white text-gray-700 border-0 rounded-md shadow-lg', 'dark:bg-gray-900 dark:text-white/80']
|
||||
},
|
||||
list: {
|
||||
class: 'py-3 list-none m-0'
|
||||
},
|
||||
item: ({ context }) => ({
|
||||
class: [
|
||||
'cursor-pointer font-normal overflow-hidden relative whitespace-nowrap',
|
||||
'm-0 p-3 border-0 transition-shadow duration-200 rounded-none',
|
||||
{
|
||||
'text-gray-700 hover:text-gray-700 hover:bg-gray-200 dark:text-white/80 dark:hover:bg-gray-800': !context.focused && !context.selected,
|
||||
'bg-gray-300 text-gray-700 dark:text-white/80 dark:bg-gray-800/90 hover:text-gray-700 hover:bg-gray-200 dark:text-white/80 dark:hover:bg-gray-800': context.focused && !context.selected,
|
||||
'bg-blue-100 text-blue-700 dark:bg-blue-400 dark:text-white/80': context.focused && context.selected,
|
||||
'bg-blue-50 text-blue-700 dark:bg-blue-300 dark:text-white/80': !context.focused && context.selected
|
||||
}
|
||||
]
|
||||
}),
|
||||
itemgroup: {
|
||||
class: ['m-0 p-3 text-gray-800 bg-white font-bold', 'dark:bg-gray-900 dark:text-white/80', 'cursor-auto']
|
||||
},
|
||||
header: {
|
||||
class: ['p-3 border-b border-gray-300 text-gray-700 bg-gray-100 mt-0 rounded-tl-lg rounded-tr-lg', 'dark:bg-gray-800 dark:text-white/80 dark:border-blue-900/40']
|
||||
},
|
||||
filtercontainer: {
|
||||
class: 'relative'
|
||||
},
|
||||
filterinput: {
|
||||
class: [
|
||||
'pr-7 -mr-7',
|
||||
'w-full',
|
||||
'font-sans text-base text-gray-700 bg-white py-3 px-3 border border-gray-300 transition duration-200 rounded-lg appearance-none',
|
||||
'dark:bg-gray-900 dark:border-blue-900/40 dark:hover:border-blue-300 dark:text-white/80',
|
||||
'hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]'
|
||||
]
|
||||
},
|
||||
filtericon: {
|
||||
class: '-mt-2 absolute top-1/2'
|
||||
},
|
||||
clearicon: {
|
||||
class: 'text-gray-500 right-12 -mt-2 absolute top-1/2'
|
||||
},
|
||||
transition: TRANSITIONS.overlay
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>List of class names can be found in <PrimeVueNuxtLink to="/dialog/#styled">Dialog</PrimeVueNuxtLink> theming documentation.</p>
|
||||
<p>List of class names can be found in <PrimeVueNuxtLink to="/dialog/#theming.styled">Dialog</PrimeVueNuxtLink> theming documentation.</p>
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,269 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
|
||||
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" :extFiles="extFiles" :service="['ProductService']" embedded />
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
|
||||
Tailwind CSS.
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export default {
|
||||
dialog: {
|
||||
root: ({ state }) => ({
|
||||
class: [
|
||||
'rounded-lg shadow-lg border-0',
|
||||
'max-h-90 transform scale-100',
|
||||
'm-0 w-[50vw]',
|
||||
'dark:border dark:border-blue-900/40',
|
||||
{
|
||||
'transition-none transform-none !w-screen !h-screen !max-h-full !top-0 !left-0': state.maximized
|
||||
}
|
||||
]
|
||||
}),
|
||||
header: {
|
||||
class: ['flex items-center justify-between shrink-0', 'bg-white text-gray-800 border-t-0 rounded-tl-lg rounded-tr-lg p-6', 'dark:bg-gray-900 dark:text-white/80']
|
||||
},
|
||||
headerTitle: 'font-bold text-lg',
|
||||
headerIcons: 'flex items-center',
|
||||
closeButton: {
|
||||
class: [
|
||||
'flex items-center justify-center overflow-hidden relative',
|
||||
'w-8 h-8 text-gray-500 border-0 bg-transparent rounded-full transition duration-200 ease-in-out mr-2 last:mr-0',
|
||||
'hover:text-gray-700 hover:border-transparent hover:bg-gray-200',
|
||||
'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]', // focus
|
||||
'dark:hover:text-white/80 dark:hover:border-transparent dark:hover:bg-gray-800/80 dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]'
|
||||
]
|
||||
},
|
||||
closeButtonIcon: 'w-4 h-4 inline-block',
|
||||
content: ({ state }) => ({
|
||||
class: [
|
||||
'overflow-y-auto',
|
||||
'bg-white text-gray-700 px-6 pb-8 pt-0',
|
||||
'rounded-bl-lg rounded-br-lg',
|
||||
'dark:bg-gray-900 dark:text-white/80 ',
|
||||
{
|
||||
grow: state.maximized
|
||||
}
|
||||
]
|
||||
}),
|
||||
footer: {
|
||||
class: ['shrink-0 ', 'border-t-0 bg-white text-gray-700 px-6 pb-6 text-right rounded-b-lg', 'dark:bg-gray-900 dark:text-white/80']
|
||||
},
|
||||
mask: ({ props }) => ({
|
||||
class: ['transition duration-200', { 'bg-black/40': props.modal }]
|
||||
}),
|
||||
transition: ({ props }) => {
|
||||
return props.position === 'top'
|
||||
? {
|
||||
enterFromClass: 'opacity-0 scale-75 translate-x-0 -translate-y-full translate-z-0',
|
||||
enterActiveClass: 'transition-all duration-200 ease-out',
|
||||
leaveActiveClass: 'transition-all duration-200 ease-out',
|
||||
leaveToClass: 'opacity-0 scale-75 translate-x-0 -translate-y-full translate-z-0'
|
||||
}
|
||||
: props.position === 'bottom'
|
||||
? {
|
||||
enterFromClass: 'opacity-0 scale-75 translate-y-full',
|
||||
enterActiveClass: 'transition-all duration-200 ease-out',
|
||||
leaveActiveClass: 'transition-all duration-200 ease-out',
|
||||
leaveToClass: 'opacity-0 scale-75 translate-x-0 translate-y-full translate-z-0'
|
||||
}
|
||||
: props.position === 'left' || props.position === 'topleft' || props.position === 'bottomleft'
|
||||
? {
|
||||
enterFromClass: 'opacity-0 scale-75 -translate-x-full translate-y-0 translate-z-0',
|
||||
enterActiveClass: 'transition-all duration-200 ease-out',
|
||||
leaveActiveClass: 'transition-all duration-200 ease-out',
|
||||
leaveToClass: 'opacity-0 scale-75 -translate-x-full translate-y-0 translate-z-0'
|
||||
}
|
||||
: props.position === 'right' || props.position === 'topright' || props.position === 'bottomright'
|
||||
? {
|
||||
enterFromClass: 'opacity-0 scale-75 translate-x-full translate-y-0 translate-z-0',
|
||||
enterActiveClass: 'transition-all duration-200 ease-out',
|
||||
leaveActiveClass: 'transition-all duration-200 ease-out',
|
||||
leaveToClass: 'opacity-0 scale-75 opacity-0 scale-75 translate-x-full translate-y-0 translate-z-0'
|
||||
}
|
||||
: {
|
||||
enterFromClass: 'opacity-0 scale-75',
|
||||
enterActiveClass: 'transition-all duration-200 ease-out',
|
||||
leaveActiveClass: 'transition-all duration-200 ease-out',
|
||||
leaveToClass: 'opacity-0 scale-75'
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<Button label="Select a Product" icon="pi pi-search" @click="showProducts" />
|
||||
<Toast />
|
||||
<DynamicDialog />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { markRaw, defineAsyncComponent } from 'vue';
|
||||
import { useDialog } from 'primevue/usedialog';
|
||||
import { useToast } from 'primevue/usetoast';
|
||||
import Button from 'primevue/button';
|
||||
const ProductListDemo = defineAsyncComponent(() => import('./components/ProductListDemo.vue'));
|
||||
const FooterDemo = defineAsyncComponent(() => import('./components/FooterDemo.vue'));
|
||||
|
||||
const dialog = useDialog();
|
||||
const toast = useToast();
|
||||
|
||||
const showProducts = () => {
|
||||
const dialogRef = dialog.open(ProductListDemo, {
|
||||
props: {
|
||||
header: 'Product List',
|
||||
style: {
|
||||
width: '50vw',
|
||||
},
|
||||
breakpoints:{
|
||||
'960px': '75vw',
|
||||
'640px': '90vw'
|
||||
},
|
||||
modal: true
|
||||
},
|
||||
templates: {
|
||||
footer: markRaw(FooterDemo)
|
||||
},
|
||||
onClose: (options) => {
|
||||
const data = options.data;
|
||||
if (data) {
|
||||
const buttonType = data.buttonType;
|
||||
const summary_and_detail = buttonType ? { summary: 'No Product Selected', detail: \`Pressed '\${buttonType}' button\` } : { summary: 'Product Selected', detail: data.name };
|
||||
|
||||
toast.add({ severity:'info', ...summary_and_detail, life: 3000 });
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
<\/script>
|
||||
`
|
||||
},
|
||||
extFiles: {
|
||||
composition: {
|
||||
'src/components/ProductListDemo.vue': {
|
||||
content: `
|
||||
<template>
|
||||
<div>
|
||||
<div class="flex justify-end mt-1 mb-3">
|
||||
<Button icon="pi pi-external-link" label="Nested Dialog" outlined severity="success" @click="showInfo" />
|
||||
</div>
|
||||
<DataTable :value="products">
|
||||
<Column field="code" header="Code"></Column>
|
||||
<Column field="name" header="Name"></Column>
|
||||
<Column header="Image">
|
||||
<template #body="slotProps">
|
||||
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="shadow-2 w-4rem" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="category" header="Category"></Column>
|
||||
<Column field="quantity" header="Quantity"></Column>
|
||||
<Column style="width:5rem">
|
||||
<template #body="slotProps">
|
||||
<Button type="button" icon="pi pi-plus" text rounded @click="selectProduct(slotProps.data)"></Button>
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, inject } from "vue";
|
||||
import { useDialog } from "primevue/usedialog";
|
||||
import { ProductService } from "@/service/ProductService";
|
||||
import InfoDemo from "./InfoDemo.vue";
|
||||
|
||||
const dialogRef = inject("dialogRef");
|
||||
const dialog = useDialog();
|
||||
const products = ref(null);
|
||||
|
||||
onMounted(() => {
|
||||
ProductService
|
||||
.getProductsSmall()
|
||||
.then((data) => (products.value = data.slice(0, 5)));
|
||||
});
|
||||
|
||||
const selectProduct = (data) => {
|
||||
dialogRef.value.close(data);
|
||||
};
|
||||
|
||||
const showInfo = () => {
|
||||
dialog.open(InfoDemo, {
|
||||
props: {
|
||||
header: "Information",
|
||||
modal: true,
|
||||
dismissableMask: true,
|
||||
},
|
||||
data: {
|
||||
totalProducts: products.value ? products.value.length : 0,
|
||||
}
|
||||
});
|
||||
};
|
||||
<\/script>
|
||||
`
|
||||
},
|
||||
'src/components/InfoDemo.vue': {
|
||||
content: `
|
||||
<template>
|
||||
<div>
|
||||
<p>There are <strong>{{totalProducts}}</strong> products in total in this list.</p>
|
||||
<div class="flex justify-end">
|
||||
<Button type="button" label="Close" @click="closeDialog"></Button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, inject } from "vue";
|
||||
|
||||
const totalProducts = ref(0);
|
||||
const dialogRef = inject("dialogRef");
|
||||
|
||||
onMounted(() => {
|
||||
totalProducts.value = dialogRef.value.data.totalProducts;
|
||||
});
|
||||
|
||||
const closeDialog = () => {
|
||||
dialogRef.value.close();
|
||||
};
|
||||
<\/script>
|
||||
`
|
||||
},
|
||||
'src/components/FooterDemo.vue': {
|
||||
content: `
|
||||
<template>
|
||||
<Button type="button" label="No" icon="pi pi-times" @click="closeDialog({ buttonType: 'No' })" text></Button>
|
||||
<Button type="button" label="Yes" icon="pi pi-check" @click="closeDialog({ buttonType: 'Yes' })" autofocus></Button>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { inject } from "vue";
|
||||
|
||||
const dialogRef = inject("dialogRef");
|
||||
|
||||
const closeDialog = (e) => {
|
||||
dialogRef.value.close(e);
|
||||
};
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,52 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
|
||||
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" :dependencies="{ quill: '1.3.7' }" component="Editor" embedded />
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
|
||||
Tailwind CSS.
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export default {
|
||||
editor: {
|
||||
toolbar: {
|
||||
class: ['bg-gray-100 rounded-tr-md rounded-tl-md', 'border border-gray-300 box-border font-sans px-2 py-1']
|
||||
},
|
||||
formats: {
|
||||
class: ['inline-block align-middle', 'mr-4']
|
||||
},
|
||||
header: {
|
||||
class: ['text-gray-700 inline-block float-left text-base font-medium h-6 relative align-middle', 'w-28', 'border-0 text-gray-600']
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<Editor v-model="value" editorStyle="height: 320px" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const value = ref('');
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,85 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
|
||||
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
|
||||
Tailwind CSS.
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export const TRANSITIONS = {
|
||||
toggleable: {
|
||||
enterFromClass: 'max-h-0',
|
||||
enterActiveClass: 'overflow-hidden transition-all duration-500 ease-in-out',
|
||||
enterToClass: 'max-h-40 ',
|
||||
leaveFromClass: 'max-h-40',
|
||||
leaveActiveClass: 'overflow-hidden transition-all duration-500 ease-in',
|
||||
leaveToClass: 'max-h-0'
|
||||
}
|
||||
};
|
||||
|
||||
export default {
|
||||
fieldset: {
|
||||
root: {
|
||||
class: [
|
||||
'border border-gray-300 bg-white text-gray-700 rounded-md block mx-2 my-0.5 pl-4 pr-5 inline-size-min', // Borders, background, text color, spacing, and inline size.
|
||||
'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80' //dark
|
||||
]
|
||||
},
|
||||
legend: ({ props }) => ({
|
||||
class: [
|
||||
'border border-gray-300 text-gray-700 bg-gray-50 font-bold rounded-md',
|
||||
'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80 ', //dark
|
||||
{
|
||||
'p-0 transition-none hover:bg-gray-100 hover:border-gray-300 hover:text-gray-900 dark:hover:text-white/80 dark:hover:bg-gray-800/80 dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]': props.toggleable,
|
||||
'p-5': !props.toggleable
|
||||
}
|
||||
]
|
||||
}),
|
||||
toggler: ({ props }) => ({
|
||||
class: [
|
||||
'flex items-center justify-center',
|
||||
{
|
||||
'p-5 text-gray-700 rounded-md transition-none cursor-pointer overflow-hidden relative select-none hover:text-gray-900 focus:focus:shadow-[inset_0_0_0_0.2rem_rgba(191,219,254,1)] dark:text-white/80 dark:hover:text-white/80 dark:hover:bg-gray-800/60 dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]':
|
||||
props.toggleable
|
||||
}
|
||||
]
|
||||
}),
|
||||
togglerIcon: 'mr-2 inline-block', // Margin and display style.
|
||||
legendTitle: 'flex items-center justify-center leading-none', // alignments, and leading style.
|
||||
content: 'p-5', // Padding.
|
||||
transition: TRANSITIONS.toggleable
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<Fieldset legend="Header" :toggleable="true">
|
||||
<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 setup>
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,76 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
|
||||
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
|
||||
Tailwind CSS.
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export default {
|
||||
fileupload: {
|
||||
input: 'hidden',
|
||||
buttonbar: {
|
||||
class: ['flex flex-wrap', 'bg-gray-50 dark:bg-gray-800 p-5 border border-solid border-gray-300 dark:border-blue-900/40 text-gray-700 dark:text-white/80 rounded-tr-lg rounded-tl-lg gap-2 border-b-0']
|
||||
},
|
||||
chooseButton: {
|
||||
class: ['text-white bg-blue-500 border border-blue-500 p-3 px-5 rounded-md text-base', 'overflow-hidden relative']
|
||||
},
|
||||
chooseIcon: 'mr-2 inline-block',
|
||||
chooseButtonLabel: 'flex-1 font-bold',
|
||||
uploadbutton: {
|
||||
icon: 'mr-2'
|
||||
},
|
||||
cancelbutton: {
|
||||
icon: 'mr-2'
|
||||
},
|
||||
content: {
|
||||
class: ['relative', 'bg-white dark:bg-gray-900 p-8 border border-gray-300 dark:border-blue-900/40 text-gray-700 dark:text-white/80 rounded-b-lg']
|
||||
},
|
||||
file: {
|
||||
class: ['flex items-center flex-wrap', 'p-4 border border-gray-300 dark:border-blue-900/40 rounded gap-2 mb-2', 'last:mb-0']
|
||||
},
|
||||
thumbnail: 'shrink-0',
|
||||
fileName: 'mb-2',
|
||||
fileSize: 'mr-2',
|
||||
uploadicon: 'mr-2'
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<Toast />
|
||||
<FileUpload name="demo[]" url="./upload.php" @upload="onAdvancedUpload($event)" :multiple="true" accept="image/*" :maxFileSize="1000000">
|
||||
<template #empty>
|
||||
<p>Drag and drop files to here to upload.</p>
|
||||
</template>
|
||||
</FileUpload>
|
||||
</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>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,154 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
|
||||
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded :service="['PhotoService']" />
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
|
||||
Tailwind CSS.
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export default {
|
||||
galleria: {
|
||||
root: 'flex flex-col',
|
||||
content: 'flex flex-col',
|
||||
itemwrapper: 'flex flex-col relative',
|
||||
itemcontainer: 'relative flex h-full',
|
||||
item: 'flex justify-center items-center h-full w-full',
|
||||
thumbnailwrapper: 'flex flex-col overflow-auto shrink-0',
|
||||
thumbnailcontainer: {
|
||||
class: ['flex flex-row', 'bg-black/90 p-4']
|
||||
},
|
||||
previousthumbnailbutton: {
|
||||
class: [
|
||||
'self-center flex shrink-0 justify-center items-center overflow-hidden relative',
|
||||
'm-2 bg-transparent text-white w-8 h-8 transition duration-200 ease-in-out rounded-full',
|
||||
'hover:bg-white/10 hover:text-white',
|
||||
'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]'
|
||||
]
|
||||
},
|
||||
thumbnailitemscontainer: 'overflow-hidden w-full',
|
||||
thumbnailitems: 'flex',
|
||||
thumbnailitem: {
|
||||
class: ['overflow-auto flex items-center justify-center cursor-pointer opacity-50', 'flex-1 grow-0 shrink-0 w-20', 'hover:opacity-100 hover:transition-opacity hover:duration-300']
|
||||
},
|
||||
nextthumbnailbutton: {
|
||||
class: [
|
||||
'self-center flex shrink-0 justify-center items-center overflow-hidden relative',
|
||||
'm-2 bg-transparent text-white w-8 h-8 transition duration-200 ease-in-out rounded-full',
|
||||
'hover:bg-white/10 hover:text-white',
|
||||
'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]'
|
||||
]
|
||||
},
|
||||
indicators: {
|
||||
class: ['flex items-center justify-center', 'p-4']
|
||||
},
|
||||
indicator: 'mr-2',
|
||||
indicatorbutton: ({ context }) => ({
|
||||
class: [
|
||||
'w-4 h-4 transition duration-200 rounded-full',
|
||||
'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
|
||||
{
|
||||
'bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600': !context.highlighted,
|
||||
'bg-blue-500 hover:bg-blue-600': context.highlighted
|
||||
}
|
||||
]
|
||||
}),
|
||||
mask: {
|
||||
class: ['fixed top-0 left-0 w-full h-full', 'flex items-center justify-center', 'bg-black bg-opacity-90']
|
||||
},
|
||||
closebutton: {
|
||||
class: [
|
||||
'absolute top-0 right-0 flex justify-center items-center overflow-hidden m-2',
|
||||
'text-white bg-transparent w-12 h-12 rounded-full transition duration-200 ease-in-out',
|
||||
'hover:text-white hover:bg-white/10',
|
||||
'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]'
|
||||
]
|
||||
},
|
||||
closeicon: 'w-6 h-6',
|
||||
previousitembutton: {
|
||||
class: [
|
||||
'inline-flex justify-center items-center overflow-hidden',
|
||||
'bg-transparent text-white w-16 h-16 transition duration-200 ease-in-out rounded-md mx-2',
|
||||
'fixed top-1/2 mt-[-0.5rem]',
|
||||
'left-0',
|
||||
'hover:bg-white/10 hover:text-white',
|
||||
'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]'
|
||||
]
|
||||
},
|
||||
nextitembutton: {
|
||||
class: [
|
||||
'inline-flex justify-center items-center overflow-hidden',
|
||||
'bg-transparent text-white w-16 h-16 transition duration-200 ease-in-out rounded-md mx-2',
|
||||
'fixed top-1/2 mt-[-0.5rem]',
|
||||
'right-0',
|
||||
'hover:bg-white/10 hover:text-white',
|
||||
'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]'
|
||||
]
|
||||
},
|
||||
caption: {
|
||||
class: ['absolute bottom-0 left-0 w-full', 'bg-black/50 text-white p-4']
|
||||
},
|
||||
transition: {
|
||||
enterFromClass: 'opacity-0 scale-75',
|
||||
enterActiveClass: 'transition-all duration-150 ease-in-out',
|
||||
leaveActiveClass: 'transition-all duration-150 ease-in',
|
||||
leaveToClass: 'opacity-0 scale-75'
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card md:flex md:justify-center">
|
||||
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 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: '991px',
|
||||
numVisible: 4
|
||||
},
|
||||
{
|
||||
breakpoint: '767px',
|
||||
numVisible: 3
|
||||
},
|
||||
{
|
||||
breakpoint: '575px',
|
||||
numVisible: 1
|
||||
}
|
||||
]);
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,102 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
|
||||
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
|
||||
Tailwind CSS.
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export default {
|
||||
image: {
|
||||
root: 'relative inline-block',
|
||||
button: {
|
||||
class: [
|
||||
'absolute inset-0 flex items-center justify-center opacity-0 transition-opacity duration-300',
|
||||
'bg-transparent text-gray-100',
|
||||
'hover:opacity-100 hover:cursor-pointer hover:bg-black hover:bg-opacity-50' //Hover
|
||||
]
|
||||
},
|
||||
mask: {
|
||||
class: ['fixed top-0 left-0 w-full h-full', 'flex items-center justify-center', 'bg-black bg-opacity-90']
|
||||
},
|
||||
toolbar: {
|
||||
class: ['absolute top-0 right-0 z-10 flex', 'p-4']
|
||||
},
|
||||
rotaterightbutton: {
|
||||
class: [
|
||||
'flex justify-center items-center',
|
||||
'text-white bg-transparent w-12 h-12 rounded-full transition duration-200 ease-in-out mr-2',
|
||||
'hover:text-white hover:bg-white/10',
|
||||
'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]'
|
||||
]
|
||||
},
|
||||
rotaterighticon: 'w-6 h-6',
|
||||
rotateleftbutton: {
|
||||
class: [
|
||||
'flex justify-center items-center',
|
||||
'text-white bg-transparent w-12 h-12 rounded-full transition duration-200 ease-in-out mr-2',
|
||||
'hover:text-white hover:bg-white/10',
|
||||
'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]'
|
||||
]
|
||||
},
|
||||
rotatelefticon: 'w-6 h-6',
|
||||
zoomoutbutton: {
|
||||
class: [
|
||||
'flex justify-center items-center',
|
||||
'text-white bg-transparent w-12 h-12 rounded-full transition duration-200 ease-in-out mr-2',
|
||||
'hover:text-white hover:bg-white/10',
|
||||
'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]'
|
||||
]
|
||||
},
|
||||
zoomouticon: 'w-6 h-6',
|
||||
zoominbutton: {
|
||||
class: [
|
||||
'flex justify-center items-center',
|
||||
'text-white bg-transparent w-12 h-12 rounded-full transition duration-200 ease-in-out mr-2',
|
||||
'hover:text-white hover:bg-white/10',
|
||||
'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]'
|
||||
]
|
||||
},
|
||||
zoominicon: 'w-6 h-6',
|
||||
closebutton: {
|
||||
class: [
|
||||
'flex justify-center items-center',
|
||||
'text-white bg-transparent w-12 h-12 rounded-full transition duration-200 ease-in-out mr-2',
|
||||
'hover:text-white hover:bg-white/10',
|
||||
'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]'
|
||||
]
|
||||
},
|
||||
closeicon: 'w-6 h-6',
|
||||
transition: {
|
||||
enterFromClass: 'opacity-0 scale-75',
|
||||
enterActiveClass: 'transition-all duration-150 ease-in-out',
|
||||
leaveActiveClass: 'transition-all duration-150 ease-in',
|
||||
leaveToClass: 'opacity-0 scale-75'
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" width="250" preview />
|
||||
</div>
|
||||
</template>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,56 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
|
||||
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
|
||||
Tailwind CSS.
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export default {
|
||||
inlinemessage: {
|
||||
root: ({ props }) => ({
|
||||
class: [
|
||||
'inline-flex items-center justify-center align-top',
|
||||
'p-3 m-0 rounded-md',
|
||||
{
|
||||
'bg-blue-100 border-0 text-blue-700': props.severity == 'info',
|
||||
'bg-green-100 border-0 text-green-700': props.severity == 'success',
|
||||
'bg-orange-100 border-0 text-orange-700': props.severity == 'warn',
|
||||
'bg-red-100 border-0 text-red-700': props.severity == 'error'
|
||||
}
|
||||
]
|
||||
}),
|
||||
icon: 'text-base mr-2'
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex flex-wrap items-center justify-center gap-3">
|
||||
<InlineMessage severity="success">Success Content</InlineMessage>
|
||||
<InlineMessage severity="info">Info Content</InlineMessage>
|
||||
<InlineMessage severity="warn">Warning Content</InlineMessage>
|
||||
<InlineMessage severity="error">Error Content</InlineMessage>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,54 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
|
||||
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
|
||||
Tailwind CSS.
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export default {
|
||||
inplace: {
|
||||
display: {
|
||||
class: ['p-3 rounded-md transition duration-200 text-gray-700 dark:text-white/80', 'inline cursor-pointer', 'hover:bg-gray-200 hover:text-gray-700 dark:hover:bg-gray-800/80 dark:hover:text-white/80']
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<Inplace>
|
||||
<template #display>
|
||||
<span class="text-gray-700 dark:text-white/80"> View Content </span>
|
||||
</template>
|
||||
<template #content>
|
||||
<p class="text-gray-700 dark:text-white/80 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>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,21 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>List of class names used in the styled mode.</p>
|
||||
</DocSectionText>
|
||||
<div class="doc-tablewrapper">
|
||||
<table class="doc-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Element</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>p-inputgroup-addon</td>
|
||||
<td>Input group addon element</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>List of class names used in the styled mode.</p>
|
||||
</DocSectionText>
|
||||
<div class="doc-tablewrapper">
|
||||
<table class="doc-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Element</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>p-inputgroup</td>
|
||||
<td>Input group element</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
|
||||
Tailwind CSS.
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<template>
|
||||
<div class="doc-main">
|
||||
<div class="doc-intro">
|
||||
<h1>InputGroup Theming</h1>
|
||||
</div>
|
||||
<DocSections :docs="docs" />
|
||||
</div>
|
||||
<DocSectionNav :docs="docs" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import InputGroupAddonStyleDoc from './InputGroupAddonStyleDoc.vue';
|
||||
import InputGroupStyleDoc from './InputGroupStyleDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
docs: [
|
||||
{
|
||||
id: 'theming.styled',
|
||||
label: 'Styled',
|
||||
children: [
|
||||
{
|
||||
id: 'theming.inputgroup',
|
||||
label: 'InputGroup',
|
||||
component: InputGroupStyleDoc
|
||||
},
|
||||
{
|
||||
id: 'theming.inputgroupaddon',
|
||||
label: 'InputGroupAddon',
|
||||
component: InputGroupAddonStyleDoc
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'theming.unstyled',
|
||||
label: 'Unstyled',
|
||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||
children: [
|
||||
{
|
||||
id: 'theming.tailwind',
|
||||
label: 'Tailwind',
|
||||
component: TailwindDoc
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,44 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
|
||||
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
|
||||
Tailwind CSS.
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export default {
|
||||
inputmask: {
|
||||
root: 'font-sans text-base text-gray-700 dark:text-white/80 bg-white dark:bg-gray-900 py-3 px-3 border border-gray-300 dark:border-blue-900/40 hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)] transition duration-200 ease-in-out appearance-none rounded-md'
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<InputMask id="basic" v-model="value" mask="99-999999" placeholder="99-999999" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const value = ref(null);
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,85 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
|
||||
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
|
||||
Tailwind CSS.
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export default {
|
||||
inputnumber: {
|
||||
root: 'w-full inline-flex',
|
||||
input: ({ props }) => ({
|
||||
class: [{ 'rounded-tr-none rounded-br-none': props.showButtons && props.buttonLayout == 'stacked' }]
|
||||
}),
|
||||
buttongroup: ({ props }) => ({
|
||||
class: [{ 'flex flex-col': props.showButtons && props.buttonLayout == 'stacked' }]
|
||||
}),
|
||||
incrementbutton: ({ props }) => ({
|
||||
class: [
|
||||
'flex !items-center !justify-center',
|
||||
{
|
||||
'rounded-br-none rounded-bl-none rounded-bl-none !p-0 flex-1 w-[3rem]': props.showButtons && props.buttonLayout == 'stacked'
|
||||
}
|
||||
]
|
||||
}),
|
||||
label: 'hidden',
|
||||
decrementbutton: ({ props }) => ({
|
||||
class: [
|
||||
'flex !items-center !justify-center',
|
||||
{
|
||||
'rounded-tr-none rounded-tl-none rounded-tl-none !p-0 flex-1 w-[3rem]': props.showButtons && props.buttonLayout == 'stacked'
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex flex-wrap">
|
||||
<div class="flex-auto">
|
||||
<label for="integeronly" class="font-bold block mb-2 text-gray-700 dark:text-white/80"> Integer Only </label>
|
||||
<InputNumber v-model="value1" inputId="integeronly" />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="withoutgrouping" class="font-bold block mb-2 text-gray-700 dark:text-white/80"> Without Grouping </label>
|
||||
<InputNumber v-model="value2" inputId="withoutgrouping" :useGrouping="false" />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="minmaxfraction" class="font-bold block mb-2 text-gray-700 dark:text-white/80"> Min-Max Fraction Digits </label>
|
||||
<InputNumber v-model="value3" inputId="minmaxfraction" :minFractionDigits="2" :maxFractionDigits="5" />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="minmax" class="font-bold block mb-2 text-gray-700 dark:text-white/80"> Min-Max Boundaries </label>
|
||||
<InputNumber v-model="value4" inputId="minmax" :min="0" :max="100" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const value1 = ref(42723);
|
||||
const value2 = ref(58151);
|
||||
const value3 = ref(2351.35);
|
||||
const value4 = ref(50);
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,64 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
|
||||
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
|
||||
Tailwind CSS.
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export default {
|
||||
inputswitch: {
|
||||
root: ({ props }) => ({
|
||||
class: [
|
||||
'inline-block relative',
|
||||
'w-12 h-7',
|
||||
{
|
||||
'opacity-60 select-none pointer-events-none cursor-default': props.disabled
|
||||
}
|
||||
]
|
||||
}),
|
||||
slider: ({ props }) => ({
|
||||
class: [
|
||||
'absolute cursor-pointer top-0 left-0 right-0 bottom-0 border border-transparent',
|
||||
'transition-colors duration-200 rounded-2xl',
|
||||
'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
|
||||
"before:absolute before:content-'' before:top-1/2 before:bg-white before:dark:bg-gray-900 before:w-5 before:h-5 before:left-1 before:-mt-2.5 before:rounded-full before:transition-duration-200",
|
||||
{
|
||||
'bg-gray-200 dark:bg-gray-800 hover:bg-gray-300 hover:dark:bg-gray-700 ': !props.modelValue,
|
||||
'bg-blue-500 before:transform before:translate-x-5': props.modelValue
|
||||
}
|
||||
]
|
||||
})
|
||||
},
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<InputSwitch v-model="checked" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const checked = ref(false);
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,58 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
|
||||
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
|
||||
Tailwind CSS.
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export default {
|
||||
inputtext: {
|
||||
root: ({ props, context }) => ({
|
||||
class: [
|
||||
'm-0',
|
||||
'font-sans text-gray-600 dark:text-white/80 bg-white dark:bg-gray-900 border border-gray-300 dark:border-blue-900/40 transition-colors duration-200 appearance-none rounded-lg',
|
||||
{
|
||||
'hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]': !context.disabled,
|
||||
'opacity-60 select-none pointer-events-none cursor-default': context.disabled
|
||||
},
|
||||
{
|
||||
'text-lg px-4 py-4': props.size == 'large',
|
||||
'text-xs px-2 py-2': props.size == 'small',
|
||||
'p-3 text-base': props.size == null
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<InputText type="text" v-model="value" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const value = ref(null);
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,54 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
|
||||
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
|
||||
Tailwind CSS.
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export default {
|
||||
knob: {
|
||||
root: ({ props }) => ({
|
||||
class: [
|
||||
'focus:outline-none focus:outline-offset-0 focus:shadow-0',
|
||||
{
|
||||
'opacity-60 select-none pointer-events-none cursor-default': props.disabled
|
||||
}
|
||||
]
|
||||
}),
|
||||
range: 'stroke-current transition duration-100 ease-in stroke-gray-200 dark:stroke-gray-700 fill-none',
|
||||
value: 'animate-dash-frame stroke-blue-500 fill-none',
|
||||
label: 'text-center text-xl'
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<Knob v-model="value" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const value = ref(0);
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,92 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
|
||||
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
|
||||
Tailwind CSS.
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export default {
|
||||
listbox: {
|
||||
root: {
|
||||
class: ['bg-white dark:bg-gray-900 border border-gray-400 dark:border-blue-900/40 transition-colors duration-200 ease-in-out rounded-md', 'w-full md:w-56']
|
||||
},
|
||||
wrapper: {
|
||||
class: 'overflow-auto'
|
||||
},
|
||||
list: {
|
||||
class: 'py-3 list-none m-0'
|
||||
},
|
||||
item: ({ context }) => ({
|
||||
class: [
|
||||
'cursor-pointer font-normal overflow-hidden relative whitespace-nowrap',
|
||||
'm-0 p-3 border-0 transition-shadow duration-200 rounded-none',
|
||||
{
|
||||
'text-gray-700 hover:text-gray-700 hover:bg-gray-200 dark:text-white/80 dark:hover:bg-gray-800': !context.focused && !context.selected,
|
||||
'bg-gray-300 text-gray-700 dark:text-white/80 dark:bg-gray-800/90 hover:text-gray-700 hover:bg-gray-200 dark:text-white/80 dark:hover:bg-gray-800': context.focused && !context.selected,
|
||||
'bg-blue-100 text-blue-700 dark:bg-blue-400 dark:text-white/80': context.focused && context.selected,
|
||||
'bg-blue-50 text-blue-700 dark:bg-blue-300 dark:text-white/80': !context.focused && context.selected
|
||||
}
|
||||
]
|
||||
}),
|
||||
itemgroup: {
|
||||
class: ['m-0 p-3 text-gray-800 bg-white font-bold', 'dark:bg-gray-900 dark:text-white/80', 'cursor-auto']
|
||||
},
|
||||
header: {
|
||||
class: ['p-3 border-b border-gray-300 text-gray-700 bg-gray-100 mt-0 rounded-tl-lg rounded-tr-lg', 'dark:bg-gray-800 dark:text-white/80 dark:border-blue-900/40']
|
||||
},
|
||||
filtercontainer: {
|
||||
class: 'relative'
|
||||
},
|
||||
filterinput: {
|
||||
class: [
|
||||
'pr-7 -mr-7',
|
||||
'w-full',
|
||||
'font-sans text-base text-gray-700 bg-white py-3 px-3 border border-gray-300 transition duration-200 rounded-lg appearance-none',
|
||||
'dark:bg-gray-900 dark:border-blue-900/40 dark:hover:border-blue-300 dark:text-white/80',
|
||||
'hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]'
|
||||
]
|
||||
},
|
||||
filtericon: {
|
||||
class: '-mt-2 absolute top-1/2'
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<Listbox v-model="selectedCity" :options="cities" optionLabel="name" class="w-full md:w-14rem" />
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -1,220 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
|
||||
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
|
||||
Tailwind CSS.
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export default {
|
||||
megamenu: {
|
||||
root: ({ props }) => ({
|
||||
class: ['bg-gray-100 dark:bg-gray-900 border border-gray-300 dark:border-blue-900/40 rounded-md', 'flex relative', { 'p-2 items-center': props.orientation == 'horizontal', 'flex-col w-48 p-0 py-1': props.orientation !== 'horizontal' }]
|
||||
}),
|
||||
menu: {
|
||||
class: ['m-0 sm:p-0 list-none relative', 'outline-none', 'flex items-center flex-wrap flex-row top-auto left-auto relative bg-transparent shadow-none w-auto']
|
||||
},
|
||||
menuitem: ({ props }) => ({
|
||||
class: [
|
||||
'relative',
|
||||
{
|
||||
'w-auto': props.horizontal,
|
||||
'w-full': !props.horizontal
|
||||
}
|
||||
]
|
||||
}),
|
||||
content: ({ props, context }) => ({
|
||||
class: [
|
||||
'transition-shadow duration-200',
|
||||
{ 'rounded-md': props.level < 1 && props.horizontal },
|
||||
{
|
||||
'text-gray-700 dark:text-white/80': !context.focused && !context.active,
|
||||
'bg-gray-300 text-gray-700 dark:text-white/80 dark:bg-gray-800/90': context.focused && !context.active,
|
||||
'bg-blue-100 text-blue-700 dark:bg-blue-400 dark:text-white/80': context.focused && context.active,
|
||||
'bg-blue-50 text-blue-700 dark:bg-blue-300 dark:text-white/80': !context.focused && context.active
|
||||
},
|
||||
{
|
||||
'hover:text-gray-700 dark:hover:text-white/80 hover:bg-gray-200 dark:hover:bg-gray-800/80': !context.active,
|
||||
'hover:bg-blue-200 dark:hover:bg-blue-500': context.active
|
||||
}
|
||||
]
|
||||
}),
|
||||
action: {
|
||||
class: ['select-none', 'cursor-pointer flex items-center no-underline overflow-hidden relative', 'py-3 px-5 select-none']
|
||||
},
|
||||
icon: {
|
||||
class: 'mr-2'
|
||||
},
|
||||
submenuicon: ({ props }) => ({
|
||||
class: [
|
||||
{
|
||||
'ml-2': props.horizontal,
|
||||
'ml-auto': !props.horizontal
|
||||
}
|
||||
]
|
||||
}),
|
||||
panel: ({ props }) => ({
|
||||
class: [
|
||||
'py-1 bg-white dark:bg-gray-900 border-0 shadow-md w-auto',
|
||||
'absolute z-10',
|
||||
{
|
||||
'left-full top-0': !props.horizontal
|
||||
}
|
||||
]
|
||||
}),
|
||||
grid: 'flex',
|
||||
column: 'w-1/2',
|
||||
submenu: {
|
||||
class: ['m-0 list-none', 'py-1 w-48']
|
||||
},
|
||||
submenuheader: {
|
||||
class: ['m-0 py-3 px-5 text-gray-700 dark:text-white/80 bg-white dark:bg-gray-900 font-semibold rounded-tr-md rounded-tl-md']
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<MegaMenu :model="items" />
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -1,76 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
|
||||
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
|
||||
Tailwind CSS.
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export const TRANSITIONS = {
|
||||
overlay: {
|
||||
enterFromClass: 'opacity-0 scale-75',
|
||||
enterActiveClass: 'transition-transform transition-opacity duration-150 ease-in',
|
||||
leaveActiveClass: 'transition-opacity duration-150 ease-linear',
|
||||
leaveToClass: 'opacity-0'
|
||||
}
|
||||
};
|
||||
|
||||
export default {
|
||||
menu: {
|
||||
root: 'py-1 bg-white dark:bg-gray-900 text-gray-700 dark:text-white/80 border border-gray-300 dark:border-blue-900/40 rounded-md w-48',
|
||||
menu: {
|
||||
class: ['m-0 p-0 list-none', 'outline-none']
|
||||
},
|
||||
content: ({ context }) => ({
|
||||
class: [
|
||||
'text-gray-700 dark:text-white/80 transition-shadow duration-200 rounded-none',
|
||||
'hover:text-gray-700 dark:hover:text-white/80 hover:bg-gray-200 dark:hover:bg-gray-800/80', // Hover
|
||||
{
|
||||
'bg-gray-300 text-gray-700 dark:text-white/80 dark:bg-gray-800/90': context.focused
|
||||
}
|
||||
]
|
||||
}),
|
||||
action: {
|
||||
class: ['text-gray-700 dark:text-white/80 py-3 px-5 select-none', 'cursor-pointer flex items-center no-underline overflow-hidden relative']
|
||||
},
|
||||
icon: 'text-gray-600 dark:text-white/70 mr-2',
|
||||
submenuheader: {
|
||||
class: ['m-0 p-3 text-gray-700 dark:text-white/80 bg-white dark:bg-gray-900 font-bold rounded-tl-none rounded-tr-none']
|
||||
},
|
||||
transition: TRANSITIONS.overlay
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<Menu :model="items" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const items = ref([
|
||||
{ label: 'New', icon: 'pi pi-fw pi-plus' },
|
||||
{ label: 'Delete', icon: 'pi pi-fw pi-trash' }
|
||||
]);
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,245 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
|
||||
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
|
||||
Tailwind CSS.
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export default {
|
||||
menubar: {
|
||||
root: {
|
||||
class: ['p-2 bg-gray-100 dark:bg-gray-900 border border-gray-300 dark:border-blue-900/40 rounded-md', 'flex items-center relative']
|
||||
},
|
||||
menu: ({ props }) => ({
|
||||
class: [
|
||||
'm-0 sm:p-0 list-none',
|
||||
'outline-none',
|
||||
'sm:flex items-center flex-wrap sm:flex-row sm:top-auto sm:left-auto sm:relative sm:bg-transparent sm:shadow-none sm:w-auto',
|
||||
'flex-col top-full left-0',
|
||||
'absolute py-1 bg-white dark:bg-gray-900 border-0 shadow-md w-full',
|
||||
{
|
||||
'hidden ': !props?.mobileActive,
|
||||
'flex ': props?.mobileActive
|
||||
}
|
||||
]
|
||||
}),
|
||||
menuitem: {
|
||||
class: 'sm:relative sm:w-auto w-full static'
|
||||
},
|
||||
content: ({ props, context }) => ({
|
||||
class: [
|
||||
' transition-shadow duration-200',
|
||||
'',
|
||||
{ 'rounded-md': props.root },
|
||||
{
|
||||
'text-gray-700 dark:text-white/80': !context.focused && !context.active,
|
||||
'bg-gray-300 text-gray-700 dark:text-white/80 dark:bg-gray-800/90': context.focused && !context.active,
|
||||
'bg-blue-100 text-blue-700 dark:bg-blue-400 dark:text-white/80': context.focused && context.active,
|
||||
'bg-blue-50 text-blue-700 dark:bg-blue-300 dark:text-white/80': !context.focused && context.active
|
||||
},
|
||||
{
|
||||
'hover:text-gray-700 dark:hover:text-white/80 hover:bg-gray-200 dark:hover:bg-gray-800/80': !context.active,
|
||||
'hover:bg-blue-200 dark:hover:bg-blue-500': context.active
|
||||
}
|
||||
]
|
||||
}),
|
||||
action: ({ context }) => ({
|
||||
class: [
|
||||
'select-none',
|
||||
'cursor-pointer flex items-center no-underline overflow-hidden relative',
|
||||
'py-3 px-5 select-none',
|
||||
{
|
||||
'pl-9 sm:pl-5': context.level === 1,
|
||||
'pl-14 sm:pl-5': context.level === 2
|
||||
}
|
||||
]
|
||||
}),
|
||||
icon: {
|
||||
class: 'mr-2'
|
||||
},
|
||||
submenuicon: ({ props }) => ({
|
||||
class: [
|
||||
{
|
||||
'ml-auto sm:ml-2': props.root,
|
||||
'ml-auto': !props.root
|
||||
}
|
||||
]
|
||||
}),
|
||||
submenu: ({ props }) => ({
|
||||
class: [
|
||||
'py-1 bg-white dark:bg-gray-900 border-0 sm:shadow-md sm:w-48',
|
||||
'w-full static shadow-none',
|
||||
'sm:absolute z-10',
|
||||
'm-0 list-none',
|
||||
{
|
||||
'sm:absolute sm:left-full sm:top-0': props.level > 1
|
||||
}
|
||||
]
|
||||
}),
|
||||
separator: {
|
||||
class: 'border-t border-gray-300 dark:border-blue-900/40 my-1'
|
||||
},
|
||||
button: {
|
||||
class: [
|
||||
'flex sm:hidden w-8 h-8 rounded-full text-gray-600 dark:text-white/80 transition duration-200 ease-in-out',
|
||||
'cursor-pointer flex items-center justify-center no-underline',
|
||||
'hover:text-gray-700 dark:hover:text-white/80 hover:bg-gray-200 dark:hover:bg-gray-800/80 ',
|
||||
'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]'
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card relative z-2">
|
||||
<Menubar :model="items" />
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -1,69 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
|
||||
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
|
||||
Tailwind CSS.
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export default {
|
||||
message: {
|
||||
root: ({ props }) => ({
|
||||
class: [
|
||||
'my-4 rounded-md',
|
||||
{
|
||||
'bg-blue-100 border-solid border-0 border-l-4 border-blue-500 text-blue-700': props.severity == 'info',
|
||||
'bg-green-100 border-solid border-0 border-l-4 border-green-500 text-green-700': props.severity == 'success',
|
||||
'bg-orange-100 border-solid border-0 border-l-4 border-orange-500 text-orange-700': props.severity == 'warn',
|
||||
'bg-red-100 border-solid border-0 border-l-4 border-red-500 text-red-700': props.severity == 'error'
|
||||
}
|
||||
]
|
||||
}),
|
||||
wrapper: 'flex items-center py-5 px-7',
|
||||
icon: {
|
||||
class: ['w-6 h-6', 'text-lg mr-2']
|
||||
},
|
||||
text: 'text-base font-normal',
|
||||
button: {
|
||||
class: ['w-8 h-8 rounded-full bg-transparent transition duration-200 ease-in-out', 'ml-auto overflow-hidden relative', 'flex items-center justify-center', 'hover:bg-white/30']
|
||||
},
|
||||
transition: {
|
||||
enterFromClass: 'opacity-0',
|
||||
enterActiveClass: 'transition-opacity duration-300',
|
||||
leaveFromClass: 'max-h-40',
|
||||
leaveActiveClass: 'overflow-hidden transition-all duration-300 ease-in',
|
||||
leaveToClass: 'max-h-0 opacity-0 !m-0'
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<Message severity="success">Success Message Content</Message>
|
||||
<Message severity="info">Info Message Content</Message>
|
||||
<Message severity="warn">Warning Message Content</Message>
|
||||
<Message severity="error">Error Message Content</Message>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,183 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
|
||||
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
|
||||
Tailwind CSS.
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export const TRANSITIONS = {
|
||||
overlay: {
|
||||
enterFromClass: 'opacity-0 scale-75',
|
||||
enterActiveClass: 'transition-transform transition-opacity duration-150 ease-in',
|
||||
leaveActiveClass: 'transition-opacity duration-150 ease-linear',
|
||||
leaveToClass: 'opacity-0'
|
||||
}
|
||||
};
|
||||
|
||||
export default {
|
||||
multiselect: {
|
||||
root: ({ props }) => ({
|
||||
class: [
|
||||
'inline-flex cursor-pointer select-none',
|
||||
'bg-white dark:bg-gray-900 border border-gray-400 dark:border-blue-900/40 transition-colors duration-200 ease-in-out rounded-md',
|
||||
'w-full md:w-80',
|
||||
{ 'opacity-60 select-none pointer-events-none cursor-default': props?.disabled }
|
||||
]
|
||||
}),
|
||||
labelContainer: {
|
||||
class: 'overflow-hidden flex flex-auto cursor-pointer'
|
||||
},
|
||||
label: ({ props }) => ({
|
||||
class: [
|
||||
'block overflow-hidden whitespace-nowrap cursor-pointer text-ellipsis',
|
||||
'text-gray-800 dark:text-white/80',
|
||||
'p-3 transition duration-200',
|
||||
{
|
||||
'!p-3': props.display !== 'chip' && (props?.modelValue == null || props?.modelValue == undefined),
|
||||
'!py-1.5 px-3': props.display == 'chip' && props?.modelValue !== null,
|
||||
'!p-3': props.display == 'chip' && props?.modelValue == null
|
||||
}
|
||||
]
|
||||
}),
|
||||
token: {
|
||||
class: ['py-1 px-2 mr-2 bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-white/80 rounded-full', 'cursor-default inline-flex items-center']
|
||||
},
|
||||
removeTokenIcon: {
|
||||
class: 'ml-2'
|
||||
},
|
||||
trigger: {
|
||||
class: ['flex items-center justify-center shrink-0', 'bg-transparent text-gray-600 dark:text-white/70 w-12 rounded-tr-lg rounded-br-lg']
|
||||
},
|
||||
panel: {
|
||||
class: ['bg-white dark:bg-gray-900 text-gray-700 dark:text-white/80 border-0 rounded-md shadow-lg']
|
||||
},
|
||||
header: {
|
||||
class: ['p-3 border-b border-gray-300 dark:border-blue-900/40 text-gray-700 dark:text-white/80 bg-gray-100 dark:bg-gray-800 rounded-t-lg', 'flex items-center justify-between']
|
||||
},
|
||||
headerCheckboxContainer: {
|
||||
class: ['inline-flex cursor-pointer select-none align-bottom relative', 'mr-2', 'w-6 h-6']
|
||||
},
|
||||
headerCheckbox: ({ context }) => ({
|
||||
class: [
|
||||
'flex items-center justify-center',
|
||||
'border-2 w-6 h-6 text-gray-600 dark:text-white/70 rounded-lg transition-colors duration-200',
|
||||
'hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
|
||||
{
|
||||
'border-gray-300 dark:border-blue-900/40 bg-white dark:bg-gray-900': !context?.selected,
|
||||
'border-blue-500 bg-blue-500': context?.selected
|
||||
}
|
||||
]
|
||||
}),
|
||||
headercheckboxicon: {
|
||||
class: 'w-4 h-4 transition-all duration-200 text-white text-base'
|
||||
},
|
||||
closeButton: {
|
||||
class: [
|
||||
'flex items-center justify-center overflow-hidden relative',
|
||||
'w-8 h-8 text-gray-500 dark:text-white/70 border-0 bg-transparent rounded-full transition duration-200 ease-in-out mr-2 last:mr-0',
|
||||
'hover:text-gray-700 dark:hover:text-white/80 hover:border-transparent hover:bg-gray-200 dark:hover:bg-gray-800/80 ',
|
||||
'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]'
|
||||
]
|
||||
},
|
||||
closeButtonIcon: {
|
||||
class: 'w-4 h-4 inline-block'
|
||||
},
|
||||
wrapper: {
|
||||
class: ['max-h-[200px] overflow-auto', 'bg-white text-gray-700 border-0 rounded-md shadow-lg', 'dark:bg-gray-900 dark:text-white/80']
|
||||
},
|
||||
list: {
|
||||
class: 'py-3 list-none m-0'
|
||||
},
|
||||
item: ({ context }) => ({
|
||||
class: [
|
||||
'cursor-pointer font-normal overflow-hidden relative whitespace-nowrap',
|
||||
'm-0 p-3 border-0 transition-shadow duration-200 rounded-none',
|
||||
{
|
||||
'text-gray-700 hover:text-gray-700 hover:bg-gray-200 dark:text-white/80 dark:hover:bg-gray-800': !context.focused && !context.selected,
|
||||
'bg-gray-300 text-gray-700 dark:text-white/80 dark:bg-gray-800/90 hover:text-gray-700 hover:bg-gray-200 dark:text-white/80 dark:hover:bg-gray-800': context.focused && !context.selected,
|
||||
'bg-blue-100 text-blue-700 dark:bg-blue-400 dark:text-white/80': context.focused && context.selected,
|
||||
'bg-blue-50 text-blue-700 dark:bg-blue-300 dark:text-white/80': !context.focused && context.selected
|
||||
}
|
||||
]
|
||||
}),
|
||||
checkboxContainer: {
|
||||
class: ['inline-flex cursor-pointer select-none align-bottom relative', 'mr-2', 'w-6 h-6']
|
||||
},
|
||||
checkbox: ({ context }) => ({
|
||||
class: [
|
||||
'flex items-center justify-center',
|
||||
'border-2 w-6 h-6 text-gray-600 dark:text-white/80 rounded-lg transition-colors duration-200',
|
||||
'hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
|
||||
{
|
||||
'border-gray-300 dark:border-blue-900/40 bg-white dark:bg-gray-900': !context?.selected,
|
||||
'border-blue-500 bg-blue-500': context?.selected
|
||||
}
|
||||
]
|
||||
}),
|
||||
checkboxicon: {
|
||||
class: 'w-4 h-4 transition-all duration-200 text-white text-base'
|
||||
},
|
||||
itemgroup: {
|
||||
class: ['m-0 p-3 text-gray-800 bg-white font-bold', 'dark:bg-gray-900 dark:text-white/80', 'cursor-auto']
|
||||
},
|
||||
filtercontainer: {
|
||||
class: 'relative'
|
||||
},
|
||||
filterinput: {
|
||||
class: [
|
||||
'pr-7 -mr-7',
|
||||
'w-full',
|
||||
'font-sans text-base text-gray-700 bg-white py-3 px-3 border border-gray-300 transition duration-200 rounded-lg appearance-none',
|
||||
'dark:bg-gray-900 dark:border-blue-900/40 dark:hover:border-blue-300 dark:text-white/80',
|
||||
'hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]'
|
||||
]
|
||||
},
|
||||
filtericon: {
|
||||
class: '-mt-2 absolute top-1/2'
|
||||
},
|
||||
clearicon: {
|
||||
class: 'text-gray-500 right-12 -mt-2 absolute top-1/2'
|
||||
},
|
||||
transition: TRANSITIONS.overlay
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" placeholder="Select Cities"
|
||||
:maxSelectedLabels="3" class="w-full md:w-20rem" />
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -1,155 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
|
||||
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" :service="['ProductService']" embedded />
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
|
||||
Tailwind CSS.
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export default {
|
||||
orderlist: {
|
||||
root: 'flex',
|
||||
controls: 'flex flex-col justify-center p-5',
|
||||
moveupbutton: {
|
||||
root: ({ context }) => ({
|
||||
class: [
|
||||
'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
|
||||
'text-white bg-blue-500 border border-blue-500 rounded-md',
|
||||
'transition duration-200 ease-in-out',
|
||||
'justify-center px-0 py-3', // icon only
|
||||
'mb-2', // orderlist button
|
||||
'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
|
||||
{
|
||||
'cursor-default pointer-events-none opacity-60': context.disabled
|
||||
}
|
||||
]
|
||||
}),
|
||||
label: 'flex-initial w-0'
|
||||
},
|
||||
movetopbutton: {
|
||||
root: ({ context }) => ({
|
||||
class: [
|
||||
'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
|
||||
'text-white bg-blue-500 border border-blue-500 rounded-md',
|
||||
'transition duration-200 ease-in-out',
|
||||
'justify-center px-0 py-3', // icon only
|
||||
'mb-2', // orderlist button
|
||||
'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
|
||||
{
|
||||
'cursor-default pointer-events-none opacity-60': context.disabled
|
||||
}
|
||||
]
|
||||
}),
|
||||
label: 'flex-initial w-0'
|
||||
},
|
||||
movedownbutton: {
|
||||
root: ({ context }) => ({
|
||||
class: [
|
||||
'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
|
||||
'text-white bg-blue-500 border border-blue-500 rounded-md',
|
||||
'transition duration-200 ease-in-out',
|
||||
'justify-center px-0 py-3', // icon only
|
||||
'mb-2', // orderlist button
|
||||
'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
|
||||
{
|
||||
'cursor-default pointer-events-none opacity-60': context.disabled
|
||||
}
|
||||
]
|
||||
}),
|
||||
label: 'flex-initial w-0'
|
||||
},
|
||||
movebottombutton: {
|
||||
root: ({ context }) => ({
|
||||
class: [
|
||||
'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
|
||||
'text-white bg-blue-500 border border-blue-500 rounded-md',
|
||||
'transition duration-200 ease-in-out',
|
||||
'justify-center px-0 py-3', // icon only
|
||||
'mb-2', // orderlist button
|
||||
'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
|
||||
{
|
||||
'cursor-default pointer-events-none opacity-60': context.disabled
|
||||
}
|
||||
]
|
||||
}),
|
||||
label: 'flex-initial w-0'
|
||||
},
|
||||
container: 'flex-auto',
|
||||
header: {
|
||||
class: [
|
||||
'bg-slate-50 text-slate-700 border border-gray-300 p-5 font-bold border-b-0 rounded-t-md',
|
||||
'dark:bg-gray-900 dark:text-white/80 dark:border-blue-900/40' //Dark Mode
|
||||
]
|
||||
},
|
||||
list: {
|
||||
class: [
|
||||
'list-none m-0 p-0 overflow-auto min-h-[12rem] max-h-[24rem]',
|
||||
'border border-gray-300 bg-white text-gray-600 py-3 px-0 rounded-b-md outline-none',
|
||||
'dark:border-blue-900/40 dark:bg-gray-900 dark:text-white/80' //Dark Mode
|
||||
]
|
||||
},
|
||||
item: ({ context }) => ({
|
||||
class: [
|
||||
'relative cursor-pointer overflow-hidden',
|
||||
'py-3 px-5 m-0 border-none text-gray-600 dark:text-white/80',
|
||||
'transition duration-200',
|
||||
{
|
||||
'text-blue-700 bg-blue-500/20 dark:bg-blue-300/20': context.active && !context.focused,
|
||||
'text-blue-700 bg-blue-500/30 dark:bg-blue-300/30': context.active && context.focused,
|
||||
'text-gray-600 bg-gray-300 dark:bg-blue-900/40': !context.active && context.focused
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card xl:flex xl:justify-center">
|
||||
<OrderList v-model="products" listStyle="height:auto" dataKey="id">
|
||||
<template #header> List of Products </template>
|
||||
<template #item="slotProps">
|
||||
<div class="flex flex-wrap p-2 items-center gap-3">
|
||||
<img class="w-16 shadow-md shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
|
||||
<div class="flex-1 flex flex-col gap-2">
|
||||
<span class="font-bold text-gray-700 dark:text-white/80">{{ slotProps.item.name }}</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<i class="pi pi-tag text-sm text-gray-700 dark:text-white/80"></i>
|
||||
<span class="text-gray-700 dark:text-white/80">{{ slotProps.item.category }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="font-bold text-gray-700 dark:text-white/80">$ {{ 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) => (products.value = data));
|
||||
});
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,141 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
|
||||
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
|
||||
Tailwind CSS.
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export default {
|
||||
organizationchart: {
|
||||
table: 'mx-auto my-0 border-spacing-0 border-separate',
|
||||
cell: 'text-center align-top py-0 px-3',
|
||||
node: {
|
||||
class: [
|
||||
'relative inline-block bg-white border border-gray-300 text-gray-600 p-5',
|
||||
'dark:border-blue-900/40 dark:bg-gray-900 dark:text-white/80' // Dark Mode
|
||||
]
|
||||
},
|
||||
linecell: 'text-center align-top py-0 px-3',
|
||||
linedown: {
|
||||
class: [
|
||||
'mx-auto my-0 w-px h-[20px] bg-gray-300',
|
||||
'dark:bg-blue-900/40' //Dark Mode
|
||||
]
|
||||
},
|
||||
lineleft: ({ context }) => ({
|
||||
class: [
|
||||
'text-center align-top py-0 px-3 rounded-none border-r border-gray-300',
|
||||
'dark:border-blue-900/40', //Dark Mode
|
||||
{
|
||||
'border-t': context.lineTop
|
||||
}
|
||||
]
|
||||
}),
|
||||
lineright: ({ context }) => ({
|
||||
class: [
|
||||
'text-center align-top py-0 px-3 rounded-none',
|
||||
'dark:border-blue-900/40', //Dark Mode
|
||||
{
|
||||
'border-t border-gray-300': context.lineTop
|
||||
}
|
||||
]
|
||||
}),
|
||||
nodecell: 'text-center align-top py-0 px-3',
|
||||
nodetoggler: {
|
||||
class: [
|
||||
'absolute bottom-[-0.75rem] left-2/4 -ml-3 w-6 h-6 bg-inherit text-inherit rounded-full z-2 cursor-pointer no-underline select-none',
|
||||
'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]' // Focus styles
|
||||
]
|
||||
},
|
||||
nodetogglericon: 'relative inline-block w-4 h-4'
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card overflow-x-auto">
|
||||
<OrganizationChart :value="data" collapsible>
|
||||
<template #country="slotProps">
|
||||
<div class="flex flex-col items-center">
|
||||
<img :alt="slotProps.node.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`w-8 shadow-md flag flag-\${slotProps.node.data}\`" />
|
||||
<div class="mt-3 font-medium text-lg">{{ slotProps.node.label }}</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #default="slotProps">
|
||||
<span>{{slotProps.node.data.label}}</span>
|
||||
</template>
|
||||
</OrganizationChart>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const data = ref({
|
||||
key: '0',
|
||||
type: 'country',
|
||||
label: 'Argentina',
|
||||
data: 'ar',
|
||||
children: [
|
||||
{
|
||||
key: '0_0',
|
||||
type: 'country',
|
||||
label: 'Argentina',
|
||||
data: 'ar',
|
||||
children: [
|
||||
{
|
||||
key: '0_0_0',
|
||||
type: 'country',
|
||||
label: 'Argentina',
|
||||
data: 'ar'
|
||||
},
|
||||
{
|
||||
key: '0_0_1',
|
||||
type: 'country',
|
||||
label: 'Croatia',
|
||||
data: 'hr'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
key: '0_1',
|
||||
type: 'country',
|
||||
label: 'France',
|
||||
data: 'fr',
|
||||
children: [
|
||||
{
|
||||
key: '0_1_0',
|
||||
type: 'country',
|
||||
label: 'France',
|
||||
data: 'fr'
|
||||
},
|
||||
{
|
||||
key: '0_1_1',
|
||||
type: 'country',
|
||||
label: 'Morocco',
|
||||
data: 'ma'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,71 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
|
||||
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
|
||||
Tailwind CSS.
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export const TRANSITIONS = {
|
||||
overlay: {
|
||||
enterFromClass: 'opacity-0 scale-75',
|
||||
enterActiveClass: 'transition-transform transition-opacity duration-150 ease-in',
|
||||
leaveActiveClass: 'transition-opacity duration-150 ease-linear',
|
||||
leaveToClass: 'opacity-0'
|
||||
}
|
||||
};
|
||||
export default {
|
||||
overlaypanel: {
|
||||
root: {
|
||||
class: [
|
||||
'bg-white text-gray-700 border-0 rounded-md shadow-lg',
|
||||
'z-40 transform origin-center',
|
||||
'absolute left-0 top-0 mt-3',
|
||||
'before:absolute before:w-0 before:-top-3 before:h-0 before:border-transparent before:border-solid before:ml-6 before:border-x-[0.75rem] before:border-b-[0.75rem] before:border-t-0 before:border-b-white dark:before:border-b-gray-900',
|
||||
'dark:border dark:border-blue-900/40 dark:bg-gray-900 dark:text-white/80'
|
||||
]
|
||||
},
|
||||
content: {
|
||||
class: 'p-5 items-center flex'
|
||||
},
|
||||
transition: TRANSITIONS.overlay
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<Button type="button" icon="pi pi-image" label="Image" @click="toggle" />
|
||||
|
||||
<OverlayPanel ref="op">
|
||||
<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>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,215 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
|
||||
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
|
||||
Tailwind CSS.
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export default {
|
||||
paginator: {
|
||||
root: {
|
||||
class: [
|
||||
'flex items-center justify-center flex-wrap',
|
||||
'bg-white text-gray-500 border-0 px-4 py-2 rounded-md',
|
||||
'dark:bg-gray-900 dark:text-white/60 dark:border-blue-900/40' // Dark Mode
|
||||
]
|
||||
},
|
||||
firstpagebutton: ({ context }) => ({
|
||||
class: [
|
||||
'relative inline-flex items-center justify-center user-none overflow-hidden leading-none',
|
||||
'border-0 text-gray-500 min-w-[3rem] h-12 m-[0.143rem] rounded-md',
|
||||
'transition duration-200',
|
||||
'dark:text-white', //Dark Mode
|
||||
{
|
||||
'cursor-default pointer-events-none opacity-60': context.disabled,
|
||||
'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]': !context.disabled // Focus
|
||||
}
|
||||
]
|
||||
}),
|
||||
previouspagebutton: ({ context }) => ({
|
||||
class: [
|
||||
'relative inline-flex items-center justify-center user-none overflow-hidden leading-none',
|
||||
'border-0 text-gray-500 min-w-[3rem] h-12 m-[0.143rem] rounded-md',
|
||||
'transition duration-200',
|
||||
'dark:text-white', //Dark Mode
|
||||
{
|
||||
'cursor-default pointer-events-none opacity-60': context.disabled,
|
||||
'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]': !context.disabled // Focus
|
||||
}
|
||||
]
|
||||
}),
|
||||
nextpagebutton: ({ context }) => ({
|
||||
class: [
|
||||
'relative inline-flex items-center justify-center user-none overflow-hidden leading-none',
|
||||
'border-0 text-gray-500 min-w-[3rem] h-12 m-[0.143rem] rounded-md',
|
||||
'transition duration-200',
|
||||
'dark:text-white', //Dark Mode
|
||||
{
|
||||
'cursor-default pointer-events-none opacity-60': context.disabled,
|
||||
'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]': !context.disabled // Focus
|
||||
}
|
||||
]
|
||||
}),
|
||||
lastpagebutton: ({ context }) => ({
|
||||
class: [
|
||||
'relative inline-flex items-center justify-center user-none overflow-hidden leading-none',
|
||||
'border-0 text-gray-500 min-w-[3rem] h-12 m-[0.143rem] rounded-md',
|
||||
'transition duration-200',
|
||||
'dark:text-white', //Dark Mode
|
||||
{
|
||||
'cursor-default pointer-events-none opacity-60': context.disabled,
|
||||
'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]': !context.disabled // Focus
|
||||
}
|
||||
]
|
||||
}),
|
||||
pagebutton: ({ context }) => ({
|
||||
class: [
|
||||
'relative inline-flex items-center justify-center user-none overflow-hidden leading-none',
|
||||
'border-0 text-gray-500 min-w-[3rem] h-12 m-[0.143rem] rounded-md',
|
||||
'transition duration-200',
|
||||
'dark:border-blue-300 dark:text-white', // Dark Mode
|
||||
'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]', // Focus
|
||||
{
|
||||
'bg-blue-50 border-blue-50 text-blue-700 dark:bg-blue-300': context.active
|
||||
}
|
||||
]
|
||||
}),
|
||||
rowperpagedropdown: {
|
||||
root: ({ props, state }) => ({
|
||||
class: [
|
||||
'inline-flex relative cursor-pointer user-none',
|
||||
'bg-white border rounded-md',
|
||||
'transition duration-200',
|
||||
'h-12 mx-2',
|
||||
'dark:bg-gray-950 dark:border-blue-900/40', //DarkMode
|
||||
{
|
||||
'outline-none outline-offset-0 shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] border-blue-500': state.focused && !props.disabled, //Focus
|
||||
'border-gray-300': !state.focused,
|
||||
'hover:border-blue-500': !props.disabled //Hover
|
||||
}
|
||||
]
|
||||
}),
|
||||
input: {
|
||||
class: [
|
||||
'font-sans text-base text-gray-600 p-3 m-0 rounded-md apperance-none',
|
||||
'block whitespace-nowrap overflow-hidden flex-auto w-[1%] cursor-pointer text-ellipsis border-0 pr-0',
|
||||
'focus:outline-none focus:outline-offset-0',
|
||||
'dark:text-white' //Dark Mode
|
||||
]
|
||||
},
|
||||
trigger: {
|
||||
class: ['flex items-center justify-center shrink-0', 'text-gray-500 dark:text-white w-12 rounded-r-md']
|
||||
},
|
||||
panel: {
|
||||
class: [
|
||||
'bg-white text-gray-600 border-0 rounded-md shadow-[0_2px_12px_rgba(0,0,0,0.1)]',
|
||||
'dark:bg-gray-900 dark:text-white/80 dark:border-blue-900/40' //Dark Mode
|
||||
]
|
||||
},
|
||||
wrapper: 'overflow-auto',
|
||||
list: 'm-0 p-0 py-3 list-none',
|
||||
item: ({ context }) => ({
|
||||
class: [
|
||||
'relative font-normal cursor-pointer space-nowrap overflow-hidden',
|
||||
'm-0 py-3 px-5 border-none text-gray-600 rounded-none',
|
||||
'transition duration-200',
|
||||
'dark:text-white/80', // Dark Mode
|
||||
{
|
||||
'text-blue-700 bg-blue-50 dark:text-white/80 dark:bg-blue-300': !context.focused && context.selected,
|
||||
'bg-blue-300/40': context.focused && context.selected,
|
||||
'text-gray-600 bg-gray-300 dark:text-white/80 dark:bg-blue-900/40': context.focused && !context.selected
|
||||
}
|
||||
]
|
||||
})
|
||||
},
|
||||
jumptopageinput: {
|
||||
root: 'inline-flex mx-2',
|
||||
input: {
|
||||
class: [
|
||||
'font-sans text-base text-gray-600 p-3 m-0 rounded-md apperance-none',
|
||||
'block whitespace-nowrap overflow-hidden flex-auto w-[1%] cursor-pointer text-ellipsis border border-gray-300 pr-0',
|
||||
'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] focus:border-blue-300',
|
||||
'dark:text-white dark:bg-gray-950 dark:border-blue-900/40', //Dark Mode
|
||||
'm-0 flex-auto max-w-[3rem]'
|
||||
]
|
||||
}
|
||||
},
|
||||
jumptopagedropdown: {
|
||||
root: ({ props, state }) => ({
|
||||
class: [
|
||||
'inline-flex relative cursor-pointer user-none',
|
||||
'bg-white border rounded-md',
|
||||
'transition duration-200',
|
||||
'h-12 mx-2',
|
||||
'dark:bg-gray-950 dark:border-blue-900/40', //DarkMode
|
||||
{
|
||||
'outline-none outline-offset-0 shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] border-blue-500': state.focused && !props.disabled, //Focus
|
||||
'border-gray-300': !state.focused,
|
||||
'hover:border-blue-500': !props.disabled //Hover
|
||||
}
|
||||
]
|
||||
}),
|
||||
input: {
|
||||
class: [
|
||||
'font-sans text-base text-gray-600 p-3 m-0 rounded-md apperance-none',
|
||||
'block whitespace-nowrap overflow-hidden flex-auto w-[1%] cursor-pointer text-ellipsis border-0 pr-0',
|
||||
'focus:outline-none focus:outline-offset-0',
|
||||
'dark:text-white' //Dark Mode
|
||||
]
|
||||
},
|
||||
trigger: {
|
||||
class: ['flex items-center justify-center shrink-0', 'text-gray-500 dark:text-white w-12 rounded-r-md']
|
||||
},
|
||||
panel: {
|
||||
class: [
|
||||
'bg-white text-gray-600 border-0 rounded-md shadow-[0_2px_12px_rgba(0,0,0,0.1)]',
|
||||
'dark:bg-gray-900 dark:text-white/80 dark:border-blue-900/40' //Dark Mode
|
||||
]
|
||||
},
|
||||
wrapper: 'overflow-auto',
|
||||
list: 'm-0 p-0 py-3 list-none',
|
||||
item: ({ context }) => ({
|
||||
class: [
|
||||
'relative font-normal cursor-pointer space-nowrap overflow-hidden',
|
||||
'm-0 py-3 px-5 border-none text-gray-600 rounded-none',
|
||||
'transition duration-200',
|
||||
'dark:text-white/80', // Dark Mode
|
||||
{
|
||||
'text-blue-700 bg-blue-50 dark:text-white/80 dark:bg-blue-300': !context.focused && context.selected,
|
||||
'bg-blue-300/40': context.focused && context.selected,
|
||||
'text-gray-600 bg-gray-300 dark:text-white/80 dark:bg-blue-900/40': context.focused && !context.selected
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<Paginator :rows="10" :totalRecords="120" :rowsPerPageOptions="[10, 20, 30]"></Paginator>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,81 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
|
||||
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
|
||||
Tailwind CSS.
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export const TRANSITIONS = {
|
||||
toggleable: {
|
||||
enterFromClass: 'max-h-0',
|
||||
enterActiveClass: 'overflow-hidden transition-all duration-500 ease-in-out',
|
||||
enterToClass: 'max-h-40 ',
|
||||
leaveFromClass: 'max-h-40',
|
||||
leaveActiveClass: 'overflow-hidden transition-all duration-500 ease-in',
|
||||
leaveToClass: 'max-h-0'
|
||||
}
|
||||
};
|
||||
|
||||
export default {
|
||||
panel: {
|
||||
header: ({ props }) => ({
|
||||
class: [
|
||||
'flex items-center justify-between', // flex and alignments
|
||||
'border border-gray-300 bg-gray-100 text-gray-700 rounded-tl-lg rounded-tr-lg', // borders and colors
|
||||
'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80', // Dark mode
|
||||
{ 'p-5': !props.toggleable, 'py-3 px-5': props.toggleable } // condition
|
||||
]
|
||||
}),
|
||||
title: 'leading-none font-bold',
|
||||
toggler: {
|
||||
class: [
|
||||
'inline-flex items-center justify-center overflow-hidden relative no-underline', // alignments
|
||||
'w-8 h-8 text-gray-600 border-0 bg-transparent rounded-full transition duration-200 ease-in-out', // widths, borders, and transitions
|
||||
'hover:text-gray-900 hover:border-transparent hover:bg-gray-200 dark:hover:text-white/80 dark:hover:bg-gray-800/80 dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]', // hover
|
||||
'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]' // focus
|
||||
]
|
||||
},
|
||||
togglerIcon: 'inline-block',
|
||||
content: {
|
||||
class: [
|
||||
'p-5 border border-gray-300 bg-white text-gray-700 border-t-0 last:rounded-br-lg last:rounded-bl-lg',
|
||||
'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80' // Dark mode
|
||||
]
|
||||
},
|
||||
transition: TRANSITIONS.toggleable
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<Panel header="Header">
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -1,207 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
|
||||
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
|
||||
Tailwind CSS.
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export const TRANSITIONS = {
|
||||
toggleable: {
|
||||
enterFromClass: 'max-h-0',
|
||||
enterActiveClass: 'overflow-hidden transition-all duration-500 ease-in-out',
|
||||
enterToClass: 'max-h-40 ',
|
||||
leaveFromClass: 'max-h-40',
|
||||
leaveActiveClass: 'overflow-hidden transition-all duration-500 ease-in',
|
||||
leaveToClass: 'max-h-0'
|
||||
}
|
||||
};
|
||||
|
||||
export default {
|
||||
panelmenu: {
|
||||
root: 'w-full md:w-[25rem]',
|
||||
panel: 'mb-1',
|
||||
header: {
|
||||
class: [
|
||||
'outline-none',
|
||||
'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]' // Focus
|
||||
]
|
||||
},
|
||||
headercontent: {
|
||||
class: [
|
||||
'border border-solid border-gray-300 dark:border-blue-900/40 text-gray-700 dark:text-white/80 bg-gray-100 dark:bg-gray-900 rounded-md transition-shadow duration-200',
|
||||
'hover:bg-gray-200 dark:hover:bg-gray-800/80 hover:text-gray-700 dark:hover:text-white/80'
|
||||
]
|
||||
},
|
||||
headeraction: {
|
||||
class: ['flex items-center select-none cursor-pointer relative no-underline', 'text-gray-700 dark:text-white/80 p-5 font-bold']
|
||||
},
|
||||
submenuicon: 'mr-2',
|
||||
headericon: 'mr-2',
|
||||
menucontent: 'py-1 border border-t-0 border-gray-300 dark:border-blue-900/40 bg-white dark:bg-gray-900 text-gray-700 dark:text-white/80 rounded-t-none rounded-br-md rounded-bl-md',
|
||||
menu: {
|
||||
class: ['outline-none', 'm-0 p-0 list-none']
|
||||
},
|
||||
content: ({ context }) => ({
|
||||
class: [
|
||||
'text-gray-700 dark:text-white/80 transition-shadow duration-200 border-none rounded-none',
|
||||
'hover:bg-gray-200 dark:hover:bg-gray-800/80 hover:text-gray-700 dark:hover:text-white/80', // Hover
|
||||
{
|
||||
'bg-gray-300 text-gray-700 dark:text-white/80 dark:bg-gray-800/90': context.focused
|
||||
}
|
||||
]
|
||||
}),
|
||||
action: {
|
||||
class: ['text-gray-700 dark:text-white/80 py-3 px-5 select-none', 'flex items-center cursor-pointer no-underline relative overflow-hidden']
|
||||
},
|
||||
icon: 'mr-2',
|
||||
submenu: 'p-0 pl-4 m-0 list-none',
|
||||
transition: TRANSITIONS.toggleable
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<PanelMenu :model="items" class="w-full md:w-96" />
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -1,80 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
|
||||
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
|
||||
Tailwind CSS.
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export const TRANSITIONS = {
|
||||
overlay: {
|
||||
enterFromClass: 'opacity-0 scale-75',
|
||||
enterActiveClass: 'transition-transform transition-opacity duration-150 ease-in',
|
||||
leaveActiveClass: 'transition-opacity duration-150 ease-linear',
|
||||
leaveToClass: 'opacity-0'
|
||||
}
|
||||
};
|
||||
|
||||
export default {
|
||||
password: {
|
||||
root: ({ props }) => ({
|
||||
class: [
|
||||
'inline-flex relative',
|
||||
{
|
||||
'opacity-60 select-none pointer-events-none cursor-default': props.disabled
|
||||
}
|
||||
]
|
||||
}),
|
||||
panel: 'p-5 bg-white dark:bg-gray-900 text-gray-700 dark:text-white/80 shadow-md rounded-md',
|
||||
meter: 'mb-2 bg-gray-300 dark:bg-gray-700 h-3',
|
||||
meterlabel: ({ instance, props }) => ({
|
||||
class: [
|
||||
'transition-width duration-1000 ease-in-out h-full',
|
||||
{
|
||||
'bg-red-500': instance?.meter?.strength == 'weak',
|
||||
'bg-orange-500': instance?.meter?.strength == 'medium',
|
||||
'bg-green-500': instance?.meter?.strength == 'strong'
|
||||
},
|
||||
{ 'pr-[2.5rem] ': props.toggleMask }
|
||||
]
|
||||
}),
|
||||
showicon: {
|
||||
class: ['absolute top-1/2 -mt-2', 'right-3 text-gray-600 dark:text-white/70']
|
||||
},
|
||||
hideicon: {
|
||||
class: ['absolute top-1/2 -mt-2', 'right-3 text-gray-600 dark:text-white/70']
|
||||
},
|
||||
transition: TRANSITIONS.overlay
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<Password v-model="value" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const value = ref(null);
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,306 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
|
||||
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" :service="['ProductService']" embedded />
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
|
||||
Tailwind CSS.
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export default {
|
||||
picklist: {
|
||||
root: 'flex',
|
||||
sourcecontrols: 'flex flex-col justify-center p-5',
|
||||
sourcemoveupbutton: {
|
||||
root: ({ context }) => ({
|
||||
class: [
|
||||
'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
|
||||
'text-white bg-blue-500 border border-blue-500 rounded-md',
|
||||
'transition duration-200 ease-in-out',
|
||||
'justify-center px-0 py-3', // icon only
|
||||
'mb-2', // orderlist button
|
||||
'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
|
||||
{
|
||||
'cursor-default pointer-events-none opacity-60': context.disabled
|
||||
}
|
||||
]
|
||||
}),
|
||||
label: 'flex-initial w-0'
|
||||
},
|
||||
sourcemovetopbutton: {
|
||||
root: ({ context }) => ({
|
||||
class: [
|
||||
'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
|
||||
'text-white bg-blue-500 border border-blue-500 rounded-md',
|
||||
'transition duration-200 ease-in-out',
|
||||
'justify-center px-0 py-3', // icon only
|
||||
'mb-2', // orderlist button
|
||||
'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
|
||||
{
|
||||
'cursor-default pointer-events-none opacity-60': context.disabled
|
||||
}
|
||||
]
|
||||
}),
|
||||
label: 'flex-initial w-0'
|
||||
},
|
||||
sourcemovedownbutton: {
|
||||
root: ({ context }) => ({
|
||||
class: [
|
||||
'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
|
||||
'text-white bg-blue-500 border border-blue-500 rounded-md',
|
||||
'transition duration-200 ease-in-out',
|
||||
'justify-center px-0 py-3', // icon only
|
||||
'mb-2', // orderlist button
|
||||
'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
|
||||
{
|
||||
'cursor-default pointer-events-none opacity-60': context.disabled
|
||||
}
|
||||
]
|
||||
}),
|
||||
label: 'flex-initial w-0'
|
||||
},
|
||||
sourcemovebottombutton: {
|
||||
root: ({ context }) => ({
|
||||
class: [
|
||||
'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
|
||||
'text-white bg-blue-500 border border-blue-500 rounded-md',
|
||||
'transition duration-200 ease-in-out',
|
||||
'justify-center px-0 py-3', // icon only
|
||||
'mb-2', // orderlist button
|
||||
'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
|
||||
{
|
||||
'cursor-default pointer-events-none opacity-60': context.disabled
|
||||
}
|
||||
]
|
||||
}),
|
||||
label: 'flex-initial w-0'
|
||||
},
|
||||
sourcewrapper: 'grow shrink basis-2/4',
|
||||
sourceheader: {
|
||||
class: [
|
||||
'bg-slate-50 text-slate-700 border border-gray-300 p-5 font-bold border-b-0 rounded-t-md',
|
||||
'dark:bg-gray-900 dark:text-white/80 dark:border-blue-900/40' //Dark Mode
|
||||
]
|
||||
},
|
||||
sourcelist: {
|
||||
class: [
|
||||
'list-none m-0 p-0 overflow-auto min-h-[12rem] max-h-[24rem]',
|
||||
'border border-gray-300 bg-white text-gray-600 py-3 px-0 rounded-b-md outline-none',
|
||||
'dark:border-blue-900/40 dark:bg-gray-900 dark:text-white/80' //Dark Mode
|
||||
]
|
||||
},
|
||||
item: ({ context }) => ({
|
||||
class: [
|
||||
'relative cursor-pointer overflow-hidden',
|
||||
'py-3 px-5 m-0 border-none text-gray-600 dark:text-white/80',
|
||||
'transition duration-200',
|
||||
{
|
||||
'text-blue-700 bg-blue-500/20 dark:bg-blue-300/20': context.active && !context.focused,
|
||||
'text-blue-700 bg-blue-500/30 dark:bg-blue-300/30': context.active && context.focused,
|
||||
'text-gray-600 bg-gray-300 dark:bg-blue-900/40': !context.active && context.focused
|
||||
}
|
||||
]
|
||||
}),
|
||||
buttons: 'flex flex-col justify-center p-5',
|
||||
movetotargetbutton: {
|
||||
root: ({ context }) => ({
|
||||
class: [
|
||||
'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
|
||||
'text-white bg-blue-500 border border-blue-500 rounded-md',
|
||||
'transition duration-200 ease-in-out',
|
||||
'justify-center px-0 py-3', // icon only
|
||||
'mb-2', // orderlist button
|
||||
'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
|
||||
{
|
||||
'cursor-default pointer-events-none opacity-60': context.disabled
|
||||
}
|
||||
]
|
||||
}),
|
||||
label: 'flex-initial w-0'
|
||||
},
|
||||
movealltotargetbutton: {
|
||||
root: ({ context }) => ({
|
||||
class: [
|
||||
'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
|
||||
'text-white bg-blue-500 border border-blue-500 rounded-md',
|
||||
'transition duration-200 ease-in-out',
|
||||
'justify-center px-0 py-3', // icon only
|
||||
'mb-2', // orderlist button
|
||||
'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
|
||||
{
|
||||
'cursor-default pointer-events-none opacity-60': context.disabled
|
||||
}
|
||||
]
|
||||
}),
|
||||
label: 'flex-initial w-0'
|
||||
},
|
||||
movetosourcebutton: {
|
||||
root: ({ context }) => ({
|
||||
class: [
|
||||
'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
|
||||
'text-white bg-blue-500 border border-blue-500 rounded-md',
|
||||
'transition duration-200 ease-in-out',
|
||||
'justify-center px-0 py-3', // icon only
|
||||
'mb-2', // orderlist button
|
||||
'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
|
||||
{
|
||||
'cursor-default pointer-events-none opacity-60': context.disabled
|
||||
}
|
||||
]
|
||||
}),
|
||||
label: 'flex-initial w-0'
|
||||
},
|
||||
movealltosourcebutton: {
|
||||
root: ({ context }) => ({
|
||||
class: [
|
||||
'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
|
||||
'text-white bg-blue-500 border border-blue-500 rounded-md',
|
||||
'transition duration-200 ease-in-out',
|
||||
'justify-center px-0 py-3', // icon only
|
||||
'mb-2', // orderlist button
|
||||
'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
|
||||
{
|
||||
'cursor-default pointer-events-none opacity-60': context.disabled
|
||||
}
|
||||
]
|
||||
}),
|
||||
label: 'flex-initial w-0'
|
||||
},
|
||||
targetcontrols: 'flex flex-col justify-center p-5',
|
||||
targetmoveupbutton: {
|
||||
root: ({ context }) => ({
|
||||
class: [
|
||||
'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
|
||||
'text-white bg-blue-500 border border-blue-500 rounded-md',
|
||||
'transition duration-200 ease-in-out',
|
||||
'justify-center px-0 py-3', // icon only
|
||||
'mb-2', // orderlist button
|
||||
'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
|
||||
{
|
||||
'cursor-default pointer-events-none opacity-60': context.disabled
|
||||
}
|
||||
]
|
||||
}),
|
||||
label: 'flex-initial w-0'
|
||||
},
|
||||
targetmovetopbutton: {
|
||||
root: ({ context }) => ({
|
||||
class: [
|
||||
'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
|
||||
'text-white bg-blue-500 border border-blue-500 rounded-md',
|
||||
'transition duration-200 ease-in-out',
|
||||
'justify-center px-0 py-3', // icon only
|
||||
'mb-2', // orderlist button
|
||||
'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
|
||||
{
|
||||
'cursor-default pointer-events-none opacity-60': context.disabled
|
||||
}
|
||||
]
|
||||
}),
|
||||
label: 'flex-initial w-0'
|
||||
},
|
||||
targetmovedownbutton: {
|
||||
root: ({ context }) => ({
|
||||
class: [
|
||||
'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
|
||||
'text-white bg-blue-500 border border-blue-500 rounded-md',
|
||||
'transition duration-200 ease-in-out',
|
||||
'justify-center px-0 py-3', // icon only
|
||||
'mb-2', // orderlist button
|
||||
'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
|
||||
{
|
||||
'cursor-default pointer-events-none opacity-60': context.disabled
|
||||
}
|
||||
]
|
||||
}),
|
||||
label: 'flex-initial w-0'
|
||||
},
|
||||
targetmovebottombutton: {
|
||||
root: ({ context }) => ({
|
||||
class: [
|
||||
'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
|
||||
'text-white bg-blue-500 border border-blue-500 rounded-md',
|
||||
'transition duration-200 ease-in-out',
|
||||
'justify-center px-0 py-3', // icon only
|
||||
'mb-2', // orderlist button
|
||||
'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
|
||||
{
|
||||
'cursor-default pointer-events-none opacity-60': context.disabled
|
||||
}
|
||||
]
|
||||
}),
|
||||
label: 'flex-initial w-0'
|
||||
},
|
||||
targetwrapper: 'grow shrink basis-2/4',
|
||||
targetheader: {
|
||||
class: [
|
||||
'bg-slate-50 text-slate-700 border border-gray-300 p-5 font-bold border-b-0 rounded-t-md',
|
||||
'dark:bg-gray-900 dark:text-white/80 dark:border-blue-900/40' //Dark Mode
|
||||
]
|
||||
},
|
||||
targetlist: {
|
||||
class: [
|
||||
'list-none m-0 p-0 overflow-auto min-h-[12rem] max-h-[24rem]',
|
||||
'border border-gray-300 bg-white text-gray-600 py-3 px-0 rounded-b-md outline-none',
|
||||
'dark:border-blue-900/40 dark:bg-gray-900 dark:text-white/80' //Dark Mode
|
||||
]
|
||||
},
|
||||
transition: {
|
||||
enterFromClass: '!transition-none',
|
||||
enterActiveClass: '!transition-none',
|
||||
leaveActiveClass: '!transition-none',
|
||||
leaveToClass: '!transition-none'
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<PickList v-model="products" listStyle="height:342px" dataKey="id">
|
||||
<template #sourceheader> Available </template>
|
||||
<template #targetheader> Selected </template>
|
||||
<template #item="slotProps">
|
||||
<div class="flex flex-wrap p-2 items-center gap-3">
|
||||
<img class="w-16 shadow-md shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
|
||||
<div class="flex-1 flex flex-col gap-2">
|
||||
<span class="font-bold text-gray-700 dark:text-white/80">{{ slotProps.item.name }}</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<i class="pi pi-tag text-sm text-gray-700 dark:text-white/80"></i>
|
||||
<span class="text-gray-700 dark:text-white/80">{{ slotProps.item.category }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="font-bold text-gray-700 dark:text-white/80">$ {{ slotProps.item.price }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</PickList>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { ProductService } from '@/service/ProductService'
|
||||
|
||||
const products = ref(null);
|
||||
|
||||
onMounted(() => {
|
||||
ProductService.getProductsSmall().then((data) => (products.value = [data, []]));
|
||||
});
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,113 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
|
||||
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
|
||||
Tailwind CSS.
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export default {
|
||||
global: {
|
||||
css: \`
|
||||
.progressbar-value-animate::after {
|
||||
will-change: left, right;
|
||||
animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
|
||||
}
|
||||
.progressbar-value-animate::before {
|
||||
will-change: left, right;
|
||||
animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
|
||||
}
|
||||
@keyframes p-progressbar-indeterminate-anim {
|
||||
0% {
|
||||
left: -35%;
|
||||
right: 100%;
|
||||
}
|
||||
60% {
|
||||
left: 100%;
|
||||
right: -90%;
|
||||
}
|
||||
100% {
|
||||
left: 100%;
|
||||
right: -90%;
|
||||
}
|
||||
}
|
||||
\`
|
||||
},
|
||||
progressbar: {
|
||||
root: {
|
||||
class: ['overflow-hidden relative', 'border-0 h-6 bg-gray-200 rounded-md dark:bg-gray-800']
|
||||
},
|
||||
value: ({ props }) => ({
|
||||
class: [
|
||||
'border-0 m-0 bg-blue-500',
|
||||
{
|
||||
'transition-width duration-1000 ease-in-out absolute items-center border-0 flex h-full justify-center overflow-hidden w-0': props.mode !== 'indeterminate',
|
||||
'progressbar-value-animate before:absolute before:top-0 before:left-0 before:bottom-0 before:bg-inherit after:absolute after:top-0 after:left-0 after:bottom-0 after:bg-inherit after:delay-1000': props.mode == 'indeterminate'
|
||||
}
|
||||
]
|
||||
}),
|
||||
label: {
|
||||
class: ['inline-flex', 'text-white leading-6']
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<ProgressBar :value="50"></ProgressBar>
|
||||
</div>
|
||||
<div class="card">
|
||||
<Toast></Toast>
|
||||
<ProgressBar :value="value1" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onBeforeUnmount } from "vue";
|
||||
import { useToast } from "primevue/usetoast";
|
||||
|
||||
onMounted(() => {
|
||||
startProgress();
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
endProgress();
|
||||
});
|
||||
|
||||
const toast = useToast();
|
||||
const value1 = ref(0);
|
||||
const interval = ref();
|
||||
const startProgress = () => {
|
||||
interval.value = setInterval(() => {
|
||||
let newValue = value1.value + Math.floor(Math.random() * 10) + 1;
|
||||
if (newValue >= 100) {
|
||||
newValue = 100;
|
||||
toast.add({ severity: 'info', summary: 'Success', detail: 'Process Completed', life: 1000 });
|
||||
}
|
||||
value1.value = newValue;
|
||||
}, 2000);
|
||||
};
|
||||
const endProgress = () => {
|
||||
clearInterval(interval.value);
|
||||
interval.value = null;
|
||||
};
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,85 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
|
||||
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
|
||||
Tailwind CSS.
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export default {
|
||||
global: {
|
||||
css: \`
|
||||
.progress-spinner-circle {
|
||||
stroke-dasharray: 89, 200;
|
||||
stroke-dashoffset: 0;
|
||||
animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
|
||||
@keyframes p-progress-spinner-dash{
|
||||
0% {
|
||||
stroke-dasharray: 1, 200;
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
|
||||
50% {
|
||||
stroke-dasharray: 89, 200;
|
||||
stroke-dashoffset: -35px;
|
||||
}
|
||||
100% {
|
||||
stroke-dasharray: 89, 200;
|
||||
stroke-dashoffset: -124px;
|
||||
}
|
||||
}
|
||||
@keyframes p-progress-spinner-color {
|
||||
100%, 0% {
|
||||
stroke: #ff5757;
|
||||
}
|
||||
40% {
|
||||
stroke: #696cff;
|
||||
}
|
||||
66% {
|
||||
stroke: #1ea97c;
|
||||
}
|
||||
80%, 90% {
|
||||
stroke: #cc8925;
|
||||
}
|
||||
}
|
||||
\`
|
||||
},
|
||||
progressspinner: {
|
||||
root: {
|
||||
class: ['relative mx-auto w-28 h-28 inline-block', 'before:block before:pt-full']
|
||||
},
|
||||
spinner: 'absolute top-0 bottom-0 left-0 right-0 m-auto w-full h-full transform origin-center animate-spin',
|
||||
circle: 'text-red-500 progress-spinner-circle'
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<ProgressSpinner />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,87 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
|
||||
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
|
||||
Tailwind CSS.
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export default {
|
||||
radiobutton: {
|
||||
root: {
|
||||
class: ['relative inline-flex cursor-pointer select-none align-bottom', 'w-6 h-6']
|
||||
},
|
||||
input: ({ props }) => ({
|
||||
class: [
|
||||
'flex justify-center items-center',
|
||||
'border-2 w-6 h-6 text-gray-700 rounded-full transition duration-200 ease-in-out',
|
||||
{
|
||||
'border-gray-300 bg-white dark:border-blue-900/40 dark:bg-gray-900 dark:text-white/80': props.value !== props.modelValue,
|
||||
'border-blue-500 bg-blue-500 dark:border-blue-400 dark:bg-blue-400': props.value == props.modelValue
|
||||
},
|
||||
{
|
||||
'hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]': !props.disabled,
|
||||
'cursor-default opacity-60': props.disabled
|
||||
}
|
||||
]
|
||||
}),
|
||||
icon: ({ props }) => ({
|
||||
class: [
|
||||
'transform rounded-full',
|
||||
'block w-3 h-3 transition duration-200 bg-white dark:bg-gray-900',
|
||||
{
|
||||
'backface-hidden scale-10 invisible': props.value !== props.modelValue,
|
||||
'transform scale-100 visible': props.value == props.modelValue
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<div class="flex flex-wrap gap-3">
|
||||
<div class="flex align-items-center">
|
||||
<RadioButton v-model="ingredient" inputId="ingredient1" name="pizza" value="Cheese" />
|
||||
<label for="ingredient1" class="text-gray-700 dark:text-white/80 ml-2">Cheese</label>
|
||||
</div>
|
||||
<div class="flex align-items-center">
|
||||
<RadioButton v-model="ingredient" inputId="ingredient2" name="pizza" value="Mushroom" />
|
||||
<label for="ingredient2" class="text-gray-700 dark:text-white/80 ml-2">Mushroom</label>
|
||||
</div>
|
||||
<div class="flex align-items-center">
|
||||
<RadioButton v-model="ingredient" inputId="ingredient3" name="pizza" value="Pepper" />
|
||||
<label for="ingredient3" class="text-gray-700 dark:text-white/80 ml-2">Pepper</label>
|
||||
</div>
|
||||
<div class="flex align-items-center">
|
||||
<RadioButton v-model="ingredient" inputId="ingredient4" name="pizza" value="Onion" />
|
||||
<label for="ingredient4" class="text-gray-700 dark:text-white/80 ml-2">Onion</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const ingredient = ref('');
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,81 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
|
||||
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
|
||||
Tailwind CSS.
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export default {
|
||||
rating: {
|
||||
root: ({ props }) => ({
|
||||
class: [
|
||||
'relative flex items-center',
|
||||
'gap-2',
|
||||
{
|
||||
'opacity-60 select-none pointer-events-none cursor-default': props.disabled
|
||||
}
|
||||
]
|
||||
}),
|
||||
cancelitem: ({ context }) => ({
|
||||
class: [
|
||||
'inline-flex items-center cursor-pointer',
|
||||
{
|
||||
'outline-none outline-offset-0 shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]': context.focused
|
||||
}
|
||||
]
|
||||
}),
|
||||
cancelicon: {
|
||||
class: ['text-red-500', 'w-5 h-5', 'transition duration-200 ease-in']
|
||||
},
|
||||
item: ({ props, context }) => ({
|
||||
class: [
|
||||
'inline-flex items-center',
|
||||
{
|
||||
'cursor-pointer': !props.readonly,
|
||||
'cursor-default': props.readonly
|
||||
},
|
||||
{
|
||||
'outline-none outline-offset-0 shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]': context.focused
|
||||
}
|
||||
]
|
||||
}),
|
||||
officon: {
|
||||
class: ['text-gray-700 hover:text-blue-400', 'w-5 h-5', 'transition duration-200 ease-in']
|
||||
},
|
||||
onicon: {
|
||||
class: ['text-blue-500', 'w-5 h-5', 'transition duration-200 ease-in']
|
||||
}
|
||||
},
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<Rating v-model="value" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const value = ref(null);
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,63 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
|
||||
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
|
||||
Tailwind CSS.
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export default {
|
||||
global: {
|
||||
css: \`
|
||||
*[data-pd-ripple="true"]{
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
span[data-p-ink-active="true"]{
|
||||
animation: ripple 0.4s linear;
|
||||
}
|
||||
@keyframes ripple {
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scale(2.5);
|
||||
}
|
||||
}
|
||||
\`
|
||||
},
|
||||
directives: {
|
||||
ripple: {
|
||||
root: {
|
||||
class: ['block absolute bg-white/50 rounded-full pointer-events-none'],
|
||||
style: 'transform: scale(0)'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<Button label="Submit" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,61 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
|
||||
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
|
||||
Tailwind CSS.
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export default {
|
||||
scrollpanel: {
|
||||
wrapper: 'overflow-hidden relative float-left h-full w-full z-[1]',
|
||||
content: 'box-border h-[calc(100%+18px)] overflow-scroll pr-[18px] pb-[18px] pl-0 pt-0 relative scrollbar-none w-[calc(100%+18px)] [&::-webkit-scrollbar]:hidden',
|
||||
barX: {
|
||||
class: ['relative bg-gray-100 invisible rounded cursor-pointer h-[9px] bottom-0 z-[2]', 'transition duration-[250ms] ease-linear']
|
||||
},
|
||||
barY: {
|
||||
class: ['relative bg-gray-100 rounded cursor-pointer w-[9px] top-0 z-[2]', 'transition duration-[250ms] ease-linear']
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<ScrollPanel style="width: 100%; height: 200px">
|
||||
<p class="text-gray-700 dark:text-white/80">
|
||||
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>
|
||||
<p class="text-gray-700 dark:text-white/80">
|
||||
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>
|
||||
<p class="text-gray-700 dark:text-white/80 m-0">
|
||||
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
|
||||
officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
|
||||
</p>
|
||||
</ScrollPanel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,62 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
|
||||
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
|
||||
Tailwind CSS.
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export default {
|
||||
scrolltop: {
|
||||
root: ({ props }) => ({
|
||||
class: [
|
||||
'fixed bottom-20 right-20 flex items-center justify-center',
|
||||
'ml-auto',
|
||||
{
|
||||
'!bg-blue-500 hover:bg-blue-600 text-white rounded-md h-8 w-8': props.target == 'parent',
|
||||
'!bg-gray-700 hover:bg-gray-800 h-12 w-12 rounded-full text-white': props.target !== 'parent'
|
||||
}
|
||||
]
|
||||
}),
|
||||
transition: {
|
||||
enterFromClass: 'opacity-0',
|
||||
enterActiveClass: 'transition-opacity duration-150',
|
||||
leaveActiveClass: 'transition-opacity duration-150',
|
||||
leaveToClass: 'opacity-0'
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<ScrollPanel style="width: 250px; height: 200px">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae et leo duis ut diam. Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur adipiscing
|
||||
elit ut. Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna. Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor augue mauris. Semper
|
||||
feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales. Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet nisl purus. Cursus sit amet
|
||||
dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas. Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris. Eget egestas purus viverra accumsan in nisl nisi.
|
||||
Suscipit adipiscing bibendum est ultricies integer. Mattis aliquam faucibus purus in massa tempor nec.
|
||||
</p>
|
||||
<ScrollTop target="parent" :threshold="100" class="custom-scrolltop" icon="pi pi-arrow-up" />
|
||||
</ScrollPanel>
|
||||
</div>
|
||||
</template>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,62 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
|
||||
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
|
||||
Tailwind CSS.
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export default {
|
||||
selectbutton: {
|
||||
root: ({ props }) => ({
|
||||
class: [{ 'opacity-60 select-none pointer-events-none cursor-default': props.disabled }]
|
||||
}),
|
||||
button: ({ context }) => ({
|
||||
class: [
|
||||
'inline-flex cursor-pointer select-none items-center align-bottom text-center overflow-hidden relative',
|
||||
'px-4 py-3',
|
||||
'transition duration-200 border border-r-0',
|
||||
'first:rounded-l-md first:rounded-tr-none first:rounded-br-none last:border-r last:rounded-tl-none last:rounded-bl-none last:rounded-r-md',
|
||||
'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
|
||||
{
|
||||
'bg-white dark:bg-gray-900 text-gray-700 dark:text-white/80 border-gray-300 dark:border-blue-900/40 hover:bg-gray-50 dark:hover:bg-gray-800/80 ': !context.active,
|
||||
'bg-blue-500 border-blue-500 text-white hover:bg-blue-600': context.active,
|
||||
'opacity-60 select-none pointer-events-none cursor-default': context.disabled
|
||||
}
|
||||
]
|
||||
}),
|
||||
label: 'font-bold'
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<SelectButton v-model="value" :options="options" aria-labelledby="basic" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const value = ref('Off');
|
||||
const options = ref(['Off', 'On']);
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,130 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
|
||||
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
|
||||
Tailwind CSS.
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export default {
|
||||
sidebar: {
|
||||
root: ({ props }) => ({
|
||||
class: [
|
||||
'flex flex-col pointer-events-auto relative transform translate-x-0 translate-y-0 translate-z-0 relative transition-transform duration-300',
|
||||
'bg-white text-gray-700 border-0 shadow-lg',
|
||||
{
|
||||
'!transition-none !transform-none !w-screen !h-screen !max-h-full !top-0 !left-0': props.position == 'full',
|
||||
'h-full w-80': props.position == 'left' || props.position == 'right',
|
||||
'h-40 w-full': props.position == 'top' || props.position == 'bottom'
|
||||
},
|
||||
'dark:border dark:border-blue-900/40 dark:bg-gray-900 dark:text-white/80'
|
||||
]
|
||||
}),
|
||||
header: {
|
||||
class: ['flex items-center justify-end', 'p-5']
|
||||
},
|
||||
closeButton: {
|
||||
class: [
|
||||
'flex items-center justify-center overflow-hidden relative',
|
||||
'w-8 h-8 text-gray-500 border-0 bg-transparent rounded-full transition duration-200 ease-in-out mr-2 last:mr-0',
|
||||
'hover:text-gray-700 hover:border-transparent hover:bg-gray-200',
|
||||
'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]', // focus
|
||||
'dark:hover:text-white/80 dark:hover:text-white/80 dark:hover:border-transparent dark:hover:bg-gray-800/80 dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]'
|
||||
]
|
||||
},
|
||||
closeButtonIcon: 'w-4 h-4 inline-block',
|
||||
content: {
|
||||
class: ['p-5 pt-0 h-full w-full', 'grow overflow-y-auto']
|
||||
},
|
||||
mask: {
|
||||
class: ['flex pointer-events-auto', 'bg-black bg-opacity-40 transition duration-200 z-20 transition-colors']
|
||||
},
|
||||
transition: ({ props }) => {
|
||||
return props.position === 'top'
|
||||
? {
|
||||
enterFromClass: 'translate-x-0 -translate-y-full translate-z-0',
|
||||
leaveToClass: 'translate-x-0 -translate-y-full translate-z-0'
|
||||
}
|
||||
: props.position === 'bottom'
|
||||
? {
|
||||
enterFromClass: 'translate-x-0 translate-y-full translate-z-0',
|
||||
leaveToClass: 'translate-x-0 translate-y-full translate-z-0'
|
||||
}
|
||||
: props.position === 'left'
|
||||
? {
|
||||
enterFromClass: '-translate-x-full translate-y-0 translate-z-0',
|
||||
leaveToClass: '-translate-x-full translate-y-0 translate-z-0'
|
||||
}
|
||||
: props.position === 'right'
|
||||
? {
|
||||
enterFromClass: 'translate-x-full translate-y-0 translate-z-0',
|
||||
leaveToClass: 'translate-x-full translate-y-0 translate-z-0'
|
||||
}
|
||||
: {
|
||||
enterFromClass: 'opacity-0',
|
||||
enterActiveClass: 'transition-opacity duration-400 ease-in',
|
||||
leaveActiveClass: 'transition-opacity duration-400 ease-in',
|
||||
leaveToClass: 'opacity-0'
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<div class="flex gap-2 justify-center">
|
||||
<Button icon="pi pi-arrow-right" @click="visibleLeft = true" />
|
||||
<Button icon="pi pi-arrow-left" @click="visibleRight = true" />
|
||||
<Button icon="pi pi-arrow-down" @click="visibleTop = true" />
|
||||
<Button icon="pi pi-arrow-up" @click="visibleBottom = true" />
|
||||
</div>
|
||||
|
||||
<Sidebar v-model:visible="visibleLeft">
|
||||
<h2>Left Sidebar</h2>
|
||||
<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.</p>
|
||||
</Sidebar>
|
||||
|
||||
<Sidebar v-model:visible="visibleRight" position="right">
|
||||
<h2>Right Sidebar</h2>
|
||||
<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.</p>
|
||||
</Sidebar>
|
||||
|
||||
<Sidebar v-model:visible="visibleTop" position="top">
|
||||
<h2>Top Sidebar</h2>
|
||||
<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.</p>
|
||||
</Sidebar>
|
||||
|
||||
<Sidebar v-model:visible="visibleBottom" position="bottom">
|
||||
<h2>Bottom Sidebar</h2>
|
||||
<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.</p>
|
||||
</Sidebar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const visibleLeft = ref(false);
|
||||
const visibleRight = ref(false);
|
||||
const visibleTop = ref(false);
|
||||
const visibleBottom = ref(false);
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,85 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
|
||||
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
|
||||
Tailwind CSS.
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export default {
|
||||
skeleton: {
|
||||
root: ({ props }) => ({
|
||||
class: [
|
||||
'overflow-hidden',
|
||||
'!mb-2',
|
||||
'bg-gray-300 dark:bg-gray-800',
|
||||
'after:absolute after:top-0 after:left-0 after:right-0 after:bottom-0 after:content after:w-full after:h-full after:bg-blue-400 after:left-full after:transform after:translate-x-full after:z-10 after:bg-gradient-to-r after:from-transparent after:via-white after:to-transparent animate-pulse',
|
||||
{
|
||||
'rounded-md': props.shape !== 'circle',
|
||||
'rounded-full': props.shape == 'circle'
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card text-gray-700 dark:text-white/80">
|
||||
<div class="w-full">
|
||||
<h5>Rectangle</h5>
|
||||
<Skeleton class="mb-2"></Skeleton>
|
||||
<Skeleton width="10rem" class="mb-2"></Skeleton>
|
||||
<Skeleton width="5rem" class="mb-2"></Skeleton>
|
||||
<Skeleton height="2rem" class="mb-2"></Skeleton>
|
||||
<Skeleton width="10rem" height="4rem"></Skeleton>
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<h5>Rounded</h5>
|
||||
<Skeleton class="mb-2" borderRadius="16px"></Skeleton>
|
||||
<Skeleton width="10rem" class="mb-2" borderRadius="16px"></Skeleton>
|
||||
<Skeleton width="5rem" borderRadius="16px" class="mb-2"></Skeleton>
|
||||
<Skeleton height="2rem" class="mb-2" borderRadius="16px"></Skeleton>
|
||||
<Skeleton width="10rem" height="4rem" borderRadius="16px"></Skeleton>
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<h5 class="mt-3">Square</h5>
|
||||
<div class="flex items-end">
|
||||
<Skeleton size="2rem" class="mr-2"></Skeleton>
|
||||
<Skeleton size="3rem" class="mr-2"></Skeleton>
|
||||
<Skeleton size="4rem" class="mr-2"></Skeleton>
|
||||
<Skeleton size="5rem"></Skeleton>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<h5 class="mt-3">Circle</h5>
|
||||
<div class="flex items-end">
|
||||
<Skeleton shape="circle" size="2rem" class="mr-2"></Skeleton>
|
||||
<Skeleton shape="circle" size="3rem" class="mr-2"></Skeleton>
|
||||
<Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
|
||||
<Skeleton shape="circle" size="5rem"></Skeleton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,97 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
|
||||
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
|
||||
Tailwind CSS.
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export default {
|
||||
slider: {
|
||||
root: ({ props }) => ({
|
||||
class: [
|
||||
'relative',
|
||||
'bg-gray-100 dark:bg-gray-800 border-0 rounded-6',
|
||||
{ 'h-1 w-56': props.orientation == 'horizontal', 'w-1 h-56': props.orientation == 'vertical' },
|
||||
{ 'opacity-60 select-none pointer-events-none cursor-default': props.disabled }
|
||||
]
|
||||
}),
|
||||
range: ({ props }) => ({
|
||||
class: [
|
||||
'bg-blue-500',
|
||||
'block absolute',
|
||||
{
|
||||
'top-0 left-0 h-full': props.orientation == 'horizontal',
|
||||
'bottom-0 left-0 w-full': props.orientation == 'vertical'
|
||||
}
|
||||
]
|
||||
}),
|
||||
handle: ({ props }) => ({
|
||||
class: [
|
||||
'h-4 w-4 bg-white dark:bg-gray-600 border-2 border-blue-500 rounded-full transition duration-200',
|
||||
'cursor-grab touch-action-none block',
|
||||
'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
|
||||
'hover:bg-blue-500 hover:border hover:border-blue-500',
|
||||
{
|
||||
'top-[50%] mt-[-0.5715rem] ml-[-0.5715rem]': props.orientation == 'horizontal',
|
||||
'left-[50%] mb-[-0.5715rem] ml-[-0.4715rem]': props.orientation == 'vertical'
|
||||
}
|
||||
]
|
||||
}),
|
||||
starthandler: ({ props }) => ({
|
||||
class: [
|
||||
'h-4 w-4 bg-white dark:bg-gray-600 border-2 border-blue-500 rounded-full transition duration-200',
|
||||
'cursor-grab touch-action-none block',
|
||||
'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
|
||||
'hover:bg-blue-500 hover:border hover:border-blue-500',
|
||||
{
|
||||
'top-[50%] mt-[-0.5715rem] ml-[-0.5715rem]': props.orientation == 'horizontal',
|
||||
'left-[50%] mb-[-0.5715rem] ml-[-0.4715rem]': props.orientation == 'vertical'
|
||||
}
|
||||
]
|
||||
}),
|
||||
endhandler: ({ props }) => ({
|
||||
class: [
|
||||
'h-4 w-4 bg-white dark:bg-gray-600 border-2 border-blue-500 rounded-full transition duration-200',
|
||||
'cursor-grab touch-action-none block',
|
||||
'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
|
||||
'hover:bg-blue-500 hover:border hover:border-blue-500',
|
||||
{
|
||||
'top-[50%] mt-[-0.5715rem] ml-[-0.5715rem]': props.orientation == 'horizontal',
|
||||
'left-[50%] mb-[-0.5715rem] ml-[-0.4715rem]': props.orientation == 'vertical'
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<Slider v-model="value" class="w-14rem" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const value = ref(null);
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,205 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<div class="overflow-auto" style="max-height: 40rem">
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
|
||||
</div>
|
||||
<p class="mt-6">A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
|
||||
Tailwind CSS.
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export default {
|
||||
speeddial: {
|
||||
root: 'absolute flex',
|
||||
button: {
|
||||
root: ({ parent }) => ({
|
||||
class: [
|
||||
'w-16 !h-16 !rounded-full justify-center z-10',
|
||||
{
|
||||
'rotate-45': parent.state.d_visible
|
||||
}
|
||||
]
|
||||
}),
|
||||
label: {
|
||||
class: 'hidden'
|
||||
}
|
||||
},
|
||||
menu: 'm-0 p-0 list-none flex items-center justify-center transition delay-200 z-20',
|
||||
menuitem: ({ props, context }) => ({
|
||||
class: [
|
||||
'transform transition-transform duration-200 ease-out transition-opacity duration-800',
|
||||
context.hidden ? 'opacity-0 scale-0' : 'opacity-1 scale-100',
|
||||
{
|
||||
'my-1 first:mb-2': props.direction == 'up' && props.type == 'linear',
|
||||
'my-1 first:mt-2': props.direction == 'down' && props.type == 'linear',
|
||||
'mx-1 first:mr-2': props.direction == 'left' && props.type == 'linear',
|
||||
'mx-1 first:ml-2': props.direction == 'right' && props.type == 'linear'
|
||||
},
|
||||
{ absolute: props.type !== 'linear' }
|
||||
]
|
||||
}),
|
||||
action: {
|
||||
class: ['flex items-center justify-center rounded-full relative overflow-hidden', 'w-12 h-12 bg-gray-700 hover:bg-gray-800 text-white']
|
||||
},
|
||||
mask: ({ state }) => ({
|
||||
class: [
|
||||
'absolute left-0 top-0 w-full h-full transition-opacity duration-250 ease-in-out bg-black/40 z-0',
|
||||
{
|
||||
'opacity-0': !state.d_visible,
|
||||
'pointer-events-none opacity-100 transition-opacity duration-400 ease-in-out': state.d_visible
|
||||
}
|
||||
]
|
||||
})
|
||||
},
|
||||
button: {
|
||||
root: ({ props, context }) => ({
|
||||
class: [
|
||||
'items-center cursor-pointer inline-flex overflow-hidden relative select-none text-center align-bottom h-full',
|
||||
'transition duration-200 ease-in-out',
|
||||
'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(157,193,251,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(147,197,253,0.7),0_1px_2px_0_rgba(0,0,0,0)]', // Primary button focus
|
||||
{
|
||||
'text-white bg-blue-500 border border-blue-500 hover:bg-blue-600 hover:border-blue-600': !props.link && props.severity === null && !props.text && !props.outlined && !props.plain,
|
||||
'text-blue-600 bg-transparent border-transparent': props.link
|
||||
},
|
||||
{
|
||||
'text-white bg-gray-500 border border-gray-500 hover:bg-gray-600 hover:border-gray-600': props.severity === 'secondary' && !props.text && !props.outlined && !props.plain,
|
||||
'text-white bg-green-500 border border-green-500 hover:bg-green-600 hover:border-green-600': props.severity === 'success' && !props.text && !props.outlined && !props.plain,
|
||||
'text-white bg-blue-500 border border-blue-500 hover:bg-blue-600 hover:border-blue-600': props.severity === 'info' && !props.text && !props.outlined && !props.plain,
|
||||
'text-white bg-orange-500 border border-orange-500 hover:bg-orange-600 hover:border-orange-600': props.severity === 'warning' && !props.text && !props.outlined && !props.plain,
|
||||
'text-white bg-purple-500 border border-purple-500 hover:bg-purple-600 hover:border-purple-600': props.severity === 'help' && !props.text && !props.outlined && !props.plain,
|
||||
'text-white bg-red-500 border border-red-500 hover:bg-red-600 hover:border-red-600': props.severity === 'danger' && !props.text && !props.outlined && !props.plain
|
||||
},
|
||||
{ 'shadow-lg': props.raised },
|
||||
{ 'rounded-md': !props.rounded, 'rounded-full': props.rounded },
|
||||
{
|
||||
'bg-transparent border-transparent': props.text && !props.plain,
|
||||
'text-blue-500 hover:bg-blue-300/20': props.text && (props.severity === null || props.severity === 'info') && !props.plain,
|
||||
'text-gray-500 hover:bg-gray-300/20': props.text && props.severity === 'secondary' && !props.plain,
|
||||
'text-green-500 hover:bg-green-300/20': props.text && props.severity === 'success' && !props.plain,
|
||||
'text-orange-500 hover:bg-orange-300/20': props.text && props.severity === 'warning' && !props.plain,
|
||||
'text-purple-500 hover:bg-purple-300/20': props.text && props.severity === 'help' && !props.plain,
|
||||
'text-red-500 hover:bg-red-300/20': props.text && props.severity === 'danger' && !props.plain
|
||||
},
|
||||
{ 'shadow-lg': props.raised && props.text },
|
||||
{
|
||||
'text-gray-500 hover:bg-gray-300/20': props.plain & props.text,
|
||||
'text-gray-500 border border-gray-500 hover:bg-gray-300/20': props.plain & props.outlined,
|
||||
'text-white bg-gray-500 border border-gray-500 hover:bg-gray-600 hover:border-gray-600': props.plain & !props.outlined & !props.text
|
||||
},
|
||||
{
|
||||
'bg-transparent border': props.outlined && !props.plain,
|
||||
'text-blue-500 border border-blue-500 hover:bg-blue-300/20': props.outlined && (props.severity === null || props.severity === 'info') && !props.plain,
|
||||
'text-gray-500 border border-gray-500 hover:bg-gray-300/20': props.outlined && props.severity === 'secondary' && !props.plain,
|
||||
'text-green-500 border border-green-500 hover:bg-green-300/20': props.outlined && props.severity === 'success' && !props.plain,
|
||||
'text-orange-500 border border-orange-500 hover:bg-orange-300/20': props.outlined && props.severity === 'warning' && !props.plain,
|
||||
'text-purple-500 border border-purple-500 hover:bg-purple-300/20': props.outlined && props.severity === 'help' && !props.plain,
|
||||
'text-red-500 border border-red-500 hover:bg-red-300/20': props.outlined && props.severity === 'danger' && !props.plain
|
||||
},
|
||||
{ 'px-4 py-3 text-base': props.size === null, 'text-xs py-2 px-3': props.size === 'small', 'text-xl py-3 px-4': props.size === 'large' },
|
||||
{ 'opacity-60 pointer-events-none cursor-default': context.disabled }
|
||||
]
|
||||
}),
|
||||
label: ({ props }) => ({
|
||||
class: [
|
||||
'flex-1',
|
||||
'duration-200',
|
||||
'font-bold',
|
||||
{
|
||||
'hover:underline': props.link
|
||||
}
|
||||
]
|
||||
}),
|
||||
icon: ({ props }) => ({
|
||||
class: [
|
||||
'mx-0',
|
||||
{
|
||||
'mr-2': props.iconPos == 'left' && props.label != null,
|
||||
'ml-2': props.iconPos == 'right' && props.label != null,
|
||||
'mb-2': props.iconPos == 'top' && props.label != null,
|
||||
'mt-2': props.iconPos == 'bottom' && props.label != null
|
||||
}
|
||||
]
|
||||
}),
|
||||
badge: ({ props }) => ({
|
||||
class: [{ 'ml-2 w-4 h-4 leading-none flex items-center justify-center': props.badge }]
|
||||
})
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<div :style="{ position: 'relative', height: '500px' }">
|
||||
<SpeedDial :model="items" direction="up" :style="{ left: 'calc(50% - 2rem)', bottom: 0 }" />
|
||||
<SpeedDial :model="items" direction="down" :style="{ left: 'calc(50% - 2rem)', top: 0 }" />
|
||||
<SpeedDial :model="items" direction="left" :style="{ top: 'calc(50% - 2rem)', right: 0 }" />
|
||||
<SpeedDial :model="items" direction="right" :style="{ top: 'calc(50% - 2rem)', left: 0 }" />
|
||||
<Toast />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { useToast } from 'primevue/usetoast';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
const toast = useToast();
|
||||
const router = useRouter();
|
||||
|
||||
const items = ref([
|
||||
{
|
||||
label: 'Add',
|
||||
icon: 'pi pi-pencil',
|
||||
command: () => {
|
||||
toast.add({ severity: 'info', summary: 'Add', detail: 'Data Added' });
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Update',
|
||||
icon: 'pi pi-refresh',
|
||||
command: () => {
|
||||
toast.add({ severity: 'success', summary: 'Update', detail: 'Data Updated' });
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Delete',
|
||||
icon: 'pi pi-trash',
|
||||
command: () => {
|
||||
toast.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted' });
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Upload',
|
||||
icon: 'pi pi-upload',
|
||||
command: () => {
|
||||
router.push('/fileupload');
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Vue Website',
|
||||
icon: 'pi pi-external-link',
|
||||
command: () => {
|
||||
window.location.href = 'https://vuejs.org/'
|
||||
}
|
||||
}
|
||||
])
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,213 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
|
||||
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
|
||||
Tailwind CSS.
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export const TRANSITIONS = {
|
||||
overlay: {
|
||||
enterFromClass: 'opacity-0 scale-75',
|
||||
enterActiveClass: 'transition-transform transition-opacity duration-150 ease-in',
|
||||
leaveActiveClass: 'transition-opacity duration-150 ease-linear',
|
||||
leaveToClass: 'opacity-0'
|
||||
}
|
||||
};
|
||||
|
||||
export default {
|
||||
splitbutton: {
|
||||
root: ({ props }) => ({
|
||||
class: ['inline-flex relative', 'rounded-md', { 'shadow-lg': props.raised }]
|
||||
}),
|
||||
button: {
|
||||
root: ({ parent }) => ({
|
||||
class: ['rounded-r-none border-r-0', { 'rounded-l-full': parent.props.rounded }]
|
||||
}),
|
||||
icon: 'mr-2'
|
||||
},
|
||||
menubutton: {
|
||||
root: ({ parent }) => ({
|
||||
class: ['rounded-l-none', { 'rounded-r-full': parent.props.rounded }]
|
||||
}),
|
||||
label: 'hidden'
|
||||
}
|
||||
},
|
||||
button: {
|
||||
root: ({ props, context }) => ({
|
||||
class: [
|
||||
'items-center cursor-pointer inline-flex overflow-hidden relative select-none text-center align-bottom h-full',
|
||||
'transition duration-200 ease-in-out',
|
||||
'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(157,193,251,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(147,197,253,0.7),0_1px_2px_0_rgba(0,0,0,0)]', // Primary button focus
|
||||
{
|
||||
'text-white bg-blue-500 border border-blue-500 hover:bg-blue-600 hover:border-blue-600': !props.link && props.severity === null && !props.text && !props.outlined && !props.plain,
|
||||
'text-blue-600 bg-transparent border-transparent': props.link
|
||||
},
|
||||
{
|
||||
'text-white bg-gray-500 border border-gray-500 hover:bg-gray-600 hover:border-gray-600': props.severity === 'secondary' && !props.text && !props.outlined && !props.plain,
|
||||
'text-white bg-green-500 border border-green-500 hover:bg-green-600 hover:border-green-600': props.severity === 'success' && !props.text && !props.outlined && !props.plain,
|
||||
'text-white bg-blue-500 border border-blue-500 hover:bg-blue-600 hover:border-blue-600': props.severity === 'info' && !props.text && !props.outlined && !props.plain,
|
||||
'text-white bg-orange-500 border border-orange-500 hover:bg-orange-600 hover:border-orange-600': props.severity === 'warning' && !props.text && !props.outlined && !props.plain,
|
||||
'text-white bg-purple-500 border border-purple-500 hover:bg-purple-600 hover:border-purple-600': props.severity === 'help' && !props.text && !props.outlined && !props.plain,
|
||||
'text-white bg-red-500 border border-red-500 hover:bg-red-600 hover:border-red-600': props.severity === 'danger' && !props.text && !props.outlined && !props.plain
|
||||
},
|
||||
{ 'shadow-lg': props.raised },
|
||||
{ 'rounded-md': !props.rounded, 'rounded-full': props.rounded },
|
||||
{
|
||||
'bg-transparent border-transparent': props.text && !props.plain,
|
||||
'text-blue-500 hover:bg-blue-300/20': props.text && (props.severity === null || props.severity === 'info') && !props.plain,
|
||||
'text-gray-500 hover:bg-gray-300/20': props.text && props.severity === 'secondary' && !props.plain,
|
||||
'text-green-500 hover:bg-green-300/20': props.text && props.severity === 'success' && !props.plain,
|
||||
'text-orange-500 hover:bg-orange-300/20': props.text && props.severity === 'warning' && !props.plain,
|
||||
'text-purple-500 hover:bg-purple-300/20': props.text && props.severity === 'help' && !props.plain,
|
||||
'text-red-500 hover:bg-red-300/20': props.text && props.severity === 'danger' && !props.plain
|
||||
},
|
||||
{ 'shadow-lg': props.raised && props.text },
|
||||
{
|
||||
'text-gray-500 hover:bg-gray-300/20': props.plain & props.text,
|
||||
'text-gray-500 border border-gray-500 hover:bg-gray-300/20': props.plain & props.outlined,
|
||||
'text-white bg-gray-500 border border-gray-500 hover:bg-gray-600 hover:border-gray-600': props.plain & !props.outlined & !props.text
|
||||
},
|
||||
{
|
||||
'bg-transparent border': props.outlined && !props.plain,
|
||||
'text-blue-500 border border-blue-500 hover:bg-blue-300/20': props.outlined && (props.severity === null || props.severity === 'info') && !props.plain,
|
||||
'text-gray-500 border border-gray-500 hover:bg-gray-300/20': props.outlined && props.severity === 'secondary' && !props.plain,
|
||||
'text-green-500 border border-green-500 hover:bg-green-300/20': props.outlined && props.severity === 'success' && !props.plain,
|
||||
'text-orange-500 border border-orange-500 hover:bg-orange-300/20': props.outlined && props.severity === 'warning' && !props.plain,
|
||||
'text-purple-500 border border-purple-500 hover:bg-purple-300/20': props.outlined && props.severity === 'help' && !props.plain,
|
||||
'text-red-500 border border-red-500 hover:bg-red-300/20': props.outlined && props.severity === 'danger' && !props.plain
|
||||
},
|
||||
{ 'px-4 py-3 text-base': props.size === null, 'text-xs py-2 px-3': props.size === 'small', 'text-xl py-3 px-4': props.size === 'large' },
|
||||
{ 'opacity-60 pointer-events-none cursor-default': context.disabled }
|
||||
]
|
||||
}),
|
||||
label: ({ props }) => ({
|
||||
class: [
|
||||
'flex-1',
|
||||
'duration-200',
|
||||
'font-bold',
|
||||
{
|
||||
'hover:underline': props.link
|
||||
}
|
||||
]
|
||||
}),
|
||||
icon: ({ props }) => ({
|
||||
class: [
|
||||
'mx-0',
|
||||
{
|
||||
'mr-2': props.iconPos == 'left' && props.label != null,
|
||||
'ml-2': props.iconPos == 'right' && props.label != null,
|
||||
'mb-2': props.iconPos == 'top' && props.label != null,
|
||||
'mt-2': props.iconPos == 'bottom' && props.label != null
|
||||
}
|
||||
]
|
||||
}),
|
||||
badge: ({ props }) => ({
|
||||
class: [{ 'ml-2 w-4 h-4 leading-none flex items-center justify-center': props.badge }]
|
||||
})
|
||||
},
|
||||
tieredmenu: {
|
||||
root: {
|
||||
class: ['py-1 bg-white border border-gray-300 rounded-lg w-[12.5rem]', 'dark:border-blue-900/40 dark:bg-gray-900']
|
||||
},
|
||||
menu: {
|
||||
class: ['outline-none', 'm-0 p-0 list-none']
|
||||
},
|
||||
menuitem: 'relative',
|
||||
content: ({ context }) => ({
|
||||
class: [
|
||||
'transition-shadow duration-200 border-none rounded-none',
|
||||
'hover:bg-gray-200 hover:text-gray-700 dark:hover:text-white/80 dark:hover:bg-gray-800/80', //Hover
|
||||
{
|
||||
'text-gray-700': !context.focused && !context.active,
|
||||
'bg-gray-300 text-gray-700 dark:text-white/80 dark:bg-gray-800/90': context.focused && !context.active,
|
||||
'bg-blue-100 text-blue-700 dark:bg-blue-400 dark:text-white/80': context.focused && context.active,
|
||||
'bg-blue-50 text-blue-700 dark:bg-blue-300 dark:text-white/80': !context.focused && context.active
|
||||
}
|
||||
]
|
||||
}),
|
||||
action: ({ context }) => ({
|
||||
class: [
|
||||
'py-3 px-5 select-none',
|
||||
'flex items-center cursor-pointer no-underline relative overflow-hidden',
|
||||
{
|
||||
'text-gray-700 dark:text-white/80 hover:text-gray-700 dark:hover:text-white/80 hover:bg-gray-200 dark:hover:bg-gray-800/80': !context.active,
|
||||
'text-blue-600 bg-blue-100': context.active
|
||||
}
|
||||
]
|
||||
}),
|
||||
icon: 'mr-2',
|
||||
submenuicon: 'ml-auto',
|
||||
separator: 'border-t border-gray-300 my-1 dark:border-blue-900/40',
|
||||
submenu: {
|
||||
class: ['py-1 bg-white dark:bg-gray-900 border-0 shadow-md min-w-full', 'absolute z-10', 'left-full top-0']
|
||||
},
|
||||
transition: TRANSITIONS.overlay
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-center flex-wrap gap-2">
|
||||
<Toast />
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="secondary" class="mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="success" class="mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="info" class="mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="warning" class="mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="help" class="mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="danger" class="mb-2"></SplitButton>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useToast } from "primevue/usetoast";
|
||||
const toast = useToast();
|
||||
|
||||
const 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: 'Vue Website',
|
||||
icon: 'pi pi-external-link',
|
||||
command: () => {
|
||||
window.location.href = 'https://vuejs.org/';
|
||||
}
|
||||
},
|
||||
{ label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
|
||||
];
|
||||
|
||||
const save = () => {
|
||||
toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
|
||||
};
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,71 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
|
||||
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
|
||||
Tailwind CSS.
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export default {
|
||||
splitter: {
|
||||
root: ({ context }) => ({
|
||||
class: [
|
||||
'bg-white dark:bg-gray-900 rounded-lg text-gray-700 dark:text-white/80',
|
||||
{
|
||||
'border border-solid border-gray-300 dark:border-blue-900/40': !context.nested
|
||||
}
|
||||
]
|
||||
}),
|
||||
|
||||
gutter: ({ props }) => ({
|
||||
class: [
|
||||
'flex items-center justify-center shrink-0',
|
||||
'transition-all duration-200 bg-gray-100 dark:bg-gray-800',
|
||||
{
|
||||
'cursor-col-resize': props.layout == 'horizontal',
|
||||
'cursor-row-resize': props.layout !== 'horizontal'
|
||||
}
|
||||
]
|
||||
}),
|
||||
gutterhandler: ({ props }) => ({
|
||||
class: [
|
||||
'bg-gray-300 dark:bg-gray-600 transition-all duration-200',
|
||||
{
|
||||
'h-7': props.layout == 'horizontal',
|
||||
'w-7 h-2': props.layout !== 'horizontal'
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<Splitter style="height: 300px" class="mb-5">
|
||||
<SplitterPanel class="flex items-center justify-center"> Panel 1 </SplitterPanel>
|
||||
<SplitterPanel class="flex items-center justify-center"> Panel 2 </SplitterPanel>
|
||||
</Splitter>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,80 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
|
||||
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
|
||||
Tailwind CSS.
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export default {
|
||||
steps: {
|
||||
root: 'relative',
|
||||
menu: 'p-0 m-0 list-none flex',
|
||||
menuitem: {
|
||||
class: ['relative flex justify-center flex-1 overflow-hidden', 'before:border-t before:border-gray-300 before:dark:border-blue-900/40 before:w-full before:absolute before:top-1/4 before:left-0 before:transform before:-translate-y-1/2']
|
||||
},
|
||||
action: {
|
||||
class: [
|
||||
'inline-flex flex-col items-center overflow-hidden',
|
||||
'transition-shadow rounded-md bg-white dark:bg-transparent',
|
||||
'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]'
|
||||
]
|
||||
},
|
||||
step: {
|
||||
class: ['flex items-center justify-center', 'text-gray-700 dark:text-white/80 border border-gray-300 dark:border-blue-900/40 bg-white dark:bg-gray-900 w-[2rem] h-[2rem] leading-2rem text-sm z-10 rounded-full']
|
||||
},
|
||||
label: {
|
||||
class: ['block', 'whitespace-nowrap overflow-hidden overflow-ellipsis max-w-full', 'mt-2 text-gray-500 dark:text-white/60']
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div>
|
||||
<div class="card">
|
||||
<Steps :model="items" :readonly="false" aria-label="Form Steps" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const items = ref([
|
||||
{
|
||||
label: 'Personal',
|
||||
to: "/"
|
||||
},
|
||||
{
|
||||
label: 'Seat',
|
||||
to: "/seat",
|
||||
},
|
||||
{
|
||||
label: 'Payment',
|
||||
to: "/payment",
|
||||
},
|
||||
{
|
||||
label: 'Confirmation',
|
||||
to: "/confirmation",
|
||||
}
|
||||
]);
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,171 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
|
||||
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
|
||||
Tailwind CSS.
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export default {
|
||||
tabmenu: {
|
||||
root: 'overflow-x-auto',
|
||||
menu: {
|
||||
class: ['flex m-0 p-0 list-none flex-nowrap', 'bg-white border-solid border-gray-300 border-b-2', 'outline-none no-underline text-base list-none']
|
||||
},
|
||||
menuitem: 'mr-0',
|
||||
action: ({ context, state }) => ({
|
||||
class: [
|
||||
'cursor-pointer select-none flex items-center relative no-underline overflow-hidden',
|
||||
'border-b-2 p-5 font-bold rounded-t-lg ',
|
||||
'focus:outline-none focus:outline-offset-0 focus:shadow-[inset_0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]',
|
||||
{
|
||||
'border-gray-300 bg-white text-gray-700 hover:bg-white hover:border-gray-400 hover:text-gray-600 dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80 dark:hover:bg-gray-800/80': state.d_activeIndex !== context.index, // Condition-based hover styles.
|
||||
'bg-white border-blue-500 text-blue-500 dark:bg-gray-900 dark:border-blue-300 dark:text-blue-300': state.d_activeIndex === context.index // Condition-based active styles.
|
||||
}
|
||||
],
|
||||
style: 'top:2px'
|
||||
}),
|
||||
icon: 'mr-2'
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<TabMenu :model="items" />
|
||||
<router-view />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const items = ref([
|
||||
{
|
||||
label: 'Home',
|
||||
icon: 'pi pi-fw pi-home',
|
||||
to: '/'
|
||||
},
|
||||
{
|
||||
label: 'Calendar',
|
||||
icon: 'pi pi-fw pi-calendar',
|
||||
to: '/calendar'
|
||||
},
|
||||
{
|
||||
label: 'Edit',
|
||||
icon: 'pi pi-fw pi-pencil',
|
||||
to: '/edit'
|
||||
},
|
||||
{
|
||||
label: 'Documentation',
|
||||
icon: 'pi pi-fw pi-file',
|
||||
to: '/documentation'
|
||||
},
|
||||
{
|
||||
label: 'Settings',
|
||||
icon: 'pi pi-fw pi-cog',
|
||||
to: '/settings'
|
||||
}
|
||||
]);
|
||||
|
||||
<\/script>
|
||||
`,
|
||||
pages: [
|
||||
{
|
||||
tabName: 'HomeDemo',
|
||||
content: `
|
||||
<template>
|
||||
<div class="p-4">
|
||||
<h5>Home Component Content</h5>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
<\/script>
|
||||
`
|
||||
},
|
||||
{
|
||||
tabName: 'CalendarDemo',
|
||||
content: `
|
||||
<template>
|
||||
<div class="p-4">
|
||||
<h5>Calendar Component Content</h5>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
<\/script>
|
||||
`
|
||||
},
|
||||
{
|
||||
tabName: 'EditDemo',
|
||||
content: `
|
||||
<template>
|
||||
<div class="p-4">
|
||||
<h5>Edit Component Content</h5>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
<\/script>
|
||||
`
|
||||
},
|
||||
{
|
||||
tabName: 'DocumentationDemo',
|
||||
content: `
|
||||
<template>
|
||||
<div class="p-4">
|
||||
<h5>Documentation Component Content</h5>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
<\/script>
|
||||
`
|
||||
},
|
||||
{
|
||||
tabName: 'SettingsDemo',
|
||||
content: `
|
||||
<template>
|
||||
<div class="p-4">
|
||||
<h5>Settings Component Content</h5>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,103 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
|
||||
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
|
||||
Tailwind CSS.
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export default {
|
||||
tabview: {
|
||||
navContainer: ({ props }) => ({
|
||||
class: [
|
||||
'relative', // Relative positioning.
|
||||
{ 'overflow-hidden': props.scrollable } // Overflow condition.
|
||||
]
|
||||
}),
|
||||
navContent: {
|
||||
class: 'overflow-y-hidden overscroll-contain overscroll-auto scroll-smooth [&::-webkit-scrollbar]:hidden' // Overflow and scrollbar styles.
|
||||
},
|
||||
previousButton: {
|
||||
class: ['h-full flex items-center justify-center !absolute top-0 z-20', 'left-0', 'bg-white text-blue-500 w-12 shadow-md rounded-none', 'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80 ]'] // Flex and absolute positioning styles.
|
||||
},
|
||||
nextButton: {
|
||||
class: ['h-full flex items-center justify-center !absolute top-0 z-20', 'right-0', 'bg-white text-blue-500 w-12 shadow-md rounded-none', 'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80 '] // Flex and absolute positioning styles.
|
||||
},
|
||||
nav: {
|
||||
class: ['flex flex-1 list-none m-0 p-0', 'bg-transparent border border-gray-300 border-0 border-b-2', 'dark:border-blue-900/40 dark:text-white/80 '] // Flex, list, margin, padding, and border styles.
|
||||
},
|
||||
tabpanel: {
|
||||
header: ({ props }) => ({
|
||||
class: ['mr-0', { 'cursor-default pointer-events-none select-none select-none opacity-60': props?.disabled }] // Margin and condition-based styles.
|
||||
}),
|
||||
headerAction: ({ parent, context }) => ({
|
||||
class: [
|
||||
'items-center cursor-pointer flex overflow-hidden relative select-none text-decoration-none select-none', // Flex and overflow styles.
|
||||
'border-b-2 p-5 font-bold rounded-t-md transition-shadow duration-200 m-0', // Border, padding, font, and transition styles.
|
||||
'transition-colors duration-200', // Transition duration style.
|
||||
'focus:outline-none focus:outline-offset-0 focus:shadow-[inset_0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]', // Focus styles.
|
||||
{
|
||||
'border-gray-300 bg-white text-gray-700 hover:bg-white hover:border-gray-400 hover:text-gray-600 dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80 dark:hover:bg-gray-800/80':
|
||||
parent.state.d_activeIndex !== context.index, // Condition-based hover styles.
|
||||
'bg-white border-blue-500 text-blue-500 dark:bg-gray-900 dark:border-blue-300 dark:text-blue-300': parent.state.d_activeIndex === context.index // Condition-based active styles.
|
||||
}
|
||||
],
|
||||
style: 'margin-bottom:-2px' // Negative margin style.
|
||||
}),
|
||||
headerTitle: {
|
||||
class: ['leading-none whitespace-nowrap'] // Leading and whitespace styles.
|
||||
},
|
||||
content: {
|
||||
class: ['bg-white p-5 border-0 text-gray-700 rounded-bl-md rounded-br-md', 'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80'] // Background, padding, border, and text styles.
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<TabView>
|
||||
<TabPanel header="Header I">
|
||||
<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>
|
||||
</TabPanel>
|
||||
<TabPanel header="Header II">
|
||||
<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>
|
||||
</TabPanel>
|
||||
<TabPanel header="Header III">
|
||||
<p>
|
||||
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
|
||||
officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
|
||||
</p>
|
||||
</TabPanel>
|
||||
<TabPanel header="Header IV" :disabled="true"></TabPanel>
|
||||
</TabView>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,63 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
|
||||
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
|
||||
Tailwind CSS.
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export default {
|
||||
tag: {
|
||||
root: ({ props }) => ({
|
||||
class: [
|
||||
'inline-flex items-center justify-center',
|
||||
'bg-blue-500 text-white text-xs font-semibold px-2 py-1 ',
|
||||
{
|
||||
'bg-green-500 ': props.severity == 'success',
|
||||
'bg-blue-500 ': props.severity == 'info',
|
||||
'bg-orange-500 ': props.severity == 'warning',
|
||||
'bg-red-500 ': props.severity == 'danger'
|
||||
},
|
||||
{
|
||||
'rounded-md': !props.rounded,
|
||||
'rounded-full': props.rounded
|
||||
}
|
||||
]
|
||||
}),
|
||||
value: 'leading-6',
|
||||
icon: 'mr-1 text-sm'
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex flex-wrap justify-center gap-2">
|
||||
<Tag value="Primary"></Tag>
|
||||
<Tag severity="success" value="Success"></Tag>
|
||||
<Tag severity="info" value="Info"></Tag>
|
||||
<Tag severity="warning" value="Warning"></Tag>
|
||||
<Tag severity="danger" value="Danger"></Tag>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,36 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
Tailwind CSS can be used with styled or unstyled modes of PrimeVue. In both cases, <a href="https://tailwindcss.com/docs/preflight" target="_blank" rel="noopener noreferrer">preflight</a> mode may break styling of the core functionality
|
||||
so <i>@layer</i> configuration in your style file that includes tailwind styles is necessary for compatibility.
|
||||
</p>
|
||||
<p>
|
||||
If you are using <strong>Nuxt</strong> modules of <NuxtLink to="/nuxt">PrimeVue</NuxtLink> and <a href="https://tailwindcss.nuxtjs.org/" target="_blank" rel="noopener noreferrer">Tailwind</a>, the layer order is required to be configured
|
||||
with the <NuxtLink to="/nuxt/#layerorder">cssLayerOrder</NuxtLink>.
|
||||
</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
basic: `
|
||||
@layer tailwind-base, primevue, tailwind-utilities;
|
||||
|
||||
@layer tailwind-base {
|
||||
@tailwind base;
|
||||
}
|
||||
|
||||
@layer tailwind-utilities {
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
}
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>This example covers how to enable the default Tailwind based PrimeOne Design implementation and the customization options.</p>
|
||||
</DocSectionText>
|
||||
<div class="flex justify-content-center">
|
||||
<iframe class="w-full h-full" style="border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 2px; min-height: 800px" allowfullscreen src="https://stackblitz.com/edit/vitejs-vite-3gg5r4?file=src%2FApp.vue&embed=1"></iframe>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,98 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
The built-in preset is based on the PrimeOne Design and meant to serve as a template to implement your own design. For customization, the pass through values need to be overriden or defined from the ground up. The unstyled section of the
|
||||
theming documentation for each component demonstrates the theme with an editable example. For the complete list visit the
|
||||
<a href="https://github.com/primefaces/primevue/tree/master/components/lib/passthrough/tailwind">Tailwind Preset</a>.
|
||||
</p>
|
||||
<p>First approach is building everything from the ground up and consult the default preset to get hints about the implementation details. This technique is suggested when implementing your own design system.</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<p>
|
||||
Alternative way is overriding the opinionated PrimeOne theme with <i>usePassThrough</i>. This approach is suggested when you prefer to customize the default preset for your own requirements. For the merge configuration behavior, visit
|
||||
<NuxtLink to="/passthrough/#usepassthrough">usePassThrough</NuxtLink> documentation.
|
||||
</p>
|
||||
<DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
import {createApp} from "vue";
|
||||
import PrimeVue from "primevue/config";
|
||||
import Tailwind from "primevue/passthrough/tailwind";
|
||||
|
||||
const app = createApp(App);
|
||||
|
||||
//My Design System with Tailwind
|
||||
const MyDesignSystem = {
|
||||
panel: {
|
||||
header: ({ props }) => ({
|
||||
class: [
|
||||
'flex items-center justify-between', // flex and alignments
|
||||
'border border-gray-300 bg-gray-100 text-gray-700 rounded-tl-lg rounded-tr-lg', // borders and colors
|
||||
'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80', // Dark mode
|
||||
{ 'p-5': !props.toggleable, 'py-3 px-5': props.toggleable } // condition
|
||||
]
|
||||
}),
|
||||
title: {
|
||||
class: ['leading-none font-bold']
|
||||
},
|
||||
toggler: {
|
||||
class: [
|
||||
'inline-flex items-center justify-center overflow-hidden relative no-underline', // alignments
|
||||
'w-8 h-8 text-gray-600 border-0 bg-transparent rounded-full transition duration-200 ease-in-out', // widths, borders, and transitions
|
||||
'hover:text-gray-900 hover:border-transparent hover:bg-gray-200 dark:hover:text-white/80 dark:hover:bg-gray-800/80 dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]', // hover
|
||||
'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]' // focus
|
||||
]
|
||||
},
|
||||
togglerIcon: {
|
||||
class: ['inline-block']
|
||||
},
|
||||
content: {
|
||||
class: [
|
||||
'p-5 border border-gray-300 bg-white text-gray-700 border-t-0 last:rounded-br-lg last:rounded-bl-lg',
|
||||
'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80' // Dark mode
|
||||
] // padding, borders, and colors
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
app.use(PrimeVue, { unstyled: true, pt: MyDesignSystem });
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
basic: `
|
||||
import {createApp} from "vue";
|
||||
import PrimeVue from "primevue/config";
|
||||
import { usePassThrough } from "primevue/passthrough";
|
||||
import Tailwind from "primevue/passthrough/tailwind";
|
||||
|
||||
const app = createApp(App);
|
||||
|
||||
//Tailwind customization
|
||||
const CustomTailwind = usePassThrough(
|
||||
Tailwind,
|
||||
{
|
||||
panel: {
|
||||
title: {
|
||||
class: ['leading-none font-light text-2xl']
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
mergeSections: true,
|
||||
mergeProps: false
|
||||
}
|
||||
);
|
||||
|
||||
app.use(PrimeVue, { unstyled: true, pt: CustomTailwind });
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,128 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
This section assumes that Tailwind is already available in your application, if not visit the Tailwind CSS <a href="https://tailwindcss.com/docs/installation/framework-guides">framework guides</a> like Vite for the installation and make
|
||||
sure to apply the CSS layer configuration above when including the styles of Tailwind as well.
|
||||
</p>
|
||||
<p class="flex align-items-start gap-2">
|
||||
<Badge value="1" class="mt-1"></Badge>
|
||||
<span
|
||||
>Tailwind uses PurgeCSS internally to remove unused classes, as PrimeVue components are loaded from <i>node_modules</i> the <i>content</i> property at <i>tailwind.config.js</i> needs to be aware of PrimeVue, otherwise the classes
|
||||
utilized in the theme will be removed as well.</span
|
||||
>
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<p class="flex align-items-start gap-2">
|
||||
<Badge value="2" class="mt-1"></Badge>
|
||||
<span
|
||||
>Next step is enabling the <i>unstyled</i> option to remove the default style classes from the components and adding an empty <i>pt</i> so that they can be styled with Tailwind in the next section. Note that if you run your
|
||||
application at this stage, functionality and accessibility of the components will still work but everything will be transparent as there is no style.</span
|
||||
>
|
||||
</p>
|
||||
<DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
|
||||
<p class="flex align-items-start gap-2">
|
||||
<Badge value="3" class="mt-1"></Badge>
|
||||
<span
|
||||
>At the final step, component styles are provided via a pass through configuration that utilizes Tailwind CSS. The default preset of each component is available at the Tailwind part under theming section of each component so you'll
|
||||
able to copy paste instead of starting from scratch. Example below styles, inputtext and panel components;
|
||||
</span>
|
||||
</p>
|
||||
<DocSectionCode :code="code3" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
|
||||
<p>Voilà 💚, you now have access to 80+ awesome Vue UI components styled with Tailwind that will work in harmony with the rest of your application.</p>
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export default {
|
||||
...
|
||||
content: [
|
||||
"./index.html",
|
||||
"./src/**/*.{vue,js,ts,jsx,tsx}",
|
||||
"./node_modules/primevue/**/*.{vue,js,ts,jsx,tsx}"
|
||||
],
|
||||
...
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
basic: `
|
||||
import {createApp} from "vue";
|
||||
import PrimeVue from "primevue/config";
|
||||
|
||||
const app = createApp(App);
|
||||
|
||||
app.use(PrimeVue, { unstyled: true, pt: {} });
|
||||
`
|
||||
},
|
||||
code3: {
|
||||
basic: `
|
||||
import {createApp} from "vue";
|
||||
import PrimeVue from "primevue/config";
|
||||
|
||||
const app = createApp(App);
|
||||
|
||||
//My Design System with Tailwind
|
||||
const MyDesignSystem = {
|
||||
inputtext: {
|
||||
root: ({ props: InputTextProps, context: InputTextContext }) => ({
|
||||
class: [
|
||||
'm-0',
|
||||
'font-sans text-gray-600 dark:text-white/80 bg-white dark:bg-gray-900 border border-gray-300 dark:border-blue-900/40 transition-colors duration-200 appearance-none rounded-lg',
|
||||
{
|
||||
'hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]': !context.disabled,
|
||||
'opacity-60 select-none pointer-events-none cursor-default': context.disabled
|
||||
},
|
||||
{
|
||||
'text-lg px-4 py-4': props.size == 'large',
|
||||
'text-xs px-2 py-2': props.size == 'small',
|
||||
'p-3 text-base': props.size == null
|
||||
}
|
||||
]
|
||||
})
|
||||
},
|
||||
panel: {
|
||||
header: ({ props: PanelProps }) => ({
|
||||
class: [
|
||||
'flex items-center justify-between', // flex and alignments
|
||||
'border border-gray-300 bg-gray-100 text-gray-700 rounded-tl-lg rounded-tr-lg', // borders and colors
|
||||
'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80', // Dark mode
|
||||
{ 'p-5': !props.toggleable, 'py-3 px-5': props.toggleable } // condition
|
||||
]
|
||||
}),
|
||||
title: {
|
||||
class: ['leading-none font-bold']
|
||||
},
|
||||
toggler: {
|
||||
class: [
|
||||
'inline-flex items-center justify-center overflow-hidden relative no-underline', // alignments
|
||||
'w-8 h-8 text-gray-600 border-0 bg-transparent rounded-full transition duration-200 ease-in-out', // widths, borders, and transitions
|
||||
'hover:text-gray-900 hover:border-transparent hover:bg-gray-200 dark:hover:text-white/80 dark:hover:bg-gray-800/80 dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]', // hover
|
||||
'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]' // focus
|
||||
]
|
||||
},
|
||||
togglerIcon: {
|
||||
class: ['inline-block']
|
||||
},
|
||||
content: {
|
||||
class: [
|
||||
'p-5 border border-gray-300 bg-white text-gray-700 border-t-0 last:rounded-br-lg last:rounded-bl-lg',
|
||||
'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80' // Dark mode
|
||||
] // padding, borders, and colors
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
app.use(PrimeVue, { unstyled: true, pt: MyDesignSystem });
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,82 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
|
||||
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
|
||||
Tailwind CSS.
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export default {
|
||||
terminal: {
|
||||
root: {
|
||||
class: ['border border-gray-300 p-5', 'bg-gray-900 text-white dark:border-blue-900/40 ', 'h-72 overflow-auto']
|
||||
},
|
||||
container: 'flex items-center',
|
||||
prompt: 'text-yellow-400',
|
||||
commandtext: 'flex-1 shrink grow-0 border-0 bg-transparent text-inherit p-0 outline-none'
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<p class="text-gray-700 dark:text-white/80">Enter "date" to display the current date, "greet {0}" for a message and "random" to get a random number.</p>
|
||||
<Terminal welcomeMessage="Welcome to PrimeVue" prompt="primevue $" class="dark-demo-terminal" aria-label="PrimeVue Terminal Service" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, onBeforeUnmount } from 'vue';
|
||||
import TerminalService from "primevue/terminalservice";
|
||||
|
||||
onMounted(() => {
|
||||
TerminalService.on('command', commandHandler);
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
TerminalService.off('command', commandHandler);
|
||||
})
|
||||
|
||||
const commandHandler = (text) => {
|
||||
let response;
|
||||
let argsIndex = text.indexOf(' ');
|
||||
let command = argsIndex !== -1 ? text.substring(0, argsIndex) : text;
|
||||
|
||||
switch(command) {
|
||||
case "date":
|
||||
response = 'Today is ' + new Date().toDateString();
|
||||
break;
|
||||
|
||||
case "greet":
|
||||
response = 'Hola ' + text.substring(argsIndex + 1);
|
||||
break;
|
||||
|
||||
case "random":
|
||||
response = Math.floor(Math.random() * 100);
|
||||
break;
|
||||
|
||||
default:
|
||||
response = "Unknown command: " + command;
|
||||
}
|
||||
|
||||
TerminalService.emit('response', response);
|
||||
}
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,51 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
|
||||
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
|
||||
Tailwind CSS.
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export default {
|
||||
textarea: {
|
||||
root: ({ context }) => ({
|
||||
class: [
|
||||
'm-0',
|
||||
'font-sans text-base text-gray-600 dark:text-white/80 bg-white dark:bg-gray-900 p-3 border border-gray-300 dark:border-blue-900/40 transition-colors duration-200 appearance-none rounded-lg',
|
||||
'hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
|
||||
{ 'opacity-60 select-none pointer-events-none cursor-default': context.disabled }
|
||||
]
|
||||
})
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<Textarea v-model="value" rows="5" cols="30" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const value = ref('');
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,213 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
|
||||
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
|
||||
Tailwind CSS.
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export const TRANSITIONS = {
|
||||
overlay: {
|
||||
enterFromClass: 'opacity-0 scale-75',
|
||||
enterActiveClass: 'transition-transform transition-opacity duration-150 ease-in',
|
||||
leaveActiveClass: 'transition-opacity duration-150 ease-linear',
|
||||
leaveToClass: 'opacity-0'
|
||||
}
|
||||
};
|
||||
|
||||
export default {
|
||||
tieredmenu: {
|
||||
root: {
|
||||
class: ['py-1 bg-white border border-gray-300 rounded-lg w-[12.5rem]', 'dark:border-blue-900/40 dark:bg-gray-900']
|
||||
},
|
||||
menu: {
|
||||
class: ['outline-none', 'm-0 p-0 list-none']
|
||||
},
|
||||
menuitem: 'relative',
|
||||
content: ({ context }) => ({
|
||||
class: [
|
||||
'transition-shadow duration-200 border-none rounded-none',
|
||||
'hover:bg-gray-200 hover:text-gray-700 dark:hover:text-white/80 dark:hover:bg-gray-800/80', //Hover
|
||||
{
|
||||
'text-gray-700': !context.focused && !context.active,
|
||||
'bg-gray-300 text-gray-700 dark:text-white/80 dark:bg-gray-800/90': context.focused && !context.active,
|
||||
'bg-blue-100 text-blue-700 dark:bg-blue-400 dark:text-white/80': context.focused && context.active,
|
||||
'bg-blue-50 text-blue-700 dark:bg-blue-300 dark:text-white/80': !context.focused && context.active
|
||||
}
|
||||
]
|
||||
}),
|
||||
action: ({ context }) => ({
|
||||
class: [
|
||||
'py-3 px-5 select-none',
|
||||
'flex items-center cursor-pointer no-underline relative overflow-hidden',
|
||||
{
|
||||
'text-gray-700 dark:text-white/80 hover:text-gray-700 dark:hover:text-white/80 hover:bg-gray-200 dark:hover:bg-gray-800/80': !context.active,
|
||||
'text-blue-600 bg-blue-100': context.active
|
||||
}
|
||||
]
|
||||
}),
|
||||
icon: 'mr-2',
|
||||
submenuicon: 'ml-auto',
|
||||
separator: 'border-t border-gray-300 my-1 dark:border-blue-900/40',
|
||||
submenu: {
|
||||
class: ['py-1 bg-white dark:bg-gray-900 border-0 shadow-md min-w-full', 'absolute z-10', 'left-full top-0']
|
||||
},
|
||||
transition: TRANSITIONS.overlay
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<TieredMenu :model="items" />
|
||||
</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'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
separator: true
|
||||
},
|
||||
{
|
||||
label: 'Quit',
|
||||
icon: 'pi pi-fw pi-power-off'
|
||||
}
|
||||
]);
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,139 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
|
||||
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
|
||||
Tailwind CSS.
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export default {
|
||||
timeline: {
|
||||
root: ({ props }) => ({
|
||||
class: [
|
||||
'flex grow',
|
||||
{
|
||||
'flex-col': props.layout === 'vertical',
|
||||
'flex-row flex-1': props.layout === 'horizontal'
|
||||
}
|
||||
]
|
||||
}),
|
||||
event: ({ props, context }) => ({
|
||||
class: [
|
||||
'flex relative min-h-[70px]',
|
||||
{
|
||||
'flex-row-reverse': props.align === 'right' || (props.layout === 'vertical' && props.align === 'alternate' && context.index % 2 === 1),
|
||||
'flex-col flex-1': props.layout === 'horizontal',
|
||||
'flex-col-reverse ': props.align === 'bottom' || (props.layout === 'horizontal' && props.align === 'alternate' && context.index % 2 === 1)
|
||||
}
|
||||
]
|
||||
}),
|
||||
opposite: ({ props, context }) => ({
|
||||
class: [
|
||||
'flex-1',
|
||||
{
|
||||
'px-4': props.layout === 'vertical',
|
||||
'py-4': props.layout === 'horizontal'
|
||||
},
|
||||
{
|
||||
'text-right': props.align === 'left' || (props.layout === 'vertical' && props.align === 'alternate' && context.index % 2 === 0),
|
||||
'text-left': props.align === 'right' || (props.layout === 'vertical' && props.align === 'alternate' && context.index % 2 === 1)
|
||||
}
|
||||
]
|
||||
}),
|
||||
separator: ({ props }) => ({
|
||||
class: [
|
||||
'flex items-center flex-initial',
|
||||
{
|
||||
'flex-col': props.layout === 'vertical',
|
||||
'flex-row': props.layout === 'horizontal'
|
||||
}
|
||||
]
|
||||
}),
|
||||
marker: 'flex self-baseline w-4 h-4 rounded-full border-2 border-blue-500 bg-white dark:border-blue-300 dark:bg-blue-900/40',
|
||||
connector: ({ props }) => ({
|
||||
class: [
|
||||
'grow bg-gray-300 dark:bg-blue-900/40',
|
||||
{
|
||||
'w-[2px]': props.layout === 'vertical',
|
||||
'w-full h-[2px]': props.layout === 'horizontal'
|
||||
}
|
||||
]
|
||||
}),
|
||||
content: ({ props, context }) => ({
|
||||
class: [
|
||||
'flex-1',
|
||||
{
|
||||
'px-4': props.layout === 'vertical',
|
||||
'py-4': props.layout === 'horizontal'
|
||||
},
|
||||
{
|
||||
'text-left': props.align === 'left' || (props.layout === 'vertical' && props.align === 'alternate' && context.index % 2 === 0),
|
||||
'text-right': props.align === 'right' || (props.layout === 'vertical' && props.align === 'alternate' && context.index % 2 === 1)
|
||||
},
|
||||
{
|
||||
'min-h-0': props.layout === 'vertical' && context.index === context.count,
|
||||
'grow-0': props.layout === 'horizontal' && context.index === context.count
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex flex-wrap gap-6">
|
||||
<Timeline :value="events" class="w-full md:w-80">
|
||||
<template #content="slotProps">
|
||||
<span class="text-gray-700 dark:text-white/80">
|
||||
{{ slotProps.item.status }}
|
||||
</span>
|
||||
</template>
|
||||
</Timeline>
|
||||
|
||||
<Timeline :value="events" align="right" class="w-full md:w-80">
|
||||
<template #content="slotProps">
|
||||
<span class="text-gray-700 dark:text-white/80">
|
||||
{{ slotProps.item.status }}
|
||||
</span>
|
||||
</template>
|
||||
</Timeline>
|
||||
|
||||
<Timeline :value="events" align="alternate" class="w-full md:w-80">
|
||||
<template #content="slotProps">
|
||||
<span class="text-gray-700 dark:text-white/80">
|
||||
{{ slotProps.item.status }}
|
||||
</span>
|
||||
</template>
|
||||
</Timeline>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const events = ref([
|
||||
{ status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0'},
|
||||
{ status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' },
|
||||
{ status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' },
|
||||
{ status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
|
||||
]);
|
||||
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,95 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
|
||||
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
|
||||
Tailwind CSS.
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export default {
|
||||
toast: {
|
||||
root: {
|
||||
class: ['w-96', 'opacity-90']
|
||||
},
|
||||
container: ({ props }) => ({
|
||||
class: [
|
||||
'my-4 rounded-md w-full',
|
||||
{
|
||||
'bg-blue-100 border-solid border-0 border-l-4 border-blue-500 text-blue-700': props.message.severity == 'info',
|
||||
'bg-green-100 border-solid border-0 border-l-4 border-green-500 text-green-700': props.message.severity == 'success',
|
||||
'bg-orange-100 border-solid border-0 border-l-4 border-orange-500 text-orange-700': props.message.severity == 'warn',
|
||||
'bg-red-100 border-solid border-0 border-l-4 border-red-500 text-red-700': props.message.severity == 'error'
|
||||
}
|
||||
]
|
||||
}),
|
||||
content: 'flex items-center py-5 px-7',
|
||||
icon: {
|
||||
class: ['w-6 h-6', 'text-lg mr-2']
|
||||
},
|
||||
text: 'text-base font-normal flex flex-col flex-1 grow shrink ml-4',
|
||||
summary: 'font-bold block',
|
||||
detail: 'mt-1 block',
|
||||
closebutton: {
|
||||
class: ['w-8 h-8 rounded-full bg-transparent transition duration-200 ease-in-out', 'ml-auto overflow-hidden relative', 'flex items-center justify-center', 'hover:bg-white/30']
|
||||
},
|
||||
transition: {
|
||||
enterFromClass: 'opacity-0 translate-x-0 translate-y-2/4 translate-z-0',
|
||||
enterActiveClass: 'transition-transform transition-opacity duration-300',
|
||||
leaveFromClass: 'max-h-40',
|
||||
leaveActiveClass: 'transition-all duration-500 ease-in',
|
||||
leaveToClass: 'max-h-0 opacity-0 mb-0 overflow-hidden'
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<Toast />
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<Button label="Success" severity="success" @click="showSuccess" />
|
||||
<Button label="Info" severity="info" @click="showInfo" />
|
||||
<Button label="Warn" severity="warning" @click="showWarn" />
|
||||
<Button label="Error" severity="danger" @click="showError" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useToast } from "primevue/usetoast";
|
||||
const toast = useToast();
|
||||
|
||||
const showSuccess = () => {
|
||||
toast.add({ severity: 'success', summary: 'Success Message', detail: 'Message Content', life: 3000 });
|
||||
};
|
||||
|
||||
const showInfo = () => {
|
||||
toast.add({ severity: 'info', summary: 'Info Message', detail: 'Message Content', life: 3000 });
|
||||
};
|
||||
|
||||
const showWarn = () => {
|
||||
toast.add({ severity: 'warn', summary: 'Warn Message', detail: 'Message Content', life: 3000 });
|
||||
};
|
||||
|
||||
const showError = () => {
|
||||
toast.add({ severity: 'error', summary: 'Error Message', detail: 'Message Content', life: 3000 });
|
||||
};
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,69 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
|
||||
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
|
||||
Tailwind CSS.
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export default {
|
||||
togglebutton: {
|
||||
root: ({ props, context }) => ({
|
||||
class: [
|
||||
'inline-flex cursor-pointer select-none items-center align-bottom text-center overflow-hidden relative',
|
||||
'px-4 py-3 rounded-md text-base w-36',
|
||||
'border transition duration-200 ease-in-out',
|
||||
{
|
||||
'outline-none outline-offset-0 shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]': context.focused
|
||||
},
|
||||
{
|
||||
'bg-white dark:bg-gray-900 border-gray-300 dark:border-blue-900/40 text-gray-700 dark:text-white/80 hover:bg-gray-100 dark:hover:bg-gray-800/80 hover:border-gray-300 dark:hover:bg-gray-800/70 hover:text-gray-700 dark:hover:text-white/80':
|
||||
!props.modelValue,
|
||||
'bg-blue-500 border-blue-500 text-white hover:bg-blue-600 hover:border-blue-600': props.modelValue
|
||||
},
|
||||
{ 'opacity-60 select-none pointer-events-none cursor-default': props.disabled }
|
||||
]
|
||||
}),
|
||||
label: 'font-bold text-center w-full',
|
||||
icon: ({ props }) => ({
|
||||
class: [
|
||||
' mr-2',
|
||||
{
|
||||
'text-gray-600 dark:text-white/70': !props.modelValue,
|
||||
'text-white': props.modelValue
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<ToggleButton v-model="checked" class="w-8rem" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const checked = ref(false);
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,85 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
|
||||
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
|
||||
Tailwind CSS.
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export default {
|
||||
toolbar: {
|
||||
root: {
|
||||
class: ['flex items-center justify-between flex-wrap', 'bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-blue-900/40 p-5 rounded-md gap-2']
|
||||
},
|
||||
start: 'flex items-center',
|
||||
center: 'flex items-center',
|
||||
end: 'flex items-center'
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<Toolbar>
|
||||
<template #start>
|
||||
<Button label="New" icon="pi pi-plus" class="mr-2" />
|
||||
<Button label="Upload" icon="pi pi-upload" severity="success" class="mr-2" />
|
||||
<i class="pi pi-bars text-gray-700 dark:text-white/80 mr-2" />
|
||||
<SplitButton label="Save" icon="pi pi-check" :model="items" severity="warning"></SplitButton>
|
||||
</template>
|
||||
|
||||
<template #end>
|
||||
<Button icon="pi pi-search" class="mr-2" />
|
||||
<Button icon="pi pi-calendar" severity="success" class="mr-2" />
|
||||
<Button icon="pi pi-times" severity="danger" />
|
||||
</template>
|
||||
</Toolbar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const items = ref([
|
||||
{
|
||||
label: 'Update',
|
||||
icon: 'pi pi-refresh'
|
||||
},
|
||||
{
|
||||
label: 'Delete',
|
||||
icon: 'pi pi-times'
|
||||
},
|
||||
{
|
||||
label: 'Vue Website',
|
||||
icon: 'pi pi-external-link',
|
||||
command: () => {
|
||||
window.location.href = 'https://vuejs.org/';
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Upload',
|
||||
icon: 'pi pi-upload',
|
||||
command: () => {
|
||||
this.$router.push('fileupload');
|
||||
}
|
||||
}
|
||||
])
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,65 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
|
||||
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
|
||||
Tailwind CSS.
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export default {
|
||||
directives: {
|
||||
tooltip: {
|
||||
root: ({ context }) => ({
|
||||
class: [
|
||||
'absolute shadow-md',
|
||||
{
|
||||
'py-0 px-1': context?.right || context?.left || (!context?.right && !context?.left && !context?.top && !context?.bottom),
|
||||
'py-1 px-0': context?.top || context?.bottom
|
||||
}
|
||||
]
|
||||
}),
|
||||
arrow: ({ context }) => ({
|
||||
class: [
|
||||
'absolute w-0 h-0 border-transparent border-solid',
|
||||
{
|
||||
'-m-t-1 border-y-[0.25rem] border-r-[0.25rem] border-l-0 border-r-gray-600': context?.right || (!context?.right && !context?.left && !context?.top && !context?.bottom),
|
||||
'-m-t-1 border-y-[0.25rem] border-l-[0.25rem] border-r-0 border-l-gray-600': context?.left,
|
||||
'-m-l-1 border-x-[0.25rem] border-t-[0.25rem] border-b-0 border-t-gray-600': context?.top,
|
||||
'-m-l-1 border-x-[0.25rem] border-b-[0.25rem] border-t-0 border-b-gray-600': context?.bottom
|
||||
}
|
||||
]
|
||||
}),
|
||||
text: {
|
||||
class: 'p-3 bg-gray-600 text-white rounded-md whitespace-pre-line break-words'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex flex-wrap justify-center gap-2">
|
||||
<InputText v-tooltip="'Enter your username'" type="text" placeholder="Right" />
|
||||
<InputText v-tooltip.top="'Enter your username'" type="text" placeholder="Top" />
|
||||
<InputText v-tooltip.bottom="'Enter your username'" type="text" placeholder="Bottom" />
|
||||
<InputText v-tooltip.left="'Enter your username'" type="text" placeholder="Left" />
|
||||
</div>
|
||||
</template>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,109 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<PrimeVuePrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVuePrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
|
||||
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" :service="['NodeService']" embedded />
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
|
||||
Tailwind CSS.
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export default {
|
||||
tree: {
|
||||
root: {
|
||||
class: ['max-w-[30rem] md:w-full', 'border border-solid border-gray-300 dark:border-blue-900/40 bg-white dark:bg-gray-900 text-gray-700 dark:text-white/80 p-5 rounded-md']
|
||||
},
|
||||
wrapper: 'overflow-auto',
|
||||
container: 'm-0 p-0 list-none overflow-auto',
|
||||
node: 'p-1 outline-none',
|
||||
content: ({ context, props }) => ({
|
||||
class: [
|
||||
'flex items-center',
|
||||
'rounded-lg transition-shadow duration-200 p-2',
|
||||
'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
|
||||
{ 'bg-blue-50 text-blue-600': context.selected },
|
||||
{ 'cursor-pointer select-none': props.selectionMode == 'single' || props.selectionMode == 'multiple' }
|
||||
]
|
||||
}),
|
||||
toggler: ({ context }) => ({
|
||||
class: [
|
||||
'cursor-pointer select-none inline-flex items-center justify-center overflow-hidden relative shrink-0',
|
||||
'mr-2 w-8 h-8 border-0 bg-transparent rounded-full transition duration-200',
|
||||
'hover:border-transparent focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
|
||||
{
|
||||
'text-gray-500 dark:text-white/80 hover:bg-gray-200 dark:hover:bg-gray-800/80 hover:text-gray-800 dark:hover:text-white/80': !context.selected,
|
||||
'text-blue-600 hover:bg-white/30': context.selected
|
||||
},
|
||||
{
|
||||
hidden: context.leaf
|
||||
}
|
||||
]
|
||||
}),
|
||||
checkboxcontainer: 'mr-2',
|
||||
checkbox: ({ context, props }) => ({
|
||||
class: [
|
||||
'cursor-pointer inline-flex relative select-none align-bottom',
|
||||
'w-6 h-6',
|
||||
'flex items-center justify-center',
|
||||
'border-2 w-6 h-6 rounded-lg transition-colors duration-200 text-white text-base dark:text-gray-900',
|
||||
{
|
||||
'border-gray-300 bg-white dark:border-blue-900/40 dark:bg-gray-900': !context.checked,
|
||||
'border-blue-500 text-white bg-blue-500 dark:border-blue-400 dark:bg-blue-400': context.checked
|
||||
},
|
||||
{
|
||||
'hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]': !props.disabled,
|
||||
'cursor-default opacity-60': props.disabled
|
||||
}
|
||||
]
|
||||
}),
|
||||
nodeicon: 'mr-2 text-gray-600 dark:text-white/70',
|
||||
subgroup: {
|
||||
class: ['m-0 list-none', 'p-0 pl-4']
|
||||
},
|
||||
filtercontainer: {
|
||||
class: ['mb-2', 'relative block w-full']
|
||||
},
|
||||
input: {
|
||||
class: [
|
||||
'm-0 p-3 text-base w-full pr-7',
|
||||
'font-sans text-gray-600 dark:text-white/70 bg-white dark:bg-gray-900 border border-gray-300 dark:border-blue-900/40 transition-colors duration-200 appearance-none rounded-lg',
|
||||
'hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]'
|
||||
]
|
||||
},
|
||||
searchicon: 'absolute top-1/2 -mt-2 right-3 text-gray-600 dark:hover:text-white/70'
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<Tree :value="nodes" class="w-full md:w-[30rem]"></Tree>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { NodeService } from '@/service/NodeService';
|
||||
|
||||
const nodes = ref(null);
|
||||
|
||||
onMounted(() => {
|
||||
NodeService.getTreeNodes().then((data) => (nodes.value = data));
|
||||
});
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,145 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<NuxtLink to="/tailwind">Tailwind Customization</NuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
|
||||
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" :service="['NodeService']" embedded />
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
|
||||
Tailwind CSS.
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export const TRANSITIONS = {
|
||||
overlay: {
|
||||
enterFromClass: 'opacity-0 scale-75',
|
||||
enterActiveClass: 'transition-transform transition-opacity duration-150 ease-in',
|
||||
leaveActiveClass: 'transition-opacity duration-150 ease-linear',
|
||||
leaveToClass: 'opacity-0'
|
||||
}
|
||||
};
|
||||
|
||||
export default {
|
||||
treeselect: {
|
||||
root: ({ props }) => ({
|
||||
class: [
|
||||
'inline-flex cursor-pointer select-none',
|
||||
'bg-white dark:bg-gray-900 border border-gray-400 dark:border-blue-900/40 transition-colors duration-200 ease-in-out rounded-md',
|
||||
'w-full md:w-80',
|
||||
{ 'opacity-60 select-none pointer-events-none cursor-default': props?.disabled }
|
||||
]
|
||||
}),
|
||||
labelContainer: {
|
||||
class: ['overflow-hidden flex flex-auto cursor-pointer']
|
||||
},
|
||||
label: {
|
||||
class: ['block overflow-hidden whitespace-nowrap cursor-pointer overflow-ellipsis', 'text-gray-800 dark:text-white/80', 'p-3 transition duration-200']
|
||||
},
|
||||
trigger: {
|
||||
class: ['flex items-center justify-center shrink-0', 'bg-transparent text-gray-600 dark:text-white/70 w-12 rounded-tr-lg rounded-br-lg']
|
||||
},
|
||||
panel: {
|
||||
class: ['bg-white dark:bg-gray-900 text-gray-700 dark:text-white/80 border-0 rounded-md shadow-lg']
|
||||
},
|
||||
wrapper: {
|
||||
class: ['max-h-[200px] overflow-auto', 'bg-white dark:bg-gray-900 text-gray-700 dark:text-white/80 border-0 rounded-md shadow-lg']
|
||||
},
|
||||
transition: TRANSITIONS.overlay
|
||||
},
|
||||
tree: {
|
||||
root: {
|
||||
class: ['max-w-[30rem] md:w-full', 'border border-solid border-gray-300 dark:border-blue-900/40 bg-white dark:bg-gray-900 text-gray-700 dark:text-white/80 p-5 rounded-md']
|
||||
},
|
||||
wrapper: 'overflow-auto',
|
||||
container: 'm-0 p-0 list-none overflow-auto',
|
||||
node: 'p-1 outline-none',
|
||||
content: ({ context, props }) => ({
|
||||
class: [
|
||||
'flex items-center',
|
||||
'rounded-lg transition-shadow duration-200 p-2',
|
||||
'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
|
||||
{ 'bg-blue-50 text-blue-600': context.selected },
|
||||
{ 'cursor-pointer select-none': props.selectionMode == 'single' || props.selectionMode == 'multiple' }
|
||||
]
|
||||
}),
|
||||
toggler: ({ context }) => ({
|
||||
class: [
|
||||
'cursor-pointer select-none inline-flex items-center justify-center overflow-hidden relative shrink-0',
|
||||
'mr-2 w-8 h-8 border-0 bg-transparent rounded-full transition duration-200',
|
||||
'hover:border-transparent focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
|
||||
{
|
||||
'text-gray-500 dark:text-white/80 hover:bg-gray-200 dark:hover:bg-gray-800/80 hover:text-gray-800 dark:hover:text-white/80': !context.selected,
|
||||
'text-blue-600 hover:bg-white/30': context.selected
|
||||
},
|
||||
{
|
||||
hidden: context.leaf
|
||||
}
|
||||
]
|
||||
}),
|
||||
checkboxcontainer: 'mr-2',
|
||||
checkbox: ({ context, props }) => ({
|
||||
class: [
|
||||
'cursor-pointer inline-flex relative select-none align-bottom',
|
||||
'w-6 h-6',
|
||||
'flex items-center justify-center',
|
||||
'border-2 w-6 h-6 rounded-lg transition-colors duration-200 text-white text-base dark:text-gray-900',
|
||||
{
|
||||
'border-gray-300 bg-white dark:border-blue-900/40 dark:bg-gray-900': !context.checked,
|
||||
'border-blue-500 text-white bg-blue-500 dark:border-blue-400 dark:bg-blue-400': context.checked
|
||||
},
|
||||
{
|
||||
'hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]': !props.disabled,
|
||||
'cursor-default opacity-60': props.disabled
|
||||
}
|
||||
]
|
||||
}),
|
||||
nodeicon: 'mr-2 text-gray-600 dark:text-white/70',
|
||||
subgroup: {
|
||||
class: ['m-0 list-none', 'p-0 pl-4']
|
||||
},
|
||||
filtercontainer: {
|
||||
class: ['mb-2', 'relative block w-full']
|
||||
},
|
||||
input: {
|
||||
class: [
|
||||
'm-0 p-3 text-base w-full pr-7',
|
||||
'font-sans text-gray-600 dark:text-white/70 bg-white dark:bg-gray-900 border border-gray-300 dark:border-blue-900/40 transition-colors duration-200 appearance-none rounded-lg',
|
||||
'hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]'
|
||||
]
|
||||
},
|
||||
searchicon: 'absolute top-1/2 -mt-2 right-3 text-gray-600 dark:hover:text-white/70'
|
||||
},
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<TreeSelect v-model="selectedValue" :options="nodes" placeholder="Select Item" class="md:w-20rem w-full" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { NodeService } from './service/NodeService';
|
||||
|
||||
const nodes = ref(null);
|
||||
const selectedValue = ref(null);
|
||||
|
||||
onMounted(() => {
|
||||
NodeService.getTreeNodes().then((data) => (nodes.value = data));
|
||||
});
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,202 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
|
||||
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" :service="['NodeService']" embedded />
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
|
||||
Tailwind CSS.
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export default {
|
||||
treetable: {
|
||||
root: ({ props }) => ({
|
||||
class: [
|
||||
'relative',
|
||||
{
|
||||
'flex flex-col h-full': props.scrollHeight === 'flex'
|
||||
}
|
||||
]
|
||||
}),
|
||||
loadingoverlay: {
|
||||
class: [
|
||||
'fixed w-full h-full t-0 l-0 bg-gray-100/40',
|
||||
'transition duration-200',
|
||||
'absolute flex items-center justify-center z-2',
|
||||
'dark:bg-gray-950/40' // Dark Mode
|
||||
]
|
||||
},
|
||||
loadingicon: 'w-8 h-8',
|
||||
header: {
|
||||
class: [
|
||||
'bg-slate-50 text-slate-700 border border-x-0 border-t-0 border-gray-300 p-4 font-bold',
|
||||
'dark:bg-gray-900 dark:text-white/70 dark:border-blue-900/40' // Dark Mode
|
||||
]
|
||||
},
|
||||
wrapper: ({ props }) => ({
|
||||
class: [
|
||||
{
|
||||
'relative overflow-auto': props.scrollable,
|
||||
'overflow-x-auto': props.resizableColumns
|
||||
}
|
||||
]
|
||||
}),
|
||||
footer: {
|
||||
class: [
|
||||
'bg-slate-50 text-slate-700 border border-x-0 border-t-0 border-gray-300 p-4 font-bold',
|
||||
'dark:bg-gray-900 dark:text-white/70 dark:border-blue-900/40' // Dark Mode
|
||||
]
|
||||
},
|
||||
table: 'border-collapse table-fixed w-full',
|
||||
thead: ({ props }) => ({
|
||||
class: [
|
||||
{
|
||||
'block sticky top-0 z-[1]': props.scrollable
|
||||
}
|
||||
]
|
||||
}),
|
||||
tbody: ({ props }) => ({
|
||||
class: [
|
||||
{
|
||||
block: props.scrollable
|
||||
}
|
||||
]
|
||||
}),
|
||||
tfoot: ({ props }) => ({
|
||||
class: [
|
||||
{
|
||||
block: props.scrollable
|
||||
}
|
||||
]
|
||||
}),
|
||||
headerrow: ({ props }) => ({
|
||||
class: [
|
||||
{
|
||||
'flex flex-nowrap w-full': props.scrollable
|
||||
}
|
||||
]
|
||||
}),
|
||||
row: ({ context }) => ({
|
||||
class: [
|
||||
'transition duration-200',
|
||||
'focus:outline focus:outline-[0.15rem] focus:outline-blue-200 focus:outline-offset-[-0.15rem]', // Focus
|
||||
context.selected ? 'bg-blue-50 text-blue-700 dark:bg-blue-300 dark:text-white/80' : 'bg-white text-gray-600 dark:bg-gray-900 dark:text-white/80',
|
||||
{
|
||||
'hover:bg-gray-300/20 hover:text-gray-600 dark:hover:bg-gray-950': context.selectable && !context.selected, // Hover
|
||||
'flex flex-nowrap w-full': context.scrollable
|
||||
}
|
||||
]
|
||||
}),
|
||||
column: {
|
||||
headercell: ({ context }) => ({
|
||||
class: [
|
||||
'text-left border-gray-300 border font-bold',
|
||||
'transition duration-200',
|
||||
context.sorted ? 'bg-blue-50 text-blue-700' : 'bg-slate-50',
|
||||
context?.size === 'small' ? 'p-2' : context?.size === 'large' ? 'p-5' : 'p-4', // Size
|
||||
'dark:border-blue-900/40 dark:text-white/80 dark:bg-gray-900', //Dark Mode
|
||||
{
|
||||
'flex flex-1 items-center': context.scrollable,
|
||||
'flex-initial shrink-0': context.scrollable && context.scrollDirection === 'both' && !context.frozen,
|
||||
'sticky z-[1]': context.scrollable && context.scrollDirection === 'both' && context.frozen,
|
||||
'border-x-0 border-l-0 border-t-0': !context.showGridlines,
|
||||
'overflow-hidden relative bg-clip-padding': context.resizable && !context.frozen
|
||||
}
|
||||
]
|
||||
}),
|
||||
bodycell: ({ context }) => ({
|
||||
class: [
|
||||
'text-left border-gray-300 border',
|
||||
'transition duration-200',
|
||||
context?.size === 'small' ? 'p-2' : context?.size === 'large' ? 'p-5' : 'p-4', // Size
|
||||
'dark:border-blue-900/40', //Dark Mode
|
||||
{
|
||||
'cursor-pointer': context.selectable,
|
||||
'flex flex-1 items-center': context.scrollable,
|
||||
'flex-initial shrink-0': context.scrollable && context.scrollDirection === 'both' && !context.frozen,
|
||||
sticky: context.scrollable && context.scrollDirection === 'both' && context.frozen,
|
||||
'border-x-0 border-l-0': !context.showGridlines
|
||||
}
|
||||
]
|
||||
}),
|
||||
rowtoggler: ({ context }) => ({
|
||||
class: [
|
||||
'relative inline-flex items-center justify-center align-center cursor-pointer select-none overflow-hidden bg-transparent',
|
||||
'w-8 h-8 border-0 rounded mr-0.5',
|
||||
context.selected ? 'text-blue-700' : 'text-gray-500',
|
||||
'dark:text-white/70' //Dark Mode
|
||||
]
|
||||
}),
|
||||
sorticon: ({ context }) => ({
|
||||
class: ['ml-2', context.sorted ? 'text-blue-700 dark:text-white/80' : 'text-slate-700 dark:text-white/70']
|
||||
}),
|
||||
sortbadge: {
|
||||
class: [
|
||||
'h-[1.143rem] min-w-[1.143rem] leading-[1.143rem] text-blue-700 bg-blue-50 ml-2 rounded-[50%]',
|
||||
'dark:text-white/80 dark:bg-blue-500/40' // Dark Mode
|
||||
]
|
||||
},
|
||||
columnresizer: 'block absolute top-0 right-0 m-0 w-2 h-full p-0 cursor-col-resize border border-transparent',
|
||||
checkboxwrapper: {
|
||||
class: ['cursor-pointer inline-flex relative select-none align-bottom', 'w-6 h-6 mr-2']
|
||||
},
|
||||
checkbox: ({ context }) => ({
|
||||
class: [
|
||||
'flex items-center justify-center',
|
||||
'border-2 w-6 h-6 text-gray-600 rounded-lg transition-colors duration-200',
|
||||
context.checked ? 'border-blue-500 bg-blue-500 dark:border-blue-400 dark:bg-blue-400' : 'border-gray-300 bg-white dark:border-blue-900/40 dark:bg-gray-900',
|
||||
{
|
||||
'hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]': !context.disabled
|
||||
}
|
||||
]
|
||||
}),
|
||||
checkboxicon: ({ context }) => ({
|
||||
class: [
|
||||
'w-4 h-4 transition-all duration-200 text-base dark:text-gray-900',
|
||||
{
|
||||
'text-white': context.checked
|
||||
}
|
||||
]
|
||||
})
|
||||
},
|
||||
resizehelper: 'absolute hidden w-px z-10 bg-blue-500 dark:bg-blue-300'
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<TreeTable :value="nodes">
|
||||
<Column field="name" header="Name" sortable expander></Column>
|
||||
<Column field="size" header="Size" sortable></Column>
|
||||
<Column field="type" header="Type" sortable></Column>
|
||||
</TreeTable>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { NodeService } from '@/service/NodeService';
|
||||
|
||||
onMounted(() => {
|
||||
NodeService.getTreeTableNodes().then((data) => (nodes.value = data));
|
||||
});
|
||||
|
||||
const nodes = ref();
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,61 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz scrollable />
|
||||
<p class="mt-4">A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
|
||||
Tailwind CSS.
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export default {
|
||||
tristatecheckbox: {
|
||||
root: {
|
||||
class: ['cursor-pointer inline-flex relative select-none align-bottom', 'w-6 h-6']
|
||||
},
|
||||
checkbox: ({ props }) => ({
|
||||
class: [
|
||||
'flex items-center justify-center',
|
||||
'border-2 w-6 h-6 rounded-lg transition-colors duration-200',
|
||||
{
|
||||
'border-blue-500 bg-blue-500 text-white dark:border-blue-400 dark:bg-blue-400': props.modelValue || !props.modelValue,
|
||||
'border-gray-300 text-gray-600 bg-white dark:border-blue-900/40 dark:bg-gray-900': props.modelValue == null
|
||||
},
|
||||
{
|
||||
'hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]': !props.disabled,
|
||||
'cursor-default opacity-60': props.disabled
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex flex-col items-center">
|
||||
<TriStateCheckbox v-model="value" />
|
||||
<label for="checkbox" class="text-gray-700 dark:text-white/80 mt-1">{{ value == null ? 'null' : value }}</label>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const value = ref(null);
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
:componentDocs="docs"
|
||||
:apiDocs="['InputGroup', 'InputGroupAddon']"
|
||||
:ptTabComponent="ptComponent"
|
||||
:themingDocs="themingDoc"
|
||||
/>
|
||||
</template>
|
||||
|
||||
|
|
@ -17,6 +18,7 @@ import CheckboxDoc from '@/doc/inputgroup/CheckboxDoc.vue';
|
|||
import ImportDoc from '@/doc/inputgroup/ImportDoc.vue';
|
||||
import MultipleDoc from '@/doc/inputgroup/MultipleDoc.vue';
|
||||
import PTComponent from '@/doc/inputgroup/pt/index.vue';
|
||||
import ThemingDoc from '@/doc/inputgroup/theming/index.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -53,7 +55,8 @@ export default {
|
|||
component: AccessibilityDoc
|
||||
}
|
||||
],
|
||||
ptComponent: PTComponent
|
||||
ptComponent: PTComponent,
|
||||
themingDoc: ThemingDoc
|
||||
};
|
||||
}
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue