@imaginario27/air-ui-ds 1.0.0

package/components/layouts/headers/PageHeader.vue

@@ -0,0 +1,102 @@
+<template>
+    <div 
+        :class="[
+            'flex',
+            'flex-col',
+            'w-full',
+            'gap-3',
+            hasSidePadding && 'px-content-side-padding-mobile md:px-content-side-padding',
+            'pt-12',
+            'pb-8',
+            'border-b border-border-default'
+        ]"
+    >
+        <NavLink 
+            v-if="hasGoBackLink"
+            :text="goBackText"
+            :iconPosition="IconPosition.LEFT"
+            :to="goBackLink"
+            icon="mdiKeyboardBackspace"
+            class="mb-2"
+        />
+
+        <Breadcrumbs 
+            v-if="type === PageTitleType.WITH_BREADCRUMBS"
+        />
+
+        <Overtitle 
+            v-if="type === PageTitleType.WITH_OVERTITLE"
+            :title="overtitle ? overtitle : pageOvertitle.toString()"
+            :class="overtitleClass"
+            :isUppercase="isOverTitleUppercase"
+        />
+
+        <h1 
+            :class="[
+                'text-3xl md:text-4xl', 
+                'font-semibold',
+                'leading-tight',
+                'text-text-default',
+            ]"
+        >
+            {{ title ? title : pageTitle }}
+        </h1>
+
+        <p 
+            v-if="pageDescription || description"
+            class="text-text-neutral-subtle text-lg max-w-[800px]"
+        >
+            {{ description ? description : pageDescription }}
+        </p>
+    </div>
+</template>
+<script setup lang="ts">
+// Props
+defineProps({
+    type: {
+        type: String as PropType<PageTitleType>,
+        default: PageTitleType.SIMPLE,
+        validator: (value: PageTitleType) => Object.values(PageTitleType).includes(value),
+    },
+    title: String as PropType<string>,
+    overtitle: String as PropType<string>,
+    overtitleClass: String as PropType<string>,
+    description: String as PropType<string>,
+    isOverTitleUppercase: Boolean as PropType<boolean>,
+    hasSidePadding: {
+        type: Boolean as PropType<boolean>,
+        default: true,
+    },
+    hasGoBackLink: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    goBackText: {
+        type: String as PropType<string>,
+        default: 'Go back',
+    },
+    goBackLink: {
+        type: String as PropType<string>,
+        default: '',
+    },
+})
+
+// Page title
+const route = useRoute()
+const pageTitle = ref(route.meta.title || 'Page title')
+const pageOvertitle = ref(route.meta.overtitle || 'Overtitle')
+const pageDescription = ref(route.meta.description)
+
+// Watchers
+watch(() => route.meta.title, (newTitle) => {
+    pageTitle.value = newTitle || 'Page title'
+})
+
+watch(() => route.meta.overtitle, (newOvertitle) => {
+    pageOvertitle.value = newOvertitle || 'Overtitle'
+})
+
+watch(() => route.meta.description, (newDescription) => {
+    pageDescription.value = newDescription || 'Page description'
+})
+</script>

package/components/layouts/headers/WebAppHeader.vue

@@ -0,0 +1,54 @@
+<template>
+    <header 
+        :class="[
+            'flex',
+            'items-center',
+            'justify-between',
+            'pt-12',
+            'pb-8',
+            'gap-3',
+            'px-content-side-padding-mobile md:px-content-side-padding',
+        ]"
+    >
+        <div class="flex gap-4">
+            <ActionIconButton 
+                :icon="isMobileSidebarOpen ? 'mdiMenuOpen' : 'mdiMenuClose'"
+                class="lg:hidden shadow-sm"
+                @click="toggleMobileSidebar"
+            />
+            <PageTitle class="hidden lg:flex" :type="pageTitleType"/>
+        </div>
+        <div class="flex gap-3 items-center xs:w-auto">
+            <slot name="header-actions" />
+        </div>
+    </header>
+
+</template>
+
+<script setup lang="ts">
+// Imports
+import { useRoute } from 'vue-router'
+
+// Props
+defineProps({
+    pageTitleType: {
+        type: String as PropType<PageTitleType>,
+        default: PageTitleType.SIMPLE
+    }
+})
+
+// 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),
+}))
+
+// Composables
+const { isMobileSidebarOpen, toggleMobileSidebar } = useMobileSidebar()
+
+</script>

package/components/layouts/section/Section.vue

@@ -0,0 +1,90 @@
+<template>
+    <section
+        :id="id || undefined"
+        :class="[
+            'flex',
+            'flex-col',
+            'gap-3',
+            'items-center',
+            'justify-center',
+            'w-full',
+            hasSidePadding && 'px-content-side-padding-mobile md:px-content-side-padding',
+            spacingClass,
+            topSpacing && topSpacingClass,
+            bottomSpacing && bottomSpacingClass,
+            isDark && 'dark'
+        ]"
+    >
+        <template v-if="hasContentMaxWidth">
+            <MaxWidthContainer>
+                <slot />
+            </MaxWidthContainer>
+        </template>
+        <template v-else>
+            <slot />
+        </template>
+    </section>
+</template>
+<script setup lang="ts">
+// Props
+const props = defineProps({
+    id: String as PropType<string | undefined>,
+    hasSidePadding: {
+        type: Boolean as PropType<boolean>,
+        default: true,
+    },
+    hasContentMaxWidth: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    spacing: {
+        type: String as PropType<SectionSpacing>,
+        default: SectionSpacing.XS,
+        validator: (value: SectionSpacing) => Object.values(SectionSpacing).includes(value),
+    },
+    topSpacing: String as PropType<SectionSpacing>,
+    bottomSpacing: String as PropType<SectionSpacing>,
+    isDark: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+})
+
+// Computed
+const spacingClass = computed(() => {
+    const variant = {
+        [SectionSpacing.NONE]: 'py-0',
+        [SectionSpacing.XS]: 'py-section-xs',
+        [SectionSpacing.SM]: 'py-section-sm',
+        [SectionSpacing.MD]: 'py-section-md',
+        [SectionSpacing.LG]: 'py-section-lg',
+        [SectionSpacing.XL]: 'py-section-xl',
+    }
+    return variant[props.spacing as SectionSpacing] || 'py-section-xs'
+})
+
+const topSpacingClass = computed(() => {
+    const variant = {
+        [SectionSpacing.NONE]: 'py-0',
+        [SectionSpacing.XS]: 'pt-section-xs',
+        [SectionSpacing.SM]: 'pt-section-sm',
+        [SectionSpacing.MD]: 'pt-section-md',
+        [SectionSpacing.LG]: 'pt-section-lg',
+        [SectionSpacing.XL]: 'pt-section-xl',
+    }
+    return variant[props.topSpacing as SectionSpacing] 
+})
+
+const bottomSpacingClass = computed(() => {
+    const variant = {
+        [SectionSpacing.NONE]: '!pb-0',
+        [SectionSpacing.XS]: '!pb-section-xs',
+        [SectionSpacing.SM]: '!pb-section-sm',
+        [SectionSpacing.MD]: '!pb-section-md',
+        [SectionSpacing.LG]: 'pb-section-lg',
+        [SectionSpacing.XL]: 'pb-section-xl',
+    }
+    return variant[props.bottomSpacing as SectionSpacing] 
+})
+
+</script>

package/components/layouts/section/SectionBody.vue

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

package/components/layouts/section/SectionHeader.vue

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

package/components/layouts/section/SectionTitle.vue

@@ -0,0 +1,13 @@
+<template>
+    <h2 class="text-xl font-semibold">
+        {{ title }}
+    </h2>
+</template>
+<script setup lang="ts">
+defineProps({
+    title: {
+        type: String as PropType<string>,
+        default: 'Title',
+    },
+})
+</script>

package/components/lists/List.vue

@@ -0,0 +1,69 @@
+<template>
+    <ul 
+        :class="[
+            'w-full flex flex-col gap-2',
+            hasSeparator && 'gap-0 divide-y divide-border-neutral-subtle border-y border-border-neutral-subtle',
+            layout === ListLayout.GRID && gridClasses,
+        ]"
+    >
+        <template v-if="items.length && !$slots.default">
+            <ListItem 
+                v-for="(item, index) in items" :key="index" 
+                :icon="listItemIcon"
+                :iconClass="listItemIconClass"
+                :size="listItemSize"
+                :spaced="spaced"
+            >
+                {{ item }}
+            </ListItem>
+        </template>
+        <slot v-else-if="$slots.default" />
+    </ul>
+</template>
+<script setup lang="ts">
+// Props
+const props = defineProps({
+    items: {
+        type: Array as PropType<any>,
+        default: () => ["Item 1", "Item 2", "Item 3"],
+    },
+    hasSeparator: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    layout: {
+        type: String as PropType<ListLayout>,
+        default: ListLayout.LIST,
+        validator: (value: ListLayout) => Object.values(ListLayout).includes(value),
+    },
+    cols: { // Desktop
+        type: Number as PropType<number>,
+        default: 2, 
+    },
+    tabletCols: {
+        type: Number as PropType<number>,
+        default: 2,
+    },
+    mobileCols: {
+        type: Number as PropType<number>,
+        default: 1,
+    },
+    listItemIcon: String as PropType<any>,
+    listItemIconClass: {
+        type: String as PropType<string>,
+        default: 'text-icon-secondary-brand-default'
+    },
+    listItemSize: {
+        type: String as PropType<ListItemSize>,
+        default: ListItemSize.SM, 
+        validator: (value: ListItemSize) => Object.values(ListItemSize).includes(value),
+    },
+    spaced: {
+        type: Boolean as PropType<boolean>,
+        default: false
+    },
+})
+
+// Computed classes
+const gridClasses = computed(() => getGridClasses(props.cols, props.tabletCols, props.mobileCols))
+</script>

package/components/lists/ListItem.vue

@@ -0,0 +1,58 @@
+<template>
+    <li 
+        :class="[
+            'flex gap-2',
+            spaced && 'py-4'
+        ]"
+    >
+        <span v-if="icon">
+            <MdiIcon 
+                :class="iconClass"
+                :icon="icon"
+                preserveAspectRatio="xMidYMid meet"
+                :size="iconSize"
+            />
+        </span>
+        <span :class="[contentSizeClass, 'w-full']">
+            <slot />
+        </span>
+    </li>
+</template>
+<script setup lang="ts">
+// Props
+const props = defineProps({
+    icon: String as PropType<any>,
+    iconClass: {
+        type: String as PropType<string>,
+        default: 'text-icon-secondary-brand-default'
+    },
+    spaced: {
+        type: Boolean as PropType<boolean>,
+        default: false
+    },
+    size: {
+        type: String as PropType<ListItemSize>,
+        default: ListItemSize.SM, 
+        validator: (value: ListItemSize) => Object.values(ListItemSize).includes(value),
+    },
+})
+
+// Computed
+const iconSize = computed(() => {
+    const sizeVariant = {
+        [ListItemSize.XS]: '16',
+        [ListItemSize.SM]: '20',
+        [ListItemSize.MD]: '24',
+    }
+    return sizeVariant[props.size as ListItemSize] || '20'
+})
+
+const contentSizeClass = computed(() => {
+    const sizeVariant = {
+        [ListItemSize.XS]: 'text-xs',
+        [ListItemSize.SM]: 'text-sm',
+        [ListItemSize.MD]: 'text-md',
+    }
+    return sizeVariant[props.size as ListItemSize] || 'text-sm'
+})
+</script>

package/components/loaders/Loading.vue

@@ -0,0 +1,83 @@
+<template>
+    <div 
+        v-if="isLoading" 
+        class="flex flex-col items-center gap-4"
+    >
+        <Spinner :class="[spinnerSizeClass, spinnerClass]" />
+        <span>{{ animatedText }}</span>
+    </div>
+</template>
+<script setup lang="ts">
+
+// Props
+const props = defineProps({
+    isLoading: {
+        type: Boolean as PropType<boolean>,
+        default: true,
+    },
+    text: {
+        type: String as PropType<string>,
+        default: "Loading",
+    },
+    spinnerSize: {
+        type: String as PropType<LoadingSpinnerSize>,
+        default: LoadingSpinnerSize.LG,
+        validator: (value: LoadingSpinnerSize) => Object.values(LoadingSpinnerSize).includes(value),
+    },
+    spinnerClass: String as PropType<string>,
+})
+
+// Computed classes
+const spinnerSizeClass = computed(() => {
+    const variants = {
+        [LoadingSpinnerSize.XS]: 'w-[24px] h-[24px] border-2',
+        [LoadingSpinnerSize.SM]: 'w-[28px] h-[28px] border-2',
+        [LoadingSpinnerSize.MD]: 'w-[32px] h-[32px] border-3',
+        [LoadingSpinnerSize.LG]: 'w-[36px] h-[36px] border-3',
+        [LoadingSpinnerSize.XL]: 'w-[40px] h-[40px] border-3',
+        [LoadingSpinnerSize.XXL]: 'w-[44px] h-[44px] border-4',
+        [LoadingSpinnerSize.XXXL]: 'w-[48px] h-[48px] border-4',
+    }
+    return variants[props.spinnerSize as LoadingSpinnerSize] || 'w-[36px] h-[36px] border-2'
+})
+
+
+// Reactive state for animated ellipsis
+const animatedText = ref(props.text)
+let intervalId: ReturnType<typeof setInterval> | null = null
+
+// Methods
+const startAnimation = () => {
+    if (intervalId !== null) return // Prevent multiple intervals
+
+    let dotCount = 0
+    intervalId = setInterval(() => {
+        dotCount = (dotCount + 1) % 4 // Cycles through 0, 1, 2, 3
+        animatedText.value = props.text + '.'.repeat(dotCount)
+    }, 500) // Update every 500ms
+}
+
+const stopAnimation = () => {
+    if (intervalId !== null) {
+        clearInterval(intervalId)
+        intervalId = null
+        animatedText.value = props.text // Reset to base text
+    }
+}
+
+// Watch 
+watch(
+    () => props.isLoading,
+    (newLoading) => {
+        if (newLoading) {
+            startAnimation()
+        } else {
+            stopAnimation()
+        }
+    },
+    { immediate: true }
+)
+
+// Clear interval on unmount
+onUnmounted(() => stopAnimation())
+</script>