@imaginario27/air-ui-ds 1.0.0

package/components/content/ContentItem.vue

@@ -0,0 +1,144 @@
+<template>
+    <NuxtLink :to>
+        <component
+            :is="wrapperComponent"
+            :class="dynamicWrapperClass"
+            v-bind="cardProps"
+        >
+            <ContentItemImage 
+                v-if="hasImage"
+                :src="imgUrl"
+                :alt="imgAlt"
+                :aspectRatio="imgAspectRatio"
+                :hoverEffect="imgHoverEffect"
+                :hoverIcon="imgHoverIcon"
+                :fallbackIcon="imgFallbackIcon"
+                :containerClass="imgContainerClass"
+            />
+
+            <!-- Custom content-->
+            <slot 
+                v-if="$slots['content']"
+                name="content" 
+            />
+
+            <!-- Content -->
+            <div 
+                v-else
+                class="w-full flex flex-col gap-1.5"
+            >
+                <component 
+                    :is="titleTag" 
+                    :class="titleClass"
+                >   
+                    {{ trimText(title, titleMaxLength) }}
+                </component>
+
+                <p
+                    v-if="description"
+                    :class="descriptionClass"
+                >
+                    {{ trimText(description, descriptionMaxLength) }}
+                </p>
+            </div>
+        </component>
+    </NuxtLink>
+</template>
+
+<script setup lang="ts">
+// Dynamic component import
+import Card from '../cards/Card.vue'
+
+// Props
+const props = defineProps({
+    type: {
+        type: String as PropType<ContentItemType>,
+        default: ContentItemType.CARD
+    },
+    title: {
+        type: String as PropType<string>,
+        default: 'Title',
+    },
+    titleTag: {
+        type: String as PropType<'h3' | 'h4' | 'h5' | 'h6'>,
+        default: 'h4',
+        validator: (value: string) => ['h3', 'h4', 'h5', 'h6'].includes(value),
+    },
+    titleClass: {
+        type: String as PropType<string>,
+        default: 'font-semibold',
+    },
+    titleMaxLength: {
+        type: Number as PropType<number>,
+        default: 72,
+    },
+    description: String as PropType<string>,
+    descriptionClass: {
+        type: String as PropType<string>,
+        default: 'text-sm text-text-neutral-subtle',
+    },
+    descriptionMaxLength: {
+        type: Number as PropType<number>,
+        default: 100,
+    },
+    to: String as PropType<string>,
+    hasImage: {
+        type: Boolean as PropType<boolean>,
+        default: true,
+    },
+    imgUrl: String as PropType<string>,
+    imgAlt: {
+        type: String as PropType<string>,
+        default: 'Item image'
+    },
+    imgAspectRatio: {
+        type: String as PropType<AspectRatio>,
+        default: AspectRatio.AR_16_9,
+    },
+    imgHoverEffect: {
+        type: String as PropType<ImageHoverEffect>,
+        default: ImageHoverEffect.BLUR,
+        validator: (value: ImageHoverEffect) => Object.values(ImageHoverEffect).includes(value),
+    },
+    imgHoverIcon: String as PropType<any>,
+    imgFallbackIcon: String as PropType<any>,
+    imgContainerClass: String as PropType<string>,
+    containerClass: String as PropType<string>,
+    hasCardShadow: {
+        type: Boolean as PropType<boolean>,
+        default: true,
+    },
+    hasCardBackgroundHover: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    
+})
+
+// Computed
+const dynamicWrapperClass = computed(() => {
+    const baseClasses = [
+        'gap-4',
+        props.containerClass
+    ]
+
+    if (props.type === ContentItemType.BASIC) {
+        baseClasses.unshift('w-full', 'flex', 'flex-col')
+    }
+
+    return baseClasses
+})
+
+const wrapperComponent = computed(() => {
+    return props.type === ContentItemType.CARD ? Card : 'div'
+})
+
+const cardProps = computed(() => {
+    if (props.type !== ContentItemType.CARD) return {}
+
+    return {
+        hasShadow: props.hasCardShadow,
+        hasBackgroundHover: props.hasCardBackgroundHover,
+    }
+})
+</script>

package/components/content/ContentItemImage.vue

@@ -0,0 +1,125 @@
+<template>
+    <div 
+        :class="[
+            'w-full',
+            'flex items-center justify-center',
+            containerClass,
+        ]"
+    >
+        <div 
+            :class="[
+                'w-full',
+                'rounded-md',
+                'relative',
+                'group',
+                'overflow-hidden',
+                aspectRatioClass,
+                containerClass,
+            ]"
+        >
+            <!-- Image or fallback -->
+            <img
+                v-if="src"
+                :src
+                :alt
+                :class="imageClass"
+            >
+
+            <div
+                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"
+                />
+            </div>
+
+            <!-- Hover effect -->
+            <template v-if="src">
+                <div
+                    v-if="hoverEffect === 'overlay'"
+                    class="absolute inset-0 bg-background-neutral-filled-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"
+                />
+
+                <div
+                    :class="[
+                        'absolute inset-0',
+                        'flex items-center justify-center',
+                        'opacity-0',
+                        'group-hover:opacity-100',
+                        'transition-opacity duration-300',
+                    ]"
+                >
+                    <MdiIcon
+                        :icon="hoverIcon"
+                        size="32"
+                        preserveAspectRatio="xMidYMid meet"
+                        class="text-icon-neutral-on-filled-bg"
+                    />
+                </div>
+            </template>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+// Props
+const props = defineProps({
+    src: String as PropType<string>,
+    alt: {
+        type: String,
+        default: 'Item image',
+    },
+    aspectRatio: {
+        type: String as PropType<AspectRatio>,
+        default: AspectRatio.AR_16_9,
+    },
+    hoverEffect: {
+        type: String as PropType<ImageHoverEffect>,
+        default: ImageHoverEffect.BLUR,
+    },
+    hoverIcon: {
+        type: String as PropType<any>,
+        default: 'mdiEyeOutline',
+    },
+    fallbackIcon: {
+        type: String as PropType<any>,
+        default: 'mdiImageOffOutline',
+    },
+    containerClass: String as PropType<string>,
+})
+
+// Computed classes
+const aspectRatioClass = computed(() => {
+    const variant: Record<AspectRatio, string> = {
+        [AspectRatio.AR_1_1]: 'aspect-[1/1]',
+        [AspectRatio.AR_4_3]: 'aspect-[4/3]',
+        [AspectRatio.AR_3_2]: 'aspect-[3/2]',
+        [AspectRatio.AR_16_9]: 'aspect-[16/9]',
+        [AspectRatio.AR_3_4]: 'aspect-[3/4]',
+        [AspectRatio.AR_4_5]: 'aspect-[4/5]',
+        [AspectRatio.AR_2_3]: 'aspect-[2/3]',
+    }
+
+    return variant[props.aspectRatio as AspectRatio] || 'aspect-[16/9]'
+})
+
+const imageClass = computed(() => {
+    if (props.hoverEffect === ImageHoverEffect.ZOOM_IN) {
+        return 'w-full h-full object-cover transition-transform duration-300 scale-100 group-hover:scale-110'
+    }
+
+    if (props.hoverEffect === ImageHoverEffect.ZOOM_OUT) {
+        return 'w-full h-full object-cover transition-transform duration-300 scale-110 group-hover:scale-100'
+    }
+
+    if (props.hoverEffect === ImageHoverEffect.BLUR) {
+        return 'w-full h-full object-cover transition duration-300 group-hover:blur-xs'
+    }
+
+    return 'w-full h-full object-cover'
+})
+</script>

package/components/dividers/Divider.vue

@@ -0,0 +1,35 @@
+<template>
+    <hr 
+        :class="[ 
+            orientation === Orientation.VERTICAL
+                ? [
+                    'h-full',
+                    'min-h-[16px]',
+                    'w-px',
+                    'border-none',
+                    'bg-border-default',
+                    'mx-2',
+                  ]
+                : [
+                    'w-full',
+                    'border-xs',
+                    'border-border-default',
+                  ],
+            hideOnMobile && 'hidden md:block',
+        ]"
+    >
+</template>
+
+<script setup lang="ts">
+defineProps({
+    orientation: {
+        type: String as PropType<Orientation>,
+        default: Orientation.HORIZONTAL,
+        validator: (value: Orientation) => Object.values(Orientation).includes(value),
+    },
+    hideOnMobile: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },  
+})
+</script>

package/components/dividers/TextLineDivider.vue

@@ -0,0 +1,58 @@
+<template>
+    <div class="w-full flex items-center gap-4">
+        <Divider v-if="align === Align.CENTER"/>
+        <span 
+            :class="[
+                'font-semibold',
+                'text-nowrap',
+                textSizeClass, 
+                textColorClass
+            ]"
+        >
+            {{ text }}
+        </span>
+        <Divider />
+    </div>
+</template>
+<script setup lang="ts">
+// Props
+const props = defineProps({
+    text: { 
+        type: String as PropType<string>,
+        default: 'Text',
+    },
+    styleType: {
+        type: String as PropType<DividerStyle>,
+        default: DividerStyle.NEUTRAL,
+        validator: (value: DividerStyle) => Object.values(DividerStyle).includes(value),
+    },
+    size: {
+        type: String as PropType<DividerSize>,
+        default: DividerSize.XS,
+        validator: (value: DividerSize) => Object.values(DividerSize).includes(value),
+    },
+    align: {
+        type: String as PropType<Align.LEFT | Align.CENTER>,
+        default: Align.CENTER,
+        validator: (value: Align) => [Align.LEFT, Align.CENTER].includes(value),
+    },
+})
+
+// Computed classes
+const textColorClass = computed(() => {
+    const variant = {
+        [DividerStyle.NEUTRAL]: 'text-text-neutral-subtle',
+        [DividerStyle.PRIMARY_BRAND]: 'text-text-primary-brand-default',
+        [DividerStyle.SECONDARY_BRAND]: 'text-text-secondary-brand-default',
+    }
+    return variant[props.styleType as DividerStyle] || 'text-text-neutral-subtle'
+})
+
+const textSizeClass = computed(() => {
+    const variant = {
+        [DividerSize.XS]: 'text-xs',
+        [DividerSize.SM]: 'text-sm',
+    }
+    return variant[props.size as DividerSize] || 'text-xs'
+})
+</script>

package/components/dropdowns/DropdownMenu.vue

@@ -0,0 +1,207 @@
+<template>
+    <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"
+        >
+            <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>
+        <!-- Activator Slot -->
+        <slot 
+            name="activator" 
+            :onClick="toggle"
+            :isOpen
+        />
+    </div>
+</template>
+<script setup lang="ts">
+// Component options
+defineOptions({
+    inheritAttrs: false, // Prevents Vue from automatically applying attributes incorrectly
+})
+
+// Props
+const props = defineProps({
+    items: Array as PropType<DropdownMenuItem[]>,
+    position: {
+        type: String as PropType<DropdownPosition>,
+        default: DropdownPosition.BOTTOM_RIGHT,
+        validator: (value: DropdownPosition) => Object.values(DropdownPosition).includes(value),
+    },
+    hasShadow: {
+        type: Boolean as PropType<boolean>,
+        default: true,
+    },
+    hasBorder: {
+        type: Boolean as PropType<boolean>,
+        default: true,
+    },
+    positionXOffset: {
+        type: [Number, String] as PropType<number | string>,
+        default: 0,
+    },
+    positionYOffset: {
+        type: [Number, String] as PropType<number | string>,
+        default: 0,
+    },
+    positionClass: String as PropType<string>,
+    dropdownClass: String as PropType<string>,
+    isRelative: {
+        type: Boolean as PropType<boolean>,
+        default: true,
+    },
+})
+
+// Ref
+const dropdownContainer = ref(null)
+
+// Composables
+const [isOpen, toggle] = useToggle(false)
+
+onClickOutside(dropdownContainer, () => {
+    isOpen.value = false
+})
+
+// Handlers
+const handleClick = (callback?: () => void) => {
+    if(callback) {
+        callback()
+    }
+    toggle()
+}
+
+// Computed
+const dropdownPositionClass = computed(() => {
+    const variant = {
+        [DropdownPosition.LEFT_TOP]: 'absolute right-full top-0',
+        [DropdownPosition.LEFT_BOTTOM]: 'absolute right-full bottom-0',
+        [DropdownPosition.RIGHT_TOP]: 'absolute left-full top-0',
+        [DropdownPosition.RIGHT_BOTTOM]: 'absolute left-full bottom-0',
+        [DropdownPosition.TOP_LEFT]: 'absolute left-0 bottom-full',
+        [DropdownPosition.TOP_RIGHT]: 'absolute right-0 bottom-full',
+        [DropdownPosition.BOTTOM_LEFT]: 'absolute left-0 top-full',
+        [DropdownPosition.BOTTOM_RIGHT]: 'absolute right-0 top-full',
+    }
+
+    return variant[props.position as DropdownPosition] || 'absolute right-0 top-full'
+})
+
+const positionOffsetStyle = computed(() => {
+    const normalizeOffset = (value: number | string): string => {
+        if (typeof value === 'number') return `${value}px`
+        if (/\d+(px|rem|em|%)$/.test(value)) return value
+        return `${value}px`
+    }
+
+    const x = props.positionXOffset
+    const y = props.positionYOffset
+    const position = props.position as DropdownPosition
+
+    const style: Record<string, string> = {}
+
+    // Vertical alignment
+    if (
+        position === DropdownPosition.TOP_LEFT ||
+        position === DropdownPosition.TOP_RIGHT
+    ) {
+        style.marginBottom = normalizeOffset(y)
+    }
+
+    if (
+        position === DropdownPosition.BOTTOM_LEFT ||
+        position === DropdownPosition.BOTTOM_RIGHT
+    ) {
+        style.marginTop = normalizeOffset(y)
+    }
+
+    if (
+        position === DropdownPosition.LEFT_TOP ||
+        position === DropdownPosition.RIGHT_TOP
+    ) {
+        style.marginTop = normalizeOffset(y)
+    }
+
+    if (
+        position === DropdownPosition.LEFT_BOTTOM ||
+        position === DropdownPosition.RIGHT_BOTTOM
+    ) {
+        style.marginBottom = normalizeOffset(y)
+    }
+
+    // Horizontal alignment
+    if (
+        position === DropdownPosition.TOP_LEFT ||
+        position === DropdownPosition.BOTTOM_LEFT
+    ) {
+        style.marginLeft = normalizeOffset(x)
+    }
+
+    if (
+        position === DropdownPosition.TOP_RIGHT ||
+        position === DropdownPosition.BOTTOM_RIGHT
+    ) {
+        style.marginRight = normalizeOffset(x)
+    }
+
+    if (
+        position === DropdownPosition.LEFT_TOP ||
+        position === DropdownPosition.LEFT_BOTTOM
+    ) {
+        style.marginRight = normalizeOffset(x)
+    }
+
+    if (
+        position === DropdownPosition.RIGHT_TOP ||
+        position === DropdownPosition.RIGHT_BOTTOM
+    ) {
+        style.marginLeft = normalizeOffset(x)
+    }
+
+    return style
+})
+
+</script>

package/components/dropdowns/DropdownMenuActions.vue

@@ -0,0 +1,11 @@
+<template>
+    <div
+        :class="[
+            'flex flex-col justify-center gap-3',
+            'px-3 py-2',
+            'w-full',
+        ]"
+    >
+        <slot />
+    </div>
+</template>