@meistrari/tela-build 1.56.0 → 1.56.1

package/components/tela/uploader/uploader-file-list.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { getMimeTypeIcon } from 'tela-shared/src/helpers/files'
+import { getMimeTypeIcon } from '../../../utils/files'
 import type { FileWithStatus, ItemDefinition } from './uploader-mappings'
 
 withDefaults(defineProps<{

package/components/tela/uploader/uploader-html.ts

@@ -0,0 +1,28 @@
+function extractAttribute(tag: string, attribute: string): string {
+    const match = tag.match(new RegExp(`${attribute}\\s*=\\s*(?:"([^"]*)"|'([^']*)'|([^\\s>]+))`, 'i'))
+    return match?.[1] ?? match?.[2] ?? match?.[3] ?? ''
+}
+
+export function extractFileNodeAttributesFromHTML(html: string): Array<{ id: string, fileName: string }> {
+    if (!html)
+        return []
+
+    if (typeof DOMParser === 'undefined') {
+        const fileNodeTags = html.match(/<file-node\b[^>]*>/gi) ?? []
+
+        return fileNodeTags.map(tag => ({
+            id: extractAttribute(tag, 'id'),
+            fileName: extractAttribute(tag, 'filename'),
+        }))
+    }
+
+    const parser = new DOMParser()
+    const doc = parser.parseFromString(html, 'text/html')
+    const fileNodes = doc.querySelectorAll('file-node')
+
+    return Array.from(fileNodes).map((fileNode) => {
+        const id = fileNode.getAttribute('id') || ''
+        const fileName = fileNode.getAttribute('filename') || ''
+        return { id, fileName }
+    })
+}

package/components/tela/uploader/uploader-mappings.test.ts

@@ -1,7 +1,7 @@
 import { describe, expect, it } from 'vitest'
 
 import type { ItemDefinition } from './uploader-mappings'
-import { buildProcessedMappings } from './uploader-mappings'
+import { buildProcessedMappings, isFileTypeSupported } from './uploader-mappings'
 
 function createFile(name: string, content = 'content', lastModified = Date.now()) {
     return new File([content], name, { type: 'application/pdf', lastModified })
@@ -182,3 +182,35 @@ describe('buildProcessedMappings', () => {
         }])
     })
 })
+
+describe('isFileTypeSupported', () => {
+    const supportedFileTypes = {
+        'application/pdf': ['.pdf'],
+        'image/jpeg': ['.jpg', '.jpeg'],
+        'text/csv': ['.csv', '.CSV'],
+    }
+
+    it('accepts a file whose mime type is a supported key', () => {
+        expect(isFileTypeSupported('application/pdf', 'report.pdf', supportedFileTypes)).toBe(true)
+    })
+
+    it('accepts a file whose mime type carries parameters', () => {
+        expect(isFileTypeSupported('text/csv; charset=utf-8', 'rows.csv', supportedFileTypes)).toBe(true)
+    })
+
+    it('falls back to the extension when the browser reports a generic mime type', () => {
+        expect(isFileTypeSupported('application/octet-stream', 'report.pdf', supportedFileTypes)).toBe(true)
+        expect(isFileTypeSupported('', 'photo.JPEG', supportedFileTypes)).toBe(true)
+        expect(isFileTypeSupported(undefined, 'rows.csv', supportedFileTypes)).toBe(true)
+    })
+
+    it('rejects unsupported mime types and extensions', () => {
+        expect(isFileTypeSupported('image/gif', 'animation.gif', supportedFileTypes)).toBe(false)
+        expect(isFileTypeSupported('application/octet-stream', 'archive.zip', supportedFileTypes)).toBe(false)
+    })
+
+    it('rejects a file without an extension when the mime type is unknown', () => {
+        expect(isFileTypeSupported('application/octet-stream', 'README', supportedFileTypes)).toBe(false)
+        expect(isFileTypeSupported(undefined, undefined, supportedFileTypes)).toBe(false)
+    })
+})

package/components/tela/uploader/uploader-mappings.ts

@@ -1,5 +1,34 @@
-import type { Tela } from 'tela-shared/types/tela'
-import { extractFileNodeAttributesFromHTML } from 'tela-shared/src/helpers/html'
+import { extractFileNodeAttributesFromHTML } from './uploader-html'
+
+export interface FileVariableMapping {
+    file?: File
+    content?: string
+    variableName: string | null
+    taskName?: string
+    metadata?: { row: string }
+}
+
+/** MIME type to the file extensions it covers, e.g. `{ 'application/pdf': ['.pdf'] }`. */
+export type SupportedFileTypes = Record<string, string[]>
+
+export function isFileTypeSupported(
+    fileType: string | undefined,
+    filename: string | undefined,
+    supportedFileTypes: SupportedFileTypes,
+): boolean {
+    const mimeType = fileType?.split(';').at(0)?.trim().toLowerCase() ?? ''
+
+    if (mimeType in supportedFileTypes)
+        return true
+
+    const extension = filename?.slice(filename.lastIndexOf('.')).toLowerCase()
+
+    if (!extension?.startsWith('.'))
+        return false
+
+    return Object.values(supportedFileTypes)
+        .some(extensions => extensions.some(supported => supported.toLowerCase() === extension))
+}
 
 export interface FileWithStatus {
     file: File
@@ -122,7 +151,7 @@ export function buildProcessedMappings(
     items: ItemDefinition[],
     editorFilesMap: Map<string, Map<string, File>>,
     variables: { name: string, isRequired: boolean, type?: 'file' | 'text' }[],
-): Tela.FileUpload.FileVariableMapping[] {
+): FileVariableMapping[] {
     return items.flatMap(item =>
         Object.entries(item.variables).flatMap(([variableName, filesWithStatus]) => {
             const variableType = resolveVariableType(variableName, variables)
@@ -182,5 +211,5 @@ export function buildProcessedMappings(
 
             return [{ variableName, taskName: item.name }]
         }),
-    ) as Tela.FileUpload.FileVariableMapping[]
+    ) as FileVariableMapping[]
 }

package/components/tela/uploader/uploader-variable-assignment.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { getMimeTypeIcon, formatFileSize } from 'tela-shared/src/helpers/files'
+import { getMimeTypeIcon, formatFileSize } from '../../../utils/files'
 import type { FileWithStatus, ItemDefinition } from './uploader-mappings'
 
 const props = withDefaults(defineProps<{

package/components/tela/uploader/uploader.mdx

@@ -33,6 +33,12 @@ const variables = [
   { name: 'notes', isRequired: false, type: 'text' }
 ]
 
+const supportedFileTypes = {
+  'application/pdf': ['.pdf'],
+  'image/jpeg': ['.jpg', '.jpeg'],
+  'text/csv': ['.csv'],
+}
+
 const uploaderState = ref({
   isFormValid: false,
   itemCountLabel: '',
@@ -52,6 +58,7 @@ function handleProcess() {
   <TelaModal v-model="isOpen">
     <TelaUploader
       :model-value="isOpen"
+      :supported-file-types="supportedFileTypes"
       :files="files"
       :variables="variables"
       item-label="Task"
@@ -105,6 +112,7 @@ function handleProcess() {
   <TelaModal v-model="isOpen">
     <TelaUploader
       :model-value="isOpen"
+      :supported-file-types="supportedFileTypes"
       :files="files"
       :variables="variables"
       item-label="Invoice"
@@ -142,6 +150,7 @@ const uploaderState = ref({
   <TelaModal v-model="isOpen">
     <TelaUploader
       :model-value="isOpen"
+      :supported-file-types="supportedFileTypes"
       :files="files"
       :variables="variables"
       item-label="Documento"
@@ -208,6 +217,7 @@ function handleProcess() {
   <TelaModal v-model="isOpen">
     <TelaUploader
       :model-value="isOpen"
+      :supported-file-types="supportedFileTypes"
       :files="files"
       :variables="variables"
       :edit-data="editData"
@@ -264,6 +274,7 @@ function handleProcess() {
   <TelaModal v-model="isOpen">
     <TelaUploader
       :model-value="isOpen"
+      :supported-file-types="supportedFileTypes"
       :files="files"
       :variables="variables"
       item-label="Task"
@@ -314,8 +325,11 @@ interface UploaderState {
   mappings: FileVariableMapping[] | null
 }
 
+type SupportedFileTypes = Record<string, string[]>
+
 type UploaderProps = {
   modelValue: boolean
+  supportedFileTypes: SupportedFileTypes
   files?: File[]
   variables?: Variable[]
   lastItemReference?: number
@@ -460,12 +474,17 @@ The Uploader component emits the following events:
 
 ## Supported File Types
 
-The component supports all file types defined in `supportedFileTypesToParse` from `tela-shared`. Common formats include:
+The accepted file types come from the required `supportedFileTypes` prop, a map of MIME type to the extensions it covers:
+
+```ts
+const supportedFileTypes = {
+  'application/pdf': ['.pdf'],
+  'image/jpeg': ['.jpg', '.jpeg'],
+  'text/csv': ['.csv'],
+}
+```
 
-- **Documents**: PDF, DOC, DOCX, TXT, etc.
-- **Images**: JPG, PNG, GIF, SVG, etc.
-- **Spreadsheets**: XLS, XLSX, CSV, etc.
-- **Other**: Various other parseable formats
+It drives the `accept` attribute of the file inputs, the supported-formats hint in the drop zone, and validation. A dropped file is accepted when its MIME type matches a key or its extension matches one of the values, so files reported by the browser as `application/octet-stream` still resolve by extension.
 
 The component automatically validates file types and shows error messages for unsupported formats.
 
@@ -564,7 +583,7 @@ This example shows the recommended pattern using `@state-changed` event with an
 ```vue
 <script setup>
 import { ref } from 'vue'
-import type { Tela } from 'tela-shared/types/tela'
+import type { FileVariableMapping } from '~/components/tela/uploader/uploader-mappings'
 import TelaUploader from '~/components/tela/uploader/uploader.vue'
 import { useNotification } from '~/composables/useNotification'
 
@@ -579,11 +598,17 @@ const workflowVariables = [
   { name: 'reference', isRequired: false, type: 'file' }
 ]
 
+const supportedFileTypes = {
+  'application/pdf': ['.pdf'],
+  'image/jpeg': ['.jpg', '.jpeg'],
+  'text/csv': ['.csv'],
+}
+
 const uploaderState = ref({
   isFormValid: false,
   itemCountLabel: '',
   hasAnyFiles: false,
-  mappings: null as Tela.FileUpload.FileVariableMapping[] | null,
+  mappings: null as FileVariableMapping[] | null,
 })
 
 async function handleFileSelect(event: Event) {
@@ -629,6 +654,7 @@ function handleValidationError(title: string, description: string) {
 
         <TelaUploader
           :model-value="isUploaderOpen"
+          :supported-file-types="supportedFileTypes"
           :files="uploadedFiles"
           :variables="workflowVariables"
           item-label="Task"

package/components/tela/uploader/uploader.stories.ts

@@ -5,6 +5,16 @@ import TelaButton from '../button/button.vue'
 import TelaIconButton from '../icon-button/icon-button.vue'
 import TelaModal from '../modal/modal.vue'
 
+const supportedFileTypes = {
+    'application/pdf': ['.pdf'],
+    'image/jpeg': ['.jpg', '.jpeg'],
+    'image/png': ['.png'],
+    'application/vnd.openxmlformats-officedocument.wordprocessingml.document': ['.docx'],
+    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': ['.xlsx'],
+    'text/csv': ['.csv'],
+    'text/plain': ['.txt'],
+}
+
 const meta: Meta<typeof Uploader> = {
     title: 'Core/Uploader',
     component: Uploader,
@@ -21,6 +31,10 @@ const meta: Meta<typeof Uploader> = {
             control: 'boolean',
             description: 'Controls the visibility of the uploader modal. Use `v-model` for two-way binding.',
         },
+        supportedFileTypes: {
+            control: 'object',
+            description: 'Required. Map of accepted MIME types to their file extensions, e.g. `{ "application/pdf": [".pdf"] }`. Drives the accept attribute, the supported-formats hint and file validation.',
+        },
         files: {
             control: 'object',
             description: 'Array of File objects to be processed and assigned to variables.',
@@ -91,6 +105,7 @@ export const Default: Story = {
 
             return {
                 isOpen,
+                supportedFileTypes,
                 files,
                 variables,
                 uploaderState,
@@ -143,6 +158,7 @@ export const Default: Story = {
                         <div flex="~ col" min-h-0>
                             <Uploader
                                 :model-value="isOpen"
+                                :supported-file-types="supportedFileTypes"
                                 :files="files"
                                 :variables="variables"
                                 item-label="Task"
@@ -211,6 +227,7 @@ export const WithFileUpload: Story = {
 
             return {
                 isOpen,
+                supportedFileTypes,
                 files,
                 variables,
                 uploaderState,
@@ -264,6 +281,7 @@ export const WithFileUpload: Story = {
                         <div flex="~ col" min-h-0>
                             <Uploader
                                 :model-value="isOpen"
+                                :supported-file-types="supportedFileTypes"
                                 :files="files"
                                 :variables="variables"
                                 item-label="Document"
@@ -319,6 +337,7 @@ export const WithTextVariables: Story = {
 
             return {
                 isOpen,
+                supportedFileTypes,
                 files,
                 variables,
                 uploaderState,
@@ -371,6 +390,7 @@ export const WithTextVariables: Story = {
                         <div flex="~ col" min-h-0>
                             <Uploader
                                 :model-value="isOpen"
+                                :supported-file-types="supportedFileTypes"
                                 :files="files"
                                 :variables="variables"
                                 item-label="Item"

package/components/tela/uploader/uploader.vue

@@ -1,18 +1,13 @@
 <script setup lang="ts">
-import type { Tela } from 'tela-shared/types/tela'
 import type { PreviewLabels, PreviewSelectVariableLabels, PreviewContentLabels, PdfDocumentHandle } from '@meistrari/tela-build/components/tela/preview/types'
-import type { FileWithStatus, ItemDefinition, ActiveFileAction } from './uploader-mappings'
+import type { FileWithStatus, ItemDefinition, ActiveFileAction, FileVariableMapping, SupportedFileTypes } from './uploader-mappings'
 
-import {
-    isFileTypeParseSupported,
-    supportedFileTypesToParse,
-} from 'tela-shared/src/schemas/parse-api'
-import { extractFileNodeAttributesFromHTML } from 'tela-shared/src/helpers/html'
-
-import { buildProcessedMappings, isTextContentEmpty } from './uploader-mappings'
+import { extractFileNodeAttributesFromHTML } from './uploader-html'
+import { buildProcessedMappings, isFileTypeSupported, isTextContentEmpty } from './uploader-mappings'
 
 const props = withDefaults(defineProps<{
     modelValue: boolean
+    supportedFileTypes: SupportedFileTypes
     files?: File[]
     variables?: { name: string, isRequired: boolean, type?: 'file' | 'text' }[]
     lastItemReference?: number
@@ -130,14 +125,14 @@ const props = withDefaults(defineProps<{
 
 const emit = defineEmits<{
     (e: 'update:modelValue', value: boolean): void
-    (e: 'process', mappings: Tela.FileUpload.FileVariableMapping[]): void
+    (e: 'process', mappings: FileVariableMapping[]): void
     (e: 'validationError', title: string, description: string): void
     (e: 'csvFileDropped', files: File[]): void
     (e: 'stateChanged', state: {
         isFormValid: boolean
         itemCountLabel: string
         hasAnyFiles: boolean
-        mappings: Tela.FileUpload.FileVariableMapping[] | null
+        mappings: FileVariableMapping[] | null
     }): void
 }>()
 
@@ -161,19 +156,21 @@ const editorRefs = ref<Map<string, { editor: any }>>(new Map())
 const variableList = computed(() => props.variables || [])
 const isEditMode = computed(() => !!props.editData)
 
-const supportedFileTypes = computed(() =>
-    Object.values(supportedFileTypesToParse)
-        .map(fileTypes => fileTypes.at(-1)!.toUpperCase())
+const supportedFileTypesLabel = computed(() =>
+    Object.values(props.supportedFileTypes)
+        .flatMap(fileTypes => fileTypes.at(-1) ?? [])
+        .map(fileType => fileType.toUpperCase())
         .join(', '),
 )
 
 const supportedFileTypesAccept = computed(() =>
-    Object.keys(supportedFileTypesToParse).join(','),
+    Object.keys(props.supportedFileTypes).join(','),
 )
 
 const fileTypesDisplay = computed(() => {
-    const types = Object.values(supportedFileTypesToParse)
-        .map(fileTypes => fileTypes.at(-1)!.toUpperCase().replace(/\./g, ''))
+    const types = Object.values(props.supportedFileTypes)
+        .flatMap(fileTypes => fileTypes.at(-1) ?? [])
+        .map(fileType => fileType.toUpperCase().replace(/\./g, ''))
 
     return {
         text: types.slice(0, 3).join(', '),
@@ -607,11 +604,11 @@ function handleItemNameBlur(itemId: string) {
 }
 
 function validateFiles(fileList: File[]) {
-    const validFiles = fileList.filter(file => isFileTypeParseSupported(file.type, file.name))
-    const invalidFiles = fileList.filter(file => !isFileTypeParseSupported(file.type, file.name))
+    const validFiles = fileList.filter(file => isFileTypeSupported(file.type, file.name, props.supportedFileTypes))
+    const invalidFiles = fileList.filter(file => !isFileTypeSupported(file.type, file.name, props.supportedFileTypes))
 
     if (invalidFiles.length > 0) {
-        emit('validationError', props.fileTypeNotSupportedTitle, props.fileTypeNotSupportedDescription.replace('{formats}', supportedFileTypes.value))
+        emit('validationError', props.fileTypeNotSupportedTitle, props.fileTypeNotSupportedDescription.replace('{formats}', supportedFileTypesLabel.value))
     }
 
     return validFiles

package/components/tela/variable-input.vue

@@ -1,7 +1,13 @@
 <script setup lang="ts">
-import type { Variable } from 'tela-shared'
 import { useI18n } from 'vue-i18n'
 
+interface Variable {
+    name: string
+    type: 'file' | 'text' | 'mixed'
+    required: boolean
+    processingOptions?: { allowMultimodal: boolean }
+}
+
 defineProps<{
     variable: Variable
     tabindex?: number

package/package.json

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

package/utils/files.ts

@@ -0,0 +1,59 @@
+export const fileIconsSrc = {
+    'application/pdf': '/files/pdf.svg',
+    'application/vnd.openxmlformats-officedocument.wordprocessingml.document': '/files/doc.svg',
+    'application/vnd.openxmlformats-officedocument.wordprocessingml.template': '/files/doc.svg',
+    'application/msword': '/files/doc.svg',
+    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': '/files/sheet.svg',
+    'application/vnd.ms-excel': '/files/sheet.svg',
+    'application/vnd.openxmlformats-officedocument.presentationml.presentation': '/files/presentation.svg',
+    'application/vnd.ms-powerpoint': '/files/presentation.svg',
+    'application/vnd.oasis.opendocument.spreadsheet': '/files/sheet.svg',
+    'application/vnd.oasis.opendocument.text': '/files/doc.svg',
+    'application/vnd.oasis.opendocument.presentation': '/files/presentation.svg',
+    'text/csv': '/files/sheet.svg',
+    'text/plain': '/files/generic.svg',
+    'application/json': '/files/json.svg',
+    'application/xml': '/files/json.svg',
+    'text/xml': '/files/json.svg',
+    'application/x-yaml': '/files/json.svg',
+    'text/yaml': '/files/json.svg',
+    'message/rfc822': '/files/doc.svg',
+    'application/vnd.ms-outlook': '/files/doc.svg',
+    'video/mp4': '/files/video.svg',
+    'video/webm': '/files/video.svg',
+    'audio/mpeg': '/files/audio.svg',
+    'audio/ogg': '/files/audio.svg',
+    'audio/wav': '/files/audio.svg',
+    'image/jpeg': '/files/image.svg',
+    'image/png': '/files/image.svg',
+    'unknown': '/files/generic.svg',
+}
+
+export function getMimeTypeIcon(mimeType?: string): string {
+    if (!mimeType)
+        return '/files/generic.svg'
+
+    if (mimeType.startsWith('image/'))
+        return '/files/image.svg'
+
+    if (mimeType.startsWith('audio/'))
+        return '/files/audio.svg'
+
+    if (mimeType.startsWith('video/'))
+        return '/files/video.svg'
+
+    return fileIconsSrc[mimeType as keyof typeof fileIconsSrc] || '/files/generic.svg'
+}
+
+export function formatFileSize(bytes: number): string {
+    const units = ['B', 'KB', 'MB']
+    let size = bytes
+    let unitIndex = 0
+
+    while (size >= 1024 && unitIndex < units.length - 1) {
+        size /= 1024
+        unitIndex++
+    }
+
+    return `${size.toFixed(1)}${units[unitIndex]}`
+}