@imaginario27/air-ui-ds 1.0.0

package/components/alerts/Alert.vue

@@ -0,0 +1,159 @@
+<template>
+    <div 
+        :class="[
+            'w-full',
+            'flex gap-3',
+            description === undefined || description === '' ? 'px-4 py-2' : 'p-4',
+            'rounded-lg',
+            'border',
+            containerClass,
+        ]"
+    >
+        <template v-if="description">
+            <MdiIcon 
+                :icon="iconType"
+                size="20"
+                preserveAspectRatio="xMidYMid meet"
+                :class="['min-w-[20px]', iconColorClass]"
+            />
+            <div 
+                :class="[
+                    'w-full flex flex-col gap-2',
+                    textColorClass,
+                ]"
+            >
+                <span class="text-sm font-semibold"
+                >
+                    {{ title }}
+                </span>
+                <p v-html="description" class="text-sm" />
+    
+                <div
+                    v-if="buttons?.length"
+                    class="flex gap-6"
+                >
+                    <AlertButton 
+                        v-for="(button, index) in buttons" :key="`text-${index}`"
+                        :type
+                        :actionType="button.actionType"
+                        :text="button.text"
+                        :icon="button.icon"
+                        :iconPosition="button.iconPosition"
+                        :disabled="button.disabled"
+                        :to="button.to"
+                        :isExternal="button.isExternal"
+                    />
+                </div>
+            </div>
+        </template>
+
+        <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]"
+                    />
+                    <span :class="['text-sm font-semibold', textColorClass]">
+                        {{ title  }}
+                    </span>
+                </div>
+
+                <div class="flex gap-3">
+                    <div
+                        v-if="buttons?.length"
+                        class="flex gap-4"
+                    >
+                        <AlertButton 
+                            v-for="(button, index) in buttons" :key="`text-${index}`"
+                            :type
+                            :actionType="button.actionType"
+                            :text="button.text"
+                            :icon="button.icon"
+                            :iconPosition="button.iconPosition"
+                            :disabled="button.disabled"
+                            :to="button.to"
+                            :isExternal="button.isExternal"
+                            :callback="button.callback"
+                        />
+                    </div>
+
+                    <AlertIconButton 
+                        v-if="hasCloseButton"
+                        :type
+                        icon="mdiClose"
+                        @click="$emit('close')"
+                    />
+                </div>
+            </div>
+        </template>
+    </div>
+</template>
+<script setup lang="ts">
+// Props
+const props = defineProps({
+    type: {
+        type: String as PropType<AlertType>,
+        default: AlertType.WARNING,
+        validator: (value: AlertType) => Object.values(AlertType).includes(value),
+    },
+    icon: String as PropType<any>,
+    title: {
+        type: String as PropType<string>,
+        default: 'Title',
+    },
+    description: String as PropType<string>,
+    buttons: Array as PropType<AlertButton[]>,
+    hasCloseButton: {
+        type: Boolean as PropType<boolean>,
+        default: true,
+    },
+})
+
+// Emits
+defineEmits(['close'])
+
+// Computed classes
+const containerClass = computed(() => {
+    const variant = {
+        [AlertType.WARNING]: 'bg-background-warning-subtler border-border-warning',
+        [AlertType.DANGER]: 'bg-background-danger-subtler border-border-danger',
+        [AlertType.SUCCESS]: 'bg-background-success-subtler border-border-success',
+        [AlertType.INFO]: 'bg-background-info-subtler border-border-info',
+    }
+    return variant[props.type as AlertType] || 'bg-background-warning-subtler border-border-warning'
+})
+
+const textColorClass = computed(() => {
+    const variant = {
+        [AlertType.WARNING]: 'text-text-warning-on-bg',
+        [AlertType.DANGER]: 'text-text-danger',
+        [AlertType.SUCCESS]: 'text-text-success',
+        [AlertType.INFO]: 'text-text-info',
+    }
+    return variant[props.type as AlertType] || 'text-text-warning-on-bg'
+})
+
+const iconColorClass = computed(() => {
+    const variant = {
+        [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'
+})
+
+const iconType = computed(() => {
+    const variant = {
+        [AlertType.WARNING]: 'mdiAlertOutline',
+        [AlertType.DANGER]: 'mdiCloseOctagonOutline',
+        [AlertType.SUCCESS]: 'mdiCheckCircleOutline',
+        [AlertType.INFO]: 'mdiInformationOutline',
+    }
+    return variant[props.type as AlertType] as any || 'mdiAlertOutline'
+})
+
+</script>

package/components/avatars/Avatar.vue

@@ -0,0 +1,152 @@
+<template>
+    <div 
+        :class="[ 
+            'flex justify-center items-center',
+            'bg-background-primary-brand-soft',
+            'aspect-square',
+            'overflow-hidden',
+            shapeClass,
+            sizeClass,
+            hasBorder && [
+                'border border-border-primary-brand-hover',
+                borderSizeClass,
+            ],
+            isInteractive && [
+                hoverBorderSizeClass,
+                'border-border-primary-brand-hover cursor-pointer'
+            ],
+        ]"
+    >
+        <!-- Show initials if imgUrl is not provided or image fails to load -->
+        <span 
+            v-if="!props.imgUrl || !isImageLoaded"
+            :class="[ 
+                'flex items-center justify-center text-text-primary-brand-on-soft-bg font-bold select-none',
+                textSizeClass,
+            ]"
+        >
+            {{ initials }}
+        </span>
+
+        <!-- Show the image if it loads successfully -->
+        <img 
+            v-else
+            :src="props.imgUrl" 
+            :alt="`${props.displayName} avatar`"
+            class="object-cover w-full h-full aspect-square"
+            @load="handleImageLoad"
+            @error="handleImageError"
+        >
+    </div>
+</template>
+
+<script setup lang="ts">
+// Props
+const props = defineProps({
+    shape: {
+        type: String as PropType<AvatarShape>,
+        default: AvatarShape.CIRCLE,
+        validator: (value: AvatarShape) => Object.values(AvatarShape).includes(value),
+    },
+    size: {
+        type: String as PropType<AvatarSize | AvatarStackSize>,
+        default: AvatarSize.SM,
+        validator: (value: AvatarSize) => Object.values(AvatarSize).includes(value),
+    },
+    isInteractive: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    displayName: {
+        type: String as PropType<string>,
+        default: 'Test user',
+    },
+    imgUrl: String as PropType<string>,
+    hasBorder: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+})
+
+// States
+const isImageLoaded = ref(true)
+
+// Handlers for image load and error
+const handleImageLoad = () => {
+    isImageLoaded.value = true
+}
+
+const handleImageError = () => {
+    isImageLoaded.value = false
+}
+
+// Computed classes
+const shapeClass = computed(() => {
+    const shapeVariant = {
+        [AvatarShape.CIRCLE]: 'rounded-full',
+        [AvatarShape.SQUARE]: 'rounded-md',
+    }
+    return shapeVariant[props.shape as AvatarShape] || 'rounded-full'
+})
+
+const sizeClass = computed(() => {
+    const sizeVariant = {
+        [AvatarSize.XS]: 'w-[24px] h-[24px]',
+        [AvatarSize.SM]: 'w-[32px] h-[32px]',
+        [AvatarSize.MD]: 'w-[36px] h-[36px]',
+        [AvatarSize.LG]: 'w-[40px] h-[40px]',
+        [AvatarSize.XL]: 'w-[48px] h-[48px]',
+        [AvatarSize.XXL]: 'w-[56px] h-[56px]',
+        [AvatarSize.XXXL]: 'w-[96px] h-[96px]',
+        [AvatarSize.XXXXL]: 'w-[224px] h-[224px]',
+    }
+    return sizeVariant[props.size as AvatarSize] || 'w-[32px] h-[32px]'
+})
+
+const textSizeClass = computed(() => {
+    const textSizeVariant = {
+        [AvatarSize.XS]: 'text-xs',
+        [AvatarSize.SM]: 'text-sm',
+        [AvatarSize.MD]: 'text-md',
+        [AvatarSize.LG]: 'text-md',
+        [AvatarSize.XL]: 'text-lg',
+        [AvatarSize.XXL]: 'text-xl',
+        [AvatarSize.XXXL]: 'text-3xl',
+        [AvatarSize.XXXXL]: 'text-4xl',
+    }
+    return textSizeVariant[props.size as AvatarSize] || 'text-sm'
+})
+
+const borderSizeClass = computed(() => {
+    const sizeVariant = {
+        [AvatarSize.XS]: 'border-1',
+        [AvatarSize.SM]: 'border-2',
+        [AvatarSize.MD]: 'border-2',
+        [AvatarSize.LG]: 'border-2',
+        [AvatarSize.XL]: 'border-2',
+        [AvatarSize.XXL]: 'border-2',
+        [AvatarSize.XXXL]: 'border-4',
+        [AvatarSize.XXXXL]: 'border-4',
+    }
+
+    return sizeVariant[props.size as AvatarSize] || 'border-2'
+})
+
+const hoverBorderSizeClass = computed(() => {
+    const sizeVariant = {
+        [AvatarSize.XS]: 'hover:border-1',
+        [AvatarSize.SM]: 'hover:border-2',
+        [AvatarSize.MD]: 'hover:border-2',
+        [AvatarSize.LG]: 'hover:border-2',
+        [AvatarSize.XL]: 'hover:border-2',
+        [AvatarSize.XXL]: 'hover:border-2',
+        [AvatarSize.XXXL]: 'hover:border-4',
+        [AvatarSize.XXXXL]: 'hover:border-4',
+    }
+
+    return sizeVariant[props.size as AvatarSize] || 'hover:border-2'
+})
+
+// Computed initials
+const initials = computed(() => getInitials(props.displayName))
+</script>

package/components/avatars/AvatarStack.vue

@@ -0,0 +1,97 @@
+<template>
+    <div class="flex gap-2">
+        <Avatar
+            v-for="(avatar, index) in filteredItems"
+            :key="avatar.displayName"
+            :displayName="avatar.displayName"
+            :imgUrl="avatar.imgUrl"
+            hasBorder
+            :isInteractive
+            :shape
+            :size
+            :class="[
+                index !== 0 && '-ml-4',
+                'border-2',
+                isInteractive && hoveredIndex === index
+                    ? 'border-border-primary-brand-hover'
+                    : '!border-border-neutral-stacked',
+            ]"
+            @mouseenter="onMouseEnter(index)"
+            @mouseleave="onMouseLeave"
+        />
+        <AvatarStackCounter 
+            v-if="Number.isFinite(itemsLimit) && itemsLimit && items.length > itemsLimit"
+            :text="counterContent"
+            :shape
+            :size
+            class="-ml-4"
+        />
+    </div>
+    
+</template>
+<script setup lang="ts">
+// Props
+const props = defineProps({
+    items: {
+        type: Array as PropType<Avatar[]>,
+        default: () => [
+            {
+                displayName: 'John Doe',
+            },
+            {
+                displayName: 'Sarah Penny',
+            },
+            {
+                displayName: 'Rachel Kross'
+            },
+            {
+                displayName: 'Jadie Miller'
+            },
+            {
+                displayName: 'Alicia Mels',
+            }, 
+        ]
+    },
+    shape: {
+        type: String as PropType<AvatarShape>,
+        default: AvatarShape.CIRCLE,
+        validator: (value: AvatarShape) => Object.values(AvatarShape).includes(value),
+    },
+    size: {
+        type: String as PropType<AvatarStackSize>,
+        default: AvatarStackSize.SM,
+        validator: (value: AvatarStackSize) => Object.values(AvatarStackSize).includes(value),
+    },
+    isInteractive: Boolean as PropType<boolean>,
+    itemsLimit: {
+        type: Number as PropType<number | null>,
+        default: null
+    },
+    counterType: {
+        type: String as PropType<StackCounterType>,
+        default: StackCounterType.ELLIPSIS,
+        validator: (value: StackCounterType) => Object.values(StackCounterType).includes(value),
+    }
+})
+
+// Computed
+const filteredItems = computed(() => {
+    return props.itemsLimit !== null && props.itemsLimit !== undefined
+        ? props.items.filter((_, index) => index < props.itemsLimit!)
+        : props.items
+})
+
+const counterContent = computed(() => getStackCounterContent(props.items, props.counterType, props.itemsLimit ? props.itemsLimit : null))
+
+// States
+const hoveredIndex = ref<number | null>(null)
+
+// Handlers
+const onMouseEnter = (index: number) => {
+    hoveredIndex.value = index
+}
+
+const onMouseLeave = () => {
+    hoveredIndex.value = null
+}
+</script>

package/components/avatars/AvatarStackCounter.vue

@@ -0,0 +1,74 @@
+<template>
+    <div 
+        :class="[ 
+            'flex justify-center items-center',
+            'bg-background-primary-brand-soft',
+            'aspect-square',
+            'overflow-hidden',
+            shapeClass,
+            sizeClass,
+            'border-2 border-border-neutral-stacked',
+        ]"
+    >
+        <span 
+            :class="[ 
+                'flex items-center justify-center text-text-primary-brand-on-soft-bg font-bold select-none',
+                textSizeClass,
+            ]"
+        >
+            {{ text }}
+        </span>
+    </div>
+</template>
+
+<script setup lang="ts">
+// Props
+const props = defineProps({
+    type: {
+        type: String as PropType<StackCounterType>,
+        default: StackCounterType.ELLIPSIS,
+        validator: (value: StackCounterType) => Object.values(StackCounterType).includes(value),
+    },
+    shape: {
+        type: String as PropType<AvatarShape>,
+        default: AvatarShape.CIRCLE,
+        validator: (value: AvatarShape) => Object.values(AvatarShape).includes(value),
+    },
+    size: {
+        type: String as PropType<AvatarStackSize>,
+        default: AvatarStackSize.SM,
+        validator: (value: AvatarStackSize) => Object.values(AvatarStackSize).includes(value),
+    },
+    text: {
+        type: String as PropType<string>,
+        default: '...',
+    },
+})
+
+// Computed classes
+const shapeClass = computed(() => {
+    const shapeVariant = {
+        [AvatarShape.CIRCLE]: 'rounded-full',
+        [AvatarShape.SQUARE]: 'rounded-md',
+    }
+    return shapeVariant[props.shape as AvatarShape] || 'rounded-full'
+})
+
+const sizeClass = computed(() => {
+    const sizeVariant = {
+        [AvatarStackSize.XS]: 'w-[24px] h-[24px]',
+        [AvatarStackSize.SM]: 'w-[32px] h-[32px]',
+        [AvatarStackSize.MD]: 'w-[36px] h-[36px]',
+    }
+    return sizeVariant[props.size as AvatarStackSize] || 'w-[32px] h-[32px]'
+})
+
+const textSizeClass = computed(() => {
+    const textSizeVariant = {
+        [AvatarStackSize.XS]: 'text-xs',
+        [AvatarStackSize.SM]: 'text-sm',
+        [AvatarStackSize.MD]: 'text-md',
+    }
+    return textSizeVariant[props.size as AvatarStackSize] || 'text-sm'
+})
+</script>

package/components/badges/Badge.vue

@@ -0,0 +1,221 @@
+<template>
+    <div
+        :class="[ 
+            'inline-flex items-center gap-2 font-semibold text-xs px-2 h-[24px] w-fit',
+            styleClass,
+            shapeClass,
+            colorClass,
+            borderColorClass,
+            isTransparent ? 'bg-transparent' : undefined,
+            showDot ? 'pl-3' : undefined
+        ]"
+    >
+        <!-- Dot -->
+        <span
+            v-if="showDot"
+            :class="['w-1.5 h-1.5 rounded-full', dotColorClass]"
+        />
+
+        <!-- Icon -->
+        <MdiIcon
+            v-if="showIcon"
+            :icon="icon"
+            size="12px"
+            preserveAspectRatio="xMidYMid meet"
+            :class="iconColorClass"
+        />
+
+        <!-- Text -->
+        <span :class="textClass">{{ text }}</span>
+
+        <!-- Close button -->
+        <button
+            v-if="closeable"
+            :class="[textClass, 'ml-1 hover:opacity-75 focus:outline-none']"
+            @click="emitClose"
+        >
+            <MdiIcon 
+                icon="mdiClose" 
+                size="16px"
+                preserveAspectRatio="xMidYMid meet"
+            />
+        </button>
+    </div>
+</template>
+
+<script setup lang="ts">
+// Props
+const props = defineProps({
+    styleType: {
+        type: String as PropType<BadgeStyle>,
+        default: BadgeStyle.BORDER,
+        validator: (value: BadgeStyle) => Object.values(BadgeStyle).includes(value),
+    },
+    shape: {
+        type: String as PropType<BadgeShape>,
+        default: BadgeShape.BADGE, 
+        validator: (value: BadgeShape) => Object.values(BadgeShape).includes(value),
+    },
+    color: {
+        type: String as PropType<ColorAccent>,
+        default: ColorAccent.NEUTRAL, 
+        validator: (value: ColorAccent) => Object.values(ColorAccent).includes(value),
+    },
+    showDot: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    closeable: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    isTransparent: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    showIcon: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    text: {
+        type: String as PropType<string>,
+        default: 'Badge',
+    },
+    icon: {
+        type: String as PropType<any>,
+        default: 'mdiHelp',
+    },
+})
+
+// Emits
+const emit = defineEmits(['close'])
+const emitClose = () => {
+    emit('close')
+}
+
+// Computed classes
+const styleClass = computed(() => {
+    if (props.styleType === BadgeStyle.FLAT) {
+        return ''
+    }
+
+    return {
+        [BadgeStyle.BORDER]: 'border',
+        [BadgeStyle.FILLED]: 'bg-filled'
+    }[props.styleType] || 'border'
+})
+
+const shapeClass = computed(() => {
+    const shapeVariants = {
+        [BadgeShape.BADGE]: 'rounded',
+        [BadgeShape.PILL]: 'rounded-full',
+    }
+    return shapeVariants[props.shape as BadgeShape] || 'rounded'
+})
+
+const colorClass = computed(() => {
+    if (props.styleType === BadgeStyle.FLAT) {
+        const flatColorVariant: Record<ColorAccent, string> = {
+            [ColorAccent.NEUTRAL]: "bg-background-neutral-sublter",
+            [ColorAccent.SUCCESS]: "bg-background-success-subtler",
+            [ColorAccent.WARNING]: "bg-background-warning-subtler",
+            [ColorAccent.DANGER]: "bg-background-danger-subtler",
+            [ColorAccent.INFO]: "bg-background-info-subtler",
+            [ColorAccent.PRIMARY_BRAND]: "bg-background-primary-brand-soft",
+            [ColorAccent.SECONDARY_BRAND]: "bg-background-secondary-brand-soft",
+        }
+
+        return flatColorVariant[props.color as ColorAccent] || "bg-transparent text-secondary-700"
+    }
+
+    const colorVariant: Record<ColorAccent, string> = {
+        [ColorAccent.NEUTRAL]: props.styleType === BadgeStyle.FILLED
+            ? "bg-background-neutral-bold"
+            : "bg-background-neutral-sublter",
+        [ColorAccent.SUCCESS]: props.styleType === BadgeStyle.FILLED
+            ? "bg-background-success-bold"
+            : "bg-background-success-subtlest",
+        [ColorAccent.WARNING]: props.styleType === BadgeStyle.FILLED
+            ? "bg-background-warning-bold"
+            : "bg-background-warning-subtlest",
+        [ColorAccent.DANGER]: props.styleType === BadgeStyle.FILLED
+            ? "bg-background-danger-bold"
+            : "bg-background-danger-subtlest",
+        [ColorAccent.INFO]: props.styleType === BadgeStyle.FILLED
+            ? "bg-background-info-bold"
+            : "bg-background-info-subtlest",
+        [ColorAccent.PRIMARY_BRAND]: props.styleType === BadgeStyle.FILLED
+            ? "bg-background-primary-brand-default"
+            : "bg-background-primary-brand-soft",
+        [ColorAccent.SECONDARY_BRAND]: props.styleType === BadgeStyle.FILLED
+            ? "bg-background-secondary-brand-default"
+            : "bg-background-secondary-brand-soft",
+    }
+
+    return colorVariant[props.color as ColorAccent] || "bg-background-neutral-sublter"
+})
+
+const textClass = computed(() => {
+    if (props.styleType === BadgeStyle.FILLED) return "text-text-neutral-on-filled"
+
+    const textVariant: Record<ColorAccent, string> = {
+        [ColorAccent.NEUTRAL]: "text-text-neutral-subtle",
+        [ColorAccent.SUCCESS]: "text-text-success",
+        [ColorAccent.WARNING]: props.isTransparent ? "text-text-warning" : "text-text-warning-on-bg",
+        [ColorAccent.DANGER]: "text-text-danger",
+        [ColorAccent.INFO]: "text-text-info",
+        [ColorAccent.PRIMARY_BRAND]: "text-text-primary-brand-on-soft-bg",
+        [ColorAccent.SECONDARY_BRAND]: "text-text-secondary-brand-on-soft-bg",
+    }
+
+    return textVariant[props.color as ColorAccent] || "text-text-neutral-subtle"
+})
+
+const iconColorClass = computed(() => {
+    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",
+    }
+
+    return iconVariant[props.color as ColorAccent] || "text-icon-secondary"
+})
+
+const dotColorClass = computed(() => {
+    if (props.styleType === BadgeStyle.FILLED) return "bg-text-on-filled"
+
+    const dotVariant: Record<ColorAccent, string> = {
+        [ColorAccent.NEUTRAL]: "bg-icon-neutral-subtle",
+        [ColorAccent.SUCCESS]: "bg-icon-success",
+        [ColorAccent.WARNING]: "bg-icon-warning",
+        [ColorAccent.DANGER]: "bg-icon-danger",
+        [ColorAccent.INFO]: "bg-icon-info",
+        [ColorAccent.PRIMARY_BRAND]: "bg-icon-primary-brand-default",
+        [ColorAccent.SECONDARY_BRAND]: "bg-icon-secondary-brand-default",
+    }
+
+    return dotVariant[props.color as ColorAccent] || "bg-icon-neutral-subtle"
+})
+
+const borderColorClass = computed(() => {
+    if (props.styleType !== BadgeStyle.BORDER) return ""
+
+    const borderVariant: Record<ColorAccent, string> = {
+        [ColorAccent.NEUTRAL]: "border-border-default",
+        [ColorAccent.SUCCESS]: "border-border-success",
+        [ColorAccent.WARNING]: "border-border-warning",
+        [ColorAccent.DANGER]: "border-border-danger",
+        [ColorAccent.INFO]: "border-border-info",
+        [ColorAccent.PRIMARY_BRAND]: "border-border-primary-brand-default",
+        [ColorAccent.SECONDARY_BRAND]: "border-border-secondary-brand",
+    }
+
+    return borderVariant[props.color as ColorAccent] || "border-border-default"
+})
+</script>