@imaginario27/air-ui-ds 1.1.2 → 1.1.4

package/components/alerts/Alert.vue

@@ -138,7 +138,7 @@ const iconColorClass = computed(() => {
         [AlertType.WARNING]: '!text-icon-warning-on-bg',
         [AlertType.DANGER]: '!text-icon-danger',
         [AlertType.SUCCESS]: '!text-icon-success',
-        [AlertType.INFO]: 'text-icon-info',
+        [AlertType.INFO]: '!text-icon-info',
     }
     return variant[props.type as AlertType] || '!text-icon-warning-on-bg'
 })

package/components/buttons/CopyButton.vue

@@ -114,7 +114,7 @@ const handleCopy = useThrottleFn(
         const success = await copyToClipboard(props.textToCopy)
 
         if (success) {
-            currentCopyButtonIcon.value = 'mdi:check-circle-outline'
+            currentCopyButtonIcon.value = 'mdi:check'
             currentCopyButtonText.value = props.copySuccessText
 
             if (

package/components/dropdowns/DropdownMenu.vue

@@ -1,67 +1,131 @@
+
 <template>
-    <div 
-        ref="dropdownContainer" 
+    <div
+        ref="dropdownContainer"
         data-test="dropdown-container"
         :class="[isRelative && 'relative']"
     >
-        <div 
-            v-if="isOpen"
-            v-bind="$attrs" 
-            :class="[
-                'bg-background-surface',
-                'py-1',
-                'rounded',
-                hasShadow && 'shadow-lg',
-                'w-full',
-                'flex flex-col',
-                'z-50',
-                hasBorder && 'border border-border-default',
-                positionClass ? positionClass : dropdownPositionClass,
-                dropdownClass,
-            ]"
-            :style="!positionClass && positionOffsetStyle"
+        <!-- Activator Wrapper -->
+        <div
+            ref="activatorWrapper"
+            class="dropdown-activator"
+            @click="onActivatorClick"
         >
-            <slot 
-                v-if="$slots['items']"
-                name="items"
-                :onClose="toggle"
+            <slot
+                name="activator"
+                :isOpen="isOpen"
             />
-            <template v-else-if="items?.length && !$slots['items']">
-                <DropdownMenuItem 
-                    v-for="(item, index) in items" :key="index"
-                    :actionType="item.actionType"
-                    :text="item.text"
-                    :icon="item.icon"
-                    :size="item.size"
-                    :type="item.type"
-                    :userDisplayName="item.userDisplayName"
-                    :userProfileImg="item.userProfileImg"
-                    :imgUrl="item.imgUrl"
-                    :alt="item.alt"
-                    :helpText="item.helpText"
-                    :to="item.to"
-                    :isExternal="item.isExternal"
-                    :exportData="item.exportData"
-                    :exportFields="item.exportFields"
-                    :exportType="item.exportType"
-                    :exportFileName="item.exportFileName"
-                    :hasSeparator="item.hasSeparator"
-                    @click="handleClick(item.callback)"
-                />
-            </template>
         </div>
-        <!-- Activator Slot -->
-        <slot 
-            name="activator" 
-            :onClick="toggle"
-            :isOpen
-        />
+
+        <template v-if="shouldTeleport">    
+            <!-- Teleported Dropdown Menu -->
+            <teleport to="body">
+                <div
+                    v-if="isOpen"
+                    ref="dropdown"
+                    v-bind="$attrs"
+                    :class="[
+                        'bg-background-surface',
+                        'py-1',
+                        'rounded',
+                        hasShadow && 'shadow-lg',
+                        'flex flex-col',
+                        'z-50',
+                        hasBorder && 'border border-border-default',
+                        dropdownClass,
+                    ]"
+                    :style="computedTeleportStyle"
+                >
+                    <slot
+                        v-if="$slots.items"
+                        name="items"
+                        :onClose="close"
+                    />
+                    <template v-else-if="items?.length">
+                        <DropdownMenuItem
+                            v-for="(item, index) in items"
+                            :key="index"
+                            :actionType="item.actionType"
+                            :text="item.text"
+                            :icon="item.icon"
+                            :size="item.size"
+                            :type="item.type"
+                            :userDisplayName="item.userDisplayName"
+                            :userProfileImg="item.userProfileImg"
+                            :imgUrl="item.imgUrl"
+                            :alt="item.alt"
+                            :helpText="item.helpText"
+                            :to="item.to"
+                            :isExternal="item.isExternal"
+                            :exportData="item.exportData"
+                            :exportFields="item.exportFields"
+                            :exportType="item.exportType"
+                            :exportFileName="item.exportFileName"
+                            :hasSeparator="item.hasSeparator"
+                            @click="handleClick(item.callback)"
+                        />
+                    </template>
+                </div>
+            </teleport>
+        </template>
+        <template v-else>
+            <div 
+                v-if="isOpen"
+                ref="dropdown"
+                v-bind="$attrs" 
+                :class="[
+                    'bg-background-surface',
+                    'py-1',
+                    'rounded',
+                    hasShadow && 'shadow-lg',
+                    'w-full',
+                    'flex flex-col',
+                    'z-50',
+                    hasBorder && 'border border-border-default',
+                    positionClass ? positionClass : dropdownPositionClass,
+                    dropdownClass,
+                ]"
+                :style="!positionClass && positionOffsetStyle"
+            >
+                <slot 
+                    v-if="$slots['items']"
+                    name="items"
+                    :onClose="toggle"
+                />
+                <template v-else-if="items?.length && !$slots['items']">
+                    <DropdownMenuItem 
+                        v-for="(item, index) in items" :key="index"
+                        :actionType="item.actionType"
+                        :text="item.text"
+                        :icon="item.icon"
+                        :size="item.size"
+                        :type="item.type"
+                        :userDisplayName="item.userDisplayName"
+                        :userProfileImg="item.userProfileImg"
+                        :imgUrl="item.imgUrl"
+                        :alt="item.alt"
+                        :helpText="item.helpText"
+                        :to="item.to"
+                        :isExternal="item.isExternal"
+                        :exportData="item.exportData"
+                        :exportFields="item.exportFields"
+                        :exportType="item.exportType"
+                        :exportFileName="item.exportFileName"
+                        :hasSeparator="item.hasSeparator"
+                        @click="handleClick(item.callback)"
+                    />
+                </template>
+            </div>
+        </template>
     </div>
 </template>
+
 <script setup lang="ts">
-// Component options
+// Imports
+import type { CSSProperties } from 'vue'
+
 defineOptions({
-    inheritAttrs: false, // Prevents Vue from automatically applying attributes incorrectly
+    inheritAttrs: false,
 })
 
 // Props
@@ -94,27 +158,149 @@ const props = defineProps({
         type: Boolean as PropType<boolean>,
         default: true,
     },
+    shouldTeleport: {
+        type: Boolean as PropType<boolean>,
+        default: true,
+    },
 })
 
-// Ref
-const dropdownContainer = ref(null)
+// Refs
+const activatorWrapper = ref<HTMLElement | null>(null)
+const dropdown = ref<HTMLElement | null>(null)
+const isOpen = ref(false)
 
-// Composables
-const [isOpen, toggle] = useToggle(false)
+// States
+const isPositioned = ref(false)
+const activatorRect = ref<DOMRect | null>(null)
+const dropdownRect = ref<DOMRect | null>(null)
 
-onClickOutside(dropdownContainer, () => {
+// Methods
+const close = () => {
     isOpen.value = false
-})
+    isPositioned.value = false
+}
+
+const open = () => {
+    isOpen.value = true
+    isPositioned.value = false
+
+    nextTick(() => {
+        requestAnimationFrame(() => {
+            updateRects()
+            isPositioned.value = true
+        })
+    })
+}
+
+const toggle = () => {
+    if (isOpen.value) {
+        close()
+    } else {
+        open()
+    }
+}
+
+const getActivatorElement = () => {
+    return activatorWrapper.value
+}
+
+const onActivatorClick = (event: MouseEvent) => {
+    if (!activatorWrapper.value) return
+
+    if (activatorWrapper.value.contains(event.target as Node)) {
+        toggle()
+    }
+}
+
+const updateRects = () => {
+    const activatorEl = getActivatorElement()
+    if (!activatorEl || !dropdown.value) return
+
+    activatorRect.value = activatorEl.getBoundingClientRect()
+    dropdownRect.value = dropdown.value.getBoundingClientRect()
+}
 
-// Handlers
 const handleClick = (callback?: () => void) => {
-    if(callback) {
-        callback()
+    if (callback) callback()
+    close()
+}
+
+const handleClickOutside = (event: MouseEvent) => {
+    const dropdownEl = dropdown.value
+    const activatorEl = activatorWrapper.value
+
+    if (!dropdownEl || !activatorEl) return
+
+    const target = event.target as Node
+
+    if (
+        !dropdownEl.contains(target) &&
+        !activatorEl.contains(target)
+    ) {
+        close()
+    }
+}
+
+const handleScrollOutside = (event: Event) => {
+    const dropdownEl = dropdown.value
+    const activatorEl = activatorWrapper.value
+
+    if (!dropdownEl || !activatorEl) return
+
+    const target = event.target as Node
+
+    // If scroll happened on an element not containing the dropdown or activator
+    if (
+        !dropdownEl.contains(target) &&
+        !activatorEl.contains(target)
+    ) {
+        close()
     }
-    toggle()
 }
 
-// Computed
+const computedTeleportStyle = computed<CSSProperties>(() => {
+    if (!isPositioned.value || !activatorRect.value || !dropdownRect.value) {
+        return {
+            position: 'absolute',
+            top: '0px',
+            left: '0px',
+            visibility: 'hidden',
+            zIndex: '50',
+            width: '0px',
+        }
+    }
+
+    const a = activatorRect.value
+    const d = dropdownRect.value
+    const x = Number(props.positionXOffset) || 0
+    const y = Number(props.positionYOffset) || 0
+
+    const [primary, secondary] = props.position.toLowerCase().split('-')
+
+    let top = 0
+    let left = 0
+
+    if (primary === 'bottom') top = a.bottom + y
+    if (primary === 'top') top = a.top - d.height - y
+    if (primary === 'left') left = a.left - d.width - x
+    if (primary === 'right') left = a.right + x
+
+    if (secondary === 'left') left = a.left
+    if (secondary === 'right') left = a.right - d.width
+    if (secondary === 'top') top = a.top
+    if (secondary === 'bottom') top = a.bottom - d.height
+
+    return {
+        position: 'absolute',
+        top: `${top + window.scrollY}px`,
+        left: `${left + window.scrollX}px`,
+        width: `${a.width}px`,
+        visibility: 'visible',
+        zIndex: '50',
+    }
+})
+
+// Styles for non-teleported dropdown
 const dropdownPositionClass = computed(() => {
     const variant = {
         [DropdownPosition.LEFT_TOP]: 'absolute right-full top-0',
@@ -204,4 +390,15 @@ const positionOffsetStyle = computed(() => {
     return style
 })
 
-</script>
+onMounted(() => {
+    document.addEventListener('click', handleClickOutside)
+    window.addEventListener('resize', close)
+    document.addEventListener('scroll', handleScrollOutside, true)
+})
+
+onBeforeUnmount(() => {
+    document.removeEventListener('click', handleClickOutside)
+    window.removeEventListener('resize', close)
+    document.removeEventListener('scroll', handleScrollOutside, true)
+})
+</script>

package/components/dropdowns/DropdownSelect.vue

@@ -3,6 +3,7 @@
         <!-- Dropdown Menu -->
         <DropdownMenu
             ref="dropdownContainer"
+            :shouldTeleport="false"
             :positionClass="`absolute ${dropdownPositionClass}`"
             dropdownClass="max-w-full z-10"
             :class="[ 
@@ -12,7 +13,7 @@
                 'border-border-default', 
             ]"
         >
-            <template #activator="{ onClick, isOpen }">
+            <template #activator="{ isOpen }">
                 <!-- Select Box -->
                 <div
                     :class="[ 
@@ -29,7 +30,7 @@
                         disabled ? 'text-text-neutral-disabled' : 'text-text-default',
                         sizeClass,
                     ]"
-                    @click="!disabled && onClick()"
+                    @click="!disabled"
                 >
                     <div v-if="multiple">
                         <template v-if="Array.isArray(selected) && selected.length">

package/components/dropdowns/DropdownSelectItem.vue

@@ -65,7 +65,7 @@
             <Icon 
                 v-if="isSelected && activeStyle === SelectActiveStyle.CHECK"
                 name="mdi:check"
-                iconClass="text-icon-primary-brand-active"
+                iconClass="!text-icon-primary-brand-active"
             />
         </div>
         <p 

package/components/empty-states/EmptyState.vue

@@ -123,10 +123,10 @@ const orientationClass = computed(() => {
 
 const iconSizeClass = computed(() => {
     const iconSize = {
-        [Orientation.VERTICAL]: '!min-w-[40px] !max-w-[40px]',
-        [Orientation.HORIZONTAL]: '!min-w-[32px] !max-w-[32px]',
+        [Orientation.VERTICAL]: 'w-[40px] h-[40px] min-w-[40px] min-h-[40px]',
+        [Orientation.HORIZONTAL]: 'w-[32px] h-[32px] min-w-[32px] min-h-[32px]',
     }
-    return iconSize[props.orientation as Orientation] || '!min-w-[32px] max-w-[32px]'
+    return iconSize[props.orientation as Orientation] || 'w-[32px] h-[32px] min-w-[32px] min-h-[32px]'
 })
 
 const containerClasses = computed(() => {

package/components/icons/Icon.vue

@@ -3,13 +3,10 @@
         :name
         :mode
         :customize="svgCustomize"
-        :class="[
-            iconSizeClass,
-            iconColorClass,
-            ...normalizedIconClass,
-        ]"
+        :class="finalIconClasses"
     />
 </template>
+
 <script setup lang="ts">
 // Props
 const props = defineProps({
@@ -24,23 +21,36 @@ const props = defineProps({
     },
     size: {
         type: String as PropType<IconSize>,
-        default: IconSize.MD, 
+        default: IconSize.MD,
         validator: (value: IconSize) => Object.values(IconSize).includes(value),
     },
     color: String as PropType<ColorAccent>,
-    svgCustomize: Function as PropType<CollectionCustomizeCallback>,  
-    iconClass: [String, Array] as PropType<string | string[]>,    
+    svgCustomize: Function as PropType<CollectionCustomizeCallback>,
+    iconClass: [String, Array] as PropType<string | string[]>,
 })
 
-// Computed function
+// Normalize iconClass into array
 const normalizedIconClass = computed(() => {
     return Array.isArray(props.iconClass)
         ? props.iconClass
         : props.iconClass?.split(' ').filter(Boolean) || []
 })
 
-// Computed classes
+// Detect overrides
+const hasTextClass = computed(() =>
+    normalizedIconClass.value.some(cls => cls.startsWith('text-'))
+)
+
+const hasSizeClass = computed(() =>
+    normalizedIconClass.value.some(cls =>
+        /^(w-|h-|min-w-|min-h-)/.test(cls)
+    )
+)
+
+// Size classes (skipped if overridden)
 const iconSizeClass = computed(() => {
+    if (hasSizeClass.value) return null
+
     const variants = {
         [IconSize.XS]: 'w-[12px] h-[12px] min-w-[12px] min-h-[12px]',
         [IconSize.SM]: 'w-[16px] h-[16px] min-w-[16px] min-h-[16px]',
@@ -50,10 +60,13 @@ const iconSizeClass = computed(() => {
         [IconSize.XXL]: 'w-[40px] h-[40px] min-w-[40px] min-h-[40px]',
     }
 
-    return variants[props.size as IconSize] || 'w-[20px] h-[20px] min-w-[20px] min-h-[20px]'
+    return variants[props.size as IconSize] || variants[IconSize.MD]
 })
 
+// Color classes (skipped if overridden)
 const iconColorClass = computed(() => {
+    if (hasTextClass.value) return null
+
     if (!props.color) return 'text-inherit'
 
     const variants = {
@@ -68,4 +81,15 @@ const iconColorClass = computed(() => {
 
     return variants[props.color] || 'text-inherit'
 })
-</script>
+
+// Final class list (deduplicated)
+const finalIconClasses = computed(() => {
+    const classes = [
+        iconSizeClass.value,
+        iconColorClass.value,
+        ...normalizedIconClass.value,
+    ].filter(Boolean)
+
+    return [...new Set(classes)]
+})
+</script>

package/components/lists/List.vue

@@ -9,8 +9,8 @@
         <template v-if="items.length && !$slots.default">
             <ListItem 
                 v-for="(item, index) in items" :key="index" 
-                :icon="listItemIcon"
-                :iconClass="listItemIconClass"
+                :markerIcon="listItemIcon"
+                :markerIconClass="listItemIconClass"
                 :size="listItemSize"
                 :spaced="spaced"
             >

package/components/lists/ListItem.vue

@@ -6,9 +6,9 @@
         ]"
     >
         <Icon
-            v-if="icon"
-            :name="icon"
-            :class="[iconClass, iconSizeClass]"
+            v-if="markerIcon"
+            :name="markerIcon"
+            :iconClass="[markerIconClass, markerIconSizeClass]"
         />
         <span :class="[contentSizeClass, 'w-full']">
             <slot />
@@ -18,8 +18,8 @@
 <script setup lang="ts">
 // Props
 const props = defineProps({
-    icon: String as PropType<string>,
-    iconClass: {
+    markerIcon: String as PropType<string>,
+    markerIconClass: {
         type: String as PropType<string>,
         default: 'text-icon-secondary-brand-default'
     },
@@ -35,13 +35,13 @@ const props = defineProps({
 })
 
 // Computed
-const iconSizeClass = computed(() => {
+const markerIconSizeClass = computed(() => {
     const sizeVariant = {
-        [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]',
+        [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] || 'w-[20px] h-[20px] min-w-[20px] min-h-[20px]'
+    return sizeVariant[props.size as ListItemSize] || '!w-[20px] !h-[20px] !min-w-[20px] !min-h-[20px]'
 })
 
 const contentSizeClass = computed(() => {

package/components/rating/RatingItem.vue

@@ -45,9 +45,9 @@ const iconSizeClass = computed(() => {
 
 const colorClass = computed(() => {
     const colorVariants = {
-        [RatingItemColor.GOLD]: 'text-icon-rating',
-        [RatingItemColor.PRIMARY_BRAND]: 'text-icon-primary-brand-rating',
+        [RatingItemColor.GOLD]: '!text-icon-rating',
+        [RatingItemColor.PRIMARY_BRAND]: '!text-icon-primary-brand-rating',
     }
-    return colorVariants[props.color as RatingItemColor] || 'text-icon-rating'
+    return colorVariants[props.color as RatingItemColor] || '!text-icon-rating'
 })
 </script>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@imaginario27/air-ui-ds",
-    "version": "1.1.2",
+    "version": "1.1.4",
     "author": "imaginario27",
     "type": "module",
     "homepage": "https://air-ui.netlify.app/",