@imaginario27/air-ui-ds 1.0.22 → 1.1.0

package/components/buttons/AlertIconButton.vue

@@ -18,11 +18,10 @@
         }"
         :disabled
     >
-        <MdiIcon
-            :icon
-            size="20"
-            preserveAspectRatio="xMidYMid meet"
-            class="min-w-[20px]"
+        <Icon 
+            v-if="icon"
+            :name="icon"
+            :iconClass
         />
     </component>
 </template>
@@ -53,8 +52,8 @@ const props = defineProps({
         default: 'Button text'
     },
     icon: {
-        type: String as PropType<any>,
-        default: "mdiHelp"
+        type: String as PropType<string>,
+        default: "mdi:help"
     },
     disabled: {
         type: Boolean as PropType<boolean>,

package/components/buttons/CopyButton.vue

@@ -83,8 +83,8 @@ const props = defineProps({
         validator: (value: ButtonSize) => Object.values(ButtonSize).includes(value),
     },
     icon: {
-        type: String as PropType<any>,
-        default: "mdiContentCopy",
+        type: String as PropType<string>,
+        default: "mdi:content-copy",
     },
     iconPosition: {
         type: String as PropType<IconPosition>,
@@ -114,7 +114,7 @@ const handleCopy = useThrottleFn(
         const success = await copyToClipboard(props.textToCopy)
 
         if (success) {
-            currentCopyButtonIcon.value = 'mdiCheck'
+            currentCopyButtonIcon.value = 'mdi:check-circle-outline'
             currentCopyButtonText.value = props.copySuccessText
 
             if (
@@ -133,7 +133,7 @@ const handleCopy = useThrottleFn(
 
             emit('success')
         } else {
-            currentCopyButtonIcon.value = 'mdiAlertCircleOutline'
+            currentCopyButtonIcon.value = 'mdi:alert-circle-outline'
             currentCopyButtonText.value = props.copyErrorText
 
             if (props.showToast) {

package/components/buttons/options/OptionButton.vue

@@ -29,8 +29,8 @@ const props = defineProps({
         default: ButtonStyleType.NEUTRAL_OUTLINED,
     },
     icon: {
-        type: String as PropType<any>,
-        default: 'mdiHelp',
+        type: String as PropType<string>,
+        default: 'mdi:help',
     },
     iconPosition: {
         type: String as PropType<IconPosition>,

package/components/buttons/toggle/ToggleButton.vue

@@ -16,21 +16,19 @@
         @click="emitClick"
     >
         <!-- Left icon -->
-        <MdiIcon
+        <Icon
             v-if="iconPosition === IconPosition.LEFT"
-            :icon="icon"
-            preserveAspectRatio="xMidYMid meet"
-            :size="iconSizeClass"
+            :name="icon"
+            :iconClass="iconSizeClass"
         />
         <span :class="['font-semibold', textSizeClass]">
             {{ text }}
         </span>
         <!-- Right icon -->
-        <MdiIcon
+        <Icon
             v-if="iconPosition === IconPosition.RIGHT"
-            :icon="icon"
-            preserveAspectRatio="xMidYMid meet"
-            :size="iconSizeClass"
+            :name="icon"
+            :iconClass="iconSizeClass"
         />
     </button>
 </template>
@@ -47,8 +45,8 @@ 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>,

package/components/cards/specific/ContactDetailsCard.vue

@@ -8,10 +8,8 @@
                 v-if="email" 
                 class="flex gap-2 items-center text-text-primary-brand-default"
             >
-                <MdiIcon
-                    icon="mdiAt"
-                    size="20"
-                    preserveAspectRatio="xMidYMid meet"
+                <Icon
+                    name="mdi:at"
                 />
                 <span class="font-semibold text-sm">
                     {{ email }}
@@ -22,10 +20,8 @@
                 v-if="phone" 
                 class="flex gap-2 items-center text-text-neutral-subtle"
             >
-                <MdiIcon
-                    icon="mdiPhoneOutline"
-                    size="20"
-                    preserveAspectRatio="xMidYMid meet"
+                <Icon
+                    name="mdi:phone-outline"
                 />
                 <span class="text-sm">
                     {{ phone }}

package/components/cards/specific/FeatureCard.vue

@@ -32,8 +32,8 @@ defineProps({
         default: 'Feature description'
     },
     icon: {
-        type: String as PropType<any>,
-        default: 'mdiHelp'
+        type: String as PropType<string>,
+        default: 'mdi:help'
     },
     containedIconShape: {
         type: String as PropType<IconContainerShape>,

package/components/cards/specific/HelpTopicCard.vue

@@ -35,8 +35,8 @@
 // Props
 defineProps({
     icon: {
-        type: String as PropType<any>,
-        default: 'mdiHelp'
+        type: String as PropType<string>,
+        default: 'mdi:help'
     },
     title: {
         type: String as PropType<string>,
@@ -55,8 +55,8 @@ defineProps({
         default: 'Learn more' 
     },
     buttonIcon: {
-        type: String as PropType<any>,
-        default: 'mdiArrowRight'
+        type: String as PropType<string>,
+        default: 'mdi:arrow-right'
     },
 })
 </script>

package/components/cards/specific/subscription/SubscriptionPlanCard.vue

@@ -28,13 +28,13 @@
                 {{ computedAmount }}{{ currencySymbol }}<span class="text-text-neutral-subtle font-normal text-lg">/{{ computedPeriodicity }}</span>
             </span>
 
-            <MdiIcon 
+            <Icon 
                 v-if="isActive && !isFeatured"
-                icon="mdiCheckCircle"
-                size="24"
-                preserveAspectRatio="xMidYMid meet"
-                class="active-icon absolute top-0 right-0 text-icon-primary-brand-active"
+                name="mdi:check-circle"
+                :size="IconSize.LG"
+                iconClass="active-icon absolute top-0 right-0 text-icon-primary-brand-active"
             />
+          
         </CardHeader>
 
         <CardBody class="h-full">
@@ -49,7 +49,7 @@
                 >
                     <ListItem 
                         v-for="feature in features" :key="feature"
-                        icon="mdiCheck"
+                        icon="mdi:check"
                         :spaced="hasFeatureListSeparator"
                     >
                         {{ feature }}

package/components/cards/specific/subscription/UniqueSubscriptionPlanCard.vue

@@ -17,7 +17,7 @@
                 <List :layout="ListLayout.GRID" :cols="2">
                     <ListItem 
                         v-for="item in features" :key="item"
-                        icon="mdiCheck"
+                        icon="mdi:check"
                     >
                         {{ item }}
                     </ListItem>

package/components/collapsibles/Collapsible.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 ? 'mdiUnfoldLessHorizontal' : 'mdiUnfoldMoreHorizontal'"
+                :icon="isOpen ? 'mdi:unfold-less-horizontal' : 'mdi:unfold-more-horizontal'"
                 :styleType="ButtonStyleType.NEUTRAL_OUTLINED"
                 :size="ButtonSize.MD" 
             />

package/components/content/ContentItem.vue

@@ -100,8 +100,8 @@ const props = defineProps({
         default: ImageHoverEffect.BLUR,
         validator: (value: ImageHoverEffect) => Object.values(ImageHoverEffect).includes(value),
     },
-    imgHoverIcon: String as PropType<any>,
-    imgFallbackIcon: String as PropType<any>,
+    imgHoverIcon: String as PropType<string>,
+    imgFallbackIcon: String as PropType<string>,
     imgContainerClass: String as PropType<string>,
     containerClass: String as PropType<string>,
     hasCardShadow: {

package/components/content/ContentItemImage.vue

@@ -29,11 +29,10 @@
                 v-else
                 class="w-full h-full flex items-center justify-center bg-background-neutral-subtlest"
             >
-                <MdiIcon
-                    :icon="fallbackIcon"
-                    size="32"
-                    preserveAspectRatio="xMidYMid meet"
-                    class="text-icon-primary-brand-default"
+                <Icon
+                    :name="fallbackIcon"
+                    :size="IconSize.XL"
+                    iconClass="text-icon-primary-brand-default"
                 />
             </div>
 
@@ -53,11 +52,10 @@
                         'transition-opacity duration-300',
                     ]"
                 >
-                    <MdiIcon
-                        :icon="hoverIcon"
-                        size="32"
-                        preserveAspectRatio="xMidYMid meet"
-                        class="text-icon-neutral-on-filled-bg"
+                    <Icon 
+                        :name="hoverIcon"
+                        :size="IconSize.XL"
+                        iconClass="text-icon-neutral-on-filled-bg"
                     />
                 </div>
             </template>
@@ -82,12 +80,12 @@ const props = defineProps({
         default: ImageHoverEffect.BLUR,
     },
     hoverIcon: {
-        type: String as PropType<any>,
-        default: 'mdiEyeOutline',
+        type: String as PropType<string>,
+        default: 'mdi:eye-outline',
     },
     fallbackIcon: {
-        type: String as PropType<any>,
-        default: 'mdiImageOffOutline',
+        type: String as PropType<string>,
+        default: 'mdi:image-off-outline',
     },
     containerClass: String as PropType<string>,
 })

package/components/dropdowns/DropdownMenuItem.vue

@@ -19,16 +19,12 @@
         ]"
     >
         <div class="flex items-center gap-3 w-full">
-            <MdiIcon
+            <Icon 
                 v-if="icon && (type === DropdownItemType.ICON || type === DropdownItemType.DANGER_ICON)"
-                :icon="icon"
-                size="20"
-                preserveAspectRatio="xMidYMid meet"
-                :class="[
-                    'min-w-[20px]',
-                    iconColorClass
-                ]"
+                :name="icon"
+                :iconClass="iconColorClass"
             />
+
             <template v-if="type === DropdownItemType.IMAGE">
                 <img
                     v-if="imgUrl && isImageLoaded"
@@ -45,9 +41,11 @@
                     class="w-[24px] h-[24px] rounded"
                 >
             </template>
+
             <span v-if="type !== DropdownItemType.USER" class="text-sm">
                 {{ text }}
             </span>
+
             <User
                 v-if="userDisplayName && type === DropdownItemType.USER"
                 :displayName="userDisplayName"
@@ -88,8 +86,8 @@ const props = defineProps({
         default: "Menu item text",
     },
     icon: {
-        type: String as PropType<any>,
-        default: "mdiHelp",
+        type: String as PropType<string>,
+        default: "mdi:help",
     },
     size: {
         type: String as PropType<DropdownItemSize>,
@@ -178,6 +176,7 @@ const sizeClass = computed(() => {
 const typeClass = computed(() => {
     const typeVariant = {
         [DropdownItemType.DANGER_ICON]: "text-text-delete",
+        [DropdownItemType.DANGER_TEXT]: "text-text-delete",
         [DropdownItemType.TEXT]: "text-text-default",
         [DropdownItemType.ICON]: "text-text-default",
         [DropdownItemType.IMAGE]: "text-text-default",
@@ -189,6 +188,7 @@ const typeClass = computed(() => {
 const iconColorClass = computed(() => {
     const colorVariant = {
         [DropdownItemType.DANGER_ICON]: "text-icon-delete",
+        [DropdownItemType.DANGER_TEXT]: "text-icon-delete",
         [DropdownItemType.TEXT]: "text-icon-neutral-subtle",
         [DropdownItemType.ICON]: "text-icon-neutral-subtle",
         [DropdownItemType.IMAGE]: undefined,

package/components/dropdowns/DropdownSelect.vue

@@ -64,16 +64,8 @@
                             </template>
                         </template>
                         <template v-else-if="type === SelectType.ICON && selectedOption?.icon">
-                            <MdiIcon 
-                                :icon="selectedOption?.icon" 
-                                size="20px" 
-                                preserveAspectRatio="xMidYMid meet"
-                            />
-                        </template>
-                        <template v-else-if="type === SelectType.ICON && selectedOption?.customIcon">
-                            <div
-                                class="w-[20px] h-[20px] text-icon-neutral-subtle"
-                                v-html="selectedOption?.customIcon" 
+                            <Icon
+                                :name="selectedOption?.icon" 
                             />
                         </template>
                         <template v-else-if="type === SelectType.IMAGE && selectedOption?.imgUrl">
@@ -106,17 +98,15 @@
                             v-if="multiple && Array.isArray(selected) && selected.length"
                             :size="ButtonSize.SM"
                             :styleType="ButtonStyleType.NEUTRAL_TRANSPARENT_SUBTLE"
-                            icon="mdiCloseCircle"
+                            icon="mdi:close-circle"
                             @click="selected = []"
                         />
 
                         <!-- Show loading icon while loading instead of the icon-->
                         <Spinner v-if="isLoading" />
-                        <MdiIcon
+                        <Icon 
                             v-else
-                            :icon="isOpen ? 'mdiUnfoldLessHorizontal' : 'mdiUnfoldMoreHorizontal'"
-                            size="20px"
-                            preserveAspectRatio="xMidYMid meet"
+                            :name="isOpen ? 'mdi:unfold-less-horizontal' : 'mdi:unfold-more-horizontal'"
                         />
                     </div>
                 </div>
@@ -165,7 +155,6 @@
                             :type="type"
                             :text="option.text"
                             :icon="option.icon"
-                            :customIcon="option.customIcon"
                             :userDisplayName="option.userDisplayName"
                             :userProfileImg="option.userProfileImg"
                             :imgUrl="option.imgUrl"

package/components/dropdowns/DropdownSelectItem.vue

@@ -17,23 +17,14 @@
     >
         <div class="flex justify-between items-center gap-3 w-full">
             <div class="flex items-center gap-3">
-                <MdiIcon 
-                    v-if="(type === SelectType.ICON) && !customIcon" 
-                    :icon="icon" 
-                    size="20"
-                    preserveAspectRatio="xMidYMid meet"
-                    :class="[
-                        'min-w-[20px]',
-                        isSelected && activeStyle === SelectActiveStyle.FILL ? 'text-icon-on-filled' : 'text-icon-neutral-subtle'
+                <Icon 
+                    v-if="type === SelectType.ICON"
+                    :name="icon"
+                    :iconClass="[
+                        isSelected && activeStyle === SelectActiveStyle.FILL ? '!text-icon-on-filled' : '!text-icon-neutral-subtle'
                     ]"
                 />
-                <!-- Custom icon (replaces the MdiIcon if it is used)-->
-                <div
-                    v-if="(type === SelectType.ICON) && customIcon"
-                    class="w-[20px] h-[20px]"
-                    :class="isSelected && activeStyle === SelectActiveStyle.FILL ? 'text-icon-on-filled' : 'text-icon-neutral-subtle'"
-                    v-html="customIcon" 
-                />
+        
                 <template v-if="type === SelectType.IMAGE">
                     <img
                         v-if="imgUrl && isImageLoaded"
@@ -50,6 +41,7 @@
                         class="w-[24px] h-[24px] rounded"
                     >
                 </template>
+
                 <span 
                     v-if="type !== SelectType.USER" 
                     :class="[
@@ -61,6 +53,7 @@
                 >
                     {{ text }}
                 </span>
+
                 <User 
                     v-if="type === SelectType.USER"
                     :displayName="userDisplayName"
@@ -69,12 +62,10 @@
                     :class="isSelected && activeStyle === SelectActiveStyle.FILL ? '!text-text-neutral-on-filled' : ''"
                 />
             </div>
-            <MdiIcon
+            <Icon 
                 v-if="isSelected && activeStyle === SelectActiveStyle.CHECK"
-                icon="mdiCheck"
-                size="20px"
-                preserveAspectRatio="xMidYMid meet"
-                class="text-icon-primary-brand-active"
+                name="mdi:check"
+                iconClass="text-icon-primary-brand-active"
             />
         </div>
         <p 
@@ -97,10 +88,9 @@ const props = defineProps({
         default: 'Select menu item',
     },
     icon: {
-        type: String as PropType<any>,
-        default: 'mdiHelp',
+        type: String as PropType<string>,
+        default: 'mdi:help',
     },
-    customIcon: String as PropType<string>,
     size: {
         type: String as PropType<SelectSize>,
         default: SelectSize.MD,

package/components/empty-states/EmptyState.vue

@@ -11,16 +11,15 @@
             ]"
         >
             <!-- Icon -->
-            <MdiIcon
+            <Icon 
                 v-if="icon"
-                :icon="icon"
-                :size="iconSize"
-                preserveAspectRatio="xMidYMid meet"
-                :class="[
+                :name="icon"
+                :iconClass="[
                     hasContainer ? isContainedIconClass : iconClass,
                     iconSizeClass,
                 ]"
             />
+  
             <div 
                 :class="[
                     'flex gap-2 flex-col',
@@ -68,8 +67,8 @@ const props = defineProps({
     },
     description: String as PropType<string>,
     icon: {
-        type: String as PropType<any>,
-        default: 'mdiDatabaseAlertOutline',
+        type: String as PropType<string>,
+        default: 'mdi:database-alert-outline',
     },
     iconClass: {
         type: String as PropType<string>,
@@ -87,7 +86,10 @@ const props = defineProps({
     },
     buttonText: String as PropType<string>,
     buttonIconPosition: String as PropType<IconPosition>,
-    buttonIcon: String as PropType<any>,
+    buttonIcon: {
+        type: String as PropType<string>,
+        default: 'mdi:plus',
+    },
     buttonStyleType: {
         type: String as PropType<ButtonStyleType>,
         default: ButtonStyleType.PRIMARY_BRAND_FILLED
@@ -119,20 +121,12 @@ const orientationClass = computed(() => {
     return orientationVariant[props.orientation as Orientation] || 'flex-col gap-3 sm:flex-row sm:gap-3'
 })
 
-const iconSize = computed(() => {
-    const iconSize = {
-        [Orientation.VERTICAL]: '40px',
-        [Orientation.HORIZONTAL]: '32px',
-    }
-    return iconSize[props.orientation as Orientation] || '32px'
-})
-
 const iconSizeClass = computed(() => {
     const iconSize = {
-        [Orientation.VERTICAL]: 'min-w-[40px] max-w-[40px]',
-        [Orientation.HORIZONTAL]: 'min-w-[32px] max-w-[32px]',
+        [Orientation.VERTICAL]: '!min-w-[40px] !max-w-[40px]',
+        [Orientation.HORIZONTAL]: '!min-w-[32px] !max-w-[32px]',
     }
-    return iconSize[props.orientation as Orientation] || 'min-w-[32px] max-w-[32px]'
+    return iconSize[props.orientation as Orientation] || '!min-w-[32px] max-w-[32px]'
 })
 
 const containerClasses = computed(() => {
@@ -149,22 +143,22 @@ const containerClasses = computed(() => {
 
 const customContainerClass = computed(() => {
     const variant = {
-        [EmptyPlaceholderContainerStyle.DASHED]: 'border-2 border-dashed border-border-default',
-        [EmptyPlaceholderContainerStyle.FILLED_NEUTRAL]: 'bg-background-neutral-subtlest',
-        [EmptyPlaceholderContainerStyle.FILLED_PRIMARY_BRAND]: 'bg-background-primary-brand-soft',
+        [EmptyPlaceholderContainerStyle.DASHED]: '!border-2 border-dashed border-border-default',
+        [EmptyPlaceholderContainerStyle.FILLED_NEUTRAL]: '!bg-background-neutral-subtlest',
+        [EmptyPlaceholderContainerStyle.FILLED_PRIMARY_BRAND]: '!bg-background-primary-brand-soft',
 
     }
-    return variant[props.containerStyle as EmptyPlaceholderContainerStyle] || 'bg-background-neutral-subtlest'
+    return variant[props.containerStyle as EmptyPlaceholderContainerStyle] || '!bg-background-neutral-subtlest'
 })
 
 const isContainedIconClass = computed(() => {
     const variant = {
-        [EmptyPlaceholderContainerStyle.DASHED]: 'text-icon-neutral-subtlest',
-        [EmptyPlaceholderContainerStyle.FILLED_NEUTRAL]: 'text-icon-neutral-on-subtlest-bg',
-        [EmptyPlaceholderContainerStyle.FILLED_PRIMARY_BRAND]: 'text-icon-neutral-on-primary-brand-soft-bg',
+        [EmptyPlaceholderContainerStyle.DASHED]: '!text-icon-neutral-subtlest',
+        [EmptyPlaceholderContainerStyle.FILLED_NEUTRAL]: '!text-icon-neutral-on-subtlest-bg',
+        [EmptyPlaceholderContainerStyle.FILLED_PRIMARY_BRAND]: '!text-icon-neutral-on-primary-brand-soft-bg',
 
     }
-    return variant[props.containerStyle as EmptyPlaceholderContainerStyle] || 'text-icon-neutral-on-subtlest-bg'
+    return variant[props.containerStyle as EmptyPlaceholderContainerStyle] || '!text-icon-neutral-on-subtlest-bg'
 })
 
 </script>

package/components/features/Feature.vue

@@ -1,26 +1,13 @@
 <template>
     <div class="flex gap-2.5">
-        <div v-if="icon">
-            <MdiIcon
-                v-if="icon && !svgIcon"
-                :icon
-                preserveAspectRatio="xMidYMid meet"
-                :class="[
-                    'w-[24px] h-[24px] min-w-[24px] min-h-[24px]',
-                    iconColorClass,
-                ]"
-            />
-            <span
-                v-else-if="svgIcon"
-                class="w-[24px] h-[24px] min-w-[24px] min-h-[24px]"
-            >
-                <SVGImage
-                    :src="svgIcon"
-                    :color="resolvedSvgIconColor?.value"
-                />
-            </span>
-        </div>
-
+        <Icon
+            v-if="icon"
+            :name="icon"
+            :size="IconSize.LG"
+            :color="iconColor"
+            :iconClass="iconClass"
+        />
+    
         <div class="w-full flex flex-col gap-1">
             <div class="text-base font-semibold">
                 {{ title }}
@@ -36,42 +23,18 @@
 </template>
 <script setup lang="ts">
 // Props
-const props = defineProps({
+defineProps({
     title: {
         type: String as PropType<string>,
         default: 'Title',
     },
     description: String as PropType<string>,
-    icon: String as PropType<any>,
+    icon: String as PropType<string>,
     iconColor: {
         type: String as PropType<ColorAccent>,
         default: ColorAccent.SECONDARY_BRAND, 
         validator: (value: ColorAccent) => Object.values(ColorAccent).includes(value),
     },
-    svgIcon: String as PropType<string>,
-    useSVGIconColor: {
-        type: Boolean as PropType<boolean>,
-        default: false,
-    },
-})
-
-// Computed functions
-const resolvedSvgIconColor = computed(() => {
-    return props.useSVGIconColor ? undefined : iconColorClass
-})
-
-// Class
-const iconColorClass = computed(() => {
-    const variant = {
-        [ColorAccent.NEUTRAL]: "text-icon-neutral-subtle",
-        [ColorAccent.SUCCESS]: "text-icon-success",
-        [ColorAccent.WARNING]:  "text-icon-warning",
-        [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 variant[props.iconColor as ColorAccent] || 'text-icon-secondary-brand-default"'
+    iconClass: String as PropType<string>,
 })
-
 </script>