Update to v4.1.1

primefaces · Oct 16, 2024 · 61db4ef · 61db4ef
1 parent 7edd7d2
commit 61db4ef
Show file tree

Hide file tree

Showing 14 changed files with 146 additions and 201 deletions.
diff --git a/assets/styles/presets/aura/contextmenu.css b/assets/styles/presets/aura/contextmenu.css
@@ -88,8 +88,8 @@
     @apply transition-opacity duration-[250ms]
 }
 
-.p-contextmenu-mobile .p-contextmenu-item {
-    @apply static
+.p-contextmenu-mobile .p-contextmenu-submenu {
+    @apply static shadow-none border-none ps-4 pe-0
 }
 
 .p-contextmenu-mobile .p-contextmenu-submenu-icon {
@@ -98,8 +98,4 @@
 
 .p-contextmenu-mobile .p-contextmenu-item-active > .p-contextmenu-item-content .p-contextmenu-submenu-icon {
     @apply -rotate-90
-}
-
-.p-contextmenu-mobile .p-contextmenu-submenu {
-    @apply static shadow-none border-none pl-4
 }
diff --git a/assets/styles/presets/aura/menubar.css b/assets/styles/presets/aura/menubar.css
@@ -122,21 +122,18 @@
 }
 
 .p-menubar-mobile .p-menubar-root-list {
-    @apply absolute hidden w-full p-1 bg-surface-0 dark:bg-surface-900
+    @apply absolute hidden w-full flex-col top-full left-0 z-10 p-1 gap-[2px] rounded-md
         border border-surface-200 dark:border-surface-700
+        bg-surface-0 dark:bg-surface-900
         shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
 }
 
-.p-menubar-mobile .p-menubar-root-list > .p-menubar-item > .p-menubar-item-content {
-    @apply rounded-sm
-}
-
 .p-menubar-mobile .p-menubar-root-list > .p-menubar-item > .p-menubar-item-content > .p-menubar-item-link {
     @apply px-3 py-3
 }
 
 .p-menubar-mobile-active .p-menubar-root-list {
-    @apply flex flex-col top-full left-0 z-10
+    @apply flex
 }
 
 .p-menubar-mobile .p-menubar-root-list .p-menubar-item {
@@ -164,5 +161,5 @@
 }
 
 .p-menubar-mobile .p-menubar-submenu {
-    @apply w-full static shadow-none border-none pl-4
+    @apply w-full static shadow-none border-none ps-4 pe-0
 }
diff --git a/assets/styles/presets/aura/tieredmenu.css b/assets/styles/presets/aura/tieredmenu.css
@@ -92,20 +92,8 @@
     @apply transition-opacity duration-[250ms]
 }
 
-.p-tieredmenu-mobile {
-    @apply relative
-}
-
-.p-tieredmenu-mobile .p-tieredmenu-button {
-    @apply flex
-}
-
-.p-tieredmenu-mobile .p-tieredmenu-root-list > .p-tieredmenu-item > .p-tieredmenu-item-content > .p-tieredmenu-item-link {
-    @apply px-3 py-2
-}
-
-.p-tieredmenu-mobile .p-tieredmenu-item {
-    @apply static
+.p-tieredmenu-mobile .p-tieredmenu-submenu {
+    @apply static shadow-none border-none ps-4 pe-0
 }
 
 .p-tieredmenu-mobile .p-tieredmenu-submenu-icon {
@@ -114,8 +102,4 @@
 
 .p-tieredmenu-mobile .p-tieredmenu-item-active > .p-tieredmenu-item-content .p-tieredmenu-submenu-icon {
     @apply -rotate-90
-}
-
-.p-tieredmenu-mobile .p-tieredmenu-submenu {
-    @apply static shadow-none border-none pl-4
 }
diff --git a/assets/styles/presets/aura/toggleswitch.css b/assets/styles/presets/aura/toggleswitch.css
@@ -58,9 +58,9 @@
 }
 
 .p-toggleswitch.p-disabled .p-toggleswitch-slider {
-    @apply bg-surface-200 dark:bg-surface-800
+    @apply bg-surface-200 dark:bg-surface-600
 }
 
 .p-toggleswitch.p-disabled .p-toggleswitch-handle {
-    @apply bg-surface-700 dark:bg-surface-500
+    @apply bg-surface-700 dark:bg-surface-900
 }
diff --git a/assets/styles/presets/aura/tree.css b/assets/styles/presets/aura/tree.css
@@ -74,6 +74,10 @@
     @apply text-primary
 }
 
+.p-tree-filter {
+    @apply mb-2
+}
+
 .p-tree-filter-input {
     @apply w-full
 }

diff --git a/doc/autocomplete/MultipleDoc.vue b/doc/autocomplete/MultipleDoc.vue
@@ -7,7 +7,7 @@
         <AutoComplete v-model="value1" inputId="multiple-ac-1" multiple fluid :suggestions="items" @complete="search" />
 
         <label for="multiple-ac-2" class="font-bold mt-8 mb-2 block">Without Typeahead</label>
-        <AutoComplete v-model="value2" inputId="multiple-ac-2" multiple fluid @complete="search" :typeahead="false" variant="filled" />
+        <AutoComplete v-model="value2" inputId="multiple-ac-2" multiple fluid @complete="search" :typeahead="false" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -25,7 +25,7 @@ export default {
 <AutoComplete v-model="value1" inputId="multiple-ac-1" multiple fluid :suggestions="items" @complete="search" />
 
 <label for="multiple-ac-2" class="font-bold mt-8 mb-2 block">Without Typeahead</label>
-<AutoComplete v-model="value2" inputId="multiple-ac-2" multiple fluid @complete="search" :typeahead="false" variant="filled" />
+<AutoComplete v-model="value2" inputId="multiple-ac-2" multiple fluid @complete="search" :typeahead="false" />
 `,
                 options: `
 <template>
@@ -34,7 +34,7 @@ export default {
         <AutoComplete v-model="value1" inputId="multiple-ac-1" multiple fluid :suggestions="items" @complete="search" />
 
         <label for="multiple-ac-2" class="font-bold mt-8 mb-2 block">Without Typeahead</label>
-        <AutoComplete v-model="value2" inputId="multiple-ac-2" mulmultiple fluidtiple @complete="search" :typeahead="false" variant="filled" />
+        <AutoComplete v-model="value2" inputId="multiple-ac-2" mulmultiple fluidtiple @complete="search" :typeahead="false" />
     </div>
 </template>
 
@@ -62,7 +62,7 @@ export default {
         <AutoComplete v-model="value1" inputId="multiple-ac-1" multiple fluid :suggestions="items" @complete="search" />
 
         <label for="multiple-ac-2" class="font-bold mt-8 mb-2 block">Without Typeahead</label>
-        <AutoComplete v-model="value2" inputId="multiple-ac-2" multiple fluid @complete="search" :typeahead="false" variant="filled" />
+        <AutoComplete v-model="value2" inputId="multiple-ac-2" multiple fluid @complete="search" :typeahead="false" />
     </div>
 </template>
 

diff --git a/doc/dataview/BasicDoc.vue b/doc/dataview/BasicDoc.vue
@@ -10,7 +10,9 @@
                         <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-t border-surface-200 dark:border-surface-700': index !== 0 }">
                             <div class="md:w-40 relative">
                                 <img class="block xl:block mx-auto rounded w-full" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" />
-                                <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute dark:!bg-surface-900" style="left: 4px; top: 4px"></Tag>
+                                <div class="absolute bg-black/70 rounded-border" style="left: 4px; top: 4px">
+                                    <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
+                                </div>
                             </div>
                             <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
                                 <div class="flex flex-row md:flex-col justify-between items-start gap-2">
@@ -58,7 +60,9 @@ export default {
                 <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-t border-surface-200 dark:border-surface-700': index !== 0 }">
                     <div class="md:w-40 relative">
                         <img class="block xl:block mx-auto rounded w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
-                        <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute dark:!bg-surface-900" style="left: 4px; top: 4px"></Tag>
+                        <div class="absolute bg-black/70 rounded-border" style="left: 4px; top: 4px">
+                            <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
+                        </div>
                     </div>
                     <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
                         <div class="flex flex-row md:flex-col justify-between items-start gap-2">
@@ -97,7 +101,9 @@ export default {
                         <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-t border-surface-200 dark:border-surface-700': index !== 0 }">
                             <div class="md:w-40 relative">
                                 <img class="block xl:block mx-auto rounded w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
-                                <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute dark:!bg-surface-900" style="left: 4px; top: 4px"></Tag>
+                                <div class="absolute bg-black/70 rounded-border" style="left: 4px; top: 4px">
+                                    <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
+                                </div>
                             </div>
                             <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
                                 <div class="flex flex-row md:flex-col justify-between items-start gap-2">
@@ -170,7 +176,9 @@ export default {
                         <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-t border-surface-200 dark:border-surface-700': index !== 0 }">
                             <div class="md:w-40 relative">
                                 <img class="block xl:block mx-auto rounded w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
-                                <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute dark:!bg-surface-900" style="left: 4px; top: 4px"></Tag>
+                                <div class="absolute bg-black/70 rounded-border" style="left: 4px; top: 4px">
+                                    <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
+                                </div>
                             </div>
                             <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
                                 <div class="flex flex-row md:flex-col justify-between items-start gap-2">

diff --git a/doc/dataview/LayoutDoc.vue b/doc/dataview/LayoutDoc.vue
@@ -20,7 +20,9 @@
                         <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-t border-surface-200 dark:border-surface-700': index !== 0 }">
                             <div class="md:w-40 relative">
                                 <img class="block xl:block mx-auto rounded w-full" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" />
-                                <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute dark:!bg-surface-900" style="left: 4px; top: 4px"></Tag>
+                                <div class="absolute bg-black/70 rounded-border" style="left: 4px; top: 4px">
+                                    <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
+                                </div>
                             </div>
                             <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
                                 <div class="flex flex-row md:flex-col justify-between items-start gap-2">
@@ -55,7 +57,9 @@
                             <div class="bg-surface-50 flex justify-center rounded p-4">
                                 <div class="relative mx-auto">
                                     <img class="rounded w-full" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" style="max-width: 300px" />
-                                    <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute dark:!bg-surface-900" style="left: 4px; top: 4px"></Tag>
+                                    <div class="absolute bg-black/70 rounded-border" style="left: 4px; top: 4px">
+                                        <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
+                                    </div>
                                 </div>
                             </div>
                             <div class="pt-6">
@@ -116,7 +120,9 @@ export default {
                 <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-t border-surface-200 dark:border-surface-700': index !== 0 }">
                     <div class="md:w-40 relative">
                         <img class="block xl:block mx-auto rounded w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
-                        <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute dark:!bg-surface-900" style="left: 4px; top: 4px"></Tag>
+                        <div class="absolute bg-black/70 rounded-border" style="left: 4px; top: 4px">
+                            <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
+                        </div>
                     </div>
                     <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
                         <div class="flex flex-row md:flex-col justify-between items-start gap-2">
@@ -151,7 +157,9 @@ export default {
                     <div class="bg-surface-50 flex justify-center rounded p-4">
                         <div class="relative mx-auto">
                             <img class="rounded w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" style="max-width: 300px"/>
-                            <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute dark:!bg-surface-900" style="left: 4px; top: 4px"></Tag>
+                            <div class="absolute bg-black/70 rounded-border" style="left: 4px; top: 4px">
+                                <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
+                            </div>
                         </div>
                     </div>
                     <div class="pt-6">
@@ -201,7 +209,9 @@ export default {
                         <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-t border-surface-200 dark:border-surface-700': index !== 0 }">
                             <div class="md:w-40 relative">
                                 <img class="block xl:block mx-auto rounded w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
-                                <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute dark:!bg-surface-900" style="left: 4px; top: 4px"></Tag>
+                                <div class="absolute bg-black/70 rounded-border" style="left: 4px; top: 4px">
+                                    <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
+                                </div>
                             </div>
                             <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
                                 <div class="flex flex-row md:flex-col justify-between items-start gap-2">
@@ -236,7 +246,9 @@ export default {
                             <div class="bg-surface-50 flex justify-center rounded p-4">
                                 <div class="relative mx-auto">
                                     <img class="rounded w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" style="max-width: 300px"/>
-                                    <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute dark:!bg-surface-900" style="left: 4px; top: 4px"></Tag>
+                                    <div class="absolute bg-black/70 rounded-border" style="left: 4px; top: 4px">
+                                        <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
+                                    </div>
                                 </div>
                             </div>
                             <div class="pt-6">
@@ -322,7 +334,9 @@ export default {
                         <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-t border-surface-200 dark:border-surface-700': index !== 0 }">
                             <div class="md:w-40 relative">
                                 <img class="block xl:block mx-auto rounded w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
-                                <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute dark:!bg-surface-900" style="left: 4px; top: 4px"></Tag>
+                                 <div class="absolute bg-black/70 rounded-border" style="left: 4px; top: 4px">
+                                    <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
+                                </div>
                             </div>
                             <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
                                 <div class="flex flex-row md:flex-col justify-between items-start gap-2">
@@ -357,7 +371,9 @@ export default {
                             <div class="bg-surface-50 flex justify-center rounded p-4">
                                 <div class="relative mx-auto">
                                     <img class="rounded w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" style="max-width: 300px"/>
-                                    <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute dark:!bg-surface-900" style="left: 4px; top: 4px"></Tag>
+                                    <div class="absolute bg-black/70 rounded-border" style="left: 4px; top: 4px">
+                                        <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
+                                    </div>
                                 </div>
                             </div>
                             <div class="pt-6">