@expcat/tigercat-vue 2.1.2 → 2.1.4

package/dist/chunk-5G47QDGH.mjs

@@ -0,0 +1,47 @@
+import {
+  PieChart
+} from "./chunk-ED4EXBY6.mjs";
+
+// src/components/DonutChart.ts
+import { defineComponent, h } from "vue";
+import {
+  classNames,
+  coerceClassValue,
+  DEFAULT_DONUT_INNER_RADIUS_RATIO
+} from "@expcat/tigercat-core";
+var DonutChart = defineComponent({
+  name: "TigerDonutChart",
+  inheritAttrs: false,
+  props: {
+    data: {
+      type: Array,
+      required: true
+    },
+    innerRadiusRatio: {
+      type: Number,
+      default: DEFAULT_DONUT_INNER_RADIUS_RATIO
+    },
+    className: {
+      type: String
+    }
+  },
+  emits: ["update:hoveredIndex", "update:selectedIndex", "slice-click", "slice-hover"],
+  setup(props, { attrs, emit }) {
+    return () => h(PieChart, {
+      ...attrs,
+      data: props.data,
+      innerRadiusRatio: props.innerRadiusRatio,
+      className: classNames(coerceClassValue(attrs.class), props.className),
+      "onUpdate:hoveredIndex": (index) => emit("update:hoveredIndex", index),
+      "onUpdate:selectedIndex": (index) => emit("update:selectedIndex", index),
+      onSliceClick: (index, datum) => emit("slice-click", index, datum),
+      onSliceHover: (index, datum) => emit("slice-hover", index, datum)
+    });
+  }
+});
+var DonutChart_default = DonutChart;
+
+export {
+  DonutChart,
+  DonutChart_default
+};

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-5T5QNVKL.mjs

@@ -0,0 +1,137 @@
+import {
+  useTigerConfig
+} from "./chunk-4GOTWNOO.mjs";
+
+// src/components/Statistic.ts
+import {
+  defineComponent,
+  h,
+  ref,
+  computed,
+  watch,
+  onMounted,
+  onBeforeUnmount
+} from "vue";
+import {
+  statisticBaseClasses,
+  getStatisticTitleClasses,
+  getStatisticValueClasses,
+  statisticPrefixClasses,
+  statisticSuffixClasses,
+  formatStatisticValue,
+  canAnimateStatisticValue,
+  createStatisticNumberAnimation,
+  resolveStatisticPrecision,
+  statisticPrefersReducedMotion,
+  classNames,
+  coerceClassValue,
+  mergeTigerLocale
+} from "@expcat/tigercat-core";
+var Statistic = defineComponent({
+  name: "TigerStatistic",
+  inheritAttrs: false,
+  props: {
+    title: { type: String, default: void 0 },
+    value: { type: [String, Number], default: void 0 },
+    precision: { type: Number, default: void 0 },
+    prefix: { type: String, default: void 0 },
+    suffix: { type: String, default: void 0 },
+    groupSeparator: { type: Boolean, default: false },
+    animated: { type: Boolean, default: false },
+    animationDuration: { type: Number, default: void 0 },
+    size: { type: String, default: "md" },
+    className: { type: String, default: void 0 },
+    locale: { type: Object, default: void 0 }
+  },
+  setup(props, { attrs, slots }) {
+    const config = useTigerConfig();
+    const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
+    const displayValue = ref(props.value);
+    const currentNumber = ref(canAnimateStatisticValue(props.value) ? props.value : 0);
+    let controller = null;
+    let hasPlayed = false;
+    let mounted = false;
+    const stopAnimation = () => {
+      controller?.stop();
+      controller = null;
+    };
+    const startAnimation = () => {
+      stopAnimation();
+      if (!props.animated || !canAnimateStatisticValue(props.value) || statisticPrefersReducedMotion()) {
+        displayValue.value = props.value;
+        if (canAnimateStatisticValue(props.value)) currentNumber.value = props.value;
+        return;
+      }
+      const from = hasPlayed ? currentNumber.value : 0;
+      hasPlayed = true;
+      controller = createStatisticNumberAnimation({
+        from,
+        to: props.value,
+        duration: props.animationDuration,
+        onUpdate: (next) => {
+          currentNumber.value = next;
+          displayValue.value = next;
+        },
+        onComplete: () => {
+          currentNumber.value = props.value;
+          displayValue.value = props.value;
+          controller = null;
+        }
+      });
+    };
+    onMounted(() => {
+      mounted = true;
+      startAnimation();
+    });
+    watch(
+      () => [props.value, props.animated, props.animationDuration],
+      () => {
+        if (!mounted) {
+          displayValue.value = props.value;
+          return;
+        }
+        startAnimation();
+      }
+    );
+    onBeforeUnmount(stopAnimation);
+    const formatted = computed(() => {
+      const precision = canAnimateStatisticValue(props.value) ? resolveStatisticPrecision(props.value, props.precision) : props.precision;
+      return formatStatisticValue(
+        displayValue.value,
+        precision,
+        props.groupSeparator,
+        mergedLocale.value?.locale
+      );
+    });
+    return () => {
+      const titleContent = slots.title ? slots.title() : props.title;
+      const prefixContent = slots.prefix ? slots.prefix() : props.prefix;
+      const suffixContent = slots.suffix ? slots.suffix() : props.suffix;
+      return h(
+        "div",
+        {
+          ...attrs,
+          class: classNames(
+            statisticBaseClasses,
+            props.className,
+            coerceClassValue(attrs.class)
+          )
+        },
+        [
+          titleContent ? h("div", { class: getStatisticTitleClasses(props.size) }, titleContent) : null,
+          h("div", { class: getStatisticValueClasses(props.size) }, [
+            prefixContent ? h("span", { class: statisticPrefixClasses }, prefixContent) : null,
+            h("span", null, formatted.value),
+            suffixContent ? h("span", { class: statisticSuffixClasses }, suffixContent) : null
+          ])
+        ]
+      );
+    };
+  }
+});
+var Statistic_default = Statistic;
+
+export {
+  Statistic,
+  Statistic_default
+};

package/dist/{chunk-2TNZ4JNT.mjs → chunk-5VSSB4QF.mjs}

@@ -8,24 +8,6 @@ import {
   icon20ViewBox,
   classNames
 } from "@expcat/tigercat-core";
-function createFilledIcon(path, className) {
-  return h(
-    "svg",
-    {
-      class: className,
-      xmlns: "http://www.w3.org/2000/svg",
-      viewBox: icon20ViewBox,
-      fill: "currentColor"
-    },
-    [
-      h("path", {
-        "fill-rule": "evenodd",
-        d: path,
-        "clip-rule": "evenodd"
-      })
-    ]
-  );
-}
 function createStatusIcon(path, className, extraAttrs) {
   return h(
     "svg",
@@ -47,13 +29,12 @@ function createStatusIcon(path, className, extraAttrs) {
     ]
   );
 }
-function createStatusIconWithLoading(path, className, isLoading, spinnerClass) {
+function createStatusIconWithLoading(path, className, isLoading, spinnerClass, extraAttrs) {
   const merged = classNames(className, isLoading && spinnerClass);
-  return createStatusIcon(path, merged);
+  return createStatusIcon(path, merged, extraAttrs);
 }
 
 export {
-  createFilledIcon,
   createStatusIcon,
   createStatusIconWithLoading
 };