@iqual/nuxt-icms 1.5.13 → 1.5.15

package/components/Paragraph/Collapsible/Element/index.vue

@@ -8,13 +8,17 @@
       name="field_icms_collapsible_layouts"
       :list="layouts"
       :class="
-        cn(themedClass('containerClass', 'flex min-h-20 w-full flex-col gap-6'), {
-          droptarget: isEditing,
-        })
+        cn(
+          themedClass('containerClass', 'flex min-h-20 w-full flex-col gap-6'),
+          {
+            droptarget: isEditing,
+          },
+        )
       "
     />
   </div>
-  <BlokkliField v-else
+  <BlokkliField
+    v-else
     name="field_icms_collapsible_layouts"
     :list="layouts"
     :class="
@@ -26,6 +30,7 @@
 </template>
 
 <script lang="ts" setup>
+import type { ColorScheme } from '@iqual/nuxt-icms/types/global'
 import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 import { tv } from 'tailwind-variants'
 import cn from '@iqual/nuxt-icms/composables/useCn'
@@ -36,7 +41,7 @@ defineProps<ParagraphIcmsCollapsibleElementFragment>()
 
 const { options, isEditing } = useAttrs().blokkliData as any
 
-const themedClass = useTheme('ParagraphTabsElement')
+const themedClass = useTheme('ParagraphCollapsibleElement')
 
 const title = tv({
   base: themedClass('collapsibleTitleBase', 'px-3 py-2 mb-4 rounded-sm'),

package/components/Paragraph/Collapsible/Layout/index.vue

@@ -59,7 +59,7 @@
             }"
           >
             <template #content="{ item, index }">
-              <div :class="themedClass('accordionContentInnerClass', 'py-6')">
+              <div :class="themedClass('tabsContentInnerClass', 'py-6')">
                 <BlokkliField
                   name="field_icms_collapsible_elements"
                   :list="[item.element]"

package/components/Search/Facets/FacetDropdownUI.vue

@@ -123,15 +123,21 @@
                   )
                 "
               >
-                <button
+                <DesignSystemAtomsButton
+                  :label="$texts('listing.clear_filter', 'Clear')"
                   :disabled="
-                    !(selections[field.field] && selections[field.field].length)
+                    !(
+                      selections[field.field] && selections[field.field]?.length
+                    )
                   "
                   @click="clearField(field.field)"
-                  :class="resetFilterButton({ colorScheme })"
-                >
-                  <span>{{ $texts('listing.clear_filter', 'Clear') }}</span>
-                </button>
+                  :buttonClass="
+                    themedClass('resetFilterButtonButtonClass', 'py-1 px-3')
+                  "
+                  :labelClass="themedClass('resetFilterButtonLabelClass')"
+                  buttonStyle="focus"
+                  :colorScheme="colorScheme"
+                />
               </div>
             </div>
           </template>
@@ -148,15 +154,15 @@
         "
       >
         <!-- Reset filters button -->
-        <button
+        <DesignSystemAtomsButton
           v-if="selections && Object.keys(selections || {}).length"
+          :label="$texts('listing.clear_filters', 'Clear all filters')"
           @click="clearAll"
-          :class="resetFiltersButton({ colorScheme })"
-        >
-          <span>
-            {{ $texts('listing.clear_filters', 'Clear all filters') }}
-          </span>
-        </button>
+          :buttonClass="themedClass('resetFiltersButtonButtonClass')"
+          :labelClass="themedClass('resetFiltersButtonLabelClass')"
+          buttonStyle="focus"
+          :colorScheme="colorScheme"
+        />
       </div>
     </DesignSystemAtomsGridRow>
 
@@ -515,60 +521,6 @@ const resultsCount = tv({
   },
 })
 
-const resetFilterButton = tv({
-  base: themedClass(
-    'resetFilterButtonBase',
-    '[&>span]:text-sm w-fit px-4 py-1 border-0 transition-all bg-white border-1 border-black focus:outline-hidden focus:ring-2 disabled:opacity-40',
-  ),
-  variants: {
-    colorScheme: {
-      none: themedClass(
-        'resetFilterButtonVariantsColorSchemeNone',
-        'bg-primary-500 border-primary-500 focus:ring-black text-white enabled:hover:text-primary-500 enabled:hover:bg-white enabled:hover:border-primary',
-      ),
-      dark: themedClass(
-        'resetFilterButtonVariantsColorSchemeDark',
-        'bg-primary-500 border-primary-500 focus:ring-primary-500 text-black enabled:hover:text-primary-500 enabled:hover:bg-gray-900 enabled:hover:border-primary',
-      ),
-      light: themedClass(
-        'resetFilterButtonVariantsColorSchemeLight',
-        'bg-primary-500 border-primary-500 focus:ring-black text-white enabled:hover:text-primary-500 enabled:hover:bg-gray-50 enabled:hover:border-primary',
-      ),
-      accent: themedClass(
-        'resetFilterButtonVariantsColorSchemeAccent',
-        'bg-gray-950 border-gray-950 focus:ring-white text-white enabled:hover:text-black enabled:hover:bg-white enabled:hover:border-white',
-      ),
-    },
-  },
-})
-
-const resetFiltersButton = tv({
-  base: themedClass(
-    'resetFiltersButtonBase',
-    'py-3 px-10 transition-all border-1 focus:outline-hidden focus:ring-2',
-  ),
-  variants: {
-    colorScheme: {
-      none: themedClass(
-        'resetFiltersButtonVariantsColorSchemeBase',
-        'bg-primary-500 border-primary-500 focus:ring-black text-white hover:text-primary-500 hover:bg-white hover:border-primary',
-      ),
-      dark: themedClass(
-        'resetFiltersButtonVariantsColorSchemeDark',
-        'bg-primary-500 border-primary-500 focus:ring-primary-500 text-black hover:text-primary-500 hover:bg-gray-950 hover:border-primary',
-      ),
-      light: themedClass(
-        'resetFiltersButtonVariantsColorSchemeNone',
-        'bg-primary-500 border-primary-500 focus:ring-black text-white hover:text-primary-500 hover:bg-gray-50 hover:border-primary',
-      ),
-      accent: themedClass(
-        'resetFiltersButtonVariantsColorSchemeAccent',
-        'bg-gray-950 border-gray-950 focus:ring-white text-white hover:text-black hover:bg-white hover:border-white',
-      ),
-    },
-  },
-})
-
 const checkboxBase = tv({
   base: themedClass('checkboxBase', 'rounded-none cursor-pointer'),
   variants: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iqual/nuxt-icms",
-  "version": "1.5.13",
+  "version": "1.5.15",
   "description": "ICMS Base",
   "type": "module",
   "private": false,