@expcat/tigercat-vue 2.1.2 → 2.1.4

package/dist/chunk-QGESVML4.mjs

@@ -0,0 +1,444 @@
+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/Transfer.ts
+import {
+  defineComponent,
+  h,
+  ref,
+  computed,
+  watch,
+  inject,
+  useId
+} from "vue";
+import {
+  applyTransferSelectAll,
+  canMoveTransferItems,
+  checkboxCheckPathD,
+  checkboxIconSizeClasses,
+  checkboxIconViewBox,
+  checkboxIndeterminatePathD,
+  classNames,
+  coerceClassValue,
+  devWarn,
+  emptyTransferSelectedKeys,
+  filterTransferItems,
+  getCheckboxLabelClasses,
+  getCheckboxVisualClasses,
+  getInputClasses,
+  getTransferItemClasses,
+  getTransferLabels,
+  getTransferSelectAllState,
+  hasTransferKey,
+  markFormItemGroupControl,
+  mergeAriaDescribedBy,
+  mergeTigerLocale,
+  moveTransferItems,
+  resolveLocaleText,
+  resolveTransferTargetKeys,
+  runShakeAnimation,
+  splitTransferData,
+  toggleTransferKey,
+  transferBaseClasses,
+  transferEmptyClasses,
+  transferItemDescriptionClasses,
+  transferKeyId,
+  transferMoveToSourceIconClasses,
+  transferMoveToTargetIconClasses,
+  transferOperationClasses,
+  transferPanelBodyClasses,
+  transferPanelClasses,
+  transferPanelHeaderClasses
+} from "@expcat/tigercat-core";
+function TransferCheckbox(options) {
+  return h("label", { class: getCheckboxLabelClasses(options.size, Boolean(options.disabled)) }, [
+    h("input", {
+      type: "checkbox",
+      class: "sr-only peer",
+      checked: options.checked,
+      indeterminate: Boolean(options.indeterminate),
+      disabled: options.disabled,
+      "aria-checked": options.indeterminate ? "mixed" : options.checked,
+      onChange: () => {
+        if (!options.disabled) options.onChange();
+      }
+    }),
+    h(
+      "span",
+      {
+        class: getCheckboxVisualClasses({
+          size: options.size,
+          checked: options.checked,
+          indeterminate: options.indeterminate,
+          disabled: Boolean(options.disabled)
+        }),
+        "aria-hidden": "true"
+      },
+      options.checked || options.indeterminate ? [
+        h(
+          "svg",
+          {
+            class: checkboxIconSizeClasses[options.size],
+            viewBox: checkboxIconViewBox,
+            fill: "none",
+            stroke: "currentColor",
+            "stroke-width": "2",
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round"
+          },
+          [
+            h("path", {
+              d: options.indeterminate ? checkboxIndeterminatePathD : checkboxCheckPathD
+            })
+          ]
+        )
+      ] : []
+    ),
+    options.children
+  ]);
+}
+var Transfer = markFormItemGroupControl(
+  defineComponent({
+    name: "TigerTransfer",
+    inheritAttrs: false,
+    props: {
+      modelValue: { type: Array, default: void 0 },
+      targetKeys: { type: Array, default: void 0 },
+      defaultValue: { type: Array, default: void 0 },
+      defaultTargetKeys: { type: Array, default: void 0 },
+      selectedKeys: { type: Object, default: void 0 },
+      defaultSelectedKeys: { type: Object, default: void 0 },
+      dataSource: { type: Array, default: () => [] },
+      size: { type: String, default: "md" },
+      disabled: { type: Boolean, default: false },
+      searchable: { type: Boolean, default: false },
+      searchValue: { type: Object, default: void 0 },
+      defaultSearchValue: { type: Object, default: void 0 },
+      sourceTitle: { type: String, default: void 0 },
+      targetTitle: { type: String, default: void 0 },
+      emptyText: { type: String, default: void 0 },
+      filterOption: {
+        type: Function,
+        default: void 0
+      },
+      name: { type: String, default: void 0 },
+      status: { type: String, default: void 0 },
+      className: { type: String, default: void 0 },
+      locale: { type: Object, default: void 0 },
+      labels: { type: Object, default: void 0 }
+    },
+    emits: [
+      "update:modelValue",
+      "update:targetKeys",
+      "update:searchValue",
+      "update:selectedKeys",
+      "change",
+      "search-change",
+      "select-change"
+    ],
+    setup(props, { emit, attrs, expose }) {
+      const config = useTigerConfig();
+      const formItemControl = inject(
+        FORM_ITEM_CONTROL_INJECTION_KEY,
+        null
+      );
+      const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
+      const labels = computed(
+        () => getTransferLabels(mergedLocale.value, {
+          ...props.labels,
+          sourceTitle: props.sourceTitle,
+          targetTitle: props.targetTitle
+        })
+      );
+      const resolved = computed(() => resolveTransferTargetKeys(props.modelValue, props.targetKeys));
+      watch(
+        () => resolved.value.conflict,
+        (conflict) => {
+          if (conflict) {
+            devWarn(
+              "Transfer.valueTargetKeys",
+              "Transfer received both `modelValue` and `targetKeys`. `modelValue` wins."
+            );
+          }
+        },
+        { immediate: true }
+      );
+      const internalTarget = ref([
+        ...props.defaultValue ?? props.defaultTargetKeys ?? []
+      ]);
+      const targetValue = computed(() => resolved.value.keys ?? internalTarget.value);
+      const internalSelected = ref(
+        props.defaultSelectedKeys ?? emptyTransferSelectedKeys()
+      );
+      const selected = computed(() => props.selectedKeys ?? internalSelected.value);
+      const internalSearch = ref({ ...props.defaultSearchValue ?? {} });
+      const search = computed(() => props.searchValue ?? internalSearch.value);
+      const effectiveDisabled = computed(
+        () => props.disabled || (formItemControl?.disabled.value ?? false)
+      );
+      const status = computed(
+        () => props.status ?? formItemControl?.status.value ?? "default"
+      );
+      const autoId = useId();
+      const groupId = computed(() => formItemControl?.id.value ?? `tiger-transfer-${autoId}`);
+      const fieldName = computed(() => props.name ?? formItemControl?.name.value);
+      const rootRef = ref(null);
+      watch(
+        () => [status.value, formItemControl?.shakeTrigger.value],
+        (current, previous) => {
+          if (!previous) return;
+          if (current[0] === "error") runShakeAnimation(rootRef.value);
+        },
+        { flush: "post" }
+      );
+      function setTarget(next, direction, moved) {
+        if (resolved.value.keys === void 0) internalTarget.value = next;
+        emit("update:modelValue", next);
+        emit("update:targetKeys", next);
+        emit("change", next, direction, moved);
+        formItemControl?.onChange(next);
+      }
+      function setSelected(next) {
+        if (props.selectedKeys === void 0) internalSelected.value = next;
+        emit("update:selectedKeys", next);
+        emit("select-change", next);
+      }
+      function updateSearch(panel, value) {
+        const next = { ...search.value, [panel]: value };
+        if (props.searchValue === void 0) internalSearch.value = next;
+        emit("update:searchValue", next);
+        emit("search-change", next);
+      }
+      const computedData = computed(() => splitTransferData(props.dataSource, targetValue.value));
+      const filteredSource = computed(
+        () => filterTransferItems(
+          computedData.value.sourceItems,
+          search.value.source ?? "",
+          props.filterOption
+        )
+      );
+      const filteredTarget = computed(
+        () => filterTransferItems(
+          computedData.value.targetItems,
+          search.value.target ?? "",
+          props.filterOption
+        )
+      );
+      const canMoveRight = computed(
+        () => canMoveTransferItems(selected.value.source, props.dataSource, effectiveDisabled.value)
+      );
+      const canMoveLeft = computed(
+        () => canMoveTransferItems(selected.value.target, props.dataSource, effectiveDisabled.value)
+      );
+      function move(direction) {
+        if (direction === "right" && !canMoveRight.value) return;
+        if (direction === "left" && !canMoveLeft.value) return;
+        const selectedKeys = direction === "right" ? selected.value.source : selected.value.target;
+        const result = moveTransferItems(
+          direction,
+          targetValue.value,
+          selectedKeys,
+          props.dataSource
+        );
+        const movedIds = new Set(result.movedKeys.map(transferKeyId));
+        setTarget(result.targetKeys, direction, result.movedKeys);
+        setSelected({
+          source: direction === "right" ? selected.value.source.filter((key) => !movedIds.has(transferKeyId(key))) : selected.value.source,
+          target: direction === "left" ? selected.value.target.filter((key) => !movedIds.has(transferKeyId(key))) : selected.value.target
+        });
+      }
+      expose({
+        focus: () => rootRef.value?.querySelector("input,button")?.focus()
+      });
+      function renderPanel(panel, title, allItems, visibleItems, query) {
+        const selectedKeys = selected.value[panel];
+        const selectedCount = selectedKeys.filter(
+          (key) => allItems.some((item) => transferKeyId(item.key) === transferKeyId(key))
+        ).length;
+        const selectState = getTransferSelectAllState(visibleItems, selectedKeys);
+        return h("div", { class: transferPanelClasses, role: "group", "aria-label": title }, [
+          h("div", { class: transferPanelHeaderClasses }, [
+            TransferCheckbox({
+              checked: selectState.checked,
+              indeterminate: selectState.indeterminate,
+              disabled: effectiveDisabled.value || selectState.enabledKeys.length === 0,
+              size: props.size,
+              onChange: () => {
+                setSelected({
+                  ...selected.value,
+                  [panel]: applyTransferSelectAll(
+                    selected.value[panel],
+                    selectState.enabledKeys,
+                    !selectState.checked
+                  )
+                });
+              },
+              children: h(
+                "span",
+                { class: "font-medium text-[var(--tiger-text,#111827)]" },
+                `${title} (${selectedCount}/${allItems.length})`
+              )
+            })
+          ]),
+          props.searchable ? h("input", {
+            type: "search",
+            class: getInputClasses({ status: status.value, size: "sm" }),
+            placeholder: resolveLocaleText(
+              "Search",
+              mergedLocale.value?.common?.searchPlaceholder
+            ),
+            value: query,
+            disabled: effectiveDisabled.value,
+            "aria-label": labels.value.searchAriaLabel.replace("{title}", title),
+            onInput: (event) => updateSearch(panel, event.target.value)
+          }) : null,
+          h("div", { class: transferPanelBodyClasses }, [
+            visibleItems.length > 0 ? visibleItems.map((item) => {
+              const isSelected = hasTransferKey(selectedKeys, item.key);
+              const itemDisabled = effectiveDisabled.value || Boolean(item.disabled);
+              return h(
+                "div",
+                {
+                  key: transferKeyId(item.key),
+                  class: getTransferItemClasses(isSelected, itemDisabled, props.size)
+                },
+                [
+                  TransferCheckbox({
+                    checked: isSelected,
+                    disabled: itemDisabled,
+                    size: props.size,
+                    onChange: () => setSelected({
+                      ...selected.value,
+                      [panel]: toggleTransferKey(selected.value[panel], item.key)
+                    }),
+                    children: h("span", { class: "min-w-0" }, [
+                      h("span", { class: "block truncate" }, item.label),
+                      item.description ? h("span", { class: transferItemDescriptionClasses }, item.description) : null
+                    ])
+                  })
+                ]
+              );
+            }) : h(
+              "div",
+              { class: transferEmptyClasses },
+              resolveLocaleText(
+                "No data",
+                props.emptyText,
+                mergedLocale.value?.common?.emptyText
+              )
+            )
+          ])
+        ]);
+      }
+      return () => h(
+        "div",
+        {
+          ...Object.fromEntries(
+            Object.entries(attrs).filter(([key]) => key !== "class" && key !== "className")
+          ),
+          ref: rootRef,
+          id: groupId.value,
+          role: "group",
+          class: classNames(
+            transferBaseClasses,
+            status.value === "error" && "ring-1 ring-[var(--tiger-error,#dc2626)]",
+            props.className,
+            coerceClassValue(attrs.class),
+            coerceClassValue(attrs.className)
+          ),
+          "aria-labelledby": formItemControl?.labelId.value,
+          "aria-describedby": mergeAriaDescribedBy(
+            typeof attrs["aria-describedby"] === "string" ? attrs["aria-describedby"] : void 0,
+            formItemControl?.describedBy.value
+          ),
+          "aria-invalid": status.value === "error" ? true : void 0,
+          "aria-required": formItemControl?.required.value ? true : void 0,
+          "aria-disabled": effectiveDisabled.value || void 0,
+          onFocusout: (event) => {
+            const next = event.relatedTarget;
+            if (next && event.currentTarget.contains(next)) return;
+            formItemControl?.onBlur();
+          }
+        },
+        [
+          fieldName.value ? targetValue.value.map(
+            (key) => h("input", {
+              key: transferKeyId(key),
+              type: "hidden",
+              name: fieldName.value,
+              value: String(key)
+            })
+          ) : null,
+          renderPanel(
+            "source",
+            labels.value.sourceTitle,
+            computedData.value.sourceItems,
+            filteredSource.value,
+            search.value.source ?? ""
+          ),
+          h("div", { class: transferOperationClasses }, [
+            h(
+              Button,
+              {
+                type: "button",
+                variant: "outline",
+                size: "sm",
+                disabled: !canMoveRight.value,
+                "aria-label": labels.value.moveToTargetAriaLabel,
+                onClick: () => move("right")
+              },
+              {
+                default: () => h(Icon, {
+                  name: "chevron-right",
+                  class: transferMoveToTargetIconClasses,
+                  "aria-hidden": true
+                })
+              }
+            ),
+            h(
+              Button,
+              {
+                type: "button",
+                variant: "outline",
+                size: "sm",
+                disabled: !canMoveLeft.value,
+                "aria-label": labels.value.moveToSourceAriaLabel,
+                onClick: () => move("left")
+              },
+              {
+                default: () => h(Icon, {
+                  name: "chevron-left",
+                  class: transferMoveToSourceIconClasses,
+                  "aria-hidden": true
+                })
+              }
+            )
+          ]),
+          renderPanel(
+            "target",
+            labels.value.targetTitle,
+            computedData.value.targetItems,
+            filteredTarget.value,
+            search.value.target ?? ""
+          )
+        ]
+      );
+    }
+  })
+);
+var Transfer_default = Transfer;
+
+export {
+  Transfer,
+  Transfer_default
+};

package/dist/chunk-QHOOB7IK.mjs

@@ -0,0 +1,87 @@
+import {
+  ImagePreview
+} from "./chunk-NVL4UWPJ.mjs";
+
+// src/components/ImageViewer.ts
+import { defineComponent, h } from "vue";
+import {
+  coerceClassValue,
+  resolveLightboxScaleRange
+} from "@expcat/tigercat-core";
+var ImageViewer = defineComponent({
+  name: "TigerImageViewer",
+  inheritAttrs: false,
+  props: {
+    images: {
+      type: Array,
+      required: true
+    },
+    open: { type: Boolean, default: void 0 },
+    currentIndex: { type: Number, default: 0 },
+    zIndex: { type: Number, default: void 0 },
+    maskClosable: { type: Boolean, default: true },
+    scaleStep: { type: Number, default: void 0 },
+    minScale: { type: Number, default: void 0 },
+    maxScale: { type: Number, default: void 0 },
+    minZoom: { type: Number, default: void 0 },
+    maxZoom: { type: Number, default: void 0 },
+    touchSwipeable: { type: Boolean, default: true },
+    touchSwipeThreshold: { type: Number, default: 48 },
+    zoomable: { type: Boolean, default: true },
+    rotatable: { type: Boolean, default: true },
+    showNav: { type: Boolean, default: true },
+    showCounter: { type: Boolean, default: true },
+    className: { type: String, default: void 0 },
+    locale: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: ["update:open", "update:currentIndex", "close", "scale-change"],
+  setup(props, { emit, attrs }) {
+    return () => {
+      const scaleRange = resolveLightboxScaleRange({
+        minScale: props.minScale,
+        maxScale: props.maxScale,
+        minZoom: props.minZoom,
+        maxZoom: props.maxZoom
+      });
+      return h(ImagePreview, {
+        ...attrs,
+        images: props.images,
+        open: props.open,
+        currentIndex: props.currentIndex,
+        zIndex: props.zIndex,
+        maskClosable: props.maskClosable,
+        scaleStep: props.scaleStep,
+        minScale: scaleRange.minScale,
+        maxScale: scaleRange.maxScale,
+        touchSwipeable: props.touchSwipeable,
+        touchSwipeThreshold: props.touchSwipeThreshold,
+        zoomable: props.zoomable,
+        rotatable: props.rotatable,
+        showNav: props.showNav,
+        showCounter: props.showCounter,
+        className: props.className,
+        locale: props.locale,
+        class: coerceClassValue(attrs.class),
+        "onUpdate:open": (next) => {
+          emit("update:open", next);
+          if (!next) emit("close");
+        },
+        "onUpdate:currentIndex": (next) => {
+          emit("update:currentIndex", next);
+        },
+        onScaleChange: (next) => {
+          emit("scale-change", next);
+        }
+      });
+    };
+  }
+});
+var ImageViewer_default = ImageViewer;
+
+export {
+  ImageViewer,
+  ImageViewer_default
+};

package/dist/{chunk-VL7GENWD.mjs → chunk-QNULT27U.mjs}

@@ -1,41 +1,33 @@
 // src/components/Container.ts
 import { defineComponent, computed, h, resolveDynamicComponent } from "vue";
-import { getContainerClasses } from "@expcat/tigercat-core";
+import {
+  coerceClassValue,
+  getContainerClasses,
+  getContainerMaxWidthStyle
+} from "@expcat/tigercat-core";
 var Container = defineComponent({
   name: "TigerContainer",
   inheritAttrs: false,
   props: {
-    /**
-     * HTML element or component to render as
-     * @default 'div'
-     */
     as: {
       type: [String, Object],
       default: "div"
     },
-    /**
-     * Maximum width constraint (false for no constraint)
-     * @default false
-     */
     maxWidth: {
       type: [String, Boolean],
       default: false
     },
-    /**
-     * Center container horizontally
-     * @default true
-     */
     center: {
       type: Boolean,
       default: true
     },
-    /**
-     * Add responsive horizontal padding
-     * @default true
-     */
     padding: {
       type: Boolean,
       default: true
+    },
+    className: {
+      type: String,
+      default: void 0
     }
   },
   setup(props, { slots, attrs }) {
@@ -43,9 +35,11 @@ var Container = defineComponent({
       () => getContainerClasses({
         maxWidth: props.maxWidth,
         center: props.center,
-        padding: props.padding
+        padding: props.padding,
+        className: props.className
       })
     );
+    const maxWidthStyle = computed(() => getContainerMaxWidthStyle(props.maxWidth));
     return () => {
       const { class: attrsClass, style: attrsStyle, ...restAttrs } = attrs;
       const tag = resolveDynamicComponent(props.as);
@@ -53,8 +47,8 @@ var Container = defineComponent({
         tag,
         {
           ...restAttrs,
-          class: [containerClasses.value, attrsClass],
-          style: attrsStyle
+          class: [containerClasses.value, coerceClassValue(attrsClass)],
+          style: [maxWidthStyle.value, attrsStyle]
         },
         slots.default?.()
       );

package/dist/{chunk-7PY6OQVE.mjs → chunk-QVVRQZUT.mjs}

@@ -42,12 +42,9 @@ var Watermark = defineComponent({
   },
   setup(props, { slots, attrs }) {
     const base64 = ref();
+    const overlayKey = ref(0);
     const wrapperRef = ref(null);
     let renderController;
-    const resolvedFont = computed(() => resolveWatermarkFont(props.font));
-    const generate = () => {
-      renderController?.render();
-    };
     onMounted(() => {
       if (!wrapperRef.value) return;
       renderController = createWatermarkRenderController({
@@ -56,37 +53,40 @@ var Watermark = defineComponent({
           image: props.image,
           width: props.width,
           height: props.height,
+          gapX: props.gapX,
+          gapY: props.gapY,
           rotate: props.rotate,
-          font: resolvedFont.value
+          font: resolveWatermarkFont(props.font)
         }),
         onRender: (base64Url) => {
           base64.value = base64Url;
+        },
+        onTamper: () => {
+          overlayKey.value += 1;
         }
       });
       renderController.observe(wrapperRef.value);
       renderController.render();
     });
     watch(
-      () => [props.content, props.image, props.width, props.height, props.rotate, props.font],
-      generate
+      () => [
+        props.content,
+        props.image,
+        props.width,
+        props.height,
+        props.rotate,
+        props.gapX,
+        props.gapY,
+        props.font?.color,
+        props.font?.fontSize,
+        props.font?.fontFamily,
+        props.font?.fontWeight
+      ],
+      () => {
+        renderController?.render();
+      }
     );
-    let observer;
-    onMounted(() => {
-      if (typeof MutationObserver === "undefined" || !wrapperRef.value) return;
-      observer = new MutationObserver((mutations) => {
-        for (const m of mutations) {
-          for (const node of Array.from(m.removedNodes)) {
-            if (node.dataset?.watermark === "true") {
-              generate();
-              return;
-            }
-          }
-        }
-      });
-      observer.observe(wrapperRef.value, { childList: true });
-    });
     onBeforeUnmount(() => {
-      observer?.disconnect();
       renderController?.disconnect();
       renderController = void 0;
     });
@@ -119,6 +119,7 @@ var Watermark = defineComponent({
         [
           slots.default?.(),
           h("div", {
+            key: overlayKey.value,
             "data-watermark": "true",
             "aria-hidden": "true",
             style: overlayStyle.value