@expcat/tigercat-vue 2.0.19 → 2.1.1

package/dist/chunk-6GR5U4UB.mjs

@@ -0,0 +1,225 @@
+import {
+  Button
+} from "./chunk-YZBQ6IR7.mjs";
+import {
+  Link
+} from "./chunk-3MO7A4GU.mjs";
+
+// src/components/PageHeader.ts
+import { defineComponent, getCurrentInstance, h } from "vue";
+import {
+  chevronLeftSolidIcon20PathD,
+  coerceClassValue,
+  composeComponentClasses,
+  getPageHeaderBackButtonClasses,
+  getPageHeaderRootClasses,
+  hasPageHeaderHeadingContent,
+  icon20ViewBox,
+  mergeStyleValues,
+  pageHeaderActionsClasses,
+  pageHeaderBackIconClasses,
+  pageHeaderBackWrapClasses,
+  pageHeaderContentClasses,
+  pageHeaderHeadingRowClasses,
+  pageHeaderMainClasses,
+  pageHeaderStartClasses,
+  pageHeaderSubtitleClasses,
+  pageHeaderTitleClasses,
+  pageHeaderTitleRowClasses,
+  resolvePageHeaderBackAriaLabel,
+  resolvePageHeaderBackVisibility
+} from "@expcat/tigercat-core";
+function hasSlotContent(nodes) {
+  return Array.isArray(nodes) && nodes.length > 0;
+}
+function createBackIcon() {
+  return h(
+    "svg",
+    {
+      class: pageHeaderBackIconClasses,
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: icon20ViewBox,
+      fill: "currentColor",
+      "aria-hidden": "true",
+      focusable: "false"
+    },
+    [
+      h("path", {
+        "fill-rule": "evenodd",
+        d: chevronLeftSolidIcon20PathD,
+        "clip-rule": "evenodd"
+      })
+    ]
+  );
+}
+var PageHeader = defineComponent({
+  name: "TigerPageHeader",
+  inheritAttrs: false,
+  props: {
+    /**
+     * Whether to show the back control.
+     * When omitted, the control is shown if `@back`, `backHref`, or a `#back`
+     * slot is provided. Set `false` to force-hide.
+     */
+    showBack: {
+      type: Boolean,
+      default: void 0
+    },
+    /**
+     * Navigation URL for the default back control. Renders a Link instead of
+     * a Button when set and no `#back` slot is provided.
+     */
+    backHref: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Accessible name for the default back control
+     * @default 'Back'
+     */
+    backAriaLabel: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Page title
+     */
+    title: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Secondary text shown beside the title
+     */
+    subTitle: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Additional CSS classes
+     */
+    className: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Inline styles
+     */
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: {
+    /**
+     * Emitted when the default back control is activated
+     */
+    back: (event) => event instanceof MouseEvent
+  },
+  setup(props, { slots, emit, attrs }) {
+    const instance = getCurrentInstance();
+    const handleBack = (event) => {
+      emit("back", event);
+    };
+    return () => {
+      const attrsRecord = attrs;
+      const vnodeProps = instance?.vnode.props;
+      const breadcrumb = slots.breadcrumb?.();
+      const titleSlot = slots.title?.();
+      const subTitleSlot = slots.subTitle?.();
+      const actions = slots.actions?.();
+      const backOverride = slots.back?.();
+      const body = slots.default?.();
+      const hasBreadcrumb = hasSlotContent(breadcrumb);
+      const hasTitleSlot = hasSlotContent(titleSlot);
+      const hasSubTitleSlot = hasSlotContent(subTitleSlot);
+      const hasActions = hasSlotContent(actions);
+      const hasBackOverride = hasSlotContent(backOverride);
+      const hasBody = hasSlotContent(body);
+      const titleContent = hasTitleSlot ? titleSlot : props.title;
+      const subTitleContent = hasSubTitleSlot ? subTitleSlot : props.subTitle;
+      const hasTitle = hasTitleSlot || Boolean(props.title);
+      const hasSubtitle = hasSubTitleSlot || Boolean(props.subTitle);
+      const showBack = resolvePageHeaderBackVisibility({
+        showBack: props.showBack,
+        hasHandler: Boolean(vnodeProps && "onBack" in vnodeProps),
+        hasBackHref: Boolean(props.backHref),
+        hasBackOverride
+      });
+      const showHeading = hasPageHeaderHeadingContent({
+        showBack,
+        hasBreadcrumb,
+        hasTitle,
+        hasSubtitle,
+        hasActions
+      });
+      const backAriaLabel = resolvePageHeaderBackAriaLabel(props.backAriaLabel);
+      const backControl = showBack ? h("div", { class: pageHeaderBackWrapClasses, "data-page-header-back": "" }, [
+        hasBackOverride ? backOverride : props.backHref ? h(
+          Link,
+          {
+            href: props.backHref,
+            underline: false,
+            variant: "default",
+            class: getPageHeaderBackButtonClasses(),
+            "aria-label": backAriaLabel,
+            onClick: handleBack
+          },
+          { default: () => [createBackIcon()] }
+        ) : h(
+          Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            className: getPageHeaderBackButtonClasses(),
+            "aria-label": backAriaLabel,
+            onClick: handleBack
+          },
+          { default: () => [createBackIcon()] }
+        )
+      ]) : null;
+      const mainColumn = hasBreadcrumb || hasTitle || hasSubtitle ? h("div", { class: pageHeaderMainClasses }, [
+        hasBreadcrumb ? breadcrumb : null,
+        hasTitle || hasSubtitle ? h("div", { class: pageHeaderTitleRowClasses }, [
+          hasTitle ? h(
+            "div",
+            { class: pageHeaderTitleClasses, "data-page-header-title": "" },
+            titleContent
+          ) : null,
+          hasSubtitle ? h(
+            "div",
+            { class: pageHeaderSubtitleClasses, "data-page-header-subtitle": "" },
+            subTitleContent
+          ) : null
+        ]) : null
+      ]) : null;
+      const heading = showHeading ? h("div", { class: pageHeaderHeadingRowClasses, "data-page-header-heading": "" }, [
+        h("div", { class: pageHeaderStartClasses }, [backControl, mainColumn]),
+        hasActions ? h(
+          "div",
+          { class: pageHeaderActionsClasses, "data-page-header-actions": "" },
+          actions
+        ) : null
+      ]) : null;
+      return h(
+        "header",
+        {
+          ...attrs,
+          class: composeComponentClasses(
+            getPageHeaderRootClasses(props.className),
+            coerceClassValue(attrsRecord.class)
+          ),
+          style: mergeStyleValues(attrsRecord.style, props.style),
+          "data-page-header": ""
+        },
+        [heading, hasBody ? h("div", { class: pageHeaderContentClasses }, body) : null]
+      );
+    };
+  }
+});
+var PageHeader_default = PageHeader;
+
+export {
+  PageHeader,
+  PageHeader_default
+};

package/dist/{chunk-KFJIZED5.mjs → chunk-6JAAXPBW.mjs}

@@ -1,18 +1,18 @@
 import {
   useChartInteraction
-} from "./chunk-PE5OA4YG.mjs";
+} from "./chunk-FHUGOSEY.mjs";
+import {
+  ChartSeries
+} from "./chunk-2ZUEXCVJ.mjs";
 import {
   ChartTooltip
 } from "./chunk-SPFL55TF.mjs";
 import {
   ChartCanvas
-} from "./chunk-W5RZPTFD.mjs";
+} from "./chunk-SNNT64HK.mjs";
 import {
   ChartLegend
 } from "./chunk-V443QIJM.mjs";
-import {
-  ChartSeries
-} from "./chunk-2ZUEXCVJ.mjs";
 
 // src/components/TreeMapChart.ts
 import { defineComponent, computed, h, useId } from "vue";
@@ -76,6 +76,7 @@ var TreeMapChart = defineComponent({
       wrapperClasses
     } = useChartInteraction({
       hoverable: computed(() => props.hoverable),
+      showTooltip: computed(() => props.showTooltip),
       hoveredIndexProp: () => props.hoveredIndex,
       selectable: computed(() => props.selectable),
       selectedIndexProp: () => props.selectedIndex,
@@ -219,7 +220,7 @@ var TreeMapChart = defineComponent({
           }
         }
       );
-      const tooltip = props.showTooltip && props.hoverable ? h(ChartTooltip, {
+      const tooltip = props.showTooltip ? h(ChartTooltip, {
         content: tooltipContent.value,
         open: resolvedHoveredIndex.value !== null && tooltipContent.value !== "",
         x: tooltipPosition.value.x,

package/dist/{chunk-XGXZF27U.mjs → chunk-6NYC7EY2.mjs}

@@ -1,6 +1,12 @@
+import {
+  useResponsiveChartSize
+} from "./chunk-UEGNXN5B.mjs";
 import {
   useChartInteraction
-} from "./chunk-PE5OA4YG.mjs";
+} from "./chunk-FHUGOSEY.mjs";
+import {
+  ChartSeries
+} from "./chunk-2ZUEXCVJ.mjs";
 import {
   ChartTooltip
 } from "./chunk-SPFL55TF.mjs";
@@ -9,16 +15,13 @@ import {
 } from "./chunk-ZWVA7HT3.mjs";
 import {
   ChartCanvas
-} from "./chunk-W5RZPTFD.mjs";
+} from "./chunk-SNNT64HK.mjs";
 import {
   ChartGrid
 } from "./chunk-MI6TL3CQ.mjs";
 import {
   ChartLegend
 } from "./chunk-V443QIJM.mjs";
-import {
-  ChartSeries
-} from "./chunk-2ZUEXCVJ.mjs";
 
 // src/components/LineChart.ts
 import { defineComponent, computed, getCurrentInstance, h, ref, useId } from "vue";
@@ -29,7 +32,6 @@ import {
   createLinePath,
   createPointScale,
   getChartElementOpacity,
-  getChartInnerRect,
   getStableChartGradientPrefix,
   getNumberExtent,
   linePointTransitionClasses,
@@ -255,7 +257,12 @@ var LineChart = defineComponent({
     const hoveredPointInfo = ref(null);
     const tooltipPosition = ref({ x: 0, y: 0 });
     const gradientPrefix = getStableChartGradientPrefix("line", useId());
-    const innerRect = computed(() => getChartInnerRect(props.width, props.height, props.padding));
+    const { innerRect, onResolvedSizeChange } = useResponsiveChartSize(
+      () => props.width,
+      () => props.height,
+      () => props.padding,
+      () => props.responsive
+    );
     const resolvedSeries = computed(
       () => resolveSeriesData(props.series, props.data, {
         color: props.lineColor,
@@ -273,6 +280,7 @@ var LineChart = defineComponent({
       wrapperClasses
     } = useChartInteraction({
       hoverable: computed(() => props.hoverable),
+      showTooltip: computed(() => props.showTooltip),
       hoveredIndexProp: () => props.hoveredIndex,
       selectable: computed(() => props.selectable),
       selectedIndexProp: () => props.selectedIndex,
@@ -368,19 +376,23 @@ var LineChart = defineComponent({
     const handlePointMouseEnter = (seriesIndex, pointIndex, event) => {
       hoveredPointInfo.value = { seriesIndex, pointIndex };
       tooltipPosition.value = { x: event.clientX, y: event.clientY };
-      emit(
-        "point-hover",
-        seriesIndex,
-        pointIndex,
-        resolvedSeries.value[seriesIndex]?.data[pointIndex]
-      );
+      if (props.hoverable) {
+        emit(
+          "point-hover",
+          seriesIndex,
+          pointIndex,
+          resolvedSeries.value[seriesIndex]?.data[pointIndex]
+        );
+      }
     };
     const handlePointMouseMove = (event) => {
       tooltipPosition.value = { x: event.clientX, y: event.clientY };
     };
     const handlePointMouseLeave = () => {
       hoveredPointInfo.value = null;
-      emit("point-hover", null, null, null);
+      if (props.hoverable) {
+        emit("point-hover", null, null, null);
+      }
     };
     const showPointTooltipFromElement = (el, seriesIndex, pointIndex) => {
       if (!props.hoverable) return;
@@ -411,6 +423,7 @@ var LineChart = defineComponent({
     };
     return () => {
       const pointClickable = props.selectable || typeof instance?.vnode.props?.onPointClick === "function";
+      const trackPointHover = props.showTooltip || props.hoverable;
       const chart = h(
         ChartCanvas,
         {
@@ -420,7 +433,8 @@ var LineChart = defineComponent({
           responsive: props.responsive,
           title: props.title,
           desc: props.desc,
-          className: classNames(props.className)
+          className: classNames(props.className),
+          onResolvedSizeChange
         },
         {
           default: () => [
@@ -627,9 +641,9 @@ var LineChart = defineComponent({
                         tabindex: pointInteractive ? 0 : void 0,
                         "data-point-index": point.pointIndex,
                         "data-series-key": sd.seriesKey,
-                        onMouseenter: props.hoverable ? (e) => handlePointMouseEnter(sd.seriesIndex, point.pointIndex, e) : void 0,
-                        onMousemove: props.hoverable ? handlePointMouseMove : void 0,
-                        onMouseleave: props.hoverable ? handlePointMouseLeave : void 0,
+                        onMouseenter: trackPointHover ? (e) => handlePointMouseEnter(sd.seriesIndex, point.pointIndex, e) : void 0,
+                        onMousemove: trackPointHover ? handlePointMouseMove : void 0,
+                        onMouseleave: trackPointHover ? handlePointMouseLeave : void 0,
                         onClick: pointClickable ? (e) => {
                           e.stopPropagation();
                           handlePointClick(sd.seriesIndex, point.pointIndex);

package/dist/{chunk-6BDDX2R4.mjs → chunk-73Z7N7VG.mjs}

@@ -99,10 +99,7 @@ var Radio = defineComponent({
     });
     const isInGroup = computed(() => !!groupContext.value);
     const actualSize = computed(() => props.size || groupContext.value?.size || "md");
-    const actualDisabled = computed(() => {
-      if (props.disabled !== void 0) return props.disabled;
-      return groupContext.value?.disabled || false;
-    });
+    const actualDisabled = computed(() => props.disabled || groupContext.value?.disabled || false);
     const actualName = computed(() => props.name || groupContext.value?.name);
     const isChecked = computed(() => {
       if (isCheckedControlled.value) return props.modelValue;

package/dist/chunk-7C7SG3SS.mjs

@@ -0,0 +1,269 @@
+import {
+  FORM_ITEM_CONTROL_INJECTION_KEY
+} from "./chunk-P2LZ2MR5.mjs";
+import {
+  useTigerConfig
+} from "./chunk-UOJOJBEU.mjs";
+
+// src/components/MaskInput.ts
+import { computed, defineComponent, h, inject, nextTick, ref, watch } from "vue";
+import {
+  applyMaskInput,
+  classNames,
+  coerceClassValue,
+  formatMaskValue,
+  getInputClasses,
+  getInputClearButtonClasses,
+  getInputErrorClasses,
+  getInputWrapperClasses,
+  injectShakeStyle,
+  mergeStyleValues,
+  parseMask,
+  SHAKE_CLASS
+} from "@expcat/tigercat-core";
+var maskInputIdCounter = 0;
+var MaskInput = defineComponent({
+  name: "TigerMaskInput",
+  inheritAttrs: false,
+  props: {
+    /**
+     * Raw (unmasked) value for v-model
+     */
+    modelValue: { type: String, default: void 0 },
+    /**
+     * Default raw value (for uncontrolled mode)
+     */
+    defaultValue: { type: String, default: "" },
+    /**
+     * Mask template. Built-in tokens: `#` digit, `a` letter, `*` alphanumeric,
+     * `!` escapes the next character to a literal
+     */
+    mask: { type: String, required: true },
+    /**
+     * Custom tokens merged over the built-ins
+     */
+    tokens: { type: Object, default: void 0 },
+    /**
+     * Input size
+     * @default 'md'
+     */
+    size: { type: String, default: "md" },
+    /**
+     * Validation status
+     * @default 'default'
+     */
+    status: { type: String, default: "default" },
+    /** Error message to display */
+    errorMessage: String,
+    /** Placeholder text */
+    placeholder: { type: String, default: "" },
+    /** Whether the input is disabled */
+    disabled: Boolean,
+    /** Whether the input is readonly */
+    readonly: Boolean,
+    /** Whether to show a clear button when the input has value */
+    clearable: Boolean,
+    /**
+     * Input name attribute. When set, a hidden input with this name submits the
+     * raw (unmasked) value; the visible field displays the mask and has no name.
+     */
+    name: String,
+    /** Input id attribute */
+    id: String,
+    /** Autocomplete attribute */
+    autoComplete: String,
+    /** Whether to autofocus on mount */
+    autoFocus: Boolean,
+    /**
+     * Internal shake trigger counter (used by FormItem)
+     * @internal
+     */
+    _shakeTrigger: { type: Number, default: void 0 },
+    /** Additional CSS classes */
+    className: String,
+    /** Inline styles */
+    style: { type: Object, default: void 0 }
+  },
+  emits: {
+    "update:modelValue": null,
+    change: null,
+    complete: null,
+    focus: null,
+    blur: null,
+    clear: null
+  },
+  setup(props, { emit, attrs }) {
+    injectShakeStyle();
+    const formItemControl = inject(
+      FORM_ITEM_CONTROL_INJECTION_KEY,
+      null
+    );
+    useTigerConfig();
+    const effectiveStatus = computed(
+      () => props.status !== "default" ? props.status : formItemControl?.status.value ?? props.status
+    );
+    const effectiveErrorMessage = computed(
+      () => props.errorMessage ?? formItemControl?.errorMessage.value
+    );
+    const effectiveShakeTrigger = computed(
+      () => props._shakeTrigger ?? formItemControl?.shakeTrigger.value
+    );
+    const instanceId = ++maskInputIdCounter;
+    const errorMsgId = `tiger-mask-input-error-${instanceId}`;
+    const wrapperRef = ref(null);
+    const inputRef = ref(null);
+    const isComposing = ref(false);
+    const spec = computed(() => parseMask(props.mask, props.tokens));
+    const isControlled = computed(() => props.modelValue !== void 0);
+    const innerRaw = ref(props.defaultValue ?? "");
+    const rawValue = computed(
+      () => isControlled.value ? props.modelValue ?? "" : innerRaw.value
+    );
+    const formatted = computed(() => formatMaskValue(rawValue.value, spec.value));
+    const maskedValue = computed(() => formatted.value.maskedValue);
+    watch([effectiveStatus, effectiveShakeTrigger], ([newStatus]) => {
+      if (newStatus === "error" && wrapperRef.value) {
+        const el = wrapperRef.value;
+        el.classList.remove(SHAKE_CLASS);
+        void el.offsetWidth;
+        el.classList.add(SHAKE_CLASS);
+      }
+    });
+    const commit = (raw, detail, previousMasked) => {
+      if (!isControlled.value) innerRaw.value = raw;
+      emit("update:modelValue", raw);
+      emit("change", raw, detail);
+      if (detail.completed && !formatMaskValue(previousMasked, spec.value).completed) {
+        emit("complete", raw, detail.maskedValue);
+      }
+    };
+    const applyValue = (inputValue, caret) => {
+      const previousMasked = maskedValue.value;
+      const result = applyMaskInput(inputValue, caret, spec.value, previousMasked);
+      if (inputRef.value) inputRef.value.value = result.maskedValue;
+      commit(
+        result.rawValue,
+        { maskedValue: result.maskedValue, completed: result.completed },
+        previousMasked
+      );
+      nextTick(() => {
+        if (inputRef.value) inputRef.value.setSelectionRange(result.caret, result.caret);
+      });
+    };
+    const processInput = (target) => {
+      applyValue(target.value, target.selectionStart ?? target.value.length);
+    };
+    const handleInput = (event) => {
+      if (isComposing.value) return;
+      processInput(event.target);
+    };
+    const handlePaste = (event) => {
+      if (props.disabled || props.readonly) return;
+      event.preventDefault();
+      const input = event.target;
+      const text = event.clipboardData?.getData("text") ?? "";
+      const start = input.selectionStart ?? input.value.length;
+      const end = input.selectionEnd ?? input.value.length;
+      applyValue(input.value.slice(0, start) + text + input.value.slice(end), start + text.length);
+    };
+    const handleCompositionStart = () => {
+      isComposing.value = true;
+    };
+    const handleCompositionEnd = (event) => {
+      isComposing.value = false;
+      processInput(event.target);
+    };
+    const handleClear = () => {
+      if (!isControlled.value) innerRaw.value = "";
+      emit("update:modelValue", "");
+      emit("change", "", { maskedValue: "", completed: false });
+      emit("clear");
+      inputRef.value?.focus();
+    };
+    const handleFocus = (event) => emit("focus", event);
+    const handleBlur = (event) => emit("blur", event);
+    return () => {
+      const { class: attrClass, style: attrStyle, ...restAttrs } = attrs;
+      const activeError = effectiveStatus.value === "error" && !!effectiveErrorMessage.value;
+      const hasSuffix = props.clearable;
+      const showClear = props.clearable && !props.disabled && !props.readonly && rawValue.value.length > 0;
+      const inputClasses = getInputClasses({
+        size: props.size,
+        status: effectiveStatus.value,
+        hasPrefix: false,
+        hasSuffix
+      });
+      const children = [
+        h("input", {
+          ...restAttrs,
+          ref: inputRef,
+          class: inputClasses,
+          type: "text",
+          value: maskedValue.value,
+          placeholder: props.placeholder,
+          disabled: props.disabled,
+          readonly: props.readonly,
+          id: props.id,
+          autocomplete: props.autoComplete,
+          autofocus: props.autoFocus,
+          ...effectiveStatus.value === "error" ? { "aria-invalid": true } : {},
+          ...activeError ? { "aria-describedby": errorMsgId } : {},
+          onInput: handleInput,
+          onPaste: handlePaste,
+          onCompositionstart: handleCompositionStart,
+          onCompositionend: handleCompositionEnd,
+          onFocus: handleFocus,
+          onBlur: handleBlur
+        })
+      ];
+      if (props.name) {
+        children.push(
+          h("input", {
+            key: "hidden",
+            type: "hidden",
+            name: props.name,
+            value: rawValue.value
+          })
+        );
+      }
+      if (activeError) {
+        children.push(
+          h(
+            "div",
+            { id: errorMsgId, class: getInputErrorClasses(props.size), "aria-live": "polite" },
+            effectiveErrorMessage.value
+          )
+        );
+      } else if (showClear) {
+        children.push(
+          h(
+            "button",
+            {
+              type: "button",
+              class: getInputClearButtonClasses(props.size),
+              onClick: handleClear,
+              "aria-label": "Clear input",
+              tabindex: -1
+            },
+            "\u2715"
+          )
+        );
+      }
+      return h(
+        "div",
+        {
+          ref: wrapperRef,
+          class: classNames(getInputWrapperClasses(), props.className, coerceClassValue(attrClass)),
+          style: mergeStyleValues(props.style, attrStyle)
+        },
+        children
+      );
+    };
+  }
+});
+var MaskInput_default = MaskInput;
+
+export {
+  MaskInput,
+  MaskInput_default
+};