@imaginario27/air-ui-ds 1.0.0

package/components/badges/BadgeStack.vue

@@ -0,0 +1,110 @@
+<template>
+    <div
+        class="flex flex-wrap gap-2"
+    >
+        <Badge 
+            v-for="(item, index) in visibleBadges" 
+            :key="item.text || index" 
+            :text="item.text"
+            :styleType
+            :shape
+            :color
+            :isTransparent
+            :showDot
+            :closeable
+            :showIcon
+            :icon="item.icon"
+            @close="() => emit('close', item)"
+        />
+        <Badge 
+            v-if="showEllipsisBadge" 
+            :text="counterContent"
+            :style="BadgeStyle.BORDER"
+            :shape="BadgeShape.BADGE"
+            :color="ColorAccent.NEUTRAL"
+            :isTransparent
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+// Props
+const props = defineProps({
+    items: {
+        type: Array as PropType<Badge[]>,
+            default: () => [
+            {
+                text: 'Badge 1',
+            },
+            {
+                text: 'Badge 2',
+            },
+            {
+                text: 'Badge 3'
+            },
+            {
+                text: 'Badge 4'
+            },
+            {
+                text: 'Badge 5'
+            }, 
+        ]
+    },
+    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,
+    },
+    itemsLimit: {
+        type: Number as PropType<number>,
+        default: null,
+    },
+    counterType: {
+        type: String as PropType<StackCounterType>,
+        default: StackCounterType.ELLIPSIS,
+        validator: (value: StackCounterType) => Object.values(StackCounterType).includes(value),
+    },
+})
+
+// Emits
+const emit = defineEmits(['close'])
+
+// Computed functions
+const visibleBadges = computed(() => 
+    // Only apply slicing if itemsLimit is provided and is a valid number
+    Number.isFinite(props.itemsLimit) ? props.items.slice(0, props.itemsLimit) : props.items
+)
+
+const showEllipsisBadge = computed(() => 
+    // Only show ellipsis if itemsLimit is provided and the items exceeds the max itemsLimit
+    Number.isFinite(props.itemsLimit) && props.items.length > props.itemsLimit
+)
+
+const counterContent = computed(() => getStackCounterContent(props.items, props.counterType, props.itemsLimit ? props.itemsLimit : null))
+</script>

package/components/badges/IconBadge.vue

@@ -0,0 +1,57 @@
+<template>
+    <div 
+        :class="[ 
+            'w-[24px] h-[24px] flex justify-center items-center rounded-full', 
+            colorClass 
+        ]" 
+    >
+        <MdiIcon 
+            v-if="icon" 
+            :icon
+            size="16px" 
+            :class="iconColorClass" 
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+// Props
+const props = defineProps({
+    color: {
+        type: String as PropType<ColorAccent>,
+        default: ColorAccent.NEUTRAL,
+        validator: (value: ColorAccent) => Object.values(ColorAccent).includes(value),
+    },
+    icon: {
+        type: String as PropType<any>,
+        default: 'mdiHelp', 
+    },
+})
+
+// Computed Classes
+const colorClass = computed(() => {
+    const colorVariants = {
+        [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 colorVariants[props.color as ColorAccent] || 'bg-background-neutral-sublter'
+})
+
+const iconColorClass = computed(() => {
+    const iconVariants = {
+        [ColorAccent.NEUTRAL]: 'text-icon-neutral-subtle-on-subtler-bg',
+        [ColorAccent.SUCCESS]: 'text-icon-success',
+        [ColorAccent.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 iconVariants[props.color as ColorAccent] || 'text-icon-neutral-subtle-on-subtler-bg'
+})
+</script>

package/components/badges/IconTextBadge.vue

@@ -0,0 +1,50 @@
+<template>
+    <div 
+        :class="[ 
+            'inline-flex items-center gap-2 font-semibold text-xs'
+        ]"
+    >
+        <IconBadge 
+            :color
+            :icon
+        />
+
+        <!-- Text -->
+        <span :class="textClass">
+            {{ text }}
+        </span>
+    </div>
+</template>
+
+<script setup lang="ts">
+// Props
+const props = defineProps({
+    color: {
+        type: String as PropType<ColorAccent>,
+        default: ColorAccent.NEUTRAL,
+        validator: (value: ColorAccent) => Object.values(ColorAccent).includes(value),
+    },
+    text: {
+        type: String as PropType<string>,
+        default: 'Badge text'
+    },
+    icon: {
+        type: String as PropType<any>,
+        default: 'mdiHelp', 
+    },
+})
+
+// Computed Classes
+const textClass = computed(() => {
+    const textVariants = {
+        [ColorAccent.NEUTRAL]: 'text-text-neutral-subtle',
+        [ColorAccent.SUCCESS]: 'text-text-success',
+        [ColorAccent.WARNING]: 'text-text-warning',
+        [ColorAccent.DANGER]: 'text-text-danger',
+        [ColorAccent.INFO]: 'text-text-info',
+        [ColorAccent.PRIMARY_BRAND]: 'text-text-primary-brand-default',
+        [ColorAccent.SECONDARY_BRAND]: 'text-text-secondary-brand-default',
+    }
+    return textVariants[props.color as ColorAccent] || 'text-text-secondary'
+})
+</script>

package/components/breadcrumbs/Breadcrumbs.vue

@@ -0,0 +1,54 @@
+<template>
+    <nav aria-label="breadcrumb">
+        <ul class="flex items-center space-x-2 text-gray-500">
+            <!-- Home Link -->
+            <li>
+                <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"
+                    />
+                </NuxtLink>
+            </li>
+
+            <!-- Dynamic Breadcrumbs (Stop at Previous Level) -->
+            <li v-for="(crumb, index) in breadcrumbs" :key="index" class="flex items-center space-x-2">
+                <!-- Chevron Separator -->
+                <MdiIcon 
+                    icon="mdiChevronRight" 
+                    size="20" 
+                    preserveAspectRatio="xMidYMid meet"
+                    class="text-icon-neutral-subtler"
+                />
+
+                <!-- Breadcrumb Link -->
+                <NuxtLink 
+                    :to="crumb.to" 
+                    class="text-sm text-text-neutral-subtler hover:text-text-neutral-on-monochrome-hover-bg"
+                >
+                    {{ crumb.label }}
+                </NuxtLink>
+            </li>
+        </ul>
+    </nav>
+</template>
+<script setup lang="ts">
+// 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
+
+    return pathSegments.slice(0, -1).map((segment, index) => { // Exclude last segment
+        return {
+            label: segment.replace(/-/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase()), // Format text
+            to: '/' + pathSegments.slice(0, index + 1).join('/') // Build breadcrumb path
+        }
+    })
+})
+</script>

package/components/buttons/ActionButton.vue

@@ -0,0 +1,395 @@
+<template>
+    <component
+        :is="actionType === ButtonActionType.LINK ? NuxtLink : 'button'"
+        :id
+        :type="actionType === ButtonActionType.ACTION ? type : undefined"
+        :class="[
+            'flex items-center justify-center',
+            isRounded ? 'rounded-full' : 'rounded-button',
+            'aspect-square',
+            'text-nowrap',
+            ...buttonStyleClass,
+            buttonSizeClass,
+            horizontalPaddingClass,
+            gapClass,
+            'self-start',
+            isFullWidth && 'w-full',
+            isMobileFullWidth && 'w-full md:w-auto'
+        ]"
+        v-bind="{
+            ...componentProps,
+            ...$attrs,
+            ...(actionType === ButtonActionType.ACTION ? { onClick: emitClick } : {})
+        }"
+        :disabled="ButtonActionType.ACTION && isLoading || disabled"
+        
+    >
+        <!-- Loading State -->
+        <template v-if="isLoading">
+            <div class="animate-spin">
+                <MdiIcon 
+                    icon="mdiLoading" 
+                    preserveAspectRatio="xMidYMid meet"
+                    :class="iconSizeClass" 
+                />
+            </div>
+            
+            <span :class="[ 'font-semibold', textSizeClass, textClass ]">
+                {{ loadingText }}
+            </span>
+        </template>
+
+        <!-- Normal Content -->
+        <template v-else>
+            <!-- Left icon -->
+            <template v-if="iconPosition === IconPosition.LEFT">
+                <MdiIcon
+                    v-if="icon && !svgIcon"
+                    :icon
+                    preserveAspectRatio="xMidYMid meet"
+                    :class="iconSizeClass"
+                />
+                <span
+                    v-else-if="svgIcon"
+                    :class="iconSizeClass"
+                >
+                    <SVGImage
+                        :src="svgIcon"
+                        :color="resolvedSvgIconColor"
+                    />
+                </span>
+            </template>
+
+            <span :class="[ 'font-semibold', textSizeClass, textClass ]">
+                {{ text }}
+            </span>
+
+            <!-- Right icon -->
+            <template v-if="iconPosition === IconPosition.RIGHT">
+                <MdiIcon
+                    v-if="icon"
+                    :icon="icon"
+                    preserveAspectRatio="xMidYMid meet"
+                    :class="iconSizeClass"
+                />
+                <span
+                    v-else-if="svgIcon"
+                    :class="iconSizeClass"
+                >
+                    <SVGImage
+                        :src="svgIcon"
+                        :color="!useSVGIconColor && svgIconColorClass"
+                    />
+                </span>
+            </template>
+        </template>
+    </component>
+</template>
+
+<script setup lang="ts">
+// Imports
+import { NuxtLink } from '#components'
+
+ // Component options
+defineOptions({
+    inheritAttrs: false, // Prevents Vue from automatically applying attributes incorrectly
+})
+
+// Props
+const props = defineProps({
+    actionType: {
+        type: String as PropType<ButtonActionType>,
+        default: ButtonActionType.ACTION,
+        validator: (value: ButtonActionType) => Object.values(ButtonActionType).includes(value),
+    },
+    styleType: {
+        type: String as PropType<ButtonStyleType>,
+        default: ButtonStyleType.NEUTRAL_OUTLINED,
+        validator: (value: ButtonStyleType) => Object.values(ButtonStyleType).includes(value),
+    },
+    type: {
+        type: String as PropType<'button' | 'submit' | 'reset'>,
+        default: 'button',
+        validator: (value: string) => 
+            ['button', 'submit', 'reset'].includes(value),
+    }, 
+    text: {
+        type: String as PropType<string>,
+        default: 'Button text'
+    },
+    size: {
+        type: String as PropType<ButtonSize>,
+        default: ButtonSize.LG,
+        validator: (value: ButtonSize) => Object.values(ButtonSize).includes(value),
+    },
+    icon: {
+        type: String as PropType<any>,
+        default: "mdiHelp"
+    },
+    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,
+    },
+    disabled: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    to: {
+        type: String as PropType<string>,
+        default: '/'
+    },
+    isExternal: {
+        type: Boolean as PropType<boolean>,
+        default: false
+    },
+    isRounded: {
+        type: Boolean as PropType<boolean>,
+        default: false
+    },
+    isFullWidth: {
+        type: Boolean as PropType<boolean>,
+        default: false
+    },
+    isMobileFullWidth: {
+        type: Boolean as PropType<boolean>,
+        default: false
+    },
+    isLoading: { 
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    loadingText: { 
+        type: String as PropType<string>,
+        default: 'Processing...',
+    },
+    id: String as PropType<string>,
+    textClass: String as PropType<string>,
+})
+
+// Emits
+const emit = defineEmits(['click'])
+const emitClick = () => {
+    if (!props.disabled) {
+        emit('click')
+    }
+}
+
+// Computed classes
+const buttonStyleClass = computed(() => {
+    const variant = {
+        [ButtonStyleType.PRIMARY_BRAND_FILLED]: [
+            'bg-background-primary-brand-default',
+            !props.disabled && 'hover:bg-background-primary-brand-hover',
+            'focus:ring-offset-2',
+            'focus:ring-2',
+            'focus:ring-border-primary-brand-default',
+            'text-text-neutral-on-filled',
+        ],
+        [ButtonStyleType.PRIMARY_BRAND_SOFT]: [
+            'bg-background-primary-brand-soft',
+            !props.disabled && 'hover:bg-background-primary-brand-soft-hover',
+            'focus:ring-offset-2',
+            'focus:ring-2',
+            'focus:ring-border-primary-brand-default',
+            'text-icon-primary-brand-on-soft-bg',
+        ],
+        [ButtonStyleType.PRIMARY_BRAND_TRANSPARENT]: [
+            'focus:ring-offset-2',
+            'focus:ring-2',
+            'focus:ring-border-primary-brand-default',
+            'text-text-primary-brand-default',
+            !props.disabled && 'hover:text-text-primary-brand-hover',
+        ],
+        [ButtonStyleType.SECONDARY_BRAND_FILLED]: [
+            'bg-background-secondary-brand-default',
+            !props.disabled && 'hover:bg-background-secondary-brand-hover',
+            'focus:ring-offset-2',
+            'focus:ring-2',
+            'focus:ring-border-secondary-brand',
+            'text-text-neutral-on-filled',
+        ],
+        [ButtonStyleType.NEUTRAL_FILLED]: [
+            'bg-background-neutral-filled-default',
+            !props.disabled && 'hover:bg-background-neutral-filled-hover',
+            'focus:ring-offset-2',
+            'focus:ring-2',
+            'focus:ring-border-primary-brand-default',
+            'text-text-neutral-on-neutral-filled-bg',
+        ],
+        [ButtonStyleType.NEUTRAL_OUTLINED]: [
+            'border',
+            'border-border-default',
+            'bg-background-neutral-default',
+            !props.disabled && 'hover:bg-background-neutral-hover',
+            'focus:ring-offset-2',
+            'focus:ring-2',
+            'focus:ring-border-primary-brand-default',
+            'text-text-default',
+        ],
+        [ButtonStyleType.NEUTRAL_TRANSPARENT]: [
+            !props.disabled && 'hover:bg-background-neutral-hover',
+            'focus:ring-offset-2',
+            'focus:ring-2',
+            'focus:ring-border-primary-brand-default',
+            'text-text-default',
+        ],
+        [ButtonStyleType.NEUTRAL_TRANSPARENT_SUBTLE]: [
+            !props.disabled && 'hover:bg-background-neutral-hover hover:text-text-default',
+            'focus:ring-offset-2',
+            'focus:ring-2',
+            'focus:ring-border-primary-brand-default',
+            'text-text-neutral-subtler',
+        ],
+        [ButtonStyleType.DELETE_FILLED]: [
+            'bg-background-delete-default',
+            !props.disabled && 'hover:bg-background-delete-hover',
+            'focus:ring-offset-2',
+            'focus:ring-2',
+            'focus:ring-border-delete',
+            'text-text-neutral-on-filled',
+        ],
+        [ButtonStyleType.DELETE_SOFT]: [
+            'bg-background-delete-soft',
+            !props.disabled && 'hover:bg-background-delete-soft-hover',
+            'focus:ring-offset-2',
+            'focus:ring-2',
+            'focus:ring-border-delete',
+            'text-text-delete',
+        ],
+        [ButtonStyleType.DELETE_OUTLINED]: [
+            'border',
+            'border-border-delete-subtle',
+            'bg-background-neutral-default',
+            !props.disabled && 'hover:bg-background-delete-on-neutral-hover',
+            'focus:ring-offset-2',
+            'focus:ring-2',
+            'focus:ring-border-delete',
+            'text-text-delete',
+        ],
+        [ButtonStyleType.DELETE_TRANSPARENT]: [
+            !props.disabled && 'hover:bg-background-delete-on-neutral-hover',
+            'focus:ring-offset-2',
+            'focus:ring-2',
+            'focus:ring-border-delete',
+            'text-text-delete',
+        ],
+    }
+
+    return variant[props.styleType as ButtonStyleType]?.filter(Boolean) || [
+        'border',
+        'border-border-default',
+        'bg-background-neutral-default',
+        !props.disabled && 'hover:bg-background-neutral-hover',
+        'focus:ring-offset-2',
+        'focus:ring-2',
+        'focus:ring-border-primary-brand-default',
+        'text-text-default',
+    ].filter(Boolean)
+})
+
+const buttonSizeClass = computed(() => {
+    const variant = {
+        [ButtonSize.XS]: 'h-[24px]',
+        [ButtonSize.SM]: 'h-[28px]',
+        [ButtonSize.MD]: 'h-[32px]',
+        [ButtonSize.LG]: 'h-[36px]',
+        [ButtonSize.XL]: 'h-[40px]',
+        [ButtonSize.XXL]: 'h-[48px]',
+    }
+    return variant[props.size as ButtonSize] || 'h-[36px]'
+})
+
+const iconSizeClass = computed(() => {
+    const variant = {
+        [ButtonSize.XS]: 'w-[16px] h-[16px] min-w-[16px] min-h-[16px]',
+        [ButtonSize.SM]: 'w-[16px] h-[16px] min-w-[16px] min-h-[16px]',
+        [ButtonSize.MD]: 'w-[16px] h-[16px] min-w-[16px] min-h-[16px]',
+        [ButtonSize.LG]: 'w-[20px] h-[20px] min-w-[20px] min-h-[20px]',
+        [ButtonSize.XL]: 'w-[20px] h-[20px] min-w-[20px] min-h-[20px]',
+        [ButtonSize.XXL]: 'w-[24px] h-[24px] min-w-[24px] min-h-[24px]',
+    }
+    return variant[props.size as ButtonSize] || 'w-[20px] h-[20px] min-w-[20px] min-h-[20px]'
+})
+
+const svgIconColorClass = 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.SECONDARY_BRAND_FILLED]: 'text-text-neutral-on-filled',
+        [ButtonStyleType.NEUTRAL_FILLED]: 'text-text-neutral-on-neutral-filled-bg',
+        [ButtonStyleType.NEUTRAL_OUTLINED]: 'text-text-default',
+        [ButtonStyleType.NEUTRAL_TRANSPARENT]: 'text-text-default',
+        [ButtonStyleType.NEUTRAL_TRANSPARENT_SUBTLE]: 'text-text-neutral-subtler',
+        [ButtonStyleType.DELETE_FILLED]: 'text-text-neutral-on-filled',
+        [ButtonStyleType.DELETE_SOFT]: 'text-text-delete',
+        [ButtonStyleType.DELETE_OUTLINED]: 'text-text-delete',
+        [ButtonStyleType.DELETE_TRANSPARENT]: 'text-text-delete',
+    }
+    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',
+        [ButtonSize.SM]: 'px-2',
+        [ButtonSize.MD]: 'px-2.5',
+        [ButtonSize.LG]: 'px-3',
+        [ButtonSize.XL]: 'px-3.5',
+        [ButtonSize.XXL]: 'px-4',
+    }
+    return variant[props.size as ButtonSize] || 'px-3'
+})
+
+const gapClass = computed(() => {
+    const variant = {
+        [ButtonSize.XS]: 'gap-1',
+        [ButtonSize.SM]: 'gap-1.5',
+        [ButtonSize.MD]: 'gap-2',
+        [ButtonSize.LG]: 'gap-2',
+        [ButtonSize.XL]: 'gap-2',
+        [ButtonSize.XXL]: 'gap-2',
+    }
+    return variant[props.size as ButtonSize] || 'gap-2'
+})
+
+// Computed functions
+const resolvedSvgIconColor = computed(() => {
+    return props.useSVGIconColor ? undefined : svgIconColorClass
+})
+
+// Props for the dynamic component
+const componentProps = computed(() => {
+    if (props.actionType === ButtonActionType.LINK) {
+        return {
+            to: props.to,
+            target: props.isExternal ? '_blank' : '_self',
+            rel: props.isExternal ? 'noopener noreferrer' : undefined,
+            external: props.isExternal,
+        }
+    } else {
+        return {}
+    }
+})
+</script>