sv5ui 2.0.0 → 2.2.0

package/dist/{FileUpload → components/FileUpload}/FileUpload.svelte

@@ -1,318 +1,269 @@
-<script lang="ts" module>
-    import type { FileUploadProps, FileUploadRejection } from './file-upload.types.js'
-
-    export type Props = FileUploadProps
-</script>
-
-<script lang="ts">
-    import { useId } from 'bits-ui'
-    import { untrack } from 'svelte'
-    import { fileUploadVariants, fileUploadDefaults } from './file-upload.variants.js'
-    import { getComponentConfig, iconsDefaults } from '../config.js'
-    import Icon from '../Icon/Icon.svelte'
-    import Button from '../Button/Button.svelte'
-    import Modal from '../Modal/Modal.svelte'
-    import { useFormField, useFormFieldEmit } from '../hooks/useFormField.svelte.js'
-
-    const config = getComponentConfig('fileUpload', fileUploadDefaults)
-    const icons = getComponentConfig('icons', iconsDefaults)
-
-    let {
-        ref = $bindable(null),
-        value = $bindable([]),
-        onValueChange,
-        multiple = false,
-        accept,
-        maxSize,
-        maxFiles,
-        onReject,
-        dropzone = true,
-        interactive = true,
-        label = 'Drop files here or click to upload',
-        description,
-        icon = icons.upload,
-        color = config.defaultVariants.color,
-        size = config.defaultVariants.size,
-        variant = config.defaultVariants.variant,
-        layout = config.defaultVariants.layout,
-        disabled = false,
-        loading = false,
-        loadingIcon = icons.loading,
-        preview = true,
-        highlight = false,
-        required = false,
-        fileIcon = icons.file,
-        imagePreview = true,
-        id,
-        name,
-        leadingSlot,
-        labelSlot,
-        descriptionSlot,
-        actionsSlot,
-        filesSlot,
-        fileSlot,
-        children,
-        class: className,
-        ui,
-        ...restProps
-    }: Props = $props()
-
-    const autoId = useId()
-
-    let inputRef = $state<HTMLInputElement | null>(null)
-    let dragCounter = $state(0)
-    let previewOpen = $state(false)
-    let previewFile = $state<File | null>(null)
-
-    const formFieldContext = useFormField()
-    const emit = useFormFieldEmit()
-
-    // Stable file identity key with separator to avoid collisions
-    const fileKey = (f: File) => `${f.name}:${f.size}:${f.lastModified}`
-
-    // Plain Map intentionally — urlCache is an internal optimization cache, not reactive UI
-    // state. SvelteMap mutations would cascade re-renders every time a URL is cached/evicted.
-    // eslint-disable-next-line svelte/prefer-svelte-reactivity
-    const urlCache = new Map<string, string>()
-
-    const hasError = $derived(
-        formFieldContext?.error !== undefined && formFieldContext?.error !== false
-    )
-    const resolvedHighlight = $derived(highlight || hasError)
-    const resolvedId = $derived(id ?? formFieldContext?.ariaId)
-    const resolvedName = $derived(name ?? formFieldContext?.name)
-    const ariaDescribedBy = $derived(
-        !formFieldContext
-            ? undefined
-            : hasError
-              ? `${formFieldContext.ariaId}-error`
-              : `${formFieldContext.ariaId}-description ${formFieldContext.ariaId}-help`
-    )
-
-    const isDisabled = $derived(disabled || loading)
-    const isDragging = $derived(dragCounter > 0)
-    const isFull = $derived(maxFiles !== undefined && value.length >= maxFiles)
-    const showFilesInside = $derived(
-        layout === 'grid' && !multiple && value.length > 0 && preview && variant === 'area'
-    )
-
-    // Pass booleans directly so compound variants with `false` values match correctly
-    const slots = $derived(
-        fileUploadVariants({
-            color: hasError ? 'error' : color,
-            size,
-            variant,
-            layout,
-            dropzone,
-            interactive: interactive && !isDisabled,
-            highlight: resolvedHighlight,
-            multiple,
-            disabled: isDisabled
-        })
-    )
-
-    const classes = $derived.by(() => {
-        const u = ui ?? {}
-        return {
-            root: slots.root({ class: [config.slots.root, className, u.root] }),
-            base: slots.base({ class: [config.slots.base, u.base] }),
-            wrapper: slots.wrapper({ class: [config.slots.wrapper, u.wrapper] }),
-            icon: slots.icon({ class: [config.slots.icon, u.icon] }),
-            label: slots.label({ class: [config.slots.label, u.label] }),
-            description: slots.description({ class: [config.slots.description, u.description] }),
-            actions: slots.actions({ class: [config.slots.actions, u.actions] }),
-            files: slots.files({ class: [config.slots.files, u.files] }),
-            file: slots.file({ class: [config.slots.file, u.file] }),
-            fileLeading: slots.fileLeading({ class: [config.slots.fileLeading, u.fileLeading] }),
-            fileWrapper: slots.fileWrapper({ class: [config.slots.fileWrapper, u.fileWrapper] }),
-            fileName: slots.fileName({ class: [config.slots.fileName, u.fileName] }),
-            fileSize: slots.fileSize({ class: [config.slots.fileSize, u.fileSize] }),
-            fileTrailing: slots.fileTrailing({
-                class: [config.slots.fileTrailing, u.fileTrailing]
-            }),
-            previewContent: slots.previewContent({
-                class: [config.slots.previewContent, u.previewContent]
-            }),
-            previewBody: slots.previewBody({ class: [config.slots.previewBody, u.previewBody] })
-        }
-    })
-
-    // Revoke blob URLs for files no longer in value (handles external bind:value resets)
-    $effect(() => {
-        const current = new Set(value.map(fileKey))
-        // Close preview if its file was removed externally — untrack to avoid subscribing to previewFile
-        const pf = untrack(() => previewFile)
-        if (pf && !current.has(fileKey(pf))) {
-            previewOpen = false
-            previewFile = null
-        }
-        for (const [key, url] of urlCache) {
-            if (!current.has(key)) {
-                URL.revokeObjectURL(url)
-                urlCache.delete(key)
-            }
-        }
-    })
-
-    export function open() {
-        if (isDisabled) return
-        inputRef?.click()
-    }
-
-    function isFileAccepted(file: File): boolean {
-        if (!accept) return true
-        return accept
-            .split(',')
-            .map((s) => s.trim())
-            .some((token) => {
-                if (!token || token === '*') return true
-                if (token.startsWith('.'))
-                    return file.name.toLowerCase().endsWith(token.toLowerCase())
-                if (token.endsWith('/*')) return file.type.startsWith(token.slice(0, -1))
-                return file.type === token
-            })
-    }
-
-    function validateIngress(file: File): FileUploadRejection['reason'] | null {
-        if (accept && !isFileAccepted(file)) return 'accept'
-        if (maxSize !== undefined && file.size > maxSize) return 'maxSize'
-        return null
-    }
-
-    function applyMaxFiles(candidates: File[]): {
-        accepted: File[]
-        rejected: FileUploadRejection[]
-    } {
-        if (maxFiles === undefined) return { accepted: candidates, rejected: [] }
-        const remaining = Math.max(0, maxFiles - value.length)
-        if (candidates.length <= remaining) return { accepted: candidates, rejected: [] }
-        return {
-            accepted: candidates.slice(0, remaining),
-            rejected: candidates.slice(remaining).map((file) => ({ file, reason: 'maxFiles' }))
-        }
-    }
-
-    function addFiles(newFiles: File[]) {
-        if (isDisabled) return
-
-        const rejected: FileUploadRejection[] = []
-        const passed: File[] = []
-        for (const file of newFiles) {
-            const reason = validateIngress(file)
-            if (reason) rejected.push({ file, reason })
-            else passed.push(file)
-        }
-
-        let accepted: File[]
-        if (!multiple) {
-            accepted = passed.slice(0, 1)
-        } else {
-            const existing = new Set(value.map(fileKey))
-            const deduped = passed.filter((f) => !existing.has(fileKey(f)))
-            const result = applyMaxFiles(deduped)
-            accepted = result.accepted
-            rejected.push(...result.rejected)
-        }
-
-        if (accepted.length) {
-            value = multiple ? [...value, ...accepted] : accepted
-            onValueChange?.(value)
-            emit.onChange()
-        }
-        if (rejected.length) onReject?.(rejected)
-    }
-
-    function removeFile(index: number) {
-        const removed = value[index]
-        const key = fileKey(removed)
-        if (previewFile && fileKey(previewFile) === key) {
-            previewOpen = false
-            previewFile = null
-        }
-        if (urlCache.has(key)) {
-            URL.revokeObjectURL(urlCache.get(key)!)
-            urlCache.delete(key)
-        }
-        value = value.filter((_, i) => i !== index)
-        onValueChange?.(value)
-        emit.onChange()
-    }
-
-    export function clearAll() {
-        previewOpen = false
-        previewFile = null
-        for (const [, url] of urlCache) URL.revokeObjectURL(url)
-        urlCache.clear()
-        value = []
-        onValueChange?.(value)
-        emit.onChange()
-    }
-
-    function handleInputChange(e: Event) {
-        const input = e.target as HTMLInputElement
-        if (input.files?.length) {
-            addFiles(Array.from(input.files))
-            input.value = ''
-        }
-    }
-
-    function handleDrop(e: DragEvent) {
-        e.preventDefault()
-        dragCounter = 0
-        if (!dropzone || isDisabled) return
-        const files = e.dataTransfer?.files
-        if (files?.length) addFiles(Array.from(files))
-    }
-
-    function handleDragEnter(e: DragEvent) {
-        e.preventDefault()
-        if (dropzone && !isDisabled) dragCounter++
-    }
-
-    function handleDragOver(e: DragEvent) {
-        e.preventDefault()
-    }
-
-    function handleDragLeave() {
-        dragCounter = Math.max(0, dragCounter - 1)
-    }
-
-    function handleAreaClick() {
-        if (interactive && !isDisabled) open()
-    }
-
-    function handleKeydown(e: KeyboardEvent) {
-        if (!interactive) return
-        if (e.key === 'Enter' || e.key === ' ') {
-            e.preventDefault()
-            open()
-        }
-    }
-
-    function formatFileSize(bytes: number): string {
-        if (bytes === 0) return '0 B'
-        const k = 1024
-        const sizes = ['B', 'KB', 'MB', 'GB']
-        const i = Math.floor(Math.log(bytes) / Math.log(k))
-        return `${(bytes / Math.pow(k, i)).toFixed(1)} ${sizes[i]}`
-    }
-
-    function isImageFile(file: File): boolean {
-        return file.type.startsWith('image/')
-    }
-
-    function openPreview(file: File) {
-        previewFile = file
-        previewOpen = true
-    }
-
-    function getObjectUrl(file: File): string {
-        const key = fileKey(file)
-        if (!urlCache.has(key)) {
-            urlCache.set(key, URL.createObjectURL(file))
-        }
-        return urlCache.get(key)!
+<script lang="ts" module></script>
+
+<script lang="ts">import { useId } from "bits-ui";
+import { untrack } from "svelte";
+import { fileUploadVariants, fileUploadDefaults } from "./file-upload.variants.js";
+import { getComponentConfig, iconsDefaults } from "../../config.js";
+import Icon from "../Icon/Icon.svelte";
+import Button from "../Button/Button.svelte";
+import Modal from "../Modal/Modal.svelte";
+import { useFormField, useFormFieldEmit } from "../../hooks/useFormField/index.js";
+const config = getComponentConfig("fileUpload", fileUploadDefaults);
+const icons = getComponentConfig("icons", iconsDefaults);
+let {
+  ref = $bindable(null),
+  value = $bindable([]),
+  onValueChange,
+  multiple = false,
+  accept,
+  maxSize,
+  maxFiles,
+  onReject,
+  dropzone = true,
+  interactive = true,
+  label = "Drop files here or click to upload",
+  description,
+  icon = icons.upload,
+  color = config.defaultVariants.color,
+  size = config.defaultVariants.size,
+  variant = config.defaultVariants.variant,
+  layout = config.defaultVariants.layout,
+  disabled = false,
+  loading = false,
+  loadingIcon = icons.loading,
+  preview = true,
+  highlight = false,
+  required = false,
+  fileIcon = icons.file,
+  imagePreview = true,
+  id,
+  name,
+  leadingSlot,
+  labelSlot,
+  descriptionSlot,
+  actionsSlot,
+  filesSlot,
+  fileSlot,
+  children,
+  class: className,
+  ui,
+  ...restProps
+} = $props();
+const autoId = useId();
+let inputRef = $state(null);
+let dragCounter = $state(0);
+let previewOpen = $state(false);
+let previewFile = $state(null);
+const formFieldContext = useFormField();
+const emit = useFormFieldEmit();
+const fileKey = (f) => `${f.name}:${f.size}:${f.lastModified}`;
+const urlCache = /* @__PURE__ */ new Map();
+const hasError = $derived(
+  formFieldContext?.error !== void 0 && formFieldContext?.error !== false
+);
+const resolvedHighlight = $derived(highlight || hasError);
+const resolvedId = $derived(id ?? formFieldContext?.ariaId);
+const resolvedName = $derived(name ?? formFieldContext?.name);
+const ariaDescribedBy = $derived(
+  !formFieldContext ? void 0 : hasError ? `${formFieldContext.ariaId}-error` : `${formFieldContext.ariaId}-description ${formFieldContext.ariaId}-help`
+);
+const isDisabled = $derived(disabled || loading);
+const isDragging = $derived(dragCounter > 0);
+const isFull = $derived(maxFiles !== void 0 && value.length >= maxFiles);
+const showFilesInside = $derived(
+  layout === "grid" && !multiple && value.length > 0 && preview && variant === "area"
+);
+const slots = $derived(
+  fileUploadVariants({
+    color: hasError ? "error" : color,
+    size,
+    variant,
+    layout,
+    dropzone,
+    interactive: interactive && !isDisabled,
+    highlight: resolvedHighlight,
+    multiple,
+    disabled: isDisabled
+  })
+);
+const classes = $derived.by(() => {
+  const u = ui ?? {};
+  return {
+    root: slots.root({ class: [config.slots.root, className, u.root] }),
+    base: slots.base({ class: [config.slots.base, u.base] }),
+    wrapper: slots.wrapper({ class: [config.slots.wrapper, u.wrapper] }),
+    icon: slots.icon({ class: [config.slots.icon, u.icon] }),
+    label: slots.label({ class: [config.slots.label, u.label] }),
+    description: slots.description({ class: [config.slots.description, u.description] }),
+    actions: slots.actions({ class: [config.slots.actions, u.actions] }),
+    files: slots.files({ class: [config.slots.files, u.files] }),
+    file: slots.file({ class: [config.slots.file, u.file] }),
+    fileLeading: slots.fileLeading({ class: [config.slots.fileLeading, u.fileLeading] }),
+    fileWrapper: slots.fileWrapper({ class: [config.slots.fileWrapper, u.fileWrapper] }),
+    fileName: slots.fileName({ class: [config.slots.fileName, u.fileName] }),
+    fileSize: slots.fileSize({ class: [config.slots.fileSize, u.fileSize] }),
+    fileTrailing: slots.fileTrailing({
+      class: [config.slots.fileTrailing, u.fileTrailing]
+    }),
+    previewContent: slots.previewContent({
+      class: [config.slots.previewContent, u.previewContent]
+    }),
+    previewBody: slots.previewBody({ class: [config.slots.previewBody, u.previewBody] })
+  };
+});
+$effect(() => {
+  const current = new Set(value.map(fileKey));
+  const pf = untrack(() => previewFile);
+  if (pf && !current.has(fileKey(pf))) {
+    previewOpen = false;
+    previewFile = null;
+  }
+  for (const [key, url] of urlCache) {
+    if (!current.has(key)) {
+      URL.revokeObjectURL(url);
+      urlCache.delete(key);
     }
+  }
+});
+$effect(() => {
+  return () => {
+    for (const [, url] of urlCache) URL.revokeObjectURL(url);
+    urlCache.clear();
+  };
+});
+export function open() {
+  if (isDisabled) return;
+  inputRef?.click();
+}
+function isFileAccepted(file) {
+  if (!accept) return true;
+  return accept.split(",").map((s) => s.trim()).some((token) => {
+    if (!token || token === "*") return true;
+    if (token.startsWith("."))
+      return file.name.toLowerCase().endsWith(token.toLowerCase());
+    if (token.endsWith("/*")) return file.type.startsWith(token.slice(0, -1));
+    return file.type === token;
+  });
+}
+function validateIngress(file) {
+  if (accept && !isFileAccepted(file)) return "accept";
+  if (maxSize !== void 0 && file.size > maxSize) return "maxSize";
+  return null;
+}
+function applyMaxFiles(candidates) {
+  if (maxFiles === void 0) return { accepted: candidates, rejected: [] };
+  const remaining = Math.max(0, maxFiles - value.length);
+  if (candidates.length <= remaining) return { accepted: candidates, rejected: [] };
+  return {
+    accepted: candidates.slice(0, remaining),
+    rejected: candidates.slice(remaining).map((file) => ({ file, reason: "maxFiles" }))
+  };
+}
+function addFiles(newFiles) {
+  if (isDisabled) return;
+  const rejected = [];
+  const passed = [];
+  for (const file of newFiles) {
+    const reason = validateIngress(file);
+    if (reason) rejected.push({ file, reason });
+    else passed.push(file);
+  }
+  let accepted;
+  if (!multiple) {
+    accepted = passed.slice(0, 1);
+  } else {
+    const existing = new Set(value.map(fileKey));
+    const deduped = passed.filter((f) => !existing.has(fileKey(f)));
+    const result = applyMaxFiles(deduped);
+    accepted = result.accepted;
+    rejected.push(...result.rejected);
+  }
+  if (accepted.length) {
+    value = multiple ? [...value, ...accepted] : accepted;
+    onValueChange?.(value);
+    emit.onChange();
+  }
+  if (rejected.length) onReject?.(rejected);
+}
+function removeFile(index) {
+  const removed = value[index];
+  const key = fileKey(removed);
+  if (previewFile && fileKey(previewFile) === key) {
+    previewOpen = false;
+    previewFile = null;
+  }
+  if (urlCache.has(key)) {
+    URL.revokeObjectURL(urlCache.get(key));
+    urlCache.delete(key);
+  }
+  value = value.filter((_, i) => i !== index);
+  onValueChange?.(value);
+  emit.onChange();
+}
+export function clearAll() {
+  previewOpen = false;
+  previewFile = null;
+  for (const [, url] of urlCache) URL.revokeObjectURL(url);
+  urlCache.clear();
+  value = [];
+  onValueChange?.(value);
+  emit.onChange();
+}
+function handleInputChange(e) {
+  const input = e.target;
+  if (input.files?.length) {
+    addFiles(Array.from(input.files));
+    input.value = "";
+  }
+}
+function handleDrop(e) {
+  e.preventDefault();
+  dragCounter = 0;
+  if (!dropzone || isDisabled) return;
+  const files = e.dataTransfer?.files;
+  if (files?.length) addFiles(Array.from(files));
+}
+function handleDragEnter(e) {
+  e.preventDefault();
+  if (dropzone && !isDisabled) dragCounter++;
+}
+function handleDragOver(e) {
+  e.preventDefault();
+}
+function handleDragLeave() {
+  dragCounter = Math.max(0, dragCounter - 1);
+}
+function handleAreaClick() {
+  if (interactive && !isDisabled) open();
+}
+function handleKeydown(e) {
+  if (!interactive) return;
+  if (e.key === "Enter" || e.key === " ") {
+    e.preventDefault();
+    open();
+  }
+}
+function formatFileSize(bytes) {
+  if (bytes === 0) return "0 B";
+  const k = 1024;
+  const sizes = ["B", "KB", "MB", "GB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return `${(bytes / Math.pow(k, i)).toFixed(1)} ${sizes[i]}`;
+}
+function isImageFile(file) {
+  return file.type.startsWith("image/");
+}
+function openPreview(file) {
+  previewFile = file;
+  previewOpen = true;
+}
+function getObjectUrl(file) {
+  const key = fileKey(file);
+  if (!urlCache.has(key)) {
+    urlCache.set(key, URL.createObjectURL(file));
+  }
+  return urlCache.get(key);
+}
 </script>
 
 <div {...restProps} bind:this={ref} class={classes.root} data-full={isFull ? '' : undefined}>