@imaginario27/air-ui-ds 1.0.23 → 1.1.0

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'
     }
 })
 

package/components/rating/RatingItem.vue

@@ -1,9 +1,8 @@
 <template>
-    <MdiIcon 
-        :icon 
-        :size="iconSize"
-        preserveAspectRatio="xMidYMid meet"
+    <Icon
+        :name="icon"
         :class="[
+            iconSizeClass,
             colorClass,
             isInteractive && 'hover:cursor-pointer'
         ]"
@@ -13,8 +12,8 @@
 // Props
 const props = defineProps({
     icon: {
-        type: String as PropType<any>,
-        default: 'mdiStarOutline'
+        type: String as PropType<string>,
+        default: 'mdi:star-outline'
     },
     size: {
         type: String as PropType<RatingItemSize>,
@@ -33,15 +32,15 @@ const props = defineProps({
 })
 
 // Computed
-const iconSize = computed(() => {
+const iconSizeClass = computed(() => {
     const sizeVariant = {
-        [RatingItemSize.SM]: '20',
-        [RatingItemSize.MD]: '24',
-        [RatingItemSize.LG]: '32',
-        [RatingItemSize.XL]: '40',
-        [RatingItemSize.XXL]: '48',
+        [RatingItemSize.SM]: 'w-[20px] h-[20px] min-w-[20px] min-h-[20px]',
+        [RatingItemSize.MD]: 'w-[24px] h-[24px] min-w-[24px] min-h-[24px]',
+        [RatingItemSize.LG]: 'w-[32px] h-[32px] min-w-[32px] min-h-[32px]',
+        [RatingItemSize.XL]: 'w-[40px] h-[40px] min-w-[40px] min-h-[40px]',
+        [RatingItemSize.XXL]: 'w-[48px] h-[48px] min-w-[48px] min-h-[48px]',
     }
-    return sizeVariant[props.size as RatingItemSize] || '20'
+    return sizeVariant[props.size as RatingItemSize] || 'w-[20px] h-[20px] min-w-[20px] min-h-[20px]'
 })
 
 const colorClass = computed(() => {

package/components/steppers/CircleStepper.vue

@@ -47,19 +47,19 @@ const props = defineProps({
         type: [Array, Number] as PropType<number | CircleStep[]>,
         default: () => [
             {
-                icon: 'mdiHomeOutline',
+                icon: 'mdi:home-outline',
             },
             {
-                icon: 'mdiAccountOutline',
+                icon: 'mdi:account-outline',
             },
             {
-                icon: 'mdiMapMarkerStarOutline',
+                icon: 'mdi:map-marker-star-outline',
             },
         ],
     },
     type: String as PropType<StepIndicatorType>,
     size: String as PropType<StepIndicatorSize>,
-    completedIcon: String as PropType<any>,
+    completedIcon: String as PropType<string>,
     isInteractive: {
         type: Boolean as PropType<boolean>,
         default: false,
@@ -78,25 +78,23 @@ const hoveredIndex = ref<number | null>(null)
 const stepItems = computed(() => {
     const activeIndex = props.modelValue > 0 ? props.modelValue - 1 : 0
 
-    const stepsArray = Array.isArray(props.steps)
-        ? props.steps
+    const stepsArray: CircleStep[] = Array.isArray(props.steps)
+        ? props.steps as CircleStep[]
         : Array.from({ length: props.steps }, () => ({}))
 
     return stepsArray.map((step, index) => {
-        let status: StepStatus
+        let status: StepStatus;
 
         if (index < activeIndex) {
-            status = StepStatus.COMPLETED
+            status = StepStatus.COMPLETED;
         } else if (index === activeIndex) {
-            status = StepStatus.CURRENT
+            status = StepStatus.CURRENT;
         } else {
-            status = StepStatus.INACTIVE
+            status = StepStatus.INACTIVE;
         }
 
-        const icon = typeof step === 'object' && 'icon' in step ? step.icon : undefined
-
         return {
-            icon,
+            icon: step.icon,
             status,
         }
     })

package/components/steppers/Step.vue

@@ -49,8 +49,8 @@ const props = defineProps({
     status: String as PropType<StepStatus>,
     size: String as PropType<StepIndicatorSize>,
     step: Number as PropType<number>,
-    stepIcon: String as PropType<any>,
-    completedIcon: String as PropType<any>,
+    stepIcon: String as PropType<string>,
+    completedIcon: String as PropType<string>,
     isInteractive: {
         type: Boolean as PropType<boolean>,
         default: false,