@meistrari/tela-build 1.9.0 → 1.9.2

package/components/tela/chat/text-message/index.vue

@@ -3,6 +3,7 @@ import { TreeItem } from 'radix-vue'
 import { isToday } from 'date-fns'
 import { computed } from 'vue'
 import type { User } from '../types'
+import { useI18n } from 'vue-i18n'
 
 interface ChatMessageProps {
     id: string

package/components/tela/complex-table/complex-table-cell.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { hasEmptyOrNull } from '~/utils/empty-or-null'
+import { hasEmptyOrNull } from '../../../utils/empty-or-null'
 import type { Column, Row } from './types'
 import { hasError } from './utils'
 

package/components/tela/disclaimer/disclaimer.stories.ts

@@ -48,14 +48,14 @@ const meta = {
         autoHideDelay: 86400000,
         showCloseButton: true,
     },
-} satisfies Meta<typeof Disclaimer>
+} satisfies Meta<any>
 
 export default meta
 
-type Story = StoryObj<typeof meta>
+type Story = StoryObj<any>
 
 export const Default: Story = {
-    render: args => ({
+    render: (args: any) => ({
         components: { Disclaimer },
         setup() {
             return { args }
@@ -70,7 +70,7 @@ export const WithAutoHideDemo: Story = {
         description: 'Watch this disclaimer disappear automatically after the timeout.',
         autoHideDelay: 5000,
     },
-    render: args => ({
+    render: (args: any) => ({
         components: { Disclaimer },
         setup() {
             return { args }
@@ -86,7 +86,7 @@ export const WithoutAutoHide: Story = {
         autoHide: false,
         icon: 'i-ph-info',
     },
-    render: args => ({
+    render: (args: any) => ({
         components: { Disclaimer },
         setup() {
             return { args }
@@ -105,7 +105,7 @@ export const WithoutCloseButton: Story = {
         showCloseButton: false,
         icon: 'i-ph-warning',
     },
-    render: args => ({
+    render: (args: any) => ({
         components: { Disclaimer },
         setup() {
             return { args }

package/components/tela/icon/custom.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { TelaCustomIconName } from '~/types'
+import type { TelaCustomIconName } from '../../../types'
 import { Motion } from 'motion-v'
 
 const props = withDefaults(defineProps<{

package/components/tela/multiple-select/multiple-select.vue

@@ -14,6 +14,7 @@ import {
 } from 'radix-vue'
 import { nextTick } from 'vue'
 import PopoverList from '../popover-list/popover-list.vue'
+import { useI18n } from 'vue-i18n'
 
 const props = withDefaults(defineProps<{
     modelValue?: string[]
@@ -50,7 +51,7 @@ const emit = defineEmits<{
     'blur': []
 }>()
 
-const { t } = useTranslation()
+const { t } = useI18n()
 
 type SelectMenuOption = {
     value: string

package/components/tela/popover/popover.stories.ts

@@ -4,7 +4,7 @@ import Popover from './popover.vue'
 import PopoverTrigger from './popover-trigger.vue'
 import PopoverContent from './popover-content.vue'
 
-const meta: Meta<typeof Popover> = {
+const meta: Meta<any> = {
     title: 'Core/Popover',
     component: Popover,
     subcomponents: { PopoverTrigger, PopoverContent },

package/components/tela/range-calendar.stories.ts

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import TelaRangeCalendar from './range-calendar.vue'
 
-const meta: Meta<typeof TelaRangeCalendar> = {
+const meta: Meta<any> = {
     title: 'Tela/RangeCalendar',
     component: TelaRangeCalendar,
     tags: ['autodocs'],

package/components/tela/select-menu/select-menu-content.vue

@@ -71,7 +71,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
 
 <style>
 .SelectContent {
-  width: var(--reka-select-trigger-width);
+  min-width: var(--reka-select-trigger-width);
   transform-origin: var(--reka-select-content-transform-origin);
 
   &[data-state="open"] {

package/components/tela/status/status.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { TelaCustomIconName, TelaStatusVariant } from '~/types'
+import type { TelaCustomIconName, TelaStatusVariant } from '../../../types'
 
 import TelaIconCustom from '../icon/custom.vue'
 

package/composables/status-toast.ts

@@ -1,3 +1,6 @@
+import { computed } from 'vue'
+import { useState } from 'nuxt/app'
+
 export function useStatusToast() {
     const state = useState<StatusToast>('status-toast-state', () => ({
         text: '',

package/lib/doc-generator.ts

@@ -59,7 +59,7 @@ export async function collectComponentDocs(layerPath: string, appRootDir?: strin
     }
 
     // Initialize type resolver for the project (used to format types in markdown)
-    const typeResolver = await getTypeResolver(layerPath, appRootDir)
+    const typeResolver = await getTypeResolver(layerPath)
 
     // Prepare Volar extractor once (optional)
     let volar: VolarExtractor | null = null
@@ -262,7 +262,7 @@ export async function parseMdxFile(mdxPath: string): Promise<StoryDoc | undefine
 
         // Extract title from the main heading
         const titleMatch = content.match(/^#\s+(.+)$/m)
-        const title = titleMatch ? titleMatch[1] : ''
+        const title = titleMatch?.[1] ?? ''
 
         // Extract code examples from ```vue blocks with better heading detection
         const examples: any[] = []
@@ -271,8 +271,11 @@ export async function parseMdxFile(mdxPath: string): Promise<StoryDoc | undefine
 
         for (let i = 0; i < matches.length; i++) {
             const match = matches[i]
-            const codeContent = match[1].trim()
-            const codeBlockStart = match.index
+            const codeContent = match?.[1]?.trim()
+            const codeBlockStart = match?.index
+            if (!codeContent || codeBlockStart === undefined) {
+                continue
+            }
 
             // Find the closest heading before this code block
             const beforeCode = content.substring(0, codeBlockStart)
@@ -302,18 +305,22 @@ function findClosestHeading(textBeforeCode: string, exampleIndex: number): strin
 
     // Look for headings starting from the end (closest to code block)
     for (let i = lines.length - 1; i >= 0; i--) {
-        const line = lines[i].trim()
+        const rawLine = lines[i]
+        if (!rawLine) {
+            continue
+        }
+        const line = rawLine.trim()
 
         // Check for markdown headings (### or ####)
         const headingMatch = line.match(/^###?\s+(.+)/)
         if (headingMatch) {
-            return headingMatch[1].trim()
+            return headingMatch?.[1]?.trim() ?? `Example ${exampleIndex}`
         }
 
         // Check for bold text that might be a heading (**text**)
         const boldMatch = line.match(/^\*\*([^*]+)\*\*\s*$/)
         if (boldMatch) {
-            return boldMatch[1].trim()
+            return boldMatch?.[1]?.trim() ?? `Example ${exampleIndex}`
         }
 
         // If we hit a higher level heading (## or #), stop looking
@@ -748,7 +755,7 @@ ${sections}
 function dedent(strings: TemplateStringsArray, ...values: any[]): string {
     let result = ''
     for (let i = 0; i < strings.length; i++) {
-        result += strings[i].replace(/\r/g, '')
+        result += (strings[i] ?? '').replace(/\r/g, '')
         if (i < values.length)
             result += String(values[i])
     }
@@ -766,7 +773,8 @@ function dedent(strings: TemplateStringsArray, ...values: any[]): string {
     }
     if (minIndent && minIndent > 0) {
         for (let i = 0; i < lines.length; i++) {
-            lines[i] = lines[i].startsWith(' '.repeat(minIndent)) ? lines[i].slice(minIndent) : lines[i]
+            const line = lines[i] ?? ''
+            lines[i] = line.startsWith(' '.repeat(minIndent)) ? line.slice(minIndent) : line
         }
     }
     return `${lines.join('\n').replace(/[ \t]+$/gm, '').trim()}\n`
@@ -786,7 +794,7 @@ function groupByDirectory(components: ComponentDoc[]): Record<string, ComponentD
     // Sort directories
     const sortedGrouped: Record<string, ComponentDoc[]> = {}
     Object.keys(grouped).sort().forEach((key) => {
-        sortedGrouped[key] = grouped[key]
+        sortedGrouped[key] = grouped[key] ?? []
     })
 
     return sortedGrouped
@@ -803,7 +811,7 @@ function sanitizeInlineComment(value?: string): string {
 
     const sentenceMatch = singleLine.match(/^(.*?\.)\s/)
     if (sentenceMatch) {
-        return sentenceMatch[1].trim()
+        return sentenceMatch?.[1]?.trim() ?? singleLine
     }
     return singleLine
 }

package/lib/type-resolver.ts

@@ -277,7 +277,10 @@ export class TypeResolver {
 
         const arraySuffixMatch = trimmed.match(/^(.*)\[\]$/)
         if (arraySuffixMatch) {
-            const elementType = arraySuffixMatch[1].trim()
+            const elementType = arraySuffixMatch?.[1]?.trim()
+            if (!elementType) {
+                return 'any'
+            }
             const resolvedElement = this.resolveTypeInternal(elementType, seen)
             return this.formatArrayType(resolvedElement)
         }
@@ -365,7 +368,7 @@ export class TypeResolver {
         const closers = new Map(Array.from(openers.entries()).map(([o, c]) => [c, o]))
 
         for (let i = 0; i < input.length; i++) {
-            const char = input[i]
+            const char = input[i] ?? ''
             if (openers.has(char)) {
                 depth++
             }
@@ -393,9 +396,9 @@ export class TypeResolver {
 // Global instance
 let globalResolver: TypeResolver | null = null
 
-export async function getTypeResolver(projectRoot: string, appRootDir?: string): Promise<TypeResolver> {
+export async function getTypeResolver(projectRoot: string): Promise<TypeResolver> {
     if (!globalResolver) {
-        globalResolver = new TypeResolver(projectRoot, appRootDir)
+        globalResolver = new TypeResolver(projectRoot)
         await globalResolver.initialize()
     }
     return globalResolver

package/nuxt.config.ts

@@ -1,3 +1,7 @@
+/// <reference types="@unocss/nuxt" />
+
+import type {} from '@unocss/nuxt'
+
 import { dirname, join } from 'node:path'
 import { fileURLToPath } from 'node:url'
 import { createResolver } from 'nuxt/kit'
@@ -84,4 +88,4 @@ export default defineNuxtConfig({
             },
         },
     },
-})
+} as any)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meistrari/tela-build",
-  "version": "1.9.0",
+  "version": "1.9.2",
   "type": "module",
   "files": [
     "app.config.ts",

package/plugins/test-id.ts

@@ -1,7 +1,9 @@
+import { defineNuxtPlugin } from 'nuxt/app'
+
 export default defineNuxtPlugin((nuxtApp) => {
     nuxtApp.vueApp.directive('test', {
-        created(el, binding) {
-            el.setAttribute('data-testid', binding.value)
+        created(el: HTMLElement, binding: any) {
+            el.setAttribute('data-testid', String(binding.value))
         },
     })
 })

package/types/nuxt-macros.d.ts

@@ -0,0 +1,13 @@
+// Nuxt provides `defineNuxtConfig` / `defineAppConfig` at runtime when loading
+// `nuxt.config.*` and `app.config.*`, but TypeScript's workspace `tsc` doesn't
+// know about those globals.
+//
+// We declare the globals here (types-only) so root `pnpm -w exec tsc` passes,
+// without importing Nuxt runtime modules (which breaks Nitro/Vercel bundling).
+
+export {}
+
+declare global {
+    const defineNuxtConfig: typeof import('nuxt/config').defineNuxtConfig
+    const defineAppConfig: typeof import('nuxt/app').defineAppConfig
+}

package/types/template-globals.d.ts

@@ -0,0 +1,11 @@
+declare module '@vue/runtime-core' {
+    interface ComponentCustomProperties {
+        $t: (key: string, ...args: unknown[]) => string
+        cn: (...inputs: unknown[]) => string
+        navigateTo: (...args: unknown[]) => unknown
+        $route: any
+        DT: any
+    }
+}
+
+export {}

package/unocss.config.ts

@@ -37,7 +37,7 @@ export default defineConfig({
         },
     },
 
-    transformers: [transformerDirectives()],
+    transformers: [transformerDirectives() as any],
 
     shortcuts: [
         ['debug', 'ring-2 ring-red ring-inset'],

package/utils/select-menu.ts

@@ -1,3 +1,5 @@
+import type { Component } from 'vue'
+
 export type SelectMenuOptions = Array<{
     value: string
     label: string