@imaginario27/air-ui-ds 1.2.3 → 1.2.5

package/components/badges/Badge.vue

@@ -1,13 +1,20 @@
 <template>
     <div
-        :class="[ 
-            'inline-flex items-center gap-2 font-semibold text-xs px-2 h-[24px] w-fit',
+        :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
+            showDot ? 'pl-3' : undefined,
         ]"
     >
         <!-- Dot -->
@@ -25,7 +32,14 @@
         />
 
         <!-- Text -->
-        <span :class="textClass">{{ text }}</span>
+        <span
+            :class="[
+                'pt-0.25',
+                textClass,
+            ]"
+        >
+            {{ text }}
+        </span>
 
         <!-- Close button -->
         <div 
@@ -195,7 +209,7 @@ const iconColorClass = computed(() => {
 })
 
 const dotColorClass = computed(() => {
-    if (props.styleType === BadgeStyle.FILLED) return "bg-text-on-filled"
+    if (props.styleType === BadgeStyle.FILLED) return "bg-text-neutral-on-filled"
 
     const dotVariant: Record<ColorAccent, string> = {
         [ColorAccent.NEUTRAL]: "bg-icon-neutral-subtle",

package/components/breadcrumbs/Breadcrumbs.vue

@@ -75,6 +75,10 @@ const props = defineProps({
         type: Boolean as PropType<boolean>,
         default: false,
     },
+    customRoute: {
+        type: String as PropType<string | undefined | null>,
+        default: null,
+    },
     homeIconClass: {
         type: String as PropType<string>,
         default: '',
@@ -96,9 +100,16 @@ const props = defineProps({
 // Route
 const route = useRoute()
 
-// Generate all breadcrumbs from route segments
+// Decide which path to use
+const basePath = computed(() => {
+    return props.customRoute ?? route.path
+})
+
+// Generate all breadcrumbs from selected path
 const allCrumbs = computed(() => {
-    const pathSegments = route.path.split('/').filter(Boolean)
+    const pathSegments = basePath.value
+        .split('/')
+        .filter(Boolean)
 
     return pathSegments.map((segment, index) => {
         return {

package/components/buttons/ActionButton.vue

@@ -32,7 +32,7 @@
                 />
             </div>
             
-            <span :class="['font-semibold', textSizeClass, textClass]">
+            <span :class="['font-semibold', textSizeClass, textClass, textTopSpacingClass]">
                 {{ loadingText }}
             </span>
         </template>
@@ -52,7 +52,7 @@
                 />
             </template>
 
-            <span :class="['font-semibold', textSizeClass, textClass]">
+            <span :class="['font-semibold', textSizeClass, textClass, textTopSpacingClass]">
                 {{ text }}
             </span>
 
@@ -330,14 +330,37 @@ const iconColorClass = computed(() => {
 })
 
 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',
+    let variant
+
+    if (props.iconPosition === IconPosition.LEFT) {
+        variant = {
+            [ButtonSize.XS]: 'pl-3 pr-4',
+            [ButtonSize.SM]: 'pl-3 pr-4',
+            [ButtonSize.MD]: 'pl-4 pr-5',
+            [ButtonSize.LG]: 'pl-4 pr-5',
+            [ButtonSize.XL]: 'pl-4 pr-5',
+            [ButtonSize.XXL]: 'pl-4 pr-5',
+        }
+    } else if (props.iconPosition === IconPosition.RIGHT) {
+        variant = {
+            [ButtonSize.XS]: 'pl-4 pr-3',
+            [ButtonSize.SM]: 'pl-4 pr-3',
+            [ButtonSize.MD]: 'pl-5 pr-4',
+            [ButtonSize.LG]: 'pl-5 pr-4',
+            [ButtonSize.XL]: 'pl-5 pr-4',
+            [ButtonSize.XXL]: 'pl-5 pr-4',
+        }
+    } else {
+        variant = {
+            [ButtonSize.XS]: 'px-3',
+            [ButtonSize.SM]: 'px-3',
+            [ButtonSize.MD]: 'px-4',
+            [ButtonSize.LG]: 'px-4',
+            [ButtonSize.XL]: 'px-4',
+            [ButtonSize.XXL]: 'px-4',
+        }
     }
+
     return variant[props.size as ButtonSize] || 'px-3'
 })
 
@@ -350,9 +373,17 @@ const gapClass = computed(() => {
         [ButtonSize.XL]: 'gap-2',
         [ButtonSize.XXL]: 'gap-2',
     }
+
     return variant[props.size as ButtonSize] || 'gap-2'
 })
 
+
+const textTopSpacingClass = computed(() => {
+    return props.size === ButtonSize.XXL
+        ? undefined
+        : 'pt-0.25'
+})
+
 // Props for the dynamic component
 const componentProps = computed(() => {
     if (props.actionType === ButtonActionType.LINK) {

package/components/drawers/Drawer.vue

@@ -0,0 +1,244 @@
+<template>
+    <!-- Overlay -->
+    <Transition
+        enter-active-class="transition-opacity duration-200 ease-out"
+        enter-from-class="opacity-0"
+        enter-to-class="opacity-100"
+        leave-active-class="transition-opacity duration-200 ease-in"
+        leave-from-class="opacity-100"
+        leave-to-class="opacity-0"
+    >
+        <div
+            v-if="isOpen && hasOverlay"
+            :class="[
+                'fixed',
+                'inset-0',
+                'bg-background-overlay',
+                'backdrop-blur-sm',
+                'z-[10000]',
+                overlayClass,
+            ]"
+            @click="closeOnOverlayClick ? close() : null"
+        />
+    </Transition>
+
+    <!-- Drawer -->
+    <Transition
+        :enter-active-class="transitionClasses.enterActive"
+        :enter-from-class="transitionClasses.enterFrom"
+        :enter-to-class="transitionClasses.enterTo"
+        :leave-active-class="transitionClasses.leaveActive"
+        :leave-from-class="transitionClasses.leaveFrom"
+        :leave-to-class="transitionClasses.leaveTo"
+    >
+        <aside
+            v-if="isOpen"
+            :class="[
+                'fixed',
+                'bg-background-container-surface',
+                'shadow-xl',
+                'z-[10000]',
+                'p-4',
+                'flex',
+                'flex-col',
+                'gap-4',
+                positionClasses,
+                sizeClasses,
+                drawerClass,
+                borderClass,
+            ]"
+            :style="drawerInlineStyle"
+        >
+            <!-- Header -->
+            <div
+                v-if="hasHeader"
+                :class="[
+                    'flex',
+                    'items-center',
+                    'justify-between',
+                ]"
+            >
+                <component
+                    :is="titleHeadingTag"
+                    class="text-lg font-semibold"
+                >
+                    {{ title }}
+                </component>
+
+                <ActionIconButton
+                    v-if="hasCloseButton"
+                    :icon="buttonCloseIcon"
+                    :styleType="ButtonStyleType.NEUTRAL_TRANSPARENT"
+                    @click="close"
+                />
+            </div>
+
+            <!-- Content -->
+            <div class="flex-1 overflow-y-auto">
+                <slot />
+            </div>
+        </aside>
+    </Transition>
+</template>
+
+<script setup lang="ts">
+// Props
+const props = defineProps({
+    modelValue: {
+        type: Boolean as PropType<boolean>,
+        required: true,
+    },
+    direction: {
+        type: String as PropType<Direction>,
+        default: Direction.RIGHT,
+        validator: (value: Direction) => Object.values(Direction).includes(value),
+    },
+    maxSize: {
+        type: Number as PropType<number>,
+        default: 320,
+    },
+    hasHeader: {
+        type: Boolean as PropType<boolean>,
+        default: true,
+    },
+    hasCloseButton: {
+        type: Boolean as PropType<boolean>,
+        default: true,
+    },
+    hasOverlay: {
+        type: Boolean as PropType<boolean>,
+        default: true,
+    },
+    closeOnOverlayClick: {
+        type: Boolean as PropType<boolean>,
+        default: true,
+    },
+    title: {
+        type: String as PropType<string>,
+        default: 'Drawer',
+    },
+    titleHeadingTag: {
+        type: String as PropType<'h2' | 'h3' | 'h4' | 'h5' | 'h6'>,
+        default: 'h2',
+    },
+    buttonCloseIcon: {
+        type: String as PropType<string>,
+        default: 'mdi:close',
+    },
+    hasBorder: {
+        type: Boolean as PropType<boolean>,
+        default: true,
+    },
+    drawerClass: String as PropType<string>,
+    overlayClass: String as PropType<string>,
+})
+
+// Emits
+const emit = defineEmits(['update:modelValue'])
+
+const isOpen = computed(() => props.modelValue)
+
+// Computed classes
+const positionClasses = computed(() => {
+    const map: Record<Direction, string[]> = {
+        [Direction.RIGHT]: ['top-0', 'right-0', 'h-full'],
+        [Direction.LEFT]: ['top-0', 'left-0', 'h-full'],
+        [Direction.TOP]: ['top-0', 'left-0', 'w-full'],
+        [Direction.BOTTOM]: ['bottom-0', 'left-0', 'w-full'],
+    }
+
+    return map[props.direction]
+})
+
+const sizeClasses = computed(() => {
+    if (props.direction === Direction.LEFT || props.direction === Direction.RIGHT) {
+        return ['w-full']
+    }
+
+    return []
+})
+
+const drawerInlineStyle = computed(() => {
+    if (props.direction === Direction.LEFT || props.direction === Direction.RIGHT) {
+        return { maxWidth: props.maxSize + 'px' }
+    }
+
+    return { maxHeight: props.maxSize + 'px' }
+})
+
+const transitionClasses = computed(() => {
+    const base = 'transform transition-transform duration-300 ease-out'
+    const leaveBase = 'transform transition-transform duration-300 ease-in'
+
+    const map: Record<
+        Direction,
+        {
+            enterActive: string
+            enterFrom: string
+            enterTo: string
+            leaveActive: string
+            leaveFrom: string
+            leaveTo: string
+        }
+    > = {
+        [Direction.RIGHT]: {
+            enterActive: base,
+            enterFrom: 'translate-x-full',
+            enterTo: 'translate-x-0',
+            leaveActive: leaveBase,
+            leaveFrom: 'translate-x-0',
+            leaveTo: 'translate-x-full',
+        },
+        [Direction.LEFT]: {
+            enterActive: base,
+            enterFrom: '-translate-x-full',
+            enterTo: 'translate-x-0',
+            leaveActive: leaveBase,
+            leaveFrom: 'translate-x-0',
+            leaveTo: '-translate-x-full',
+        },
+        [Direction.TOP]: {
+            enterActive: base,
+            enterFrom: '-translate-y-full',
+            enterTo: 'translate-y-0',
+            leaveActive: leaveBase,
+            leaveFrom: 'translate-y-0',
+            leaveTo: '-translate-y-full',
+        },
+        [Direction.BOTTOM]: {
+            enterActive: base,
+            enterFrom: 'translate-y-full',
+            enterTo: 'translate-y-0',
+            leaveActive: leaveBase,
+            leaveFrom: 'translate-y-0',
+            leaveTo: 'translate-y-full',
+        },
+    }
+
+    return map[props.direction]
+})
+
+const borderClass = computed(() => {
+    if (!props.hasBorder) return ''
+
+    const colorClass = 'border-border-default'
+
+    switch (props.direction) {
+        case Direction.RIGHT:
+            return `border-l ${colorClass}`
+        case Direction.LEFT:
+            return `border-r ${colorClass}`
+        case Direction.TOP:
+            return `border-b ${colorClass}`
+        case Direction.BOTTOM:
+            return `border-t ${colorClass}`
+        default:
+            return ''
+    }
+})
+
+// Handlers
+const close = () => {
+    emit('update:modelValue', false)
+}
+</script>

package/components/forms/fields/FileUploadField.vue

@@ -60,7 +60,10 @@
                         </p>
                     </template>
                     <template #button="{ fileInput }">
-                        <div class="w-full flex justify-center my-4">
+                        <div 
+                            class="w-full flex justify-center my-4"
+                            @click.stop
+                        >
                             <ActionButton
                                 :text="computedButtonText"
                                 :styleType="ButtonStyleType.PRIMARY_BRAND_SOFT"
@@ -201,25 +204,41 @@ const acceptedFileTypes = computed(() => {
 })
 
 const computedTitleText = computed(() => {
-    if (props.showPreview && props.previewImageUrl && selectedFiles.value.length === 0) {
-        return props.title || 'Upload a new file to replace current one'
+    const isReplacingExisting =
+        props.showPreview &&
+        props.previewImageUrl &&
+        selectedFiles.value.length === 0
+
+    if (isReplacingExisting) {
+        return props.title ?? 'Upload a new file to replace current one'
+    }
+
+    if (props.title) {
+        return props.title
     }
 
-    if (!props.title) {
-        if (props.multiple) return 'Drag & drop files here or click to upload'
-        else return 'Drag & drop a file here or click to upload'
-    } else return props.title
+    return props.multiple
+        ? 'Drag & drop files here or click to upload'
+        : 'Drag & drop a file here or click to upload'
 })
 
 const computedButtonText = computed(() => {
-    if (props.showPreview && props.previewImageUrl && selectedFiles.value.length === 0) {
-        return props.buttonText || 'Replace file'
+    const isReplacingExisting =
+        props.showPreview &&
+        props.previewImageUrl &&
+        selectedFiles.value.length === 0
+
+    if (isReplacingExisting) {
+        return props.buttonText ?? 'Replace file'
     }
 
-    if (!props.buttonText) {
-        if (props.multiple) return 'Upload files'
-        else return 'Upload a file'
-    } else return props.buttonText
+    if (props.buttonText) {
+        return props.buttonText
+    }
+
+    return props.multiple
+        ? 'Upload files'
+        : 'Upload a file'
 })
 
 const selectedFiles = computed({
@@ -230,10 +249,6 @@ const selectedFiles = computed({
         if (props.required) {
             runValidation()
         }
-
-        if (newFiles.length === 0) {
-            dropzoneKey.value++ // This forces Vue3Dropzone to re-render
-        }
     },
 })
 

package/components/tables/TableHeaderCell.vue

@@ -1,20 +1,16 @@
 <template>
     <th
+        :scope
         :class="[
-            'px-3',
-            'py-3.5',
-            'border-b',
-            'border-border-neutral-subtle',
-            'font-semibold',
-            'text-sm',
-            'whitespace-nowrap',
+            ...headerClass
         ]"
+        @click="scope === TableHeaderCellScope.ROW && handleNavigation()"
     >
         <div class="w-full flex items-center gap-2">
             <slot />
 
             <ActionIconButton 
-                v-if="sorteable"
+                v-if="sorteable && scope === TableHeaderCellScope.COL"
                 :size="ButtonSize.XS"
                 :icon="sortAsc ? 'mdi:arrow-up' : 'mdi:arrow-down'"
                 :styleType="sortKey === columnKey ? ButtonStyleType.NEUTRAL_FILLED : ButtonStyleType.NEUTRAL_OUTLINED"
@@ -25,7 +21,12 @@
 </template>
 <script setup lang="ts">
 // Props
-defineProps({
+const props = defineProps({
+    scope : {
+        type: String as PropType<TableHeaderCellScope>,
+        default: TableHeaderCellScope.COL,
+        validator: (value: TableHeaderCellScope) => Object.values(TableHeaderCellScope).includes(value),
+    },
     sorteable: {
         type: Boolean as PropType<boolean>,
         default: false,
@@ -46,5 +47,42 @@ defineProps({
         type: Function as PropType<() => void>,
         default: undefined,
     },
+    fitToContent: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    to: String as PropType<string>,
 })
+
+// Computed classes
+const headerClass = computed(() => {
+    const variants = {
+        [TableHeaderCellScope.COL]: [
+            'px-3',
+            'py-3.5',
+            'border-b',
+            'border-border-neutral-subtle',
+            'font-semibold',
+            'text-sm',
+            'whitespace-nowrap',
+        ],
+        [TableHeaderCellScope.ROW]: [
+            'px-3',
+            'py-3.5',
+            'border-t',
+            'border-border-neutral-subtle',
+            'text-sm',
+            props.fitToContent ? 'w-[1%]' : 'w-auto',
+            props.to ? 'hover:cursor-pointer' : undefined
+        ],
+    }
+    return variants[props.scope as TableHeaderCellScope] || 'rounded'
+})
+
+// Navigation handler
+const handleNavigation = () => {
+    if (props.to) {
+        navigateTo(props.to)
+    }
+}
 </script>

package/models/enums/directions.ts

@@ -0,0 +1,6 @@
+export enum Direction {
+    LEFT = 'left',
+    RIGHT = 'right',
+    TOP = 'top',
+    BOTTOM = 'bottom'
+}

package/models/enums/tables.ts

@@ -0,0 +1,4 @@
+export enum TableHeaderCellScope {
+    COL = 'col',
+    ROW = 'row',
+}

package/package.json

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