@expcat/tigercat-vue 1.0.7 → 1.2.0

package/dist/chunk-FQWEOBQ4.mjs

@@ -0,0 +1,231 @@
+// src/components/Signature.ts
+import { computed, defineComponent, h, onMounted, ref, watch } from "vue";
+import {
+  classNames,
+  clampSignatureLineWidth,
+  cloneSignatureStrokes,
+  coerceClassValue,
+  drawSignatureStrokes,
+  getSignatureCanvasDataUrl,
+  getSignatureCanvasWrapClasses,
+  getSignaturePoint,
+  isSignatureEmpty,
+  mergeStyleValues,
+  signatureCanvasClasses,
+  signatureClearButtonClasses,
+  signatureRootClasses,
+  signatureStrokesToSvg,
+  signatureSvgToDataUrl,
+  signatureToolbarClasses
+} from "@expcat/tigercat-core";
+var DEFAULT_WIDTH = 480;
+var DEFAULT_HEIGHT = 180;
+var Signature = defineComponent({
+  name: "TigerSignature",
+  inheritAttrs: false,
+  props: {
+    modelValue: { type: String, default: void 0 },
+    width: { type: Number, default: DEFAULT_WIDTH },
+    height: { type: Number, default: DEFAULT_HEIGHT },
+    penColor: { type: String, default: "#111827" },
+    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: "Signature pad" },
+    clearText: { type: String, default: "Clear" },
+    className: { type: String, default: void 0 },
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: ["update:modelValue", "change", "begin", "end", "clear"],
+  setup(props, { attrs, emit, expose }) {
+    const canvasRef = ref(null);
+    const strokes = ref([]);
+    const activeStroke = ref(null);
+    const isDisabled = computed(() => props.disabled || props.readonly);
+    const normalizedLineWidth = computed(() => clampSignatureLineWidth(props.lineWidth));
+    const draw = (nextStrokes) => {
+      const canvas = canvasRef.value;
+      const context = canvas?.getContext("2d");
+      if (!canvas || !context) return;
+      const ratio = typeof window === "undefined" ? 1 : window.devicePixelRatio || 1;
+      canvas.width = props.width * ratio;
+      canvas.height = props.height * ratio;
+      canvas.style.width = `${props.width}px`;
+      canvas.style.height = `${props.height}px`;
+      context.setTransform(ratio, 0, 0, ratio, 0, 0);
+      drawSignatureStrokes(context, nextStrokes, {
+        width: props.width,
+        height: props.height,
+        backgroundColor: props.backgroundColor
+      });
+    };
+    watch(
+      [strokes, () => props.width, () => props.height, () => props.backgroundColor],
+      () => draw(strokes.value),
+      { deep: true, flush: "post" }
+    );
+    watch(
+      () => props.modelValue,
+      (value) => {
+        if (value === "" && !isSignatureEmpty(strokes.value)) {
+          strokes.value = [];
+          activeStroke.value = null;
+          draw([]);
+        }
+      }
+    );
+    onMounted(() => {
+      draw(strokes.value);
+    });
+    const toSVG = () => signatureStrokesToSvg(strokes.value, {
+      width: props.width,
+      height: props.height,
+      backgroundColor: props.backgroundColor
+    });
+    const toDataURL = (type = props.exportType, quality = props.quality) => {
+      if (type === "image/svg+xml") return signatureSvgToDataUrl(toSVG());
+      return getSignatureCanvasDataUrl(canvasRef.value, type, quality);
+    };
+    const createPayload = (nextStrokes) => {
+      const value = props.exportType === "image/svg+xml" ? signatureSvgToDataUrl(
+        signatureStrokesToSvg(nextStrokes, {
+          width: props.width,
+          height: props.height,
+          backgroundColor: props.backgroundColor
+        })
+      ) : getSignatureCanvasDataUrl(canvasRef.value, props.exportType, props.quality);
+      return {
+        value,
+        empty: isSignatureEmpty(nextStrokes),
+        strokes: cloneSignatureStrokes(nextStrokes),
+        exportType: props.exportType
+      };
+    };
+    const emitChange = (nextStrokes) => {
+      const payload = createPayload(nextStrokes);
+      emit("update:modelValue", payload.value);
+      emit("change", payload);
+      return payload;
+    };
+    const clear = () => {
+      strokes.value = [];
+      activeStroke.value = null;
+      draw([]);
+      emitChange([]);
+      emit("clear");
+    };
+    const getPointFromEvent = (event) => {
+      const canvas = canvasRef.value;
+      const rect = canvas?.getBoundingClientRect() ?? {
+        left: 0,
+        top: 0,
+        width: props.width,
+        height: props.height
+      };
+      return getSignaturePoint(event.clientX, event.clientY, rect, props.width, props.height);
+    };
+    const handlePointerDown = (event) => {
+      if (isDisabled.value) return;
+      event.preventDefault();
+      canvasRef.value?.focus();
+      const stroke = {
+        color: props.penColor,
+        lineWidth: normalizedLineWidth.value,
+        points: [getPointFromEvent(event)]
+      };
+      activeStroke.value = stroke;
+      strokes.value = [...strokes.value, stroke];
+      emit("begin");
+    };
+    const handlePointerMove = (event) => {
+      if (!activeStroke.value || isDisabled.value) return;
+      event.preventDefault();
+      activeStroke.value.points.push(getPointFromEvent(event));
+      strokes.value = [...strokes.value];
+    };
+    const finishStroke = () => {
+      if (!activeStroke.value) return;
+      activeStroke.value = null;
+      const payload = emitChange(strokes.value);
+      emit("end", payload);
+    };
+    const handleKeyDown = (event) => {
+      if (!props.clearable || isDisabled.value) return;
+      if (event.key !== "Delete" && event.key !== "Backspace") return;
+      event.preventDefault();
+      clear();
+    };
+    expose({
+      clear,
+      isEmpty: () => isSignatureEmpty(strokes.value),
+      toDataURL,
+      toSVG
+    });
+    const rootClasses = computed(
+      () => classNames(signatureRootClasses, props.className, coerceClassValue(attrs.class))
+    );
+    const rootStyle = computed(
+      () => mergeStyleValues(props.style, attrs.style)
+    );
+    return () => {
+      const forwardedAttrs = Object.fromEntries(
+        Object.entries(attrs).filter(([key]) => key !== "class" && key !== "style")
+      );
+      return h(
+        "div",
+        {
+          ...forwardedAttrs,
+          class: rootClasses.value,
+          style: rootStyle.value
+        },
+        [
+          h("div", { class: getSignatureCanvasWrapClasses(props.disabled, props.readonly) }, [
+            h("canvas", {
+              ref: canvasRef,
+              class: signatureCanvasClasses,
+              width: props.width,
+              height: props.height,
+              tabindex: isDisabled.value ? -1 : 0,
+              role: "img",
+              "aria-label": props.ariaLabel,
+              "aria-disabled": isDisabled.value || void 0,
+              onPointerdown: handlePointerDown,
+              onPointermove: handlePointerMove,
+              onPointerup: finishStroke,
+              onPointercancel: finishStroke,
+              onKeydown: handleKeyDown
+            })
+          ]),
+          props.clearable ? h("div", { class: signatureToolbarClasses }, [
+            h(
+              "button",
+              {
+                type: "button",
+                class: signatureClearButtonClasses,
+                disabled: isDisabled.value || isSignatureEmpty(strokes.value),
+                onClick: clear
+              },
+              props.clearText
+            )
+          ]) : null
+        ]
+      );
+    };
+  }
+});
+var Signature_default = Signature;
+
+export {
+  Signature,
+  Signature_default
+};

package/dist/{chunk-SEKYX56R.js → chunk-FRI62O2J.js}

@@ -1,9 +1,28 @@
-'use strict';
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
 
-var chunkD6AWPRGV_js = require('./chunk-D6AWPRGV.js');
-var vue = require('vue');
-var tigercatCore = require('@expcat/tigercat-core');
+var _chunkB2RH4CMGjs = require('./chunk-B2RH4CMG.js');
 
+// src/components/FormItem.ts
+
+
+
+
+
+
+
+
+
+
+var _vue = require('vue');
+
+
+
+
+
+
+
+
+var _tigercatcore = require('@expcat/tigercat-core');
 function mergeAriaDescribedBy(existing, next) {
   if (!existing) return next;
   if (!next) return existing;
@@ -13,7 +32,7 @@ function mergeAriaDescribedBy(existing, next) {
   return Array.from(parts).join(" ");
 }
 var formItemIdCounter = 0;
-var FormItem = vue.defineComponent({
+var FormItem = _vue.defineComponent.call(void 0, {
   name: "TigerFormItem",
   props: {
     /**
@@ -73,34 +92,38 @@ var FormItem = vue.defineComponent({
     errorDisplayMode: {
       type: String,
       default: "inline"
+    },
+    condition: {
+      type: Object,
+      default: void 0
     }
   },
   setup(props, { slots }) {
-    const formContextRef = vue.inject(chunkD6AWPRGV_js.FormContextKey, null);
-    const formContext = vue.computed(() => formContextRef?.value ?? null);
-    const errorMessage = vue.ref("");
-    const shakeTrigger = vue.ref(0);
-    const prevFormError = vue.ref("");
+    const formContextRef = _vue.inject.call(void 0, _chunkB2RH4CMGjs.FormContextKey, null);
+    const formContext = _vue.computed.call(void 0, () => _nullishCoalesce(_optionalChain([formContextRef, 'optionalAccess', _ => _.value]), () => ( null)));
+    const errorMessage = _vue.ref.call(void 0, "");
+    const shakeTrigger = _vue.ref.call(void 0, 0);
+    const prevFormError = _vue.ref.call(void 0, "");
     const instanceId = ++formItemIdCounter;
     const baseId = `tiger-form-item-${instanceId}`;
     const labelId = `${baseId}-label`;
     const fieldId = `${baseId}-field`;
     const errorId = `${baseId}-error`;
-    const actualSize = vue.computed(() => {
-      return props.size || formContext.value?.size || "md";
+    const actualSize = _vue.computed.call(void 0, () => {
+      return props.size || _optionalChain([formContext, 'access', _2 => _2.value, 'optionalAccess', _3 => _3.size]) || "md";
     });
-    const actualLabelWidth = vue.computed(() => {
-      const width = props.labelWidth || formContext.value?.labelWidth;
+    const actualLabelWidth = _vue.computed.call(void 0, () => {
+      const width = props.labelWidth || _optionalChain([formContext, 'access', _4 => _4.value, 'optionalAccess', _5 => _5.labelWidth]);
       if (typeof width === "number") {
         return `${width}px`;
       }
       return width;
     });
-    const labelPosition = vue.computed(() => {
-      return formContext.value?.labelPosition || "right";
+    const labelPosition = _vue.computed.call(void 0, () => {
+      return _optionalChain([formContext, 'access', _6 => _6.value, 'optionalAccess', _7 => _7.labelPosition]) || "right";
     });
-    const labelAlign = vue.computed(() => {
-      return formContext.value?.labelAlign || "right";
+    const labelAlign = _vue.computed.call(void 0, () => {
+      return _optionalChain([formContext, 'access', _8 => _8.value, 'optionalAccess', _9 => _9.labelAlign]) || "right";
     });
     const hasRequiredRule = (maybeRules) => {
       if (!maybeRules) {
@@ -114,14 +137,14 @@ var FormItem = vue.defineComponent({
         return !!rule.required;
       });
     };
-    const showRequiredAsterisk = vue.computed(() => {
+    const showRequiredAsterisk = _vue.computed.call(void 0, () => {
       if (props.required !== void 0) {
         return props.required;
       }
       if (props.rules) {
         return hasRequiredRule(props.rules);
       }
-      if (props.name && formContext.value?.rules) {
+      if (props.name && _optionalChain([formContext, 'access', _10 => _10.value, 'optionalAccess', _11 => _11.rules])) {
         const fieldRules = formContext.value.rules[props.name];
         if (fieldRules) {
           return hasRequiredRule(fieldRules);
@@ -129,24 +152,29 @@ var FormItem = vue.defineComponent({
       }
       return false;
     });
-    const isRequired = vue.computed(() => {
-      return showRequiredAsterisk.value && (formContext.value?.showRequiredAsterisk ?? true);
+    const conditionState = _vue.computed.call(void 0, () => {
+      const ctx = formContext.value;
+      if (!props.name || !ctx) {
+        return { shown: true, disabled: false, required: false };
+      }
+      return ctx.getFieldConditionState(props.name, props.condition);
     });
-    vue.watch(
-      () => formContext.value?.errors,
-      (errors) => {
-        if (props.name && errors) {
-          const error = tigercatCore.getFieldError(props.name, errors) || "";
-          errorMessage.value = error;
-          if (error && error !== prevFormError.value) {
-            shakeTrigger.value++;
-          }
-          prevFormError.value = error;
+    const isRequired = _vue.computed.call(void 0, () => {
+      return (showRequiredAsterisk.value || conditionState.value.required) && (_nullishCoalesce(_optionalChain([formContext, 'access', _12 => _12.value, 'optionalAccess', _13 => _13.showRequiredAsterisk]), () => ( true)));
+    });
+    _vue.watch.call(void 0, 
+      () => props.name ? _optionalChain([formContext, 'access', _14 => _14.value, 'optionalAccess', _15 => _15.errorsByField, 'access', _16 => _16[props.name]]) : void 0,
+      (error) => {
+        const nextError = error || "";
+        errorMessage.value = nextError;
+        if (nextError && nextError !== prevFormError.value) {
+          shakeTrigger.value++;
         }
+        prevFormError.value = nextError;
       },
-      { deep: true, immediate: true }
+      { immediate: true }
     );
-    vue.watch(
+    _vue.watch.call(void 0, 
       () => props.error,
       (error) => {
         if (error !== void 0) {
@@ -159,11 +187,12 @@ var FormItem = vue.defineComponent({
       const ctx = formContext.value;
       if (props.name && ctx) {
         ctx.registerFieldRules(props.name, void 0);
+        ctx.registerFieldCondition(props.name, void 0);
       }
     };
-    vue.watch(
-      () => [props.name, props.rules],
-      ([name, rules]) => {
+    _vue.watch.call(void 0, 
+      () => [props.name, props.rules, props.condition],
+      ([name, rules, condition]) => {
         const ctx = formContext.value;
         if (!name || !ctx) {
           return;
@@ -173,10 +202,11 @@ var FormItem = vue.defineComponent({
         } else {
           ctx.registerFieldRules(name, void 0);
         }
+        ctx.registerFieldCondition(name, condition);
       },
       { immediate: true }
     );
-    vue.onUnmounted(unregisterFieldRules);
+    _vue.onUnmounted.call(void 0, unregisterFieldRules);
     const handleBlur = () => {
       const ctx = formContext.value;
       if (props.name && ctx) {
@@ -189,59 +219,62 @@ var FormItem = vue.defineComponent({
         ctx.validateField(props.name, props.rules, "change");
       }
     };
-    const hasError = vue.computed(() => {
+    const hasError = _vue.computed.call(void 0, () => {
       return !!errorMessage.value;
     });
-    const describedById = vue.computed(() => {
+    const describedById = _vue.computed.call(void 0, () => {
       return props.showMessage && hasError.value ? errorId : void 0;
     });
-    const formItemClasses = vue.computed(() => {
-      return tigercatCore.getFormItemClasses({
+    const formItemClasses = _vue.computed.call(void 0, () => {
+      return _tigercatcore.getFormItemClasses.call(void 0, {
         size: actualSize.value,
         labelPosition: labelPosition.value,
         hasError: hasError.value,
-        disabled: formContext.value?.disabled
+        disabled: _optionalChain([formContext, 'access', _17 => _17.value, 'optionalAccess', _18 => _18.disabled]) || conditionState.value.disabled
       });
     });
-    const labelClasses = vue.computed(() => {
-      return tigercatCore.getFormItemLabelClasses({
+    const labelClasses = _vue.computed.call(void 0, () => {
+      return _tigercatcore.getFormItemLabelClasses.call(void 0, {
         size: actualSize.value,
         labelAlign: labelAlign.value,
         labelPosition: labelPosition.value,
         isRequired: isRequired.value
       });
     });
-    const labelStyles = vue.computed(() => {
+    const labelStyles = _vue.computed.call(void 0, () => {
       if (labelPosition.value === "top") {
         return {};
       }
       return actualLabelWidth.value ? { width: actualLabelWidth.value } : {};
     });
-    const contentClasses = vue.computed(() => tigercatCore.getFormItemContentClasses(labelPosition.value));
-    const errorClasses = vue.computed(() => {
-      return tigercatCore.classNames(tigercatCore.getFormItemErrorClasses(actualSize.value), hasError.value && "opacity-100");
+    const contentClasses = _vue.computed.call(void 0, () => _tigercatcore.getFormItemContentClasses.call(void 0, labelPosition.value));
+    const errorClasses = _vue.computed.call(void 0, () => {
+      return _tigercatcore.classNames.call(void 0, _tigercatcore.getFormItemErrorClasses.call(void 0, actualSize.value), hasError.value && "opacity-100");
     });
-    const fieldClasses = tigercatCore.getFormItemFieldClasses();
-    const asteriskClasses = tigercatCore.getFormItemAsteriskClasses();
+    const fieldClasses = _tigercatcore.getFormItemFieldClasses.call(void 0, );
+    const asteriskClasses = _tigercatcore.getFormItemAsteriskClasses.call(void 0, );
     return () => {
-      const defaultSlot = slots.default?.() ?? [];
+      if (!conditionState.value.shown) {
+        return null;
+      }
+      const defaultSlot = _nullishCoalesce(_optionalChain([slots, 'access', _19 => _19.default, 'optionalCall', _20 => _20()]), () => ( []));
       const only = defaultSlot.length === 1 ? defaultSlot[0] : void 0;
-      const isSingleVNode = only != null && vue.isVNode(only);
+      const isSingleVNode = only != null && _vue.isVNode.call(void 0, only);
       const effectiveFieldId = (() => {
         if (!isSingleVNode) {
           return void 0;
         }
-        const p = only.props ?? {};
-        return p.id ?? fieldId;
+        const p = _nullishCoalesce(only.props, () => ( {}));
+        return _nullishCoalesce(p.id, () => ( fieldId));
       })();
       const fieldChildren = (() => {
         if (!isSingleVNode) {
           return defaultSlot;
         }
         const vnode = only;
-        const existingProps = vnode.props ?? {};
+        const existingProps = _nullishCoalesce(vnode.props, () => ( {}));
         const isNativeElement = typeof vnode.type === "string";
-        const merged = vue.cloneVNode(
+        const merged = _vue.cloneVNode.call(void 0, 
           vnode,
           {
             id: effectiveFieldId,
@@ -250,6 +283,7 @@ var FormItem = vue.defineComponent({
             _shakeTrigger: !isNativeElement && hasError.value ? shakeTrigger.value : void 0,
             "aria-invalid": hasError.value ? "true" : existingProps["aria-invalid"],
             "aria-required": isRequired.value ? "true" : existingProps["aria-required"],
+            disabled: conditionState.value.disabled || _optionalChain([formContext, 'access', _21 => _21.value, 'optionalAccess', _22 => _22.disabled]) ? true : existingProps.disabled,
             "aria-describedby": mergeAriaDescribedBy(
               existingProps["aria-describedby"],
               describedById.value
@@ -261,7 +295,7 @@ var FormItem = vue.defineComponent({
         );
         return [merged];
       })();
-      const labelElement = props.label ? vue.h(
+      const labelElement = props.label ? _vue.h.call(void 0, 
         "label",
         {
           class: labelClasses.value,
@@ -269,15 +303,15 @@ var FormItem = vue.defineComponent({
           id: labelId,
           for: effectiveFieldId
         },
-        [isRequired.value && vue.h("span", { class: asteriskClasses }, "*"), props.label]
+        [isRequired.value && _vue.h.call(void 0, "span", { class: asteriskClasses }, "*"), props.label]
       ) : null;
-      const contentElement = vue.h(
+      const contentElement = _vue.h.call(void 0, 
         "div",
         {
-          class: tigercatCore.classNames(contentClasses.value, props.errorDisplayMode === "popup" && "relative")
+          class: _tigercatcore.classNames.call(void 0, contentClasses.value, props.errorDisplayMode === "popup" && "relative")
         },
         [
-          vue.h(
+          _vue.h.call(void 0, 
             "div",
             {
               class: fieldClasses,
@@ -285,21 +319,20 @@ var FormItem = vue.defineComponent({
               "aria-labelledby": props.label ? labelId : void 0,
               "aria-describedby": describedById.value,
               "aria-invalid": hasError.value ? "true" : void 0,
-              "aria-required": isRequired.value ? "true" : void 0,
               onFocusout: isSingleVNode ? void 0 : handleBlur,
               onInput: isSingleVNode ? void 0 : handleChange
             },
             fieldChildren
           ),
-          props.showMessage && vue.h(
+          props.showMessage && _vue.h.call(void 0, 
             "div",
             {
               id: hasError.value ? errorId : void 0,
               role: hasError.value ? "alert" : void 0,
-              class: props.errorDisplayMode === "block" ? tigercatCore.classNames(
+              class: props.errorDisplayMode === "block" ? _tigercatcore.classNames.call(void 0, 
                 "mt-1 p-2 rounded bg-red-50 border border-red-200 text-red-600 text-sm",
                 !hasError.value && "hidden"
-              ) : props.errorDisplayMode === "popup" ? tigercatCore.classNames(
+              ) : props.errorDisplayMode === "popup" ? _tigercatcore.classNames.call(void 0, 
                 "absolute z-10 mt-1 px-2 py-1 rounded bg-red-600 text-white text-xs shadow-lg",
                 !hasError.value && "hidden"
               ) : errorClasses.value,
@@ -309,7 +342,7 @@ var FormItem = vue.defineComponent({
           )
         ]
       );
-      return vue.h(
+      return _vue.h.call(void 0, 
         "div",
         {
           class: formItemClasses.value
@@ -321,5 +354,7 @@ var FormItem = vue.defineComponent({
 });
 var FormItem_default = FormItem;
 
-exports.FormItem = FormItem;
-exports.FormItem_default = FormItem_default;
+
+
+
+exports.FormItem = FormItem; exports.FormItem_default = FormItem_default;