@imaginario27/air-ui-ds 1.0.23 → 1.1.1

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,

package/components/steppers/StepIndicator.vue

@@ -16,6 +16,7 @@
         <span 
             v-if="status === StepStatus.NONE"
             :class="[
+                'flex items-center justify-center',
                 'font-bold',
                 stepNumberSizeClass,
                 textColorClass,
@@ -25,10 +26,9 @@
                 {{ step }}
             </template>
             <template v-else-if="type === StepIndicatorType.ICON && stepIcon">
-                <MdiIcon 
-                    :icon="stepIcon"
-                    :size="iconSize"
-                    preserveAspectRatio="xMidYMid meet"
+                <Icon
+                    :name="stepIcon"
+                    :iconClass="iconSizeClass"
                 />
             </template>
         </span>
@@ -37,6 +37,7 @@
         <span 
             v-if="status === StepStatus.INACTIVE"
             :class="[
+                'flex items-center justify-center',
                 'font-bold',
                 stepNumberSizeClass,
                 textColorClass,
@@ -46,10 +47,9 @@
                 {{ step }}
             </template>
             <template v-else-if="type === StepIndicatorType.ICON && stepIcon">
-                <MdiIcon 
-                    :icon="stepIcon"
-                    :size="iconSize"
-                    preserveAspectRatio="xMidYMid meet"
+                <Icon 
+                    :name="stepIcon"
+                    :iconClass="iconSizeClass"
                 />
             </template>
         </span>
@@ -58,6 +58,7 @@
         <span 
             v-else-if="status === StepStatus.CURRENT"
             :class="[
+                'flex items-center justify-center',
                 'font-bold text-text-primary-brand-default',
                 stepNumberSizeClass,
                 textColorClass,
@@ -67,10 +68,9 @@
                 {{ step }}
             </template>
             <template v-else-if="type === StepIndicatorType.ICON && stepIcon">
-                <MdiIcon 
-                    :icon="stepIcon"
-                    :size="iconSize"
-                    preserveAspectRatio="xMidYMid meet"
+                <Icon 
+                    :name="stepIcon"
+                    :iconClass="iconSizeClass"
                 />
             </template>
             <template v-else-if="type === StepIndicatorType.EMPTY">
@@ -87,13 +87,14 @@
         <!-- COMPLETED -->
         <span 
             v-else-if="status === StepStatus.COMPLETED"
-            class="text-sm font-semibold text-text-primary-brand-default"
+            :class="[
+                'text-sm font-semibold text-text-primary-brand-default',
+                'flex items-center justify-center',
+            ]"
         >
-            <MdiIcon 
-                :icon="completedIcon"
-                :size="iconSize"
-                preserveAspectRatio="xMidYMid meet"
-                class="text-icon-neutral-on-filled-bg"
+            <Icon 
+                :name="completedIcon"
+                :iconClass="['!text-icon-neutral-on-filled-bg', iconSizeClass]"
             />
         </span>
     </div>
@@ -120,10 +121,10 @@ const props = defineProps({
         type: Number as PropType<number>,
         default: 1,
     },
-    stepIcon: String as PropType<any>,
+    stepIcon: String as PropType<string>,
     completedIcon: {
-        type: String as PropType<any>,
-        default: 'mdiCheck',
+        type: String as PropType<string>,
+        default: 'mdi:check',
     },
     isHovered: {
         type: Boolean as PropType<boolean>,
@@ -160,15 +161,15 @@ const containerBorderClass = computed(() => {
     return base
 })
 
-const iconSize = computed(() => {
+const iconSizeClass = computed(() => {
     const variant = {
-        [StepIndicatorSize.XL]: '24',
-        [StepIndicatorSize.LG]: '20',
-        [StepIndicatorSize.MD]: '20',
-        [StepIndicatorSize.SM]: '16',
-        [StepIndicatorSize.XS]: '16',
+        [StepIndicatorSize.XL]: 'w-[24px] h-[24px] min-w-[24px] min-h-[24px]',
+        [StepIndicatorSize.LG]: 'w-[20px] h-[20px] min-w-[20px] min-h-[20px]',
+        [StepIndicatorSize.MD]: 'w-[20px] h-[20px] min-w-[20px] min-h-[20px]',
+        [StepIndicatorSize.SM]: 'w-[16px] h-[16px] min-w-[16px] min-h-[16px]',
+        [StepIndicatorSize.XS]: 'w-[16px] h-[16px] min-w-[16px] min-h-[16px]',
     }
-    return variant[props.size as StepIndicatorSize] || '24'
+    return variant[props.size as StepIndicatorSize] || 'w-[24px] h-[24px] min-w-[24px] min-h-[24px]'
 })
 
 const stepNumberSizeClass = computed(() => {

package/components/steppers/TabStepper.vue

@@ -76,7 +76,7 @@ const props = defineProps({
     },
     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,

package/components/steppers/vertical-stepper/VerticalStep.vue

@@ -125,8 +125,8 @@ const props = defineProps({
         default: StepIndicatorSize.SM,
         validator: (value: StepIndicatorSize) => Object.values(StepIndicatorSize).includes(value),    
     },
-    stepIcon: String as PropType<any>,
-    stepCompletedIcon: String as PropType<any>,
+    stepIcon: String as PropType<string>,
+    stepCompletedIcon: String as PropType<string>,
     isLast: {
         type: Boolean as PropType<boolean>,
         default: false,

package/components/steppers/vertical-stepper/VerticalStepper.vue

@@ -39,7 +39,7 @@ defineProps({
     items: Array as PropType<VerticalStepperItem[]>,
     stepType: String as PropType<StepIndicatorType>,
     stepSize: String as PropType<StepIndicatorSize>,
-    stepCompletedIcon: String as PropType<any>,
+    stepCompletedIcon: String as PropType<string>,
     hasStepper: {
         type: Boolean as PropType<boolean>,
         default: true,

package/components/tabs/Tab.vue

@@ -10,14 +10,9 @@
             styleClass
         ]"
     >
-        <MdiIcon 
+        <Icon
             v-if="decoration === TabDecoration.ICON"
-            size="20"
-            preserveAspectRatio="xMidYMid meet"
-            :class="[
-                'min-w-[20px]'
-            ]"
-            :icon
+            :name="icon"
         />
 
         <template v-if="decoration === TabDecoration.IMAGE">
@@ -79,8 +74,8 @@ const props = defineProps({
         validator: (value: TabDecoration) => Object.values(TabDecoration).includes(value),
     },
     icon: {
-        type: String as PropType<any>,
-        default: 'mdiHelp',
+        type: String as PropType<string>,
+        default: 'mdi:help',
     },
     imgUrl: String as PropType<string>,
     active: {

package/models/enums/dropdowns.ts

@@ -1,5 +1,6 @@
 export enum DropdownItemType {
     TEXT = 'text',
+    DANGER_TEXT = 'danger-text',
     ICON = 'icon',
     DANGER_ICON = 'danger-icon',
     USER = 'user',

package/models/types/buttons.ts

@@ -17,7 +17,7 @@ export interface OptionButton extends ActionButton {
 export interface AlertButton {
     text: string
     actionType?: ButtonActionType
-    icon?: any
+    icon?: string
     iconPosition?: IconPosition
     disabled?: boolean
     to?: string

package/models/types/selects.ts

@@ -2,8 +2,7 @@ export interface SelectOption {
     id?: string | number
     value: string | number
     text?: string
-    icon?: any
-    customIcon?: string
+    icon?: string
     userDisplayName?: string
     userProfileImg?: string
     imgUrl?: string

package/nuxt.config.ts

@@ -10,7 +10,7 @@ export default defineNuxtConfig({
         '../air-ui-utils',
     ],
 
-    modules: ["@nuxt/image", "nuxt-mdi", "@nuxt/eslint", '@vueuse/nuxt', "@nuxt/icon"],
+    modules: ["@nuxt/image", "@nuxt/eslint", '@vueuse/nuxt', "@nuxt/icon"],
 
     plugins: ["@/plugins/vue3-toastify"],
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@imaginario27/air-ui-ds",
-    "version": "1.0.23",
+    "version": "1.1.1",
     "author": "imaginario27",
     "type": "module",
     "homepage": "https://air-ui.netlify.app/",
@@ -35,7 +35,6 @@
         "jspdf": "3.0.3",
         "jspdf-autotable": "5.0.2",
         "nuxt": "4.1.2",
-        "nuxt-mdi": "2.1.1",
         "qrcode.vue": "3.6.0",
         "tailwindcss": "4.1.13",
         "vue": "3.5.22",

package/components/navigation/nav-menu/NavFooterMenu.vue

@@ -1,90 +0,0 @@
-<template>
-    <div
-        :class="[
-            orientation === Orientation.HORIZONTAL ? 'flex flex-col gap-2' : 'flex gap-6 flex-wrap',
-        ]"
-    >
-        <div>
-            <p
-                v-if="title"
-                class="text-sm font-semibold text-theme-neutral-50 mb-4"
-            >
-                {{ title }}
-            </p>
-
-            <!-- Solo SVGs -->
-            <div
-                v-if="onlySvgs"
-                class="flex gap-3 flex-wrap"
-            >
-                <NuxtLink
-                    v-for="(item, index) in items"
-                    :key="index"
-                    :to="item.path"
-                    class="inline-block"
-                    target="_blank"
-                >
-                    <SVGImage
-                        v-if="item.svg"
-                        :src="item.svg"
-                        alt="icon"
-                        class="max-w-[20px] filter invert"
-                    />
-                </NuxtLink>
-            </div>
-
-            <!-- Texto / Iconos -->
-            <div
-                v-else
-                :class="[
-                    orientation === Orientation.VERTICAL
-                        ? 'flex flex-col gap-4'
-                        : 'flex gap-6 flex-wrap',
-                ]"
-            >
-                <NuxtLink
-                    v-for="(item, index) in items"
-                    :key="index"
-                    :to="item.path"
-                    class="flex items-center gap-2 text-sm text-theme-neutral-50 hover:underline"
-                >
-                    <MdiIcon
-                        v-if="item.icon"
-                        :icon="item.icon as any"
-                        size="20"
-                        preserveAspectRatio="xMidYMid meet"
-                    />
-                    <span v-if="item.text">{{ item.text }}</span>
-                </NuxtLink>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script setup lang="ts">
-// Props
-
-type NavItem = {
-    path: string
-    text?: string
-    icon?: string
-    svg?: string
-}
-
-const props = defineProps({
-    title: {
-        type: String,
-        default: '',
-    },
-    items: {
-        type: Array as PropType<NavItem[]>,
-        required: true,
-    },
-    orientation: {
-        type: String as PropType<Orientation>,
-        default: Orientation.VERTICAL,
-    },
-})
-
-const onlySvgs = computed(() => props.items.every(item => item.svg && !item.text && !item.icon))
-</script>