Tailwind docs updated
Tuğçe Küçükoğlu
parent
ef2561b710
commit
f15fb3de24
|
|
@ -0,0 +1,124 @@
|
|||
<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 />
|
||||
<p>A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
</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'
|
||||
},
|
||||
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', 'bg-white text-gray-700 border-0 rounded-md shadow-lg', '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,41 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" embedded />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
items: [],
|
||||
code: {
|
||||
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>`
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
search(event) {
|
||||
this.items = [...Array(10).keys()].map((item) => event.query + '-' + item);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -24,7 +24,14 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc
|
||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||
children: [
|
||||
{
|
||||
id: 'tailwind',
|
||||
label: 'Tailwind',
|
||||
component: TailwindDoc
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,67 @@
|
|||
<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 />
|
||||
<p>A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
</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,39 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" embedded />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
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>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -24,7 +24,14 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc
|
||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||
children: [
|
||||
{
|
||||
id: 'tailwind',
|
||||
label: 'Tailwind',
|
||||
component: TailwindDoc
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,178 @@
|
|||
<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 />
|
||||
<p>A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
</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'
|
||||
},
|
||||
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,29 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" embedded />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
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>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -24,7 +24,14 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc
|
||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||
children: [
|
||||
{
|
||||
id: 'tailwind',
|
||||
label: 'Tailwind',
|
||||
component: TailwindDoc
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,164 @@
|
|||
<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 />
|
||||
<p>A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
</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'
|
||||
},
|
||||
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,104 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" embedded />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
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>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -24,7 +24,14 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc
|
||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||
children: [
|
||||
{
|
||||
id: 'tailwind',
|
||||
label: 'Tailwind',
|
||||
component: TailwindDoc
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,60 @@
|
|||
<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 />
|
||||
<p>A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
</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,29 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" embedded />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
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>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -24,7 +24,14 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc
|
||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||
children: [
|
||||
{
|
||||
id: 'tailwind',
|
||||
label: 'Tailwind',
|
||||
component: TailwindDoc
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,69 @@
|
|||
<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 />
|
||||
<p>A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
</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,29 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" embedded />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<Chips v-model="value" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const value = ref();
|
||||
<\/script>`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -24,7 +24,14 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc
|
||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||
children: [
|
||||
{
|
||||
id: 'tailwind',
|
||||
label: 'Tailwind',
|
||||
component: TailwindDoc
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,99 @@
|
|||
<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 />
|
||||
<p>A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
</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'
|
||||
},
|
||||
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,29 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" embedded />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
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>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -24,7 +24,14 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc
|
||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||
children: [
|
||||
{
|
||||
id: 'tailwind',
|
||||
label: 'Tailwind',
|
||||
component: TailwindDoc
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,78 @@
|
|||
<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 />
|
||||
<p>A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
</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,39 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" embedded />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
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>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -24,7 +24,14 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc
|
||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||
children: [
|
||||
{
|
||||
id: 'tailwind',
|
||||
label: 'Tailwind',
|
||||
component: TailwindDoc
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,538 @@
|
|||
<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 />
|
||||
<p>A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" :service="['CustomerService']" embedded />
|
||||
</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'
|
||||
},
|
||||
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()" />
|
||||
<span class="p-input-icon-left">
|
||||
<i class="pi pi-search" />
|
||||
<InputText v-model="filters['global'].value" placeholder="Keyword Search" />
|
||||
</span>
|
||||
</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,217 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" :service="['CustomerService']" embedded />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
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()" />
|
||||
<span class="p-input-icon-left">
|
||||
<i class="pi pi-search" />
|
||||
<InputText v-model="filters['global'].value" placeholder="Keyword Search" />
|
||||
</span>
|
||||
</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>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -24,7 +24,14 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc
|
||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||
children: [
|
||||
{
|
||||
id: 'tailwind',
|
||||
label: 'Tailwind',
|
||||
component: TailwindDoc
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,15 +1,54 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
|
||||
<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 />
|
||||
<p>A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" :service="['ProductService']" embedded />
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" :service="['ProductService']" embedded />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
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">
|
||||
|
|
@ -100,23 +139,7 @@ const getSeverity = (product) => {
|
|||
}
|
||||
}
|
||||
|
||||
<\/script>`,
|
||||
data: `
|
||||
/* ProductService */
|
||||
{
|
||||
id: '1000',
|
||||
code: 'f230fh0g3',
|
||||
name: 'Bamboo Watch',
|
||||
description: 'Product Description',
|
||||
image: 'bamboo-watch.jpg',
|
||||
price: 65,
|
||||
category: 'Accessories',
|
||||
quantity: 24,
|
||||
inventoryStatus: 'INSTOCK',
|
||||
rating: 5
|
||||
},
|
||||
...
|
||||
`
|
||||
<\/script>`
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -24,7 +24,14 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc
|
||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||
children: [
|
||||
{
|
||||
id: 'tailwind',
|
||||
label: 'Tailwind',
|
||||
component: TailwindDoc
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,147 @@
|
|||
<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 />
|
||||
<p>A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
</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,91 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" embedded />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
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>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -24,7 +24,14 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc
|
||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||
children: [
|
||||
{
|
||||
id: 'tailwind',
|
||||
label: 'Tailwind',
|
||||
component: TailwindDoc
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,126 @@
|
|||
<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 />
|
||||
<p>A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
</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'
|
||||
},
|
||||
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 overflow-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: '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-400 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: '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: '-mt-2 absolute top-1/2',
|
||||
clearicon: '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,36 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" embedded />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
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>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -24,7 +24,14 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc
|
||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||
children: [
|
||||
{
|
||||
id: 'tailwind',
|
||||
label: 'Tailwind',
|
||||
component: TailwindDoc
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,51 @@
|
|||
<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 />
|
||||
<p>A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" :dependencies="{ quill: '1.3.7' }" component="Editor" embedded />
|
||||
</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,29 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" :dependencies="{ quill: '1.3.7' }" component="Editor" embedded />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
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>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -24,7 +24,14 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc
|
||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||
children: [
|
||||
{
|
||||
id: 'tailwind',
|
||||
label: 'Tailwind',
|
||||
component: TailwindDoc
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,44 @@
|
|||
<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 />
|
||||
<p>A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
</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,31 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" embedded />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
code: {
|
||||
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>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -24,7 +24,14 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc
|
||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||
children: [
|
||||
{
|
||||
id: 'tailwind',
|
||||
label: 'Tailwind',
|
||||
component: TailwindDoc
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,84 @@
|
|||
<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 />
|
||||
<p>A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
</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,47 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" embedded />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
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>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -24,7 +24,14 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc
|
||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||
children: [
|
||||
{
|
||||
id: 'tailwind',
|
||||
label: 'Tailwind',
|
||||
component: TailwindDoc
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,63 @@
|
|||
<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 />
|
||||
<p>A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
</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,29 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" embedded />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
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>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -24,7 +24,14 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc
|
||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||
children: [
|
||||
{
|
||||
id: 'tailwind',
|
||||
label: 'Tailwind',
|
||||
component: TailwindDoc
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,58 @@
|
|||
<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 />
|
||||
<p>A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
</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,30 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" embedded />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
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>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -24,7 +24,14 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc
|
||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||
children: [
|
||||
{
|
||||
id: 'tailwind',
|
||||
label: 'Tailwind',
|
||||
component: TailwindDoc
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,53 @@
|
|||
<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 />
|
||||
<p>A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
</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,29 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" embedded />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
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>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -24,7 +24,14 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc
|
||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||
children: [
|
||||
{
|
||||
id: 'tailwind',
|
||||
label: 'Tailwind',
|
||||
component: TailwindDoc
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,85 @@
|
|||
<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 />
|
||||
<p>A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
</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: 'overflow-auto',
|
||||
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-400 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: '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: '-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,36 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" embedded />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
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>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -24,7 +24,14 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc
|
||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||
children: [
|
||||
{
|
||||
id: 'tailwind',
|
||||
label: 'Tailwind',
|
||||
component: TailwindDoc
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,15 +1,90 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
|
||||
<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 />
|
||||
<p>A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" embedded />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
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">
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -24,7 +24,14 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc
|
||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||
children: [
|
||||
{
|
||||
id: 'tailwind',
|
||||
label: 'Tailwind',
|
||||
component: TailwindDoc
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,83 @@
|
|||
<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 />
|
||||
<p>A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
</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'
|
||||
},
|
||||
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,32 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" embedded />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
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>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -24,7 +24,14 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc
|
||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||
children: [
|
||||
{
|
||||
id: 'tailwind',
|
||||
label: 'Tailwind',
|
||||
component: TailwindDoc
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,239 @@
|
|||
<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 />
|
||||
<p>A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
</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: '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',
|
||||
{
|
||||
'max-[960px]:pl-9': context.level === 1,
|
||||
'max-[960px]:pl-14': context.level === 2
|
||||
}
|
||||
]
|
||||
}),
|
||||
icon: 'mr-2',
|
||||
submenuicon: ({ props }) => ({
|
||||
class: [
|
||||
'max-[960px]:ml-auto',
|
||||
{
|
||||
'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: '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: 'Archieve',
|
||||
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,151 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" embedded />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
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: 'Archieve',
|
||||
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>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -24,7 +24,14 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc
|
||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||
children: [
|
||||
{
|
||||
id: 'tailwind',
|
||||
label: 'Tailwind',
|
||||
component: TailwindDoc
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,68 @@
|
|||
<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 />
|
||||
<p>A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
</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,29 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" embedded />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
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>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -24,7 +24,14 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc
|
||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||
children: [
|
||||
{
|
||||
id: 'tailwind',
|
||||
label: 'Tailwind',
|
||||
component: TailwindDoc
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,174 @@
|
|||
<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 />
|
||||
<p>A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
</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'
|
||||
},
|
||||
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: 'overflow-hidden flex flex-auto cursor-pointer',
|
||||
label: ({ props }) => ({
|
||||
class: [
|
||||
'block overflow-hidden whitespace-nowrap cursor-pointer overflow-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: '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: '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: '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: '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-400 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: '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: '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: '-mt-2 absolute top-1/2',
|
||||
clearicon: '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,37 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" embedded />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
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>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -24,7 +24,14 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc
|
||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||
children: [
|
||||
{
|
||||
id: 'tailwind',
|
||||
label: 'Tailwind',
|
||||
component: TailwindDoc
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,171 @@
|
|||
<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 />
|
||||
<p>A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" :service="['ProductService']" embedded />
|
||||
</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'
|
||||
},
|
||||
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 {
|
||||
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,49 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" :service="['ProductService']" embedded />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
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>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -24,7 +24,14 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc
|
||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||
children: [
|
||||
{
|
||||
id: 'tailwind',
|
||||
label: 'Tailwind',
|
||||
component: TailwindDoc
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,140 @@
|
|||
<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 />
|
||||
<p>A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
</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,86 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" embedded />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
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>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -24,7 +24,14 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc
|
||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||
children: [
|
||||
{
|
||||
id: 'tailwind',
|
||||
label: 'Tailwind',
|
||||
component: TailwindDoc
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,214 @@
|
|||
<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 />
|
||||
<p>A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
</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,26 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" embedded />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<Paginator :rows="10" :totalRecords="120" :rowsPerPageOptions="[10, 20, 30]"></Paginator>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<\/script>`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -24,7 +24,14 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc
|
||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||
children: [
|
||||
{
|
||||
id: 'tailwind',
|
||||
label: 'Tailwind',
|
||||
component: TailwindDoc
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,15 +1,83 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
|
||||
<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 />
|
||||
<p>A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" embedded />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
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'
|
||||
},
|
||||
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 {
|
||||
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">
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -24,7 +24,14 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc
|
||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||
children: [
|
||||
{
|
||||
id: 'tailwind',
|
||||
label: 'Tailwind',
|
||||
component: TailwindDoc
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,87 @@
|
|||
<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 />
|
||||
<p>A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
</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'
|
||||
},
|
||||
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,29 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" embedded />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
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>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -24,7 +24,14 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc
|
||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||
children: [
|
||||
{
|
||||
id: 'tailwind',
|
||||
label: 'Tailwind',
|
||||
component: TailwindDoc
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,305 @@
|
|||
<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 />
|
||||
<p>A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" :service="['ProductService']" embedded />
|
||||
</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,66 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" :service="['ProductService']" embedded />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
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>`,
|
||||
data: `
|
||||
/* ProductService */
|
||||
{
|
||||
id: '1000',
|
||||
code: 'f230fh0g3',
|
||||
name: 'Bamboo Watch',
|
||||
description: 'Product Description',
|
||||
image: '/bamboo-watch.jpg',
|
||||
price: 65,
|
||||
category: 'Accessories',
|
||||
quantity: 24,
|
||||
inventoryStatus: 'INSTOCK',
|
||||
rating: 5
|
||||
},
|
||||
...
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -24,7 +24,14 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc
|
||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||
children: [
|
||||
{
|
||||
id: 'tailwind',
|
||||
label: 'Tailwind',
|
||||
component: TailwindDoc
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,86 @@
|
|||
<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 />
|
||||
<p>A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
</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,46 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" embedded />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
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>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -24,7 +24,14 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc
|
||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||
children: [
|
||||
{
|
||||
id: 'tailwind',
|
||||
label: 'Tailwind',
|
||||
component: TailwindDoc
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,80 @@
|
|||
<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 />
|
||||
<p>A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
</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,29 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" embedded />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
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>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -24,7 +24,14 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc
|
||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||
children: [
|
||||
{
|
||||
id: 'tailwind',
|
||||
label: 'Tailwind',
|
||||
component: TailwindDoc
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,61 @@
|
|||
<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 />
|
||||
<p>A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
</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,30 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" embedded />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
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>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -24,7 +24,14 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc
|
||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||
children: [
|
||||
{
|
||||
id: 'tailwind',
|
||||
label: 'Tailwind',
|
||||
component: TailwindDoc
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,96 @@
|
|||
<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 />
|
||||
<p>A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
</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,29 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" embedded />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
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>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -24,7 +24,14 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc
|
||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||
children: [
|
||||
{
|
||||
id: 'tailwind',
|
||||
label: 'Tailwind',
|
||||
component: TailwindDoc
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,79 @@
|
|||
<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 />
|
||||
<p>A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
</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>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue