@imaginario27/air-ui-ds 1.0.0

package/components/tables/TableCell.vue

@@ -0,0 +1,34 @@
+<template>
+    <td 
+        :class="[
+            'px-3',
+            'py-3.5',
+            'border-t',
+            'border-border-neutral-subtle',
+            'text-sm',
+            fitToContent ? 'w-[1%]' : 'w-auto',
+            to ? 'hover:cursor-pointer' : undefined
+        ]"
+        @click="handleNavigation"
+    >
+        <slot />
+    </td>
+</template>
+
+<script setup lang="ts">
+// Props
+const props = defineProps({
+    fitToContent: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    to: String as PropType<string>,
+})
+
+// Navigation handler
+const handleNavigation = () => {
+    if (props.to) {
+        navigateTo(props.to)
+    }
+}
+</script>

package/components/tables/TableCellActions.vue

@@ -0,0 +1,7 @@
+<template>
+    <TableCell fitToContent>
+        <div class="flex gap-2">
+            <slot />
+        </div>
+    </TableCell>
+</template>

package/components/tables/TableHeader.vue

@@ -0,0 +1,5 @@
+<template>
+    <thead class="text-left text-text-neutral-subtle">
+        <slot />
+    </thead>
+</template>

package/components/tables/TableHeaderCell.vue

@@ -0,0 +1,15 @@
+<template>
+    <th
+        :class="[
+            'px-3',
+            'py-3.5',
+            'border-b',
+            'border-border-neutral-subtle',
+            'font-semibold',
+            'text-sm',
+            'whitespace-nowrap',
+        ]"
+    >
+        <slot />
+    </th>
+</template>

package/components/tables/TableRow.vue

@@ -0,0 +1,14 @@
+<template>
+    <tr :class="isHoverable && 'hover:bg-background-neutral-subtlest'">
+        <slot />
+    </tr>
+</template>
+<script setup lang="ts">
+// Props
+defineProps({
+    isHoverable: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+})
+</script>

package/components/tables/TableWrapper.vue

@@ -0,0 +1,12 @@
+<template>
+    <div 
+        :class="[
+            'flex', 
+            'flex-col', 
+            'gap-3', 
+            'w-full', 
+        ]"
+    >
+        <slot />
+    </div>
+</template>

package/components/tabs/Tab.vue

@@ -0,0 +1,145 @@
+<template>
+    <div 
+        :class="[
+            'flex',
+            'items-center',
+            'gap-2',
+            'px-3',
+            'hover:cursor-pointer',
+            'group',
+            styleClass
+        ]"
+    >
+        <MdiIcon 
+            v-if="decoration === TabDecoration.ICON"
+            size="20"
+            preserveAspectRatio="xMidYMid meet"
+            :class="[
+                'min-w-[20px]'
+            ]"
+            :icon
+        />
+
+        <template v-if="decoration === TabDecoration.IMAGE">
+            <img
+                v-if="imgUrl && isImageLoaded"
+                :src="imgUrl"
+                alt="Tab decoration"
+                class="w-[20px] h-[20px] rounded"
+                @load="handleImageLoad"
+                @error="handleImageError"
+            >
+            <img
+                v-else
+                :src="missingImagePlaceholder"
+                alt="Tab decoration"
+                class="w-[20px] h-[20px] rounded"
+            >
+        </template>
+
+        <span 
+            :class="[
+                'text-sm',
+                'font-semibold',
+            ]"
+        >
+            {{ text }}
+        </span>
+
+        <Badge 
+            v-if="computedBadgeValue"
+            :text="computedBadgeValue"
+            :styleType="active ? BadgeStyle.FILLED : BadgeStyle.FLAT"
+            :color="active ? ColorAccent.PRIMARY_BRAND : ColorAccent.NEUTRAL"
+            :shape="BadgeShape.PILL"
+            :class="[ 
+                !props.active && tabStyle !== TabStyle.PILL_MONOCRHOME && 'group-hover:bg-background-primary-brand-subtle-active',
+            ]"
+        />
+    </div>
+</template>
+<script setup lang="ts">
+// Imports
+import missingImagePlaceholder from "@/assets/images/placeholders/missing-image-placeholder.png"
+
+// Props
+const props = defineProps({
+    tabStyle: {
+        type: String as PropType<TabStyle>,
+        default: TabStyle.UNDERLINE,
+        validator: (value: TabStyle) => Object.values(TabStyle).includes(value),
+    },
+    text: {
+        type: String as PropType<string>,
+        default: 'Tab text',
+    },
+    decoration: {
+        type: String as PropType<TabDecoration>,
+        default: TabDecoration.NONE,
+        validator: (value: TabDecoration) => Object.values(TabDecoration).includes(value),
+    },
+    icon: {
+        type: String as PropType<any>,
+        default: 'mdiHelp',
+    },
+    imgUrl: String as PropType<string>,
+    active: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    badgeValue: [String, Number] as PropType<string | number>,
+})
+
+// States
+const isImageLoaded = ref(true)
+
+// Handlers for image load and error
+const handleImageLoad = () => {
+    isImageLoaded.value = true
+}
+
+const handleImageError = () => {
+    isImageLoaded.value = false
+}
+
+// Computed Tailwind Classes
+const styleClass = computed(() => {
+    const styleVariants = {
+        [TabStyle.UNDERLINE]: [
+            'min-h-[52px]', 
+            'border-b-2', 
+            props.active ? 
+                'border-b-border-primary-brand-default text-text-primary-brand-active' 
+                : 'border-b-border-inactive text-text-neutral-inactive, hover:text-text-primary-brand-hover hover:border-b-border-primary-brand-hover',  
+        ],
+        [TabStyle.PILL]: [
+            'min-h-[40px]',
+            'rounded', 
+            props.active ? 
+                'text-text-primary-brand-active bg-background-primary-brand-subtle-active' 
+                : 'text-text-neutral-inactive hover:text-text-primary-brand-hover',  
+        ],
+        [TabStyle.PILL_MONOCRHOME]: [
+            'min-h-[40px]',
+            'rounded', 
+            props.active ? 
+                'text-text-neutral-on-monochrome-active-bg bg-background-neutral-active' 
+                : 'text-text-neutral-inactive hover:text-text-neutral-on-monochrome-hover-bg',  
+        ],
+    }
+    return styleVariants[props.tabStyle as TabStyle] || [
+        'min-h-[52px]', 
+        'border-b-2', 
+        props.active ? 
+            'border-b-border-primary-brand-default text-text-primary-brand-active' 
+            : 'border-b-border-inactive text-text-neutral-inactive, hover:text-text-primary-brand-hover hover:border-b-border-primary-brand-hover',  
+    ]
+})
+
+// Computed functions
+const computedBadgeValue = computed(() => {
+    if (props.badgeValue === null || props.badgeValue === undefined) return null
+
+    return typeof props.badgeValue === 'number' ? props.badgeValue.toString() : props.badgeValue
+})
+</script>

package/components/tabs/TabBar.vue

@@ -0,0 +1,64 @@
+<template>
+    <div class="flex flex-wrap">
+        <Tab 
+            v-for="(tab, index) in tabs" 
+            :key="index" 
+            :text="tab.text" 
+            :icon="tab.icon"
+            :imgUrl="tab.imgUrl" 
+            :badgeValue="tab.badgeValue"
+            :active="index === activeIndex" 
+            :tabStyle
+            :decoration
+            @click="handleTabClick(index, tab.to)"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+// Props
+const props = defineProps({
+    tabs: {
+        type: Array as PropType<TabItem[]>, 
+        default: () => [
+            { 
+                text: 'Tab 1',
+            },
+            { 
+                text: 'Tab 2',
+            },
+            { 
+                text: 'Tab 3',
+            },
+        ],
+    },
+    modelValue: {
+        type: Number as PropType<number>,
+        default: 0,
+    },
+    tabStyle: String as PropType<TabStyle>,
+    decoration: String as PropType<TabDecoration>,
+})
+
+// Local
+const activeIndex = ref(props.modelValue)
+
+// Emit Event
+const emit = defineEmits(['update:modelValue'])
+
+// Methods
+const handleTabClick = (index: number, to?: string) => {
+    if(to) { // If the to is provided, navigate to the route
+        navigateTo(to)
+        return
+    }
+
+    activeIndex.value = index
+    emit('update:modelValue', index)
+}
+
+// Watchers
+watch(() => props.modelValue, (newVal) => {
+    activeIndex.value = newVal
+})
+</script>

package/components/tabs/TabContent.vue

@@ -0,0 +1,5 @@
+<template>
+    <div class="flex flex-col gap-6 w-full">
+        <slot />
+    </div>
+</template>

package/components/tabs/TabsContainer.vue

@@ -0,0 +1,5 @@
+<template>
+    <div class="flex flex-col gap-6 w-full">
+        <slot />
+    </div>
+</template>

package/components/transitions/HorizontalExpansionTransition.vue

@@ -0,0 +1,12 @@
+<template>
+    <transition
+        enter-active-class="transition-all duration-300 ease-out"
+        enter-from-class="translate-x-full opacity-0"
+        enter-to-class="translate-x-0 opacity-100"
+        leave-active-class="transition-all duration-300 ease-in"
+        leave-from-class="translate-x-0 opacity-100"
+        leave-to-class="translate-x-full opacity-0"
+    >
+        <slot></slot>
+    </transition>
+</template>

package/components/transitions/VerticalExpansionTransition.vue

@@ -0,0 +1,14 @@
+<template>
+    <transition
+        enter-active-class="transition-all duration-300 ease-in-out"
+        enter-from-class="max-h-0 opacity-0"
+        enter-to-class="max-h-96 opacity-100"
+        leave-active-class="transition-all duration-300 ease-in-out"
+        leave-from-class="max-h-96 opacity-100"
+        leave-to-class="max-h-0 opacity-0"
+    >
+        <div class="overflow-hidden">
+            <slot></slot>
+        </div>
+    </transition>
+</template>

package/components/users/Author.vue

@@ -0,0 +1,113 @@
+<template>
+    <div 
+        :class="[
+            'flex',
+            spacingClass,
+            !role && 'items-center',
+            layoutOrientation === Orientation.VERTICAL && 'flex-col',
+            detailsOrientation === Orientation.HORIZONTAL &&  'items-center',
+            layoutOrientation === Orientation.VERTICAL && verticalLayoutAlign === Align.CENTER && 'items-center text-center'
+        ]"
+    >
+        <Avatar 
+            :displayName="name"
+            :size
+            :shape
+            :imgUrl
+        />
+
+        <div
+            :class="[
+                'flex',
+                detailsOrientation === Orientation.VERTICAL ? 'flex-col gap-1' : 'gap-2', 
+            ]"
+        >
+            <span 
+                :class="[
+                    'font-semibold',
+                    nameClass
+                ]"
+            >
+                {{ name }}
+            </span>
+            <span 
+                v-if="detailsOrientation == Orientation.HORIZONTAL"
+                class="text-border-default"
+            >
+                |
+            </span>
+            <span 
+                v-if="role" 
+                :class="[
+                    'text-text-neutral-subtle',
+                    detailsOrientation === Orientation.VERTICAL ? roleClass : nameClass,
+                ]"
+            >
+                {{ role }}
+            </span>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+// Props
+const props = defineProps({
+    name: {
+        type: String as PropType<string>,
+        default: 'John Doe'
+    },
+    role: String as PropType<string>,
+    imgUrl: String as PropType<string>,
+    layoutOrientation: {
+        type: String as PropType<Orientation>,
+        default: Orientation.HORIZONTAL,
+        validator: (value: Orientation) => Object.values(Orientation).includes(value)
+    },
+    detailsOrientation: {
+        type: String as PropType<Orientation>,
+        default: Orientation.VERTICAL,
+        validator: (value: Orientation) => Object.values(Orientation).includes(value)
+    },
+    verticalLayoutAlign: {
+        type: String as PropType<Align.LEFT | Align.CENTER>,
+        default: Align.LEFT,
+        validator: (value: Align) => [Align.LEFT, Align.CENTER].includes(value)
+    },
+    shape: {
+        type: String as PropType<AvatarShape>,
+        default: AvatarShape.CIRCLE,
+        validator: (value: AvatarShape) => Object.values(AvatarShape).includes(value),
+    },
+    size: {
+        type: String as PropType<AvatarSize.XS | AvatarSize.SM | AvatarSize.MD>,
+        default: AvatarSize.SM,
+        validator: (value: AvatarSize) => [AvatarSize.XS, AvatarSize.SM, AvatarSize.MD].includes(value),
+    },
+})
+
+const spacingClass = computed(() => {
+    const variants = {
+        [AvatarSize.XS]: 'gap-2',
+        [AvatarSize.SM]: 'gap-2',
+        [AvatarSize.MD]: 'gap-3',
+    }
+    return variants[props.size as AvatarSize.XS | AvatarSize.SM | AvatarSize.MD] || 'gap-2'
+})
+
+const nameClass = computed(() => {
+    const variants = {
+        [AvatarSize.XS]: 'text-xs',
+        [AvatarSize.SM]: 'text-sm',
+        [AvatarSize.MD]: 'text-base',
+    }
+    return variants[props.size as AvatarSize.XS | AvatarSize.SM | AvatarSize.MD] || 'text-sm'
+})
+
+const roleClass = computed(() => {
+    const variants = {
+        [AvatarSize.XS]: 'text-xs',
+        [AvatarSize.SM]: 'text-xs',
+        [AvatarSize.MD]: 'text-sm',
+    }
+    return variants[props.size as AvatarSize.XS | AvatarSize.SM | AvatarSize.MD] || 'text-xs'
+})
+</script>

package/components/users/User.vue

@@ -0,0 +1,53 @@
+<template>
+    <div
+        :class="[
+            'inline-flex items-center font-semibold',
+            isInteractive && 'group hover:cursor-pointer',
+            containerClass
+        ]"
+    >
+        <Avatar
+            :displayName
+            :imgUrl
+            :size="avatarSize ? avatarSize : size"
+            :shape
+            :class="`${isInteractive && 'group-hover:border-2 group-hover:border-border-primary-brand-default'}`"
+        />
+        <span>{{ trimText(displayName, 20) }}</span>
+    </div>
+</template>
+<script setup lang="ts">
+// Props
+const props = defineProps({
+    displayName: {
+        type: String as PropType<string>,
+        default: 'Test username',
+    },
+    shape: {
+        type: String as PropType<AvatarShape>,
+        default: AvatarShape.CIRCLE,
+        validator: (value: AvatarShape) => Object.values(AvatarShape).includes(value),
+    },
+    size: {
+        type: String as PropType<AvatarSize.XS | AvatarSize.SM | AvatarSize.MD>,
+        default: AvatarSize.XS,
+        validator: (value: AvatarSize) => [AvatarSize.XS, AvatarSize.SM, AvatarSize.MD].includes(value),
+    },
+    avatarSize: String as PropType<AvatarSize.XS | AvatarSize.SM | AvatarSize.MD>,
+    isInteractive: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    imgUrl: String as PropType<string>,
+})
+
+// Computed classes
+const containerClass = computed(() => {
+    const variants = {
+        [AvatarSize.XS]: 'text-xs gap-2',
+        [AvatarSize.SM]: 'text-sm gap-2',
+        [AvatarSize.MD]: 'gap-3',
+    }
+    return variants[props.size as AvatarSize.XS | AvatarSize.SM | AvatarSize.MD] || 'gap-2'
+})
+</script>

package/composables/useAccordion.ts

@@ -0,0 +1,12 @@
+export const useAccordion = () => {
+    const isOpen = ref(false)
+
+    const toggle = () => {
+        isOpen.value = !isOpen.value
+    }
+
+    return {
+        isOpen,
+        toggle
+    }
+}

package/composables/useDarkMode.ts

@@ -0,0 +1,9 @@
+export const useDarkMode = () => {
+    const isDark = useDark()
+    const toggleDark = useToggle(isDark)
+
+    return {
+        isDark,
+        toggleDark
+    }
+}

package/composables/useDropdownMenu.ts

@@ -0,0 +1,25 @@
+
+export const useDropdownMenu = () => {
+    const isDropdownMenuOpen = ref(false)
+
+    const toggleDropdownMenu = () => {
+        isDropdownMenuOpen.value = !isDropdownMenuOpen.value
+    }
+
+    const closeDropdownMenu = () => {
+        isDropdownMenuOpen.value = false
+    }
+
+    const closeDropdownOnClickOutside = (elementRef: Ref<HTMLElement | null>) => {
+        useClickOutside(elementRef, () => {
+            closeDropdownMenu()
+        })
+    }
+
+    return {
+        isDropdownMenuOpen,
+        toggleDropdownMenu,
+        closeDropdownOnClickOutside,
+        closeDropdownMenu
+    }
+}