@imaginario27/air-ui-ds 1.0.2 → 1.0.4

package/components/accordions/AccordionGroup.vue

@@ -17,7 +17,7 @@
             >
                 {{ groupKey }}
             </component>
-            <Accordion :items="groupedAccordeons[groupKey]" />
+            <Accordion :items="groupedAccordeons[groupKey] ?? []" />
         </div>
     </div>
     

package/components/buttons/ActionButton.vue

@@ -78,7 +78,7 @@
                 >
                     <SVGImage
                         :src="svgIcon"
-                        :color="!useSVGIconColor && svgIconColorClass"
+                        :color="resolvedSvgIconColor"
                     />
                 </span>
             </template>
@@ -376,7 +376,15 @@ const gapClass = computed(() => {
 
 // Computed functions
 const resolvedSvgIconColor = computed(() => {
-    return props.useSVGIconColor ? undefined : svgIconColorClass
+    if (props.useSVGIconColor) return undefined
+
+    const val = svgIconColorClass.value
+
+    if (Array.isArray(val)) {
+        return val.filter(Boolean).join(' ')
+    }
+
+    return val
 })
 
 // Props for the dynamic component

package/components/buttons/ActionIconButton.vue

@@ -264,7 +264,15 @@ const svgIconColorClass = computed(() => {
 
 // Computed functions
 const resolvedSvgIconColor = computed(() => {
-    return props.useSVGIconColor ? undefined : svgIconColorClass
+    if (props.useSVGIconColor) return undefined
+
+    const val = svgIconColorClass.value
+
+    if (Array.isArray(val)) {
+        return val.filter(Boolean).join(' ')
+    }
+
+    return val
 })
 
 // Props for the dynamic component

package/components/forms/fields/DataField.vue

@@ -37,7 +37,7 @@
                         v-if="hasCopyToClipboardButton"
                         icon="mdiContentCopy"
                         :size="ButtonSize.XS"
-                        @click="copyToClipboard(text.toString(), copyToClipboardMessage)"
+                        @click="handleCopyToClipboard"
                     />
                 </div>
             </template>
@@ -90,10 +90,28 @@ const props = defineProps({
         type: String as PropType<string>,
         default: 'Copied to clipboard'
     },
+    copyToClipboardErrorMessage: {
+        type: String as PropType<string>,
+        default: 'Failed to copy to clipboard'
+    },
 })
 
 // Computed
 const isEmpty = computed(() => {
     return props.text === '' || props.text === null || props.text === undefined || props.text === 0
 })
+
+// Toast
+const { $toast } = useNuxtApp()
+
+// Methods
+const handleCopyToClipboard = async () => {
+    const success = await copyToClipboard(props.text?.toString() ?? '')
+
+    if (success) {
+        $toast.success(props.copyToClipboardMessage, { toastId: 'clipboard-success' })
+    } else {
+        $toast.error(props.copyToClipboardErrorMessage, { toastId: 'clipboard-error' })
+    }
+}
 </script>

package/components/forms/fields/FileUploadField.vue

@@ -74,36 +74,6 @@
                             {{ acceptedFileTypes }} {{ upToText }} {{ maxFileSize }}MB
                         </p>
                     </template>
-                    <!-- <template v-if="!isImageFile" #preview>
-                        <div class="w-full flex flex-col gap-2">
-                            <div
-                                v-for="(file, index) in selectedFiles"
-                                :key="index"
-                                class="flex flex-row gap-3 p-3 border border-border-default rounded-md bg-background-neutral w-full"
-                            >
-                                <div class="flex items-start justify-center pt-1">
-                                    <MdiIcon 
-                                        icon="mdiFileDocumentOutline" 
-                                        size="24"
-                                        class="text-icon-default min-w-[24px]" 
-                                    />
-                                </div>
-
-                                <div class="flex flex-col flex-1 overflow-hidden">
-                                    <p class="text-sm font-medium break-words whitespace-normal leading-snug mt-1.5 select-none">
-                                        {{ file.name || (file as any)?.file?.name || 'Unnamed file' }}
-                                    </p>
-                                </div>
-
-                                <ActionIconButton
-                                    icon="mdiClose"
-                                    :styleType="ButtonStyleType.DELETE_FILLED"
-                                    :size="ButtonSize.SM"
-                                    @click="removeFile(index)"
-                                />
-                            </div>
-                        </div>
-                    </template> -->
                 </Vue3Dropzone>
 
                 <!-- Help Text -->
@@ -123,7 +93,7 @@
 
 <script setup lang="ts">
 // Imports
-//@ts-ignore
+//@ts-expect-error: vue3-dropzone has no types; using JS import
 import Vue3Dropzone from '@jaxtheprime/vue3-dropzone'
 import '@jaxtheprime/vue3-dropzone/dist/style.css'
 
@@ -214,23 +184,6 @@ const { $toast } = useNuxtApp()
 // Computed
 const hasError = computed(() => props.error !== '')
 
-// Used to check if the file is an image or not
-const isImageFile = computed(() => {
-    const accepted = Array.isArray(props.accept) ? props.accept : [props.accept]
-
-    const acceptsImages = accepted.some(type =>
-        typeof type === 'string' && type.startsWith('image/')
-    )
-
-    if (!acceptsImages) return false
-
-    return selectedFiles.value.length > 0 &&
-        selectedFiles.value.every(file => {
-            const realFile = (file as any)?.file || file
-            return realFile?.type?.startsWith('image/')
-        })
-})
-
 // Converts Array of strings into a string
 const normalizedAccept = computed(() => {
     return Array.isArray(props.accept) ? props.accept.join(',') : props.accept
@@ -240,9 +193,10 @@ const normalizedAccept = computed(() => {
 const acceptedFileTypes = computed(() => {
     return (Array.isArray(props.accept) ? props.accept : [props.accept])
         .map(ext => {
-            // Extract file extension from MIME type
             const match = ext.match(/\/([a-zA-Z0-9]+)/)
-            return match ? match[1].toUpperCase() : ext.toUpperCase()
+
+            // If matched, return the extracted file extension, otherwise use full type
+            return match?.[1]?.toUpperCase() || ext.toUpperCase()
         })
         .join(', ')
 })

package/components/forms/fields/SliderField.vue

@@ -114,7 +114,7 @@
                                     'whitespace-nowrap',
                                 ]"
                             >
-                                {{ $t('slider.clickToEdit') }}
+                                Click to edit
                             </div>
                         </div>
                     </div>
@@ -283,7 +283,7 @@
                                     'whitespace-nowrap',
                                 ]"
                             >
-                                {{ $t('slider.clickToEdit') || 'Click para editar' }}
+                                Click to edit
                             </div>
                         </div>
                     </div>
@@ -514,15 +514,16 @@ const getThumbPosition = (value: number) => {
 const trackStyle = computed(() => {
     if (props.type === SliderType.RANGE) {
         const [start, end] = thumbValues.value
-        const startPercent = percentage(start)
-        const endPercent = percentage(end)
+
+        const startPercent = percentage(start ?? props.min)
+        const endPercent = percentage(end ?? props.max)
 
         return {
             left: `${startPercent}%`,
             width: `${endPercent - startPercent}%`,
         }
     } else {
-        const percent = percentage(thumbValues.value[0])
+        const percent = percentage(thumbValues.value[0] ?? props.min)
         return {
             left: '0%',
             width: `${percent}%`,
@@ -530,6 +531,7 @@ const trackStyle = computed(() => {
     }
 })
 
+
 const startDrag = (index: number) => {
     if (props.disabled) return
 
@@ -551,23 +553,20 @@ const onDrag = (event: MouseEvent) => {
         const step = stepSize.value
         const stepsFromMin = Math.round((clamped - props.min) / step)
         clamped = props.min + stepsFromMin * step
-        clamped = Math.round(clamped)
-        emit('update:modelValue', clamped)
+        emit('update:modelValue', Math.round(clamped))
+        return
+    }
+
+    const range = [...thumbValues.value] as [number, number]
+    const roundedValue = Math.round(clamped)
+
+    if (draggingIndex.value === 0) {
+        range[0] = Math.min(roundedValue, range[1] - 1)
     } else {
-        // MODIFICADO: Validación para rangos durante el drag
-        const range = [...(thumbValues.value as [number, number])]
-        const roundedValue = Math.round(clamped)
-        
-        if (draggingIndex.value === 0) {
-            // Arrastrando el thumb mínimo
-            range[0] = Math.min(roundedValue, range[1] - 1) // Asegurar que sea menor que el máximo
-        } else if (draggingIndex.value === 1) {
-            // Arrastrando el thumb máximo
-            range[1] = Math.max(roundedValue, range[0] + 1) // Asegurar que sea mayor que el mínimo
-        }
-        
-        emit('update:modelValue', range)
+        range[1] = Math.max(roundedValue, range[0] + 1)
     }
+
+    emit('update:modelValue', range)
 }
 
 const stopDrag = () => {
@@ -657,25 +656,34 @@ const stopEditing = () => {
 
     // AÑADIDO: Validación específica para rangos
     if (props.type === SliderType.RANGE) {
-        const currentRange = [...(props.modelValue as [number, number])]
-        
+        const mv = props.modelValue
+
+        if (!Array.isArray(mv)) return
+
+        const currentRange = [...mv] as [number, number]
+
         if (editingIndex.value === 0) {
-            // Editando valor mínimo - debe ser menor que el máximo
             if (adjustedValue >= currentRange[1]) {
                 showEditingError('El valor mínimo debe ser menor que el máximo')
                 return
             }
-        } else if (editingIndex.value === 1) {
-            // Editando valor máximo - debe ser mayor que el mínimo
+        } 
+        else if (editingIndex.value === 1) {
             if (adjustedValue <= currentRange[0]) {
                 showEditingError('El valor máximo debe ser mayor que el mínimo')
                 return
             }
+        } 
+        else {
+            // If editingIndex is null or invalid, stop.
+            return
         }
-        
-        // Si llegamos aquí, el valor es válido
+
+        // Now it's safe:
         currentRange[editingIndex.value] = adjustedValue
         emit('update:modelValue', currentRange)
+
+        return
     } else {
         // Para slider simple, solo actualizar el valor
         emit('update:modelValue', adjustedValue)

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

@@ -50,7 +50,7 @@
                 >
                     <MdiIcon
                         v-if="item.icon"
-                        :icon="item.icon"
+                        :icon="item.icon as any"
                         size="20"
                         preserveAspectRatio="xMidYMid meet"
                     />
@@ -62,8 +62,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
-import { NuxtLink } from '#components'
+// Props
 
 type NavItem = {
     path: string

package/components/pagination/RowsPerPage.vue

@@ -7,7 +7,7 @@
             :modelValue
             :options="rowsOptions" 
             class="w-full min-w-[80px]"
-            :dropdownPosition="DropdownPosition.TOP"
+            :dropdownPosition="Position.TOP"
             @update:modelValue="(value) => emit('update:modelValue', value)"
         />
     </div>

package/components/password/SecurePasswordConditions.vue

@@ -9,25 +9,25 @@
     >
         <SecurePasswordCondition
             v-if="enabledConditions.includes('length')"
-            :label="$t('Password should be at least 12 characters long.')"
+            :label="'Password should be at least 12 characters long.'"
             :isValid="conditions.isLongEnough"
         />
 
         <SecurePasswordCondition
             v-if="enabledConditions.includes('combination')"
-            :label="$t('Use a mix of uppercase and lowercase letters.')"
+            :label="'Use a mix of uppercase and lowercase letters.'"
             :isValid="conditions.hasMixedCase"
         />
 
         <SecurePasswordCondition
             v-if="enabledConditions.includes('specialCharacters')"
-            :label="$t('Include numbers and special characters for extra security.')"
+            :label="'Include numbers and special characters for extra security.'"
             :isValid="conditions.hasNumbersAndSpecialChars"
         />
 
         <SecurePasswordCondition
             v-if="enabledConditions.includes('passwordMatch') && repeatPassword !== undefined"
-            :label="$t('Both passwords must match.')"
+            :label="'Both passwords must match.'"
             :isValid="password === repeatPassword && password !== ''"
         />
     </div>

package/components/steppers/CircleStepper.vue

@@ -25,7 +25,7 @@
                 :class="[
                     'min-w-[20px] sm:min-w-[40px]',
                     'border-2',
-                    stepItems[index].status === StepStatus.COMPLETED && '!border-border-primary-brand-active',
+                    item.status === StepStatus.COMPLETED && '!border-border-primary-brand-active',
                     dividerClass
                 ]"
             />

package/components/steppers/Step.vue

@@ -62,11 +62,13 @@ const isHovered = ref(false)
 
 // Computed classes
 const titleClass = computed(() => {
-    const variant = {
+    const variant: Record<StepStatus, string> = {
         [StepStatus.INACTIVE]: 'text-text-neutral-inactive group-hover:text-text-primary-brand-hover',
         [StepStatus.CURRENT]: 'text-text-primary-brand-active group-hover:text-text-primary-brand-hover',
         [StepStatus.COMPLETED]: 'text-text-default group-hover:text-text-primary-brand-hover',
+        [StepStatus.NONE]: 'text-text-neutral-inactive',
     }
-    return variant[props.status as StepStatus] || 'text-text-neutral-inactive'
+
+    return variant[props.status ?? StepStatus.INACTIVE]
 })
 </script>

package/composables/useTableOfContents.ts

@@ -28,7 +28,8 @@ export const useTableOfContents = () => {
 
         // First heading is active by default when the page loads
         if (headings.length > 0) {
-            activeId.value = headings[0].id
+            const firstHeading = headings[0] as HTMLElement
+            activeId.value = firstHeading.id ?? null
         }
     }
 

package/models/types/navigation.ts

@@ -1,6 +1,11 @@
 export interface MenuItem {
-    text: string;
-    to: string;
+    text: string
+    to: string
+}
+
+export interface FooterMenuItem {
+    text: string
+    to: string
 }
 
 export interface SidebarMenuItem {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@imaginario27/air-ui-ds",
-    "version": "1.0.2",
+    "version": "1.0.4",
     "author": "imaginario27",
     "type": "module",
     "homepage": "https://air-ui.netlify.app/",
@@ -18,7 +18,8 @@
         "preview": "nuxt preview",
         "postinstall": "nuxt prepare",
         "test": "vitest",
-        "generate-theme": "ts-node scripts/generate-theme.ts"
+        "generate-theme": "ts-node scripts/generate-theme.ts",
+        "typecheck": "vue-tsc --noEmit -p tsconfig.typecheck.json"
     },
     "dependencies": {
         "@jaxtheprime/vue3-dropzone": "^3.4.0",

package/scripts/generate-theme.ts

@@ -0,0 +1,104 @@
+import {
+    readFileSync,
+    writeFileSync,
+    existsSync,
+    mkdirSync,
+    unlinkSync,
+} from "fs"
+import { resolve, dirname } from "path"
+
+const inputPath = resolve("assets/css/theme/ui-theme.css")
+const outputPath = resolve("assets/css/main.css")
+
+ensureOutputDir(outputPath)
+deleteIfExists(outputPath)
+
+const content = readFileSync(inputPath, "utf-8")
+const { colorVars, otherVars } = extractThemeVars(content)
+
+const finalOutput = generateThemeFile(colorVars, otherVars)
+writeFileSync(outputPath, finalOutput, "utf-8")
+
+console.log("✅ Tailwind theme file generated in assets/css/")
+
+function ensureOutputDir(filePath: string) {
+    const dir = dirname(filePath)
+    if (!existsSync(dir)) {
+        mkdirSync(dir, { recursive: true })
+    }
+}
+
+function deleteIfExists(filePath: string) {
+    if (existsSync(filePath)) {
+        unlinkSync(filePath)
+    }
+}
+
+function extractThemeVars(content: string) {
+    const colorVars: string[] = []
+    const otherVars: string[] = []
+
+    const lines = content.split("\n")
+    let inRoot = false
+    let inDark = false
+
+    for (const rawLine of lines) {
+        const line = rawLine.trim()
+
+        if (line.startsWith(":root {")) {
+            inRoot = true
+            continue
+        }
+        if (line.startsWith(".dark {")) {
+            inDark = true
+            continue
+        }
+        if (line.startsWith("}")) {
+            inRoot = false
+            inDark = false
+            continue
+        }
+
+        if (!inRoot || inDark) continue
+
+        const key = extractVarKey(line)
+        if (!key || key.startsWith("--ds-")) continue
+
+        const declaration = `    ${key}: var(${key});`
+        if (key.startsWith("--color-")) {
+            colorVars.push(declaration)
+        } else {
+            otherVars.push(declaration)
+        }
+    }
+
+    return { colorVars, otherVars }
+}
+
+function extractVarKey(line: string): string | null {
+    const match = line.match(/^--[\w-]+:\s*[^;]+;/)
+    if (!match) return null
+    const [key] = line.split(":").map(s => s.trim().replace(/;$/, ""))
+    return key || null
+}
+
+function generateThemeFile(colorVars: string[], otherVars: string[]): string {
+    return [
+        `@import "tailwindcss";`,
+        `@source "../../node_modules/@imaginario27/air-ui-ds";`,
+        `@source "../../node_modules/@imaginario27/air-ui-utils";`,
+        ``,
+        `@import "./theme/primitives.css";`,
+        `@import "./theme/colors.css";`,
+        `@import "./theme/ui-theme.css";`,
+        ``,
+        `@theme {`,
+        `    /* Disables Tailwind default colors */`,
+        `    --color-*: initial;`,
+        ``,
+        ...colorVars,
+        ``,
+        ...otherVars,
+        `}`,
+    ].join("\n")
+}

package/tsconfig.json

@@ -3,5 +3,5 @@
     "extends": "./.nuxt/tsconfig.json",
     "compilerOptions": {
         "types": ["vitest/globals"],
-    }
+    },
 }

package/tsconfig.typecheck.json

@@ -0,0 +1,13 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "skipLibCheck": true
+    },
+    "exclude": [
+        "node_modules",
+        "../../node_modules",
+        "tests",
+        "**/*.spec.ts",
+        "**/*.test.ts",
+    ]
+}