@imaginario27/air-ui-ds 1.0.23 → 1.1.1

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,
@@ -100,19 +94,19 @@ const iconContainerClass = computed(() => {
 })
 
 const iconColorClass = computed(() => {
-    if (props.styleType === IconContainerStyleType.FILLED) return 'text-icon-neutral-on-filled-bg'
+    if (props.styleType === IconContainerStyleType.FILLED) return '!text-icon-neutral-on-filled-bg'
 
     const iconVariants = {
-        [ColorAccent.NEUTRAL]: 'text-icon-neutral-subtle-on-subtler-bg',
-        [ColorAccent.SUCCESS]: 'text-icon-success',
-        [ColorAccent.WARNING]: 'text-icon-warning-on-bg',
-        [ColorAccent.DANGER]: 'text-icon-danger',
-        [ColorAccent.INFO]: 'text-icon-info',
-        [ColorAccent.PRIMARY_BRAND]: 'text-icon-primary-brand-default',
-        [ColorAccent.SECONDARY_BRAND]: 'text-icon-secondary-brand-default',
+        [ColorAccent.NEUTRAL]: '!text-icon-neutral-subtle-on-subtler-bg',
+        [ColorAccent.SUCCESS]: '!text-icon-success',
+        [ColorAccent.WARNING]: '!text-icon-warning-on-bg',
+        [ColorAccent.DANGER]: '!text-icon-danger',
+        [ColorAccent.INFO]: '!text-icon-info',
+        [ColorAccent.PRIMARY_BRAND]: '!text-icon-primary-brand-default',
+        [ColorAccent.SECONDARY_BRAND]: '!text-icon-secondary-brand-default',
     }
-    return iconVariants[props.color as ColorAccent] || 'text-icon-neutral-subtle-on-subtler-bg'
 
+    return iconVariants[props.color as ColorAccent] || '!text-icon-neutral-subtle-on-subtler-bg'
 })
 
 const iconContainerSizeClass = computed(() => {
@@ -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'

package/components/lists/ListItem.vue

@@ -5,14 +5,11 @@
             spaced && 'py-4'
         ]"
     >
-        <span v-if="icon">
-            <MdiIcon 
-                :class="iconClass"
-                :icon="icon"
-                preserveAspectRatio="xMidYMid meet"
-                :size="iconSize"
-            />
-        </span>
+        <Icon
+            v-if="icon"
+            :name="icon"
+            :class="[iconClass, iconSizeClass]"
+        />
         <span :class="[contentSizeClass, 'w-full']">
             <slot />
         </span>
@@ -21,7 +18,7 @@
 <script setup lang="ts">
 // Props
 const props = defineProps({
-    icon: String as PropType<any>,
+    icon: String as PropType<string>,
     iconClass: {
         type: String as PropType<string>,
         default: 'text-icon-secondary-brand-default'
@@ -38,13 +35,13 @@ const props = defineProps({
 })
 
 // Computed
-const iconSize = computed(() => {
+const iconSizeClass = computed(() => {
     const sizeVariant = {
-        [ListItemSize.XS]: '16',
-        [ListItemSize.SM]: '20',
-        [ListItemSize.MD]: '24',
+        [ListItemSize.XS]: 'w-[16px] h-[16px] min-w-[16px] min-h-[16px]',
+        [ListItemSize.SM]: 'w-[20px] h-[20px] min-w-[20px] min-h-[20px]',
+        [ListItemSize.MD]: 'w-[24px] h-[24px] min-w-[24px] min-h-[24px]',
     }
-    return sizeVariant[props.size as ListItemSize] || '20'
+    return sizeVariant[props.size as ListItemSize] || 'w-[20px] h-[20px] min-w-[20px] min-h-[20px]'
 })
 
 const contentSizeClass = computed(() => {

package/components/loaders/LoadingScreen.vue

@@ -35,7 +35,7 @@
         <ContainedIcon 
             v-if="!$slots['graphic']"
             :color="ColorAccent.DANGER"
-            icon="mdiAlertCircleOutline"
+            icon="mdi:alert-circle-outline"
             :size="iconContainerSize"
         />
 
@@ -95,7 +95,7 @@
                         :text="retryButtonText"
                         :size="buttonSize"
                         :iconPosition="IconPosition.LEFT"
-                        icon="mdiRefresh"
+                        icon="mdi:refresh"
                         class="self-center"
                         :disabled="isRetryButtonDisabled"
                         isMobileFullWidth
@@ -151,7 +151,7 @@ const props = defineProps({
     },
     goBackIcon: {
         type: String as PropType<string>,
-        default: "mdiKeyboardBackspace",
+        default: "mdi:keyboard-backspace",
     },
     hasRetryButton: {
         type: Boolean as PropType<boolean>,

package/components/modals/DangerModalDialog.vue

@@ -78,8 +78,8 @@ defineProps({
         default: false,
     },
     icon: {
-        type: String as PropType<any>,
-        default: 'mdiAlertOutline',
+        type: String as PropType<string>,
+        default: 'mdi:alert-outline',
     },
     title: {
         type: String as PropType<string>,
@@ -95,8 +95,8 @@ defineProps({
         default: 'Delete',
     },
     buttonActionIcon: {
-        type: String as PropType<any>,
-        default: 'mdiDeleteForeverOutline',
+        type: String as PropType<string>,
+        default: 'mdi:delete-forever-outline',
     },
     isLoading: { 
         type: Boolean as PropType<boolean>,

package/components/modals/InfoModalDialog.vue

@@ -78,8 +78,8 @@ defineProps({
         default: false,
     },
     icon: {
-        type: String as PropType<any>,
-        default: 'mdiInformationOutline',
+        type: String as PropType<string>,
+        default: 'mdi:information-outline',
     },
     title: {
         type: String as PropType<string>,
@@ -91,7 +91,7 @@ defineProps({
         default: 'Close',
     },
     buttonActionText: String as PropType<string>,
-    buttonActionIcon: String as PropType<any>,
+    buttonActionIcon: String as PropType<string>,
     isLoading: { 
         type: Boolean as PropType<boolean>,
         default: false,

package/components/modals/ModalDialog.vue

@@ -22,7 +22,7 @@
                         v-if="hasCornerCloseButton"
                         :styleType="ButtonStyleType.NEUTRAL_TRANSPARENT"
                         :size="ButtonSize.MD"
-                        icon="mdiClose"
+                        icon="mdi:close"
                         class="absolute top-4 right-4 z-10"
                         @click="closeModal"
                     />

package/components/modals/SuccessModalDialog.vue

@@ -42,8 +42,8 @@ defineProps({
         default: false,
     },
     icon: {
-        type: String as PropType<any>,
-        default: 'mdiCheckBold',
+        type: String as PropType<string>,
+        default: 'mdi:check-bold',
     },
     title: {
         type: String as PropType<string>,

package/components/navigation/links/NavLink.vue

@@ -14,21 +14,21 @@
             gapClass,
         ]">
             <!-- Left icon -->
-            <MdiIcon
+            <Icon
                 v-if="iconPosition === IconPosition.LEFT"
-                :icon="icon"
-                :size="iconSizeClass"
-                preserveAspectRatio="xMidYMid meet"
+                :name="icon"
+                :iconClass="iconSizeClass"
             />
+
             <span :class="[ textSizeClass, textClass ]">
                 {{ text }}
             </span>
+
             <!-- Right icon -->
-            <MdiIcon
+            <Icon
                 v-if="iconPosition === IconPosition.RIGHT"
-                :icon="icon"
-                :size="iconSizeClass"
-                preserveAspectRatio="xMidYMid meet"
+                :name="icon"
+                :iconClass="iconSizeClass"
             />
         </div>
     </NuxtLink>
@@ -47,8 +47,8 @@ const props = defineProps({
         validator: (value: NavLinkSize) => Object.values(NavLinkSize).includes(value),
     },
     icon: {
-        type: String as PropType<any>,
-        default: "mdiArrowRightThin"
+        type: String as PropType<string>,
+        default: "mdi:arrow-right-thin"
     },
     iconPosition: {
         type: String as PropType<IconPosition>,

package/components/navigation/nav-sidebar/BottomUserNavBar.vue

@@ -63,16 +63,16 @@ defineProps({
         default: () => [
             {
                 text: 'Account settings',
-                icon: 'mdiAccountCogOutline',
+                icon: 'mdi:account-cog-outline',
             },
             {
                 text: 'Support',
-                icon: 'mdiLifebuoy',
+                icon: 'mdi:lifebuoy',
                 to: '/',
             },
             {
                 text: 'Logout',
-                icon: 'mdiLogout',
+                icon: 'mdi:logout',
                 actionType: DropdownActionType.ACTION,
                 type: DropdownItemType.DANGER_ICON,
                 callback: () => {},

package/components/navigation/nav-sidebar/NavSidebar.vue

@@ -191,30 +191,30 @@ const props = defineProps({
             {
                 isSectionTitle: true,
                 text: 'Section title',
-                icon: 'mdiBullseye',
+                icon: 'mdi:bullseye',
             },
             {
                 text: 'Item 1',
-                icon: 'mdiHelp',
+                icon: 'mdi:help',
                 to: '/',
             },
             {
                 text: 'Item 2',
-                icon: 'mdiHelp',
+                icon: 'mdi:help',
                 to: '/',
             },
             {
                 text: 'Item 3',
-                icon: 'mdiHelp',
+                icon: 'mdi:help',
                 children: [
                     {
                         text: 'Subitem 1',
-                        icon: 'mdiHelp',
+                        icon: 'mdi:help',
                         to: '/',
                     },
                     {
                         text: 'Subitem 2',
-                        icon: 'mdiHelp',
+                        icon: 'mdi:help',
                         to: '/',
                     },
                 ],
@@ -264,11 +264,11 @@ const props = defineProps({
     },
     collapsedStateIcon: {
         type: String as PropType<string>,
-        default: 'mdiMenuClose',
+        default: 'mdi:menu-close',
     },
     expandedStateIcon: {
         type: String as PropType<string>,
-        default: 'mdiMenuOpen',
+        default: 'mdi:menu-open',
     },
     showMobileSidebarClose: {
         type: Boolean as PropType<boolean>,
@@ -276,7 +276,7 @@ const props = defineProps({
     },
     mobileSidebarCloseIcon: {
         type: String as PropType<string>,
-        default: 'mdiClose',
+        default: 'mdi:close-circle',
     },
     isFixed: {
         type: Boolean as PropType<boolean>,

package/components/navigation/nav-sidebar/NavSidebarMenuItem.vue

@@ -22,11 +22,10 @@
                 gapClass,
             ]"
         >
-            <MdiIcon 
+            <Icon
                 v-if="icon"
-                :icon
-                preserveAspectRatio="xMidYMid meet"
-                :class="['text-icon-neutral-subtler', iconSizeClass]"
+                :name="icon"
+                :iconClass="['!text-icon-neutral-subtler', iconSizeClass]"
             />
 
             <span 
@@ -37,11 +36,10 @@
             </span>
         </div>
 
-        <MdiIcon 
+        <Icon
             v-if="showDropdownArrow && !isCollapsed"
-            :icon="isOpen ? 'mdiChevronUp' : 'mdiChevronDown'"
-            preserveAspectRatio="xMidYMid meet"
-            :class="['text-icon-default', iconSizeClass]"
+            :name="isOpen ? 'mdi:chevron-up' : 'mdi:chevron-down'"
+            :class="iconSizeClass"
         />
     </NuxtLink>
 </template>
@@ -52,7 +50,7 @@ const props = defineProps({
         type: String as PropType<string>,
         default: 'Item text'
     },
-    icon: String as PropType<any>,
+    icon: String as PropType<string>,
     to: {
         type: String as PropType<string>,
         default: null

package/components/navigation/nav-sidebar/NavSidebarMenuSectionTitle.vue

@@ -12,11 +12,10 @@
         spacingClass,
     ]"
     >
-        <MdiIcon 
+        <Icon
             v-if="icon"
-            :icon
-            preserveAspectRatio="xMidYMid meet"
-            :class="['text-icon-neutral-subtle', iconSizeClass]"
+            :name="icon"
+            :iconClass="['!text-icon-neutral-subtle', iconSizeClass]"
         />
 
         <span>
@@ -32,7 +31,7 @@ const props = defineProps({
         type: String as PropType<string>,
         default: 'Item text'
     },
-    icon: String as PropType<any>,
+    icon: String as PropType<string>,
     styleType: {
         type: String as PropType<SidebarNavMenuItemStyleType>,
         default: SidebarNavMenuItemStyleType.COMPACT, 

package/components/pagination/ButtonPagination.vue

@@ -62,11 +62,9 @@
                     :disabled="modelValue === 1" 
                     @click="goToPreviousPage"
                 >
-                    <MdiIcon 
-                        icon="mdiChevronLeft"
-                        size="20px"
-                        preserveAspectRatio="xMidYMid meet"
-                        class="text-icon-neutral-subtle"
+                    <Icon
+                        name="mdi:chevron-left"
+                        iconClass="text-icon-neutral-subtle"
                     />
                 </PaginationButton>
 
@@ -122,11 +120,9 @@
                     :disabled="modelValue === totalPages"
                     @click="goToNextPage"
                 >
-                    <MdiIcon 
-                        icon="mdiChevronRight"
-                        size="20px"
-                        preserveAspectRatio="xMidYMid meet"
-                        class="text-icon-neutral-subtle"
+                    <Icon 
+                        name="mdi:chevron-right"
+                        iconClass="text-icon-neutral-subtle"
                     />
                 </PaginationButton>
             </nav>

package/components/pagination/SimplePagination.vue

@@ -1,7 +1,7 @@
 <template>
     <nav class="flex items-center justify-center gap-2">
         <ActionIconButton 
-            icon="mdiChevronLeft"
+            icon="mdi:chevron-left"
             :styleType="ButtonStyleType.NEUTRAL_TRANSPARENT"
             :disabled="modelValue === 1"
             :class="[
@@ -14,7 +14,7 @@
             {{ computedResultsText }}
         </p>
         <ActionIconButton 
-            icon="mdiChevronRight"
+            icon="mdi:chevron-right"
             :styleType="ButtonStyleType.NEUTRAL_TRANSPARENT"
             :disabled="modelValue === totalPages"
             :class="[

package/components/password/SecurePasswordCondition.vue

@@ -8,13 +8,12 @@
             'gap-2',
         ]"
     >
-        <MdiIcon 
-            :icon="isValid ? 'mdiCheck' : 'mdiClose'" 
-            preserveAspectRatio="xMidYMid meet"
-            :class="[
-                isValid ? 'text-icon-success-subtle' : 'text-text-neutral-subtle',
-                'w-[16px] h-[16px] min-w-[16px] min-h-[16px]',
+        <Icon 
+            :name="isValid ? 'mdi:check' : 'mdi:close'" 
+            :iconClass="[
+                isValid ? '!text-icon-success-subtle' : '!text-text-neutral-subtle',
             ]" 
+            :size="IconSize.SM"
         />
         <span 
             :class="[

package/components/rating/InteractiveRating.vue

@@ -33,16 +33,16 @@ const props = defineProps({
         validator: (value: RatingItemColor) => Object.values(RatingItemColor).includes(value),
     },
     emptyIndicatorIcon: {
-        type: String as PropType<any>,
-        default: 'mdiStarOutline'
+        type: String as PropType<string>,
+        default: 'mdi:star-outline'
     },
     halfIndicatorIcon: {
-        type: String as PropType<any>,
-        default: 'mdiStarHalfFull'
+        type: String as PropType<string>,
+        default: 'mdi:star-half-full'
     },
     fullIndicatorIcon: {
-        type: String as PropType<any>,
-        default: 'mdiStar'
+        type: String as PropType<string>,
+        default: 'mdi:star'
     },
     hoverPreview: {
         type: Boolean,

package/components/rating/Rating.vue

@@ -28,16 +28,16 @@ const props = defineProps({
         validator: (value: RatingItemColor) => Object.values(RatingItemColor).includes(value),
     },
     emptyIndicatorIcon: {
-        type: String as PropType<any>,
-        default: 'mdiStarOutline'
+        type: String as PropType<string>,
+        default: 'mdi:star-outline'
     },
     halfIndicatorIcon: {
-        type: String as PropType<any>,
-        default: 'mdiStarHalfFull'
+        type: String as PropType<string>,
+        default: 'mdi:star-half-full'
     },
     fullIndicatorIcon: {
-        type: String as PropType<any>,
-        default: 'mdiStar'
+        type: String as PropType<string>,
+        default: 'mdi:star'
     }
 })