Tailwind docs updated
Tuğçe Küçükoğlu
parent
f15fb3de24
commit
62799717e6
|
|
@ -2,7 +2,7 @@
|
|||
<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.
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<p>A playground sample with the pre-built Tailwind theme.</p>
|
||||
|
|
@ -24,12 +24,6 @@ export const TRANSITIONS = {
|
|||
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'
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,45 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" embedded />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<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>
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -25,7 +24,6 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc,
|
||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||
children: [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -17,14 +17,6 @@ export default {
|
|||
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',
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<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.
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<p>A playground sample with the pre-built Tailwind theme.</p>
|
||||
|
|
|
|||
|
|
@ -1,56 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" embedded />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<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>
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -25,7 +24,6 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc,
|
||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||
children: [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<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.
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<p>A playground sample with the pre-built Tailwind theme.</p>
|
||||
|
|
|
|||
|
|
@ -1,37 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" embedded />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex 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>
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -25,7 +24,6 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc,
|
||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||
children: [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<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.
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<p>A playground sample with the pre-built Tailwind theme.</p>
|
||||
|
|
|
|||
|
|
@ -1,40 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" embedded />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<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>
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -25,7 +24,6 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc,
|
||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||
children: [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<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.
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<p>A playground sample with the pre-built Tailwind theme.</p>
|
||||
|
|
|
|||
|
|
@ -1,29 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" embedded />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-center 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>
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -25,7 +24,6 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc,
|
||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||
children: [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -17,14 +17,6 @@ export default {
|
|||
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',
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<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.
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<p>A playground sample with the pre-built Tailwind theme.</p>
|
||||
|
|
|
|||
|
|
@ -1,42 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" embedded />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex 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>
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -24,7 +24,6 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc,
|
||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||
children: [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -2,11 +2,11 @@
|
|||
<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.
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<p>A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
<DocSectionCode :code="code2" embedded :service="['ProductService']" />
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,85 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" :service="['ProductService']" embedded />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<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>
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -25,7 +24,6 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc,
|
||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||
children: [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -17,14 +17,6 @@ export default {
|
|||
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',
|
||||
|
|
|
|||
|
|
@ -2,11 +2,11 @@
|
|||
<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.
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<p>A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
<DocSectionCode :code="code2" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" embedded />
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,47 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" embedded />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<Chart type="bar" :data="chartData" :options="chartOptions" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const chartData = ref({
|
||||
labels: ['Q1', 'Q2', 'Q3', 'Q4'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'Sales',
|
||||
data: [540, 325, 702, 620],
|
||||
backgroundColor: ['rgba(255, 159, 64, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(153, 102, 255, 0.2)'],
|
||||
borderColor: ['rgb(255, 159, 64)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)', 'rgb(153, 102, 255)'],
|
||||
borderWidth: 1
|
||||
}
|
||||
]
|
||||
});
|
||||
const chartOptions = ref({
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true
|
||||
}
|
||||
}
|
||||
});
|
||||
<\/script>`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -25,7 +24,6 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc,
|
||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||
children: [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<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.
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<p>A playground sample with the pre-built Tailwind theme.</p>
|
||||
|
|
|
|||
|
|
@ -1,29 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" embedded />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex 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>
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -25,7 +24,6 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc,
|
||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||
children: [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -17,14 +17,6 @@ export default {
|
|||
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',
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<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.
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<p>A playground sample with the pre-built Tailwind theme.</p>
|
||||
|
|
|
|||
|
|
@ -1,63 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" embedded />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
composition: `
|
||||
<template>
|
||||
<Toast />
|
||||
<ConfirmDialog></ConfirmDialog>
|
||||
<div class="card flex flex-wrap gap-2 justify-center">
|
||||
<Button @click="confirm1()" icon="pi pi-check" label="Confirm"></Button>
|
||||
<Button @click="confirm2()" icon="pi pi-times" label="Delete"></Button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useConfirm } from "primevue/useconfirm";
|
||||
import { useToast } from "primevue/usetoast";
|
||||
|
||||
const confirm = useConfirm();
|
||||
const toast = useToast();
|
||||
|
||||
const confirm1 = () => {
|
||||
confirm.require({
|
||||
message: 'Are you sure you want to proceed?',
|
||||
header: 'Confirmation',
|
||||
icon: 'pi pi-exclamation-triangle',
|
||||
accept: () => {
|
||||
toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
|
||||
},
|
||||
reject: () => {
|
||||
toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const confirm2 = () => {
|
||||
confirm.require({
|
||||
message: 'Do you want to delete this record?',
|
||||
header: 'Delete Confirmation',
|
||||
icon: 'pi pi-info-circle',
|
||||
acceptClass: 'p-button-danger',
|
||||
accept: () => {
|
||||
toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 });
|
||||
},
|
||||
reject: () => {
|
||||
toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
|
||||
}
|
||||
});
|
||||
};
|
||||
<\/script>`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -25,7 +24,6 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc,
|
||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||
children: [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<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.
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<p>A playground sample with the pre-built Tailwind theme.</p>
|
||||
|
|
@ -17,14 +17,6 @@ export default {
|
|||
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',
|
||||
|
|
|
|||
|
|
@ -1,63 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" embedded />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
composition: `
|
||||
<template>
|
||||
<Toast />
|
||||
<ConfirmPopup></ConfirmPopup>
|
||||
<div class="card flex flex-wrap gap-2 justify-center">
|
||||
<Button @click="confirm1($event)" icon="pi pi-check" label="Confirm"></Button>
|
||||
<Button @click="confirm2($event)" icon="pi pi-times" label="Delete" outlined severity="danger"></Button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useConfirm } from "primevue/useconfirm";
|
||||
import { useToast } from "primevue/usetoast";
|
||||
|
||||
const confirm = useConfirm();
|
||||
const toast = useToast();
|
||||
|
||||
const confirm1 = (event) => {
|
||||
confirm.require({
|
||||
target: event.currentTarget,
|
||||
message: 'Are you sure you want to proceed?',
|
||||
icon: 'pi pi-exclamation-triangle',
|
||||
accept: () => {
|
||||
toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
|
||||
},
|
||||
reject: () => {
|
||||
toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const confirm2 = (event) => {
|
||||
confirm.require({
|
||||
target: event.currentTarget,
|
||||
message: 'Do you want to delete this record?',
|
||||
icon: 'pi pi-info-circle',
|
||||
acceptClass: 'p-button-danger',
|
||||
accept: () => {
|
||||
toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 });
|
||||
},
|
||||
reject: () => {
|
||||
toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
|
||||
}
|
||||
});
|
||||
};
|
||||
<\/script>`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -25,7 +24,6 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc,
|
||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||
children: [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -17,14 +17,6 @@ export default {
|
|||
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',
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<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.
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<p>A playground sample with the pre-built Tailwind theme.</p>
|
||||
|
|
|
|||
|
|
@ -1,35 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" embedded />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<Button label="Show" icon="pi pi-external-link" @click="visible = true" />
|
||||
<Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50vw' }">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
</Dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const visible = ref(false);
|
||||
<\/script>`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -25,7 +24,6 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc,
|
||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||
children: [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<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.
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<p>A playground sample with the pre-built Tailwind theme.</p>
|
||||
|
|
|
|||
|
|
@ -1,56 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" embedded />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card 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>
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -25,7 +24,6 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc,
|
||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||
children: [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -17,14 +17,6 @@ export default {
|
|||
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',
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<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.
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<p>A playground sample with the pre-built Tailwind theme.</p>
|
||||
|
|
@ -149,22 +149,7 @@ const showProducts = () => {
|
|||
}
|
||||
});
|
||||
}
|
||||
<\/script>`,
|
||||
data: `
|
||||
/* ProductService */
|
||||
{
|
||||
id: '1000',
|
||||
code: 'f230fh0g3',
|
||||
name: 'Bamboo Watch',
|
||||
description: 'Product Description',
|
||||
image: 'bamboo-watch.jpg',
|
||||
price: 65,
|
||||
category: 'Accessories',
|
||||
quantity: 24,
|
||||
inventoryStatus: 'INSTOCK',
|
||||
rating: 5
|
||||
},
|
||||
...`
|
||||
<\/script>`
|
||||
},
|
||||
extFiles: {
|
||||
options: {
|
||||
|
|
|
|||
|
|
@ -1,353 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" :extFiles="extFiles" :service="['ProductService']" embedded />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
basic: `
|
||||
<Button label="Select a Product" icon="pi pi-search" @click="showProducts" />
|
||||
|
||||
<DynamicDialog />`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<Button label="Select a Product" icon="pi pi-search" @click="showProducts" />
|
||||
<Toast />
|
||||
<DynamicDialog />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Button from 'primevue/button';
|
||||
import { markRaw, defineAsyncComponent } from 'vue';
|
||||
const ProductListDemo = defineAsyncComponent(() => import('./components/ProductListDemo.vue'));
|
||||
const FooterDemo = defineAsyncComponent(() => import('./components/FooterDemo.vue'));
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
showProducts() {
|
||||
const dialogRef = this.$dialog.open(ProductListDemo, {
|
||||
props: {
|
||||
header: 'Product List',
|
||||
style: {
|
||||
width: '50vw'
|
||||
},
|
||||
breakpoints: {
|
||||
'960px': '75vw',
|
||||
'640px': '90vw'
|
||||
},
|
||||
modal: true
|
||||
},
|
||||
templates: {
|
||||
footer: markRaw(FooterDemo)
|
||||
},
|
||||
onClose: (options) => {
|
||||
const data = options.data;
|
||||
|
||||
if (data) {
|
||||
const buttonType = data.buttonType;
|
||||
const summary_and_detail = buttonType ? { summary: 'No Product Selected', detail: \`Pressed '\${buttonType}' button\` } : { summary: 'Product Selected', detail: data.name };
|
||||
|
||||
this.$toast.add({ severity: 'info', ...summary_and_detail, life: 3000 });
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
<\/script>`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<Button label="Select a Product" icon="pi pi-search" @click="showProducts" />
|
||||
<Toast />
|
||||
<DynamicDialog />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { markRaw, defineAsyncComponent } from 'vue';
|
||||
import { useDialog } from 'primevue/usedialog';
|
||||
import { useToast } from 'primevue/usetoast';
|
||||
import Button from 'primevue/button';
|
||||
const ProductListDemo = defineAsyncComponent(() => import('./components/ProductListDemo.vue'));
|
||||
const FooterDemo = defineAsyncComponent(() => import('./components/FooterDemo.vue'));
|
||||
|
||||
const dialog = useDialog();
|
||||
const toast = useToast();
|
||||
|
||||
const showProducts = () => {
|
||||
const dialogRef = dialog.open(ProductListDemo, {
|
||||
props: {
|
||||
header: 'Product List',
|
||||
style: {
|
||||
width: '50vw',
|
||||
},
|
||||
breakpoints:{
|
||||
'960px': '75vw',
|
||||
'640px': '90vw'
|
||||
},
|
||||
modal: true
|
||||
},
|
||||
templates: {
|
||||
footer: markRaw(FooterDemo)
|
||||
},
|
||||
onClose: (options) => {
|
||||
const data = options.data;
|
||||
if (data) {
|
||||
const buttonType = data.buttonType;
|
||||
const summary_and_detail = buttonType ? { summary: 'No Product Selected', detail: \`Pressed '\${buttonType}' button\` } : { summary: 'Product Selected', detail: data.name };
|
||||
|
||||
toast.add({ severity:'info', ...summary_and_detail, life: 3000 });
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
<\/script>`,
|
||||
data: `
|
||||
/* ProductService */
|
||||
{
|
||||
id: '1000',
|
||||
code: 'f230fh0g3',
|
||||
name: 'Bamboo Watch',
|
||||
description: 'Product Description',
|
||||
image: 'bamboo-watch.jpg',
|
||||
price: 65,
|
||||
category: 'Accessories',
|
||||
quantity: 24,
|
||||
inventoryStatus: 'INSTOCK',
|
||||
rating: 5
|
||||
},
|
||||
...`
|
||||
},
|
||||
extFiles: {
|
||||
options: {
|
||||
'src/components/ProductListDemo.vue': {
|
||||
content: `
|
||||
<template>
|
||||
<div>
|
||||
<div class="flex justify-content-end mt-1 mb-3">
|
||||
<Button icon="pi pi-external-link" label="Nested Dialog" outlined severity="success" @click="showInfo" />
|
||||
</div>
|
||||
<DataTable :value="products">
|
||||
<Column field="code" header="Code"></Column>
|
||||
<Column field="name" header="Name"></Column>
|
||||
<Column header="Image">
|
||||
<template #body="slotProps">
|
||||
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="shadow-2 w-4rem" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="category" header="Category"></Column>
|
||||
<Column field="quantity" header="Quantity"></Column>
|
||||
<Column style="width:5rem">
|
||||
<template #body="slotProps">
|
||||
<Button type="button" icon="pi pi-plus" text rounded @click="selectProduct(slotProps.data)"></Button>
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ProductService } from '@/service/ProductService';
|
||||
import InfoDemo from './InfoDemo.vue';
|
||||
|
||||
export default {
|
||||
inject: ['dialogRef'],
|
||||
data() {
|
||||
return {
|
||||
products: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
ProductService.getProductsSmall().then(data => this.products = data.slice(0,5));
|
||||
},
|
||||
methods: {
|
||||
selectProduct(data) {
|
||||
this.dialogRef.close(data);
|
||||
},
|
||||
showInfo() {
|
||||
this.$dialog.open(InfoDemo, {
|
||||
props: {
|
||||
header: 'Information',
|
||||
modal: true,
|
||||
dismissableMask: true
|
||||
},
|
||||
data: {
|
||||
totalProducts: this.products ? this.products.length : 0
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
<\/script>`
|
||||
},
|
||||
'src/components/InfoDemo.vue': {
|
||||
content: `
|
||||
<template>
|
||||
<div>
|
||||
<p>There are <strong>{{totalProducts}}</strong> products in total in this list.</p>
|
||||
<div class="flex justify-content-end">
|
||||
<Button type="button" label="Close" @click="closeDialog"></Button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
inject: ['dialogRef'],
|
||||
data() {
|
||||
return {
|
||||
totalProducts: 0
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.totalProducts = this.dialogRef.data.totalProducts;
|
||||
},
|
||||
methods: {
|
||||
closeDialog() {
|
||||
this.dialogRef.close();
|
||||
}
|
||||
}
|
||||
}
|
||||
<\/script>
|
||||
`
|
||||
},
|
||||
'src/components/FooterDemo.vue': {
|
||||
content: `
|
||||
<template>
|
||||
<Button type="button" label="No" icon="pi pi-times" @click="closeDialog({ buttonType: 'No' })" text></Button>
|
||||
<Button type="button" label="Yes" icon="pi pi-check" @click="closeDialog({ buttonType: 'Yes' })" autofocus></Button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
inject: ['dialogRef'],
|
||||
methods: {
|
||||
closeDialog(e) {
|
||||
this.dialogRef.close(e);
|
||||
}
|
||||
}
|
||||
};
|
||||
<\/script>`
|
||||
}
|
||||
},
|
||||
composition: {
|
||||
'src/components/ProductListDemo.vue': {
|
||||
content: `
|
||||
<template>
|
||||
<div>
|
||||
<div class="flex justify-end mt-1 mb-3">
|
||||
<Button icon="pi pi-external-link" label="Nested Dialog" outlined severity="success" @click="showInfo" />
|
||||
</div>
|
||||
<DataTable :value="products">
|
||||
<Column field="code" header="Code"></Column>
|
||||
<Column field="name" header="Name"></Column>
|
||||
<Column header="Image">
|
||||
<template #body="slotProps">
|
||||
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="shadow-2 w-4rem" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="category" header="Category"></Column>
|
||||
<Column field="quantity" header="Quantity"></Column>
|
||||
<Column style="width:5rem">
|
||||
<template #body="slotProps">
|
||||
<Button type="button" icon="pi pi-plus" text rounded @click="selectProduct(slotProps.data)"></Button>
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, inject } from "vue";
|
||||
import { useDialog } from "primevue/usedialog";
|
||||
import { ProductService } from "@/service/ProductService";
|
||||
import InfoDemo from "./InfoDemo.vue";
|
||||
|
||||
const dialogRef = inject("dialogRef");
|
||||
const dialog = useDialog();
|
||||
const products = ref(null);
|
||||
|
||||
onMounted(() => {
|
||||
ProductService
|
||||
.getProductsSmall()
|
||||
.then((data) => (products.value = data.slice(0, 5)));
|
||||
});
|
||||
|
||||
const selectProduct = (data) => {
|
||||
dialogRef.value.close(data);
|
||||
};
|
||||
|
||||
const showInfo = () => {
|
||||
dialog.open(InfoDemo, {
|
||||
props: {
|
||||
header: "Information",
|
||||
modal: true,
|
||||
dismissableMask: true,
|
||||
},
|
||||
data: {
|
||||
totalProducts: products.value ? products.value.length : 0,
|
||||
}
|
||||
});
|
||||
};
|
||||
<\/script>`
|
||||
},
|
||||
'src/components/InfoDemo.vue': {
|
||||
content: `
|
||||
<template>
|
||||
<div>
|
||||
<p>There are <strong>{{totalProducts}}</strong> products in total in this list.</p>
|
||||
<div class="flex justify-end">
|
||||
<Button type="button" label="Close" @click="closeDialog"></Button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, inject } from "vue";
|
||||
|
||||
const totalProducts = ref(0);
|
||||
const dialogRef = inject("dialogRef");
|
||||
|
||||
onMounted(() => {
|
||||
totalProducts.value = dialogRef.value.data.totalProducts;
|
||||
});
|
||||
|
||||
const closeDialog = () => {
|
||||
dialogRef.value.close();
|
||||
};
|
||||
<\/script>
|
||||
`
|
||||
},
|
||||
'src/components/FooterDemo.vue': {
|
||||
content: `
|
||||
<template>
|
||||
<Button type="button" label="No" icon="pi pi-times" @click="closeDialog({ buttonType: 'No' })" text></Button>
|
||||
<Button type="button" label="Yes" icon="pi pi-check" @click="closeDialog({ buttonType: 'Yes' })" autofocus></Button>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { inject } from "vue";
|
||||
|
||||
const dialogRef = inject("dialogRef");
|
||||
|
||||
const closeDialog = (e) => {
|
||||
dialogRef.value.close(e);
|
||||
};
|
||||
<\/script>`
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -10,7 +10,6 @@
|
|||
|
||||
<script>
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -19,7 +18,6 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc,
|
||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||
children: [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<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.
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<p>A playground sample with the pre-built Tailwind theme.</p>
|
||||
|
|
@ -24,12 +24,6 @@ export const TRANSITIONS = {
|
|||
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'
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,31 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" embedded />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
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>
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -25,7 +24,6 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc,
|
||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||
children: [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<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.
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<p>A playground sample with the pre-built Tailwind theme.</p>
|
||||
|
|
|
|||
|
|
@ -1,37 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" embedded />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<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>
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -25,7 +24,6 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc,
|
||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||
children: [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -2,11 +2,11 @@
|
|||
<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.
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<p>A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
<DocSectionCode :code="code2" embedded :service="['PhotoService']" />
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,55 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" :service="['PhotoService']" embedded />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
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>
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -25,7 +24,6 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc,
|
||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||
children: [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<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.
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<p>A playground sample with the pre-built Tailwind theme.</p>
|
||||
|
|
|
|||
|
|
@ -1,23 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" embedded />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" width="250" preview />
|
||||
</div>
|
||||
</template>`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -25,7 +24,6 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc,
|
||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||
children: [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -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
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<p>A playground sample with the pre-built Tailwind theme.</p>
|
||||
<DocSectionCode :code="code2" embedded />
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export default {
|
||||
inlinemessage: {
|
||||
root: ({ props }) => ({
|
||||
class: [
|
||||
'inline-flex items-center justify-center align-top',
|
||||
'p-3 m-0 rounded-md',
|
||||
{
|
||||
'bg-blue-100 border-0 text-blue-700': props.severity == 'info',
|
||||
'bg-green-100 border-0 text-green-700': props.severity == 'success',
|
||||
'bg-orange-100 border-0 text-orange-700': props.severity == 'warn',
|
||||
'bg-red-100 border-0 text-red-700': props.severity == 'error'
|
||||
}
|
||||
]
|
||||
}),
|
||||
icon: 'text-base mr-2'
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex flex-wrap items-center justify-center gap-3">
|
||||
<InlineMessage severity="success">Success Content</InlineMessage>
|
||||
<InlineMessage severity="info">Info Content</InlineMessage>
|
||||
<InlineMessage severity="warn">Warning Content</InlineMessage>
|
||||
<InlineMessage severity="error">Error Content</InlineMessage>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<\/script>`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" embedded />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex flex-wrap items-center justify-center gap-3">
|
||||
<InlineMessage severity="success">Success Content</InlineMessage>
|
||||
<InlineMessage severity="info">Info Content</InlineMessage>
|
||||
<InlineMessage severity="warn">Warning Content</InlineMessage>
|
||||
<InlineMessage severity="error">Error Content</InlineMessage>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<\/script>`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -24,7 +24,14 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc
|
||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||
children: [
|
||||
{
|
||||
id: 'tailwind',
|
||||
label: 'Tailwind',
|
||||
component: TailwindDoc
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<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.
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<p>A playground sample with the pre-built Tailwind theme.</p>
|
||||
|
|
|
|||
|
|
@ -1,37 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" embedded />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<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>
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -25,7 +24,6 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc,
|
||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||
children: [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -17,14 +17,6 @@ export default {
|
|||
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',
|
||||
|
|
|
|||
|
|
@ -17,14 +17,6 @@ export default {
|
|||
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',
|
||||
|
|
|
|||
|
|
@ -16,23 +16,6 @@ export default {
|
|||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
export const TRANSITIONS = {
|
||||
toggleable: {
|
||||
enterFromClass: 'max-h-0',
|
||||
enterActiveClass: 'overflow-hidden transition-all duration-500 ease-in-out',
|
||||
enterToClass: 'max-h-40 ',
|
||||
leaveFromClass: 'max-h-40',
|
||||
leaveActiveClass: 'overflow-hidden transition-all duration-500 ease-in',
|
||||
leaveToClass: 'max-h-0'
|
||||
},
|
||||
overlay: {
|
||||
enterFromClass: 'opacity-0 scale-75',
|
||||
enterActiveClass: 'transition-transform transition-opacity duration-150 ease-in',
|
||||
leaveActiveClass: 'transition-opacity duration-150 ease-linear',
|
||||
leaveToClass: 'opacity-0'
|
||||
}
|
||||
};
|
||||
|
||||
export default {
|
||||
orderlist: {
|
||||
root: 'flex',
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<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.
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<p>A playground sample with the pre-built Tailwind theme.</p>
|
||||
|
|
@ -17,14 +17,6 @@ export default {
|
|||
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',
|
||||
|
|
|
|||
|
|
@ -1,36 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" embedded />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<Button type="button" icon="pi pi-image" label="Image" @click="toggle" />
|
||||
|
||||
<OverlayPanel ref="op">
|
||||
<img src="https://primefaces.org/cdn/primevue/images/product/bamboo-watch.jpg" alt="Bamboo Watch" />
|
||||
</OverlayPanel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const op = ref();
|
||||
const toggle = (event) => {
|
||||
op.value.toggle(event);
|
||||
}
|
||||
<\/script>`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -25,7 +24,6 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc,
|
||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||
children: [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<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.
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<p>A playground sample with the pre-built Tailwind theme.</p>
|
||||
|
|
@ -24,12 +24,6 @@ export const TRANSITIONS = {
|
|||
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'
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,31 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" embedded />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<Panel header="Header">
|
||||
<p class="m-0">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
</Panel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<\/script>`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -25,7 +24,6 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc,
|
||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||
children: [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -24,12 +24,6 @@ export const TRANSITIONS = {
|
|||
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'
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -17,14 +17,6 @@ export default {
|
|||
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',
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<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.
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<p>A playground sample with the pre-built Tailwind theme.</p>
|
||||
|
|
@ -17,6 +17,32 @@ export default {
|
|||
code1: {
|
||||
basic: `
|
||||
export default {
|
||||
global: {
|
||||
css: \`
|
||||
.progressbar-value-animate::after {
|
||||
will-change: left, right;
|
||||
animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
|
||||
}
|
||||
.progressbar-value-animate::before {
|
||||
will-change: left, right;
|
||||
animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
|
||||
}
|
||||
@keyframes p-progressbar-indeterminate-anim {
|
||||
0% {
|
||||
left: -35%;
|
||||
right: 100%;
|
||||
}
|
||||
60% {
|
||||
left: 100%;
|
||||
right: -90%;
|
||||
}
|
||||
100% {
|
||||
left: 100%;
|
||||
right: -90%;
|
||||
}
|
||||
}
|
||||
\`
|
||||
},
|
||||
progressbar: {
|
||||
root: {
|
||||
class: ['overflow-hidden relative', 'border-0 h-6 bg-gray-200 rounded-md dark:bg-gray-800']
|
||||
|
|
|
|||
|
|
@ -1,58 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" embedded />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<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>
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -25,7 +24,6 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc,
|
||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||
children: [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<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.
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<p>A playground sample with the pre-built Tailwind theme.</p>
|
||||
|
|
@ -17,6 +17,46 @@ export default {
|
|||
code1: {
|
||||
basic: `
|
||||
export default {
|
||||
global: {
|
||||
css: \`
|
||||
.progress-spinner-circle {
|
||||
stroke-dasharray: 89, 200;
|
||||
stroke-dashoffset: 0;
|
||||
animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
|
||||
@keyframes p-progress-spinner-dash{
|
||||
0% {
|
||||
stroke-dasharray: 1, 200;
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
|
||||
50% {
|
||||
stroke-dasharray: 89, 200;
|
||||
stroke-dashoffset: -35px;
|
||||
}
|
||||
100% {
|
||||
stroke-dasharray: 89, 200;
|
||||
stroke-dashoffset: -124px;
|
||||
}
|
||||
}
|
||||
@keyframes p-progress-spinner-color {
|
||||
100%, 0% {
|
||||
stroke: #ff5757;
|
||||
}
|
||||
40% {
|
||||
stroke: #696cff;
|
||||
}
|
||||
66% {
|
||||
stroke: #1ea97c;
|
||||
}
|
||||
80%, 90% {
|
||||
stroke: #cc8925;
|
||||
}
|
||||
}
|
||||
\`
|
||||
},
|
||||
progressspinner: {
|
||||
root: {
|
||||
class: ['relative mx-auto w-28 h-28 inline-block', 'before:block before:pt-full']
|
||||
|
|
|
|||
|
|
@ -1,26 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" embedded />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<ProgressSpinner />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<\/script>`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -25,7 +24,6 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc,
|
||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||
children: [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<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.
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<p>A playground sample with the pre-built Tailwind theme.</p>
|
||||
|
|
@ -17,6 +17,23 @@ export default {
|
|||
code1: {
|
||||
basic: `
|
||||
export default {
|
||||
global: {
|
||||
css: \`
|
||||
*[data-pd-ripple="true"]{
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
span[data-p-ink-active="true"]{
|
||||
animation: ripple 0.4s linear;
|
||||
}
|
||||
@keyframes ripple {
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scale(2.5);
|
||||
}
|
||||
}
|
||||
\`
|
||||
},
|
||||
directives: {
|
||||
ripple: {
|
||||
root: {
|
||||
|
|
|
|||
|
|
@ -1,26 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" embedded />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<Button label="Submit" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<\/script>`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -25,7 +24,6 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc,
|
||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||
children: [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<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.
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<p>A playground sample with the pre-built Tailwind theme.</p>
|
||||
|
|
|
|||
|
|
@ -1,39 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" embedded />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<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>
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -25,7 +24,6 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc,
|
||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||
children: [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<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.
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<p>A playground sample with the pre-built Tailwind theme.</p>
|
||||
|
|
|
|||
|
|
@ -1,33 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" embedded />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<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>
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -25,7 +24,6 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc,
|
||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||
children: [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<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.
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<p>A playground sample with the pre-built Tailwind theme.</p>
|
||||
|
|
|
|||
|
|
@ -1,57 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" embedded />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<div class="flex gap-2 justify-center">
|
||||
<Button icon="pi pi-arrow-right" @click="visibleLeft = true" />
|
||||
<Button icon="pi pi-arrow-left" @click="visibleRight = true" />
|
||||
<Button icon="pi pi-arrow-down" @click="visibleTop = true" />
|
||||
<Button icon="pi pi-arrow-up" @click="visibleBottom = true" />
|
||||
</div>
|
||||
|
||||
<Sidebar v-model:visible="visibleLeft">
|
||||
<h2>Left Sidebar</h2>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
|
||||
</Sidebar>
|
||||
|
||||
<Sidebar v-model:visible="visibleRight" position="right">
|
||||
<h2>Right Sidebar</h2>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
|
||||
</Sidebar>
|
||||
|
||||
<Sidebar v-model:visible="visibleTop" position="top">
|
||||
<h2>Top Sidebar</h2>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
|
||||
</Sidebar>
|
||||
|
||||
<Sidebar v-model:visible="visibleBottom" position="bottom">
|
||||
<h2>Bottom Sidebar</h2>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
|
||||
</Sidebar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const visibleLeft = ref(false);
|
||||
const visibleRight = ref(false);
|
||||
const visibleTop = ref(false);
|
||||
const visibleBottom = ref(false);
|
||||
<\/script>`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -25,7 +24,6 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc,
|
||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||
children: [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<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.
|
||||
<PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<p>A playground sample with the pre-built Tailwind theme.</p>
|
||||
|
|
|
|||
|
|
@ -1,59 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" embedded />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card 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>
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
import UnstyledDoc from './UnstyledDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -25,7 +24,6 @@ export default {
|
|||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc,
|
||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||
children: [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -59,6 +59,7 @@ export default {
|
|||
<div class="card">
|
||||
<div :style="{ height: '500px' }" class="flex align-items-center justify-content-center">
|
||||
<SpeedDial :model="items" :radius="80" type="circle" buttonClass="p-button-warning" />
|
||||
<Toast />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -113,6 +114,7 @@ export default {
|
|||
<div class="card">
|
||||
<div :style="{ height: '500px' }" class="flex align-items-center justify-content-center">
|
||||
<SpeedDial :model="items" :radius="80" type="circle" buttonClass="p-button-warning" />
|
||||
<Toast />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -68,6 +68,7 @@ export default {
|
|||
<SpeedDial :model="items" direction="down" :style="{ left: 'calc(50% - 2rem)', top: 0 }" />
|
||||
<SpeedDial :model="items" direction="left" :style="{ top: 'calc(50% - 2rem)', right: 0 }" />
|
||||
<SpeedDial :model="items" direction="right" :style="{ top: 'calc(50% - 2rem)', left: 0 }" />
|
||||
<Toast />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -125,6 +126,7 @@ export default {
|
|||
<SpeedDial :model="items" direction="down" :style="{ left: 'calc(50% - 2rem)', top: 0 }" />
|
||||
<SpeedDial :model="items" direction="left" :style="{ top: 'calc(50% - 2rem)', right: 0 }" />
|
||||
<SpeedDial :model="items" direction="right" :style="{ top: 'calc(50% - 2rem)', left: 0 }" />
|
||||
<Toast />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue