@expcat/tigercat-vue 2.1.2 → 2.1.3

package/dist/chunk-GHY4XGDM.mjs

@@ -0,0 +1,446 @@
+import {
+  FORM_ITEM_CONTROL_INJECTION_KEY
+} from "./chunk-P2LZ2MR5.mjs";
+import {
+  useTigerConfig
+} from "./chunk-4GOTWNOO.mjs";
+
+// src/components/Signature.ts
+import {
+  computed,
+  defineComponent,
+  h,
+  inject,
+  onBeforeUnmount,
+  onMounted,
+  provide,
+  ref,
+  watch
+} from "vue";
+import {
+  SHAKE_CLASS,
+  appendSignaturePoint,
+  beginSignatureStroke,
+  classNames,
+  clampSignatureLineWidth,
+  clearSignatureStrokes,
+  coerceClassValue,
+  createDocumentDragSession,
+  createSignatureChangePayload,
+  createSignatureSession,
+  drawSignatureStrokes,
+  exportSignatureDataUrl,
+  finishSignatureStroke,
+  getSignatureCanvasStatusClasses,
+  getSignatureCanvasWrapClasses,
+  getSignatureDevicePixelRatio,
+  getSignatureLabels,
+  getSignaturePoint,
+  isSignatureEmpty,
+  mergeAriaDescribedBy,
+  mergeStyleValues,
+  mergeTigerLocale,
+  resolveSignaturePenColor,
+  resolveSignatureSurfaceColor,
+  runShakeAnimation,
+  signatureCanvasClasses,
+  signatureRootClasses,
+  signatureStrokesToSvg,
+  signatureSvgToDataUrl,
+  signatureToolbarButtonClasses,
+  signatureToolbarClasses,
+  signatureValueToStrokes,
+  syncSignatureCanvasBackingStore,
+  undoSignatureStroke
+} from "@expcat/tigercat-core";
+var DEFAULT_HEIGHT = 180;
+var Signature = defineComponent({
+  name: "TigerSignature",
+  inheritAttrs: false,
+  props: {
+    modelValue: { type: String, default: void 0 },
+    defaultValue: { type: String, default: void 0 },
+    width: { type: Number, default: void 0 },
+    height: { type: Number, default: DEFAULT_HEIGHT },
+    penColor: { type: String, default: void 0 },
+    backgroundColor: { type: String, default: void 0 },
+    lineWidth: { type: Number, default: 2 },
+    disabled: { type: Boolean, default: false },
+    readonly: { type: Boolean, default: false },
+    clearable: { type: Boolean, default: true },
+    exportType: {
+      type: String,
+      default: "image/png"
+    },
+    quality: { type: Number, default: 0.92 },
+    ariaLabel: { type: String, default: void 0 },
+    clearText: { type: String, default: void 0 },
+    undoText: { type: String, default: void 0 },
+    locale: { type: Object, default: void 0 },
+    labels: { type: Object, default: void 0 },
+    name: { type: String, default: void 0 },
+    id: { type: String, default: void 0 },
+    status: { type: String, default: void 0 },
+    className: { type: String, default: void 0 },
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: ["update:modelValue", "change", "input", "begin", "end", "clear", "undo", "blur"],
+  setup(props, { attrs, emit, expose }) {
+    const config = useTigerConfig();
+    const formItemControl = inject(
+      FORM_ITEM_CONTROL_INJECTION_KEY,
+      null
+    );
+    provide(FORM_ITEM_CONTROL_INJECTION_KEY, null);
+    const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
+    const labels = computed(
+      () => getSignatureLabels(mergedLocale.value, {
+        ...props.labels,
+        ariaLabel: props.ariaLabel?.trim() || props.labels?.ariaLabel,
+        undoText: props.undoText?.trim() || props.labels?.undoText,
+        clearText: props.clearText?.trim() || void 0
+      })
+    );
+    const effectiveDisabled = computed(
+      () => props.disabled || (formItemControl?.disabled.value ?? false)
+    );
+    const status = computed(
+      () => props.status ?? formItemControl?.status.value ?? "default"
+    );
+    const effectiveId = computed(() => props.id ?? formItemControl?.id.value);
+    const effectiveName = computed(() => props.name ?? formItemControl?.name.value);
+    const innerValue = ref(props.defaultValue ?? "");
+    const observedWidth = ref(0);
+    const logicalWidth = computed(() => props.width ?? observedWidth.value);
+    const isInteractive = computed(() => !effectiveDisabled.value && !props.readonly);
+    const normalizedLineWidth = computed(() => clampSignatureLineWidth(props.lineWidth));
+    const committed = computed(() => {
+      if (props.modelValue !== void 0) return props.modelValue;
+      if (formItemControl?.value.value !== void 0) {
+        return formItemControl.value.value;
+      }
+      return innerValue.value;
+    });
+    const session = ref(
+      createSignatureSession(signatureValueToStrokes(committed.value))
+    );
+    const strokes = ref(signatureValueToStrokes(committed.value));
+    const rootRef = ref(null);
+    const wrapRef = ref(null);
+    const canvasRef = ref(null);
+    let dragDispose;
+    let widthObserver;
+    watch(
+      () => committed.value,
+      (value) => {
+        if (session.value.activeStroke) return;
+        const next = signatureValueToStrokes(value);
+        session.value = createSignatureSession(next);
+        strokes.value = next;
+      }
+    );
+    function exportOptions() {
+      return {
+        width: Math.max(1, logicalWidth.value || props.width || 1),
+        height: props.height,
+        backgroundColor: props.backgroundColor,
+        surfaceColor: resolveSignatureSurfaceColor(canvasRef.value),
+        quality: props.quality,
+        exportType: props.exportType
+      };
+    }
+    function draw(nextStrokes = strokes.value) {
+      const canvas = canvasRef.value;
+      if (!canvas || logicalWidth.value <= 0 || props.height <= 0) return;
+      const context = syncSignatureCanvasBackingStore(
+        canvas,
+        logicalWidth.value,
+        props.height,
+        getSignatureDevicePixelRatio()
+      );
+      if (!context) return;
+      drawSignatureStrokes(context, nextStrokes, {
+        width: logicalWidth.value,
+        height: props.height,
+        backgroundColor: props.backgroundColor
+      });
+    }
+    watch([strokes, logicalWidth, () => props.height, () => props.backgroundColor], () => draw(), {
+      flush: "post"
+    });
+    function observeWidth() {
+      widthObserver?.disconnect();
+      widthObserver = void 0;
+      if (props.width != null) return;
+      const wrap = wrapRef.value;
+      if (!wrap || typeof ResizeObserver === "undefined") {
+        if (wrap && wrap.clientWidth > 0) observedWidth.value = Math.floor(wrap.clientWidth);
+        return;
+      }
+      widthObserver = new ResizeObserver((entries) => {
+        const next = Math.floor(entries[0]?.contentRect.width ?? wrap.clientWidth);
+        if (next > 0) observedWidth.value = next;
+      });
+      widthObserver.observe(wrap);
+      const initial = Math.floor(wrap.clientWidth);
+      if (initial > 0) observedWidth.value = initial;
+    }
+    onMounted(() => {
+      observeWidth();
+      draw();
+    });
+    watch(
+      () => props.width,
+      () => observeWidth()
+    );
+    watch(
+      () => [status.value, formItemControl?.shakeTrigger.value],
+      () => {
+        if (status.value === "error") runShakeAnimation(rootRef.value);
+      }
+    );
+    function writeCommitted(payload) {
+      if (props.modelValue === void 0) innerValue.value = payload.value;
+      emit("update:modelValue", payload.value);
+      emit("input", payload.value);
+      emit("change", payload.value, payload);
+      formItemControl?.onChange(payload.value);
+    }
+    function emitPayload(next, extra) {
+      const payload = createSignatureChangePayload(next.strokes, exportOptions());
+      session.value = createSignatureSession(next.strokes);
+      strokes.value = next.strokes;
+      writeCommitted(payload);
+      if (extra?.clear) emit("clear");
+      if (extra?.undo) emit("undo");
+      return payload;
+    }
+    function clear() {
+      if (effectiveDisabled.value || props.readonly) return;
+      dragDispose?.();
+      dragDispose = void 0;
+      emitPayload(clearSignatureStrokes(), { clear: true });
+    }
+    function undo() {
+      if (effectiveDisabled.value || props.readonly) return;
+      dragDispose?.();
+      dragDispose = void 0;
+      emitPayload(undoSignatureStroke(session.value), { undo: true });
+    }
+    const toSVG = () => signatureStrokesToSvg(session.value.strokes, exportOptions());
+    const toDataURL = (type = props.exportType, nextQuality = props.quality) => {
+      if (type === "image/svg+xml") return signatureSvgToDataUrl(toSVG());
+      return exportSignatureDataUrl(session.value.strokes, type, {
+        ...exportOptions(),
+        quality: nextQuality
+      });
+    };
+    function getPoint(clientX, clientY) {
+      const canvas = canvasRef.value;
+      const rect = canvas?.getBoundingClientRect() ?? {
+        left: 0,
+        top: 0,
+        width: logicalWidth.value,
+        height: props.height
+      };
+      return getSignaturePoint(
+        clientX,
+        clientY,
+        rect,
+        logicalWidth.value || rect.width,
+        props.height
+      );
+    }
+    const activePointerId = ref(null);
+    function endDrawing(id) {
+      dragDispose?.();
+      dragDispose = void 0;
+      if (activePointerId.value !== id) return;
+      activePointerId.value = null;
+      if (!session.value.activeStroke) return;
+      const finished = finishSignatureStroke(session.value, id);
+      session.value = finished;
+      const payload = emitPayload(finished);
+      if (payload) emit("end", payload);
+    }
+    function handlePointerDown(event) {
+      if (!isInteractive.value) return;
+      event.preventDefault();
+      const pointerId = event.pointerId;
+      const canvas = canvasRef.value;
+      const color = resolveSignaturePenColor(canvas, props.penColor);
+      const next = beginSignatureStroke(
+        session.value,
+        getPoint(event.clientX, event.clientY),
+        pointerId,
+        color,
+        normalizedLineWidth.value
+      );
+      if (next.pointerId !== pointerId) return;
+      session.value = next;
+      activePointerId.value = pointerId;
+      strokes.value = next.strokes;
+      emit("begin");
+      dragDispose?.();
+      const handle = createDocumentDragSession({
+        startX: event.clientX,
+        startY: event.clientY,
+        pointerId,
+        pointerTarget: canvas,
+        dragThreshold: 0,
+        onMove: (payload) => {
+          const moved = appendSignaturePoint(
+            session.value,
+            getPoint(payload.currentX, payload.currentY),
+            pointerId
+          );
+          session.value = moved;
+          strokes.value = moved.strokes;
+        },
+        onEnd: () => endDrawing(pointerId)
+      });
+      dragDispose = () => handle.dispose();
+    }
+    onBeforeUnmount(() => {
+      dragDispose?.();
+      widthObserver?.disconnect();
+    });
+    function handleKeyDown(event) {
+      if (!props.clearable || effectiveDisabled.value || props.readonly) return;
+      if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "z") {
+        event.preventDefault();
+        undo();
+        return;
+      }
+      if (event.key === "Backspace") {
+        event.preventDefault();
+        undo();
+        return;
+      }
+      if (event.key === "Delete") {
+        event.preventDefault();
+        clear();
+      }
+    }
+    function handleFocusOut(event) {
+      const next = event.relatedTarget;
+      if (rootRef.value && next && rootRef.value.contains(next)) return;
+      formItemControl?.onBlur();
+      emit("blur", event);
+    }
+    expose({
+      clear,
+      undo,
+      isEmpty: () => isSignatureEmpty(session.value.strokes),
+      toDataURL,
+      toSVG,
+      focus: () => canvasRef.value?.focus()
+    });
+    const rootClasses = computed(
+      () => classNames(
+        signatureRootClasses,
+        props.className,
+        coerceClassValue(attrs.class),
+        status.value === "error" && SHAKE_CLASS
+      )
+    );
+    const rootStyle = computed(
+      () => mergeStyleValues(props.style, attrs.style)
+    );
+    return () => {
+      const forwardedAttrs = Object.fromEntries(
+        Object.entries(attrs).filter(
+          ([key]) => key !== "class" && key !== "style" && key !== "id" && !key.startsWith("aria-")
+        )
+      );
+      const attrDescribedBy = typeof attrs["aria-describedby"] === "string" ? attrs["aria-describedby"] : void 0;
+      const attrLabelledby = typeof attrs["aria-labelledby"] === "string" ? attrs["aria-labelledby"] : void 0;
+      const labelledby = attrLabelledby?.trim() ? attrLabelledby : formItemControl?.labelId.value;
+      const describedBy = mergeAriaDescribedBy(attrDescribedBy, formItemControl?.describedBy.value);
+      const empty = isSignatureEmpty(strokes.value) && !committed.value;
+      return h(
+        "div",
+        {
+          ...forwardedAttrs,
+          ref: rootRef,
+          class: rootClasses.value,
+          style: rootStyle.value,
+          onFocusout: handleFocusOut
+        },
+        [
+          effectiveName.value ? h("input", {
+            type: "hidden",
+            name: effectiveName.value,
+            value: committed.value ?? ""
+          }) : null,
+          h(
+            "div",
+            {
+              ref: wrapRef,
+              class: classNames(
+                getSignatureCanvasWrapClasses(effectiveDisabled.value, props.readonly),
+                getSignatureCanvasStatusClasses(status.value)
+              )
+            },
+            [
+              h("canvas", {
+                ref: canvasRef,
+                class: signatureCanvasClasses,
+                width: Math.max(1, logicalWidth.value),
+                height: props.height,
+                tabindex: effectiveDisabled.value ? -1 : 0,
+                role: "textbox",
+                "aria-multiline": "true",
+                id: effectiveId.value,
+                "aria-label": labelledby ? void 0 : labels.value.ariaLabel,
+                "aria-labelledby": labelledby,
+                "aria-describedby": describedBy,
+                "aria-disabled": effectiveDisabled.value || void 0,
+                "aria-readonly": props.readonly || void 0,
+                "aria-invalid": status.value === "error" ? true : void 0,
+                "aria-required": formItemControl?.required.value ? true : void 0,
+                onPointerdown: handlePointerDown,
+                onLostpointercapture: () => {
+                  const id = activePointerId.value;
+                  if (id != null) endDrawing(id);
+                },
+                onKeydown: handleKeyDown
+              })
+            ]
+          ),
+          props.clearable ? h("div", { class: signatureToolbarClasses }, [
+            h(
+              "button",
+              {
+                type: "button",
+                class: signatureToolbarButtonClasses,
+                disabled: effectiveDisabled.value || props.readonly || empty,
+                onClick: undo
+              },
+              labels.value.undoText
+            ),
+            h(
+              "button",
+              {
+                type: "button",
+                class: signatureToolbarButtonClasses,
+                disabled: effectiveDisabled.value || props.readonly || empty,
+                onClick: clear
+              },
+              labels.value.clearText
+            )
+          ]) : null
+        ]
+      );
+    };
+  }
+});
+var Signature_default = Signature;
+
+export {
+  Signature,
+  Signature_default
+};

package/dist/{chunk-P62TYR3M.mjs → chunk-H6EOA6Q6.mjs}

@@ -1,36 +1,40 @@
 import {
   CollapseContextKey
-} from "./chunk-WE4DGU2T.mjs";
+} from "./chunk-63QGROKA.mjs";
 
 // src/components/CollapsePanel.ts
 import {
-  defineComponent,
   computed,
-  inject,
+  defineComponent,
   h,
-  ref,
-  onMounted,
+  inject,
   onBeforeUnmount,
+  onMounted,
+  ref,
   watch
 } from "vue";
 import {
   classNames,
-  getCollapsePanelClasses,
-  getCollapsePanelHeaderClasses,
-  getCollapseIconClasses,
-  createCollapseTransitionController,
-  getInitialCollapseContentStyle,
+  coerceClassValue,
+  collapseExtraClasses,
+  collapseHeaderRowClasses,
   collapseHeaderTextClasses,
-  collapsePanelContentWrapperClasses,
+  collapseKeyOf,
   collapsePanelContentBaseClasses,
-  isPanelActive,
-  coerceClassValue
+  collapsePanelContentWrapperClasses,
+  createAriaId,
+  createCollapseTransitionController,
+  getCollapseIconClasses,
+  getCollapsePanelClasses,
+  getCollapsePanelHeaderClasses,
+  isPanelActive
 } from "@expcat/tigercat-core";
 var CollapsePanel = defineComponent({
   name: "TigerCollapsePanel",
+  inheritAttrs: false,
   props: {
     /**
-     * Unique key for the panel (required)
+     * Unique key for the panel (required). `1` and `"1"` match.
      */
     panelKey: {
       type: [String, Number],
@@ -44,7 +48,7 @@ var CollapsePanel = defineComponent({
       default: void 0
     },
     /**
-     * Whether the panel is disabled
+     * Disabled headers stay in the tab order and expose `aria-disabled`.
      * @default false
      */
     disabled: {
@@ -83,7 +87,11 @@ var CollapsePanel = defineComponent({
       return isPanelActive(props.panelKey, collapseContext.activeKeys);
     });
     const contentRef = ref();
-    const initialContentStyle = getInitialCollapseContentStyle(isActive.value);
+    const headerRef = ref();
+    const controllerReady = ref(false);
+    const initialActive = isActive.value;
+    const headerId = createAriaId({ prefix: "tiger-collapse-header" });
+    const contentId = createAriaId({ prefix: "tiger-collapse-content" });
     let transitionController;
     const panelClasses = computed(() => {
       return classNames(
@@ -102,24 +110,55 @@ var CollapsePanel = defineComponent({
         collapseContext.handlePanelClick(props.panelKey);
       }
     };
-    const handleExtraClick = (event) => {
-      event.stopPropagation();
-    };
     const handleKeydown = (event) => {
       if (props.disabled) {
+        if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+        }
         return;
       }
       if (event.key === "Enter" || event.key === " ") {
         event.preventDefault();
         collapseContext.handlePanelClick(props.panelKey);
+        return;
       }
+      if (!collapseContext.accordion) return;
+      const action = event.key === "ArrowDown" ? "next" : event.key === "ArrowUp" ? "prev" : event.key === "Home" ? "first" : event.key === "End" ? "last" : null;
+      if (!action) return;
+      event.preventDefault();
+      collapseContext.moveHeaderFocus(collapseKeyOf(props.panelKey), action);
     };
     onMounted(() => {
-      if (!contentRef.value) return;
-      transitionController = createCollapseTransitionController(contentRef.value, {
-        expanded: isActive.value
+      if (contentRef.value) {
+        transitionController = createCollapseTransitionController(contentRef.value, {
+          expanded: initialActive
+        });
+        controllerReady.value = true;
+      }
+      collapseContext.registerHeader({
+        key: collapseKeyOf(props.panelKey),
+        el: {
+          focus: () => {
+            headerRef.value?.focus();
+          }
+        },
+        disabled: props.disabled
       });
     });
+    watch(
+      () => props.disabled,
+      (disabled) => {
+        collapseContext.registerHeader({
+          key: collapseKeyOf(props.panelKey),
+          el: {
+            focus: () => {
+              headerRef.value?.focus();
+            }
+          },
+          disabled
+        });
+      }
+    );
     watch(
       isActive,
       (expanded) => {
@@ -130,6 +169,7 @@ var CollapsePanel = defineComponent({
     onBeforeUnmount(() => {
       transitionController?.dispose();
       transitionController = void 0;
+      collapseContext.unregisterHeader(collapseKeyOf(props.panelKey));
     });
     return () => {
       const headerSlot = slots.header?.();
@@ -142,10 +182,11 @@ var CollapsePanel = defineComponent({
           height: "16",
           viewBox: "0 0 16 16",
           fill: "none",
-          xmlns: "http://www.w3.org/2000/svg"
+          xmlns: "http://www.w3.org/2000/svg",
+          "aria-hidden": "true"
         },
         h("path", {
-          d: "M6 12L10 8L6 4",
+          d: "M4 6L8 10L12 6",
           stroke: "currentColor",
           "stroke-width": "2",
           "stroke-linecap": "round",
@@ -165,41 +206,35 @@ var CollapsePanel = defineComponent({
           headerSlot || props.header
         )
       );
-      if (extraSlot) {
-        headerContent.push(
-          h(
-            "span",
-            {
-              class: "ml-auto",
-              onClick: handleExtraClick
-            },
-            extraSlot
-          )
-        );
-      }
       if (props.showArrow && collapseContext.expandIconPosition === "end") {
         headerContent.push(arrowIcon);
       }
-      const header = h(
-        "div",
+      const headerButton = h(
+        "button",
         {
+          ref: headerRef,
+          type: "button",
+          id: headerId,
           class: headerClasses.value,
-          role: "button",
-          tabindex: props.disabled ? -1 : 0,
           "aria-expanded": isActive.value,
-          "aria-disabled": props.disabled,
+          "aria-controls": contentId,
+          "aria-disabled": props.disabled || void 0,
           onClick: handleClick,
           onKeydown: handleKeydown
         },
         headerContent
       );
+      const extraNode = extraSlot ? h("span", { class: collapseExtraClasses }, extraSlot) : null;
+      const initialClass = controllerReady.value ? void 0 : initialActive ? "max-h-none opacity-100" : "max-h-0 opacity-0";
       const content = h(
         "div",
         {
           ref: contentRef,
+          id: contentId,
           "data-tiger-collapse-content": "",
-          class: collapsePanelContentWrapperClasses,
-          style: initialContentStyle,
+          class: classNames(collapsePanelContentWrapperClasses, initialClass),
+          role: isActive.value ? "region" : void 0,
+          "aria-labelledby": isActive.value ? headerId : void 0,
           ...isActive.value ? {} : {
             inert: true,
             "aria-hidden": "true"
@@ -221,7 +256,7 @@ var CollapsePanel = defineComponent({
           class: panelClasses.value,
           style: props.style
         },
-        [header, content]
+        [h("div", { class: collapseHeaderRowClasses }, [headerButton, extraNode]), content]
       );
     };
   }