@imaginario27/air-ui-ds 1.0.0

package/components/steppers/StepIndicator.vue

@@ -0,0 +1,228 @@
+<template>
+    <div
+        :class="[
+            'aspect-square',
+            'border-2',
+            'flex items-center justify-center',
+            'rounded-full',
+            'select-none',
+            'text-center',
+            containerBackgroundClass,
+            containerSizeClass,
+            containerBorderClass,
+        ]"
+    >
+        <!-- NONE -->
+        <span 
+            v-if="status === StepStatus.NONE"
+            :class="[
+                'font-bold',
+                stepNumberSizeClass,
+                textColorClass,
+            ]"
+        >
+            <template v-if="type === StepIndicatorType.NUMBER">
+                {{ step }}
+            </template>
+            <template v-else-if="type === StepIndicatorType.ICON && stepIcon">
+                <MdiIcon 
+                    :icon="stepIcon"
+                    :size="iconSize"
+                    preserveAspectRatio="xMidYMid meet"
+                />
+            </template>
+        </span>
+
+        <!-- INACTIVE -->
+        <span 
+            v-if="status === StepStatus.INACTIVE"
+            :class="[
+                'font-bold',
+                stepNumberSizeClass,
+                textColorClass,
+            ]"
+        >
+            <template v-if="type === StepIndicatorType.NUMBER">
+                {{ step }}
+            </template>
+            <template v-else-if="type === StepIndicatorType.ICON && stepIcon">
+                <MdiIcon 
+                    :icon="stepIcon"
+                    :size="iconSize"
+                    preserveAspectRatio="xMidYMid meet"
+                />
+            </template>
+        </span>
+
+        <!-- CURRENT -->
+        <span 
+            v-else-if="status === StepStatus.CURRENT"
+            :class="[
+                'font-bold text-text-primary-brand-default',
+                stepNumberSizeClass,
+                textColorClass,
+            ]"
+        >
+            <template v-if="type === StepIndicatorType.NUMBER">
+                {{ step }}
+            </template>
+            <template v-else-if="type === StepIndicatorType.ICON && stepIcon">
+                <MdiIcon 
+                    :icon="stepIcon"
+                    :size="iconSize"
+                    preserveAspectRatio="xMidYMid meet"
+                />
+            </template>
+            <template v-else-if="type === StepIndicatorType.EMPTY">
+                <!-- Circle -->
+                <div 
+                    :class="[
+                        'w-[10px] h-[10px] rounded-full bg-icon-primary-brand-default',
+                        circleColorClass,
+                    ]" 
+                />
+            </template>
+        </span>
+
+        <!-- COMPLETED -->
+        <span 
+            v-else-if="status === StepStatus.COMPLETED"
+            class="text-sm font-semibold text-text-primary-brand-default"
+        >
+            <MdiIcon 
+                :icon="completedIcon"
+                :size="iconSize"
+                preserveAspectRatio="xMidYMid meet"
+                class="text-icon-neutral-on-filled-bg"
+            />
+        </span>
+    </div>
+</template>
+<script setup lang="ts">
+// Props
+const props = defineProps({
+    type: {
+        type: String as PropType<StepIndicatorType>,
+        default: StepIndicatorType.NUMBER,
+        validator: (value: StepIndicatorType) => Object.values(StepIndicatorType).includes(value),    
+    },
+    status: {
+        type: String as PropType<StepStatus>,
+        default: StepStatus.INACTIVE,
+        validator: (value: StepStatus) => Object.values(StepStatus).includes(value),    
+    },
+    size: {
+        type: String as PropType<StepIndicatorSize>,
+        default: StepIndicatorSize.XL,
+        validator: (value: StepIndicatorSize) => Object.values(StepIndicatorSize).includes(value),    
+    },
+    step: {
+        type: Number as PropType<number>,
+        default: 1,
+    },
+    stepIcon: String as PropType<any>,
+    completedIcon: {
+        type: String as PropType<any>,
+        default: 'mdiCheck',
+    },
+    isHovered: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+})
+
+// Computed classes
+const containerSizeClass = computed(() => {
+    const variant = {
+        [StepIndicatorSize.XL]: 'w-[40px] h-[40px]',
+        [StepIndicatorSize.LG]: 'w-[36px] h-[36px]',
+        [StepIndicatorSize.MD]: 'w-[32px] h-[32px]',
+        [StepIndicatorSize.SM]: 'w-[28px] h-[28px]',
+        [StepIndicatorSize.XS]: 'w-[24px] h-[24px]',
+    }
+    return variant[props.size as StepIndicatorSize] || 'w-[40px] h-[40px]'
+})
+
+const containerBorderClass = computed(() => {
+    const variant = {
+        [StepStatus.NONE]: 'border-none',
+        [StepStatus.INACTIVE]: 'border-border-default',
+        [StepStatus.CURRENT]: 'border-border-primary-brand-active',
+        [StepStatus.COMPLETED]: 'border-border-primary-brand-active',
+    }
+
+    let base = variant[props.status as StepStatus] || 'border-border-default'
+
+    if (props.isHovered && props.status !== StepStatus.COMPLETED) {
+        base = 'border-border-primary-brand-hover'
+    }
+
+    return base
+})
+
+const iconSize = computed(() => {
+    const variant = {
+        [StepIndicatorSize.XL]: '24',
+        [StepIndicatorSize.LG]: '20',
+        [StepIndicatorSize.MD]: '20',
+        [StepIndicatorSize.SM]: '16',
+        [StepIndicatorSize.XS]: '16',
+    }
+    return variant[props.size as StepIndicatorSize] || '24'
+})
+
+const stepNumberSizeClass = computed(() => {
+    const variant = {
+        [StepIndicatorSize.XL]: 'text-sm',
+        [StepIndicatorSize.LG]: 'text-xs',
+        [StepIndicatorSize.MD]: 'text-xs',
+        [StepIndicatorSize.SM]: 'text-xs',
+        [StepIndicatorSize.XS]: 'text-xs',
+    }
+    return variant[props.size as StepIndicatorSize] || 'text-sm'
+})
+
+const textColorClass = computed(() => {
+    const variant = {
+        [StepStatus.NONE]: 'text-text-default',
+        [StepStatus.INACTIVE]: 'text-text-neutral-inactive',
+        [StepStatus.CURRENT]: 'text-text-primary-brand-active',
+        [StepStatus.COMPLETED]: 'text-text-default',
+    }
+
+    let base = variant[props.status as StepStatus] || 'text-text-neutral-inactive'
+
+    if (props.isHovered && props.status !== StepStatus.COMPLETED) {
+        base = 'text-text-primary-brand-hover'
+    }
+
+    return base
+})
+
+const circleColorClass = computed(() => {
+    const variant = {
+        [StepStatus.NONE]: 'bg-background-neutral-bold',
+        [StepStatus.INACTIVE]: 'bg-transparent',
+        [StepStatus.CURRENT]: 'bg-primary-brand-active',
+        [StepStatus.COMPLETED]: 'bg-transparent',
+    }
+
+    let base = variant[props.status as StepStatus] || 'bg-transparent'
+
+    if (props.isHovered && props.status !== StepStatus.COMPLETED) {
+        base = 'bg-text-primary-brand-hover'
+    }
+
+    return base
+})
+
+const containerBackgroundClass = computed(() => {
+    const variant = {
+        [StepStatus.NONE]: 'bg-background-neutral-subtle',
+        [StepStatus.INACTIVE]: undefined,
+        [StepStatus.CURRENT]: undefined,
+        [StepStatus.COMPLETED]: 'bg-background-primary-brand-default',
+    }
+    return variant[props.status as StepStatus] || undefined
+})
+</script>

package/components/steppers/TabStepper.vue

@@ -0,0 +1,126 @@
+<template>
+    <div 
+        :class="[
+            'flex gap-4 flex-col sm:flex-row',
+            'border border-border-default',
+            'rounded',
+            'py-4 sm:py-0',
+            isFullWidth ? 'w-full' : 'w-fit',
+            hasDivider && justifySteps && 'justify-between'
+        ]"
+    >
+        <template v-for="(item, index) in stepItems" :key="index">
+            <Step
+                :title="item.title"
+                :description="item.description"
+                :type
+                :status="item.status"
+                :size="size"
+                :step="index + 1"
+                :stepIcon="item.icon"
+                :completedIcon
+                :isInteractive
+                :class="[
+                    '!py-0 sm:!py-4 px-6',
+                    justifySteps && 'grow',
+                ]"
+                @click="handleStepClick(index)"
+            />
+
+            <!-- Chevron divider -->
+            <div 
+                v-if="hasDivider && index < stepItems.length - 1"
+                class="lg:flex justify-center items-center hidden"
+            >
+                <svg 
+                    width="22" 
+                    height="74" 
+                    viewBox="0 0 22 74" 
+                    fill="none" 
+                    xmlns="http://www.w3.org/2000/svg"
+                    class="text-border-default"
+                >
+                    <path stroke="currentColor" d="M1 1L21 37L1 73" />
+                </svg>
+            </div>
+        </template>
+    </div>
+</template>
+
+<script setup lang="ts">
+// Imports
+const emit = defineEmits(['update:modelValue'])
+
+// Props
+const props = defineProps({
+    modelValue: {
+        type: Number as PropType<number>,
+        default: 1,
+    },
+    steps: {
+        type: Array as PropType<TabStep[]>,
+        default: () => [
+            {
+                title: 'Step 1',
+                description: 'Description one',
+            },
+            {
+                title: 'Step 2',
+                description: 'Description two',
+            },
+            {
+                title: 'Step 3',
+                description: 'Description three',
+            },
+        ],
+    },
+    type: String as PropType<StepIndicatorType>,
+    size: String as PropType<StepIndicatorSize>,
+    completedIcon: String as PropType<any>,
+    isInteractive: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    hasDivider: {
+        type: Boolean as PropType<boolean>,
+        default: true,
+    },
+    justifySteps: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    isFullWidth: {
+        type: Boolean as PropType<boolean>,
+        default: true,
+    }
+})
+
+// Computed step status
+const stepItems = computed(() => {
+    const activeIndex = props.modelValue > 0 ? props.modelValue - 1 : 0
+
+    return props.steps.map((step, index) => {
+        let status: StepStatus
+
+        if (index < activeIndex) {
+            status = StepStatus.COMPLETED
+        } else if (index === activeIndex) {
+            status = StepStatus.CURRENT
+        } else {
+            status = StepStatus.INACTIVE
+        }
+
+        return {
+            ...step,
+            status,
+        }
+    })
+})
+
+// Handlers
+const handleStepClick = (index: number) => {
+    if (props.isInteractive) {
+        emit('update:modelValue', index + 1)
+    }
+}
+</script>

package/components/steppers/vertical-stepper/VerticalStep.vue

@@ -0,0 +1,223 @@
+<template>
+    <div 
+        :class="[
+            'relative', 
+            'flex',
+            leftSpacingClass
+        ]"
+    >
+        <!-- Circle + vertical line -->
+        <div
+            v-if="hasStepper"
+            :class="[
+                'absolute',
+                'left-0',
+                'top-0',
+                'h-full',
+                'flex',
+                'flex-col',
+                'items-center',
+            ]"
+        >
+            <!-- Step circle -->
+            <StepIndicator 
+                :type="stepType"
+                :size="stepSize"
+                :status="stepStatus"
+                :stepIcon
+                :completedIcon="stepCompletedIcon"
+                :step
+                :isHovered
+                class="z-10"
+            />
+
+            <!-- Vertical line -->
+            <div
+                v-if="showLine && !isLast"
+                :class="[
+                    stepStatus === StepStatus.COMPLETED ? 'w-[2px] bg-background-primary-brand-default' : 'w-[1px] bg-border-default',
+                    'flex-1',
+                    'rounded-md',
+                    stepIndicatorGap,
+                ]"
+            />
+        </div>
+
+        <!-- Step content -->
+        <div
+            :class="[
+                'ml-2',
+                'w-full',
+                'flex',
+                'flex-col',
+                'gap-3',
+                !isLast && 'mb-7',
+            ]"
+        >
+            <!-- Step header -->
+            <div
+                :class="[
+                    'w-full',
+                    'flex',
+                    'flex-col',
+                    titleHeaderClass,
+                ]"
+            >
+                <div
+                    v-if="metaTitle"
+                    :class="[
+                        metaTitleSizeClass,
+                        'text-text-neutral-subtle',
+                    ]"
+                >
+                    {{ metaTitle }}
+                </div>
+                <h3
+                    :class="[
+                        titleSizeClass,
+                        'font-bold',
+                        'text-text-default',
+                    ]"
+                >
+                    {{ title }}
+                </h3>
+            </div>
+
+            <!-- Can use description or slot as content -->
+            <p
+                v-if="description"
+                :class="contentTextSizeClass"
+            >
+                {{ description }}
+            </p>
+
+            <div
+                v-else
+                :class="contentTextSizeClass"
+            >
+                <slot />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+// Props
+const props = defineProps({
+    title: {
+        type: String as PropType<string>,
+        default: 'Step title',
+    },
+    metaTitle: String as PropType<string>,
+    description: String as PropType<string>,
+    step: {
+        type: Number as PropType<number>,
+        default: 1,
+    },
+    stepType: String as PropType<StepIndicatorType>,
+    stepStatus: {
+        type: String as PropType<StepStatus>,
+        default: StepStatus.NONE,
+        validator: (value: StepStatus) => Object.values(StepStatus).includes(value),    
+    },
+    stepSize: {
+        type: String as PropType<StepIndicatorSize>,
+        default: StepIndicatorSize.SM,
+        validator: (value: StepIndicatorSize) => Object.values(StepIndicatorSize).includes(value),    
+    },
+    stepIcon: String as PropType<any>,
+    stepCompletedIcon: String as PropType<any>,
+    isLast: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    hasStepper: {
+        type: Boolean as PropType<boolean>,
+        default: true,
+    },
+    hasStepperGap: {
+        type: Boolean as PropType<boolean>,
+        default: true,
+    },
+    showLine: {
+        type: Boolean as PropType<boolean>,
+        default: true,
+    },
+    isHovered: Boolean as PropType<boolean>,
+})
+
+// Computed classes
+const titleHeaderClass = computed(() => {
+    // If using metaTitle, the fixing top margin is not necessary
+    if(props.metaTitle) return undefined
+
+    const variant = {
+        [StepIndicatorSize.XL]: 'mt-1.5',
+        [StepIndicatorSize.LG]: 'mt-1',
+        [StepIndicatorSize.MD]: undefined,
+        [StepIndicatorSize.SM]: undefined,
+        [StepIndicatorSize.XS]: undefined,
+    }
+    return variant[props.stepSize as StepIndicatorSize] || undefined
+})
+
+const titleSizeClass = computed(() => {
+    const variant = {
+        [StepIndicatorSize.XL]: 'text-lg',
+        [StepIndicatorSize.LG]: 'text-lg',
+        [StepIndicatorSize.MD]: 'text-lg',
+        [StepIndicatorSize.SM]: 'text-lg',
+        [StepIndicatorSize.XS]: 'text-base',
+    }
+    return variant[props.stepSize as StepIndicatorSize] || 'text-lg'
+})
+
+const metaTitleSizeClass = computed(() => {
+    const variant = {
+        [StepIndicatorSize.XL]: 'text-sm',
+        [StepIndicatorSize.LG]: 'text-sm',
+        [StepIndicatorSize.MD]: 'text-sm',
+        [StepIndicatorSize.SM]: 'text-sm',
+        [StepIndicatorSize.XS]: 'text-xs',
+    }
+    return variant[props.stepSize as StepIndicatorSize] || 'text-sm'
+})
+
+const contentTextSizeClass = computed(() => {
+    const variant = {
+        [StepIndicatorSize.XL]: 'text-base',
+        [StepIndicatorSize.LG]: 'text-base',
+        [StepIndicatorSize.MD]: 'text-sm',
+        [StepIndicatorSize.SM]: 'text-sm',
+        [StepIndicatorSize.XS]: 'text-sm',
+    }
+    return variant[props.stepSize as StepIndicatorSize] || 'text-sm'
+})
+
+const leftSpacingClass = computed(() => {
+    if(!props.hasStepper) return undefined
+
+    const variant = {
+        [StepIndicatorSize.XL]: 'pl-14',
+        [StepIndicatorSize.LG]: 'pl-12',
+        [StepIndicatorSize.MD]: 'pl-10',
+        [StepIndicatorSize.SM]: 'pl-8',
+        [StepIndicatorSize.XS]: 'pl-6',
+    }
+    return variant[props.stepSize as StepIndicatorSize] || 'pl-8'
+})
+
+const stepIndicatorGap = computed(() => {
+    // Only apply gap if it has to
+    if(!props.hasStepperGap) return undefined
+
+    const variant = {
+        [StepIndicatorSize.XL]: 'my-2',
+        [StepIndicatorSize.LG]: 'my-1.5',
+        [StepIndicatorSize.MD]: 'my-1',
+        [StepIndicatorSize.SM]: 'my-0.5',
+        [StepIndicatorSize.XS]: 'my-0.5',
+    }
+    return variant[props.stepSize as StepIndicatorSize] || 'my-0.5'
+})
+</script>

package/components/steppers/vertical-stepper/VerticalStepper.vue

@@ -0,0 +1,63 @@
+<template>
+    <div
+        :class="[
+            'relative',
+            'flex',
+            'flex-col',
+        ]"
+    >
+        <template v-if="items && items.length && !$slots.default">
+            <VerticalStep
+                v-for="(step, index) in items"
+                :key="`vertical-stepper-item-${index + 1}`"
+                :title="step.title"
+                :metaTitle="step.metaTitle"
+                :description="step.description"
+                :stepSize
+                :step="index + 1"
+                :stepIcon="step.stepIcon"
+                :stepType
+                :stepCompletedIcon
+                :stepStatus="step.stepStatus"
+                :isLast="index === items.length - 1"
+                :isHovered="isStepInteractive && hoveredIndex === index"
+                :hasStepper
+                :hasStepperGap
+                :showLine
+                @mouseenter="() => isStepInteractive && (hoveredIndex = index)"
+                @mouseleave="() => isStepInteractive && (hoveredIndex = null)"
+            />
+        </template>
+
+        <slot />
+    </div>
+</template>
+
+<script setup lang="ts">
+// Props
+defineProps({
+    items: Array as PropType<VerticalStepperItem[]>,
+    stepType: String as PropType<StepIndicatorType>,
+    stepSize: String as PropType<StepIndicatorSize>,
+    stepCompletedIcon: String as PropType<any>,
+    hasStepper: {
+        type: Boolean as PropType<boolean>,
+        default: true,
+    },
+    hasStepperGap: {
+        type: Boolean as PropType<boolean>,
+        default: true,
+    },
+    showLine: {
+        type: Boolean as PropType<boolean>,
+        default: true,
+    },
+    isStepInteractive: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+})
+
+// Status
+const hoveredIndex = ref<number | null>(null)
+</script>

package/components/tables/Table.vue

@@ -0,0 +1,26 @@
+<template>
+    <div 
+        :class="[
+            'flex',
+            'flex-col',
+            'gap-4',
+            'w-full',
+            hasOverflow && 'overflow-x-auto',
+            'pb-3',
+        ]"
+    >
+        <table class="table-auto w-full border-collapse">
+            <slot />
+        </table>
+    </div>
+</template>
+
+<script setup>
+// Props
+defineProps({
+    hasOverflow: {
+        type: Boolean,
+        default: true,
+    },
+})
+</script>

package/components/tables/TableBody.vue

@@ -0,0 +1,5 @@
+<template>
+    <tbody>
+        <slot />
+    </tbody>
+</template>