@expcat/tigercat-vue 2.1.2 → 2.1.3

package/dist/{chunk-JHFM6IFO.mjs → chunk-PVJDEAOW.mjs}

@@ -1,9 +1,12 @@
+import {
+  flattenSlotVNodes
+} from "./chunk-FEVDV3I6.mjs";
 import {
   useTigerConfig
-} from "./chunk-UOJOJBEU.mjs";
+} from "./chunk-4GOTWNOO.mjs";
 
 // src/components/AvatarGroup.ts
-import { computed, defineComponent, h, provide, reactive, watch } from "vue";
+import { computed, defineComponent, h, provide, reactive, watch, Text } from "vue";
 import {
   coerceClassValue,
   getAvatarGroupClasses,
@@ -28,16 +31,18 @@ var AvatarGroup = defineComponent({
       type: String,
       default: void 0
     },
+    shape: {
+      type: String,
+      default: void 0
+    },
     className: {
       type: String,
       default: void 0
     },
-    /** Locale overrides merged on top of ConfigProvider locale */
     locale: {
       type: Object,
       default: void 0
     },
-    /** Text/aria label overrides */
     labels: {
       type: Object,
       default: void 0
@@ -49,23 +54,27 @@ var AvatarGroup = defineComponent({
     const labels = computed(() => getAvatarGroupLabels(mergedLocale.value, props.labels));
     const groupContext = reactive({
       size: props.size,
+      shape: props.shape,
       itemClass: getAvatarGroupItemClasses()
     });
     watch(
-      () => props.size,
-      (size) => {
+      () => [props.size, props.shape],
+      ([size, shape]) => {
         groupContext.size = size;
+        groupContext.shape = shape;
       }
     );
     provide(AVATAR_GROUP_INJECTION_KEY, groupContext);
     return () => {
-      const children = slots.default?.() ?? [];
-      const flatChildren = children.flatMap(
-        (vnode) => Array.isArray(vnode.children) ? vnode.children : [vnode]
-      );
+      const avatars = flattenSlotVNodes(slots.default?.()).filter((child) => {
+        if (child.type === Text) return false;
+        const type = child.type;
+        return typeof type === "object" && type?.name === "TigerAvatar";
+      });
       const attrsRecord = attrs;
       const attrsClass = attrsRecord.class;
-      const { visibleItems, overflowCount } = getVisibleGroupItems(flatChildren, props.max);
+      const { visibleItems, overflowCount, visibleCount } = getVisibleGroupItems(avatars, props.max);
+      const overflowShape = props.shape ?? "circle";
       return h(
         "div",
         {
@@ -79,7 +88,12 @@ var AvatarGroup = defineComponent({
           overflowCount > 0 ? h(
             "span",
             {
-              class: getAvatarGroupOverflowClasses(props.size ?? "md"),
+              class: getAvatarGroupOverflowClasses(
+                props.size ?? "md",
+                overflowShape,
+                visibleCount > 0
+              ),
+              role: "img",
               "aria-label": getAvatarGroupOverflowLabel(
                 overflowCount,
                 labels.value.overflowAriaLabel

package/dist/chunk-QFASGPNS.mjs

@@ -0,0 +1,576 @@
+import {
+  ImagePreview
+} from "./chunk-JBSMLUJJ.mjs";
+import {
+  Icon
+} from "./chunk-OGKNRXUA.mjs";
+import {
+  Button
+} from "./chunk-4KIZXFFG.mjs";
+import {
+  FORM_ITEM_CONTROL_INJECTION_KEY
+} from "./chunk-P2LZ2MR5.mjs";
+import {
+  useTigerConfig
+} from "./chunk-4GOTWNOO.mjs";
+
+// src/components/Upload.ts
+import {
+  defineComponent,
+  ref,
+  computed,
+  watch,
+  h,
+  onBeforeUnmount,
+  inject,
+  useId
+} from "vue";
+import {
+  classNames,
+  coerceClassValue,
+  mergeStyleValues,
+  mergeAriaDescribedBy,
+  mergeTigerLocale,
+  getUploadLabels,
+  interpolateUploadLabel,
+  isImageUploadFile,
+  formatFileSize,
+  getDragAreaClasses,
+  getFileListItemClasses,
+  getPictureCardClasses,
+  getUploadStatusIconClasses,
+  handleUploadDragOver,
+  handleUploadDragLeave,
+  handleUploadDrop,
+  readUploadDropFiles,
+  createUploadController,
+  createUploadPreviewUrlCache,
+  runShakeAnimation,
+  uploadFileInputClasses,
+  uploadIconActionClasses,
+  uploadItemActionsClasses,
+  uploadListClasses,
+  uploadPictureImageWrapClasses,
+  uploadPictureListClasses,
+  uploadPictureOverlayClasses,
+  uploadProgressTrackClasses,
+  uploadProgressValueClasses
+} from "@expcat/tigercat-core";
+var Upload = defineComponent({
+  name: "TigerUpload",
+  inheritAttrs: false,
+  props: {
+    className: { type: String, default: void 0 },
+    style: { type: Object, default: void 0 },
+    accept: { type: String },
+    multiple: { type: Boolean, default: false },
+    limit: { type: Number },
+    maxSize: { type: Number },
+    disabled: { type: Boolean, default: false },
+    drag: { type: Boolean, default: false },
+    listType: { type: String, default: "text" },
+    fileList: { type: Array, default: void 0 },
+    defaultFileList: { type: Array, default: void 0 },
+    name: { type: String, default: void 0 },
+    status: { type: String, default: void 0 },
+    action: { type: String, default: void 0 },
+    method: { type: String, default: void 0 },
+    headers: { type: Object, default: void 0 },
+    data: { type: Object, default: void 0 },
+    withCredentials: { type: Boolean, default: false },
+    showFileList: { type: Boolean, 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 },
+    customRequest: {
+      type: Function
+    },
+    beforeUpload: {
+      type: Function
+    },
+    onRemove: {
+      type: Function
+    },
+    locale: { type: Object, default: void 0 },
+    labels: { type: Object, default: void 0 }
+  },
+  emits: {
+    "update:file-list": (files) => Array.isArray(files),
+    change: (_file, _fileList) => true,
+    remove: (_file, _fileList) => true,
+    preview: (_file) => true,
+    progress: (progress, _file) => typeof progress === "number",
+    success: (_response, _file) => true,
+    error: (error, _file) => error instanceof Error,
+    "chunk-progress": (_chunk, progress, _file) => typeof progress === "number",
+    "queue-change": (queue) => Array.isArray(queue),
+    exceed: (files, fileList) => Array.isArray(files) && Array.isArray(fileList),
+    reject: (files) => Array.isArray(files)
+  },
+  setup(props, { emit, slots, attrs, expose }) {
+    const inputRef = ref(null);
+    const triggerRef = ref(null);
+    const rootRef = ref(null);
+    const isDragging = ref(false);
+    const previewSrc = ref(null);
+    const previewUrls = createUploadPreviewUrlCache();
+    const config = useTigerConfig();
+    const formItemControl = inject(
+      FORM_ITEM_CONTROL_INJECTION_KEY,
+      null
+    );
+    const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
+    const labels = computed(() => getUploadLabels(mergedLocale.value, props.labels));
+    const effectiveDisabled = computed(
+      () => props.disabled || (formItemControl?.disabled.value ?? false)
+    );
+    const status = computed(
+      () => props.status ?? formItemControl?.status.value ?? "default"
+    );
+    const autoId = useId();
+    const triggerId = computed(() => formItemControl?.id.value ?? `tiger-upload-${autoId}`);
+    const inputId = computed(() => `${triggerId.value}-input`);
+    const fieldName = computed(() => props.name ?? formItemControl?.name.value);
+    const describedBy = computed(
+      () => mergeAriaDescribedBy(
+        typeof attrs["aria-describedby"] === "string" ? attrs["aria-describedby"] : void 0,
+        formItemControl?.describedBy.value
+      )
+    );
+    const isControlled = computed(() => props.fileList !== void 0);
+    const workingList = ref([...props.fileList ?? props.defaultFileList ?? []]);
+    const fileListValue = computed(
+      () => isControlled.value ? props.fileList ?? workingList.value : workingList.value
+    );
+    watch(
+      () => props.fileList,
+      (value) => {
+        if (value !== void 0) workingList.value = [...value];
+      }
+    );
+    watch(fileListValue, (files) => previewUrls.sync(files), { deep: true, immediate: true });
+    watch(
+      () => [status.value, formItemControl?.shakeTrigger.value],
+      (current, previous) => {
+        if (!previous) return;
+        if (current[0] === "error") runShakeAnimation(rootRef.value);
+      },
+      { flush: "post" }
+    );
+    onBeforeUnmount(() => {
+      previewUrls.dispose();
+      controller.dispose();
+    });
+    const setFileList = (value, changed) => {
+      workingList.value = value;
+      emit("update:file-list", value);
+      if (changed) emit("change", changed, value);
+      formItemControl?.onChange(value);
+    };
+    const controller = createUploadController({
+      host: {
+        getFileList: () => workingList.value,
+        setFileList
+      },
+      getConfig: () => ({
+        accept: props.accept,
+        limit: props.limit,
+        maxSize: props.maxSize,
+        autoUpload: props.autoUpload,
+        queue: props.queue,
+        maxConcurrent: props.maxConcurrent,
+        chunkSize: props.chunkSize,
+        resumable: props.resumable,
+        action: props.action,
+        name: fieldName.value,
+        method: props.method,
+        headers: props.headers,
+        data: props.data,
+        withCredentials: props.withCredentials,
+        customRequest: props.customRequest,
+        beforeUpload: props.beforeUpload
+      }),
+      callbacks: {
+        onRemove: (file, list) => props.onRemove?.(file, list),
+        onProgress: (progress, file) => emit("progress", progress, file),
+        onSuccess: (response, file) => emit("success", response, file),
+        onError: (error, file) => emit("error", error, file),
+        onExceed: (files, list) => emit("exceed", files, list),
+        onReject: (files) => emit("reject", files),
+        onQueueChange: (queue) => emit("queue-change", queue),
+        onChunkProgress: (chunk, progress, file) => emit("chunk-progress", chunk, progress, file)
+      }
+    });
+    const openPicker = () => {
+      if (effectiveDisabled.value) return;
+      inputRef.value?.click();
+    };
+    const handleFileChange = async (event) => {
+      event.stopPropagation();
+      const target = event.target;
+      await controller.processFiles(Array.from(target.files || []));
+      target.value = "";
+    };
+    const handleRemove = async (file) => {
+      if (effectiveDisabled.value) return;
+      const removed = await controller.remove(file);
+      if (removed) emit("remove", file, fileListValue.value);
+    };
+    const handlePreview = (file) => {
+      if (effectiveDisabled.value) return;
+      emit("preview", file);
+      if (attrs.onPreview) return;
+      const url = previewUrls.get(file);
+      if (url) previewSrc.value = url;
+    };
+    const handleFocusOut = (event) => {
+      const next = event.relatedTarget;
+      if (next && event.currentTarget.contains(next)) return;
+      formItemControl?.onBlur();
+    };
+    expose({
+      focus: () => {
+        const node = triggerRef.value;
+        if (!node) return;
+        if (typeof node.focus === "function") node.focus();
+        else node.$el?.focus?.();
+      },
+      submit: () => controller.submit(),
+      abort: (uid) => controller.abort(uid),
+      retry: (file) => controller.retry(file)
+    });
+    const statusIcon = (fileStatus, size) => {
+      if (fileStatus === "success") {
+        return h(Icon, {
+          name: "success",
+          class: getUploadStatusIconClasses("success", size),
+          role: "img",
+          "aria-label": labels.value.successAriaLabel
+        });
+      }
+      if (fileStatus === "error") {
+        return h(Icon, {
+          name: "error",
+          class: getUploadStatusIconClasses("error", size),
+          role: "img",
+          "aria-label": labels.value.errorAriaLabel
+        });
+      }
+      if (fileStatus === "uploading") {
+        return h(Icon, {
+          name: "refresh",
+          class: getUploadStatusIconClasses("uploading", size, { spinning: true }),
+          role: "img",
+          "aria-label": labels.value.uploadingAriaLabel
+        });
+      }
+      return null;
+    };
+    const progressBlock = (file, errorId) => [
+      file.status === "uploading" ? h(
+        "div",
+        {
+          class: uploadProgressTrackClasses,
+          role: "progressbar",
+          "aria-valuemin": 0,
+          "aria-valuemax": 100,
+          "aria-valuenow": file.progress ?? 0
+        },
+        [
+          h("div", {
+            class: uploadProgressValueClasses,
+            style: { width: `${file.progress ?? 0}%` }
+          })
+        ]
+      ) : null,
+      file.status === "error" && file.error ? h("p", { id: errorId, class: "text-xs text-[var(--tiger-error,#dc2626)]" }, file.error) : null
+    ];
+    const actionButtons = (file, picture) => {
+      const canPreview = Boolean(attrs.onPreview) || isImageUploadFile(file) && Boolean(previewUrls.get(file));
+      const actionClass = picture ? "text-[var(--tiger-on-primary,#ffffff)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--tiger-focus-ring,var(--tiger-primary,#2563eb))] rounded-sm" : uploadIconActionClasses;
+      return [
+        canPreview ? h(
+          "button",
+          {
+            type: "button",
+            class: actionClass,
+            disabled: effectiveDisabled.value,
+            tabindex: effectiveDisabled.value ? -1 : 0,
+            onClick: () => handlePreview(file),
+            "aria-label": interpolateUploadLabel(labels.value.previewFileAriaLabel, {
+              fileName: file.name
+            })
+          },
+          [
+            h(Icon, {
+              name: "eye",
+              class: picture ? "w-6 h-6" : "w-5 h-5",
+              "aria-hidden": true
+            })
+          ]
+        ) : null,
+        h(
+          "button",
+          {
+            type: "button",
+            class: actionClass,
+            disabled: effectiveDisabled.value,
+            tabindex: effectiveDisabled.value ? -1 : 0,
+            onClick: () => handleRemove(file),
+            "aria-label": interpolateUploadLabel(labels.value.removeFileAriaLabel, {
+              fileName: file.name
+            })
+          },
+          [
+            h(Icon, {
+              name: picture ? "trash" : "close",
+              class: picture ? "w-6 h-6" : "w-5 h-5",
+              "aria-hidden": true
+            })
+          ]
+        )
+      ];
+    };
+    return () => {
+      const forwarded = Object.fromEntries(
+        Object.entries(attrs).filter(
+          ([key]) => key !== "class" && key !== "style" && key !== "onPreview"
+        )
+      );
+      const triggerAria = {
+        id: triggerId.value,
+        "aria-invalid": status.value === "error" ? true : void 0,
+        "aria-required": formItemControl?.required.value ? true : void 0,
+        "aria-describedby": describedBy.value,
+        "aria-labelledby": formItemControl?.labelId.value,
+        "aria-controls": inputId.value
+      };
+      const trigger = props.drag ? h(
+        "div",
+        {
+          ...forwarded,
+          ...triggerAria,
+          ref: triggerRef,
+          class: getDragAreaClasses(isDragging.value, effectiveDisabled.value),
+          onClick: openPicker,
+          onKeydown: (event) => {
+            if (effectiveDisabled.value) return;
+            if (event.key === "Enter" || event.key === " ") {
+              event.preventDefault();
+              openPicker();
+            }
+          },
+          onDragover: (event) => {
+            const result = handleUploadDragOver(event, effectiveDisabled.value);
+            if (!result.handled) return;
+            isDragging.value = result.isDragging;
+          },
+          onDragleave: (event) => {
+            const result = handleUploadDragLeave(
+              event,
+              effectiveDisabled.value,
+              event.currentTarget
+            );
+            if (!result.handled) return;
+            isDragging.value = result.isDragging;
+          },
+          onDrop: async (event) => {
+            const result = handleUploadDrop(event, effectiveDisabled.value);
+            if (!result.handled) return;
+            isDragging.value = false;
+            const read = readUploadDropFiles(event.dataTransfer);
+            if (read.rejectedDirectories.length > 0) {
+              emit(
+                "reject",
+                read.rejectedDirectories.map((file) => ({
+                  file,
+                  reason: "directory"
+                }))
+              );
+            }
+            await controller.processFiles(read.files);
+          },
+          role: "button",
+          tabindex: effectiveDisabled.value ? -1 : 0,
+          "aria-disabled": effectiveDisabled.value,
+          "aria-label": slots.default ? void 0 : labels.value.dragAreaAriaLabel
+        },
+        slots.default ? slots.default() : [
+          h(Icon, {
+            name: "upload",
+            class: "w-12 h-12 mb-3 text-[var(--tiger-text-muted,#9ca3af)]",
+            "aria-hidden": true
+          }),
+          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-[var(--tiger-text-muted,#6b7280)]" },
+            interpolateUploadLabel(labels.value.acceptInfoText, {
+              accept: props.accept
+            })
+          ) : null,
+          props.maxSize ? h(
+            "p",
+            { class: "text-xs text-[var(--tiger-text-muted,#6b7280)]" },
+            interpolateUploadLabel(labels.value.maxSizeInfoText, {
+              maxSize: formatFileSize(props.maxSize)
+            })
+          ) : null
+        ]
+      ) : h(
+        Button,
+        {
+          ...forwarded,
+          ...triggerAria,
+          ref: triggerRef,
+          type: "button",
+          variant: "outline",
+          size: "sm",
+          disabled: effectiveDisabled.value,
+          onClick: openPicker,
+          "aria-label": slots.default ? void 0 : labels.value.buttonAriaLabel
+        },
+        { default: () => slots.default ? slots.default() : labels.value.selectFileText }
+      );
+      const list = !props.showFileList || fileListValue.value.length === 0 ? null : props.listType === "picture-card" ? h(
+        "div",
+        { class: uploadPictureListClasses },
+        fileListValue.value.map((file) => {
+          const imageUrl = previewUrls.get(file);
+          const errorId = file.status === "error" && file.error ? `${file.uid}-error` : void 0;
+          return h("div", { class: getPictureCardClasses(file.status), key: file.uid }, [
+            h("div", { class: uploadPictureImageWrapClasses }, [
+              imageUrl ? h("img", {
+                src: imageUrl,
+                alt: file.name,
+                class: "w-full h-full object-cover"
+              }) : h(
+                "span",
+                {
+                  class: "flex h-full w-full items-center justify-center px-2 text-xs text-center text-[var(--tiger-text-muted,#6b7280)]"
+                },
+                file.name
+              )
+            ]),
+            h("div", { class: uploadPictureOverlayClasses }, actionButtons(file, true)),
+            file.status === "uploading" ? h(
+              "div",
+              {
+                class: "absolute inset-0 flex flex-col items-center justify-center bg-[var(--tiger-surface,#ffffff)]/80"
+              },
+              [statusIcon("uploading", "lg"), ...progressBlock(file)]
+            ) : null,
+            file.status === "error" && file.error ? h(
+              "p",
+              {
+                id: errorId,
+                class: "absolute bottom-1 inset-x-1 text-[10px] text-[var(--tiger-error,#dc2626)] truncate"
+              },
+              file.error
+            ) : null
+          ]);
+        })
+      ) : h(
+        "ul",
+        {
+          class: uploadListClasses,
+          role: "list",
+          "aria-label": labels.value.uploadedFilesAriaLabel
+        },
+        fileListValue.value.map((file) => {
+          const errorId = file.status === "error" && file.error ? `${file.uid}-error` : void 0;
+          const thumb = props.listType === "picture" ? previewUrls.get(file) : void 0;
+          return h(
+            "li",
+            {
+              class: getFileListItemClasses(file.status),
+              key: file.uid,
+              "aria-describedby": errorId
+            },
+            [
+              h("div", { class: "flex items-center flex-1 min-w-0 gap-2" }, [
+                props.listType === "picture" && thumb ? h("img", {
+                  src: thumb,
+                  alt: "",
+                  class: "w-10 h-10 rounded object-cover flex-shrink-0"
+                }) : h(Icon, {
+                  name: "document",
+                  class: "w-5 h-5 flex-shrink-0",
+                  "aria-hidden": true
+                }),
+                h("div", { class: "flex-1 min-w-0" }, [
+                  h("p", { class: "text-sm font-medium truncate" }, file.name),
+                  file.size != null ? h(
+                    "p",
+                    { class: "text-xs text-[var(--tiger-text-muted,#6b7280)]" },
+                    formatFileSize(file.size)
+                  ) : null,
+                  ...progressBlock(file, errorId)
+                ])
+              ]),
+              h("div", { class: uploadItemActionsClasses }, [
+                statusIcon(file.status, "sm"),
+                ...actionButtons(file, false)
+              ])
+            ]
+          );
+        })
+      );
+      return h(
+        "div",
+        {
+          ref: rootRef,
+          class: classNames(
+            "tiger-upload",
+            props.className,
+            coerceClassValue(attrs.class)
+          ),
+          style: mergeStyleValues(attrs.style, props.style),
+          onFocusout: handleFocusOut
+        },
+        [
+          h("input", {
+            ref: inputRef,
+            id: inputId.value,
+            type: "file",
+            accept: props.accept,
+            multiple: props.multiple,
+            disabled: effectiveDisabled.value,
+            class: uploadFileInputClasses,
+            onChange: handleFileChange,
+            "aria-hidden": "true",
+            tabindex: -1
+          }),
+          fieldName.value ? fileListValue.value.map(
+            (file) => h("input", {
+              key: file.uid,
+              type: "hidden",
+              name: fieldName.value,
+              value: file.url ?? file.uid
+            })
+          ) : null,
+          trigger,
+          list,
+          previewSrc.value ? h(ImagePreview, {
+            images: [previewSrc.value],
+            open: true,
+            "onUpdate:open": (open) => {
+              if (!open) previewSrc.value = null;
+            }
+          }) : null
+        ]
+      );
+    };
+  }
+});
+var Upload_default = Upload;
+
+export {
+  Upload,
+  Upload_default
+};