add TailwindDoc to Panels, Media, Misc, Buttons, Upload and Chart
ATAKAN TEPE
parent
cc392c38ad
commit
eb8687db09
|
|
@ -0,0 +1,104 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<NuxtLink to="/tailwind">Tailwind Customization</NuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<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 {
|
||||
accordion: {
|
||||
root: 'mb-1',
|
||||
accordiontab: {
|
||||
root: 'mb-1',
|
||||
header: ({ props }) => ({
|
||||
class: [
|
||||
{ 'select-none pointer-events-none cursor-default opacity-60': props?.disabled } // Condition
|
||||
]
|
||||
}),
|
||||
headerAction: ({ context }) => ({
|
||||
class: [
|
||||
'flex items-center cursor-pointer relative no-underline select-none', // Alignments
|
||||
'p-5 transition duration-200 ease-in-out rounded-t-md font-bold transition-shadow duration-200', // Padding and transition
|
||||
'border border-gray-300 bg-gray-100 text-gray-600', // Borders and colors
|
||||
'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80 dark:hover:bg-gray-800/80 dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]', // Dark mode
|
||||
'hover:border-gray-300 hover:bg-gray-200 hover:text-gray-800', // Hover
|
||||
'focus:outline-none focus:outline-offset-0 focus:shadow-[inset_0_0_0_0.2rem_rgba(191,219,254,1)]', // Focus
|
||||
{ 'rounded-br-md rounded-bl-md': !context.active, 'rounded-br-0 rounded-bl-0 text-gray-800': context.active } // Condition
|
||||
]
|
||||
}),
|
||||
headerIcon: 'inline-block mr-2',
|
||||
headerTitle: 'leading-none',
|
||||
content: {
|
||||
class: [
|
||||
'p-5 border border-gray-300 bg-white text-gray-700 border-t-0 rounded-tl-none rounded-tr-none rounded-br-lg rounded-bl-lg',
|
||||
'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80' // Dark mode
|
||||
]
|
||||
},
|
||||
transition: TRANSITIONS.toggleable
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<Accordion :activeIndex="0">
|
||||
<AccordionTab header="Header I">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
</AccordionTab>
|
||||
<AccordionTab header="Header II">
|
||||
<p>
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
|
||||
ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
|
||||
</p>
|
||||
</AccordionTab>
|
||||
<AccordionTab header="Header III">
|
||||
<p>
|
||||
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
|
||||
officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
|
||||
</p>
|
||||
</AccordionTab>
|
||||
</Accordion>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<\/script>`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -10,6 +10,7 @@
|
|||
|
||||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -24,7 +25,15 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc
|
||||
component: UnstyledDoc,
|
||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||
children: [
|
||||
{
|
||||
id: 'tailwind',
|
||||
label: 'Tailwind',
|
||||
component: TailwindDoc
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,91 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<NuxtLink to="/tailwind">Tailwind Customization</NuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<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 {
|
||||
avatar: {
|
||||
root: ({ props, parent }) => ({
|
||||
class: [
|
||||
'flex items-center justify-center',
|
||||
'bg-gray-300 dark:bg-gray-800',
|
||||
{
|
||||
'rounded-lg': props.shape == 'square',
|
||||
'rounded-full': props.shape == 'circle'
|
||||
},
|
||||
{
|
||||
'text-base h-8 w-8': props.size == null || props.size == 'normal',
|
||||
'w-12 h-12 text-xl': props.size == 'large',
|
||||
'w-16 h-16 text-2xl': props.size == 'xlarge'
|
||||
},
|
||||
{
|
||||
'-ml-4 border-2 border-white dark:border-gray-900': parent.instance.$css !== undefined
|
||||
}
|
||||
]
|
||||
}),
|
||||
image: 'h-full w-full'
|
||||
},
|
||||
avatargroup: {
|
||||
root: 'flex items-center'
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<div class="flex flex-wrap gap-5">
|
||||
<div>
|
||||
<h5>Image</h5>
|
||||
<div class="flex">
|
||||
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" class="mr-2" size="xlarge" shape="circle" />
|
||||
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" class="mr-2" size="large" shape="circle" />
|
||||
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h5>Badge</h5>
|
||||
<Avatar v-badge.danger="4" class="p-overlay-badge" image="https://primefaces.org/cdn/primevue/images/organization/walter.jpg" size="xlarge" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h5>Gravatar</h5>
|
||||
<Avatar image="https://www.gravatar.com/avatar/05dfd4b41340d09cae045235eb0893c3?d=mp" class="flex align-items-center justify-content-center mr-2" size="xlarge" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card flex justify-content-center">
|
||||
<AvatarGroup>
|
||||
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" size="large" shape="circle" />
|
||||
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" size="large" shape="circle" />
|
||||
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" size="large" shape="circle" />
|
||||
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" size="large" shape="circle" />
|
||||
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/xuxuefeng.png" size="large" shape="circle" />
|
||||
<Avatar label="+2" shape="circle" size="large" style="background-color: '#9c27b0', color: '#ffffff'" />
|
||||
</AvatarGroup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
<\/script>`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -10,6 +10,7 @@
|
|||
|
||||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -24,7 +25,15 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc
|
||||
component: UnstyledDoc,
|
||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||
children: [
|
||||
{
|
||||
id: 'tailwind',
|
||||
label: 'Tailwind',
|
||||
component: TailwindDoc
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,92 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<NuxtLink to="/tailwind">Tailwind Customization</NuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<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 {
|
||||
directives: {
|
||||
badge: {
|
||||
root: ({ context }) => ({
|
||||
class: [
|
||||
'absolute top-0 right-0 transform translate-x-1/2 -translate-y-1/2 origin-top-right m-0',
|
||||
'text-xs leading-6 flex items-center justify-center',
|
||||
'text-center text-white font-bold',
|
||||
{
|
||||
'rounded-full p-0': context.nogutter || context.dot,
|
||||
'rounded-[10px] px-2': !context.nogutter && !context.dot,
|
||||
'min-w-[0.5rem] w-2 h-2': context.dot,
|
||||
'min-w-[1.5rem] h-6': !context.dot
|
||||
},
|
||||
{
|
||||
'bg-blue-500 ': context.info || (!context.info && !context.success && !context.warning && !context.danger),
|
||||
'bg-green-500 ': context.success,
|
||||
'bg-orange-500 ': context.warning,
|
||||
'bg-red-500 ': context.danger
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
},
|
||||
badge: {
|
||||
root: ({ props }) => ({
|
||||
class: [
|
||||
'rounded-full p-0 text-center inline-block',
|
||||
'bg-blue-500 text-white font-bold',
|
||||
{
|
||||
'bg-gray-500 ': props.severity == 'secondary',
|
||||
'bg-green-500 ': props.severity == 'success',
|
||||
'bg-blue-500 ': props.severity == 'info',
|
||||
'bg-orange-500 ': props.severity == 'warning',
|
||||
'bg-purple-500 ': props.severity == 'help',
|
||||
'bg-red-500 ': props.severity == 'danger'
|
||||
},
|
||||
{
|
||||
'text-xs min-w-[1.5rem] h-[1.5rem] leading-[1.5rem]': props.size == null,
|
||||
'text-lg min-w-[2.25rem] h-[2.25rem] leading-[2.25rem]': props.size == 'large',
|
||||
'text-2xl min-w-[3rem] h-[3rem] leading-[3rem]': props.size == 'xlarge'
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex flex-wrap justify-center gap-2">
|
||||
<Badge value="2"></Badge>
|
||||
<Badge value="8" severity="success"></Badge>
|
||||
<Badge value="4" severity="info"></Badge>
|
||||
<Badge value="12" severity="warning"></Badge>
|
||||
<Badge value="3" severity="danger"></Badge>
|
||||
</div>
|
||||
|
||||
<div class="card flex flex-wrap justify-center gap-4 mt-4">
|
||||
<i v-badge="2" class="pi pi-bell relative text-gray-700 dark:text-white/80" style="font-size: 2rem" />
|
||||
<i v-badge.danger="'5+'" class="pi pi-calendar relative text-gray-700 dark:text-white/80" style="font-size: 2rem" />
|
||||
<i v-badge.danger class="pi pi-envelope relative text-gray-700 dark:text-white/80" style="font-size: 2rem" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
<\/script>`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -10,6 +10,7 @@
|
|||
|
||||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -24,7 +25,15 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc
|
||||
component: UnstyledDoc,
|
||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||
children: [
|
||||
{
|
||||
id: 'tailwind',
|
||||
label: 'Tailwind',
|
||||
component: TailwindDoc
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,55 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<NuxtLink to="/tailwind">Tailwind Customization</NuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<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 {
|
||||
blockui: {
|
||||
root: 'relative',
|
||||
mask: 'bg-black/40'
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<div class="mb-3">
|
||||
<Button label="Block" @click="blocked = true" class="mr-2"></Button>
|
||||
<Button label="Unblock" @click="blocked = false"></Button>
|
||||
</div>
|
||||
<BlockUI :blocked="blocked">
|
||||
<Panel header="Basic">
|
||||
<p class="text-gray-700 dark:text-white/80 m-0">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
</Panel>
|
||||
</BlockUI>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const blocked = ref(false);
|
||||
<\/script>`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -10,6 +10,7 @@
|
|||
|
||||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -24,7 +25,15 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc
|
||||
component: UnstyledDoc,
|
||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||
children: [
|
||||
{
|
||||
id: 'tailwind',
|
||||
label: 'Tailwind',
|
||||
component: TailwindDoc
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,113 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<NuxtLink to="/tailwind">Tailwind Customization</NuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<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 {
|
||||
button: {
|
||||
root: ({ props, context }) => ({
|
||||
class: [
|
||||
'items-center cursor-pointer inline-flex overflow-hidden relative select-none text-center align-bottom h-full',
|
||||
'transition duration-200 ease-in-out',
|
||||
'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(157,193,251,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(147,197,253,0.7),0_1px_2px_0_rgba(0,0,0,0)]', // Primary button focus
|
||||
{
|
||||
'text-white bg-blue-500 border border-blue-500 hover:bg-blue-600 hover:border-blue-600': !props.link && props.severity === null && !props.text && !props.outlined && !props.plain,
|
||||
'text-blue-600 bg-transparent border-transparent': props.link
|
||||
},
|
||||
{
|
||||
'text-white bg-gray-500 border border-gray-500 hover:bg-gray-600 hover:border-gray-600': props.severity === 'secondary' && !props.text && !props.outlined && !props.plain,
|
||||
'text-white bg-green-500 border border-green-500 hover:bg-green-600 hover:border-green-600': props.severity === 'success' && !props.text && !props.outlined && !props.plain,
|
||||
'text-white bg-blue-500 border border-blue-500 hover:bg-blue-600 hover:border-blue-600': props.severity === 'info' && !props.text && !props.outlined && !props.plain,
|
||||
'text-white bg-orange-500 border border-orange-500 hover:bg-orange-600 hover:border-orange-600': props.severity === 'warning' && !props.text && !props.outlined && !props.plain,
|
||||
'text-white bg-purple-500 border border-purple-500 hover:bg-purple-600 hover:border-purple-600': props.severity === 'help' && !props.text && !props.outlined && !props.plain,
|
||||
'text-white bg-red-500 border border-red-500 hover:bg-red-600 hover:border-red-600': props.severity === 'danger' && !props.text && !props.outlined && !props.plain
|
||||
},
|
||||
{ 'shadow-lg': props.raised },
|
||||
{ 'rounded-md': !props.rounded, 'rounded-full': props.rounded },
|
||||
{
|
||||
'bg-transparent border-transparent': props.text && !props.plain,
|
||||
'text-blue-500 hover:bg-blue-300/20': props.text && (props.severity === null || props.severity === 'info') && !props.plain,
|
||||
'text-gray-500 hover:bg-gray-300/20': props.text && props.severity === 'secondary' && !props.plain,
|
||||
'text-green-500 hover:bg-green-300/20': props.text && props.severity === 'success' && !props.plain,
|
||||
'text-orange-500 hover:bg-orange-300/20': props.text && props.severity === 'warning' && !props.plain,
|
||||
'text-purple-500 hover:bg-purple-300/20': props.text && props.severity === 'help' && !props.plain,
|
||||
'text-red-500 hover:bg-red-300/20': props.text && props.severity === 'danger' && !props.plain
|
||||
},
|
||||
{ 'shadow-lg': props.raised && props.text },
|
||||
{
|
||||
'text-gray-500 hover:bg-gray-300/20': props.plain & props.text,
|
||||
'text-gray-500 border border-gray-500 hover:bg-gray-300/20': props.plain & props.outlined,
|
||||
'text-white bg-gray-500 border border-gray-500 hover:bg-gray-600 hover:border-gray-600': props.plain & !props.outlined & !props.text
|
||||
},
|
||||
{
|
||||
'bg-transparent border': props.outlined && !props.plain,
|
||||
'text-blue-500 border border-blue-500 hover:bg-blue-300/20': props.outlined && (props.severity === null || props.severity === 'info') && !props.plain,
|
||||
'text-gray-500 border border-gray-500 hover:bg-gray-300/20': props.outlined && props.severity === 'secondary' && !props.plain,
|
||||
'text-green-500 border border-green-500 hover:bg-green-300/20': props.outlined && props.severity === 'success' && !props.plain,
|
||||
'text-orange-500 border border-orange-500 hover:bg-orange-300/20': props.outlined && props.severity === 'warning' && !props.plain,
|
||||
'text-purple-500 border border-purple-500 hover:bg-purple-300/20': props.outlined && props.severity === 'help' && !props.plain,
|
||||
'text-red-500 border border-red-500 hover:bg-red-300/20': props.outlined && props.severity === 'danger' && !props.plain
|
||||
},
|
||||
{ 'px-4 py-3 text-base': props.size === null, 'text-xs py-2 px-3': props.size === 'small', 'text-xl py-3 px-4': props.size === 'large' },
|
||||
{ 'opacity-60 pointer-events-none cursor-default': context.disabled }
|
||||
]
|
||||
}),
|
||||
label: ({ props }) => ({
|
||||
class: [
|
||||
'flex-1',
|
||||
'duration-200',
|
||||
'font-bold',
|
||||
{
|
||||
'hover:underline': props.link
|
||||
}
|
||||
]
|
||||
}),
|
||||
icon: ({ props }) => ({
|
||||
class: [
|
||||
'mx-0',
|
||||
{
|
||||
'mr-2': props.iconPos == 'left' && props.label != null,
|
||||
'ml-2': props.iconPos == 'right' && props.label != null,
|
||||
'mb-2': props.iconPos == 'top' && props.label != null,
|
||||
'mt-2': props.iconPos == 'bottom' && props.label != null
|
||||
}
|
||||
]
|
||||
}),
|
||||
badge: ({ props }) => ({
|
||||
class: [{ 'ml-2 w-4 h-4 leading-none flex items-center justify-center': props.badge }]
|
||||
})
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-center flex-wrap gap-3">
|
||||
<Button label="Primary" />
|
||||
<Button label="Secondary" severity="secondary" />
|
||||
<Button label="Success" severity="success" />
|
||||
<Button label="Info" severity="info" />
|
||||
<Button label="Warning" severity="warning" />
|
||||
<Button label="Help" severity="help" />
|
||||
<Button label="Danger" severity="danger" />
|
||||
</div>
|
||||
</template>`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -10,6 +10,7 @@
|
|||
|
||||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -24,7 +25,15 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc
|
||||
component: UnstyledDoc,
|
||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||
children: [
|
||||
{
|
||||
id: 'tailwind',
|
||||
label: 'Tailwind',
|
||||
component: TailwindDoc
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,71 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<NuxtLink to="/tailwind">Tailwind Customization</NuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<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 {
|
||||
card: {
|
||||
root: {
|
||||
class: [
|
||||
'bg-white text-gray-700 shadow-md rounded-md', // Background, text color, box shadow, and border radius.
|
||||
'dark:bg-gray-900 dark:text-white ' //dark
|
||||
]
|
||||
},
|
||||
body: 'p-5', // Padding.
|
||||
title: 'text-2xl font-bold mb-2', // Font size, font weight, and margin bottom.
|
||||
subtitle: {
|
||||
class: [
|
||||
'font-normal mb-2 text-gray-600', // Font weight, margin bottom, and text color.
|
||||
'dark:text-white/60 ' //dark
|
||||
]
|
||||
},
|
||||
content: 'py-5', // Vertical padding.
|
||||
footer: 'pt-5' // Top padding.
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex items-center justify-center">
|
||||
<Card style="width: 25em">
|
||||
<template #header>
|
||||
<img alt="user header" src="https://primefaces.org/cdn/primevue/images/usercard.png" />
|
||||
</template>
|
||||
<template #title> Advanced Card </template>
|
||||
<template #subtitle> Card subtitle </template>
|
||||
<template #content>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
|
||||
quas!
|
||||
</p>
|
||||
</template>
|
||||
<template #footer>
|
||||
<Button icon="pi pi-check" label="Save" />
|
||||
<Button icon="pi pi-times" label="Cancel" severity="secondary" style="margin-left: 0.5em" />
|
||||
</template>
|
||||
</Card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<\/script>`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -10,8 +10,8 @@
|
|||
|
||||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -24,7 +24,15 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc
|
||||
component: UnstyledDoc,
|
||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||
children: [
|
||||
{
|
||||
id: 'tailwind',
|
||||
label: 'Tailwind',
|
||||
component: TailwindDoc
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,145 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<NuxtLink to="/tailwind">Tailwind Customization</NuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<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 {
|
||||
carousel: {
|
||||
root: 'flex flex-col',
|
||||
content: 'flex flex-col overflow-auto',
|
||||
container: ({ props }) => ({
|
||||
class: [
|
||||
'flex',
|
||||
{
|
||||
'flex-row': props.orientation !== 'vertical',
|
||||
'flex-col': props.orientation == 'vertical'
|
||||
}
|
||||
]
|
||||
}),
|
||||
previousbutton: {
|
||||
class: ['flex justify-center items-center self-center overflow-hidden relative shrink-0 grow-0', 'w-8 h-8 text-gray-600 border-0 bg-transparent rounded-full transition duration-200 ease-in-out mx-2']
|
||||
},
|
||||
itemscontent: 'overflow-hidden w-full',
|
||||
itemscontainer: ({ props }) => ({
|
||||
class: [
|
||||
'flex ',
|
||||
{
|
||||
'flex-row': props.orientation !== 'vertical',
|
||||
'flex-col h-full': props.orientation == 'vertical'
|
||||
}
|
||||
]
|
||||
}),
|
||||
item: ({ props }) => ({
|
||||
class: [
|
||||
'flex shrink-0 grow',
|
||||
{
|
||||
'w-1/3': props.orientation !== 'vertical',
|
||||
'w-full': props.orientation == 'vertical'
|
||||
}
|
||||
]
|
||||
}),
|
||||
indicators: {
|
||||
class: ['flex flex-row justify-center flex-wrap']
|
||||
},
|
||||
indicator: 'mr-2 mb-2',
|
||||
indicatorbutton: ({ context }) => ({
|
||||
class: [
|
||||
'w-8 h-2 transition duration-200 rounded-0',
|
||||
'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
|
||||
{
|
||||
'bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600': !context.highlighted,
|
||||
'bg-blue-500 hover:bg-blue-600': context.highlighted
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="responsiveOptions">
|
||||
<template #item="slotProps">
|
||||
<div class="border bg-white dark:bg-gray-900 border-gray-300 dark:border-blue-900/40 rounded-lg m-2 text-center py-5 px-3">
|
||||
<div class="mb-3">
|
||||
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-1/2 shadow-sm" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="mb-1 text-gray-700 dark:text-white/80">{{ slotProps.data.name }}</h4>
|
||||
<h6 class="mt-0 mb-3 text-gray-700 dark:text-white/80">\${{ slotProps.data.price }}</h6>
|
||||
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
|
||||
<div class="mt-5">
|
||||
<Button icon="pi pi-search" rounded class="mr-2 text-gray-700 dark:text-white/80 inline-flex" />
|
||||
<Button icon="pi pi-star-fill" rounded severity="success" class="mr-2 text-gray-700 dark:text-white/80 inline-flex" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Carousel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import { ProductService } from '@/service/ProductService';
|
||||
|
||||
onMounted(() => {
|
||||
ProductService.getProductsSmall().then((data) => (products.value = data.slice(0, 9)));
|
||||
})
|
||||
|
||||
const products = ref();
|
||||
const responsiveOptions = ref([
|
||||
{
|
||||
breakpoint: '1199px',
|
||||
numVisible: 3,
|
||||
numScroll: 3
|
||||
},
|
||||
{
|
||||
breakpoint: '991px',
|
||||
numVisible: 2,
|
||||
numScroll: 2
|
||||
},
|
||||
{
|
||||
breakpoint: '767px',
|
||||
numVisible: 1,
|
||||
numScroll: 1
|
||||
}
|
||||
]);
|
||||
|
||||
const getSeverity = (status) => {
|
||||
switch (status) {
|
||||
case 'INSTOCK':
|
||||
return 'success';
|
||||
|
||||
case 'LOWSTOCK':
|
||||
return 'warning';
|
||||
|
||||
case 'OUTOFSTOCK':
|
||||
return 'danger';
|
||||
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
<\/script>`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -10,6 +10,7 @@
|
|||
|
||||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -24,7 +25,15 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc
|
||||
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
|
||||
<NuxtLink to="/tailwind">Tailwind Customization</NuxtLink> 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 {
|
||||
chart: {
|
||||
root: 'relative'
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<Chart type="bar" :data="chartData" :options="chartOptions" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const chartData = ref({
|
||||
labels: ['Q1', 'Q2', 'Q3', 'Q4'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'Sales',
|
||||
data: [540, 325, 702, 620],
|
||||
backgroundColor: ['rgba(255, 159, 64, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(153, 102, 255, 0.2)'],
|
||||
borderColor: ['rgb(255, 159, 64)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)', 'rgb(153, 102, 255)'],
|
||||
borderWidth: 1
|
||||
}
|
||||
]
|
||||
});
|
||||
const chartOptions = ref({
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true
|
||||
}
|
||||
}
|
||||
});
|
||||
<\/script>`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -10,6 +10,7 @@
|
|||
|
||||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -24,7 +25,15 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc
|
||||
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
|
||||
<NuxtLink to="/tailwind">Tailwind Customization</NuxtLink> 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 {
|
||||
chip: {
|
||||
root: {
|
||||
class: ['inline-flex items-center', 'bg-gray-200 text-gray-800 rounded-[16px] px-3 dark:text-white/80 dark:bg-gray-900']
|
||||
},
|
||||
label: 'leading-6 mt-1.5 mb-1.5',
|
||||
icon: 'leading-6 mr-2',
|
||||
image: {
|
||||
class: ['w-9 h-9 ml-[-0.75rem] mr-2', 'rounded-full']
|
||||
},
|
||||
removeIcon: {
|
||||
class: ['ml-2 rounded-md transition duration-200 ease-in-out', 'cursor-pointer leading-6']
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex flex-wrap gap-2">
|
||||
<Chip label="Apple" icon="pi pi-apple" />
|
||||
<Chip label="Facebook" icon="pi pi-facebook" />
|
||||
<Chip label="Google" icon="pi pi-google" />
|
||||
<Chip label="Microsoft" icon="pi pi-microsoft" removable />
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
|
||||
<\/script>`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -10,6 +10,7 @@
|
|||
|
||||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -24,7 +25,15 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc
|
||||
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
|
||||
<NuxtLink to="/tailwind">Tailwind Customization</NuxtLink> 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 {
|
||||
divider: {
|
||||
root: ({ props }) => ({
|
||||
class: [
|
||||
'flex relative', // alignments.
|
||||
{
|
||||
'w-full my-5 mx-0 py-0 px-5 before:block before:left-0 before:absolute before:top-1/2 before:w-full before:border-t before:border-gray-300 before:dark:border-blue-900/40': props.layout == 'horizontal', // Padding and borders for horizontal layout.
|
||||
'min-h-full mx-4 md:mx-5 py-5 before:block before:min-h-full before:absolute before:left-1/2 before:top-0 before:transform before:-translate-x-1/2 before:border-l before:border-gray-300 before:dark:border-blue-900/40':
|
||||
props.layout == 'vertical' // Padding and borders for vertical layout.
|
||||
},
|
||||
{
|
||||
'before:border-solid': props.type == 'solid',
|
||||
'before:border-dotted': props.type == 'dotted',
|
||||
'before:border-dashed': props.type == 'dashed'
|
||||
} // Border type condition.
|
||||
]
|
||||
}),
|
||||
content: 'px-1 bg-white z-10 dark:bg-gray-900' // Padding and background color.
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card text-gray-700 dark:text-white/80">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
|
||||
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
|
||||
<Divider align="left" type="solid">
|
||||
<b>Left</b>
|
||||
</Divider>
|
||||
|
||||
<p>
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
|
||||
voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
|
||||
</p>
|
||||
|
||||
<Divider align="center" type="dotted">
|
||||
<b>Center</b>
|
||||
</Divider>
|
||||
|
||||
<p>
|
||||
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia
|
||||
deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
|
||||
</p>
|
||||
|
||||
<Divider align="right" type="dashed">
|
||||
<b>Right</b>
|
||||
</Divider>
|
||||
|
||||
<p>
|
||||
Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
|
||||
maiores alias consequatur aut perferendis doloribus asperiores repellat. Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien. Morbi dapibus luctus odio.
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<\/script>`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -10,6 +10,7 @@
|
|||
|
||||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -24,7 +25,15 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc
|
||||
component: UnstyledDoc,
|
||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||
children: [
|
||||
{
|
||||
id: 'tailwind',
|
||||
label: 'Tailwind',
|
||||
component: TailwindDoc
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,90 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<NuxtLink to="/tailwind">Tailwind Customization</NuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<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 {
|
||||
fieldset: {
|
||||
root: {
|
||||
class: [
|
||||
'border border-gray-300 bg-white text-gray-700 rounded-md block mx-2 my-0.5 pl-4 pr-5 inline-size-min', // Borders, background, text color, spacing, and inline size.
|
||||
'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80' //dark
|
||||
]
|
||||
},
|
||||
legend: ({ props }) => ({
|
||||
class: [
|
||||
'border border-gray-300 text-gray-700 bg-gray-50 font-bold rounded-md',
|
||||
'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80 ', //dark
|
||||
{
|
||||
'p-0 transition-none hover:bg-gray-100 hover:border-gray-300 hover:text-gray-900 dark:hover:text-white/80 dark:hover:bg-gray-800/80 dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]': props.toggleable,
|
||||
'p-5': !props.toggleable
|
||||
}
|
||||
]
|
||||
}),
|
||||
toggler: ({ props }) => ({
|
||||
class: [
|
||||
'flex items-center justify-center',
|
||||
{
|
||||
'p-5 text-gray-700 rounded-md transition-none cursor-pointer overflow-hidden relative select-none hover:text-gray-900 focus:focus:shadow-[inset_0_0_0_0.2rem_rgba(191,219,254,1)] dark:text-white/80 dark:hover:text-white/80 dark:hover:bg-gray-800/60 dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]':
|
||||
props.toggleable
|
||||
}
|
||||
]
|
||||
}),
|
||||
togglerIcon: 'mr-2 inline-block', // Margin and display style.
|
||||
legendTitle: 'flex items-center justify-center leading-none', // alignments, and leading style.
|
||||
content: 'p-5', // Padding.
|
||||
transition: TRANSITIONS.toggleable
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<Fieldset legend="Header" :toggleable="true">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
</Fieldset>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<\/script>`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -10,6 +10,7 @@
|
|||
|
||||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -24,7 +25,15 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc
|
||||
component: UnstyledDoc,
|
||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||
children: [
|
||||
{
|
||||
id: 'tailwind',
|
||||
label: 'Tailwind',
|
||||
component: TailwindDoc
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,75 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<NuxtLink to="/tailwind">Tailwind Customization</NuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<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 {
|
||||
fileupload: {
|
||||
input: 'hidden',
|
||||
buttonbar: {
|
||||
class: ['flex flex-wrap', 'bg-gray-50 dark:bg-gray-800 p-5 border border-solid border-gray-300 dark:border-blue-900/40 text-gray-700 dark:text-white/80 rounded-tr-lg rounded-tl-lg gap-2 border-b-0']
|
||||
},
|
||||
chooseButton: {
|
||||
class: ['text-white bg-blue-500 border border-blue-500 p-3 px-5 rounded-md text-base', 'overflow-hidden relative']
|
||||
},
|
||||
chooseIcon: 'mr-2 inline-block',
|
||||
chooseButtonLabel: 'flex-1 font-bold',
|
||||
uploadbutton: {
|
||||
icon: 'mr-2'
|
||||
},
|
||||
cancelbutton: {
|
||||
icon: 'mr-2'
|
||||
},
|
||||
content: {
|
||||
class: ['relative', 'bg-white dark:bg-gray-900 p-8 border border-gray-300 dark:border-blue-900/40 text-gray-700 dark:text-white/80 rounded-b-lg']
|
||||
},
|
||||
file: {
|
||||
class: ['flex items-center flex-wrap', 'p-4 border border-gray-300 dark:border-blue-900/40 rounded gap-2 mb-2', 'last:mb-0']
|
||||
},
|
||||
thumbnail: 'shrink-0',
|
||||
fileName: 'mb-2',
|
||||
fileSize: 'mr-2',
|
||||
uploadicon: 'mr-2'
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<Toast />
|
||||
<FileUpload name="demo[]" url="./upload.php" @upload="onAdvancedUpload($event)" :multiple="true" accept="image/*" :maxFileSize="1000000">
|
||||
<template #empty>
|
||||
<p>Drag and drop files to here to upload.</p>
|
||||
</template>
|
||||
</FileUpload>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useToast } from "primevue/usetoast";
|
||||
const toast = useToast();
|
||||
|
||||
const onAdvancedUpload = () => {
|
||||
toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
|
||||
};
|
||||
<\/script>`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -10,6 +10,7 @@
|
|||
|
||||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -24,7 +25,15 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc
|
||||
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
|
||||
<NuxtLink to="/tailwind">Tailwind Customization</NuxtLink> 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 {
|
||||
galleria: {
|
||||
root: 'flex flex-col',
|
||||
content: 'flex flex-col',
|
||||
itemwrapper: 'flex flex-col relative',
|
||||
itemcontainer: 'relative flex h-full',
|
||||
item: 'flex justify-center items-center h-full w-full',
|
||||
thumbnailwrapper: 'flex flex-col overflow-auto shrink-0',
|
||||
thumbnailcontainer: {
|
||||
class: ['flex flex-row', 'bg-black/90 p-4']
|
||||
},
|
||||
previousthumbnailbutton: {
|
||||
class: [
|
||||
'self-center flex shrink-0 justify-center items-center overflow-hidden relative',
|
||||
'm-2 bg-transparent text-white w-8 h-8 transition duration-200 ease-in-out rounded-full',
|
||||
'hover:bg-white/10 hover:text-white',
|
||||
'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]'
|
||||
]
|
||||
},
|
||||
thumbnailitemscontainer: 'overflow-hidden w-full',
|
||||
thumbnailitems: 'flex',
|
||||
thumbnailitem: {
|
||||
class: ['overflow-auto flex items-center justify-center cursor-pointer opacity-50', 'flex-1 grow-0 shrink-0 w-20', 'hover:opacity-100 hover:transition-opacity hover:duration-300']
|
||||
},
|
||||
nextthumbnailbutton: {
|
||||
class: [
|
||||
'self-center flex shrink-0 justify-center items-center overflow-hidden relative',
|
||||
'm-2 bg-transparent text-white w-8 h-8 transition duration-200 ease-in-out rounded-full',
|
||||
'hover:bg-white/10 hover:text-white',
|
||||
'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]'
|
||||
]
|
||||
},
|
||||
indicators: {
|
||||
class: ['flex items-center justify-center', 'p-4']
|
||||
},
|
||||
indicator: 'mr-2',
|
||||
indicatorbutton: ({ context }) => ({
|
||||
class: [
|
||||
'w-4 h-4 transition duration-200 rounded-full',
|
||||
'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
|
||||
{
|
||||
'bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600': !context.highlighted,
|
||||
'bg-blue-500 hover:bg-blue-600': context.highlighted
|
||||
}
|
||||
]
|
||||
}),
|
||||
mask: {
|
||||
class: ['fixed top-0 left-0 w-full h-full', 'flex items-center justify-center', 'bg-black bg-opacity-90']
|
||||
},
|
||||
closebutton: {
|
||||
class: [
|
||||
'absolute top-0 right-0 flex justify-center items-center overflow-hidden m-2',
|
||||
'text-white bg-transparent w-12 h-12 rounded-full transition duration-200 ease-in-out',
|
||||
'hover:text-white hover:bg-white/10',
|
||||
'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]'
|
||||
]
|
||||
},
|
||||
closeicon: 'w-6 h-6',
|
||||
previousitembutton: {
|
||||
class: [
|
||||
'inline-flex justify-center items-center overflow-hidden',
|
||||
'bg-transparent text-white w-16 h-16 transition duration-200 ease-in-out rounded-md mx-2',
|
||||
'fixed top-1/2 mt-[-0.5rem]',
|
||||
'left-0',
|
||||
'hover:bg-white/10 hover:text-white',
|
||||
'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]'
|
||||
]
|
||||
},
|
||||
nextitembutton: {
|
||||
class: [
|
||||
'inline-flex justify-center items-center overflow-hidden',
|
||||
'bg-transparent text-white w-16 h-16 transition duration-200 ease-in-out rounded-md mx-2',
|
||||
'fixed top-1/2 mt-[-0.5rem]',
|
||||
'right-0',
|
||||
'hover:bg-white/10 hover:text-white',
|
||||
'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]'
|
||||
]
|
||||
},
|
||||
caption: {
|
||||
class: ['absolute bottom-0 left-0 w-full', 'bg-black/50 text-white p-4']
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card md:flex md:justify-center">
|
||||
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
|
||||
<template #item="slotProps">
|
||||
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
|
||||
</template>
|
||||
<template #thumbnail="slotProps">
|
||||
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
|
||||
</template>
|
||||
</Galleria>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import { PhotoService } from '@/service/PhotoService';
|
||||
|
||||
onMounted(() => {
|
||||
PhotoService.getImages().then((data) => (images.value = data));
|
||||
});
|
||||
|
||||
const images = ref();
|
||||
const responsiveOptions = ref([
|
||||
{
|
||||
breakpoint: '991px',
|
||||
numVisible: 4
|
||||
},
|
||||
{
|
||||
breakpoint: '767px',
|
||||
numVisible: 3
|
||||
},
|
||||
{
|
||||
breakpoint: '575px',
|
||||
numVisible: 1
|
||||
}
|
||||
]);
|
||||
<\/script>`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -10,6 +10,7 @@
|
|||
|
||||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -24,7 +25,15 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc
|
||||
component: UnstyledDoc,
|
||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||
children: [
|
||||
{
|
||||
id: 'tailwind',
|
||||
label: 'Tailwind',
|
||||
component: TailwindDoc
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,95 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<NuxtLink to="/tailwind">Tailwind Customization</NuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<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 {
|
||||
image: {
|
||||
root: 'relative inline-block',
|
||||
button: {
|
||||
class: [
|
||||
'absolute inset-0 flex items-center justify-center opacity-0 transition-opacity duration-300',
|
||||
'bg-transparent text-gray-100',
|
||||
'hover:opacity-100 hover:cursor-pointer hover:bg-black hover:bg-opacity-50' //Hover
|
||||
]
|
||||
},
|
||||
mask: {
|
||||
class: ['fixed top-0 left-0 w-full h-full', 'flex items-center justify-center', 'bg-black bg-opacity-90']
|
||||
},
|
||||
toolbar: {
|
||||
class: ['absolute top-0 right-0 flex', 'p-4']
|
||||
},
|
||||
rotaterightbutton: {
|
||||
class: [
|
||||
'flex justify-center items-center',
|
||||
'text-white bg-transparent w-12 h-12 rounded-full transition duration-200 ease-in-out mr-2',
|
||||
'hover:text-white hover:bg-white/10',
|
||||
'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]'
|
||||
]
|
||||
},
|
||||
rotaterighticon: 'w-6 h-6',
|
||||
rotateleftbutton: {
|
||||
class: [
|
||||
'flex justify-center items-center',
|
||||
'text-white bg-transparent w-12 h-12 rounded-full transition duration-200 ease-in-out mr-2',
|
||||
'hover:text-white hover:bg-white/10',
|
||||
'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]'
|
||||
]
|
||||
},
|
||||
rotatelefticon: 'w-6 h-6',
|
||||
zoomoutbutton: {
|
||||
class: [
|
||||
'flex justify-center items-center',
|
||||
'text-white bg-transparent w-12 h-12 rounded-full transition duration-200 ease-in-out mr-2',
|
||||
'hover:text-white hover:bg-white/10',
|
||||
'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]'
|
||||
]
|
||||
},
|
||||
zoomouticon: 'w-6 h-6',
|
||||
zoominbutton: {
|
||||
class: [
|
||||
'flex justify-center items-center',
|
||||
'text-white bg-transparent w-12 h-12 rounded-full transition duration-200 ease-in-out mr-2',
|
||||
'hover:text-white hover:bg-white/10',
|
||||
'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]'
|
||||
]
|
||||
},
|
||||
zoominicon: 'w-6 h-6',
|
||||
closebutton: {
|
||||
class: [
|
||||
'flex justify-center items-center',
|
||||
'text-white bg-transparent w-12 h-12 rounded-full transition duration-200 ease-in-out mr-2',
|
||||
'hover:text-white hover:bg-white/10',
|
||||
'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]'
|
||||
]
|
||||
},
|
||||
closeicon: 'w-6 h-6'
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" width="250" preview />
|
||||
</div>
|
||||
</template>`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -10,6 +10,7 @@
|
|||
|
||||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -24,7 +25,15 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc
|
||||
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
|
||||
<NuxtLink to="/tailwind">Tailwind Customization</NuxtLink> 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 {
|
||||
inplace: {
|
||||
display: {
|
||||
class: ['p-3 rounded-md transition duration-200 text-gray-700 dark:text-white/80', 'inline cursor-pointer', 'hover:bg-gray-200 hover:text-gray-700 dark:hover:bg-gray-800/80 dark:hover:text-white/80']
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<Inplace>
|
||||
<template #display>
|
||||
<span class="text-gray-700 dark:text-white/80"> View Content </span>
|
||||
</template>
|
||||
<template #content>
|
||||
<p class="text-gray-700 dark:text-white/80 m-0">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
</template>
|
||||
</Inplace>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
<\/script>`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -10,6 +10,7 @@
|
|||
|
||||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -24,7 +25,15 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc
|
||||
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
|
||||
<NuxtLink to="/tailwind">Tailwind Customization</NuxtLink> 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 {
|
||||
progressbar: {
|
||||
root: {
|
||||
class: ['overflow-hidden relative', 'border-0 h-6 bg-gray-200 rounded-md dark:bg-gray-800']
|
||||
},
|
||||
value: ({ props }) => ({
|
||||
class: [
|
||||
'border-0 m-0 bg-blue-500',
|
||||
{
|
||||
'transition-width duration-1000 ease-in-out absolute items-center border-0 flex h-full justify-center overflow-hidden w-0': props.mode !== 'indeterminate',
|
||||
'progressbar-value-animate before:absolute before:top-0 before:left-0 before:bottom-0 before:bg-inherit after:absolute after:top-0 after:left-0 after:bottom-0 after:bg-inherit after:delay-1000': props.mode == 'indeterminate'
|
||||
}
|
||||
]
|
||||
}),
|
||||
label: {
|
||||
class: ['inline-flex', 'text-white leading-6']
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<ProgressBar :value="50"></ProgressBar>
|
||||
</div>
|
||||
<div class="card">
|
||||
<Toast></Toast>
|
||||
<ProgressBar :value="value1" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onBeforeUnmount } from "vue";
|
||||
import { useToast } from "primevue/usetoast";
|
||||
|
||||
onMounted(() => {
|
||||
startProgress();
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
endProgress();
|
||||
});
|
||||
|
||||
const toast = useToast();
|
||||
const value1 = ref(0);
|
||||
const interval = ref();
|
||||
const startProgress = () => {
|
||||
interval.value = setInterval(() => {
|
||||
let newValue = value1.value + Math.floor(Math.random() * 10) + 1;
|
||||
if (newValue >= 100) {
|
||||
newValue = 100;
|
||||
toast.add({ severity: 'info', summary: 'Success', detail: 'Process Completed', life: 1000 });
|
||||
}
|
||||
value1.value = newValue;
|
||||
}, 2000);
|
||||
};
|
||||
const endProgress = () => {
|
||||
clearInterval(interval.value);
|
||||
interval.value = null;
|
||||
};
|
||||
<\/script>`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -10,6 +10,7 @@
|
|||
|
||||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -24,7 +25,15 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc
|
||||
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
|
||||
<NuxtLink to="/tailwind">Tailwind Customization</NuxtLink> 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 {
|
||||
progressspinner: {
|
||||
root: {
|
||||
class: ['relative mx-auto w-28 h-28 inline-block', 'before:block before:pt-full']
|
||||
},
|
||||
spinner: 'absolute top-0 bottom-0 left-0 right-0 m-auto w-full h-full transform origin-center animate-spin',
|
||||
circle: 'text-red-500 progress-spinner-circle'
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<ProgressSpinner />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<\/script>`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -10,6 +10,7 @@
|
|||
|
||||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -24,7 +25,15 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc
|
||||
component: UnstyledDoc,
|
||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||
children: [
|
||||
{
|
||||
id: 'tailwind',
|
||||
label: 'Tailwind',
|
||||
component: TailwindDoc
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,45 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<NuxtLink to="/tailwind">Tailwind Customization</NuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<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 {
|
||||
directives: {
|
||||
ripple: {
|
||||
root: {
|
||||
class: ['block absolute bg-white/50 rounded-full pointer-events-none'],
|
||||
style: 'transform: scale(0)'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<Button label="Submit" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<\/script>`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -10,6 +10,7 @@
|
|||
|
||||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -24,7 +25,15 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc
|
||||
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
|
||||
<NuxtLink to="/tailwind">Tailwind Customization</NuxtLink> 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 {
|
||||
scrollpanel: {
|
||||
wrapper: 'overflow-hidden relative float-left h-full w-full z-[1]',
|
||||
content: 'box-border h-[calc(100%+18px)] overflow-scroll pr-[18px] pb-[18px] pl-0 pt-0 relative scrollbar-none w-[calc(100%+18px)] [&::-webkit-scrollbar]:hidden',
|
||||
barX: {
|
||||
class: ['relative bg-gray-100 invisible rounded cursor-pointer h-[9px] bottom-0 z-[2]', 'transition duration-[250ms] ease-linear']
|
||||
},
|
||||
barY: {
|
||||
class: ['relative bg-gray-100 rounded cursor-pointer w-[9px] top-0 z-[2]', 'transition duration-[250ms] ease-linear']
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<ScrollPanel style="width: 100%; height: 200px">
|
||||
<p class="text-gray-700 dark:text-white/80">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
<p class="text-gray-700 dark:text-white/80">
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
|
||||
voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
|
||||
</p>
|
||||
<p class="text-gray-700 dark:text-white/80 m-0">
|
||||
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
|
||||
officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
|
||||
</p>
|
||||
</ScrollPanel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<\/script>`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -10,6 +10,7 @@
|
|||
|
||||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -24,7 +25,15 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc
|
||||
component: UnstyledDoc,
|
||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||
children: [
|
||||
{
|
||||
id: 'tailwind',
|
||||
label: 'Tailwind',
|
||||
component: TailwindDoc
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,56 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<NuxtLink to="/tailwind">Tailwind Customization</NuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<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 {
|
||||
scrolltop: {
|
||||
root: ({ props }) => ({
|
||||
class: [
|
||||
'fixed bottom-20 right-20 flex items-center justify-center',
|
||||
'ml-auto',
|
||||
{
|
||||
'!bg-blue-500 hover:bg-blue-600 text-white rounded-md h-8 w-8': props.target == 'parent',
|
||||
'!bg-gray-700 hover:bg-gray-800 h-12 w-12 rounded-full text-white': props.target !== 'parent'
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<ScrollPanel style="width: 250px; height: 200px">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae et leo duis ut diam. Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur adipiscing
|
||||
elit ut. Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna. Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor augue mauris. Semper
|
||||
feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales. Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet nisl purus. Cursus sit amet
|
||||
dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas. Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris. Eget egestas purus viverra accumsan in nisl nisi.
|
||||
Suscipit adipiscing bibendum est ultricies integer. Mattis aliquam faucibus purus in massa tempor nec.
|
||||
</p>
|
||||
<ScrollTop target="parent" :threshold="100" class="custom-scrolltop" icon="pi pi-arrow-up" />
|
||||
</ScrollPanel>
|
||||
</div>
|
||||
</template>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -10,6 +10,7 @@
|
|||
|
||||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -24,7 +25,15 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc
|
||||
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
|
||||
<NuxtLink to="/tailwind">Tailwind Customization</NuxtLink> 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 {
|
||||
skeleton: {
|
||||
root: ({ props }) => ({
|
||||
class: [
|
||||
'overflow-hidden',
|
||||
'!mb-2',
|
||||
'bg-gray-300 dark:bg-gray-800',
|
||||
'after:absolute after:top-0 after:left-0 after:right-0 after:bottom-0 after:content after:w-full after:h-full after:bg-blue-400 after:left-full after:transform after:translate-x-full after:z-10 after:bg-gradient-to-r after:from-transparent after:via-white after:to-transparent animate-pulse',
|
||||
{
|
||||
'rounded-md': props.shape !== 'circle',
|
||||
'rounded-full': props.shape == 'circle'
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card text-gray-700 dark:text-white/80">
|
||||
<div class="w-full">
|
||||
<h5>Rectangle</h5>
|
||||
<Skeleton class="mb-2"></Skeleton>
|
||||
<Skeleton width="10rem" class="mb-2"></Skeleton>
|
||||
<Skeleton width="5rem" class="mb-2"></Skeleton>
|
||||
<Skeleton height="2rem" class="mb-2"></Skeleton>
|
||||
<Skeleton width="10rem" height="4rem"></Skeleton>
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<h5>Rounded</h5>
|
||||
<Skeleton class="mb-2" borderRadius="16px"></Skeleton>
|
||||
<Skeleton width="10rem" class="mb-2" borderRadius="16px"></Skeleton>
|
||||
<Skeleton width="5rem" borderRadius="16px" class="mb-2"></Skeleton>
|
||||
<Skeleton height="2rem" class="mb-2" borderRadius="16px"></Skeleton>
|
||||
<Skeleton width="10rem" height="4rem" borderRadius="16px"></Skeleton>
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<h5 class="mt-3">Square</h5>
|
||||
<div class="flex items-end">
|
||||
<Skeleton size="2rem" class="mr-2"></Skeleton>
|
||||
<Skeleton size="3rem" class="mr-2"></Skeleton>
|
||||
<Skeleton size="4rem" class="mr-2"></Skeleton>
|
||||
<Skeleton size="5rem"></Skeleton>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<h5 class="mt-3">Circle</h5>
|
||||
<div class="flex items-end">
|
||||
<Skeleton shape="circle" size="2rem" class="mr-2"></Skeleton>
|
||||
<Skeleton shape="circle" size="3rem" class="mr-2"></Skeleton>
|
||||
<Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
|
||||
<Skeleton shape="circle" size="5rem"></Skeleton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<\/script>`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -10,6 +10,7 @@
|
|||
|
||||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -24,7 +25,15 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc
|
||||
component: UnstyledDoc,
|
||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||
children: [
|
||||
{
|
||||
id: 'tailwind',
|
||||
label: 'Tailwind',
|
||||
component: TailwindDoc
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,128 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<NuxtLink to="/tailwind">Tailwind Customization</NuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<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 {
|
||||
speeddial: {
|
||||
root: 'absolute flex',
|
||||
button: {
|
||||
root: ({ parent }) => ({
|
||||
class: [
|
||||
'w-16 !h-16 !rounded-full justify-center z-10',
|
||||
{
|
||||
'rotate-45': parent.state.d_visible
|
||||
}
|
||||
]
|
||||
}),
|
||||
label: {
|
||||
class: 'hidden'
|
||||
}
|
||||
},
|
||||
menu: 'm-0 p-0 list-none flex items-center justify-center transition delay-200 z-20',
|
||||
menuitem: ({ props, context }) => ({
|
||||
class: [
|
||||
'transform transition-transform duration-200 ease-out transition-opacity duration-800',
|
||||
context.hidden ? 'opacity-0 scale-0' : 'opacity-1 scale-100',
|
||||
{
|
||||
'my-1 first:mb-2': props.direction == 'up' && props.type == 'linear',
|
||||
'my-1 first:mt-2': props.direction == 'down' && props.type == 'linear',
|
||||
'mx-1 first:mr-2': props.direction == 'left' && props.type == 'linear',
|
||||
'mx-1 first:ml-2': props.direction == 'right' && props.type == 'linear'
|
||||
},
|
||||
{ absolute: props.type !== 'linear' }
|
||||
]
|
||||
}),
|
||||
action: {
|
||||
class: ['flex items-center justify-center rounded-full relative overflow-hidden', 'w-12 h-12 bg-gray-700 hover:bg-gray-800 text-white']
|
||||
},
|
||||
mask: ({ state }) => ({
|
||||
class: [
|
||||
'absolute left-0 top-0 w-full h-full transition-opacity duration-250 ease-in-out bg-black/40 z-0',
|
||||
{
|
||||
'opacity-0': !state.d_visible,
|
||||
'pointer-events-none opacity-100 transition-opacity duration-400 ease-in-out': state.d_visible
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<div :style="{ position: 'relative', height: '500px' }">
|
||||
<SpeedDial :model="items" direction="up" :style="{ left: 'calc(50% - 2rem)', bottom: 0 }" />
|
||||
<SpeedDial :model="items" direction="down" :style="{ left: 'calc(50% - 2rem)', top: 0 }" />
|
||||
<SpeedDial :model="items" direction="left" :style="{ top: 'calc(50% - 2rem)', right: 0 }" />
|
||||
<SpeedDial :model="items" direction="right" :style="{ top: 'calc(50% - 2rem)', left: 0 }" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { useToast } from 'primevue/usetoast';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
const toast = useToast();
|
||||
const router = useRouter();
|
||||
|
||||
const items = ref([
|
||||
{
|
||||
label: 'Add',
|
||||
icon: 'pi pi-pencil',
|
||||
command: () => {
|
||||
toast.add({ severity: 'info', summary: 'Add', detail: 'Data Added' });
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Update',
|
||||
icon: 'pi pi-refresh',
|
||||
command: () => {
|
||||
toast.add({ severity: 'success', summary: 'Update', detail: 'Data Updated' });
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Delete',
|
||||
icon: 'pi pi-trash',
|
||||
command: () => {
|
||||
toast.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted' });
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Upload',
|
||||
icon: 'pi pi-upload',
|
||||
command: () => {
|
||||
router.push('/fileupload');
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Vue Website',
|
||||
icon: 'pi pi-external-link',
|
||||
command: () => {
|
||||
window.location.href = 'https://vuejs.org/'
|
||||
}
|
||||
}
|
||||
])
|
||||
<\/script>`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -10,6 +10,7 @@
|
|||
|
||||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -24,7 +25,15 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc
|
||||
component: UnstyledDoc,
|
||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||
children: [
|
||||
{
|
||||
id: 'tailwind',
|
||||
label: 'Tailwind',
|
||||
component: TailwindDoc
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,92 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<NuxtLink to="/tailwind">Tailwind Customization</NuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<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 {
|
||||
splitbutton: {
|
||||
root: ({ props }) => ({
|
||||
class: ['inline-flex relative', 'rounded-md', { 'shadow-lg': props.raised }]
|
||||
}),
|
||||
button: {
|
||||
root: ({ parent }) => ({
|
||||
class: ['rounded-r-none border-r-0', { 'rounded-l-full': parent.props.rounded }]
|
||||
}),
|
||||
icon: 'mr-2'
|
||||
},
|
||||
menubutton: {
|
||||
root: ({ parent }) => ({
|
||||
class: ['rounded-l-none', { 'rounded-r-full': parent.props.rounded }]
|
||||
}),
|
||||
label: 'hidden'
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-center flex-wrap">
|
||||
<Toast />
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="secondary" class="mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="success" class="mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="info" class="mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="warning" class="mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="help" class="mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="danger" class="mb-2"></SplitButton>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useToast } from "primevue/usetoast";
|
||||
const toast = useToast();
|
||||
|
||||
const items = [
|
||||
{
|
||||
label: 'Update',
|
||||
icon: 'pi pi-refresh',
|
||||
command: () => {
|
||||
toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Delete',
|
||||
icon: 'pi pi-times',
|
||||
command: () => {
|
||||
toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Vue Website',
|
||||
icon: 'pi pi-external-link',
|
||||
command: () => {
|
||||
window.location.href = 'https://vuejs.org/';
|
||||
}
|
||||
},
|
||||
{ label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
|
||||
];
|
||||
|
||||
const save = () => {
|
||||
toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
|
||||
};
|
||||
<\/script>`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -10,6 +10,7 @@
|
|||
|
||||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -24,7 +25,15 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc
|
||||
component: UnstyledDoc,
|
||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||
children: [
|
||||
{
|
||||
id: 'tailwind',
|
||||
label: 'Tailwind',
|
||||
component: TailwindDoc
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,70 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<NuxtLink to="/tailwind">Tailwind Customization</NuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<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 {
|
||||
splitter: {
|
||||
root: ({ context }) => ({
|
||||
class: [
|
||||
'bg-white dark:bg-gray-900 rounded-lg text-gray-700 dark:text-white/80',
|
||||
{
|
||||
'border border-solid border-gray-300 dark:border-blue-900/40': !context.nested
|
||||
}
|
||||
]
|
||||
}),
|
||||
|
||||
gutter: ({ props }) => ({
|
||||
class: [
|
||||
'flex items-center justify-center shrink-0',
|
||||
'transition-all duration-200 bg-gray-100 dark:bg-gray-800',
|
||||
{
|
||||
'cursor-col-resize': props.layout == 'horizontal',
|
||||
'cursor-row-resize': props.layout !== 'horizontal'
|
||||
}
|
||||
]
|
||||
}),
|
||||
gutterhandler: ({ props }) => ({
|
||||
class: [
|
||||
'bg-gray-300 dark:bg-gray-600 transition-all duration-200',
|
||||
{
|
||||
'h-7': props.layout == 'horizontal',
|
||||
'w-7 h-2': props.layout !== 'horizontal'
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<Splitter style="height: 300px" class="mb-5">
|
||||
<SplitterPanel class="flex items-center justify-center"> Panel 1 </SplitterPanel>
|
||||
<SplitterPanel class="flex items-center justify-center"> Panel 2 </SplitterPanel>
|
||||
</Splitter>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<\/script>`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -10,6 +10,7 @@
|
|||
|
||||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -24,7 +25,15 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc
|
||||
component: UnstyledDoc,
|
||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||
children: [
|
||||
{
|
||||
id: 'tailwind',
|
||||
label: 'Tailwind',
|
||||
component: TailwindDoc
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,100 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<NuxtLink to="/tailwind">Tailwind Customization</NuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<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 {
|
||||
tabview: {
|
||||
navContainer: ({ props }) => ({
|
||||
class: [
|
||||
'relative', // Relative positioning.
|
||||
{ 'overflow-hidden': props.scrollable } // Overflow condition.
|
||||
]
|
||||
}),
|
||||
navContent: 'overflow-y-hidden overscroll-contain overscroll-auto scroll-smooth [&::-webkit-scrollbar]:hidden', // Overflow and scrollbar styles.
|
||||
previousButton: {
|
||||
class: ['h-full flex items-center justify-center absolute top-0 z-20', 'left-0', 'bg-white text-blue-500 w-12 shadow-md rounded-none', 'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80 ]'] // Flex and absolute positioning styles.
|
||||
},
|
||||
nextButton: {
|
||||
class: ['h-full flex items-center justify-center absolute top-0 z-20', 'right-0', 'bg-white text-blue-500 w-12 shadow-md rounded-none', 'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80 '] // Flex and absolute positioning styles.
|
||||
},
|
||||
nav: {
|
||||
class: ['flex flex-1 list-none m-0 p-0', 'bg-white border border-gray-300 border-0 border-b-2', 'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80 '] // Flex, list, margin, padding, and border styles.
|
||||
},
|
||||
tabpanel: {
|
||||
header: ({ props }) => ({
|
||||
class: ['mr-0', { 'cursor-default pointer-events-none select-none user-select-none opacity-60': props?.disabled }] // Margin and condition-based styles.
|
||||
}),
|
||||
headerAction: ({ parent, context }) => ({
|
||||
class: [
|
||||
'items-center cursor-pointer flex overflow-hidden relative select-none text-decoration-none user-select-none', // Flex and overflow styles.
|
||||
'border-b-2 p-5 font-bold rounded-t-lg transition-shadow duration-200 m-0', // Border, padding, font, and transition styles.
|
||||
'transition-colors duration-200', // Transition duration style.
|
||||
'focus:outline-none focus:outline-offset-0 focus:shadow-[inset_0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]', // Focus styles.
|
||||
{
|
||||
'border-gray-300 bg-white text-gray-700 hover:bg-white hover:border-gray-400 hover:text-gray-600 dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80 dark:hover:bg-gray-800/80':
|
||||
parent.state.d_activeIndex !== context.index, // Condition-based hover styles.
|
||||
'bg-white border-blue-500 text-blue-500 dark:bg-gray-900 dark:border-blue-300 dark:text-blue-300': parent.state.d_activeIndex === context.index // Condition-based active styles.
|
||||
}
|
||||
],
|
||||
style: 'margin-bottom:-2px' // Negative margin style.
|
||||
}),
|
||||
headerTitle: {
|
||||
class: ['leading-none whitespace-nowrap'] // Leading and whitespace styles.
|
||||
},
|
||||
content: {
|
||||
class: ['bg-white p-5 border-0 text-gray-700 rounded-bl-2xl rounded-br-2xl', 'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80'] // Background, padding, border, and text styles.
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<TabView>
|
||||
<TabPanel header="Header I">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
</TabPanel>
|
||||
<TabPanel header="Header II">
|
||||
<p>
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
|
||||
ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
|
||||
</p>
|
||||
</TabPanel>
|
||||
<TabPanel header="Header III">
|
||||
<p>
|
||||
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
|
||||
officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
|
||||
</p>
|
||||
</TabPanel>
|
||||
<TabPanel header="Header IV" :disabled="true"></TabPanel>
|
||||
</TabView>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<\/script>`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -10,6 +10,7 @@
|
|||
|
||||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -24,7 +25,15 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc
|
||||
component: UnstyledDoc,
|
||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||
children: [
|
||||
{
|
||||
id: 'tailwind',
|
||||
label: 'Tailwind',
|
||||
component: TailwindDoc
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,65 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<NuxtLink to="/tailwind">Tailwind Customization</NuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<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 {
|
||||
tag: {
|
||||
root: ({ props }) => ({
|
||||
class: [
|
||||
'inline-flex items-center justify-center',
|
||||
'bg-blue-500 text-white text-xs font-semibold px-2 py-1 ',
|
||||
{
|
||||
'bg-gray-500 ': props.severity == 'secondary',
|
||||
'bg-green-500 ': props.severity == 'success',
|
||||
'bg-blue-500 ': props.severity == 'info',
|
||||
'bg-orange-500 ': props.severity == 'warning',
|
||||
'bg-purple-500 ': props.severity == 'help',
|
||||
'bg-red-500 ': props.severity == 'danger'
|
||||
},
|
||||
{
|
||||
'rounded-md': !props.rounded,
|
||||
'rounded-full': props.rounded
|
||||
}
|
||||
]
|
||||
}),
|
||||
value: 'leading-6',
|
||||
icon: 'mr-1 text-sm'
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex flex-wrap justify-center gap-2">
|
||||
<Tag value="Primary"></Tag>
|
||||
<Tag severity="success" value="Success"></Tag>
|
||||
<Tag severity="info" value="Info"></Tag>
|
||||
<Tag severity="warning" value="Warning"></Tag>
|
||||
<Tag severity="danger" value="Danger"></Tag>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -10,6 +10,7 @@
|
|||
|
||||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -24,7 +25,15 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc
|
||||
component: UnstyledDoc,
|
||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||
children: [
|
||||
{
|
||||
id: 'tailwind',
|
||||
label: 'Tailwind',
|
||||
component: TailwindDoc
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,81 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
|
||||
<NuxtLink to="/tailwind">Tailwind Customization</NuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<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 {
|
||||
terminal: {
|
||||
root: {
|
||||
class: ['border border-gray-300 p-5', 'bg-gray-900 text-white dark:border-blue-900/40 ', 'h-72 overflow-auto']
|
||||
},
|
||||
container: 'flex items-center',
|
||||
prompt: 'text-yellow-400',
|
||||
commandtext: 'flex-1 shrink grow-0 border-0 bg-transparent text-inherit p-0 outline-none'
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<p class="text-gray-700 dark:text-white/80">Enter "date" to display the current date, "greet {0}" for a message and "random" to get a random number.</p>
|
||||
<Terminal welcomeMessage="Welcome to PrimeVue" prompt="primevue $" class="dark-demo-terminal" aria-label="PrimeVue Terminal Service" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, onBeforeUnmount } from 'vue';
|
||||
import TerminalService from "primevue/terminalservice";
|
||||
|
||||
onMounted(() => {
|
||||
TerminalService.on('command', commandHandler);
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
TerminalService.off('command', commandHandler);
|
||||
})
|
||||
|
||||
const commandHandler = (text) => {
|
||||
let response;
|
||||
let argsIndex = text.indexOf(' ');
|
||||
let command = argsIndex !== -1 ? text.substring(0, argsIndex) : text;
|
||||
|
||||
switch(command) {
|
||||
case "date":
|
||||
response = 'Today is ' + new Date().toDateString();
|
||||
break;
|
||||
|
||||
case "greet":
|
||||
response = 'Hola ' + text.substring(argsIndex + 1);
|
||||
break;
|
||||
|
||||
case "random":
|
||||
response = Math.floor(Math.random() * 100);
|
||||
break;
|
||||
|
||||
default:
|
||||
response = "Unknown command: " + command;
|
||||
}
|
||||
|
||||
TerminalService.emit('response', response);
|
||||
}
|
||||
<\/script>`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -10,6 +10,7 @@
|
|||
|
||||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -24,7 +25,15 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc
|
||||
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
|
||||
<NuxtLink to="/tailwind">Tailwind Customization</NuxtLink> 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 {
|
||||
toolbar: {
|
||||
root: {
|
||||
class: ['flex items-center justify-between flex-wrap', 'bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-blue-900/40 p-5 rounded-md gap-2']
|
||||
},
|
||||
start: 'flex items-center',
|
||||
center: 'flex items-center',
|
||||
end: 'flex items-center'
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<Toolbar>
|
||||
<template #start>
|
||||
<Button label="New" icon="pi pi-plus" class="mr-2" />
|
||||
<Button label="Upload" icon="pi pi-upload" severity="success" class="mr-2" />
|
||||
<i class="pi pi-bars text-gray-700 dark:text-white/80 mr-2" />
|
||||
<SplitButton label="Save" icon="pi pi-check" :model="items" severity="warning"></SplitButton>
|
||||
</template>
|
||||
|
||||
<template #end>
|
||||
<Button icon="pi pi-search" class="mr-2" />
|
||||
<Button icon="pi pi-calendar" severity="success" class="mr-2" />
|
||||
<Button icon="pi pi-times" severity="danger" />
|
||||
</template>
|
||||
</Toolbar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const items = ref([
|
||||
{
|
||||
label: 'Update',
|
||||
icon: 'pi pi-refresh'
|
||||
},
|
||||
{
|
||||
label: 'Delete',
|
||||
icon: 'pi pi-times'
|
||||
},
|
||||
{
|
||||
label: 'Vue Website',
|
||||
icon: 'pi pi-external-link',
|
||||
command: () => {
|
||||
window.location.href = 'https://vuejs.org/';
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Upload',
|
||||
icon: 'pi pi-upload',
|
||||
command: () => {
|
||||
this.$router.push('fileupload');
|
||||
}
|
||||
}
|
||||
])
|
||||
<\/script>`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -10,6 +10,7 @@
|
|||
|
||||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -24,7 +25,15 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc
|
||||
component: UnstyledDoc,
|
||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||
children: [
|
||||
{
|
||||
id: 'tailwind',
|
||||
label: 'Tailwind',
|
||||
component: TailwindDoc
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue