@expcat/tigercat-vue 2.1.2 → 2.1.3

package/dist/chunk-4VJB4XFH.mjs

@@ -0,0 +1,316 @@
+import {
+  FORM_ITEM_CONTROL_INJECTION_KEY
+} from "./chunk-P2LZ2MR5.mjs";
+import {
+  renderVueOverlayTeleport,
+  useVueBodyScrollLock,
+  useVueEscapeKey,
+  useVueFocusTrap
+} from "./chunk-Y63TRXZO.mjs";
+import {
+  useTigerConfig
+} from "./chunk-4GOTWNOO.mjs";
+
+// src/components/NumberKeyboard.ts
+import { computed, defineComponent, h, inject, provide, ref, watch } from "vue";
+import {
+  applyNumberKeyboardKey,
+  classNames,
+  coerceClassValue,
+  getNumberKeyboardInteractiveIndexes,
+  getNumberKeyboardKeyClasses,
+  getNumberKeyboardKeys,
+  getNumberKeyboardLabels,
+  mergeAriaDescribedBy,
+  mergeStyleValues,
+  mergeTigerLocale,
+  moveNumberKeyboardIndex,
+  numberKeyboardEmptyKeyClasses,
+  numberKeyboardGridClasses,
+  numberKeyboardRootClasses,
+  numberKeyboardScrimClasses,
+  numberKeyboardSheetClasses,
+  postNumberKeyboardValue,
+  resolveAnchoredOverlayTarget,
+  resolveNumberKeyboardPhysicalKey
+} from "@expcat/tigercat-core";
+var NumberKeyboard = defineComponent({
+  name: "TigerNumberKeyboard",
+  inheritAttrs: false,
+  props: {
+    modelValue: { type: String, default: void 0 },
+    defaultValue: { type: String, default: void 0 },
+    mode: { type: String, default: "number" },
+    maxLength: { type: Number, default: void 0 },
+    precision: { type: Number, default: void 0 },
+    decimalSeparator: { type: String, default: "." },
+    disabled: { type: Boolean, default: false },
+    readonly: { type: Boolean, default: false },
+    confirmText: { type: String, default: void 0 },
+    deleteText: { type: String, default: void 0 },
+    ariaLabel: { type: String, default: void 0 },
+    showConfirm: { type: Boolean, default: true },
+    open: { type: Boolean, default: void 0 },
+    defaultOpen: { type: Boolean, default: void 0 },
+    name: { type: String, default: void 0 },
+    id: { type: String, default: void 0 },
+    status: { type: String, default: void 0 },
+    locale: { type: Object, default: void 0 },
+    labels: {
+      type: Object,
+      default: void 0
+    },
+    className: { type: String, default: void 0 },
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: [
+    "update:modelValue",
+    "update:open",
+    "change",
+    "input",
+    "open-change",
+    "key-press",
+    "delete",
+    "confirm",
+    "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(
+      () => getNumberKeyboardLabels(mergedLocale.value, {
+        ...props.labels,
+        ariaLabel: props.ariaLabel?.trim() || props.labels?.ariaLabel,
+        deleteText: props.deleteText?.trim() || props.labels?.deleteText,
+        confirmText: props.confirmText?.trim()
+      })
+    );
+    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 overlayMode = computed(() => props.open !== void 0 || props.defaultOpen !== void 0);
+    const innerValue = ref(postNumberKeyboardValue(props.defaultValue, props.mode));
+    const innerOpen = ref(props.defaultOpen ?? false);
+    const currentValue = computed(() => {
+      if (props.modelValue !== void 0)
+        return postNumberKeyboardValue(props.modelValue, props.mode);
+      if (formItemControl?.value.value !== void 0) {
+        return postNumberKeyboardValue(formItemControl.value.value, props.mode);
+      }
+      return innerValue.value;
+    });
+    const isOpen = computed(() => props.open !== void 0 ? props.open : innerOpen.value);
+    const overlayEnabled = computed(
+      () => overlayMode.value && isOpen.value && !effectiveDisabled.value
+    );
+    const keys = computed(
+      () => getNumberKeyboardKeys({
+        mode: props.mode,
+        decimalSeparator: props.decimalSeparator,
+        showConfirm: props.showConfirm,
+        labels: labels.value
+      })
+    );
+    const interactive = computed(() => getNumberKeyboardInteractiveIndexes(keys.value));
+    const activeIndex = ref(interactive.value[0] ?? 0);
+    watch(interactive, (next) => {
+      if (!next.includes(activeIndex.value)) activeIndex.value = next[0] ?? 0;
+    });
+    const rootRef = ref(null);
+    const sheetRef = ref(null);
+    useVueFocusTrap({ enabled: overlayEnabled, containerRef: sheetRef, inert: true });
+    useVueBodyScrollLock(overlayEnabled);
+    useVueEscapeKey({
+      enabled: overlayEnabled,
+      onEscape: () => setOpenSafe(false),
+      layerRef: sheetRef
+    });
+    function setOpenSafe(next) {
+      if (!overlayMode.value || effectiveDisabled.value) return;
+      if (props.open === void 0) innerOpen.value = next;
+      emit("update:open", next);
+      emit("open-change", next);
+    }
+    function writeValue(next, payload) {
+      if (props.modelValue === void 0) innerValue.value = next;
+      emit("update:modelValue", next);
+      emit("input", next);
+      emit("change", next, payload);
+      formItemControl?.onChange(next);
+    }
+    function applyKey(key) {
+      if (effectiveDisabled.value || props.readonly || key.type === "empty") return;
+      const result = applyNumberKeyboardKey(currentValue.value, key, {
+        mode: props.mode,
+        maxLength: props.maxLength,
+        precision: props.precision,
+        decimalSeparator: props.decimalSeparator
+      });
+      const payload = {
+        value: result.nextValue,
+        key: key.value,
+        action: result.action,
+        mode: props.mode
+      };
+      emit("key-press", key, payload);
+      if (result.action === "confirm") {
+        emit("confirm", currentValue.value, { ...payload, value: currentValue.value });
+        setOpenSafe(false);
+        return;
+      }
+      if (result.action === "delete") emit("delete", result.nextValue, payload);
+      if (result.changed) writeValue(result.nextValue, payload);
+    }
+    function handleGroupKeyDown(event) {
+      if (effectiveDisabled.value) return;
+      if (event.key === "ArrowLeft" || event.key === "ArrowRight" || event.key === "ArrowUp" || event.key === "ArrowDown" || event.key === "Home" || event.key === "End") {
+        event.preventDefault();
+        activeIndex.value = moveNumberKeyboardIndex(keys.value, activeIndex.value, event.key);
+        return;
+      }
+      if (event.key === " ") {
+        event.preventDefault();
+        const key = keys.value[activeIndex.value];
+        if (key) applyKey(key);
+        return;
+      }
+      const physical = resolveNumberKeyboardPhysicalKey(event.key, {
+        mode: props.mode,
+        decimalSeparator: props.decimalSeparator
+      });
+      if (!physical) return;
+      event.preventDefault();
+      const match = keys.value.find((key) => key.type === physical.type && key.value === physical.value) ?? {
+        type: physical.type,
+        value: physical.value,
+        label: physical.value,
+        ariaLabel: physical.value
+      };
+      applyKey(match);
+    }
+    function handleFocusOut(event) {
+      const next = event.relatedTarget;
+      const root = overlayMode.value ? sheetRef.value : rootRef.value;
+      if (root && next && root.contains(next)) return;
+      formItemControl?.onBlur();
+      emit("blur", event);
+    }
+    expose({
+      focus: () => (overlayMode.value ? sheetRef.value : rootRef.value)?.focus()
+    });
+    const rootClasses = computed(
+      () => classNames(numberKeyboardRootClasses, props.className, coerceClassValue(attrs.class))
+    );
+    const sheetClasses = computed(
+      () => classNames(numberKeyboardSheetClasses, props.className, coerceClassValue(attrs.class))
+    );
+    const rootStyle = computed(
+      () => mergeStyleValues(props.style, attrs.style)
+    );
+    function renderKeys() {
+      return h(
+        "div",
+        { class: numberKeyboardGridClasses },
+        keys.value.map(
+          (key, index) => key.type === "empty" ? h("div", {
+            key: `${key.type}-${index}`,
+            class: numberKeyboardEmptyKeyClasses,
+            "aria-hidden": "true"
+          }) : h(
+            "button",
+            {
+              key: `${key.type}-${key.value}-${index}`,
+              type: "button",
+              tabindex: -1,
+              class: getNumberKeyboardKeyClasses(key, effectiveDisabled.value),
+              disabled: effectiveDisabled.value,
+              "aria-label": key.ariaLabel,
+              "data-key": key.value,
+              "data-active": index === activeIndex.value ? "" : void 0,
+              onClick: () => {
+                activeIndex.value = index;
+                applyKey(key);
+              }
+            },
+            key.label
+          )
+        )
+      );
+    }
+    function renderGroup(sheet) {
+      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);
+      return h(
+        "div",
+        {
+          ...forwardedAttrs,
+          ref: sheet ? sheetRef : rootRef,
+          class: sheet ? sheetClasses.value : rootClasses.value,
+          style: sheet ? void 0 : rootStyle.value,
+          role: sheet ? "dialog" : "group",
+          "aria-modal": sheet || void 0,
+          id: effectiveId.value,
+          tabindex: effectiveDisabled.value ? -1 : 0,
+          "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,
+          "data-tiger-number-keyboard": "",
+          onKeydown: handleGroupKeyDown,
+          onFocusout: handleFocusOut
+        },
+        [
+          effectiveName.value ? h("input", {
+            type: "hidden",
+            name: effectiveName.value,
+            value: currentValue.value
+          }) : null,
+          renderKeys()
+        ]
+      );
+    }
+    return () => {
+      if (!overlayMode.value) return renderGroup(false);
+      const target = resolveAnchoredOverlayTarget(rootRef.value);
+      return h("div", { ref: rootRef, class: classNames("contents", props.className) }, [
+        effectiveName.value ? h("input", { type: "hidden", name: effectiveName.value, value: currentValue.value }) : null,
+        overlayEnabled.value ? renderVueOverlayTeleport(
+          [
+            h("div", { class: numberKeyboardScrimClasses, onClick: () => setOpenSafe(false) }),
+            renderGroup(true)
+          ],
+          target
+        ) : null
+      ]);
+    };
+  }
+});
+var NumberKeyboard_default = NumberKeyboard;
+
+export {
+  NumberKeyboard,
+  NumberKeyboard_default
+};