@imaginario27/air-ui-ds 1.0.0

package/components/images/QRCode.vue

@@ -0,0 +1,124 @@
+<template>
+    <div
+        :class="[
+            'relative flex items-center justify-center',
+            hasBorder && 'border border-border-default rounded-md p-2',
+            containerClass,
+        ]"
+        :style="{
+            width: `${size}px`,
+            height: `${size}px`,
+        }"
+    >
+        <Spinner v-if="isLoading" />
+
+        <QrcodeVue
+            v-else
+            :value="modelValue"
+            :level
+            :render-as="renderAs"
+            :background
+            :foreground
+            :gradient="useGradient"
+            :gradient-type="gradientType"
+            :gradient-start-color="gradientStartColor"
+            :gradient-end-color="gradientEndColor"
+            :image-settings="computedImageSettings"
+            :margin="imageMargin"
+            :size="qrSize"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+// Imports
+import QrcodeVue from 'qrcode.vue'
+import type { Level, RenderAs, GradientType, ImageSettings } from 'qrcode.vue'
+
+// Props
+const props = defineProps({
+    renderAs: {
+        type: String as PropType<QRRenderAs>,
+        default: QRRenderAs.CANVAS,
+        validator: (as: QRRenderAs) => Object.values(QRRenderAs).includes(as),
+    },
+    modelValue: {
+        type: String as PropType<string>,
+        required: true,
+    },
+    size: {
+        type: Number as PropType<number>,
+        default: 250,
+    },
+    level: {
+        type: String as PropType<QRLevel>,
+        default: QRLevel.M,
+        validator: (level: QRLevel) => Object.values(QRLevel).includes(level),
+    },
+    background: {
+        type: String as PropType<string>,
+        default: '#ffffff',
+    },
+    foreground: {
+        type: String as PropType<string>,
+        default: '#000000',
+    },
+    useGradient: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    gradientType: {
+        type: String as PropType<QRGradientType>,
+        default: QRGradientType.LINEAR,
+        validator: (type: QRGradientType) => Object.values(QRGradientType).includes(type),
+    },
+    gradientStartColor: {
+        type: String as PropType<string>,
+        default: '#ffffff',
+    },
+    gradientEndColor: {
+        type: String as PropType<string>,
+        default: '#000000',
+    },
+    imageMargin: {
+        type: Number as PropType<number>,
+        default: 0,
+    },
+    hasBorder: {
+        type: Boolean as PropType<boolean>,
+        default: true,
+    },
+    hasMiddleImage: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    imageSettings: Object as PropType<ImageSettings>,
+    isLoading: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    containerClass: String as PropType<string>,
+})
+
+// Computed
+const computedImageSettings = computed(() => {
+    if (!props.hasMiddleImage) return undefined
+
+    if (props.imageSettings) {
+        return props.imageSettings
+    } else {
+        return {
+            src: 'https://github.com/scopewu.png',
+            width: 30,
+            height: 30,
+            excavate: true,
+        }
+    }
+})
+
+const containerPaddingPx = 4 
+
+const qrSize = computed(() => {
+    return props.size - props.imageMargin * 2 - containerPaddingPx
+})
+</script>

package/components/layouts/ContainerWrapper.vue

@@ -0,0 +1,13 @@
+<template>
+    <div
+        :class="[
+            'flex',
+            'flex-col',
+            'gap-6',
+            'bg-white',
+            'py-4 md:py-8'
+        ]"
+    >
+        <slot></slot>
+    </div>
+</template>

package/components/layouts/ContentBody.vue

@@ -0,0 +1,30 @@
+<template>
+    <div 
+        :class="[ 
+            'flex flex-col pb-8 transition-all duration-300',
+            hasSidebar && (
+                isMobile
+                    ? isMobileSidebarOpen
+                        ? 'translate-x-[240px]'
+                        : 'translate-x-0'
+                    : 'ml-[240px]'
+            ),
+        ]"
+    >
+        <slot />
+    </div>
+</template>
+
+<script setup lang="ts">
+// Props
+defineProps({
+    hasSidebar: {
+        type: Boolean as PropType<boolean>,
+        default: false
+    }
+})
+
+// Composables
+const { isMobileSidebarOpen } = useMobileSidebar()
+const { isMobile } = useIsMobile()
+</script>

package/components/layouts/Grid.vue

@@ -0,0 +1,25 @@
+<template>
+    <div :class="gridClasses">
+        <slot />
+    </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+    cols: { // Desktop
+        type: Number as PropType<number>,
+        default: 3, 
+    },
+    tabletCols: {
+        type: Number as PropType<number>,
+        default: 2,
+    },
+    mobileCols: {
+        type: Number as PropType<number>,
+        default: 1,
+    },
+})
+
+// Computed classes
+const gridClasses = computed(() => getGridClasses(props.cols, props.tabletCols, props.mobileCols))
+</script>

package/components/layouts/Heading.vue

@@ -0,0 +1,159 @@
+<template>
+    <div
+        :class="[
+            'w-full flex flex-col',
+            alignmentClasses,
+            titleClass,
+        ]"
+    >
+        <!-- Overtitle -->
+        <p
+            v-if="overtitle"
+            :class="[
+                'font-semibold',
+                overtitleSizeClass,
+                'text-text-secondary-brand-default',
+                spaceOvertitleClass,
+            ]"
+        >
+            {{ overtitle }}
+        </p>
+
+        <!-- Dynamic title -->
+        <component
+            :is="headingTag"
+            :class="[titleSizeClass, 'font-semibold', 'text-text-default']"
+        >
+            {{ title }}
+        </component>
+
+        <!-- Description -->
+        <p
+            v-if="description"
+            :class="[descriptionSizeClass, 'text-text-neutral-subtle', spaceDescriptionClass]"
+        >
+            {{ description }}
+        </p>
+    </div>
+</template>
+
+<script setup lang="ts">
+// Props
+const props = defineProps({
+    overtitle: String as PropType<string>,
+    title: { 
+        type: String as PropType<string>, 
+        default: 'Heading title' 
+    },
+    description: String as PropType<string>,
+    align: {
+        type: String as PropType<Align>,
+        default: Align.LEFT,
+        validator: (value: string) => Object.values(Align).includes(value as Align),
+    },
+    size: {
+        type: String as PropType<HeadingSize>,
+        default: HeadingSize.LG,
+        validator: (value: string) =>
+            Object.values(HeadingSize).includes(value as HeadingSize),
+    },
+    spacing: {
+        type: String as PropType<HeadingSpacing>,
+        default: HeadingSpacing.NORMAL,
+        validator: (value: string) =>
+            Object.values(HeadingSpacing).includes(value as HeadingSpacing),
+    },
+    headingTag: {
+        type: [String, Number] as PropType<'h1' | 'h2' | 'h3'>,
+        default: 'h1',
+        validator: (value: string | number) => ['h1', 'h2', 'h3'].includes(value as string)
+    },
+    isMobileCentered: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    titleClass: String as PropType<string>,
+})
+
+// Computed classes
+const alignmentClasses = computed(() => {
+    const alignMap = {
+        [Align.LEFT]: 'lg:items-start lg:text-left',
+        [Align.CENTER]: 'lg:items-center lg:text-center',
+        [Align.RIGHT]: 'lg:items-end lg:text-right',
+    }
+
+    if (props.isMobileCentered) {
+        // Centered on mobile, and follow desktop alignment rules
+        return ['items-center text-center', alignMap[props.align]].join(' ')
+    }
+
+    // Normal mobile alignment follows main alignment
+    const baseAlignMap = {
+        [Align.LEFT]: 'items-start text-left',
+        [Align.CENTER]: 'items-center text-center',
+        [Align.RIGHT]: 'items-end text-right',
+    }
+
+    return [baseAlignMap[props.align], alignMap[props.align]].join(' ')
+})
+
+const titleSizeClass = computed(() => {
+    const map = {
+        [HeadingSize.SM]: 'text-2xl',
+        [HeadingSize.MD]: 'text-3xl md:text-4xl',
+        [HeadingSize.LG]: 'text-4xl md:text-5xl',
+        [HeadingSize.XL]: 'text-5xl md:text-7xl',
+    }
+    return map[props.size] || 'text-4xl md:text-5xl'
+})
+
+const overtitleSizeClass = computed(() => {
+    const map = {
+        [HeadingSize.SM]: 'text-sm',
+        [HeadingSize.MD]: 'text-base',
+        [HeadingSize.LG]: 'text-base',
+        [HeadingSize.XL]: 'text-base',
+    }
+    return map[props.size] || 'text-base'
+})
+
+const descriptionSizeClass = computed(() => {
+    const map = {
+        [HeadingSize.SM]: 'text-sm',
+        [HeadingSize.MD]: 'text-lg',
+        [HeadingSize.LG]: 'text-lg',
+        [HeadingSize.XL]: 'text-lg',
+    }
+    return map[props.size] || 'text-lg'
+})
+
+const spaceOvertitleClass = computed(() => {
+    const map = {
+        [HeadingSize.SM]: 'mb-1',
+        [HeadingSize.MD]: 'mb-3',
+        [HeadingSize.LG]: 'mb-3',
+        [HeadingSize.XL]: 'mb-3',
+    }
+    return map[props.size] || 'mb-3'
+})
+
+const spaceDescriptionClass = computed(() => {
+    const normal = {
+        [HeadingSize.SM]: 'mt-3',
+        [HeadingSize.MD]: 'mt-4',
+        [HeadingSize.LG]: 'mt-6',
+        [HeadingSize.XL]: 'mt-4',
+    }
+    const spaced = {
+        [HeadingSize.SM]: 'mt-4',
+        [HeadingSize.MD]: 'mt-5',
+        [HeadingSize.LG]: 'mt-9',
+        [HeadingSize.XL]: 'mt-5',
+    }
+
+    return props.spacing === HeadingSpacing.SPACED
+        ? spaced[props.size]
+        : normal[props.size] || 'mt-6'
+})
+</script>

package/components/layouts/MainContent.vue

@@ -0,0 +1,26 @@
+<template>
+    <main 
+        :class="[
+            'flex',
+            'flex-col',
+            'gap-3',
+            'w-full',
+        ]"
+        :style="!isMobile && `max-width: calc(100% - ${tocSidebarWidth}px)`"
+    >
+        <slot />
+    </main>
+</template>
+
+<script setup lang="ts">
+// Props
+defineProps({
+    tocSidebarWidth: {
+        type: Number as PropType<number>,
+        default: 240
+    }
+})
+
+// Composable
+const { isMobile } = useIsMobile()
+</script>

package/components/layouts/MaxWidthContainer.vue

@@ -0,0 +1,15 @@
+<template>
+    <div 
+        :class="[
+            'flex',
+            'flex-col',
+            'gap-3',
+            'items-center',
+            'justify-center',
+            'w-full',
+            'max-w-[1440px]',
+        ]"
+    >
+        <slot />
+    </div>
+</template>

package/components/layouts/Overtitle.vue

@@ -0,0 +1,25 @@
+<template>
+    <span 
+        :class="[
+            'text-text-primary-brand-default',
+            'text-sm',
+            'font-medium',
+            isUppercase && 'uppercase',
+        ]"
+    >
+        {{ title }}
+    </span>
+</template>
+<script setup lang="ts">
+// Props
+defineProps({
+    title: {
+        type: String as PropType<string>,
+        default: 'Overtitle'
+    },
+    isUppercase: {
+        type: Boolean as PropType<boolean>,
+        default: true,
+    }
+})
+</script>

package/components/layouts/headers/CompactHeader.vue

@@ -0,0 +1,181 @@
+<template>
+    <header 
+        :class="[
+            isSticky && 'sticky top-0 z-50'
+        ]"
+    >
+        <slot name="top-header" />
+        <!-- Main header wrapper -->
+        <div
+            :class="[
+                'flex',
+                'items-center',
+                'justify-between',
+                'gap-3',
+                'px-content-side-padding-mobile md:px-content-side-padding',
+                'py-4',
+                'bg-background-surface',
+                hasBorder && 'border-b border-border-default',
+                isSticky && 'sticky top-0 z-50',
+                hasGlassEffect && [
+                    'backdrop-blur-md',
+                    'bg-background-surface/30 dark:bg-background-surface/85',
+                ],
+                containerClass,
+            ]"
+        >
+            <!-- Logo -->
+            <div class="flex gap-4">
+                <slot name="header-logo" />
+            </div>
+
+            <!-- Navigation -->
+            <div class="flex gap-3 items-center xs:w-auto">
+                <!-- Horizontal menu -->
+                <NavMenu 
+                    v-if="navMenuItems.length"
+                    :menuItems="navMenuItems" 
+                    :detectActive="detectActiveMenuItem"
+                    :class="navMenuClass"
+                />
+
+                <!-- Header actions -->
+                <div 
+                    v-if="$slots['header-actions']"
+                    class="gap-3 items-center hidden lg:flex"
+                >
+                    <slot name="header-actions" />
+                </div>
+
+                <!-- User Menu -->
+                <DropdownMenu 
+                    v-if="userMenuItems.length && userFullname"
+                    class="min-w-[200px]"
+                >
+                    <template #activator="{ onClick }">
+                        <Avatar 
+                            :size="AvatarSize.MD"
+                            isInteractive
+                            :displayName="userFullname"
+                            :imgUrl="userAvatarUrl"
+                            @click="onClick"
+                        />
+                    </template>
+                    <template #items>
+                        <DropdownMenuItem 
+                            v-for="item in userMenuItems" :key="item.text"
+                            :text="item.text"
+                            :icon="item.icon"
+                            :type="item.type"
+                            :imgUrl="item.imgUrl"
+                            :alt="item.imgUrl"
+                            :to="item.to"
+                            :isExternal="item.isExternal"
+                            :actionType="item.actionType"
+                            @click="item.callback"
+                        />
+                    </template>
+                </DropdownMenu>
+
+                <!-- Mobile menu -->
+                <template v-if="isMobile && mobileMenuType === MobileNavigationMenuType.DROPDOWN">
+                    <DropdownMenu :class="navMobileMenuClass">
+                        <template #activator="{ onClick }">
+                            <ActionIconButton 
+                                icon="mdiMenu"
+                                class="lg:hidden shadow-sm"
+                                @click="onClick"
+                            />
+                        </template>
+                        <template #items>
+                            <DropdownMenuItem 
+                                v-for="item in navMenuItems" :key="item.text"
+                                :text="item.text"
+                                :to="item.to"
+                            />
+                            
+                            <DropdownMenuActions v-if="$slots['header-actions']">
+                                <slot name="header-actions" />
+                            </DropdownMenuActions>
+                        </template>
+                    </DropdownMenu>
+                </template>
+
+                <template v-else-if="mobileMenuType === MobileNavigationMenuType.SIDEBAR">
+                    <ActionIconButton 
+                        :icon="isMobileSidebarOpen ? 'mdiMenuOpen' : 'mdiMenuClose'"
+                        class="lg:hidden shadow-sm"
+                        @click="toggleMobileSidebar"
+                    />
+                </template>  
+
+            </div>
+        </div>
+        <slot name="bottom-header" />
+    </header>
+</template>
+
+<script setup lang="ts">
+// Props
+defineProps({
+    pageTitleType: {
+        type: String as PropType<PageTitleType>,
+        default: PageTitleType.SIMPLE,
+    },
+    navMenuItems: {
+        type: Array as PropType<MenuItem[]>,
+        default: () => [],
+    },
+    userFullname: String as PropType<string>,
+    userAvatarUrl: String as PropType<string>,
+    userMenuItems: {
+        type: Array as PropType<DropdownMenuItem[]>,
+        default: () => [],
+    },
+    mobileMenuType: {
+        type: String as PropType<MobileNavigationMenuType>,
+        default: MobileNavigationMenuType.DROPDOWN,
+        validator: (value: MobileNavigationMenuType) => Object.values(MobileNavigationMenuType).includes(value),
+    },
+    hasBorder: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    isSticky: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    hasGlassEffect: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    detectActiveMenuItem: {
+        type: Boolean,
+        default: true,
+    },
+    navMenuClass: {
+        type: String as PropType<string>,
+        default: 'hidden lg:flex'
+    },
+    navMobileMenuClass: {
+        type: String as PropType<string>,
+        default: 'lg:hidden min-w-[280px]'
+    },
+    containerClass: String as PropType<string>,
+})
+
+// Composables
+const { isMobileSidebarOpen, toggleMobileSidebar } = useMobileSidebar()
+const { isMobile } = useIsMobile()
+
+// Page title
+const route = useRoute()
+const currentPageTitle = computed<string>(() => 
+    (route.meta.title as string) ?? 'Page title'
+)
+
+// Dynamically set the page title
+useHead(() => ({
+    title: pageTitle(currentPageTitle.value, App.NAME),
+}))
+</script>