@expcat/tigercat-vue 2.1.2 → 2.1.4

package/dist/chunk-YNXP34KO.mjs

@@ -1,761 +0,0 @@
-import {
-  useTigerConfig
-} from "./chunk-UOJOJBEU.mjs";
-
-// src/components/Upload.ts
-import { defineComponent, ref, computed, watch, h, onBeforeUnmount } from "vue";
-import {
-  classNames,
-  coerceClassValue,
-  mergeStyleValues,
-  icon20ViewBox,
-  closeSolidIcon20PathD,
-  successCircleSolidIcon20PathD,
-  errorCircleSolidIcon20PathD,
-  getSpinnerSVG,
-  normalizeSvgAttrs,
-  getUploadLabels,
-  interpolateUploadLabel,
-  mergeTigerLocale,
-  prepareUploadFiles,
-  fileToUploadFile,
-  createUploadChunks,
-  createUploadQueueItem,
-  getUploadResumeKey,
-  runUploadQueue,
-  handleUploadDragOver,
-  handleUploadDragLeave,
-  handleUploadDrop,
-  formatFileSize,
-  getUploadButtonClasses,
-  getDragAreaClasses,
-  getFileListItemClasses,
-  getPictureCardClasses,
-  getUploadStatusIconClasses
-} from "@expcat/tigercat-core";
-var Upload = defineComponent({
-  name: "TigerUpload",
-  inheritAttrs: false,
-  props: {
-    /**
-     * Additional CSS classes
-     */
-    className: {
-      type: String,
-      default: void 0
-    },
-    /**
-     * Custom styles
-     */
-    style: {
-      type: Object,
-      default: void 0
-    },
-    /**
-     * Accepted file types (e.g., 'image/*', '.pdf')
-     */
-    accept: {
-      type: String
-    },
-    /**
-     * Whether to allow multiple file selection
-     * @default false
-     */
-    multiple: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * Maximum number of files
-     */
-    limit: {
-      type: Number
-    },
-    /**
-     * Maximum file size in bytes
-     */
-    maxSize: {
-      type: Number
-    },
-    /**
-     * Whether the upload is disabled
-     * @default false
-     */
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * Whether to enable drag and drop
-     * @default false
-     */
-    drag: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * List type for displaying files
-     * @default 'text'
-     */
-    listType: {
-      type: String,
-      default: "text"
-    },
-    /**
-     * List of uploaded files (v-model:file-list)
-     */
-    fileList: {
-      type: Array,
-      default: void 0
-    },
-    /**
-     * Whether to show the file list
-     * @default true
-     */
-    showFileList: {
-      type: Boolean,
-      default: true
-    },
-    /**
-     * Whether to auto upload when file is selected
-     * @default true
-     */
-    autoUpload: {
-      type: Boolean,
-      default: true
-    },
-    queue: { type: Boolean, default: false },
-    maxConcurrent: { type: Number, default: 2 },
-    chunkSize: { type: Number, default: void 0 },
-    resumable: { type: Boolean, default: false },
-    /**
-     * Custom upload request function
-     */
-    customRequest: {
-      type: Function
-    },
-    /**
-     * Before upload callback - return false to prevent upload
-     */
-    beforeUpload: {
-      type: Function
-    },
-    /**
-     * Locale overrides for Upload UI text
-     */
-    locale: {
-      type: Object,
-      default: void 0
-    },
-    /**
-     * Upload UI labels for i18n.
-     * When provided, merges with locale-based defaults.
-     */
-    labels: {
-      type: Object,
-      default: void 0
-    }
-  },
-  emits: {
-    /**
-     * Emitted when file list changes (for v-model:file-list)
-     */
-    "update:file-list": (files) => Array.isArray(files),
-    /**
-     * Emitted when file list changes
-     */
-    change: (_file, _fileList) => true,
-    /**
-     * Emitted when file is removed
-     */
-    remove: (_file, _fileList) => true,
-    /**
-     * Emitted when file is previewed
-     */
-    preview: (_file) => true,
-    /**
-     * Emitted on upload progress
-     */
-    progress: (progress, _file) => typeof progress === "number",
-    /**
-     * Emitted on upload success
-     */
-    success: (_response, _file) => true,
-    /**
-     * Emitted on upload error
-     */
-    error: (error, _file) => error instanceof Error,
-    "chunk-progress": (_chunk, progress, _file) => typeof progress === "number",
-    "queue-change": (queue) => Array.isArray(queue),
-    /**
-     * Emitted when file limit is exceeded
-     */
-    exceed: (files, fileList) => Array.isArray(files) && Array.isArray(fileList)
-  },
-  setup(props, { emit, slots, attrs }) {
-    const inputRef = ref(null);
-    const isDragging = ref(false);
-    const spinnerSvg = getSpinnerSVG("spinner");
-    const config = useTigerConfig();
-    const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
-    const labels = computed(() => getUploadLabels(mergedLocale.value, props.labels));
-    const isControlled = computed(() => props.fileList !== void 0);
-    const internalFileList = ref(props.fileList ? [...props.fileList] : []);
-    watch(
-      () => props.fileList,
-      (value) => {
-        if (value !== void 0) {
-          internalFileList.value = [...value];
-        }
-      },
-      { deep: true }
-    );
-    const fileListValue = computed(() => {
-      if (isControlled.value) {
-        return props.fileList ?? [];
-      }
-      return internalFileList.value;
-    });
-    const objectUrls = /* @__PURE__ */ new Map();
-    const revokeUnusedObjectUrls = (files) => {
-      const activeFiles = new Set(
-        files.flatMap((file) => file.file && !file.url ? [file.file] : [])
-      );
-      objectUrls.forEach((url, file) => {
-        if (!activeFiles.has(file)) {
-          URL.revokeObjectURL(url);
-          objectUrls.delete(file);
-        }
-      });
-    };
-    watch(fileListValue, revokeUnusedObjectUrls, { deep: true });
-    onBeforeUnmount(() => {
-      objectUrls.forEach((url) => URL.revokeObjectURL(url));
-      objectUrls.clear();
-    });
-    const setFileList = (value) => {
-      if (!isControlled.value) {
-        internalFileList.value = value;
-      }
-      emit("update:file-list", value);
-    };
-    const handleClick = () => {
-      if (props.disabled) return;
-      inputRef.value?.click();
-    };
-    const handleFileChange = async (event) => {
-      const target = event.target;
-      const files = Array.from(target.files || []);
-      await processFiles(files);
-      if (target) {
-        target.value = "";
-      }
-    };
-    const processFiles = async (incomingFiles) => {
-      if (incomingFiles.length === 0) return;
-      const prepared = await prepareUploadFiles({
-        currentCount: fileListValue.value.length,
-        incomingFiles,
-        limit: props.limit,
-        accept: props.accept,
-        maxSize: props.maxSize,
-        beforeUpload: props.beforeUpload
-      });
-      if (prepared.rejectedExceedFiles.length > 0) {
-        emit("exceed", prepared.rejectedExceedFiles, fileListValue.value);
-      }
-      let nextFileList = [...fileListValue.value];
-      for (const file of prepared.acceptedFiles) {
-        const uploadFile = fileToUploadFile(file);
-        nextFileList = [...nextFileList, uploadFile];
-        setFileList(nextFileList);
-        emit("change", uploadFile, nextFileList);
-        if (props.autoUpload && !props.queue) {
-          await uploadOne(file, uploadFile, () => setFileList([...nextFileList]));
-        }
-      }
-      if (props.autoUpload && props.queue) {
-        const queueItems = prepared.acceptedFiles.map(
-          (file) => createUploadQueueItem(
-            file,
-            nextFileList.find((item) => item.file === file)?.uid,
-            props.chunkSize
-          )
-        );
-        emit("queue-change", queueItems);
-        await runUploadQueue(
-          queueItems,
-          async (item) => {
-            const uploadFile = nextFileList.find((candidate) => candidate.uid === item.id);
-            if (!uploadFile) return;
-            await uploadOne(item.file, uploadFile, () => setFileList([...nextFileList]));
-          },
-          { concurrency: props.maxConcurrent, onChange: (items) => emit("queue-change", items) }
-        );
-      }
-    };
-    const uploadOne = async (file, uploadFile, notify) => {
-      uploadFile.status = "uploading";
-      notify();
-      if (!props.customRequest) {
-        uploadFile.progress = 100;
-        uploadFile.status = "success";
-        notify();
-        return;
-      }
-      const chunks = props.chunkSize ? createUploadChunks(file, props.chunkSize) : [];
-      const resumeKey = props.resumable ? getUploadResumeKey(file) : void 0;
-      if (chunks.length <= 1) {
-        await requestUpload(file, uploadFile, notify, { resumeKey });
-        return;
-      }
-      for (const chunk of chunks) {
-        const chunkFile = new File([chunk.blob], file.name, {
-          type: file.type,
-          lastModified: file.lastModified
-        });
-        await requestUpload(chunkFile, uploadFile, notify, {
-          originalFile: file,
-          chunk,
-          totalChunks: chunks.length,
-          resumeKey
-        });
-      }
-      uploadFile.progress = 100;
-      uploadFile.status = "success";
-      emit("success", { chunks: chunks.length, resumeKey }, uploadFile);
-      notify();
-    };
-    const requestUpload = (file, uploadFile, notify, options) => {
-      return new Promise((resolve, reject) => {
-        props.customRequest?.({
-          file,
-          originalFile: options.originalFile,
-          chunk: options.chunk,
-          chunkIndex: options.chunk?.index,
-          totalChunks: options.totalChunks,
-          resumeKey: options.resumeKey,
-          onProgress: (progress) => {
-            const nextProgress = options.chunk ? Math.round(
-              (options.chunk.index + progress / 100) / (options.totalChunks ?? 1) * 100
-            ) : progress;
-            uploadFile.progress = nextProgress;
-            if (options.chunk) {
-              emit("chunk-progress", options.chunk, progress, uploadFile);
-            }
-            emit("progress", nextProgress, uploadFile);
-            notify();
-          },
-          onSuccess: (response) => {
-            if (!options.chunk) {
-              uploadFile.status = "success";
-              uploadFile.progress = 100;
-              emit("success", response, uploadFile);
-              notify();
-            }
-            resolve();
-          },
-          onError: (error) => {
-            uploadFile.status = "error";
-            uploadFile.error = error.message;
-            emit("error", error, uploadFile);
-            notify();
-            reject(error);
-          }
-        });
-      });
-    };
-    const handleRemove = (file) => {
-      const newFileList = fileListValue.value.filter((f) => f.uid !== file.uid);
-      setFileList(newFileList);
-      emit("remove", file, newFileList);
-      emit("change", file, newFileList);
-    };
-    const handlePreview = (file) => {
-      emit("preview", file);
-    };
-    const handleDragOver = (event) => {
-      const result = handleUploadDragOver(event, props.disabled);
-      if (!result.handled) return;
-      isDragging.value = result.isDragging;
-    };
-    const handleDragLeave = (event) => {
-      const result = handleUploadDragLeave(event, props.disabled);
-      if (!result.handled) return;
-      isDragging.value = result.isDragging;
-    };
-    const handleDrop = async (event) => {
-      const result = handleUploadDrop(event, props.disabled);
-      if (!result.handled) return;
-      isDragging.value = result.isDragging;
-      await processFiles(result.files);
-    };
-    const handleDragKeydown = (event) => {
-      if (props.disabled) return;
-      if (event.key === "Enter" || event.key === " ") {
-        event.preventDefault();
-        handleClick();
-      }
-    };
-    const renderInput = () => {
-      return h("input", {
-        ref: inputRef,
-        type: "file",
-        accept: props.accept,
-        multiple: props.multiple,
-        disabled: props.disabled,
-        style: { display: "none" },
-        onChange: handleFileChange,
-        "aria-hidden": "true"
-      });
-    };
-    const renderUploadButton = () => {
-      if (props.drag) {
-        const dragInner = slots.default ? slots.default() : [
-          h(
-            "svg",
-            {
-              class: "w-12 h-12 mb-3 text-gray-400",
-              fill: "none",
-              stroke: "currentColor",
-              viewBox: "0 0 24 24",
-              "aria-hidden": "true"
-            },
-            [
-              h("path", {
-                "stroke-linecap": "round",
-                "stroke-linejoin": "round",
-                "stroke-width": "2",
-                d: "M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
-              })
-            ]
-          ),
-          h("p", { class: "mb-2 text-sm" }, [
-            h("span", { class: "font-semibold" }, labels.value.clickToUploadText),
-            ` ${labels.value.dragAndDropText}`
-          ]),
-          props.accept && h(
-            "p",
-            { class: "text-xs text-gray-500" },
-            interpolateUploadLabel(labels.value.acceptInfoText, {
-              accept: props.accept
-            })
-          ),
-          props.maxSize && h(
-            "p",
-            { class: "text-xs text-gray-500" },
-            interpolateUploadLabel(labels.value.maxSizeInfoText, {
-              maxSize: formatFileSize(props.maxSize)
-            })
-          )
-        ];
-        return h(
-          "div",
-          {
-            class: getDragAreaClasses(isDragging.value, props.disabled),
-            onClick: handleClick,
-            onKeydown: handleDragKeydown,
-            onDragover: handleDragOver,
-            onDragleave: handleDragLeave,
-            onDrop: handleDrop,
-            role: "button",
-            tabindex: props.disabled ? -1 : 0,
-            "aria-disabled": props.disabled,
-            "aria-label": labels.value.dragAreaAriaLabel
-          },
-          dragInner
-        );
-      }
-      return h(
-        "button",
-        {
-          type: "button",
-          class: getUploadButtonClasses(props.disabled),
-          onClick: handleClick,
-          disabled: props.disabled,
-          "aria-label": labels.value.buttonAriaLabel
-        },
-        slots.default ? slots.default() : labels.value.selectFileText
-      );
-    };
-    const renderFileList = () => {
-      if (!props.showFileList || fileListValue.value.length === 0) {
-        return null;
-      }
-      if (props.listType === "picture-card") {
-        return h(
-          "div",
-          { class: "flex flex-wrap gap-2 mt-4" },
-          fileListValue.value.map((file) => renderPictureCard(file))
-        );
-      }
-      return h(
-        "ul",
-        {
-          class: "mt-4 space-y-2",
-          role: "list",
-          "aria-label": labels.value.uploadedFilesAriaLabel
-        },
-        fileListValue.value.map((file) => renderFileItem(file))
-      );
-    };
-    const renderFileItem = (file) => {
-      return h(
-        "li",
-        {
-          class: getFileListItemClasses(file.status),
-          key: file.uid
-        },
-        [
-          h("div", { class: "flex items-center flex-1 min-w-0" }, [
-            // File icon
-            h(
-              "svg",
-              {
-                class: "w-5 h-5 mr-2 flex-shrink-0",
-                fill: "none",
-                stroke: "currentColor",
-                viewBox: "0 0 24 24",
-                "aria-hidden": "true"
-              },
-              [
-                h("path", {
-                  "stroke-linecap": "round",
-                  "stroke-linejoin": "round",
-                  "stroke-width": "2",
-                  d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
-                })
-              ]
-            ),
-            // File name and size
-            h("div", { class: "flex-1 min-w-0" }, [
-              h("p", { class: "text-sm font-medium truncate" }, file.name),
-              file.size && h("p", { class: "text-xs text-gray-500" }, formatFileSize(file.size))
-            ])
-          ]),
-          // Actions
-          h("div", { class: "flex items-center space-x-2 ml-4" }, [
-            // Status icon
-            file.status === "success" && h(
-              "svg",
-              {
-                class: getUploadStatusIconClasses("success", "sm"),
-                fill: "currentColor",
-                viewBox: icon20ViewBox,
-                "aria-label": labels.value.successAriaLabel
-              },
-              [
-                h("path", {
-                  "fill-rule": "evenodd",
-                  d: successCircleSolidIcon20PathD,
-                  "clip-rule": "evenodd"
-                })
-              ]
-            ),
-            file.status === "error" && h(
-              "svg",
-              {
-                class: getUploadStatusIconClasses("error", "sm"),
-                fill: "currentColor",
-                viewBox: icon20ViewBox,
-                "aria-label": labels.value.errorAriaLabel
-              },
-              [
-                h("path", {
-                  "fill-rule": "evenodd",
-                  d: errorCircleSolidIcon20PathD,
-                  "clip-rule": "evenodd"
-                })
-              ]
-            ),
-            file.status === "uploading" && h(
-              "svg",
-              {
-                class: getUploadStatusIconClasses("uploading", "sm", {
-                  spinning: true
-                }),
-                fill: "none",
-                viewBox: spinnerSvg.viewBox,
-                "aria-label": labels.value.uploadingAriaLabel
-              },
-              spinnerSvg.elements.map((el) => h(el.type, normalizeSvgAttrs(el.attrs)))
-            ),
-            // Remove button
-            h(
-              "button",
-              {
-                type: "button",
-                class: "text-gray-400 hover:text-red-500 transition-colors",
-                onClick: () => handleRemove(file),
-                "aria-label": interpolateUploadLabel(labels.value.removeFileAriaLabel, {
-                  fileName: file.name
-                })
-              },
-              [
-                h(
-                  "svg",
-                  {
-                    class: "w-5 h-5",
-                    fill: "currentColor",
-                    viewBox: icon20ViewBox,
-                    "aria-hidden": "true"
-                  },
-                  [
-                    h("path", {
-                      "fill-rule": "evenodd",
-                      d: closeSolidIcon20PathD,
-                      "clip-rule": "evenodd"
-                    })
-                  ]
-                )
-              ]
-            )
-          ])
-        ]
-      );
-    };
-    const renderPictureCard = (file) => {
-      let imageUrl = file.url ?? "";
-      if (!imageUrl && file.file && typeof URL !== "undefined" && typeof URL.createObjectURL === "function") {
-        imageUrl = objectUrls.get(file.file) ?? "";
-        if (!imageUrl) {
-          imageUrl = URL.createObjectURL(file.file);
-          objectUrls.set(file.file, imageUrl);
-        }
-      }
-      return h(
-        "div",
-        {
-          class: getPictureCardClasses(file.status),
-          key: file.uid
-        },
-        [
-          // Image preview
-          imageUrl && h("img", {
-            src: imageUrl,
-            alt: file.name,
-            class: "w-full h-full object-cover"
-          }),
-          // Overlay
-          h(
-            "div",
-            {
-              class: "absolute inset-0 bg-black/0 hover:bg-black/50 transition-all flex items-center justify-center space-x-2 opacity-0 hover:opacity-100"
-            },
-            [
-              // Preview button
-              h(
-                "button",
-                {
-                  type: "button",
-                  class: "text-white hover:text-blue-200 transition-colors",
-                  onClick: () => handlePreview(file),
-                  "aria-label": interpolateUploadLabel(labels.value.previewFileAriaLabel, {
-                    fileName: file.name
-                  })
-                },
-                [
-                  h(
-                    "svg",
-                    {
-                      class: "w-6 h-6",
-                      fill: "none",
-                      stroke: "currentColor",
-                      viewBox: "0 0 24 24",
-                      "aria-hidden": "true"
-                    },
-                    [
-                      h("path", {
-                        "stroke-linecap": "round",
-                        "stroke-linejoin": "round",
-                        "stroke-width": "2",
-                        d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-                      }),
-                      h("path", {
-                        "stroke-linecap": "round",
-                        "stroke-linejoin": "round",
-                        "stroke-width": "2",
-                        d: "M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
-                      })
-                    ]
-                  )
-                ]
-              ),
-              // Remove button
-              h(
-                "button",
-                {
-                  type: "button",
-                  class: "text-white hover:text-red-200 transition-colors",
-                  onClick: () => handleRemove(file),
-                  "aria-label": interpolateUploadLabel(labels.value.removeFileAriaLabel, {
-                    fileName: file.name
-                  })
-                },
-                [
-                  h(
-                    "svg",
-                    {
-                      class: "w-6 h-6",
-                      fill: "currentColor",
-                      viewBox: "0 0 20 20",
-                      "aria-hidden": "true"
-                    },
-                    [
-                      h("path", {
-                        "fill-rule": "evenodd",
-                        d: "M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z",
-                        "clip-rule": "evenodd"
-                      })
-                    ]
-                  )
-                ]
-              )
-            ]
-          ),
-          // Status indicator
-          file.status === "uploading" && h(
-            "div",
-            {
-              class: "absolute inset-0 bg-white/75 flex items-center justify-center"
-            },
-            [
-              h(
-                "svg",
-                {
-                  class: getUploadStatusIconClasses("uploading", "lg", {
-                    spinning: true
-                  }),
-                  fill: "none",
-                  viewBox: spinnerSvg.viewBox
-                },
-                spinnerSvg.elements.map((el) => h(el.type, normalizeSvgAttrs(el.attrs)))
-              )
-            ]
-          )
-        ]
-      );
-    };
-    return () => {
-      return h(
-        "div",
-        {
-          ...attrs,
-          class: classNames(
-            "tiger-upload",
-            props.className,
-            coerceClassValue(attrs.class)
-          ),
-          style: mergeStyleValues(attrs.style, props.style)
-        },
-        [renderInput(), renderUploadButton(), renderFileList()]
-      );
-    };
-  }
-});
-var Upload_default = Upload;
-
-export {
-  Upload,
-  Upload_default
-};