@expcat/tigercat-vue 2.1.2 → 2.1.3

package/dist/chunk-5G5CROE3.mjs

@@ -0,0 +1,480 @@
+import {
+  INPUT_GROUP_INJECTION_KEY
+} from "./chunk-J4HGCSOE.mjs";
+import {
+  FORM_ITEM_CONTROL_INJECTION_KEY
+} from "./chunk-P2LZ2MR5.mjs";
+import {
+  useTigerConfig
+} from "./chunk-4GOTWNOO.mjs";
+
+// src/components/InputNumber.ts
+import {
+  defineComponent,
+  computed,
+  ref,
+  watch,
+  h,
+  onBeforeUnmount,
+  inject,
+  getCurrentInstance
+} from "vue";
+import {
+  classNames,
+  coerceClassValue,
+  callUnknownEventHandler,
+  getInputNumberWrapperClasses,
+  getInputNumberSizeClasses,
+  getInputNumberInputClasses,
+  getInputNumberStepButtonClasses,
+  getInputNumberSideButtonClasses,
+  inputNumberControlsRightClasses,
+  inputNumberUpIconPathD,
+  inputNumberDownIconPathD,
+  inputNumberMinusIconPathD,
+  inputNumberPlusIconPathD,
+  stepValue,
+  isAtMin,
+  isAtMax,
+  formatInputNumberDisplay,
+  formatInputNumberEditingDisplay,
+  parseInputNumberValue,
+  commitInputNumberValue,
+  getInputNumberKeyboardNextValue,
+  resolveInputNumberControlsLayout,
+  createRafRepeatActionController,
+  mergeAriaDescribedBy,
+  runShakeAnimation,
+  SHAKE_CLASS,
+  TIGER_CHROME_ATTR,
+  getInputNumberLabels
+} from "@expcat/tigercat-core";
+var InputNumber = defineComponent({
+  name: "TigerInputNumber",
+  inheritAttrs: false,
+  props: {
+    modelValue: {
+      type: [Number, null]
+    },
+    defaultValue: {
+      type: [Number, null],
+      default: void 0
+    },
+    size: {
+      type: String,
+      default: "md"
+    },
+    status: {
+      type: String,
+      default: "default"
+    },
+    min: {
+      type: Number,
+      default: -Infinity
+    },
+    max: {
+      type: Number,
+      default: Infinity
+    },
+    step: {
+      type: Number,
+      default: 1
+    },
+    precision: {
+      type: Number,
+      default: void 0
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    placeholder: String,
+    name: String,
+    id: String,
+    keyboard: {
+      type: Boolean,
+      default: true
+    },
+    controls: {
+      type: Boolean,
+      default: true
+    },
+    controlsPosition: {
+      type: String,
+      default: "right"
+    },
+    formatter: {
+      type: Function
+    },
+    parser: {
+      type: Function
+    },
+    autoFocus: {
+      type: Boolean,
+      default: false
+    },
+    incrementAriaLabel: String,
+    decrementAriaLabel: String,
+    _shakeTrigger: {
+      type: Number,
+      default: void 0
+    },
+    className: {
+      type: String,
+      default: void 0
+    }
+  },
+  emits: ["update:modelValue", "change", "focus", "blur", "keydown"],
+  setup(props, { emit, attrs, expose }) {
+    const instance = getCurrentInstance();
+    const config = useTigerConfig();
+    const inputGroup = inject(INPUT_GROUP_INJECTION_KEY, null);
+    const formItemControl = inject(
+      FORM_ITEM_CONTROL_INJECTION_KEY,
+      null
+    );
+    const inGroup = computed(() => inputGroup != null);
+    const labels = computed(
+      () => getInputNumberLabels(config.value.locale, {
+        incrementAriaLabel: props.incrementAriaLabel,
+        decrementAriaLabel: props.decrementAriaLabel
+      })
+    );
+    const effectiveSize = computed(() => {
+      const hasOwnSize = Object.prototype.hasOwnProperty.call(instance?.vnode.props ?? {}, "size");
+      return hasOwnSize ? props.size : inputGroup?.size ?? props.size;
+    });
+    const hasOwnStatus = computed(
+      () => Object.prototype.hasOwnProperty.call(instance?.vnode.props ?? {}, "status")
+    );
+    const effectiveStatus = computed(
+      () => hasOwnStatus.value ? props.status : formItemControl?.status.value ?? props.status
+    );
+    const effectiveDisabled = computed(
+      () => props.disabled || (formItemControl?.disabled.value ?? false)
+    );
+    const effectiveId = computed(() => props.id ?? formItemControl?.id.value);
+    const effectiveName = computed(() => props.name ?? formItemControl?.name.value);
+    const formValue = computed(() => formItemControl?.value.value);
+    const effectiveShakeTrigger = computed(
+      () => props._shakeTrigger ?? formItemControl?.shakeTrigger.value
+    );
+    const inputRef = ref(null);
+    const wrapperRef = ref(null);
+    const focused = ref(false);
+    const displayValue = ref("");
+    const repeatController = createRafRepeatActionController();
+    let repeatValue = null;
+    let suppressNextClick = false;
+    expose({
+      focus: () => inputRef.value?.focus(),
+      input: inputRef
+    });
+    function toDisplayValue(val, editing) {
+      return editing ? formatInputNumberEditingDisplay(val, props.precision) : formatInputNumberDisplay(val, {
+        formatter: props.formatter,
+        precision: props.precision
+      });
+    }
+    function parseValue(str) {
+      return parseInputNumberValue(str, { parser: props.parser });
+    }
+    const isControlled = computed(() => props.modelValue !== void 0);
+    const internalValue = ref(props.modelValue ?? props.defaultValue ?? null);
+    const currentValue = computed(() => {
+      if (isControlled.value) return props.modelValue ?? null;
+      if (formItemControl?.name.value) {
+        return typeof formValue.value === "number" ? formValue.value : null;
+      }
+      return internalValue.value;
+    });
+    watch(
+      () => [currentValue.value, focused.value, props.formatter, props.precision],
+      () => {
+        if (!focused.value) displayValue.value = toDisplayValue(currentValue.value, false);
+      },
+      { immediate: true }
+    );
+    watch(
+      [effectiveStatus, effectiveShakeTrigger],
+      ([newStatus], oldValue) => {
+        if (oldValue === void 0) return;
+        if (newStatus === "error") runShakeAnimation(wrapperRef.value);
+      },
+      { flush: "post" }
+    );
+    function commit(val, nextFocused = focused.value) {
+      const { value: next, changed } = commitInputNumberValue(val, currentValue.value, {
+        min: props.min,
+        max: props.max,
+        precision: props.precision
+      });
+      if (changed) {
+        if (!isControlled.value) internalValue.value = next;
+        emit("update:modelValue", next);
+        emit("change", next);
+        formItemControl?.onChange(next);
+      }
+      displayValue.value = toDisplayValue(next, nextFocused);
+      return next;
+    }
+    function handleStep(direction, baseValue = currentValue.value) {
+      if (effectiveDisabled.value || props.readonly) return baseValue ?? null;
+      const next = stepValue(
+        baseValue,
+        props.step,
+        direction,
+        props.min,
+        props.max,
+        props.precision
+      );
+      return commit(next);
+    }
+    function handleStepClick(direction) {
+      if (suppressNextClick) {
+        suppressNextClick = false;
+        return;
+      }
+      handleStep(direction);
+    }
+    function startStepRepeat(direction) {
+      return (event) => {
+        event.preventDefault();
+        if (effectiveDisabled.value || props.readonly) return;
+        if (direction === "down" && isAtMin(currentValue.value, props.min)) return;
+        if (direction === "up" && isAtMax(currentValue.value, props.max)) return;
+        suppressNextClick = true;
+        repeatValue = currentValue.value;
+        repeatController.start(() => {
+          const baseValue = repeatValue;
+          const nextValue = handleStep(direction, baseValue);
+          repeatValue = nextValue;
+          if (nextValue === baseValue) repeatController.stop();
+        });
+        inputRef.value?.focus();
+      };
+    }
+    function stopStepRepeat() {
+      repeatController.stop();
+    }
+    function handleInput(e) {
+      displayValue.value = e.target.value;
+    }
+    function handleBlur(e) {
+      commit(parseValue(displayValue.value), false);
+      focused.value = false;
+      formItemControl?.onBlur();
+      emit("blur", e);
+    }
+    function handleFocus(e) {
+      focused.value = true;
+      displayValue.value = toDisplayValue(currentValue.value, true);
+      emit("focus", e);
+    }
+    function handleKeyDown(e) {
+      if (e.key === "Enter") {
+        commit(parseValue(displayValue.value));
+      } else {
+        const next = getInputNumberKeyboardNextValue(e.key, currentValue.value, {
+          min: props.min,
+          max: props.max,
+          step: props.step,
+          precision: props.precision,
+          keyboard: props.keyboard && !effectiveDisabled.value && !props.readonly
+        });
+        if (next !== void 0) {
+          e.preventDefault();
+          commit(next);
+        }
+      }
+      emit("keydown", e);
+    }
+    const atMin = computed(() => isAtMin(currentValue.value, props.min));
+    const atMax = computed(() => isAtMax(currentValue.value, props.max));
+    const layout = computed(
+      () => resolveInputNumberControlsLayout(props.controls, props.controlsPosition)
+    );
+    const stepDisabled = computed(() => effectiveDisabled.value || props.readonly);
+    const wrapperClasses = computed(
+      () => classNames(
+        getInputNumberWrapperClasses({
+          disabled: effectiveDisabled.value,
+          inGroup: inGroup.value,
+          status: effectiveStatus.value
+        }),
+        getInputNumberSizeClasses(effectiveSize.value),
+        props.className,
+        coerceClassValue(attrs.class)
+      )
+    );
+    const inputClasses = computed(
+      () => getInputNumberInputClasses(effectiveSize.value, layout.value)
+    );
+    onBeforeUnmount(() => repeatController.stop());
+    function renderStepIcon(d, stroke) {
+      return h(
+        "svg",
+        {
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox: "0 0 24 24",
+          fill: stroke ? "none" : "currentColor",
+          stroke: stroke ? "currentColor" : void 0,
+          "stroke-width": stroke ? "2" : void 0,
+          class: stroke ? "w-4 h-4" : "w-3 h-3",
+          "aria-hidden": "true"
+        },
+        [h("path", { d })]
+      );
+    }
+    return () => {
+      const { class: _attrClass, style: attrStyle, ...restAttrs } = attrs;
+      const children = [];
+      const valueText = currentValue.value == null ? labels.value.emptyAriaValueText : props.formatter ? props.formatter(currentValue.value) : String(currentValue.value);
+      if (layout.value === "both") {
+        children.push(
+          h(
+            "button",
+            {
+              type: "button",
+              tabindex: -1,
+              "aria-hidden": "true",
+              "aria-label": labels.value.decrementAriaLabel,
+              class: getInputNumberSideButtonClasses("start", stepDisabled.value || atMin.value),
+              disabled: stepDisabled.value || atMin.value,
+              onPointerdown: startStepRepeat("down"),
+              onPointerup: stopStepRepeat,
+              onPointerleave: stopStepRepeat,
+              onPointercancel: stopStepRepeat,
+              onClick: () => handleStepClick("down")
+            },
+            [renderStepIcon(inputNumberMinusIconPathD, true)]
+          )
+        );
+      }
+      children.push(
+        h("input", {
+          ...restAttrs,
+          ref: inputRef,
+          type: "text",
+          inputmode: "decimal",
+          role: "spinbutton",
+          autofocus: props.autoFocus ? true : void 0,
+          "aria-valuemin": props.min === -Infinity ? void 0 : props.min,
+          "aria-valuemax": props.max === Infinity ? void 0 : props.max,
+          "aria-valuenow": currentValue.value ?? void 0,
+          "aria-valuetext": valueText,
+          ...effectiveStatus.value === "error" ? { "aria-invalid": true } : {},
+          "aria-describedby": mergeAriaDescribedBy(
+            restAttrs["aria-describedby"],
+            formItemControl?.describedBy.value
+          ),
+          class: inputClasses.value,
+          value: displayValue.value,
+          placeholder: props.placeholder,
+          disabled: effectiveDisabled.value,
+          readonly: props.readonly,
+          name: effectiveName.value,
+          id: effectiveId.value,
+          onInput: (event) => {
+            handleInput(event);
+            callUnknownEventHandler(restAttrs.onInput, event);
+          },
+          onBlur: (event) => {
+            handleBlur(event);
+            callUnknownEventHandler(restAttrs.onBlur, event);
+          },
+          onFocus: (event) => {
+            handleFocus(event);
+            callUnknownEventHandler(restAttrs.onFocus, event);
+          },
+          onKeydown: (event) => {
+            handleKeyDown(event);
+            callUnknownEventHandler(restAttrs.onKeydown, event);
+          }
+        })
+      );
+      if (layout.value === "both") {
+        children.push(
+          h(
+            "button",
+            {
+              type: "button",
+              tabindex: -1,
+              "aria-hidden": "true",
+              "aria-label": labels.value.incrementAriaLabel,
+              class: getInputNumberSideButtonClasses("end", stepDisabled.value || atMax.value),
+              disabled: stepDisabled.value || atMax.value,
+              onPointerdown: startStepRepeat("up"),
+              onPointerup: stopStepRepeat,
+              onPointerleave: stopStepRepeat,
+              onPointercancel: stopStepRepeat,
+              onClick: () => handleStepClick("up")
+            },
+            [renderStepIcon(inputNumberPlusIconPathD, true)]
+          )
+        );
+      }
+      if (layout.value === "end") {
+        children.push(
+          h("div", { class: inputNumberControlsRightClasses }, [
+            h(
+              "button",
+              {
+                type: "button",
+                tabindex: -1,
+                "aria-hidden": "true",
+                "aria-label": labels.value.incrementAriaLabel,
+                class: getInputNumberStepButtonClasses("up", stepDisabled.value || atMax.value),
+                disabled: stepDisabled.value || atMax.value,
+                onPointerdown: startStepRepeat("up"),
+                onPointerup: stopStepRepeat,
+                onPointerleave: stopStepRepeat,
+                onPointercancel: stopStepRepeat,
+                onClick: () => handleStepClick("up")
+              },
+              [renderStepIcon(inputNumberUpIconPathD, false)]
+            ),
+            h(
+              "button",
+              {
+                type: "button",
+                tabindex: -1,
+                "aria-hidden": "true",
+                "aria-label": labels.value.decrementAriaLabel,
+                class: getInputNumberStepButtonClasses("down", stepDisabled.value || atMin.value),
+                disabled: stepDisabled.value || atMin.value,
+                onPointerdown: startStepRepeat("down"),
+                onPointerup: stopStepRepeat,
+                onPointerleave: stopStepRepeat,
+                onPointercancel: stopStepRepeat,
+                onClick: () => handleStepClick("down")
+              },
+              [renderStepIcon(inputNumberDownIconPathD, false)]
+            )
+          ])
+        );
+      }
+      return h(
+        "div",
+        {
+          ref: wrapperRef,
+          class: wrapperClasses.value,
+          style: attrStyle,
+          [TIGER_CHROME_ATTR]: "",
+          onAnimationend: () => wrapperRef.value?.classList.remove(SHAKE_CLASS)
+        },
+        children
+      );
+    };
+  }
+});
+var InputNumber_default = InputNumber;
+
+export {
+  InputNumber,
+  InputNumber_default
+};

package/dist/{chunk-H2SX7D23.mjs → chunk-5RJDVHNT.mjs}

@@ -1,14 +1,23 @@
 import {
   createStatusIcon
-} from "./chunk-2TNZ4JNT.mjs";
+} from "./chunk-5VSSB4QF.mjs";
+import {
+  renderVueBodyTeleport
+} from "./chunk-Y63TRXZO.mjs";
+import {
+  getGlobalTigerLocale,
+  useTigerConfig
+} from "./chunk-4GOTWNOO.mjs";
 
 // src/components/NotificationContainer.ts
-import { computed, defineComponent, h, Teleport, TransitionGroup } from "vue";
+import { computed, defineComponent, h } from "vue";
 import {
   classNames,
   coerceClassValue,
+  getNotificationCloseAriaLabel,
   getNotificationIconPath,
   getNotificationTypeClasses,
+  getToastItemRole,
   notificationActionButtonClasses,
   notificationActionButtonTypeClasses,
   notificationActionsClasses,
@@ -21,14 +30,9 @@ import {
   notificationDescriptionClasses,
   notificationIconClasses,
   notificationPositionClasses,
-  notificationTitleClasses
+  notificationTitleClasses,
+  shouldHandleToastSurfaceEvent
 } from "@expcat/tigercat-core";
-var NOTIFICATION_CONTAINER_ID_PREFIX = "tiger-notification-container";
-var NOTIFICATION_CLOSE_ARIA_LABEL = "Close notification";
-var IS_TEST_ENV = (() => {
-  const proc = globalThis.process;
-  return typeof proc !== "undefined" && proc.env?.NODE_ENV === "test";
-})();
 var NotificationContainer = /* @__PURE__ */ defineComponent({
   name: "TigerNotificationContainer",
   inheritAttrs: false,
@@ -41,13 +45,24 @@ var NotificationContainer = /* @__PURE__ */ defineComponent({
       type: Array,
       default: () => []
     },
-    onClose: Function
+    className: {
+      type: String,
+      default: void 0
+    },
+    portal: {
+      type: Boolean,
+      default: true
+    }
   },
-  setup(props, { attrs }) {
+  emits: ["close"],
+  setup(props, { attrs, emit }) {
+    const config = useTigerConfig();
+    const locale = computed(() => config.value.locale ?? getGlobalTigerLocale());
     const containerClasses = computed(
       () => classNames(
         notificationContainerBaseClasses,
         notificationPositionClasses[props.position],
+        props.className,
         coerceClassValue(attrs.class)
       )
     );
@@ -61,14 +76,13 @@ var NotificationContainer = /* @__PURE__ */ defineComponent({
       );
       const iconPath = notification.icon || getNotificationIconPath(notification.type);
       const iconClass = classNames(notificationIconClasses, colorScheme.icon);
-      const a11yRole = notification.type === "error" ? "alert" : "status";
-      const ariaLive = notification.type === "error" ? "assertive" : "polite";
+      const a11yRole = getToastItemRole(notification.type);
+      const closeLabel = getNotificationCloseAriaLabel(locale.value, notification.closeAriaLabel);
+      const close = () => emit("close", notification.id);
       const contentChildren = [
         h(
           "div",
-          {
-            class: classNames(notificationTitleClasses, colorScheme.titleText)
-          },
+          { class: classNames(notificationTitleClasses, colorScheme.titleText) },
           notification.title
         )
       ];
@@ -76,9 +90,7 @@ var NotificationContainer = /* @__PURE__ */ defineComponent({
         contentChildren.push(
           h(
             "div",
-            {
-              class: classNames(notificationDescriptionClasses, colorScheme.descriptionText)
-            },
+            { class: classNames(notificationDescriptionClasses, colorScheme.descriptionText) },
             notification.description
           )
         );
@@ -99,15 +111,13 @@ var NotificationContainer = /* @__PURE__ */ defineComponent({
                   ),
                   type: "button",
                   disabled: action.disabled,
-                  onClick: (e) => {
-                    e.stopPropagation();
+                  onClick: (event) => {
+                    event.stopPropagation();
                     action.onClick?.({
                       id: notification.id,
-                      close: () => props.onClose?.(notification.id)
+                      close
                     });
-                    if (action.closeOnClick) {
-                      props.onClose?.(notification.id);
-                    }
+                    if (action.closeOnClick) close();
                   }
                 },
                 action.label
@@ -126,11 +136,11 @@ var NotificationContainer = /* @__PURE__ */ defineComponent({
             "button",
             {
               class: notificationCloseButtonClasses,
-              onClick: (e) => {
-                e.stopPropagation();
-                props.onClose?.(notification.id);
+              onClick: (event) => {
+                event.stopPropagation();
+                close();
               },
-              "aria-label": notification.closeAriaLabel ?? NOTIFICATION_CLOSE_ARIA_LABEL,
+              "aria-label": closeLabel,
               type: "button"
             },
             createStatusIcon(notificationCloseIconPath, notificationCloseIconClasses, {
@@ -146,18 +156,11 @@ var NotificationContainer = /* @__PURE__ */ defineComponent({
           key: notification.id,
           class: notificationClasses,
           role: a11yRole,
-          "aria-live": ariaLive,
-          "aria-atomic": "true",
-          onClick: notification.onClick,
-          onKeydown: (e) => {
+          onClick: (event) => {
             if (!notification.onClick) return;
-            const key = e.key;
-            if (key === "Enter" || key === " ") {
-              e.preventDefault();
-              notification.onClick();
-            }
+            if (!shouldHandleToastSurfaceEvent(event)) return;
+            notification.onClick();
           },
-          tabindex: notification.onClick ? 0 : void 0,
           style: notification.onClick ? "cursor: pointer;" : void 0,
           "data-tiger-notification": "",
           "data-tiger-notification-type": notification.type,
@@ -166,31 +169,19 @@ var NotificationContainer = /* @__PURE__ */ defineComponent({
         children
       );
     };
-    return () => h(
-      Teleport,
-      { to: "body" },
-      h(
+    return () => {
+      const node = h(
         "div",
         {
           ...attrs,
           class: containerClasses.value,
-          id: `${NOTIFICATION_CONTAINER_ID_PREFIX}-${props.position}`,
-          "aria-live": "polite",
-          "aria-relevant": "additions",
           "data-tiger-notification-container": "",
           "data-tiger-notification-position": props.position
         },
-        IS_TEST_ENV ? props.notifications.map(renderNotificationItem) : h(
-          TransitionGroup,
-          {
-            name: "notification",
-            tag: "div",
-            class: "flex flex-col gap-3"
-          },
-          () => props.notifications.map(renderNotificationItem)
-        )
-      )
-    );
+        props.notifications.map(renderNotificationItem)
+      );
+      return props.portal ? renderVueBodyTeleport(node) : node;
+    };
   }
 });
 var NotificationContainer_default = NotificationContainer;