@imaginario27/air-ui-ds 1.0.0

package/components/modals/ModalDialog.vue

@@ -0,0 +1,122 @@
+<template>
+    <Teleport to="body">
+        <div
+            v-if="modelValue"
+            :id
+            class="fixed inset-0 z-[9999] bg-background-overlay backdrop-blur-sm overflow-y-auto"
+            
+        >
+            <div 
+                class="modal-container min-h-full flex w-full items-center justify-center p-4"
+                @click.self="closeModalOnClickOutside"
+            >
+                <div
+                    :class="[
+                        'bg-background-surface rounded-lg shadow-xl',
+                        'relative w-full my-8',
+                        'overflow-visible',
+                        cardClasses,
+                    ]"
+                >
+                    <ActionIconButton
+                        v-if="hasCornerCloseButton"
+                        :styleType="ButtonStyleType.NEUTRAL_TRANSPARENT"
+                        :size="ButtonSize.MD"
+                        icon="mdiClose"
+                        class="absolute top-4 right-4 z-10"
+                        @click="closeModal"
+                    />
+
+                    <div class="p-4 md:p-6">
+                        <slot />
+                    </div>
+                </div>
+            </div>
+        </div>
+    </Teleport>
+</template>
+
+<script setup lang="ts">
+// Props
+const props = defineProps({
+    modelValue: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    cardClasses: {
+        type: String as PropType<string>,
+        default: 'max-w-[600px]',
+    },
+    closeOnClickOutside: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    hasCornerCloseButton: {
+        type: Boolean as PropType<boolean>,
+        default: true,
+    },
+    id: String as PropType<string>,
+})
+
+// Emits
+const emit = defineEmits(['update:modelValue', 'close'])
+
+// Watch for `modelValue` changes
+watch(
+    () => props.modelValue,
+    newValue => {
+        if (newValue) {
+            addEscListener() // Add Esc key listener
+        } else {
+            removeEscListener() // Remove Esc key listener
+        }
+    }
+)
+
+// Handlers
+const closeModal = () => {
+    emit('update:modelValue', false)
+    emit('close') // Useful for triggering actions on close
+}
+
+const closeModalOnClickOutside = () => {
+    if (props.closeOnClickOutside) {
+        closeModal()
+    }
+}
+
+const handleEscKey = (event: KeyboardEvent) => {
+    if (props.closeOnClickOutside && event.key === 'Escape') {
+        closeModal()
+    }
+}
+
+// Event listeners
+const addEscListener = () => {
+    window.addEventListener('keydown', handleEscKey)
+}
+
+const removeEscListener = () => {
+    window.removeEventListener('keydown', handleEscKey)
+}
+
+// Cleanup on component unmount
+onUnmounted(() => {
+    removeEscListener()
+})
+
+// Locks and unlocks the background scroll while modal is open
+useHead(() => {
+    return props.modelValue
+        ? {
+              bodyAttrs: {
+                  class: 'modal-open',
+              },
+          }
+        : {
+              bodyAttrs: {
+                  class: '',
+              },
+          }
+})
+</script>

package/components/modals/ModalHeaderGroup.vue

@@ -0,0 +1,19 @@
+<template>
+    <div 
+        :class="[
+            'flex flex-col gap-2', 
+            centered && 'text-center'
+        ]"
+    >
+        <slot />
+    </div>
+</template>
+<script setup lang="ts">
+// Props
+defineProps({
+    centered: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+})
+</script>

package/components/modals/ModalHeadings.vue

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

package/components/modals/ModalSubtitle.vue

@@ -0,0 +1,14 @@
+<template>
+    <h3 class="font-semibold text-text-neutral-subtle">
+        {{ title }}
+    </h3>
+</template>
+<script setup lang="ts">
+// Props
+defineProps({
+    title: {
+        type: String as PropType<string>,
+        default: 'Modal subtitle',
+    },
+})
+</script>

package/components/modals/ModalTitle.vue

@@ -0,0 +1,14 @@
+<template>
+    <h2 class="font-bold">
+        {{ title }}
+    </h2>
+</template>
+<script setup lang="ts">
+// Props
+defineProps({
+    title: {
+        type: String as PropType<string>,
+        default: 'Modal title',
+    },
+})
+</script>

package/components/modals/SuccessModalDialog.vue

@@ -0,0 +1,90 @@
+<template>
+    <ModalDialog 
+        :modelValue 
+        :closeOnClickOutside
+        :hasCornerCloseButton
+        :cardClasses
+        @update:modelValue="updateModelValue"
+    >
+        <ModalContent class="!gap-6 items-center">   
+            <ContainedIcon
+                :color="ColorAccent.SUCCESS"
+                :size="IconContainerSize.XL"
+                :icon
+            />
+            
+            <ModalHeaderGroup centered>
+                <ModalTitle :title />
+                <ModalDescription v-if="description">
+                    {{ description }}
+                </ModalDescription>
+            </ModalHeaderGroup>
+
+            <slot />
+           
+            <ModalActions v-if="showModalActions">
+                <ActionButton 
+                    :styleType="ButtonStyleType.PRIMARY_BRAND_FILLED"
+                    :text="buttonText"
+                    class="w-full"
+                    @click="handleClose"
+                />
+            </ModalActions>
+        </ModalContent>
+    </ModalDialog>
+</template>
+
+<script setup lang="ts">
+// Props
+defineProps({
+    modelValue: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    icon: {
+        type: String as PropType<any>,
+        default: 'mdiCheckBold',
+    },
+    title: {
+        type: String as PropType<string>,
+        default: 'Modal title',
+    },
+    description: String as PropType<string>,
+    buttonText: {
+        type: String as PropType<string>,
+        default: 'Close',
+    },
+    cardClasses: {
+        type: String as PropType<string>,
+        default: 'max-w-[400px]',
+    },
+    closeOnClickOutside: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    hasCornerCloseButton: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    showModalActions: {
+        type: Boolean as PropType<boolean>,
+        default: true,
+    },
+})
+
+// Emits
+const emit = defineEmits(['update:modelValue', 'close'])
+
+// Handlers
+const updateModelValue = (value: boolean) => {
+    emit('update:modelValue', value)
+}
+
+const handleClose = () => {
+    // Emit the model update to close the modal
+    updateModelValue(false)
+
+    // Emit the custom "close" event for additional actions
+    emit('close')
+}
+</script>

package/components/modules/AppLogo.vue

@@ -0,0 +1,46 @@
+<template>
+     <NuxtLink 
+        v-if="redirectToHome"
+        :to
+    >
+        <SVGImage 
+            :src
+            :alt="ariaLabel"
+            :class="logoClass"
+        />
+    </NuxtLink>
+    <div 
+        v-else
+        :class="logoClass" 
+        :aria-label="ariaLabel"
+        v-html="src" 
+    />
+</template>
+<script setup lang="ts">
+// Imports
+import logo from '@/public/images/logo/air-ui-logo-color.svg?raw'
+
+// Props
+defineProps({
+    src: {
+        type: String as PropType<string>,
+        default: logo
+    },
+    ariaLabel: {
+        type: String as PropType<string>,
+        default: 'App logo'
+    },
+    redirectToHome: {
+        type: Boolean as PropType<boolean>,
+        default: true
+    },
+    to: {
+        type: String as PropType<string>,
+        default: '/',
+    },
+    logoClass: {
+        type: String as PropType<string>,
+        default: 'max-w-[118px]',
+    }
+})
+</script>

package/components/modules/SVGImage.vue

@@ -0,0 +1,44 @@
+<template>
+    <div
+        class="responsive-svg w-full"
+        :aria-label="alt"
+        :class="colorClass"
+        v-html="processedSvg"
+    />
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+    src: {
+        type: String as PropType<string>,
+        required: true
+    },
+    alt: {
+        type: String as PropType<string>,
+        default: 'Vector image'
+    },
+    color: {
+        type: String as PropType<string>,
+        default: ''
+    },
+})
+
+// Dynamically process the SVG
+const processedSvg = computed(() => {
+    let svg = props.src
+        .replace(/width="\d+"/g, '')
+        .replace(/height="\d+"/g, '')
+
+    // Only replace fills/strokes if a color was provided
+    if (props.color) {
+        svg = svg
+            .replace(/fill="(.*?)"/g, 'fill="currentColor"')
+            .replace(/stroke="(.*?)"/g, 'stroke="currentColor"')
+    }
+
+    return svg
+})
+
+// Apply color class if defined
+const colorClass = computed(() => props.color || '')
+</script>

package/components/navigation/links/NavLink.vue

@@ -0,0 +1,112 @@
+<template>
+    <NuxtLink
+        :to="!disabled ? to : undefined"
+        :target="isExternal ? '_blank' : '_self'"
+        :rel="isExternal ? 'noopener noreferrer' : undefined" 
+        :external="isExternal"   
+        class="inline-flex items-center justify-center w-fit"
+    >
+        <div 
+            :class="[
+            'group flex items-center justify-center',
+            'text-text-primary-brand-default',
+            !props.disabled ? 'hover:text-text-primary-brand-hover' : 'opacity-disabled cursor-not-allowed',
+            gapClass,
+        ]">
+            <!-- Left icon -->
+            <MdiIcon
+                v-if="iconPosition === IconPosition.LEFT"
+                :icon="icon"
+                :size="iconSizeClass"
+                preserveAspectRatio="xMidYMid meet"
+            />
+            <span :class="[ textSizeClass, textClass ]">
+                {{ text }}
+            </span>
+            <!-- Right icon -->
+            <MdiIcon
+                v-if="iconPosition === IconPosition.RIGHT"
+                :icon="icon"
+                :size="iconSizeClass"
+                preserveAspectRatio="xMidYMid meet"
+            />
+        </div>
+    </NuxtLink>
+</template>
+
+<script setup lang="ts">
+// Props
+const props = defineProps({
+    text: {
+        type: String as PropType<string>,
+        default: 'Link text'
+    },
+    size: {
+        type: String as PropType<NavLinkSize>,
+        default: NavLinkSize.SM,
+        validator: (value: NavLinkSize) => Object.values(NavLinkSize).includes(value),
+    },
+    icon: {
+        type: String as PropType<any>,
+        default: "mdiArrowRightThin"
+    },
+    iconPosition: {
+        type: String as PropType<IconPosition>,
+        default: IconPosition.NONE,
+        validator: (value: IconPosition) => Object.values(IconPosition).includes(value),
+    },
+    disabled: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    to: {
+        type: String as PropType<string>,
+        default: '/'
+    },
+    isExternal: {
+        type: Boolean as PropType<boolean>,
+        default: false
+    },
+    textClass: {
+        type: String as PropType<string>,
+        default: 'font-semibold'
+    },
+})
+
+// Computed classes
+const iconSizeClass = computed(() => {
+    const sizeVariant = {
+        [NavLinkSize.XS]: '16px',
+        [NavLinkSize.SM]: '16px',
+        [NavLinkSize.MD]: '16px',
+        [NavLinkSize.LG]: '20px',
+        [NavLinkSize.XL]: '24px',
+        [NavLinkSize.XXL]: '28px',
+    }
+    return sizeVariant[props.size as NavLinkSize] || '20px'
+})
+
+const textSizeClass = computed(() => {
+    const sizeVariant = {
+        [NavLinkSize.XS]: 'text-xs',
+        [NavLinkSize.SM]: 'text-sm',
+        [NavLinkSize.MD]: 'text-md',
+        [NavLinkSize.LG]: 'text-lg',
+        [NavLinkSize.XL]: 'text-xl',
+        [NavLinkSize.XXL]: 'text-2xl',
+    }
+    return sizeVariant[props.size as NavLinkSize] || 'text-sm'
+})
+
+const gapClass = computed(() => {
+    const sizeVariant = {
+        [NavLinkSize.XS]: 'gap-1',
+        [NavLinkSize.SM]: 'gap-1.5',
+        [NavLinkSize.MD]: 'gap-2',
+        [NavLinkSize.LG]: 'gap-2',
+        [NavLinkSize.XL]: 'gap-2',
+        [NavLinkSize.XXL]: 'gap-2',
+    }
+    return sizeVariant[props.size as NavLinkSize] || 'gap-2'
+})
+</script>

package/components/navigation/nav-menu/NavFooterMenu.vue

@@ -0,0 +1,91 @@
+<template>
+    <div
+        :class="[
+            orientation === Orientation.HORIZONTAL ? 'flex flex-col gap-2' : 'flex gap-6 flex-wrap',
+        ]"
+    >
+        <div>
+            <p
+                v-if="title"
+                class="text-sm font-semibold text-theme-neutral-50 mb-4"
+            >
+                {{ title }}
+            </p>
+
+            <!-- Solo SVGs -->
+            <div
+                v-if="onlySvgs"
+                class="flex gap-3 flex-wrap"
+            >
+                <NuxtLink
+                    v-for="(item, index) in items"
+                    :key="index"
+                    :to="item.path"
+                    class="inline-block"
+                    target="_blank"
+                >
+                    <SVGImage
+                        v-if="item.svg"
+                        :src="item.svg"
+                        alt="icon"
+                        class="max-w-[20px] filter invert"
+                    />
+                </NuxtLink>
+            </div>
+
+            <!-- Texto / Iconos -->
+            <div
+                v-else
+                :class="[
+                    orientation === Orientation.VERTICAL
+                        ? 'flex flex-col gap-4'
+                        : 'flex gap-6 flex-wrap',
+                ]"
+            >
+                <NuxtLink
+                    v-for="(item, index) in items"
+                    :key="index"
+                    :to="item.path"
+                    class="flex items-center gap-2 text-sm text-theme-neutral-50 hover:underline"
+                >
+                    <MdiIcon
+                        v-if="item.icon"
+                        :icon="item.icon"
+                        size="20"
+                        preserveAspectRatio="xMidYMid meet"
+                    />
+                    <span v-if="item.text">{{ item.text }}</span>
+                </NuxtLink>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { NuxtLink } from '#components'
+
+type NavItem = {
+    path: string
+    text?: string
+    icon?: string
+    svg?: string
+}
+
+const props = defineProps({
+    title: {
+        type: String,
+        default: '',
+    },
+    items: {
+        type: Array as PropType<NavItem[]>,
+        required: true,
+    },
+    orientation: {
+        type: String as PropType<Orientation>,
+        default: Orientation.VERTICAL,
+    },
+})
+
+const onlySvgs = computed(() => props.items.every(item => item.svg && !item.text && !item.icon))
+</script>

package/components/navigation/nav-menu/NavMenu.vue

@@ -0,0 +1,36 @@
+<template>
+    <nav class="nav-menu flex gap-8 px-6">
+        <NavMenuItem 
+            v-for="item in menuItems" :key="item.text" 
+            :text="item.text"    
+            :to="item.to"
+            :detectActive
+        />
+    </nav>
+</template>
+<script setup lang="ts">
+// Props
+defineProps({
+    menuItems: {
+        type: Array as PropType<MenuItem[]>,
+        default: () => [
+            {
+                'text': 'Menu item 1',
+                'to': '/',
+            },
+            {
+                'text': 'Menu item 2',
+                'to': '/',
+            },
+            {
+                'text': 'Menu item 3',
+                'to': '/',
+            },
+        ],
+    }, 
+    detectActive: {
+        type: Boolean as PropType<boolean>,
+        default: true,
+    },
+})
+</script>

package/components/navigation/nav-menu/NavMenuItem.vue

@@ -0,0 +1,44 @@
+<template>
+    <NuxtLink :to="to">
+        <span 
+            :class="[
+                'font-medium',
+                'transition-colors',
+                'duration-200',
+                activeClass
+            ]"
+        >
+            {{ text }}
+        </span>
+    </NuxtLink>
+</template>
+
+<script setup lang="ts">
+// Props
+const props = defineProps({
+    text: {
+        type: String as PropType<string>,
+        default: 'Menu item',
+    },
+    to: {
+        type: String as PropType<string>,
+        default: '/',
+    },
+    detectActive: {
+        type: Boolean,
+        default: true,
+    },
+})
+
+// Composables
+const route = useRoute()
+
+// Computed — return the class directly
+const activeClass = computed(() => {
+    const isActive = props.detectActive && route.path === props.to
+
+    return isActive
+        ? 'text-text-primary-brand-active'
+        : 'hover:text-text-primary-brand-active text-text-default'
+})
+</script>