@expcat/tigercat-vue 2.0.19 → 2.1.1

package/dist/{chunk-NNC75I7F.mjs → chunk-7TJE7OYH.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/PieChart.ts
 import { defineComponent, computed, h, useId } from "vue";
@@ -188,6 +188,7 @@ var PieChart = defineComponent({
       wrapperClasses
     } = useChartInteraction({
       hoverable: computed(() => props.hoverable),
+      showTooltip: computed(() => props.showTooltip),
       hoveredIndexProp: () => props.hoveredIndex,
       selectable: computed(() => props.selectable),
       selectedIndexProp: () => props.selectedIndex,
@@ -392,7 +393,7 @@ var PieChart = 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-AU6IC6K7.mjs → chunk-ABNS4B5V.mjs}

@@ -3,10 +3,10 @@ import {
 } from "./chunk-BZ6MVFV7.mjs";
 import {
   Radio
-} from "./chunk-6BDDX2R4.mjs";
+} from "./chunk-73Z7N7VG.mjs";
 import {
   Pagination
-} from "./chunk-2LIIMWBR.mjs";
+} from "./chunk-OYU47A57.mjs";
 import {
   Empty
 } from "./chunk-SJINC5NF.mjs";
@@ -128,8 +128,8 @@ var tableProps = {
   pagination: {
     type: [Object, Boolean],
     default: () => ({
-      current: 1,
-      pageSize: 10,
+      defaultCurrent: 1,
+      defaultPageSize: 10,
       total: 0,
       pageSizeOptions: [10, 20, 50, 100],
       showSizeChanger: true,
@@ -398,7 +398,13 @@ function useTableState(props, emit, measuredColumnWidths) {
     }
     if (sortState.value.key && sortState.value.direction) {
       const column = columnByKey.value[sortState.value.key];
-      data = sortData(data, sortState.value.key, sortState.value.direction, column?.sortFn);
+      data = sortData(
+        data,
+        sortState.value.key,
+        sortState.value.direction,
+        column?.sortFn,
+        props.columns
+      );
     }
     return data;
   });
@@ -764,7 +770,8 @@ import {
   getFixedColumnStyle,
   getCheckboxCellClasses,
   getExpandIconCellClasses,
-  formatTableSortByText
+  formatTableSortByText,
+  tableSortButtonClasses
 } from "@expcat/tigercat-core";
 function renderTableHeader(ctx, props, slots, labels) {
   const headerCells = [];
@@ -805,14 +812,31 @@ function renderTableHeader(ctx, props, slots, labels) {
       width: typeof column.width === "number" ? `${column.width}px` : column.width
     } : void 0;
     const style = fixedStyle ? { ...widthStyle, ...fixedStyle } : widthStyle;
-    const headerContent = [];
+    const titleContent = [];
     const slotContent = slots[`header-${column.key}`]?.();
     if (slotContent && slotContent.length > 0) {
-      headerContent.push(...slotContent);
+      titleContent.push(...slotContent);
     } else if (column.renderHeader) {
-      headerContent.push(column.renderHeader());
+      titleContent.push(column.renderHeader());
+    } else {
+      titleContent.push(column.title);
+    }
+    const headerContent = [];
+    if (column.sortable) {
+      headerContent.push(
+        h2(
+          "button",
+          {
+            type: "button",
+            "data-tiger-table-sort": "",
+            class: tableSortButtonClasses,
+            onClick: () => ctx.handleSort(column.key)
+          },
+          [...titleContent, SortIcon(sortDirection)]
+        )
+      );
     } else {
-      headerContent.push(column.title);
+      headerContent.push(...titleContent);
     }
     if (props.columnLockable) {
       headerContent.push(
@@ -837,9 +861,6 @@ function renderTableHeader(ctx, props, slots, labels) {
         )
       );
     }
-    if (column.sortable) {
-      headerContent.push(SortIcon(sortDirection));
-    }
     headerCells.push(
       h2(
         "th",
@@ -865,8 +886,7 @@ function renderTableHeader(ctx, props, slots, labels) {
           draggable: props.columnDraggable ? "true" : void 0,
           onDragstart: props.columnDraggable ? () => ctx.handleDragStart(column.key) : void 0,
           onDragover: props.columnDraggable ? (e) => e.preventDefault() : void 0,
-          onDrop: props.columnDraggable ? () => ctx.handleDrop(column.key) : void 0,
-          onClick: column.sortable ? () => ctx.handleSort(column.key) : void 0
+          onDrop: props.columnDraggable ? () => ctx.handleDrop(column.key) : void 0
         },
         [
           h2("div", { class: "flex items-center gap-2" }, headerContent),

package/dist/chunk-AECXFT7D.mjs

@@ -0,0 +1,121 @@
+// src/components/Kbd.ts
+import { defineComponent, h } from "vue";
+import {
+  composeComponentClasses,
+  formatKbdSeparatorText,
+  getKbdParts,
+  getKbdRootClasses,
+  kbdKeyClasses,
+  kbdSeparatorClasses,
+  mergeStyleValues
+} from "@expcat/tigercat-core";
+function hasSlotContent(nodes) {
+  return Array.isArray(nodes) && nodes.length > 0;
+}
+var Kbd = defineComponent({
+  name: "TigerKbd",
+  inheritAttrs: false,
+  props: {
+    /**
+     * One key or a combo list. A string is a single key; an array is joined
+     * with `separator`. Combine with the default slot to append a final key.
+     */
+    keys: {
+      type: [String, Array],
+      default: void 0
+    },
+    /**
+     * Separator between combo keys
+     * @default '+'
+     */
+    separator: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Visual size
+     * @default 'md'
+     */
+    size: {
+      type: String,
+      default: "md"
+    },
+    /**
+     * Visual variant. `default` reuses Tag default chrome; `subtle` is quieter.
+     * @default 'default'
+     */
+    variant: {
+      type: String,
+      default: "default"
+    },
+    /**
+     * Additional CSS classes
+     */
+    className: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Inline styles
+     */
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  setup(props, { slots, attrs }) {
+    return () => {
+      const attrsRecord = attrs;
+      const parts = getKbdParts(props.keys, props.separator);
+      const slotNodes = slots.default?.();
+      const hasSlot = hasSlotContent(slotNodes);
+      const children = [];
+      for (const part of parts) {
+        if (part.type === "separator") {
+          children.push(
+            h("span", { class: kbdSeparatorClasses, "data-kbd-separator": "" }, ` ${part.value} `)
+          );
+        } else {
+          children.push(h("kbd", { class: kbdKeyClasses, "data-kbd-key": "" }, part.value));
+        }
+      }
+      if (hasSlot && slotNodes) {
+        if (parts.length > 0) {
+          children.push(
+            h(
+              "span",
+              { class: kbdSeparatorClasses, "data-kbd-separator": "" },
+              formatKbdSeparatorText(props.separator)
+            )
+          );
+        }
+        children.push(...slotNodes);
+      }
+      return h(
+        "kbd",
+        {
+          ...attrs,
+          class: composeComponentClasses(
+            getKbdRootClasses({
+              size: props.size,
+              variant: props.variant,
+              className: props.className
+            }),
+            attrsRecord.class
+          ),
+          style: mergeStyleValues(attrsRecord.style, props.style),
+          "data-kbd": "",
+          "data-kbd-size": props.size,
+          "data-kbd-variant": props.variant
+        },
+        children
+      );
+    };
+  }
+});
+var Kbd_default = Kbd;
+
+export {
+  Kbd,
+  Kbd_default
+};

package/dist/chunk-AOLRZG4E.mjs

@@ -0,0 +1,347 @@
+import {
+  FORM_ITEM_CONTROL_INJECTION_KEY
+} from "./chunk-P2LZ2MR5.mjs";
+import {
+  Tag
+} from "./chunk-342DH5CF.mjs";
+import {
+  useTigerConfig
+} from "./chunk-UOJOJBEU.mjs";
+
+// src/components/TagsInput.ts
+import { computed, defineComponent, h, inject, ref, watch } from "vue";
+import {
+  addTags,
+  classNames,
+  coerceClassValue,
+  extractTagCandidates,
+  formatRemoveTagLabel,
+  getTagsInputClearButtonClasses,
+  getTagsInputContainerClasses,
+  getTagsInputErrorClasses,
+  getTagsInputHighlightClasses,
+  getTagsInputInnerInputClasses,
+  getTagsInputLabels,
+  injectShakeStyle,
+  mergeStyleValues,
+  removeTagAt,
+  SHAKE_CLASS,
+  splitTagInput
+} from "@expcat/tigercat-core";
+var tagsInputIdCounter = 0;
+var TagsInput = defineComponent({
+  name: "TigerTagsInput",
+  inheritAttrs: false,
+  props: {
+    /**
+     * Tags (for v-model)
+     */
+    modelValue: { type: Array, default: void 0 },
+    /**
+     * Default tags (for uncontrolled mode)
+     */
+    defaultValue: { type: Array, default: () => [] },
+    /**
+     * 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 for the inner text input */
+    placeholder: { type: String, default: "" },
+    /** Whether the same tag may be added more than once */
+    allowDuplicates: Boolean,
+    /** Maximum number of tags */
+    max: { type: Number, default: void 0 },
+    /**
+     * Characters that commit input while typing and split pasted text
+     * @default [',']
+     */
+    delimiters: { type: Array, default: () => [","] },
+    /** Commit the pending input as a tag on blur */
+    addOnBlur: Boolean,
+    /** Validate/transform a candidate tag before it is added */
+    beforeAdd: {
+      type: Function,
+      default: void 0
+    },
+    /** Whether to show a clear-all button */
+    clearable: Boolean,
+    /** Whether the input is disabled */
+    disabled: Boolean,
+    /** Whether the input is readonly */
+    readonly: Boolean,
+    /** Name for the hidden input carrying the joined value */
+    name: String,
+    /** Id attribute applied to the inner text input */
+    id: String,
+    /** Aria-label template for tag remove buttons; supports {tag} */
+    removeTagAriaLabel: String,
+    /**
+     * 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,
+    add: null,
+    remove: null,
+    clear: null,
+    focus: null,
+    blur: null
+  },
+  setup(props, { emit, attrs }) {
+    injectShakeStyle();
+    const config = useTigerConfig();
+    const formItemControl = inject(
+      FORM_ITEM_CONTROL_INJECTION_KEY,
+      null
+    );
+    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 labels = computed(() => getTagsInputLabels(config.value.locale));
+    const instanceId = ++tagsInputIdCounter;
+    const errorMsgId = `tiger-tags-input-error-${instanceId}`;
+    const containerRef = ref(null);
+    const inputRef = ref(null);
+    const isControlled = computed(() => props.modelValue !== void 0);
+    const innerTags = ref([...props.defaultValue]);
+    const tags = computed(() => isControlled.value ? props.modelValue ?? [] : innerTags.value);
+    const inputText = ref("");
+    const highlightedIndex = ref(null);
+    watch([effectiveStatus, effectiveShakeTrigger], ([newStatus]) => {
+      if (newStatus === "error" && containerRef.value) {
+        const el = containerRef.value;
+        el.classList.remove(SHAKE_CLASS);
+        void el.offsetWidth;
+        el.classList.add(SHAKE_CLASS);
+      }
+    });
+    const isInteractive = computed(() => !props.disabled && !props.readonly);
+    const setTags = (next) => {
+      if (!isControlled.value) innerTags.value = next;
+      emit("update:modelValue", next);
+    };
+    const commitCandidates = (candidates) => {
+      const prepared = [];
+      for (const raw of candidates) {
+        if (!props.beforeAdd) {
+          prepared.push(raw);
+          continue;
+        }
+        const result = props.beforeAdd(raw.trim());
+        if (result === false) continue;
+        prepared.push(typeof result === "string" ? result : raw);
+      }
+      if (prepared.length === 0) return [];
+      const { tags: nextTags, added } = addTags(tags.value, prepared, {
+        allowDuplicates: props.allowDuplicates,
+        max: props.max
+      });
+      if (added.length > 0) {
+        setTags(nextTags);
+        added.forEach((tag) => emit("add", tag));
+      }
+      return added;
+    };
+    const removeAt = (index) => {
+      const tag = tags.value[index];
+      if (tag === void 0) return;
+      setTags(removeTagAt(tags.value, index));
+      emit("remove", tag, index);
+    };
+    const handleInput = (event) => {
+      if (!isInteractive.value) return;
+      highlightedIndex.value = null;
+      const target = event.target;
+      const { candidates, pending } = extractTagCandidates(target.value, props.delimiters);
+      if (candidates.length > 0) commitCandidates(candidates);
+      inputText.value = pending;
+      target.value = pending;
+    };
+    const handleKeydown = (event) => {
+      if (!isInteractive.value) return;
+      if (event.key === "Enter") {
+        event.preventDefault();
+        if (inputText.value.trim()) {
+          const added = commitCandidates([inputText.value]);
+          if (added.length > 0) inputText.value = "";
+        }
+        return;
+      }
+      if (event.key === "Backspace" && inputText.value === "") {
+        if (highlightedIndex.value !== null) {
+          removeAt(highlightedIndex.value);
+          highlightedIndex.value = null;
+        } else if (tags.value.length > 0) {
+          highlightedIndex.value = tags.value.length - 1;
+        }
+        return;
+      }
+      if (event.key === "ArrowLeft" && inputText.value === "" && tags.value.length > 0) {
+        highlightedIndex.value = highlightedIndex.value === null ? tags.value.length - 1 : Math.max(0, highlightedIndex.value - 1);
+        return;
+      }
+      if (event.key === "ArrowRight" && highlightedIndex.value !== null) {
+        highlightedIndex.value = highlightedIndex.value >= tags.value.length - 1 ? null : highlightedIndex.value + 1;
+        return;
+      }
+      if (event.key === "Escape" && highlightedIndex.value !== null) {
+        highlightedIndex.value = null;
+        return;
+      }
+      if (highlightedIndex.value !== null) highlightedIndex.value = null;
+    };
+    const handlePaste = (event) => {
+      if (!isInteractive.value) return;
+      const text = event.clipboardData?.getData("text") ?? "";
+      const candidates = splitTagInput(text, props.delimiters);
+      if (candidates.length <= 1) return;
+      event.preventDefault();
+      commitCandidates(candidates);
+      inputText.value = "";
+      if (inputRef.value) inputRef.value.value = "";
+    };
+    const handleFocus = (event) => emit("focus", event);
+    const handleBlur = (event) => {
+      highlightedIndex.value = null;
+      if (props.addOnBlur && inputText.value.trim() && isInteractive.value) {
+        const added = commitCandidates([inputText.value]);
+        if (added.length > 0) inputText.value = "";
+      }
+      emit("blur", event);
+    };
+    const handleClear = () => {
+      if (!isInteractive.value || tags.value.length === 0) return;
+      setTags([]);
+      inputText.value = "";
+      highlightedIndex.value = null;
+      emit("clear");
+      inputRef.value?.focus();
+    };
+    const handleContainerClick = (event) => {
+      if (event.target === containerRef.value) inputRef.value?.focus();
+    };
+    return () => {
+      const { class: attrClass, style: attrStyle, ...restAttrs } = attrs;
+      const activeError = effectiveStatus.value === "error" && !!effectiveErrorMessage.value;
+      const isFull = props.max !== void 0 && tags.value.length >= props.max;
+      const removeLabelTemplate = props.removeTagAriaLabel ?? labels.value.removeTagLabel;
+      const tagSize = props.size === "lg" ? "md" : "sm";
+      const children = [];
+      tags.value.forEach((tag, index) => {
+        children.push(
+          h(
+            Tag,
+            {
+              key: `${tag}-${index}`,
+              size: tagSize,
+              closable: isInteractive.value,
+              closeAriaLabel: formatRemoveTagLabel(removeLabelTemplate, tag),
+              class: index === highlightedIndex.value ? getTagsInputHighlightClasses() : void 0,
+              onClose: (event) => {
+                event.preventDefault();
+                removeAt(index);
+              }
+            },
+            () => tag
+          )
+        );
+      });
+      children.push(
+        h("input", {
+          key: "text-input",
+          ref: inputRef,
+          class: getTagsInputInnerInputClasses(),
+          type: "text",
+          value: inputText.value,
+          placeholder: tags.value.length === 0 ? props.placeholder : "",
+          disabled: props.disabled,
+          readonly: props.readonly,
+          id: props.id ? `${props.id}-input` : props.id,
+          ...effectiveStatus.value === "error" ? { "aria-invalid": true } : {},
+          ...activeError ? { "aria-describedby": errorMsgId } : {},
+          onInput: handleInput,
+          onKeydown: handleKeydown,
+          onPaste: handlePaste,
+          onFocus: handleFocus,
+          onBlur: handleBlur
+        })
+      );
+      if (props.clearable && tags.value.length > 0 && isInteractive.value) {
+        children.push(
+          h(
+            "button",
+            {
+              key: "clear",
+              type: "button",
+              class: getTagsInputClearButtonClasses(),
+              onClick: handleClear,
+              "aria-label": labels.value.clearAllLabel,
+              tabindex: -1
+            },
+            "\u2715"
+          )
+        );
+      }
+      if (props.name) {
+        children.push(
+          h("input", {
+            key: "hidden",
+            type: "hidden",
+            name: props.name,
+            value: tags.value.join(",")
+          })
+        );
+      }
+      const containerNode = h(
+        "div",
+        {
+          ...restAttrs,
+          ref: containerRef,
+          id: props.id,
+          class: classNames(
+            getTagsInputContainerClasses(props.size, effectiveStatus.value, {
+              disabled: props.disabled
+            }),
+            props.className,
+            coerceClassValue(attrClass)
+          ),
+          style: mergeStyleValues(props.style, attrStyle),
+          "data-state": isFull ? "full" : void 0,
+          onClick: handleContainerClick
+        },
+        children
+      );
+      if (!activeError) return containerNode;
+      return h("div", {}, [
+        containerNode,
+        h("div", { id: errorMsgId, class: getTagsInputErrorClasses() }, effectiveErrorMessage.value)
+      ]);
+    };
+  }
+});
+var TagsInput_default = TagsInput;
+
+export {
+  TagsInput,
+  TagsInput_default
+};