import { Ref } from 'vue'; import { ButtonColor, ButtonSize, ButtonType, FileUploaded, ReturnFileType } from '../../types'; import { TIcon } from '../../types/icons.types'; import { IVcBaseInputProps } from './useInputBase'; import { IUseInputErrorProps } from './useInputError'; import { IUseInputLabelProps } from './useInputLabel'; export interface IFileUploaderProps extends IVcBaseInputProps, IUseInputErrorProps, IUseInputLabelProps { /** @description Array of initially uploaded files */ files?: Array; /** @description Array of currently selected uploaded files */ modelValue?: Array; /** @description Maximum number of files that can be displayed before showing overflow */ maxLength?: number; /** @description Maximum file size limit in bytes for individual files */ fileSizeLimit?: number; /** @description Maximum total size limit in bytes for all files combined */ fileListSizeLimit?: number; /** @description Accepted file types (mime types or extensions) */ accept?: string; /** @description Visual style variant of the upload button (VcFileUploaderSimple only) */ buttonType?: ButtonType; /** * @description Icon shown in the upload button (VcFileUploaderSimple only). Accepts a * class string (legacy `vc-icon-*`) or a Vue component (e.g. a Lucide icon from `@lucide/vue`). */ buttonIcon?: TIcon; /** @description Text label for the upload button (VcFileUploaderSimple only) */ buttonText?: string; /** @description Color theme of the upload button (VcFileUploaderSimple only) */ buttonColor?: ButtonColor; /** @description Size variant of the upload button (VcFileUploaderSimple only) */ buttonSize?: ButtonSize; /** * @description Icon shown in the per-file tag (VcFileUploaderSimple only). Accepts a * class string (legacy `vc-icon-*`) or a Vue component (e.g. a Lucide icon from `@lucide/vue`). */ tagIcon?: TIcon; /** @description Text to display when no files are selected */ noDataText?: string; /** @description Return type for uploaded files (file, base64, dataUrl) */ fileType?: ReturnFileType; /** @description Maximum width for file name content in tags (VcFileUploaderSimple only) */ tagMaxContentWidth?: string; /** @description Whether to allow multiple file selection */ multiple?: boolean; /** @description Whether to show uploaded file names as tags (VcFileUploaderSimple only) */ showFileName?: boolean; /** @description Whether to hide the clear all files action button (VcFileUploaderSimple only) */ hideClearAction?: boolean; /** @description Renders the drag-and-drop area variant (VcFileUploaderArea) instead of the button variant (VcFileUploaderSimple) */ useArea?: boolean; /** @description Optional helper text shown under the drop area, e.g. accepted formats/size (VcFileUploaderArea only) */ areaHintText?: string; /** @description Max height of the selected-files list before it scrolls, e.g. `320` or `'20rem'` (VcFileUploaderArea only) */ areaListHeight?: string | number; /** * @description Per-extension icon/color overrides for the file list (VcFileUploaderArea only), * keyed by lowercase extension without the dot. Merged over the built-in defaults - only the * extensions you name are affected, and either `icon` or `color` alone is enough to override just that part, * e.g. `{ zip: { color: '#8B5CF6' }, docx: { icon: FileType2 } }`. The reserved key `default` * restyles the fallback used for any extension with no built-in or custom entry. */ fileTypeMap?: Record; } export interface IFileTypeStyle { /** @description Icon shown for this extension. Accepts a class string (legacy `vc-icon-*`) or a Vue component. */ icon?: TIcon; /** @description CSS color for the icon and its tinted background (any valid CSS color, e.g. `var(--success-actions)` or `#8B5CF6`) */ color?: string; } export interface IFileUploaderEmit { (e: 'update:modelValue', pl: Array): void; (e: 'input', pl: Array): void; } export default function useFileUploader(props: IFileUploaderProps, emit: IFileUploaderEmit): { items: Ref; errorText: import("vue").ComputedRef; parseFiles: (files: Array) => void; processFiles: (rawFiles: Array) => Promise; onTagClose: (index: number | undefined) => void; onClear: () => void; };