@expcat/tigercat-vue 1.5.0 → 2.0.0-preview.2

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
               )
             )

package/dist/{chunk-N2QGYEOQ.mjs → chunk-YSKG5FSX.mjs}

@@ -51,7 +51,7 @@ var ImageViewer = defineComponent({
   props: {
     images: {
       type: Array,
-      required: true
+      default: () => []
     },
     open: {
       type: Boolean,

package/dist/{chunk-BRGQXIKA.mjs → chunk-Z4NJJ7NI.mjs}

@@ -1,15 +1,9 @@
 import {
   useChartInteraction
-} from "./chunk-R2HO74FE.mjs";
-import {
-  ChartLegend
-} from "./chunk-HLPSHCXO.mjs";
-import {
-  ChartSeries
-} from "./chunk-2ZUEXCVJ.mjs";
+} from "./chunk-PE5OA4YG.mjs";
 import {
   ChartTooltip
-} from "./chunk-G2LB4QCL.mjs";
+} from "./chunk-SPFL55TF.mjs";
 import {
   ChartAxis
 } from "./chunk-ZWVA7HT3.mjs";
@@ -19,6 +13,12 @@ import {
 import {
   ChartGrid
 } from "./chunk-MI6TL3CQ.mjs";
+import {
+  ChartLegend
+} from "./chunk-HLPSHCXO.mjs";
+import {
+  ChartSeries
+} from "./chunk-2ZUEXCVJ.mjs";
 
 // src/components/LineChart.ts
 import { defineComponent, computed, getCurrentInstance, h, ref, useId } from "vue";
@@ -665,7 +665,7 @@ var LineChart = defineComponent({
       );
       const tooltip = props.showTooltip ? h(ChartTooltip, {
         content: tooltipContent.value,
-        visible: hoveredPointInfo.value !== null && tooltipContent.value !== "",
+        open: hoveredPointInfo.value !== null && tooltipContent.value !== "",
         x: tooltipPosition.value.x,
         y: tooltipPosition.value.y
       }) : null;

package/dist/components/ActivityFeed.d.mts

@@ -107,18 +107,18 @@ declare const ActivityFeed: vue.DefineComponent<vue.ExtractPropTypes<{
         default: undefined;
     };
 }>> & Readonly<{}>, {
-    loadingText: string;
-    emptyText: string;
-    className: string;
-    style: Record<string, string | number>;
-    loading: boolean;
-    groupBy: (item: ActivityItem) => string;
     items: ActivityItem[];
     groups: ActivityGroup[];
+    groupBy: (item: ActivityItem) => string;
     groupOrder: string[];
+    loading: boolean;
+    loadingText: string;
+    emptyText: string;
     showAvatar: boolean;
     showTime: boolean;
     showGroupTitle: boolean;
+    className: string;
+    style: Record<string, string | number>;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
 export { ActivityFeed, type VueActivityFeedProps, ActivityFeed as default };

package/dist/components/ActivityFeed.mjs

@@ -1,17 +1,17 @@
 import {
   ActivityFeed,
   ActivityFeed_default
-} from "../chunk-2HRJGOAV.mjs";
+} from "../chunk-B47QLHVW.mjs";
 import "../chunk-RTZUIWCN.mjs";
-import "../chunk-6WF3336O.mjs";
 import "../chunk-3MO7A4GU.mjs";
+import "../chunk-6WF3336O.mjs";
 import "../chunk-BDTPFPSB.mjs";
 import "../chunk-KRWKO2JQ.mjs";
 import "../chunk-NN6AINLG.mjs";
 import "../chunk-TC6ZPQFT.mjs";
+import "../chunk-R6WFL6NI.mjs";
 import "../chunk-XZYFVOOS.mjs";
 import "../chunk-GZWZP5AL.mjs";
-import "../chunk-R6WFL6NI.mjs";
 export {
   ActivityFeed,
   ActivityFeed_default as default

package/dist/components/Alert.d.mts

@@ -204,14 +204,14 @@ declare const Alert: vue.DefineComponent<vue.ExtractPropTypes<{
 }>> & Readonly<{
     onClose?: ((...args: any[]) => any) | undefined;
 }>, {
-    type: AlertType;
-    closeAriaLabel: string;
     size: AlertSize;
     className: string;
     style: Record<string, string | number>;
+    type: AlertType;
     title: string;
-    description: string;
     closable: boolean;
+    closeAriaLabel: string;
+    description: string;
     showIcon: boolean;
     duration: number;
     banner: boolean;

package/dist/components/Anchor.d.mts

@@ -236,9 +236,9 @@ declare const Anchor: vue.DefineComponent<vue.ExtractPropTypes<{
     onChange?: ((...args: any[]) => any) | undefined;
     onClick?: ((...args: any[]) => any) | undefined;
 }>, {
-    direction: AnchorDirection;
     className: string;
     style: Record<string, unknown>;
+    direction: AnchorDirection;
     offsetTop: number;
     targetOffset: number;
     bounds: number;

package/dist/components/AreaChart.d.mts

@@ -1,9 +1,9 @@
 import * as vue from 'vue';
 import { PropType } from 'vue';
-import { ChartPadding, AreaChartDatum, AreaChartSeries, ChartScale, ChartCurveType, ChartScaleValue, ChartGridLineStyle, ChartLegendPosition, AreaChartProps } from '@expcat/tigercat-core';
+import { ChartPadding, LineChartDatum, AreaChartSeries, ChartScale, ChartCurveType, ChartScaleValue, ChartGridLineStyle, ChartLegendPosition, AreaChartProps } from '@expcat/tigercat-core';
 
 interface VueAreaChartProps extends AreaChartProps {
-    data?: AreaChartDatum[];
+    data?: LineChartDatum[];
     series?: AreaChartSeries[];
     padding?: ChartPadding;
     xScale?: ChartScale;
@@ -23,7 +23,7 @@ declare const AreaChart: vue.DefineComponent<vue.ExtractPropTypes<{
         default: number;
     };
     data: {
-        type: PropType<AreaChartDatum[]>;
+        type: PropType<LineChartDatum[]>;
     };
     series: {
         type: PropType<AreaChartSeries[]>;
@@ -187,7 +187,7 @@ declare const AreaChart: vue.DefineComponent<vue.ExtractPropTypes<{
         default: boolean;
     };
     tooltipFormatter: {
-        type: PropType<(datum: AreaChartDatum, seriesIndex: number, pointIndex: number, series?: AreaChartSeries) => string>;
+        type: PropType<(datum: LineChartDatum, seriesIndex: number, pointIndex: number, series?: AreaChartSeries) => string>;
     };
     legendFormatter: {
         type: PropType<(series: AreaChartSeries, index: number) => string>;
@@ -217,7 +217,7 @@ declare const AreaChart: vue.DefineComponent<vue.ExtractPropTypes<{
         default: number;
     };
     data: {
-        type: PropType<AreaChartDatum[]>;
+        type: PropType<LineChartDatum[]>;
     };
     series: {
         type: PropType<AreaChartSeries[]>;
@@ -381,7 +381,7 @@ declare const AreaChart: vue.DefineComponent<vue.ExtractPropTypes<{
         default: boolean;
     };
     tooltipFormatter: {
-        type: PropType<(datum: AreaChartDatum, seriesIndex: number, pointIndex: number, series?: AreaChartSeries) => string>;
+        type: PropType<(datum: LineChartDatum, seriesIndex: number, pointIndex: number, series?: AreaChartSeries) => string>;
     };
     legendFormatter: {
         type: PropType<(series: AreaChartSeries, index: number) => string>;
@@ -403,12 +403,12 @@ declare const AreaChart: vue.DefineComponent<vue.ExtractPropTypes<{
     "onSeries-click"?: ((...args: any[]) => any) | undefined;
     "onSeries-hover"?: ((...args: any[]) => any) | undefined;
 }>, {
-    width: number;
-    height: number;
     padding: ChartPadding;
-    gradient: boolean;
     hoverable: boolean;
     strokeWidth: number;
+    width: number;
+    height: number;
+    gradient: boolean;
     fillOpacity: number;
     selectable: boolean;
     xTicks: number;

package/dist/components/AreaChart.mjs

@@ -1,14 +1,14 @@
 import {
   AreaChart,
   AreaChart_default
-} from "../chunk-4RK5BDGR.mjs";
-import "../chunk-R2HO74FE.mjs";
-import "../chunk-HLPSHCXO.mjs";
-import "../chunk-2ZUEXCVJ.mjs";
-import "../chunk-G2LB4QCL.mjs";
+} from "../chunk-RAO7ZJWR.mjs";
+import "../chunk-PE5OA4YG.mjs";
+import "../chunk-SPFL55TF.mjs";
 import "../chunk-ZWVA7HT3.mjs";
 import "../chunk-W5RZPTFD.mjs";
 import "../chunk-MI6TL3CQ.mjs";
+import "../chunk-HLPSHCXO.mjs";
+import "../chunk-2ZUEXCVJ.mjs";
 export {
   AreaChart,
   AreaChart_default as default

package/dist/components/AutoComplete.d.mts

@@ -1,6 +1,6 @@
 import * as vue from 'vue';
 import { PropType } from 'vue';
-import { AutoCompleteOption, AutoCompleteSize, TigerLocale } from '@expcat/tigercat-core';
+import { AutoCompleteOption, ComponentSize, TigerLocale } from '@expcat/tigercat-core';
 
 type VueAutoCompleteProps = InstanceType<typeof AutoComplete>['$props'];
 declare const AutoComplete: vue.DefineComponent<vue.ExtractPropTypes<{
@@ -16,8 +16,16 @@ declare const AutoComplete: vue.DefineComponent<vue.ExtractPropTypes<{
         type: StringConstructor;
         default: string;
     };
+    searchValue: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    defaultSearchValue: {
+        type: StringConstructor;
+        default: string;
+    };
     size: {
-        type: PropType<AutoCompleteSize>;
+        type: PropType<ComponentSize>;
         default: string;
     };
     disabled: {
@@ -28,7 +36,7 @@ declare const AutoComplete: vue.DefineComponent<vue.ExtractPropTypes<{
         type: BooleanConstructor;
         default: boolean;
     };
-    notFoundText: {
+    emptyText: {
         type: StringConstructor;
         default: undefined;
     };
@@ -50,7 +58,7 @@ declare const AutoComplete: vue.DefineComponent<vue.ExtractPropTypes<{
     };
 }>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
-}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("search" | "select" | "change" | "update:modelValue")[], "search" | "select" | "change" | "update:modelValue", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("change" | "select" | "update:modelValue" | "update:searchValue" | "search-change")[], "change" | "select" | "update:modelValue" | "update:searchValue" | "search-change", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
     modelValue: {
         type: PropType<string | number>;
         default: string;
@@ -63,8 +71,16 @@ declare const AutoComplete: vue.DefineComponent<vue.ExtractPropTypes<{
         type: StringConstructor;
         default: string;
     };
+    searchValue: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    defaultSearchValue: {
+        type: StringConstructor;
+        default: string;
+    };
     size: {
-        type: PropType<AutoCompleteSize>;
+        type: PropType<ComponentSize>;
         default: string;
     };
     disabled: {
@@ -75,7 +91,7 @@ declare const AutoComplete: vue.DefineComponent<vue.ExtractPropTypes<{
         type: BooleanConstructor;
         default: boolean;
     };
-    notFoundText: {
+    emptyText: {
         type: StringConstructor;
         default: undefined;
     };
@@ -96,19 +112,22 @@ declare const AutoComplete: vue.DefineComponent<vue.ExtractPropTypes<{
         default: undefined;
     };
 }>> & Readonly<{
-    onSelect?: ((...args: any[]) => any) | undefined;
     onChange?: ((...args: any[]) => any) | undefined;
-    onSearch?: ((...args: any[]) => any) | undefined;
+    onSelect?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:searchValue"?: ((...args: any[]) => any) | undefined;
+    "onSearch-change"?: ((...args: any[]) => any) | undefined;
 }>, {
+    size: ComponentSize;
+    emptyText: string;
     locale: Partial<TigerLocale>;
-    size: AutoCompleteSize;
     disabled: boolean;
     modelValue: string | number;
     options: AutoCompleteOption[];
     placeholder: string;
+    searchValue: string;
+    defaultSearchValue: string;
     clearable: boolean;
-    notFoundText: string;
     filterOption: boolean | ((inputValue: string, option: AutoCompleteOption) => boolean);
     defaultActiveFirstOption: boolean;
     allowFreeInput: boolean;

package/dist/components/AutoComplete.mjs

@@ -1,7 +1,7 @@
 import {
   AutoComplete,
   AutoComplete_default
-} from "../chunk-CIDINFA2.mjs";
+} from "../chunk-ODDPVS27.mjs";
 import "../chunk-R6WFL6NI.mjs";
 export {
   AutoComplete,

package/dist/components/Avatar.d.mts

@@ -151,9 +151,9 @@ declare const Avatar: vue.DefineComponent<vue.ExtractPropTypes<{
     size: AvatarSize;
     className: string;
     style: Record<string, string | number>;
-    text: string;
     src: string;
     alt: string;
+    text: string;
     shape: AvatarShape;
     bgColor: string;
     textColor: string;

package/dist/components/BackTop.d.mts

@@ -1,6 +1,6 @@
 import * as vue from 'vue';
 import { PropType } from 'vue';
-import { BackTopProps } from '@expcat/tigercat-core';
+import { BackTopPosition, ViewportPlacement, ViewportOffset, BackTopProps } from '@expcat/tigercat-core';
 
 interface VueBackTopProps extends BackTopProps {
     target?: () => HTMLElement | Window | null;
@@ -32,6 +32,18 @@ declare const BackTop: vue.DefineComponent<vue.ExtractPropTypes<{
         type: NumberConstructor;
         default: number;
     };
+    position: {
+        type: PropType<BackTopPosition>;
+        default: BackTopPosition;
+    };
+    placement: {
+        type: PropType<ViewportPlacement>;
+        default: ViewportPlacement;
+    };
+    offset: {
+        type: PropType<ViewportOffset>;
+        default: undefined;
+    };
     className: {
         type: StringConstructor;
         default: undefined;
@@ -67,6 +79,18 @@ declare const BackTop: vue.DefineComponent<vue.ExtractPropTypes<{
         type: NumberConstructor;
         default: number;
     };
+    position: {
+        type: PropType<BackTopPosition>;
+        default: BackTopPosition;
+    };
+    placement: {
+        type: PropType<ViewportPlacement>;
+        default: ViewportPlacement;
+    };
+    offset: {
+        type: PropType<ViewportOffset>;
+        default: undefined;
+    };
     className: {
         type: StringConstructor;
         default: undefined;
@@ -80,7 +104,10 @@ declare const BackTop: vue.DefineComponent<vue.ExtractPropTypes<{
 }>, {
     className: string;
     style: Record<string, unknown>;
+    position: BackTopPosition;
     target: () => HTMLElement | Window | null;
+    offset: ViewportOffset;
+    placement: ViewportPlacement;
     duration: number;
     visibilityHeight: number;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;

package/dist/components/BackTop.mjs

@@ -1,7 +1,7 @@
 import {
   BackTop,
   BackTop_default
-} from "../chunk-IJL7YYT7.mjs";
+} from "../chunk-TQDN67YN.mjs";
 export {
   BackTop,
   BackTop_default as default

package/dist/components/Badge.d.mts

@@ -100,15 +100,15 @@ declare const Badge: vue.DefineComponent<vue.ExtractPropTypes<{
         default: undefined;
     };
 }>> & Readonly<{}>, {
-    locale: Partial<TigerLocale>;
-    type: BadgeType;
     size: BadgeSize;
     className: string;
     style: Record<string, string | number>;
+    type: BadgeType;
     variant: BadgeVariant;
-    max: number;
-    content: string | number;
+    locale: Partial<TigerLocale>;
     position: BadgePosition;
+    content: string | number;
+    max: number;
     showZero: boolean;
     standalone: boolean;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;

package/dist/components/BarChart.d.mts

@@ -364,11 +364,11 @@ declare const BarChart: vue.DefineComponent<vue.ExtractPropTypes<{
     "onBar-click"?: ((...args: any[]) => any) | undefined;
     "onBar-hover"?: ((...args: any[]) => any) | undefined;
 }>, {
+    padding: ChartPadding;
+    hoverable: boolean;
     width: number;
     height: number;
-    padding: ChartPadding;
     gradient: boolean;
-    hoverable: boolean;
     selectable: boolean;
     xTicks: number;
     yTicks: number;