@expcat/tigercat-vue 2.1.2 → 2.1.3

package/dist/chunk-IO6I54M3.mjs

@@ -0,0 +1,298 @@
+import {
+  FORM_ITEM_CONTROL_INJECTION_KEY
+} from "./chunk-P2LZ2MR5.mjs";
+import {
+  useTigerConfig
+} from "./chunk-4GOTWNOO.mjs";
+
+// src/components/Stepper.ts
+import {
+  computed,
+  defineComponent,
+  h,
+  inject,
+  onBeforeUnmount,
+  ref,
+  watch
+} from "vue";
+import {
+  stepperBaseClasses,
+  getStepperInputClasses,
+  getStepperButtonClasses,
+  minusPathD,
+  plusPathD,
+  stepperIconViewBox,
+  clampStepperValue,
+  classNames,
+  coerceClassValue,
+  createRafRepeatActionController,
+  stepValue,
+  isAtMin,
+  isAtMax,
+  formatInputNumberEditingDisplay,
+  parseInputNumberValue,
+  commitInputNumberValue,
+  getInputNumberKeyboardNextValue,
+  mergeAriaDescribedBy,
+  mergeStyleValues,
+  runShakeAnimation,
+  getStepperLabels,
+  callUnknownEventHandler
+} from "@expcat/tigercat-core";
+var Stepper = defineComponent({
+  name: "TigerStepper",
+  inheritAttrs: false,
+  props: {
+    modelValue: { type: Number },
+    defaultValue: { type: Number, default: 0 },
+    min: { type: Number, default: Number.NEGATIVE_INFINITY },
+    max: { type: Number, default: Number.POSITIVE_INFINITY },
+    step: { type: Number, default: 1 },
+    disabled: { type: Boolean, default: false },
+    size: { type: String, default: "md" },
+    precision: { type: Number, default: void 0 },
+    incrementAriaLabel: { type: String },
+    decrementAriaLabel: { type: String },
+    status: { type: String },
+    className: { type: String }
+  },
+  emits: ["update:modelValue", "change"],
+  setup(props, { emit, attrs, expose }) {
+    const formItemControl = inject(
+      FORM_ITEM_CONTROL_INJECTION_KEY,
+      null
+    );
+    const config = useTigerConfig();
+    const labels = computed(
+      () => getStepperLabels(config.value.locale, {
+        incrementAriaLabel: props.incrementAriaLabel,
+        decrementAriaLabel: props.decrementAriaLabel
+      })
+    );
+    const inner = ref(props.defaultValue ?? 0);
+    const currentValue = computed(
+      () => props.modelValue !== void 0 ? props.modelValue : inner.value
+    );
+    const effectiveDisabled = computed(
+      () => props.disabled || (formItemControl?.disabled.value ?? false)
+    );
+    const status = computed(
+      () => props.status ?? formItemControl?.status.value ?? "default"
+    );
+    const focused = ref(false);
+    const displayValue = ref(formatInputNumberEditingDisplay(currentValue.value, props.precision));
+    const inputRef = ref(null);
+    const rootRef = ref(null);
+    const repeatController = createRafRepeatActionController();
+    let repeatValue = currentValue.value;
+    let suppressNextClick = false;
+    expose({
+      focus: () => inputRef.value?.focus(),
+      input: inputRef
+    });
+    onBeforeUnmount(() => repeatController.stop());
+    watch(
+      () => currentValue.value,
+      (value) => {
+        if (!focused.value) {
+          displayValue.value = formatInputNumberEditingDisplay(value, props.precision);
+        }
+      }
+    );
+    watch(
+      () => [status.value, formItemControl?.shakeTrigger.value],
+      ([nextStatus], oldValue) => {
+        if (oldValue === void 0) return;
+        if (nextStatus === "error") runShakeAnimation(rootRef.value);
+      },
+      { flush: "post" }
+    );
+    const emitValue = (next) => {
+      if (next === currentValue.value) return;
+      if (props.modelValue === void 0) inner.value = next;
+      emit("update:modelValue", next);
+      emit("change", next);
+      formItemControl?.onChange(next);
+    };
+    const commit = (raw) => {
+      const { value: next } = commitInputNumberValue(raw, currentValue.value, {
+        min: props.min,
+        max: props.max,
+        precision: props.precision
+      });
+      const clamped = clampStepperValue(
+        next ?? currentValue.value,
+        props.min,
+        props.max,
+        props.precision,
+        props.step
+      );
+      emitValue(clamped);
+      displayValue.value = formatInputNumberEditingDisplay(clamped, props.precision);
+      return clamped;
+    };
+    const stepBy = (direction, baseValue = currentValue.value) => {
+      if (effectiveDisabled.value) return baseValue;
+      const next = stepValue(
+        baseValue,
+        props.step,
+        direction,
+        props.min,
+        props.max,
+        props.precision
+      );
+      if (next === baseValue) return baseValue;
+      emitValue(next);
+      displayValue.value = formatInputNumberEditingDisplay(next, props.precision);
+      return next;
+    };
+    const handleStepClick = (direction) => {
+      if (suppressNextClick) {
+        suppressNextClick = false;
+        return;
+      }
+      stepBy(direction);
+    };
+    const startStepRepeat = (direction) => {
+      return (event) => {
+        event.preventDefault();
+        if (effectiveDisabled.value) 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 = stepBy(direction, baseValue);
+          repeatValue = nextValue;
+          if (nextValue === baseValue) repeatController.stop();
+        });
+        inputRef.value?.focus();
+      };
+    };
+    const stopStepRepeat = () => repeatController.stop();
+    const icon = (d) => h(
+      "svg",
+      {
+        class: "w-4 h-4",
+        viewBox: stepperIconViewBox,
+        fill: "currentColor",
+        "aria-hidden": "true"
+      },
+      [h("path", { d, "fill-rule": "evenodd", "clip-rule": "evenodd" })]
+    );
+    return () => {
+      const { class: _class, style: _style, onBlur: _onBlur, ...restAttrs } = attrs;
+      const labelledby = typeof restAttrs["aria-labelledby"] === "string" && restAttrs["aria-labelledby"].trim() ? restAttrs["aria-labelledby"] : formItemControl?.labelId.value;
+      const ariaLabel = typeof restAttrs["aria-label"] === "string" && restAttrs["aria-label"].trim() ? restAttrs["aria-label"] : labelledby ? void 0 : labels.value.ariaLabel;
+      const describedBy = mergeAriaDescribedBy(
+        typeof restAttrs["aria-describedby"] === "string" ? restAttrs["aria-describedby"] : void 0,
+        formItemControl?.describedBy.value
+      );
+      const attrId = typeof restAttrs.id === "string" ? restAttrs.id : void 0;
+      const atMin = isAtMin(currentValue.value, props.min);
+      const atMax = isAtMax(currentValue.value, props.max);
+      return h(
+        "div",
+        {
+          ...restAttrs,
+          ref: rootRef,
+          class: classNames(stepperBaseClasses, props.className, coerceClassValue(attrs.class)),
+          style: mergeStyleValues(attrs.style),
+          role: "group",
+          "aria-label": ariaLabel,
+          "aria-labelledby": labelledby
+        },
+        [
+          h(
+            "button",
+            {
+              type: "button",
+              class: getStepperButtonClasses(props.size, effectiveDisabled.value || atMin, "start"),
+              disabled: effectiveDisabled.value || atMin,
+              tabindex: -1,
+              "aria-label": labels.value.decrementAriaLabel,
+              onPointerdown: startStepRepeat("down"),
+              onPointerup: stopStepRepeat,
+              onPointerleave: stopStepRepeat,
+              onPointercancel: stopStepRepeat,
+              onClick: () => handleStepClick("down")
+            },
+            [icon(minusPathD)]
+          ),
+          h("input", {
+            ref: inputRef,
+            type: "text",
+            inputmode: "decimal",
+            role: "spinbutton",
+            class: getStepperInputClasses(props.size, effectiveDisabled.value, status.value),
+            value: focused.value ? displayValue.value : formatInputNumberEditingDisplay(currentValue.value, props.precision),
+            disabled: effectiveDisabled.value,
+            id: attrId ?? formItemControl?.id.value,
+            "aria-label": labels.value.valueAriaLabel,
+            "aria-valuenow": currentValue.value,
+            "aria-valuemin": Number.isFinite(props.min) ? props.min : void 0,
+            "aria-valuemax": Number.isFinite(props.max) ? props.max : void 0,
+            "aria-valuetext": Number.isFinite(currentValue.value) ? String(currentValue.value) : labels.value.valueAriaLabel,
+            "aria-invalid": status.value === "error" ? true : void 0,
+            "aria-describedby": describedBy,
+            onFocus: () => {
+              focused.value = true;
+              displayValue.value = formatInputNumberEditingDisplay(
+                currentValue.value,
+                props.precision
+              );
+            },
+            onBlur: (event) => {
+              commit(parseInputNumberValue(displayValue.value));
+              focused.value = false;
+              formItemControl?.onBlur();
+              callUnknownEventHandler(attrs.onBlur, event);
+            },
+            onInput: (event) => {
+              displayValue.value = event.target.value;
+            },
+            onKeydown: (event) => {
+              if (event.key === "Enter") {
+                commit(parseInputNumberValue(displayValue.value));
+                return;
+              }
+              const next = getInputNumberKeyboardNextValue(event.key, currentValue.value, {
+                min: props.min,
+                max: props.max,
+                step: props.step,
+                precision: props.precision
+              });
+              if (next === void 0) return;
+              event.preventDefault();
+              emitValue(next);
+              displayValue.value = formatInputNumberEditingDisplay(next, props.precision);
+            }
+          }),
+          h(
+            "button",
+            {
+              type: "button",
+              class: getStepperButtonClasses(props.size, effectiveDisabled.value || atMax, "end"),
+              disabled: effectiveDisabled.value || atMax,
+              tabindex: -1,
+              "aria-label": labels.value.incrementAriaLabel,
+              onPointerdown: startStepRepeat("up"),
+              onPointerup: stopStepRepeat,
+              onPointerleave: stopStepRepeat,
+              onPointercancel: stopStepRepeat,
+              onClick: () => handleStepClick("up")
+            },
+            [icon(plusPathD)]
+          )
+        ]
+      );
+    };
+  }
+});
+var Stepper_default = Stepper;
+
+export {
+  Stepper,
+  Stepper_default
+};

package/dist/{chunk-OYU47A57.mjs → chunk-IOSUZR6Z.mjs}

@@ -1,6 +1,6 @@
 import {
   useTigerConfig
-} from "./chunk-UOJOJBEU.mjs";
+} from "./chunk-4GOTWNOO.mjs";
 
 // src/components/Pagination.ts
 import {
@@ -9,7 +9,8 @@ import {
   ref,
   watch,
   onBeforeUnmount,
-  h
+  h,
+  useId
 } from "vue";
 import {
   classNames,
@@ -20,6 +21,13 @@ import {
   validateCurrentPage,
   getPageNumbers,
   formatPaginationTotal,
+  formatPaginationPageIndicator,
+  normalizePaginationTotal,
+  normalizePaginationPageSize,
+  resolvePageSizeOptions,
+  getQuickJumperPrefixClasses,
+  chevronLeftSolidIcon20PathD,
+  icon20ViewBox,
   getPaginationContainerClasses,
   getPaginationButtonBaseClasses,
   getPaginationEllipsisClasses,
@@ -29,7 +37,6 @@ import {
   getSizeTextClasses,
   getPaginationLabels,
   getLocaleDirection,
-  formatPageAriaLabel,
   createPaginationIdleValidationScheduler,
   getImmediateTigerLocale,
   getPaginationJumperPage,
@@ -244,6 +251,7 @@ var Pagination = defineComponent({
     const labels = computed(() => getPaginationLabels(mergedLocale.value, props.labels));
     const localeCode = computed(() => mergedLocale.value?.locale);
     const isRtl = computed(() => getLocaleDirection(mergedLocale.value) === "rtl");
+    const jumperId = `tiger-pagination-jumper-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
     const internalCurrent = ref(props.defaultCurrent);
     const internalPageSize = ref(props.defaultPageSize);
     const quickJumperValue = ref("");
@@ -262,34 +270,35 @@ var Pagination = defineComponent({
     const currentPage = computed(() => {
       return props.current !== void 0 ? props.current : internalCurrent.value;
     });
-    const currentPageSize = computed(() => {
-      return props.pageSize !== void 0 ? props.pageSize : internalPageSize.value;
-    });
-    const totalPages = computed(() => {
-      return getTotalPages(props.total, currentPageSize.value);
-    });
-    const validatedCurrentPage = computed(() => {
-      return validateCurrentPage(currentPage.value, totalPages.value);
-    });
-    const pageRange = computed(() => {
-      return getPageRange(validatedCurrentPage.value, currentPageSize.value, props.total);
-    });
+    const currentPageSize = computed(
+      () => normalizePaginationPageSize(
+        props.pageSize !== void 0 ? props.pageSize : internalPageSize.value
+      )
+    );
+    const itemTotal = computed(() => normalizePaginationTotal(props.total));
+    const totalPages = computed(() => getTotalPages(itemTotal.value, currentPageSize.value));
+    const validatedCurrentPage = computed(
+      () => validateCurrentPage(currentPage.value, totalPages.value)
+    );
+    const pageRange = computed(
+      () => getPageRange(validatedCurrentPage.value, currentPageSize.value, itemTotal.value)
+    );
     const shouldHide = computed(() => {
       return props.hideOnSinglePage && totalPages.value <= 1;
     });
     const handlePageChange = (page) => {
       if (props.disabled) return;
-      if (page === validatedCurrentPage.value) return;
-      if (page < 1 || page > totalPages.value) return;
+      const next = validateCurrentPage(page, totalPages.value);
+      if (next === validatedCurrentPage.value) return;
       if (props.current === void 0) {
-        internalCurrent.value = page;
+        internalCurrent.value = next;
       }
-      emit("update:current", page);
-      emit("change", page, currentPageSize.value);
+      emit("update:current", next);
+      emit("change", next, currentPageSize.value);
     };
     const handlePageSizeChange = (newPageSize) => {
       if (props.disabled) return;
-      const newTotalPages = getTotalPages(props.total, newPageSize);
+      const newTotalPages = getTotalPages(itemTotal.value, normalizePaginationPageSize(newPageSize));
       let newPage = validatedCurrentPage.value;
       if (newPage > newTotalPages) {
         newPage = Math.max(1, newTotalPages);
@@ -333,18 +342,13 @@ var Pagination = defineComponent({
       );
     });
     const mergedStyle = computed(() => mergeStyleValues(attrsStyle, props.style));
-    const normalizedPageSizeOptions = computed(() => {
-      return (props.pageSizeOptions || []).map((option) => {
-        if (typeof option === "number") {
-          return {
-            value: option,
-            label: `${option} ${labels.value.itemsPerPageText}`
-          };
-        }
-        const label = option.label ?? `${option.value} ${labels.value.itemsPerPageText}`;
-        return { value: option.value, label };
-      });
-    });
+    const normalizedPageSizeOptions = computed(
+      () => resolvePageSizeOptions(
+        props.pageSizeOptions || [],
+        currentPageSize.value,
+        labels.value.itemsPerPageText
+      )
+    );
     return () => {
       if (shouldHide.value) {
         return null;
@@ -358,7 +362,11 @@ var Pagination = defineComponent({
       if (props.showTotal) {
         const totalTextFn = props.totalText || ((value, range) => formatPaginationTotal(labels.value.totalText, value, range, localeCode.value));
         elements.push(
-          h("span", { class: getTotalTextClasses(size) }, totalTextFn(props.total, pageRange.value))
+          h(
+            "span",
+            { class: getTotalTextClasses(size) },
+            totalTextFn(itemTotal.value, pageRange.value)
+          )
         );
       }
       elements.push(
@@ -371,17 +379,31 @@ var Pagination = defineComponent({
             onClick: () => handlePageChange(page - 1),
             "aria-label": labels.value.prevPageAriaLabel
           },
-          isRtl.value ? "\u203A" : "\u2039"
+          h(
+            "svg",
+            {
+              class: "h-4 w-4 rtl:-scale-x-100",
+              viewBox: icon20ViewBox,
+              fill: "currentColor",
+              "aria-hidden": "true"
+            },
+            h("path", {
+              "fill-rule": "evenodd",
+              d: chevronLeftSolidIcon20PathD,
+              "clip-rule": "evenodd"
+            })
+          )
         )
       );
       if (props.simple) {
-        const indicatorText = props.pageIndicatorText ? props.pageIndicatorText(page, pages) : `${page} / ${pages}`;
+        const indicatorText = props.pageIndicatorText ? props.pageIndicatorText(page, pages) : formatPaginationPageIndicator(
+          labels.value.pageIndicatorText,
+          page,
+          pages,
+          localeCode.value
+        );
         elements.push(
-          h(
-            "span",
-            { class: classNames("mx-2", getSizeTextClasses(size)), "aria-label": indicatorText },
-            indicatorText
-          )
+          h("span", { class: classNames("mx-2", getSizeTextClasses(size)) }, indicatorText)
         );
       } else {
         getPageNumbers(page, pages, props.showLessItems).forEach((pageNum) => {
@@ -399,12 +421,8 @@ var Pagination = defineComponent({
                   class: getPaginationButtonBaseClasses(size, isActive),
                   disabled: props.disabled,
                   onClick: () => handlePageChange(pageNum),
-                  "aria-label": formatPageAriaLabel(
-                    labels.value.pageAriaLabel,
-                    pageNum,
-                    localeCode.value
-                  ),
-                  "aria-current": isActive ? "page" : void 0
+                  "aria-current": isActive ? "page" : void 0,
+                  "aria-label": labels.value.pageAriaLabel.replace("{page}", String(pageNum))
                 },
                 String(pageNum)
               )
@@ -422,7 +440,20 @@ var Pagination = defineComponent({
             onClick: () => handlePageChange(page + 1),
             "aria-label": labels.value.nextPageAriaLabel
           },
-          isRtl.value ? "\u2039" : "\u203A"
+          h(
+            "svg",
+            {
+              class: "h-4 w-4 -scale-x-100 rtl:scale-x-100",
+              viewBox: icon20ViewBox,
+              fill: "currentColor",
+              "aria-hidden": "true"
+            },
+            h("path", {
+              "fill-rule": "evenodd",
+              d: chevronLeftSolidIcon20PathD,
+              "clip-rule": "evenodd"
+            })
+          )
         )
       );
       if (props.showSizeChanger) {
@@ -436,7 +467,7 @@ var Pagination = defineComponent({
               onChange: (e) => {
                 handlePageSizeChange(parseInt(e.target.value, 10));
               },
-              "aria-label": labels.value.itemsPerPageText
+              "aria-label": labels.value.pageSizeAriaLabel
             },
             normalizedPageSizeOptions.value.map(
               (sizeOption) => h("option", { value: sizeOption.value, key: sizeOption.value }, sizeOption.label)
@@ -446,10 +477,18 @@ var Pagination = defineComponent({
       }
       if (props.showQuickJumper) {
         const sizeText = getSizeTextClasses(size);
-        elements.push(h("span", { class: classNames("ml-2", sizeText) }, labels.value.jumpToText));
+        elements.push(
+          h(
+            "label",
+            { class: getQuickJumperPrefixClasses(size), for: jumperId },
+            labels.value.jumpToText
+          )
+        );
         elements.push(
           h("input", {
-            type: "number",
+            id: jumperId,
+            type: "text",
+            inputmode: "numeric",
             class: classNames(getQuickJumperInputClasses(size), "mx-2"),
             disabled: props.disabled,
             value: quickJumperValue.value,
@@ -457,9 +496,7 @@ var Pagination = defineComponent({
               handleQuickJumperInput(e.target.value);
             },
             onKeydown: handleQuickJumperKeypress,
-            min: 1,
-            max: pages,
-            "aria-label": labels.value.jumpToText
+            onBlur: handleQuickJumperSubmit
           })
         );
         elements.push(h("span", { class: sizeText }, labels.value.pageText));
@@ -476,8 +513,8 @@ var Pagination = defineComponent({
           ...restAttrs,
           class: containerClasses.value,
           style: mergedStyle.value,
-          role: "navigation",
-          "aria-label": typeof ariaLabelAttr === "string" ? ariaLabelAttr : "Pagination"
+          dir: isRtl.value ? "rtl" : "ltr",
+          "aria-label": typeof ariaLabelAttr === "string" ? ariaLabelAttr : labels.value.paginationAriaLabel
         },
         elements
       );