vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Migrated classes to TW4

pull/7365/head^2
Cagatay Civici 2025-03-04 11:42:07 +03:00
parent b80bd6d784
commit ab7cb7f02c
9 changed files with 18 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/volt/doc/skeleton/CardDoc.vue
View File

@ -3,7 +3,7 @@
<p>Sample Card implementation using different Skeleton components and Tailwind CSS utilities.</p> <p>Sample Card implementation using different Skeleton components and Tailwind CSS utilities.</p>
</DocSectionText> </DocSectionText>
<div class="card"> <div class="card">
<div class="rounded border border-surface-200 dark:border-surface-700 p-6 bg-surface-0 dark:bg-surface-900"> <div class="rounded-sm border border-surface-200 dark:border-surface-700 p-6 bg-surface-0 dark:bg-surface-900">
<div class="flex mb-4"> <div class="flex mb-4">
<Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton> <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
<div> <div>
@ -29,7 +29,7 @@ import { ref } from 'vue';
const code = ref(` const code = ref(`
<template> <template>
<div class="card"> <div class="card">
<div class="rounded border border-surface-200 dark:border-surface-700 p-6 bg-surface-0 dark:bg-surface-900"> <div class="rounded-sm border border-surface-200 dark:border-surface-700 p-6 bg-surface-0 dark:bg-surface-900">
<div class="flex mb-4"> <div class="flex mb-4">
<Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton> <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
<div> <div>

4
apps/volt/doc/skeleton/ListDoc.vue
View File

@ -3,7 +3,7 @@
<p>Sample List implementation using different Skeleton components and Tailwind CSS utilities.</p> <p>Sample List implementation using different Skeleton components and Tailwind CSS utilities.</p>
</DocSectionText> </DocSectionText>
<div class="card"> <div class="card">
<div class="rounded border border-surface-200 dark:border-surface-700 p-6 bg-surface-0 dark:bg-surface-900"> <div class="rounded-sm border border-surface-200 dark:border-surface-700 p-6 bg-surface-0 dark:bg-surface-900">
<ul class="m-0 p-0 list-none"> <ul class="m-0 p-0 list-none">
<li class="mb-4"> <li class="mb-4">
<div class="flex"> <div class="flex">
@ -54,7 +54,7 @@ import { ref } from 'vue';
const code = ref(` const code = ref(`
<template> <template>
<div class="card"> <div class="card">
<div class="rounded border border-surface-200 dark:border-surface-700 p-6 bg-surface-0 dark:bg-surface-900"> <div class="rounded-sm border border-surface-200 dark:border-surface-700 p-6 bg-surface-0 dark:bg-surface-900">
<ul class="m-0 p-0 list-none"> <ul class="m-0 p-0 list-none">
<li class="mb-4"> <li class="mb-4">
<div class="flex"> <div class="flex">

8
apps/volt/doc/timeline/TemplateDoc.vue
View File

@ -5,7 +5,7 @@
<div class="card"> <div class="card">
<Timeline :value="events" align="alternate"> <Timeline :value="events" align="alternate">
<template #marker="slotProps"> <template #marker="slotProps">
<span class="flex w-8 h-8 items-center justify-center text-white rounded-full z-10 shadow-sm" :style="{ backgroundColor: slotProps.item.color }"> <span class="flex w-8 h-8 items-center justify-center text-white rounded-full z-10 shadow-xs" :style="{ backgroundColor: slotProps.item.color }">
<i :class="slotProps.item.icon"></i> <i :class="slotProps.item.icon"></i>
</span> </span>
</template> </template>
@ -18,7 +18,7 @@
{{ slotProps.item.date }} {{ slotProps.item.date }}
</template> </template>
<template #content> <template #content>
<img v-if="slotProps.item.image" :src="`https://primefaces.org/cdn/primevue/images/product/${slotProps.item.image}`" :alt="slotProps.item.name" width="200" class="shadow-sm" /> <img v-if="slotProps.item.image" :src="`https://primefaces.org/cdn/primevue/images/product/${slotProps.item.image}`" :alt="slotProps.item.name" width="200" class="shadow-xs" />
<p> <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 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! neque quas!
@ -48,7 +48,7 @@ const code = ref(`
<div class="card"> <div class="card">
<Timeline :value="events" align="alternate"> <Timeline :value="events" align="alternate">
<template #marker="slotProps"> <template #marker="slotProps">
<span class="flex w-8 h-8 items-center justify-center text-white rounded-full z-10 shadow-sm" :style="{ backgroundColor: slotProps.item.color }"> <span class="flex w-8 h-8 items-center justify-center text-white rounded-full z-10 shadow-xs" :style="{ backgroundColor: slotProps.item.color }">
<i :class="slotProps.item.icon"></i> <i :class="slotProps.item.icon"></i>
</span> </span>
</template> </template>
@ -61,7 +61,7 @@ const code = ref(`
{{ slotProps.item.date }} {{ slotProps.item.date }}
</template> </template>
<template #content> <template #content>
<img v-if="slotProps.item.image" :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.item.image}\`" :alt="slotProps.item.name" width="200" class="shadow-sm" /> <img v-if="slotProps.item.image" :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.item.image}\`" :alt="slotProps.item.name" width="200" class="shadow-xs" />
<p> <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 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! neque quas!

4
apps/volt/volt/checkbox/index.vue
View File

@ -19,8 +19,8 @@ const theme = ref({
p-large:w-6 p-large:h-6`, p-large:w-6 p-large:h-6`,
input: `peer cursor-pointer disabled:cursor-default appearance-none input: `peer cursor-pointer disabled:cursor-default appearance-none
absolute start-0 top-0 w-full h-full m-0 p-0 opacity-0 z-10 absolute start-0 top-0 w-full h-full m-0 p-0 opacity-0 z-10
border border-transparent rounded-sm`, border border-transparent rounded-xs`,
box: `flex justify-center items-center rounded-sm w-5 h-5 box: `flex justify-center items-center rounded-xs w-5 h-5
border border-surface-300 dark:border-surface-700 border border-surface-300 dark:border-surface-700
bg-surface-0 dark:bg-surface-950 bg-surface-0 dark:bg-surface-950
text-surface-700 dark:text-surface-0 text-surface-700 dark:text-surface-0

2
apps/volt/volt/inputmask/index.vue
View File

@ -14,7 +14,7 @@ import { ref } from 'vue';
import { ptViewMerge } from '../utils'; import { ptViewMerge } from '../utils';
const theme = ref({ const theme = ref({
root: `appearance-none rounded-md outline-none root: `appearance-none rounded-md outline-hidden
bg-surface-0 dark:bg-surface-950 bg-surface-0 dark:bg-surface-950
p-filled:bg-surface-50 dark:p-filled:bg-surface-800 p-filled:bg-surface-50 dark:p-filled:bg-surface-800
text-surface-700 dark:text-surface-0 text-surface-700 dark:text-surface-0

6
apps/volt/volt/inputnumber/index.vue
View File

@ -14,7 +14,7 @@ const theme = ref({
root: `inline-flex relative root: `inline-flex relative
p-vertical:flex-col p-fluid:w-full`, p-vertical:flex-col p-fluid:w-full`,
pcInputText: { pcInputText: {
root: `appearance-none rounded-md outline-none flex-auto root: `appearance-none rounded-md outline-hidden flex-auto
bg-surface-0 dark:bg-surface-950 bg-surface-0 dark:bg-surface-950
p-filled:bg-surface-50 dark:p-filled:bg-surface-800 p-filled:bg-surface-50 dark:p-filled:bg-surface-800
text-surface-700 dark:text-surface-0 text-surface-700 dark:text-surface-0
@ -35,7 +35,7 @@ const theme = ref({
p-fluid:w-[1%] p-fluid:p-vertical:w-full` p-fluid:w-[1%] p-fluid:p-vertical:w-full`
}, },
buttonGroup: `p-stacked:flex p-stacked:flex-col p-stacked:absolute p-stacked:top-px p-stacked:end-px p-stacked:h-[calc(100%-2px)] p-stacked:z-10`, buttonGroup: `p-stacked:flex p-stacked:flex-col p-stacked:absolute p-stacked:top-px p-stacked:end-px p-stacked:h-[calc(100%-2px)] p-stacked:z-10`,
incrementButton: `flex items-center justify-center flex-grow-0 flex-shrink-0 basis-auto cursor-pointer w-10 incrementButton: `flex items-center justify-center grow-0 shrink-0 basis-auto cursor-pointer w-10
bg-transparent enabled:hover:bg-surface-100 enabled:active:bg-surface-200 bg-transparent enabled:hover:bg-surface-100 enabled:active:bg-surface-200
border border-surface-300 enabled:hover:border-surface-300 enabled:active:border-surface-300 border border-surface-300 enabled:hover:border-surface-300 enabled:active:border-surface-300
text-surface-400 enabled:hover:text-surface-500 enabled:active:text-surface-600 text-surface-400 enabled:hover:text-surface-500 enabled:active:text-surface-600
@ -48,7 +48,7 @@ const theme = ref({
p-horizontal:order-3 p-horizontal:rounded-e-md p-horizontal:border-s-0 p-horizontal:order-3 p-horizontal:rounded-e-md p-horizontal:border-s-0
p-vertical:py-2 p-vertical:order-1 p-vertical:rounded-ss-md p-vertical:rounded-se-md p-vertical:w-full p-vertical:border-b-0`, p-vertical:py-2 p-vertical:order-1 p-vertical:rounded-ss-md p-vertical:rounded-se-md p-vertical:w-full p-vertical:border-b-0`,
incrementIcon: ``, incrementIcon: ``,
decrementButton: `flex items-center justify-center flex-grow-0 flex-shrink-0 basis-auto cursor-pointer w-10 decrementButton: `flex items-center justify-center grow-0 shrink-0 basis-auto cursor-pointer w-10
bg-transparent enabled:hover:bg-surface-100 enabled:active:bg-surface-200 bg-transparent enabled:hover:bg-surface-100 enabled:active:bg-surface-200
border border-surface-300 enabled:hover:border-surface-300 enabled:active:border-surface-300 border border-surface-300 enabled:hover:border-surface-300 enabled:active:border-surface-300
text-surface-400 enabled:hover:text-surface-500 enabled:active:text-surface-600 text-surface-400 enabled:hover:text-surface-500 enabled:active:text-surface-600

2
apps/volt/volt/inputtext/index.vue
View File

@ -14,7 +14,7 @@ import { ref } from 'vue';
import { ptViewMerge } from '../utils'; import { ptViewMerge } from '../utils';
const theme = ref({ const theme = ref({
root: `appearance-none rounded-md outline-none root: `appearance-none rounded-md outline-hidden
bg-surface-0 dark:bg-surface-950 bg-surface-0 dark:bg-surface-950
p-filled:bg-surface-50 dark:p-filled:bg-surface-800 p-filled:bg-surface-50 dark:p-filled:bg-surface-800
text-surface-700 dark:text-surface-0 text-surface-700 dark:text-surface-0

4
apps/volt/volt/slider/index.vue
View File

@ -25,10 +25,10 @@ const handleCommon = `cursor-grab touch-none flex items-center justify-center h-
p-vertical:start-1/2 p-vertical:-mb-[10px] p-vertical:-ms-[10px]`; p-vertical:start-1/2 p-vertical:-mb-[10px] p-vertical:-ms-[10px]`;
const theme = ref({ const theme = ref({
root: `relative bg-surface-200 dark:bg-surface-700 rounded-sm root: `relative bg-surface-200 dark:bg-surface-700 rounded-xs
p-horizontal:h-[3px] p-horizontal:h-[3px]
p-vertical:min-h-[100px] p-vertical:w-[3px]`, p-vertical:min-h-[100px] p-vertical:w-[3px]`,
range: `block bg-primary rounded-sm range: `block bg-primary rounded-xs
p-horizontal:top-0 p-horizontal:start-0 p-horizontal:h-full p-horizontal:top-0 p-horizontal:start-0 p-horizontal:h-full
p-vertical:bottom-0 p-vertical:start-0 p-vertical:w-full`, p-vertical:bottom-0 p-vertical:start-0 p-vertical:w-full`,
handle: handleCommon, handle: handleCommon,

2
apps/volt/volt/textarea/index.vue
View File

@ -14,7 +14,7 @@ import { ref } from 'vue';
import { ptViewMerge } from '../utils'; import { ptViewMerge } from '../utils';
const theme = ref({ const theme = ref({
root: `appearance-none rounded-md outline-none root: `appearance-none rounded-md outline-hidden
bg-surface-0 dark:bg-surface-950 bg-surface-0 dark:bg-surface-950
p-filled:bg-surface-50 dark:p-filled:bg-surface-800 p-filled:bg-surface-50 dark:p-filled:bg-surface-800
text-surface-700 dark:text-surface-0 text-surface-700 dark:text-surface-0