@imaginario27/air-ui-ds 1.0.22 → 1.1.0

package/components/accordions/AccordionItem.vue

@@ -7,7 +7,7 @@
             
             <!-- This button does not have click event because the toggle is being controlled by the accordeon header div-->
             <ActionIconButton 
-                :icon="isOpen ? 'mdiMinus' : 'mdiPlus'"
+                :icon="isOpen ? 'mdi:minus' : 'mdi:plus'"
                 :styleType="ButtonStyleType.NEUTRAL_TRANSPARENT"
                 :size="ButtonSize.MD" 
             />

package/components/alerts/Alert.vue

@@ -10,12 +10,11 @@
         ]"
     >
         <template v-if="description">
-            <MdiIcon 
-                :icon="iconType"
-                size="20"
-                preserveAspectRatio="xMidYMid meet"
-                :class="['min-w-[20px]', iconColorClass]"
+            <Icon 
+                :name="iconType" 
+                :iconClass="iconColorClass" 
             />
+            
             <div 
                 :class="[
                     'w-full flex flex-col gap-2',
@@ -50,11 +49,9 @@
         <template v-else>
             <div class="w-full flex gap-3">
                 <div class="w-full flex gap-3 pt-1.5">
-                    <MdiIcon 
-                        :icon="iconType"
-                        size="20"
-                        preserveAspectRatio="xMidYMid meet"
-                        :class="['min-w-[20px]', iconColorClass]"
+                    <Icon 
+                        :name="iconType" 
+                        :iconClass="iconColorClass" 
                     />
                     <span :class="['text-sm font-semibold', textColorClass]">
                         {{ title  }}
@@ -83,7 +80,7 @@
                     <AlertIconButton 
                         v-if="hasCloseButton"
                         :type
-                        icon="mdiClose"
+                        icon="mdi:close"
                         @click="$emit('close')"
                     />
                 </div>
@@ -99,7 +96,7 @@ const props = defineProps({
         default: AlertType.WARNING,
         validator: (value: AlertType) => Object.values(AlertType).includes(value),
     },
-    icon: String as PropType<any>,
+    icon: String as PropType<string>,
     title: {
         type: String as PropType<string>,
         default: 'Title',
@@ -129,7 +126,7 @@ const containerClass = computed(() => {
 const textColorClass = computed(() => {
     const variant = {
         [AlertType.WARNING]: 'text-text-warning-on-bg',
-        [AlertType.DANGER]: 'text-text-danger',
+        [AlertType.DANGER]: 'text-icon-danger',
         [AlertType.SUCCESS]: 'text-text-success',
         [AlertType.INFO]: 'text-text-info',
     }
@@ -138,22 +135,22 @@ const textColorClass = computed(() => {
 
 const iconColorClass = computed(() => {
     const variant = {
-        [AlertType.WARNING]: 'text-icon-warning-on-bg',
-        [AlertType.DANGER]: 'text-icon-danger',
-        [AlertType.SUCCESS]: 'text-icon-success',
+        [AlertType.WARNING]: '!text-icon-warning-on-bg',
+        [AlertType.DANGER]: '!text-icon-danger',
+        [AlertType.SUCCESS]: '!text-icon-success',
         [AlertType.INFO]: 'text-icon-info',
     }
-    return variant[props.type as AlertType] || 'text-icon-warning-on-bg'
+    return variant[props.type as AlertType] || '!text-icon-warning-on-bg'
 })
 
 const iconType = computed(() => {
     const variant = {
-        [AlertType.WARNING]: 'mdiAlertOutline',
-        [AlertType.DANGER]: 'mdiCloseOctagonOutline',
-        [AlertType.SUCCESS]: 'mdiCheckCircleOutline',
-        [AlertType.INFO]: 'mdiInformationOutline',
+        [AlertType.WARNING]: 'mdi:alert-outline',
+        [AlertType.DANGER]: 'mdi:close-octagon-outline',
+        [AlertType.SUCCESS]: 'mdi:check-circle-outline',
+        [AlertType.INFO]: 'mdi:information-outline',
     }
-    return variant[props.type as AlertType] as any || 'mdiAlertOutline'
+    return variant[props.type as AlertType] as string || 'mdi:alert-outline'
 })
 
 </script>

package/components/badges/Badge.vue

@@ -17,29 +17,36 @@
         />
 
         <!-- Icon -->
-        <MdiIcon
+        <Icon 
             v-if="showIcon"
-            :icon="icon"
-            size="12px"
-            preserveAspectRatio="xMidYMid meet"
-            :class="iconColorClass"
+            :name="icon"
+            :size="IconSize.XS"
+            :iconClass="iconColorClass" 
         />
 
         <!-- Text -->
         <span :class="textClass">{{ text }}</span>
 
         <!-- Close button -->
-        <button
+        <div 
             v-if="closeable"
-            :class="[textClass, 'ml-1 hover:opacity-75 focus:outline-none']"
-            @click="emitClose"
+            class="ml-1 h-[24px] flex items-center"
         >
-            <MdiIcon 
-                icon="mdiClose" 
-                size="16px"
-                preserveAspectRatio="xMidYMid meet"
-            />
-        </button>
+            <button
+                class="flex items-center justify-center h-full w-[20px]"
+                :class="[
+                    textClass,
+                    'hover:opacity-75 focus:outline-none',
+                ]"
+                @click="emitClose"
+            >
+                <Icon 
+                    name="mdi:close"
+                    :size="IconSize.SM"
+                    :iconClass="iconColorClass"
+                />
+            </button>
+        </div>
     </div>
 </template>
 
@@ -82,8 +89,8 @@ const props = defineProps({
         default: 'Badge',
     },
     icon: {
-        type: String as PropType<any>,
-        default: 'mdiHelp',
+        type: String as PropType<string>,
+        default: 'mdi:help',
     },
 })
 
@@ -172,19 +179,19 @@ const textClass = computed(() => {
 })
 
 const iconColorClass = computed(() => {
-    if (props.styleType === BadgeStyle.FILLED) return "text-text-neutral-on-filled"
+    if (props.styleType === BadgeStyle.FILLED) return "!text-text-neutral-on-filled"
 
     const iconVariant: Record<ColorAccent, string> = {
-        [ColorAccent.NEUTRAL]: "text-icon-neutral-subtle",
-        [ColorAccent.SUCCESS]: "text-icon-success",
-        [ColorAccent.WARNING]: props.isTransparent ? "text-icon-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",
+        [ColorAccent.SUCCESS]: "!text-icon-success",
+        [ColorAccent.WARNING]: props.isTransparent ? "!text-icon-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 iconVariant[props.color as ColorAccent] || "text-icon-secondary"
+    return iconVariant[props.color as ColorAccent] || "!text-icon-secondary"
 })
 
 const dotColorClass = computed(() => {

package/components/badges/IconBadge.vue

@@ -5,11 +5,11 @@
             colorClass 
         ]" 
     >
-        <MdiIcon 
-            v-if="icon" 
-            :icon
-            size="16px" 
-            :class="iconColorClass" 
+        <Icon 
+            v-if="icon"
+            :name="icon"
+            :size="IconSize.SM"
+            :iconClass="iconColorClass"
         />
     </div>
 </template>
@@ -23,8 +23,8 @@ const props = defineProps({
         validator: (value: ColorAccent) => Object.values(ColorAccent).includes(value),
     },
     icon: {
-        type: String as PropType<any>,
-        default: 'mdiHelp', 
+        type: String as PropType<string>,
+        default: 'mdi:help', 
     },
 })
 

package/components/badges/IconTextBadge.vue

@@ -29,8 +29,8 @@ const props = defineProps({
         default: 'Badge text'
     },
     icon: {
-        type: String as PropType<any>,
-        default: 'mdiHelp', 
+        type: String as PropType<string>,
+        default: 'mdi:help', 
     },
 })
 

package/components/breadcrumbs/Breadcrumbs.vue

@@ -1,54 +1,119 @@
 <template>
     <nav aria-label="breadcrumb">
-        <ul class="flex items-center space-x-2 text-gray-500">
+        <ul
+            :class="[
+                'flex items-center space-x-2 text-icon-neutral-subtler',
+            ]"
+        >
             <!-- Home Link -->
-            <li>
+            <li v-if="showHome">
                 <NuxtLink to="/" class="flex items-center space-x-1">
-                    <MdiIcon 
-                        icon="mdiHomeOutline" 
-                        size="20" 
-                        preserveAspectRatio="xMidYMid meet"
-                        class="text-icon-neutral-subtler hover:text-icon-neutral-on-monochrome-hover-bg"
+                    <Icon 
+                        :name="homeIcon"
+                        :iconClass="[
+                            'text-icon-neutral-subtler hover:text-icon-neutral-on-monochrome-hover-bg',
+                            homeIconClass,
+                        ]"
                     />
                 </NuxtLink>
             </li>
 
-            <!-- Dynamic Breadcrumbs (Stop at Previous Level) -->
-            <li v-for="(crumb, index) in breadcrumbs" :key="index" class="flex items-center space-x-2">
+            <!-- Dynamic Breadcrumbs -->
+            <li
+                v-for="(crumb, index) in displayedBreadcrumbs"
+                :key="index"
+                class="flex items-center space-x-2"
+            >
                 <!-- Chevron Separator -->
-                <MdiIcon 
-                    icon="mdiChevronRight" 
-                    size="20" 
-                    preserveAspectRatio="xMidYMid meet"
-                    class="text-icon-neutral-subtler"
+                <Icon
+                    v-if="index > 0 || showHome"
+                    :name="separatorIcon"
+                    :iconClass="[
+                        'text-icon-neutral-subtler',
+                        separatorClass,
+                    ]"
                 />
 
-                <!-- Breadcrumb Link -->
-                <NuxtLink 
-                    :to="crumb.to" 
-                    class="text-sm text-text-neutral-subtler hover:text-text-neutral-on-monochrome-hover-bg"
+                <!-- Breadcrumb (active or not) -->
+                <component
+                    :is="crumb.isCurrent ? 'span' : NuxtLink"
+                    :to="!crumb.isCurrent ? crumb.to : undefined"
+                    :class="[
+                        'text-sm',
+                        crumb.isCurrent
+                            ? currentCrumbClass || 'text-text-default'
+                            : 'text-text-neutral-subtler hover:text-text-neutral-on-monochrome-hover-bg',
+                        crumbClass,
+                    ]"
                 >
                     {{ crumb.label }}
-                </NuxtLink>
+                </component>
             </li>
         </ul>
     </nav>
 </template>
+
 <script setup lang="ts">
+// Imports
+import { NuxtLink } from '#components'
+
+// Props
+const props = defineProps({
+    showHome: {
+        type: Boolean as PropType<boolean>,
+        default: true,
+    },
+    homeIcon: {
+        type: String as PropType<string>,
+        default: 'mdi:home-outline',
+    },
+    separatorIcon: {
+        type: String as PropType<string>,
+        default: 'mdi:chevron-right',
+    },
+    includeCurrent: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    homeIconClass: {
+        type: String as PropType<string>,
+        default: '',
+    },
+    separatorClass: {
+        type: String as PropType<string>,
+        default: '',
+    },
+    crumbClass: {
+        type: String as PropType<string>,
+        default: '',
+    },
+    currentCrumbClass: {
+        type: String as PropType<string>,
+        default: '',
+    },
+})
+
 // Route
 const route = useRoute()
 
-// Generate breadcrumbs from route path, stopping at the previous level
-const breadcrumbs = computed(() => {
-    const pathSegments = route.path.split('/').filter(Boolean) // Remove empty values
-
-    if (pathSegments.length <= 1) return [] // Stop at Home if only 1 segment
+// Generate all breadcrumbs from route segments
+const allCrumbs = computed(() => {
+    const pathSegments = route.path.split('/').filter(Boolean)
 
-    return pathSegments.slice(0, -1).map((segment, index) => { // Exclude last segment
+    return pathSegments.map((segment, index) => {
         return {
-            label: segment.replace(/-/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase()), // Format text
-            to: '/' + pathSegments.slice(0, index + 1).join('/') // Build breadcrumb path
+            label: segment
+                .replace(/-/g, ' ')
+                .replace(/\b\w/g, (c) => c.toUpperCase()),
+            to: '/' + pathSegments.slice(0, index + 1).join('/'),
+            isCurrent: index === pathSegments.length - 1,
         }
     })
 })
+
+// Filter crumbs based on `includeCurrent`
+const displayedBreadcrumbs = computed(() => {
+    if (props.includeCurrent) return allCrumbs.value
+    return allCrumbs.value.slice(0, -1)
+})
 </script>

package/components/buttons/ActionButton.vue

@@ -27,10 +27,9 @@
         <!-- Loading State -->
         <template v-if="isLoading">
             <div class="animate-spin">
-                <MdiIcon 
-                    icon="mdiLoading" 
-                    preserveAspectRatio="xMidYMid meet"
-                    :class="iconSizeClass" 
+                <Icon 
+                    name="mdi:loading"
+                    :iconClass="iconSizeClass"
                 />
             </div>
             
@@ -43,21 +42,15 @@
         <template v-else>
             <!-- Left icon -->
             <template v-if="iconPosition === IconPosition.LEFT">
-                <MdiIcon
-                    v-if="icon && !svgIcon"
-                    :icon
-                    preserveAspectRatio="xMidYMid meet"
-                    :class="[iconSizeClass, iconClass ]"
+                <Icon 
+                    v-if="icon"
+                    :name="icon"
+                    :iconClass="[
+                        iconSizeClass, 
+                        iconColorClass, 
+                        iconClass ? iconClass : ''
+                    ]"
                 />
-                <span
-                    v-else-if="svgIcon"
-                    :class="[iconSizeClass, iconClass ]"
-                >
-                    <SVGImage
-                        :src="svgIcon"
-                        :color="resolvedSvgIconColor"
-                    />
-                </span>
             </template>
 
             <span :class="[ 'font-semibold', textSizeClass, textClass ]">
@@ -66,21 +59,15 @@
 
             <!-- Right icon -->
             <template v-if="iconPosition === IconPosition.RIGHT">
-                <MdiIcon
+                <Icon 
                     v-if="icon"
-                    :icon="icon"
-                    preserveAspectRatio="xMidYMid meet"
-                    :class="[iconSizeClass, iconClass]"
+                    :name="icon"
+                    :iconClass="[
+                        iconSizeClass, 
+                        iconColorClass, 
+                        iconClass ? iconClass : ''
+                    ]"
                 />
-                <span
-                    v-else-if="svgIcon"
-                    :class="[iconSizeClass, iconClass]"
-                >
-                    <SVGImage
-                        :src="svgIcon"
-                        :color="resolvedSvgIconColor"
-                    />
-                </span>
             </template>
         </template>
     </component>
@@ -124,19 +111,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,
-    },
     iconClass: String as PropType<string>,
     disabled: {
         type: Boolean as PropType<boolean>,
@@ -318,14 +300,23 @@ const iconSizeClass = computed(() => {
     return variant[props.size as ButtonSize] || 'w-[20px] h-[20px] min-w-[20px] min-h-[20px]'
 })
 
-const svgIconColorClass = computed(() => {
+const textSizeClass = computed(() => {
+    const variant = {
+        [ButtonSize.XS]: 'text-xs',
+        [ButtonSize.SM]: 'text-sm',
+        [ButtonSize.MD]: 'text-sm',
+        [ButtonSize.LG]: 'text-sm',
+        [ButtonSize.XL]: 'text-sm',
+        [ButtonSize.XXL]: 'text-base',
+    }
+    return variant[props.size as ButtonSize] || 'text-sm'
+})
+
+const iconColorClass = computed(() => {
     const variant = {
         [ButtonStyleType.PRIMARY_BRAND_FILLED]: 'text-text-neutral-on-filled',
         [ButtonStyleType.PRIMARY_BRAND_SOFT]: 'text-icon-primary-brand-on-soft-bg',
-        [ButtonStyleType.PRIMARY_BRAND_TRANSPARENT]: [
-            'text-text-primary-brand-default',
-            !props.disabled && 'hover:text-text-primary-brand-hover',
-        ],
+        [ButtonStyleType.PRIMARY_BRAND_TRANSPARENT]: 'text-text-primary-brand-default',
         [ButtonStyleType.SECONDARY_BRAND_FILLED]: 'text-text-neutral-on-filled',
         [ButtonStyleType.NEUTRAL_FILLED]: 'text-text-neutral-on-neutral-filled-bg',
         [ButtonStyleType.NEUTRAL_OUTLINED]: 'text-text-default',
@@ -339,18 +330,6 @@ const svgIconColorClass = computed(() => {
     return variant[props.styleType as ButtonStyleType] || 'text-text-default'
 })
 
-const textSizeClass = computed(() => {
-    const variant = {
-        [ButtonSize.XS]: 'text-xs',
-        [ButtonSize.SM]: 'text-sm',
-        [ButtonSize.MD]: 'text-sm',
-        [ButtonSize.LG]: 'text-sm',
-        [ButtonSize.XL]: 'text-sm',
-        [ButtonSize.XXL]: 'text-base',
-    }
-    return variant[props.size as ButtonSize] || 'text-sm'
-})
-
 const horizontalPaddingClass = computed(() => {
     const variant = {
         [ButtonSize.XS]: 'px-2',
@@ -375,19 +354,6 @@ const gapClass = computed(() => {
     return variant[props.size as ButtonSize] || 'gap-2'
 })
 
-// Computed functions
-const resolvedSvgIconColor = computed(() => {
-    if (props.useSVGIconColor) return undefined
-
-    const val = svgIconColorClass.value
-
-    if (Array.isArray(val)) {
-        return val.filter(Boolean).join(' ')
-    }
-
-    return val
-})
-
 // Props for the dynamic component
 const componentProps = computed(() => {
     if (props.actionType === ButtonActionType.LINK) {

package/components/buttons/ActionIconButton.vue

@@ -18,21 +18,14 @@
         :disabled="disabled"
         
     >
-        <MdiIcon
-            v-if="icon && !svgIcon"
-            :icon
-            preserveAspectRatio="xMidYMid meet"
-            :class="[iconSizeClass, iconClass]"
+        <Icon 
+            :name="icon"
+            :iconClass="[
+                iconSizeClass, 
+                iconColorClass, 
+                iconClass ? iconClass : ''
+            ]"
         />
-        <span
-            v-else-if="svgIcon"
-            :class="[iconSizeClass, iconClass]"
-        >
-            <SVGImage
-                :src="svgIcon"
-                :color="resolvedSvgIconColor"
-            />
-        </span>
     </component>
 </template>
 
@@ -69,13 +62,8 @@ const props = defineProps({
         validator: (value: ButtonSize) => Object.values(ButtonSize).includes(value),
     },
     icon: {
-        type: String as PropType<any>,
-        default: "mdiHelp"
-    },
-    svgIcon: String as PropType<string>,
-    useSVGIconColor: {
-        type: Boolean as PropType<boolean>,
-        default: false
+        type: String as PropType<string>,
+        default: "mdi:help"
     },
     iconClass: String as PropType<string>,
     disabled: {
@@ -242,14 +230,11 @@ const iconSizeClass = computed(() => {
     return variant[props.size as ButtonSize] || 'w-[20px] h-[20px] min-w-[20px] min-h-[20px]'
 })
 
-const svgIconColorClass = computed(() => {
+const iconColorClass = computed(() => {
     const variant = {
         [ButtonStyleType.PRIMARY_BRAND_FILLED]: 'text-text-neutral-on-filled',
         [ButtonStyleType.PRIMARY_BRAND_SOFT]: 'text-icon-primary-brand-on-soft-bg',
-        [ButtonStyleType.PRIMARY_BRAND_TRANSPARENT]: [
-            'text-text-primary-brand-default',
-            !props.disabled && 'hover:text-text-primary-brand-hover',
-        ],
+        [ButtonStyleType.PRIMARY_BRAND_TRANSPARENT]: 'text-text-primary-brand-default',
         [ButtonStyleType.SECONDARY_BRAND_FILLED]: 'text-text-neutral-on-filled',
         [ButtonStyleType.NEUTRAL_FILLED]: 'text-text-neutral-on-neutral-filled-bg',
         [ButtonStyleType.NEUTRAL_OUTLINED]: 'text-text-default',
@@ -263,19 +248,6 @@ const svgIconColorClass = computed(() => {
     return variant[props.styleType as ButtonStyleType] || 'text-text-default'
 })
 
-// Computed functions
-const resolvedSvgIconColor = computed(() => {
-    if (props.useSVGIconColor) return undefined
-
-    const val = svgIconColorClass.value
-
-    if (Array.isArray(val)) {
-        return val.filter(Boolean).join(' ')
-    }
-
-    return val
-})
-
 // Props for the dynamic component
 const componentProps = computed(() => {
     if (props.actionType === ButtonActionType.LINK) {

package/components/buttons/AlertButton.vue

@@ -18,26 +18,21 @@
             ...(actionType === ButtonActionType.ACTION ? { onClick: emitClick } : {})
         }"
         :disabled
-        
     >
         <!-- Left icon -->
-        <MdiIcon
+        <Icon 
             v-if="iconPosition === IconPosition.LEFT"
-            :icon
-            size="20"
-            preserveAspectRatio="xMidYMid meet"
-            class="min-w-[20px]"
+            :name="icon"
+            :iconClass="textIconClass"
         />
         <span :class="[ 'font-semibold' ]">
             {{ text }}
         </span>
         <!-- Right icon -->
-        <MdiIcon
+        <Icon
             v-if="iconPosition === IconPosition.RIGHT"
-            :icon
-            size="20"
-            preserveAspectRatio="xMidYMid meet"
-            class="min-w-[20px]"
+            :name="icon"
+            :iconClass="textIconClass"
         />
     </component>
 </template>
@@ -68,8 +63,8 @@ const props = defineProps({
         default: 'Button text'
     },
     icon: {
-        type: String as PropType<any>,
-        default: "mdiHelp"
+        type: String as PropType<string>,
+        default: "mdi:help"
     },
     iconPosition: {
         type: String as PropType<IconPosition>,