@imaginario27/air-ui-ds 1.0.16 → 1.0.18

package/components/layouts/Error.vue

@@ -0,0 +1,238 @@
+<template>
+    <div
+        :class="[
+            'w-full',
+            isFullScreen && 'h-screen',
+            'px-content-side-padding',
+            'py-[10vw] md:py-[20vw]',
+            'flex',
+            orientation === Orientation.VERTICAL ? 'flex-col' : 'flex-col md:flex-row',
+            'gap-9',
+            'items-center',
+            'justify-center',
+        ]"
+    >
+        <!-- Slot for images, illustrations or other visual elements -->
+        <slot name="visual-left" />
+
+        <!-- Body -->
+        <div
+            :class="[
+                'w-full',
+                'gap-9',
+                'flex',
+                'flex-col',
+                contentAlignmentClass,
+            ]"
+        >
+            <slot name="visual-top" />
+
+            <ContainedIcon
+                v-if="!$slots['visual-top'] && showIcon"
+                :color="ColorAccent.DANGER"
+                :icon
+                :size="IconContainerSize.XXL"
+            />
+
+            <div 
+                v-if="!$slots['description']"
+                :class="[
+                    'flex',
+                    'flex-col',
+                    'gap-4',
+                    contentAlignmentClass,
+                    'w-full',
+                    'max-w-[600px]',
+                ]"
+            >
+                <!-- 
+                    Overtitle will only display if useGenericErrorTitle is true. 
+                    Otherwise, it will not be displayed because the error code is shown as the title 
+                -->
+                <Heading
+                    :title="errorTitle"
+                    :overtitle="useGenericErrorTitle ? error.statusCode.toString() : ''"
+                    :align="alignContent"
+                    :size="HeadingSize.MD"
+                    :isMobileCentered
+                />
+
+                <p 
+                    :class="[
+                        'text-text-neutral-subtle',
+                        'font-semibold',
+                        textAlignmentClass,
+                        'leading-6',
+                    ]"
+                >
+                    {{
+                        error.statusCode === 404
+                            ? pageNotFoundMessage
+                            : error.message ?? genericErrorMessage
+                    }}
+                </p>
+            </div>
+
+            <slot name="description" />
+
+            <!-- Actions -->
+            <div 
+                :class="[
+                    'w-full', 
+                    'flex', 
+                    'gap-3', 
+                    actionsAlignmentClass, 
+                    'flex-col', 
+                    'md:flex-row',
+                    'mb-4 md:mb-10' // Visual fix to push content a bit up
+                ]"
+            >
+                <ActionButton
+                    v-if="!$slots['actions']"
+                    :actionType="ButtonActionType.LINK"
+                    :text="backToHomeText"
+                    class="w-full md:w-auto"
+                    :icon="backToHomeIcon"
+                    :iconPosition="IconPosition.LEFT"
+                    :to="homeRoute"
+                />
+
+                <slot name="actions" />
+            </div>
+        </div>
+
+        <!-- Slot for images, illustrations or other visual elements -->
+        <slot name="visual-right" />
+    </div>
+</template>
+<script setup lang="ts">
+// Imports
+import type { NuxtError } from "#app"
+
+// Props
+const props = defineProps({
+    error: {
+        type: Object as PropType<NuxtError>,
+        required: true,
+    },
+    showIcon: {
+        type: Boolean as PropType<boolean>,
+        default: true,
+    },
+    icon: {
+        type: String as PropType<any>,
+        default: "mdiAlertCircleOutline",
+    },
+    pageNotFoundTitle: {
+        type: String as PropType<string>,
+        default: "Page not found",
+    },
+    pageNotFoundMessage: {
+        type: String as PropType<string>,
+        default: "The page you are looking for does not exist or may have been moved. Please try with another page.",
+    },
+    useGenericErrorTitle: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    genericErrorTitle: {
+        type: String as PropType<string>,
+        default: "Oops! Something went wrong",
+    },
+    genericErrorMessage: {
+        type: String as PropType<string>,
+        default: "Something went wrong on our end. Please try again later.",
+    },
+    backToHomeText: {
+        type: String as PropType<string>,
+        default: "Back to home page",
+    },
+    backToHomeIcon: {
+        type: String as PropType<string>,
+        default: "mdiHomeOutline",
+    },
+    homeRoute: {
+        type: String as PropType<string>,
+        default: "/",
+    },
+    isFullScreen: {
+        type: Boolean as PropType<boolean>,
+        default: true,
+    },
+    orientation: {
+        type: String as PropType<Orientation>,
+        default: Orientation.HORIZONTAL,
+        validator: (value: Orientation) => Object.values(Orientation).includes(value),
+    },
+    alignContent: {
+        type: String as PropType<Align>,
+        default: Align.LEFT,
+        validator: (value: Align) => Object.values(Align).includes(value),
+    },
+    isMobileCentered: {
+        type: Boolean as PropType<boolean>,
+        default: true,
+    },
+})
+
+// Computed
+const errorTitle = computed(() => {
+    if (props.useGenericErrorTitle) {
+        return props.genericErrorTitle
+    }
+
+    if (props.error.statusCode === 404 || props.error.statusCode === 400) {
+        return props.pageNotFoundTitle
+    }
+
+    return String(props.error.statusCode)
+})
+
+const pageTitleText = computed(() => errorTitle.value)
+
+// Dynamically set the page title with a watcher (only for error page)
+watchEffect(() => {
+    document.title = pageTitle(pageTitleText.value, App.NAME)
+})
+
+// Computed classes
+const contentAlignmentClass = computed(() => {
+    const base = {
+        [Align.LEFT]: 'md:items-start',
+        [Align.CENTER]: 'md:items-center',
+        [Align.RIGHT]: 'md:items-end',
+    }
+
+    return [
+        props.isMobileCentered ? 'items-center' : '',
+        base[props.alignContent as Align] || 'md:items-center',
+    ].join(' ').trim()
+})
+
+const actionsAlignmentClass = computed(() => {
+    const base = {
+        [Align.LEFT]: 'md:items-start md:justify-start',
+        [Align.CENTER]: 'md:items-center md:justify-center',
+        [Align.RIGHT]: 'md:items-end md:justify-end',
+    }
+
+    return [
+        props.isMobileCentered ? 'items-center justify-center' : '',
+        base[props.alignContent as Align] || 'md:items-center md:justify-center',
+    ].join(' ').trim()
+})
+
+const textAlignmentClass = computed(() => {
+    const base = {
+        [Align.LEFT]: 'md:text-left',
+        [Align.CENTER]: 'md:text-center',
+        [Align.RIGHT]: 'md:text-right',
+    }
+
+    return [
+        props.isMobileCentered ? 'text-center' : '',
+        base[props.alignContent as Align] || 'md:text-center',
+    ].join(' ').trim()
+})
+
+</script>

package/components/layouts/Footer.vue

@@ -0,0 +1,110 @@
+<template>
+    <footer 
+        :class="[
+            'w-full',
+            'bg-background-surface',
+            'py-section-xs',
+            hasSidePadding && 'px-content-side-padding-mobile md:px-content-side-padding',
+        ]"
+    >
+        <MaxWidthContainer
+            :class="[!hasContentMaxWidth && '!max-w-full']"
+        >
+            <template v-if="!$slots['default']">
+                <div 
+                    :class="[
+                        'w-full',
+                        'flex',
+                        'flex-col',
+                        isMobileCentered &&'items-center text-center',
+                        'gap-10',
+                        'lg:flex-row',
+                        'lg:items-start',
+                        'lg:text-left',
+                        'lg:justify-between',
+                    ]"
+                >
+                    <span class="text-sm text-text-neutral-subtle">
+                        {{ credits }}
+                    </span>
+
+                    <nav v-if="menuItems.length">
+                        <ul class="flex flex-col lg:flex-row gap-5">
+                            <li 
+                                v-for="(item, index) in menuItems" 
+                                :key="index"
+                            >
+                                <NuxtLink
+                                    :to="item.to"
+                                    :class="[
+                                        'text-sm',
+                                        'hover:text-text-primary-brand-hover',
+                                        'transition-colors',
+                                    ]"
+                                >
+                                    {{ item.text }}
+                                </NuxtLink>
+                            </li>
+                        </ul>
+                    </nav>
+
+                    <div v-if="socialNetworks.length" class="flex gap-5">
+                        <a 
+                            v-for="(network, index) in socialNetworks" 
+                            :key="index"
+                            :href="network.link"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            :class="[
+                                'text-text-neutral-subtle',
+                                'hover:text-text-primary-brand-hover',
+                                'transition-colors',
+                            ]"
+                            :aria-label="network.name"
+                        >
+                            <img 
+                                :src="network.icon"
+                                :alt="`${network.name} icon`"
+                                width="20"
+                                height="20"
+                                class="min-w-[20px] min-h-[20px]"
+                            />
+                        </a>
+                    </div>  
+                </div>
+            </template>
+            <template v-else>
+                <slot />    
+            </template>
+        </MaxWidthContainer>
+    </footer>
+</template>
+<script setup lang="ts">
+// Props
+defineProps({
+    credits: {
+        type: String as PropType<string>,
+        default: '© <year> <your-company>. All rights reserved.',
+    },
+    menuItems: {
+        type: Array as PropType<MenuItem[]>,
+        default: () => [],
+    },
+    socialNetworks: {
+        type: Array as PropType<SocialNetwork[]>,
+        default: () => [],
+    },
+    hasContentMaxWidth: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    hasSidePadding: {
+        type: Boolean as PropType<boolean>,
+        default: true,
+    },
+    isMobileCentered: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+})
+</script>

package/components/layouts/Heading.vue

@@ -3,26 +3,32 @@
         :class="[
             'w-full flex flex-col',
             alignmentClasses,
-            titleClass,
         ]"
     >
         <!-- Overtitle -->
-        <p
+        <span
             v-if="overtitle"
             :class="[
                 'font-semibold',
                 overtitleSizeClass,
                 'text-text-secondary-brand-default',
                 spaceOvertitleClass,
+                isOverTitleUppercase && 'uppercase',
+                overtitleClass,
             ]"
         >
             {{ overtitle }}
-        </p>
+        </span>
 
         <!-- Dynamic title -->
         <component
             :is="headingTag"
-            :class="[titleSizeClass, 'font-semibold', 'text-text-default']"
+            :class="[
+                titleSizeClass, 
+                'font-semibold', 
+                'text-text-default',
+                titleClass,
+            ]"
         >
             {{ title }}
         </component>
@@ -30,7 +36,12 @@
         <!-- Description -->
         <p
             v-if="description"
-            :class="[descriptionSizeClass, 'text-text-neutral-subtle', spaceDescriptionClass]"
+            :class="[
+                descriptionSizeClass, 
+                'text-text-neutral-subtle', 
+                spaceDescriptionClass,
+                descriptionClass,
+            ]"
         >
             {{ description }}
         </p>
@@ -41,6 +52,10 @@
 // Props
 const props = defineProps({
     overtitle: String as PropType<string>,
+    isOverTitleUppercase: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
     title: { 
         type: String as PropType<string>, 
         default: 'Heading title' 
@@ -64,23 +79,25 @@ const props = defineProps({
             Object.values(HeadingSpacing).includes(value as HeadingSpacing),
     },
     headingTag: {
-        type: [String, Number] as PropType<'h1' | 'h2' | 'h3'>,
+        type: [String, Number] as PropType<'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'>,
         default: 'h1',
-        validator: (value: string | number) => ['h1', 'h2', 'h3'].includes(value as string)
+        validator: (value: string | number) => ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(value as string)
     },
     isMobileCentered: {
         type: Boolean as PropType<boolean>,
         default: false,
     },
+    overtitleClass: String as PropType<string>,
     titleClass: String as PropType<string>,
+    descriptionClass: 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',
+        [Align.LEFT]: 'md:items-start md:text-left',
+        [Align.CENTER]: 'md:items-center md:text-center',
+        [Align.RIGHT]: 'md:items-end md:text-right',
     }
 
     if (props.isMobileCentered) {
@@ -100,6 +117,8 @@ const alignmentClasses = computed(() => {
 
 const titleSizeClass = computed(() => {
     const map = {
+        [HeadingSize.XXS]: 'text-lg',
+        [HeadingSize.XS]: 'text-xl',
         [HeadingSize.SM]: 'text-2xl',
         [HeadingSize.MD]: 'text-3xl md:text-4xl',
         [HeadingSize.LG]: 'text-4xl md:text-5xl',
@@ -110,6 +129,8 @@ const titleSizeClass = computed(() => {
 
 const overtitleSizeClass = computed(() => {
     const map = {
+        [HeadingSize.XXS]: 'text-xs',
+        [HeadingSize.XS]: 'text-sm',
         [HeadingSize.SM]: 'text-sm',
         [HeadingSize.MD]: 'text-base',
         [HeadingSize.LG]: 'text-base',
@@ -120,6 +141,8 @@ const overtitleSizeClass = computed(() => {
 
 const descriptionSizeClass = computed(() => {
     const map = {
+        [HeadingSize.XXS]: 'text-sm',
+        [HeadingSize.XS]: 'text-sm',
         [HeadingSize.SM]: 'text-sm',
         [HeadingSize.MD]: 'text-lg',
         [HeadingSize.LG]: 'text-lg',
@@ -130,6 +153,8 @@ const descriptionSizeClass = computed(() => {
 
 const spaceOvertitleClass = computed(() => {
     const map = {
+        [HeadingSize.XXS]: 'mb-1',
+        [HeadingSize.XS]: 'mb-1',
         [HeadingSize.SM]: 'mb-1',
         [HeadingSize.MD]: 'mb-3',
         [HeadingSize.LG]: 'mb-3',
@@ -140,12 +165,16 @@ const spaceOvertitleClass = computed(() => {
 
 const spaceDescriptionClass = computed(() => {
     const normal = {
+        [HeadingSize.XXS]: 'mt-3',
+        [HeadingSize.XS]: 'mt-3',
         [HeadingSize.SM]: 'mt-3',
         [HeadingSize.MD]: 'mt-4',
         [HeadingSize.LG]: 'mt-6',
         [HeadingSize.XL]: 'mt-4',
     }
     const spaced = {
+        [HeadingSize.XXS]: 'mt-4',
+        [HeadingSize.XS]: 'mt-4',
         [HeadingSize.SM]: 'mt-4',
         [HeadingSize.MD]: 'mt-5',
         [HeadingSize.LG]: 'mt-9',

package/components/layouts/Overtitle.vue

@@ -1,7 +1,7 @@
 <template>
     <span 
         :class="[
-            'text-text-primary-brand-default',
+            colorClass,
             'text-sm',
             'font-medium',
             isUppercase && 'uppercase',
@@ -12,7 +12,7 @@
 </template>
 <script setup lang="ts">
 // Props
-defineProps({
+const props = defineProps({
     title: {
         type: String as PropType<string>,
         default: 'Overtitle'
@@ -20,6 +20,32 @@ defineProps({
     isUppercase: {
         type: Boolean as PropType<boolean>,
         default: true,
+    },
+    color: {
+        type: String as PropType<
+            ColorAccent.PRIMARY_BRAND
+            | ColorAccent.SECONDARY_BRAND
+            | ColorAccent.NEUTRAL
+        >,
+        default: ColorAccent.SECONDARY_BRAND,
+        validator: (value: unknown): value is ColorAccent => {
+            return typeof value === 'string' &&
+                [
+                    ColorAccent.PRIMARY_BRAND,
+                    ColorAccent.SECONDARY_BRAND,
+                    ColorAccent.NEUTRAL,
+                ].includes(value as ColorAccent)
+        },
+    },
+})
+
+const colorClass = computed(() => {
+    const variant: Partial<Record<ColorAccent, string>> = {
+        [ColorAccent.NEUTRAL]: 'text-text-default',
+        [ColorAccent.PRIMARY_BRAND]: 'text-text-primary-brand-default',
+        [ColorAccent.SECONDARY_BRAND]: 'text-text-secondary-brand-default',
     }
+
+    return variant[props.color as ColorAccent] || 'text-text-secondary-brand-default'
 })
 </script>

package/components/layouts/headers/ContentPageHeader.vue

@@ -67,7 +67,6 @@ defineProps({
         default: true,
     },
     description: String as PropType<string>,
-    
     hasGoBackLink: {
         type: Boolean as PropType<boolean>,
         default: false,

package/eslint.config.mjs

@@ -1,15 +1,15 @@
-// https://eslint.nuxt.com/packages/module
-
-// @ts-check
-import withNuxt from './.nuxt/eslint.config.mjs'
-
-export default withNuxt({
-    rules: {
-        'vue/attribute-hyphenation': 'off',
-        'vue/no-multiple-template-root': 'off',
-        'vue/require-default-prop': 'off',
-        'vue/multi-word-component-names': 'off',
-        '@typescript-eslint/no-explicit-any': 'warn',
-        '@typescript-eslint/ban-ts-comment': 'error'
-    }
-})
+// https://eslint.nuxt.com/packages/module
+
+// @ts-check
+import withNuxt from './.nuxt/eslint.config.mjs'
+
+export default withNuxt({
+    rules: {
+        'vue/attribute-hyphenation': 'off',
+        'vue/no-multiple-template-root': 'off',
+        'vue/require-default-prop': 'off',
+        'vue/multi-word-component-names': 'off',
+        '@typescript-eslint/no-explicit-any': 'warn',
+        '@typescript-eslint/ban-ts-comment': 'error'
+    }
+})

package/models/enums/headings.ts

@@ -1,4 +1,6 @@
 export enum HeadingSize {
+    XXS = 'xxs',
+    XS = 'xs',
     SM = 'sm',
     MD = 'md',
     LG = 'lg',

package/models/types/navigation.ts

@@ -3,9 +3,10 @@ export interface MenuItem {
     to: string
 }
 
-export interface FooterMenuItem {
-    text: string
-    to: string
+export interface SocialNetwork {
+    name: string
+    link: string
+    icon: any
 }
 
 export interface SidebarMenuItem {

package/models/types/pdfExportTable.ts

@@ -1,6 +1,6 @@
-export interface HeaderConfig {
-    field: string
-    callback?: (value: any) => string
-}
-
+export interface HeaderConfig {
+    field: string
+    callback?: (value: any) => string
+}
+
 export type Headers = Record<string, string | HeaderConfig>