@expcat/tigercat-vue 1.4.0 → 2.0.0-preview.1

package/dist/{chunk-RKL4Y7CW.mjs → chunk-W7X5ZHJ3.mjs}

@@ -1,18 +1,18 @@
 import {
   Table
-} from "./chunk-KH2CF6JU.mjs";
+} from "./chunk-KR3D2JOA.mjs";
 import {
   Select
-} from "./chunk-QAMXVTNN.mjs";
+} from "./chunk-JMVALNIO.mjs";
 import {
   Popover
-} from "./chunk-6OQLZCQK.mjs";
+} from "./chunk-SYRRMZT2.mjs";
 import {
   Input
-} from "./chunk-2WJADO6O.mjs";
+} from "./chunk-DZFM7H3M.mjs";
 import {
   Checkbox
-} from "./chunk-UKMOWUYH.mjs";
+} from "./chunk-MYKKKVGK.mjs";
 import {
   Button
 } from "./chunk-YZBQ6IR7.mjs";
@@ -151,6 +151,86 @@ var DataTableWithToolbar = defineComponent({
       type: Function,
       default: void 0
     },
+    cardSelectionPosition: {
+      type: String,
+      default: void 0
+    },
+    cardPadding: {
+      type: [String, Boolean],
+      default: void 0
+    },
+    cardFieldGap: {
+      type: String,
+      default: void 0
+    },
+    expandable: {
+      type: Object,
+      default: void 0
+    },
+    virtual: {
+      type: Boolean,
+      default: void 0
+    },
+    autoVirtual: {
+      type: Boolean,
+      default: void 0
+    },
+    virtualHeight: {
+      type: Number,
+      default: void 0
+    },
+    virtualItemHeight: {
+      type: Number,
+      default: void 0
+    },
+    virtualThreshold: {
+      type: Number,
+      default: void 0
+    },
+    editable: {
+      type: Boolean,
+      default: void 0
+    },
+    editableCells: {
+      type: Object,
+      default: void 0
+    },
+    filterMode: {
+      type: String,
+      default: void 0
+    },
+    advancedFilterRules: {
+      type: Array,
+      default: void 0
+    },
+    columnDraggable: {
+      type: Boolean,
+      default: void 0
+    },
+    rowDraggable: {
+      type: Boolean,
+      default: void 0
+    },
+    summaryRow: {
+      type: Object,
+      default: void 0
+    },
+    groupBy: {
+      type: String,
+      default: void 0
+    },
+    exportable: {
+      type: Boolean,
+      default: void 0
+    },
+    exportFormat: {
+      type: String,
+      default: void 0
+    },
+    exportFilename: {
+      type: String,
+      default: void 0
+    },
     toolbar: {
       type: Object,
       default: void 0
@@ -656,6 +736,28 @@ var DataTableWithToolbar = defineComponent({
         cardLayout: props.cardLayout,
         cardClassName: props.cardClassName,
         renderCard: props.renderCard,
+        // Forward advanced Table capabilities only when explicitly provided so
+        // Table's own defaults are preserved.
+        ...props.cardSelectionPosition !== void 0 ? { cardSelectionPosition: props.cardSelectionPosition } : {},
+        ...props.cardPadding !== void 0 ? { cardPadding: props.cardPadding } : {},
+        ...props.cardFieldGap !== void 0 ? { cardFieldGap: props.cardFieldGap } : {},
+        ...props.expandable !== void 0 ? { expandable: props.expandable } : {},
+        ...props.virtual !== void 0 ? { virtual: props.virtual } : {},
+        ...props.autoVirtual !== void 0 ? { autoVirtual: props.autoVirtual } : {},
+        ...props.virtualHeight !== void 0 ? { virtualHeight: props.virtualHeight } : {},
+        ...props.virtualItemHeight !== void 0 ? { virtualItemHeight: props.virtualItemHeight } : {},
+        ...props.virtualThreshold !== void 0 ? { virtualThreshold: props.virtualThreshold } : {},
+        ...props.editable !== void 0 ? { editable: props.editable } : {},
+        ...props.editableCells !== void 0 ? { editableCells: props.editableCells } : {},
+        ...props.filterMode !== void 0 ? { filterMode: props.filterMode } : {},
+        ...props.advancedFilterRules !== void 0 ? { advancedFilterRules: props.advancedFilterRules } : {},
+        ...props.columnDraggable !== void 0 ? { columnDraggable: props.columnDraggable } : {},
+        ...props.rowDraggable !== void 0 ? { rowDraggable: props.rowDraggable } : {},
+        ...props.summaryRow !== void 0 ? { summaryRow: props.summaryRow } : {},
+        ...props.groupBy !== void 0 ? { groupBy: props.groupBy } : {},
+        ...props.exportable !== void 0 ? { exportable: props.exportable } : {},
+        ...props.exportFormat !== void 0 ? { exportFormat: props.exportFormat } : {},
+        ...props.exportFilename !== void 0 ? { exportFilename: props.exportFilename } : {},
         class: props.bordered ? "border-none rounded-none shadow-none" : void 0,
         onSelectionChange: (keys) => emit("selection-change", keys),
         onPageChange: handleTablePageChange

package/dist/{chunk-E363N2BJ.mjs → chunk-WBT3WSRE.mjs}

@@ -75,6 +75,7 @@ var RichTextEditor = defineComponent({
       engineInstance = engine.create({
         element: editorRef.value,
         initialValue: currentContent.value,
+        mode: props.mode,
         readOnly: props.readOnly,
         disabled: props.disabled,
         placeholder: props.placeholder,
@@ -95,10 +96,6 @@ var RichTextEditor = defineComponent({
     });
     function execButtonAction(btn) {
       if (props.readOnly || props.disabled) return;
-      if (btn.action && editorRef.value) {
-        btn.action(editorRef.value);
-        return;
-      }
       engineInstance?.exec(btn.name);
     }
     function handleKeydown(e) {

package/dist/{chunk-WFISP42H.mjs → chunk-WLHOWOAY.mjs}

@@ -1,3 +1,7 @@
+import {
+  useTigerConfig
+} from "./chunk-R6WFL6NI.mjs";
+
 // src/components/Empty.ts
 import { defineComponent, computed, h } from "vue";
 import {
@@ -10,7 +14,8 @@ import {
   emptyActionsClasses,
   emptyIllustrationViewBox,
   emptyIllustrationPaths,
-  getEmptyDescription
+  getEmptyDescription,
+  mergeTigerLocale
 } from "@expcat/tigercat-core";
 var Empty = defineComponent({
   name: "TigerEmpty",
@@ -35,10 +40,18 @@ var Empty = defineComponent({
     style: {
       type: Object,
       default: void 0
+    },
+    locale: {
+      type: Object,
+      default: void 0
     }
   },
   setup(props, { slots, attrs }) {
-    const descText = computed(() => props.description ?? getEmptyDescription(props.preset));
+    const config = useTigerConfig();
+    const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
+    const descText = computed(
+      () => props.description ?? getEmptyDescription(props.preset, mergedLocale.value)
+    );
     return () => {
       const attrsRecord = attrs;
       const children = [];

package/dist/{chunk-RPWKAGN5.mjs → chunk-WYJ5WOT2.mjs}

@@ -74,10 +74,18 @@ var Cascader = defineComponent({
       type: Boolean,
       default: true
     },
-    showSearch: {
+    searchable: {
       type: [Boolean, Object],
       default: false
     },
+    searchValue: {
+      type: String,
+      default: void 0
+    },
+    defaultSearchValue: {
+      type: String,
+      default: ""
+    },
     expandTrigger: {
       type: String,
       default: "click"
@@ -90,7 +98,7 @@ var Cascader = defineComponent({
       type: String,
       default: " / "
     },
-    notFoundText: {
+    emptyText: {
       type: String,
       default: void 0
     },
@@ -102,13 +110,14 @@ var Cascader = defineComponent({
       default: void 0
     }
   },
-  emits: ["update:modelValue", "change"],
+  emits: ["update:modelValue", "update:searchValue", "change", "search-change"],
   setup(props, { emit, attrs }) {
     const instanceId = ++cascaderInstanceId;
     const config = useTigerConfig();
     const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
     const isOpen = ref(false);
-    const searchQuery = ref("");
+    const uncontrolledSearchValue = ref(props.defaultSearchValue);
+    const searchQuery = computed(() => props.searchValue ?? uncontrolledSearchValue.value);
     const activePath = ref([]);
     const triggerRef = ref(null);
     const dropdownRef = ref(null);
@@ -121,15 +130,15 @@ var Cascader = defineComponent({
       return getCascaderColumns(props.options, activePath.value);
     });
     const isSearchMode = computed(() => {
-      return props.showSearch && searchQuery.value.length > 0;
+      return props.searchable && searchQuery.value.length > 0;
     });
     const flattenedOptions = computed(() => {
-      if (!props.showSearch) return [];
-      return flattenCascaderOptions(props.options);
+      if (!props.searchable) return [];
+      return flattenCascaderOptions(props.options, [], [], props.changeOnSelect);
     });
     const searchResults = computed(() => {
       if (!isSearchMode.value) return [];
-      return filterCascaderOptions(flattenedOptions.value, searchQuery.value, props.showSearch);
+      return filterCascaderOptions(flattenedOptions.value, searchQuery.value, props.searchable);
     });
     const triggerClasses = computed(
       () => classNames(
@@ -140,9 +149,16 @@ var Cascader = defineComponent({
     watch(isOpen, (open) => {
       if (open) {
         activePath.value = props.modelValue ? [...props.modelValue] : [];
-        searchQuery.value = "";
+        updateSearchValue("");
       }
     });
+    function updateSearchValue(value) {
+      if (props.searchValue === void 0) {
+        uncontrolledSearchValue.value = value;
+      }
+      emit("update:searchValue", value);
+      emit("search-change", value);
+    }
     function toggleOpen() {
       if (props.disabled) return;
       isOpen.value = !isOpen.value;
@@ -183,7 +199,7 @@ var Cascader = defineComponent({
       emit("change", []);
     }
     function handleSearchInput(e) {
-      searchQuery.value = e.target.value;
+      updateSearchValue(e.target.value);
     }
     function handleTriggerKeyDown(e) {
       const action = getPickerTriggerKeyAction(e.key, isOpen.value);
@@ -291,7 +307,7 @@ var Cascader = defineComponent({
       let dropdownContent = null;
       if (isOpen.value) {
         const children = [];
-        if (props.showSearch) {
+        if (props.searchable) {
           children.push(
             h("input", {
               ref: searchInputRef,
@@ -315,7 +331,7 @@ var Cascader = defineComponent({
                 { class: cascaderEmptyStateClasses },
                 resolveLocaleText(
                   "No results found",
-                  props.notFoundText,
+                  props.emptyText,
                   mergedLocale.value?.common?.emptyText
                 )
               )
@@ -338,7 +354,7 @@ var Cascader = defineComponent({
                     }),
                     onClick: () => handleSearchResultClick(item.valuePath, item.disabled)
                   },
-                  item.label
+                  typeof props.searchable === "object" && props.searchable.render ? props.searchable.render(searchQuery.value, item.path) : item.label
                 )
               )
             );

package/dist/chunk-XFNHZ7SV.mjs

@@ -0,0 +1,142 @@
+// src/components/Segmented.ts
+import { defineComponent, h } from "vue";
+import {
+  getSegmentedContainerClasses,
+  getSegmentedContainerStyle,
+  getSegmentedIndicatorClasses,
+  getSegmentedIndicatorStyle,
+  getSegmentedOptionClasses,
+  classNames,
+  coerceClassValue,
+  mergeStyleValues
+} from "@expcat/tigercat-core";
+var Segmented = defineComponent({
+  name: "TigerSegmented",
+  inheritAttrs: false,
+  props: {
+    modelValue: {
+      type: [String, Number],
+      default: void 0
+    },
+    options: {
+      type: Array,
+      default: () => []
+    },
+    disabled: { type: Boolean, default: false },
+    size: { type: String, default: "md" },
+    block: { type: Boolean, default: false },
+    className: { type: String, default: void 0 }
+  },
+  emits: ["update:modelValue", "change"],
+  setup(props, { emit, attrs }) {
+    function handleSelect(option) {
+      if (option.disabled || props.disabled) return;
+      if (option.value === props.modelValue) return;
+      emit("update:modelValue", option.value);
+      emit("change", option.value);
+    }
+    function focusOption(container, index) {
+      const els = container?.querySelectorAll('[role="radio"]');
+      els?.[index]?.focus();
+    }
+    function handleKeydown(e, index) {
+      if (props.disabled) return;
+      const enabledIdxs = props.options.reduce((acc, opt, i) => {
+        if (!opt.disabled) acc.push(i);
+        return acc;
+      }, []);
+      if (enabledIdxs.length === 0) return;
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        handleSelect(props.options[index]);
+        return;
+      }
+      const pos = enabledIdxs.indexOf(index);
+      let target = null;
+      switch (e.key) {
+        case "ArrowRight":
+        case "ArrowDown":
+          target = enabledIdxs[(pos + 1 + enabledIdxs.length) % enabledIdxs.length];
+          break;
+        case "ArrowLeft":
+        case "ArrowUp":
+          target = enabledIdxs[(pos - 1 + enabledIdxs.length) % enabledIdxs.length];
+          break;
+        case "Home":
+          target = enabledIdxs[0];
+          break;
+        case "End":
+          target = enabledIdxs[enabledIdxs.length - 1];
+          break;
+        default:
+          return;
+      }
+      if (target == null) return;
+      e.preventDefault();
+      const container = e.currentTarget.closest('[role="radiogroup"]');
+      focusOption(container, target);
+      handleSelect(props.options[target]);
+    }
+    return () => {
+      const selectedIndex = props.options.findIndex((opt) => opt.value === props.modelValue);
+      const firstEnabledIndex = props.options.findIndex((opt) => !opt.disabled);
+      const rovingIndex = selectedIndex >= 0 ? selectedIndex : firstEnabledIndex;
+      return h(
+        "div",
+        {
+          ...attrs,
+          class: classNames(
+            getSegmentedContainerClasses(props.size, props.block),
+            props.className,
+            coerceClassValue(attrs.class)
+          ),
+          style: mergeStyleValues(
+            attrs.style,
+            getSegmentedContainerStyle(props.options.length)
+          ),
+          role: "radiogroup",
+          "aria-disabled": props.disabled || void 0
+        },
+        [
+          h("div", {
+            "data-tiger-segmented-indicator": "true",
+            "aria-hidden": "true",
+            class: getSegmentedIndicatorClasses(props.size),
+            style: getSegmentedIndicatorStyle(
+              props.options.findIndex((opt) => opt.value === props.modelValue),
+              props.options.length,
+              props.size
+            )
+          }),
+          ...props.options.map((opt, index) => {
+            const selected = opt.value === props.modelValue;
+            const isDisabled = !!opt.disabled || props.disabled;
+            return h(
+              "label",
+              {
+                key: opt.value,
+                class: classNames(
+                  getSegmentedOptionClasses(props.size, selected, isDisabled),
+                  props.block ? "flex-1 text-center" : ""
+                ),
+                role: "radio",
+                "aria-checked": selected,
+                "aria-disabled": isDisabled,
+                tabindex: isDisabled ? -1 : index === rovingIndex ? 0 : -1,
+                onClick: () => handleSelect(opt),
+                onKeydown: (e) => handleKeydown(e, index)
+              },
+              [h("span", null, opt.label)]
+            );
+          })
+        ]
+      );
+    };
+  }
+});
+var Segmented_default = Segmented;
+
+export {
+  Segmented,
+  Segmented_default
+};

package/dist/{chunk-ZCT56WB7.mjs → chunk-XZYFVOOS.mjs}

@@ -1,6 +1,6 @@
 import {
   AVATAR_GROUP_INJECTION_KEY
-} from "./chunk-W6ZFHHD3.mjs";
+} from "./chunk-GZWZP5AL.mjs";
 
 // src/components/Avatar.ts
 import { defineComponent, computed, h, ref, inject } from "vue";

package/dist/chunk-Y2HO4IBQ.mjs

@@ -0,0 +1,150 @@
+// src/composables/useFormController.ts
+import { reactive, ref, computed } from "vue";
+import {
+  validateForm,
+  validateField as validateFieldUtil,
+  getValueByPath,
+  createFormErrorMap,
+  clearFieldErrors,
+  createFormHistory,
+  pushFormHistory,
+  undoFormHistory,
+  redoFormHistory,
+  canUndo as canUndoFn,
+  canRedo as canRedoFn
+} from "@expcat/tigercat-core";
+function useFormController(options = {}) {
+  const { initialValues = {}, rules, undoable = false, maxHistorySize = 50 } = options;
+  const values = reactive({ ...initialValues });
+  const errors = ref([]);
+  const rulesRef = ref(rules);
+  let history = undoable ? createFormHistory({ ...initialValues }, maxHistorySize) : null;
+  const errorsByField = computed(() => createFormErrorMap(errors.value));
+  const hasErrors = computed(() => errors.value.length > 0);
+  function setFieldValue(fieldName, value) {
+    values[fieldName] = value;
+    if (undoable && history) {
+      history = pushFormHistory(history, { ...values });
+    }
+  }
+  function setValues(partial) {
+    Object.assign(values, partial);
+    if (undoable && history) {
+      history = pushFormHistory(history, { ...values });
+    }
+  }
+  function getFieldValue(fieldName) {
+    return getValueByPath(values, fieldName);
+  }
+  async function validate() {
+    const r = rulesRef.value;
+    if (!r) {
+      errors.value = [];
+      return true;
+    }
+    const result = await validateForm({ ...values }, r);
+    errors.value = result.errors;
+    return result.valid;
+  }
+  async function validateFields(fieldNames) {
+    const r = rulesRef.value;
+    if (!r || fieldNames.length === 0) return true;
+    const nextErrors = [];
+    const snapshot = { ...values };
+    for (const name of fieldNames) {
+      const fieldRules = r[name];
+      if (!fieldRules) continue;
+      const error = await validateFieldUtil(
+        name,
+        getValueByPath(snapshot, name),
+        fieldRules,
+        snapshot
+      );
+      if (error) nextErrors.push({ field: name, message: error });
+    }
+    const fieldSet = new Set(fieldNames);
+    errors.value = [...errors.value.filter((e) => !fieldSet.has(e.field)), ...nextErrors];
+    return nextErrors.length === 0;
+  }
+  async function validateField(fieldName) {
+    const r = rulesRef.value;
+    const fieldRules = r?.[fieldName];
+    if (!fieldRules) return null;
+    const snapshot = { ...values };
+    const error = await validateFieldUtil(
+      fieldName,
+      getValueByPath(snapshot, fieldName),
+      fieldRules,
+      snapshot
+    );
+    const filtered = errors.value.filter((e) => e.field !== fieldName);
+    errors.value = error ? [...filtered, { field: fieldName, message: error }] : filtered;
+    return error;
+  }
+  function clearValidate(fieldNames) {
+    if (!fieldNames) {
+      errors.value = [];
+      return;
+    }
+    const fields = Array.isArray(fieldNames) ? fieldNames : [fieldNames];
+    errors.value = clearFieldErrors(fields, errors.value);
+  }
+  function reset() {
+    Object.keys(values).forEach((k) => delete values[k]);
+    Object.assign(values, initialValues);
+    errors.value = [];
+    if (undoable) {
+      history = createFormHistory({ ...initialValues }, maxHistorySize);
+    }
+  }
+  function undo() {
+    if (!undoable || !history) return;
+    const next = undoFormHistory(history);
+    if (!next) return;
+    history = next;
+    Object.keys(values).forEach((k) => delete values[k]);
+    Object.assign(values, next.present);
+  }
+  function redo() {
+    if (!undoable || !history) return;
+    const next = redoFormHistory(history);
+    if (!next) return;
+    history = next;
+    Object.keys(values).forEach((k) => delete values[k]);
+    Object.assign(values, next.present);
+  }
+  return {
+    get values() {
+      return values;
+    },
+    get errors() {
+      return errors.value;
+    },
+    get errorsByField() {
+      return errorsByField.value;
+    },
+    get hasErrors() {
+      return hasErrors.value;
+    },
+    setFieldValue,
+    setValues,
+    getFieldValue,
+    validate,
+    validateFields,
+    validateField,
+    clearValidate,
+    reset,
+    undo,
+    redo,
+    get canUndo() {
+      return undoable && history != null && canUndoFn(history);
+    },
+    get canRedo() {
+      return undoable && history != null && canRedoFn(history);
+    }
+  };
+}
+
+export {
+  useFormController
+};

package/dist/{chunk-XJ5VGC5V.mjs → chunk-YJSWHGAR.mjs}

@@ -92,11 +92,19 @@ var TreeSelect = defineComponent({
       type: Boolean,
       default: false
     },
-    showSearch: {
+    searchable: {
       type: Boolean,
       default: false
     },
-    notFoundText: {
+    searchValue: {
+      type: String,
+      default: void 0
+    },
+    defaultSearchValue: {
+      type: String,
+      default: ""
+    },
+    emptyText: {
       type: String,
       default: void 0
     },
@@ -112,14 +120,15 @@ var TreeSelect = defineComponent({
       default: void 0
     }
   },
-  emits: ["update:modelValue", "change"],
+  emits: ["update:modelValue", "update:searchValue", "change", "search-change"],
   setup(props, { emit, attrs }) {
     const instanceId = ++treeSelectInstanceId;
     const config = useTigerConfig();
     const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
     const listboxId = `tiger-treeselect-listbox-${instanceId}`;
     const isOpen = ref(false);
-    const searchQuery = ref("");
+    const uncontrolledSearchValue = ref(props.defaultSearchValue);
+    const searchQuery = computed(() => props.searchValue ?? uncontrolledSearchValue.value);
     const containerRef = ref(null);
     const expandedKeys = ref(
       props.defaultExpandAll ? new Set(getAllTreeSelectKeys(props.treeData)) : /* @__PURE__ */ new Set()
@@ -151,7 +160,14 @@ var TreeSelect = defineComponent({
     }
     function closeDropdown() {
       isOpen.value = false;
-      searchQuery.value = "";
+      updateSearchValue("");
+    }
+    function updateSearchValue(value) {
+      if (props.searchValue === void 0) {
+        uncontrolledSearchValue.value = value;
+      }
+      emit("update:searchValue", value);
+      emit("search-change", value);
     }
     function toggleDropdown() {
       if (isOpen.value) closeDropdown();
@@ -273,7 +289,7 @@ var TreeSelect = defineComponent({
           },
           [
             // Search
-            props.showSearch ? h("input", {
+            props.searchable ? h("input", {
               type: "text",
               class: treeSelectSearchClasses,
               placeholder: resolveLocaleText(
@@ -282,9 +298,7 @@ var TreeSelect = defineComponent({
               ),
               value: searchQuery.value,
               "aria-label": "Search tree",
-              onInput: (e) => {
-                searchQuery.value = e.target.value;
-              }
+              onInput: (e) => updateSearchValue(e.target.value)
             }) : null,
             // Tree nodes
             visibleNodes.value.length > 0 ? visibleNodes.value.map((flatNode) => {
@@ -344,7 +358,7 @@ var TreeSelect = defineComponent({
               { class: treeSelectEmptyClasses },
               resolveLocaleText(
                 "No data",
-                props.notFoundText,
+                props.emptyText,
                 mergedLocale.value?.common?.emptyText
               )
             )