@imaginario27/air-ui-ds 1.0.23 → 1.1.0

package/components/forms/fields/ButtonField.vue

@@ -22,8 +22,6 @@
             :loadingText
             :styleType
             :actionType
-            :svgIcon
-            :useSVGIconColor
             :isRounded
             :isFullWidth
             :isMobileFullWidth
@@ -62,19 +60,14 @@ const props = defineProps({
         validator: (value: ButtonSize) => Object.values(ButtonSize).includes(value),
     },
     icon: {
-        type: String as PropType<any>,
-        default: "mdiHelp"
+        type: String as PropType<string>,
+        default: "mdi:help"
     },
     iconPosition: {
         type: String as PropType<IconPosition>,
         default: IconPosition.NONE,
         validator: (value: IconPosition) => Object.values(IconPosition).includes(value),
     },
-    svgIcon: String as PropType<string>,
-    useSVGIconColor: {
-        type: Boolean as PropType<boolean>,
-        default: false,
-    },
     disabled: {
         type: Boolean as PropType<boolean>,
         default: false,

package/components/forms/fields/CheckboxField.vue

@@ -54,12 +54,13 @@
                 ]"
                 @click="toggleCheckbox"
             >
-                <MdiIcon 
+                <Icon
                     v-if="modelValue" 
-                    icon="mdiCheckBold" 
-                    :size="checkboxIconSizeClass" 
-                    preserveAspectRatio="xMidYMid meet"
-                    :class="disabled ? 'text-icon-neutral-disabled' : 'text-icon-neutral-on-filled-bg'"
+                    name="mdi:check-bold" 
+                    :iconClass="[
+                        checkboxIconSizeClass,
+                        disabled ? '!text-icon-neutral-disabled' : '!text-icon-neutral-on-filled-bg'
+                    ]"
                 />
             </div>
             
@@ -153,10 +154,10 @@ const controlFieldSizeClass = computed(() => {
 
 const checkboxIconSizeClass = computed(() => {
     const sizeVariant = {
-        [ControlFieldSize.MD]: '16',
-        [ControlFieldSize.LG]: '20',
+        [ControlFieldSize.MD]: '!w-[16px] !h-[16px] !min-w-[16px] !min-h-[16px]',
+        [ControlFieldSize.LG]: '!w-[20px] !h-[20px] !min-w-[20px] !min-h-[20px]',
     }
-    return sizeVariant[props.size as ControlFieldSize] || '16'
+    return sizeVariant[props.size as ControlFieldSize] || '!w-[16px] !h-[16px] !min-w-[16px] !min-h-[16px]'
 })
 
 const labelSizeClass = computed(() => {

package/components/forms/fields/DataField.vue

@@ -35,7 +35,7 @@
 
                     <ActionIconButton 
                         v-if="hasCopyToClipboardButton"
-                        icon="mdiContentCopy"
+                        icon="mdi:content-copy"
                         :size="ButtonSize.XS"
                         @click="handleCopyToClipboard"
                     />

package/components/forms/fields/FileUploadField.vue

@@ -48,10 +48,10 @@
                     @error="handleError"
                 >
                     <template #placeholder-img>
-                        <MdiIcon
-                            :icon="icon"
-                            preserveAspectRatio="xMidYMid meet"
-                            class="min-w-[40px] min-h-[40px] aspect-square text-icon-default"
+                        <Icon 
+                            name="mdi:cloud-upload-outline"
+                            :size="IconSize.XXL"
+                            :color="ColorAccent.NEUTRAL"
                         />
                     </template>
                     <template #title>
@@ -109,8 +109,8 @@ const props = defineProps({
     },
     helpText: String as PropType<string>,
     icon: {
-        type: String as PropType<any>,
-        default: 'mdiUploadOutline',
+        type: String as PropType<string>,
+        default: 'mdi:cloud-upload-outline',
     },
     buttonText: String as PropType<string>,
     upToText: {

package/components/forms/fields/InputField.vue

@@ -42,16 +42,11 @@
             ]"
         >
             <!-- Icon -->
-            <span
+            <Icon
                 v-if="icon"
-                class="text-icon-neutral-subtler"
-            >
-                <MdiIcon
-                    :icon="icon"
-                    size="20"
-                    preserveAspectRatio="xMidYMid meet"
-                />
-            </span>
+                :name="icon"
+                iconClass="text-icon-neutral-subtler"
+            />
 
             <!-- Input -->
             <input
@@ -98,13 +93,13 @@
                     'focus:outline-none',
                     'transition-colors',
                     'cursor-pointer',
+                    'h-[20px]'
                 ]"
                 @click="handleSuffixClick"
             >
-                <MdiIcon
-                    :icon="suffixIcon"
-                    size="20"
-                    preserveAspectRatio="xMidYMid meet"
+                <Icon
+                    v-if="suffixIcon"
+                    :name="suffixIcon"  
                 />
             </button>
 
@@ -118,27 +113,21 @@
                     'focus:outline-none',
                     'transition-colors',
                     'cursor-pointer',
+                    'h-[20px]'
                 ]"
                 @click="() => showPassword = !showPassword"
             >
-                <MdiIcon
-                    :icon="showPassword ? 'mdiEyeOffOutline' : 'mdiEyeOutline'"
-                    size="20"
-                    preserveAspectRatio="xMidYMid meet"
+                <Icon
+                    :name="showPassword ? 'mdi:eye-off-outline' : 'mdi:eye-outline'"
                 />
             </button>
 
             <!-- Error Icon -->
-            <span
+            <Icon
                 v-if="hasError && !suffixIcon"
-                class="text-icon-error"
-            >
-                <MdiIcon
-                    icon="mdiAlertCircle"
-                    size="20"
-                    preserveAspectRatio="xMidYMid meet"
-                />
-            </span>
+                name="mdi:alert-circle-outline"
+                iconClass="text-icon-error"
+            />
         </div>
 
         <!-- Help Text -->
@@ -171,8 +160,8 @@ const props = defineProps({
         default: 'Placeholder',
     },
     helpText: String as PropType<string>,
-    icon: String as PropType<any>,
-    suffixIcon: String as PropType<any>,
+    icon: String as PropType<string>,
+    suffixIcon: String as PropType<string>,
     linkText: String as PropType<string>,
     linkUrl: String as PropType<string>,       
     size: {

package/components/forms/fields/RepeaterField.vue

@@ -19,7 +19,7 @@
                 <ActionIconButton
                     v-if="index === items.length - 1"
                     :styleType="ButtonStyleType.NEUTRAL_OUTLINED"
-                    icon="mdiPlusCircleOutline"
+                    icon="mdi:plus-circle-outline"
                     :size="ButtonSize.SM"
                     @click="addItem"
                 />
@@ -28,7 +28,7 @@
                 <ActionIconButton
                     v-if="items.length > 1"
                     :styleType="ButtonStyleType.DELETE_SOFT"
-                    icon="mdiMinusCircleOutline"
+                    icon="mdi:minus-circle-outline"
                     :size="ButtonSize.SM"
                     @click="removeItem(index)"
                 />

package/components/forms/fields/SearchField.vue

@@ -38,13 +38,10 @@
             ]"
         >
             <!-- Icon -->
-            <span class="text-icon-neutral-subtler">
-                <MdiIcon 
-                    :icon
-                    size="20" 
-                    preserveAspectRatio="xMidYMid meet"
-                />
-            </span>
+            <Icon
+                :name="icon"
+                iconClass="text-icon-neutral-subtler"
+            />
 
             <!-- Input -->
             <input 
@@ -73,7 +70,7 @@
                 v-if="filled"
                 :size="ButtonSize.SM"
                 :styleType="ButtonStyleType.NEUTRAL_TRANSPARENT_SUBTLE"
-                icon="mdiCloseCircle"
+                icon="mdi:close-circle"
                 @click="clearField"
             />
         </div>
@@ -101,8 +98,8 @@ const props = defineProps({
     },
     helpText: String as PropType<string>,
     icon: {
-        type: String as PropType<any>,
-        default: 'mdiMagnify',
+        type: String as PropType<string>,
+        default: 'mdi:magnify',
     },
     size: {
         type: String as PropType<InputSize>,

package/components/forms/fields/SliderField.vue

@@ -69,7 +69,7 @@
                                 'transition-all duration-200',
                                 disabled 
                                     ? 'opacity-50 cursor-not-allowed' 
-                                    : 'hover:bg-background-neutral-sublter hover:border-border-primary-brand-default hover:text-text-primary-brand-default cursor-pointer',
+                                    : 'hover:bg-background-neutral-subtler hover:border-border-primary-brand-default hover:text-text-primary-brand-default cursor-pointer',
                                 'focus:outline-none focus:ring-2 focus:ring-primary-brand-200'
                             ]"
                             @click="startEditing(0)"
@@ -79,11 +79,10 @@
                             <span>
                                 {{ `${currentValuePrefix || ''}${(modelValue as [number, number])[0]}${currentValueSuffix || ''}` }}
                             </span>
-                            <MdiIcon 
-                                icon="mdiPencil" 
-                                size="14px" 
-                                preserveAspectRatio="xMidYMid meet"
-                                class="ml-1 opacity-60"
+                            <Icon
+                                name="mdi:pencil"
+                                :size="IconSize.SM"
+                                iconClass="ml-1 opacity-60"
                             />
                         </button>
                         
@@ -167,7 +166,7 @@
                                 'transition-all duration-200',
                                 disabled 
                                     ? 'opacity-50 cursor-not-allowed' 
-                                    : 'hover:bg-background-neutral-sublter hover:border-border-primary-brand-default hover:text-text-primary-brand-default cursor-pointer',
+                                    : 'hover:bg-background-neutral-subtler hover:border-border-primary-brand-default hover:text-text-primary-brand-default cursor-pointer',
                                 'focus:outline-none focus:ring-2 focus:ring-primary-brand-200'
                             ]"
                             @click="startEditing(1)"
@@ -175,11 +174,10 @@
                             @keydown.space.prevent="startEditing(1)"
                         >
                             <span>{{ `${currentValuePrefix || ''}${(modelValue as [number, number])[1]}${currentValueSuffix || ''}` }}</span>
-                            <MdiIcon 
-                                icon="mdiPencil" 
-                                size="14px" 
-                                preserveAspectRatio="xMidYMid meet"
-                                class="ml-1 opacity-60"
+                            <Icon
+                                name="mdi:pencil"
+                                :size="IconSize.SM"
+                                iconClass="ml-1 opacity-60"
                             />
                         </button>
                     </div>
@@ -231,7 +229,7 @@
                                 'transition-all duration-200',
                                 disabled 
                                     ? 'opacity-50 cursor-not-allowed' 
-                                    : 'hover:bg-background-neutral-sublter hover:border-border-primary-brand-default hover:text-text-primary-brand-default cursor-pointer hover:shadow-sm',
+                                    : 'hover:bg-background-neutral-subtler hover:border-border-primary-brand-default hover:text-text-primary-brand-default cursor-pointer hover:shadow-sm',
                                 'focus:outline-none focus:ring-2 focus:ring-primary-brand-200'
                             ]"
                             @click="startEditing(0)"
@@ -241,11 +239,10 @@
                             <span>
                                 {{ `${currentValuePrefix || ''}${modelValue}${currentValueSuffix || ''}` }}
                             </span>
-                            <MdiIcon 
-                                icon="mdiPencil" 
-                                size="14px" 
-                                preserveAspectRatio="xMidYMid meet"
-                                :class="[
+                            <Icon
+                                name="mdi:pencil"
+                                :size="IconSize.SM"
+                                :iconClass="[
                                     'ml-1',
                                     'opacity-60',
                                     'group-hover:opacity-100',
@@ -309,7 +306,7 @@
                     'left-0',
                     'w-full',
                     'h-[4px]',
-                    'bg-background-neutral-sublter',
+                    'bg-background-neutral-subtler',
                     'rounded-full',
                     '-translate-y-1/2',
                 ]"

package/components/forms/fields/SwitchField.vue

@@ -22,7 +22,7 @@
         <div 
             :class="[ 
                 'flex items-center gap-3',
-                label || icon || customIcon ? 'justify-between' : 'justify-end',
+                label || icon ? 'justify-between' : 'justify-end',
                 'text-sm w-full',
                 hasError ? 'text-text-error' : 'text-text-default',
                 checkboxWrapperClass && checkboxWrapperClass
@@ -30,27 +30,15 @@
         >
             <!-- Label + Icon block (only if present) -->
             <div 
-                v-if="label || icon || customIcon"
+                v-if="label || icon"
                 class="flex gap-2.5 w-full"
             >
                 <!-- Icon -->
-                <template v-if="icon || customIcon">
-                    <MdiIcon 
-                        v-if="icon && !customIcon" 
-                        :icon="icon" 
-                        :size="iconSize" 
-                        preserveAspectRatio="xMidYMid meet"
-                        class="text-icon-default" 
-                    />
-                    <div
-                        v-else
-                        :class="[
-                            customIconSizeClass,
-                            'text-icon-default'
-                        ]"
-                        v-html="customIcon" 
-                    />
-                </template>
+                <Icon
+                    v-if="icon"
+                    :name="icon"
+                    :iconClass="iconSizeClass" 
+                />
 
                 <!-- Label -->
                 <label 
@@ -59,7 +47,6 @@
                     :class="[
                         disabled && 'text-text-neutral-disabled',
                         labelSizeClass,
-                        customIcon && 'mt-1',
                         labelClass && labelClass
                     ]" 
                     v-html="label"
@@ -151,8 +138,7 @@ const props = defineProps({
         default: ControlFieldSize.MD,
         validator: (value: ControlFieldSize) => Object.values(ControlFieldSize).includes(value),
     },
-    icon: String as PropType<any>,
-    customIcon: String as PropType<any>,
+    icon: String as PropType<string>,
     styleType: {
         type: String as PropType<SwitchStyle>,
         default: SwitchStyle.BRAND,
@@ -196,20 +182,12 @@ const labelSizeClass = computed(() => {
     return sizeVariant[props.size as ControlFieldSize] || 'text-sm'
 })
 
-const iconSize = computed(() => {
-    const sizeVariant = {
-        [ControlFieldSize.MD]: '20',
-        [ControlFieldSize.LG]: '24',
-    }
-    return sizeVariant[props.size as ControlFieldSize] || '20'
-})
-
-const customIconSizeClass = computed(() => {
+const iconSizeClass = computed(() => {
     const sizeVariant = {
-        [ControlFieldSize.MD]: 'w-[20px] h-[20px]',
-        [ControlFieldSize.LG]: 'w-[24px] h-[24px]',
+        [ControlFieldSize.MD]: 'w-[20px] h-[20px] min-w-[20px] min-h-[20px]',
+        [ControlFieldSize.LG]: 'w-[24px] h-[24px] min-w-[24px] min-h-[24px]',
     }
-    return sizeVariant[props.size as ControlFieldSize] || 'w-[20px] h-[20px]'
+    return sizeVariant[props.size as ControlFieldSize] || 'w-[20px] h-[20px] min-w-[20px] min-h-[20px]'
 })
 
 const checkedBackgroundClass = computed(() => {

package/components/forms/fields/TextareaField.vue

@@ -54,11 +54,13 @@
             />
 
             <!-- Error Icon -->
-            <span v-if="hasError" class="text-icon-error absolute top-4 right-4">
-                <MdiIcon 
-                    icon="mdiAlertCircle" 
-                    size="20" 
-                    preserveAspectRatio="xMidYMid meet"
+            <span 
+                v-if="hasError" 
+                class="absolute top-4 right-4"
+            >
+                <Icon
+                    name="mdi:alert-circle"
+                    iconClass="text-icon-error"
                 />
             </span>
         </div>

package/components/forms/fields/radio/RadioButtonField.vue

@@ -37,11 +37,10 @@
                     modelValue === value ? selectedIconBackgroundColorClass : 'bg-background-neutral-sublter'
                 ]"
             >
-                <MdiIcon 
-                    :icon="icon"
-                    size="24"
-                    preserveAspectRatio="xMidYMid meet"
-                    :class="modelValue === value ? selectedIconColorClass : 'text-icon-neutral-subtle'"
+                <Icon
+                    :name="icon"
+                    :size="IconSize.LG"
+                    :iconClass="modelValue === value ? selectedIconColorClass : 'text-icon-neutral-subtle'"
                 />
             </div>
             <!-- Label with help text -->
@@ -126,8 +125,8 @@ const props = defineProps({
         required: true,
     },
     icon: {
-        type: String as PropType<any>,
-        default: 'mdiHelp',
+        type: String as PropType<string>,
+        default: 'mdi:help',
     },
     type: {
         type: String as PropType<

package/components/icons/ContainedIcon.vue

@@ -1,5 +1,5 @@
 <template>
- <div 
+    <div 
         :class="[ 
             'flex',
             'items-center',
@@ -12,10 +12,9 @@
         ]"
     >
         <Icon
-            :icon
-            :type
+            :name="icon"
             :mode
-            :iconClass
+            :iconClass="[iconSizeClass, iconColorClass]"
         />
     </div>
 </template>
@@ -23,19 +22,14 @@
 // Props
 const props = defineProps({
     icon: {
-        type: String as PropType<any>,
-        default: 'mdiHelp',
+        type: String as PropType<string>,
+        default: 'mdi:help',
     },
     styleType: {
         type: String as PropType<IconContainerStyleType>,
         default: IconContainerStyleType.FLAT,
         validator: (value: IconContainerStyleType) => Object.values(IconContainerStyleType).includes(value),
     },
-    type: {
-        type: String as PropType<IconType>,
-        default: IconType.NATIVE, 
-        validator: (value: IconType) => Object.values(IconType).includes(value),
-    },
     mode: {
         type: String as PropType<IconMode>,
         default: IconMode.CSS,
@@ -136,8 +130,4 @@ const iconSizeClass = computed(() => {
 
     return sizeVariants[props.size as IconContainerSize] || 'w-[24px] h-[24px] min-w-[24px] min-h-[24px]'
 })
-
-const iconClass = computed(() => {
-    return [iconSizeClass.value, iconColorClass.value].join(' ')
-})
 </script>

package/components/icons/Icon.vue

@@ -1,37 +1,21 @@
 <template>
-    <MdiIcon
-        v-if="type === IconType.NATIVE"
-        :icon
-        preserveAspectRatio="xMidYMid meet"
-        :class="[
-            iconSizeClass,
-            iconColorClass,
-            iconClass,
-        ]"
-    />
     <NuxtIcon 
-        v-else-if="type === IconType.COLLECTION"
-        :name="icon"
+        :name
         :mode
         :customize="svgCustomize"
         :class="[
             iconSizeClass,
             iconColorClass,
-            iconClass,
+            ...normalizedIconClass,
         ]"
     />
 </template>
 <script setup lang="ts">
 // Props
 const props = defineProps({
-    icon: {
-        type: String as PropType<any>,
-        default: 'mdiHelp',
-    },
-    type: {
-        type: String as PropType<IconType>,
-        default: IconType.NATIVE, 
-        validator: (value: IconType) => Object.values(IconType).includes(value),
+    name: {
+        type: String as PropType<string>,
+        default: 'mdi:help',
     },
     mode: {
         type: String as PropType<IconMode>,
@@ -49,7 +33,14 @@ const props = defineProps({
         validator: (value: ColorAccent) => Object.values(ColorAccent).includes(value),
     },
     svgCustomize: Function as PropType<CollectionCustomizeCallback>,  
-    iconClass: String as PropType<string>,    
+    iconClass: [String, Array] as PropType<string | string[]>,    
+})
+
+// Computed function
+const normalizedIconClass = computed(() => {
+    return Array.isArray(props.iconClass)
+        ? props.iconClass
+        : props.iconClass?.split(' ').filter(Boolean) || []
 })
 
 // Computed classes

package/components/layouts/ErrorDisplay.vue

@@ -122,8 +122,8 @@ const props = defineProps({
         default: true,
     },
     icon: {
-        type: String as PropType<any>,
-        default: 'mdiAlertCircleOutline',
+        type: String as PropType<string>,
+        default: 'mdi:alert-circle-outline',
     },
     backToHomeText: {
         type: String as PropType<string>,
@@ -131,7 +131,7 @@ const props = defineProps({
     },
     backToHomeIcon: {
         type: String as PropType<string>,
-        default: 'mdiHomeOutline',
+        default: 'mdi:home-outline',
     },
     homeRoute: {
         type: String as PropType<string>,

package/components/layouts/headers/CompactHeader.vue

@@ -35,7 +35,7 @@
                     "
                 >
                     <ActionIconButton 
-                        :icon="isMobileSidebarOpen ? 'mdiMenuOpen' : 'mdiMenuClose'"
+                        :icon="isMobileSidebarOpen ? 'mdi:menu-open' : 'mdi:menu-close'"
                         class="lg:hidden shadow-sm"
                         @click="toggleMobileSidebar"
                     />
@@ -50,7 +50,7 @@
                     "
                 >
                     <ActionIconButton 
-                        :icon="isMobileSidebarOpen ? 'mdiMenuOpen' : 'mdiMenuClose'"
+                        :icon="isMobileSidebarOpen ? 'mdi:menu-open' : 'mdi:menu-close'"
                         class="lg:hidden shadow-sm"
                         @click="toggleMobileSidebar"
                     />
@@ -114,7 +114,7 @@
                     >
                         <template #activator="{ onClick }">
                             <ActionIconButton 
-                                icon="mdiMenu"
+                                icon="mdi:menu"
                                 class="lg:hidden shadow-sm"
                                 @click="onClick"
                             />
@@ -140,7 +140,7 @@
                     "
                 >
                     <ActionIconButton 
-                        :icon="isMobileSidebarOpen ? 'mdiMenuOpen' : 'mdiMenuClose'"
+                        :icon="isMobileSidebarOpen ? 'mdi:menu-open' : 'mdi:menu-close'"
                         class="lg:hidden shadow-sm"
                         @click="toggleMobileSidebar"
                     />

package/components/layouts/headers/ContentPageHeader.vue

@@ -16,7 +16,7 @@
             :text="goBackText"
             :iconPosition="IconPosition.LEFT"
             :to="goBackLink"
-            icon="mdiKeyboardBackspace"
+            icon="mdi:keyboard-backspace"
             class="mb-2"
         />
 

package/components/lists/List.vue

@@ -48,7 +48,7 @@ const props = defineProps({
         type: Number as PropType<number>,
         default: 1,
     },
-    listItemIcon: String as PropType<any>,
+    listItemIcon: String as PropType<string>,
     listItemIconClass: {
         type: String as PropType<string>,
         default: 'text-icon-secondary-brand-default'