@veltra/desktop 1.2.7 → 1.2.9

package/dist/components/batch-edit/batch-edit.vue.d.ts

@@ -1,17 +1,7 @@
-import { TableColumn, TableColumnSlotsScope, TableRow } from "../../types/table.js";
-import { BatchEditMode, BatchEditProps } from "../../types/batch-edit.js";
+import { TableColumn, TableRow } from "../../types/table.js";
+import { BatchEditProps, BatchEditSlots } from "../../types/batch-edit.js";
 //#region src/components/batch-edit/batch-edit.vue.d.ts
-type __VLS_Slots = {
-  form?: (props: {
-    /** 当前编辑的层级 */depth?: number; /** 当前编辑的行 */
-    row?: TableRow; /** 当前编辑的行索引 */
-    index?: number; /** 操作的目标行索引路径 */
-    indexes?: number[];
-  }) => any;
-  header?: () => any;
-} & Partial<{
-  [key: `column:${string}`]: (props: TableColumnSlotsScope) => any;
-}>;
+type __VLS_Slots = BatchEditSlots;
 declare const __VLS_base: import("vue").DefineComponent<BatchEditProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
   "update:selected": (value: Record<string, any> | undefined) => any;
   "update:checked": (value: Record<string, any>[]) => any;
@@ -32,7 +22,6 @@ declare const __VLS_base: import("vue").DefineComponent<BatchEditProps, {}, {},
   "onRow-click"?: ((row: TableRow, ev: MouseEvent) => any) | undefined;
 }>, {
   cols: string | [string, string];
-  mode: BatchEditMode;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/batch-edit/di.js.map

@@ -1 +1 @@
-{"version":3,"file":"di.js","names":[],"sources":["../../../src/components/batch-edit/di.ts"],"sourcesContent":["import type { BEM } from '@veltra/utils'\nimport type { ComputedRef, InjectionKey, ShallowRef, Ref } from 'vue'\n\nimport type {\n  BatchEditEmits,\n  BatchEditFeature,\n  BatchEditProps,\n  TableExposed,\n  TableRow\n} from '../../types'\nimport type { EditReturned } from './use-edit'\nexport const BatchEditDIKey: InjectionKey<\n  {\n    cls: BEM<'batch-edit', 'u-'>\n    props: BatchEditProps\n    emit: BatchEditEmits\n    tableRef: ShallowRef<TableExposed | undefined>\n    staticFeatures: ComputedRef<Set<BatchEditFeature>>\n    dynamicFeatures: ComputedRef<\n      Record<BatchEditFeature, ((row?: TableRow) => boolean) | undefined>\n    >\n    /** 组件或其子节点是否处于聚焦状态 */\n    focused: Ref<boolean>\n  } & EditReturned\n> = Symbol('BatchEditDIKey')\n"],"mappings":";AAWA,MAAa,iBAaT,OAAO,gBAAgB"}
+{"version":3,"file":"di.js","names":[],"sources":["../../../src/components/batch-edit/di.ts"],"sourcesContent":["import type { BEM } from '@veltra/utils'\nimport type { ComputedRef, InjectionKey, ShallowRef } from 'vue'\n\nimport type {\n  BatchEditEmits,\n  BatchEditFeature,\n  BatchEditProps,\n  BatchEditStates,\n  TableRow\n} from '../../types'\nimport type { EditReturned } from './use-handlers'\n\nexport const BatchEditDIKey: InjectionKey<\n  {\n    cls: BEM<'batch-edit', 'u-'>\n    props: BatchEditProps\n    emit: BatchEditEmits\n    state: BatchEditStates\n    staticFeatures: ComputedRef<Set<BatchEditFeature>>\n    dynamicFeatures: ComputedRef<\n      Record<BatchEditFeature, ((row?: TableRow) => boolean) | undefined>\n    >\n    /** 组件或其子节点是否处于聚焦状态 */\n    focused: ShallowRef<boolean>\n  } & EditReturned\n> = Symbol('BatchEditDIKey')\n"],"mappings":";AAYA,MAAa,iBAaT,OAAO,gBAAgB"}

package/dist/components/batch-edit/form-action-header.js

@@ -0,0 +1,25 @@
+import { AddChild, EditPen, Plus, View } from "@veltra/icons/normal";
+//#region src/components/batch-edit/form-action-header.ts
+/** 按 formActionType 映射的表单头部信息 */
+const FORM_ACTION_HEADER_MAP = {
+	create: {
+		icon: Plus,
+		title: "新增"
+	},
+	update: {
+		icon: EditPen,
+		title: "编辑"
+	},
+	view: {
+		icon: View,
+		title: "查看详情"
+	},
+	createChild: {
+		icon: AddChild,
+		title: "新增子级"
+	}
+};
+//#endregion
+export { FORM_ACTION_HEADER_MAP };
+
+//# sourceMappingURL=form-action-header.js.map

package/dist/components/batch-edit/form-action-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-action-header.js","names":[],"sources":["../../../src/components/batch-edit/form-action-header.ts"],"sourcesContent":["import { AddChild, EditPen, Plus, View } from '@veltra/icons/normal'\nimport type { Component } from 'vue'\n\nimport type { BatchEditStates } from '../../types'\n\n/** 表单操作类型对应的头部展示信息 */\nexport interface FormActionHeaderInfo {\n  icon: Component\n  title: string\n}\n\n/** 按 formActionType 映射的表单头部信息 */\nexport const FORM_ACTION_HEADER_MAP: Record<\n  BatchEditStates['formActionType'],\n  FormActionHeaderInfo\n> = {\n  create: { icon: Plus, title: '新增' },\n  update: { icon: EditPen, title: '编辑' },\n  view: { icon: View, title: '查看详情' },\n  createChild: { icon: AddChild, title: '新增子级' }\n}\n"],"mappings":";;;AAYA,MAAa,yBAGT;CACF,QAAQ;EAAE,MAAM;EAAM,OAAO;CAAK;CAClC,QAAQ;EAAE,MAAM;EAAS,OAAO;CAAK;CACrC,MAAM;EAAE,MAAM;EAAM,OAAO;CAAO;CAClC,aAAa;EAAE,MAAM;EAAU,OAAO;CAAO;AAC/C"}

package/dist/components/batch-edit/style2.css

@@ -106,19 +106,6 @@
   color: var(--u-text-color-title);
   line-height: 1.25;
 }
-.u-batch-edit__form-chip {
-  display: inline-block;
-  padding: 1px 8px;
-  font-size: 12px;
-  line-height: 18px;
-  border-radius: var(--u-radius-default);
-  background-color: var(--u-bg-color-default);
-  color: var(--u-text-color-second);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 60%;
-}
 .u-batch-edit__form-close {
   flex-shrink: 0;
 }

package/dist/components/batch-edit/use-edit-state.js

@@ -0,0 +1,40 @@
+import { shallowReactive, watch } from "vue";
+import { o } from "@cat-kit/core";
+//#region src/components/batch-edit/use-edit-state.ts
+function useEditState(options) {
+	const { props } = options;
+	const defaultState = {
+		depth: -1,
+		formVisible: false,
+		formActionType: "create",
+		loading: false,
+		indexPath: []
+	};
+	const state = shallowReactive({ ...defaultState });
+	function resetState() {
+		if (state.row) state.row.isCurrent = false;
+		Object.keys(state).forEach((key) => {
+			delete state[key];
+		});
+		Object.assign(state, defaultState);
+	}
+	watch(() => state.row, (row) => {
+		if (row) {
+			if (props.model) o(props.model).deepExtend(row.data);
+			state.formActionType = props.readonly ? "view" : "update";
+			state.formVisible = true;
+			state.depth = row.depth;
+			state.indexPath = [...row.indexes];
+			return;
+		}
+		resetState();
+	});
+	return {
+		state,
+		resetState
+	};
+}
+//#endregion
+export { useEditState };
+
+//# sourceMappingURL=use-edit-state.js.map

package/dist/components/batch-edit/use-edit-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-edit-state.js","names":[],"sources":["../../../src/components/batch-edit/use-edit-state.ts"],"sourcesContent":["import { o } from '@cat-kit/core'\nimport { shallowReactive, watch } from 'vue'\n\nimport type { BatchEditProps, BatchEditStates } from '../../types'\n\ninterface Options {\n  props: BatchEditProps\n}\n\nexport function useEditState(options: Options) {\n  const { props } = options\n\n  const defaultState: BatchEditStates = {\n    depth: -1,\n    formVisible: false,\n    formActionType: 'create',\n    loading: false,\n    indexPath: []\n  }\n\n  const state = shallowReactive({ ...defaultState })\n\n  function resetState() {\n    if (state.row) {\n      state.row.isCurrent = false\n    }\n\n    Object.keys(state).forEach((key) => {\n      delete state[key]\n    })\n\n    Object.assign(state, defaultState)\n  }\n\n  watch(\n    () => state.row,\n    (row) => {\n      if (row) {\n        if (props.model) {\n          o(props.model).deepExtend(row.data)\n        }\n        state.formActionType = props.readonly ? 'view' : 'update'\n        state.formVisible = true\n        state.depth = row.depth\n        state.indexPath = [...row.indexes]\n\n        return\n      }\n\n      resetState()\n    }\n  )\n\n  return { state, resetState }\n}\n"],"mappings":";;;AASA,SAAgB,aAAa,SAAkB;CAC7C,MAAM,EAAE,UAAU;CAElB,MAAM,eAAgC;EACpC,OAAO;EACP,aAAa;EACb,gBAAgB;EAChB,SAAS;EACT,WAAW,CAAC;CACd;CAEA,MAAM,QAAQ,gBAAgB,EAAE,GAAG,aAAa,CAAC;CAEjD,SAAS,aAAa;EACpB,IAAI,MAAM,KACR,MAAM,IAAI,YAAY;EAGxB,OAAO,KAAK,KAAK,EAAE,SAAS,QAAQ;GAClC,OAAO,MAAM;EACf,CAAC;EAED,OAAO,OAAO,OAAO,YAAY;CACnC;CAEA,YACQ,MAAM,MACX,QAAQ;EACP,IAAI,KAAK;GACP,IAAI,MAAM,OACR,EAAE,MAAM,KAAK,EAAE,WAAW,IAAI,IAAI;GAEpC,MAAM,iBAAiB,MAAM,WAAW,SAAS;GACjD,MAAM,cAAc;GACpB,MAAM,QAAQ,IAAI;GAClB,MAAM,YAAY,CAAC,GAAG,IAAI,OAAO;GAEjC;EACF;EAEA,WAAW;CACb,CACF;CAEA,OAAO;EAAE;EAAO;CAAW;AAC7B"}

package/dist/components/batch-edit/use-handlers.js

@@ -0,0 +1,146 @@
+import { computed, nextTick } from "vue";
+import { last, o } from "@cat-kit/core";
+//#region src/components/batch-edit/use-handlers.ts
+/** 按索引路径在原始数据树中定位节点（等价于历史 Forest.visit 路径访问） */
+function visitDataByIndexPath(roots, indexPath, childrenKey) {
+	if (!indexPath.length) return void 0;
+	let currentList = roots;
+	let node;
+	for (let i = 0; i < indexPath.length; i++) {
+		const idx = indexPath[i];
+		if (!currentList) return void 0;
+		node = currentList[idx];
+		if (node === void 0) return void 0;
+		if (i < indexPath.length - 1) {
+			const next = node[childrenKey];
+			currentList = Array.isArray(next) ? next : void 0;
+		}
+	}
+	return node;
+}
+function useHandlers(options) {
+	const { props, emit, state, resetState, formRef } = options;
+	const childrenKey = computed(() => {
+		return typeof props.tree === "string" ? props.tree : "children";
+	});
+	function getInsertData() {
+		return o(props.model ?? {}).copy();
+	}
+	/**
+	* 插入数据
+	* @param item 数据
+	*/
+	function insert(item) {
+		const data = [...props.data ?? []];
+		const parent = visitDataByIndexPath(data ?? [], state.indexPath.slice(0, -1), childrenKey.value);
+		if (parent) {
+			const children = parent[childrenKey.value];
+			if (!children) parent[childrenKey.value] = [item];
+			else children.splice(last(state.indexPath), 0, item);
+		} else data.splice(last(state.indexPath), 0, item);
+		emit("update:data", data);
+		return item;
+	}
+	/**
+	* 点击新增按钮
+	*/
+	function handleCreate() {
+		const { data } = props;
+		resetState();
+		nextTick(() => {
+			state.formActionType = "create";
+			state.formVisible = true;
+			state.depth = 1;
+			state.indexPath = [data?.length ?? 0];
+		});
+	}
+	function handleInsertToPrev(row) {
+		resetState();
+		state.formActionType = "create";
+		state.formVisible = true;
+		state.depth = row.depth;
+		state.indexPath = [...row.indexes];
+	}
+	function handleInsertToNext(row) {
+		resetState();
+		state.formActionType = "create";
+		state.formVisible = true;
+		state.depth = row.depth;
+		state.indexPath = [...row.indexes.slice(0, -1), row.index + 1];
+	}
+	function handleInsertChild(row) {
+		resetState();
+		state.formActionType = "createChild";
+		state.formVisible = true;
+		state.parentRow = row;
+		state.depth = row.depth + 1;
+		row.expanded = true;
+		state.indexPath = [...row.indexes, row.children?.length ?? 0];
+	}
+	function runWithLoading(fn) {
+		return async (...args) => {
+			state.loading = true;
+			if (state.row) state.row.operating = true;
+			try {
+				await fn.apply(null, args);
+			} catch (error) {
+				console.error(error);
+			}
+			state.loading = false;
+			if (state.row) state.row.operating = false;
+		};
+	}
+	/** 保存 */
+	const handleSave = runWithLoading(async () => {
+		const { model, saveMethod } = props;
+		const valid = await formRef.value?.validate();
+		if (!model || !valid) return;
+		let item = getInsertData();
+		if (state.formActionType === "create" || state.formActionType === "createChild") {
+			await props.beforeCreate?.(item, state.parentRow?.data);
+			if (saveMethod) {
+				const result = await saveMethod(item, state.formActionType, state.parentRow?.data);
+				if (result) item = result;
+			}
+			insert(item);
+			return;
+		}
+		if (saveMethod) {
+			const result = await saveMethod(item, state.formActionType, state.parentRow?.data);
+			if (result) item = result;
+		}
+		const { row } = state;
+		row && Object.keys(item).forEach((key) => {
+			o(row.data).set(key, o(item).get(key));
+		});
+	});
+	const handleDelete = runWithLoading(async (row) => {
+		const { deleteMethod } = props;
+		if (deleteMethod) await deleteMethod([row.data]);
+		const data = [...props.data ?? []];
+		const parent = visitDataByIndexPath(data, row.indexes.slice(0, -1), childrenKey.value);
+		if (parent) {
+			const children = parent[childrenKey.value];
+			if (children) children.splice(row.index, 1);
+			else console.error("行路径不正确");
+		} else data.splice(row.index, 1);
+		if (state.row === row) resetState();
+		emit("update:data", data);
+	});
+	function handleClose() {
+		resetState();
+	}
+	return {
+		handleDelete,
+		handleInsertChild,
+		handleInsertToNext,
+		handleInsertToPrev,
+		handleCreate,
+		handleClose,
+		handleSave
+	};
+}
+//#endregion
+export { useHandlers };
+
+//# sourceMappingURL=use-handlers.js.map

package/dist/components/batch-edit/use-handlers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-handlers.js","names":[],"sources":["../../../src/components/batch-edit/use-handlers.ts"],"sourcesContent":["import { last, o } from '@cat-kit/core'\nimport { computed, nextTick, type ShallowRef } from 'vue'\n\nimport type {\n  TableRow,\n  BatchEditEmits,\n  BatchEditProps,\n  BatchEditStates,\n  FormExposed\n} from '../../types'\n\n/** 按索引路径在原始数据树中定位节点（等价于历史 Forest.visit 路径访问） */\nfunction visitDataByIndexPath<T extends Record<string, unknown>>(\n  roots: T[],\n  indexPath: number[],\n  childrenKey: string\n): T | undefined {\n  if (!indexPath.length) return undefined\n  let currentList: T[] | undefined = roots\n  let node: T | undefined\n  for (let i = 0; i < indexPath.length; i++) {\n    const idx = indexPath[i]!\n    if (!currentList) return undefined\n    node = currentList[idx]\n    if (node === undefined) return undefined\n    if (i < indexPath.length - 1) {\n      const next = node[childrenKey]\n      currentList = Array.isArray(next) ? (next as T[]) : undefined\n    }\n  }\n  return node\n}\n\ninterface Options {\n  props: BatchEditProps\n  emit: BatchEditEmits\n  state: BatchEditStates\n  formRef: ShallowRef<FormExposed | null>\n  resetState: () => void\n}\n\nexport interface EditReturned {\n  handleSave: () => Promise<void>\n  handleClose: () => void\n  handleCreate: () => void\n  handleDelete: (row: TableRow) => Promise<void>\n  handleInsertToNext: (row: TableRow) => void\n  handleInsertToPrev: (row: TableRow) => void\n  handleInsertChild: (row: TableRow) => void\n}\n\nexport function useHandlers(options: Options): EditReturned {\n  const { props, emit, state, resetState, formRef } = options\n\n  const childrenKey = computed(() => {\n    return typeof props.tree === 'string' ? props.tree : 'children'\n  })\n\n  function getInsertData(): Record<string, any> {\n    return o(props.model ?? {}).copy()\n  }\n\n  /**\n   * 插入数据\n   * @param item 数据\n   */\n  function insert(item: Record<string, any>) {\n    const data = [...(props.data ?? [])]\n\n    const parent = visitDataByIndexPath(data ?? [], state.indexPath.slice(0, -1), childrenKey.value)\n\n    if (parent) {\n      const children = parent[childrenKey.value]\n      if (!children) {\n        parent[childrenKey.value] = [item]\n      } else {\n        children.splice(last(state.indexPath), 0, item)\n      }\n    } else {\n      data.splice(last(state.indexPath), 0, item)\n    }\n\n    emit('update:data', data)\n\n    return item\n  }\n\n  /**\n   * 点击新增按钮\n   */\n  function handleCreate() {\n    const { data } = props\n\n    resetState()\n\n    nextTick(() => {\n      state.formActionType = 'create'\n      state.formVisible = true\n      state.depth = 1\n      state.indexPath = [data?.length ?? 0]\n    })\n  }\n\n  function handleInsertToPrev(row: TableRow) {\n    resetState()\n    state.formActionType = 'create'\n    state.formVisible = true\n    state.depth = row.depth\n    state.indexPath = [...row.indexes]\n  }\n\n  function handleInsertToNext(row: TableRow) {\n    resetState()\n    state.formActionType = 'create'\n    state.formVisible = true\n    state.depth = row.depth\n    state.indexPath = [...row.indexes.slice(0, -1), row.index + 1]\n  }\n\n  function handleInsertChild(row: TableRow) {\n    resetState()\n    state.formActionType = 'createChild'\n    state.formVisible = true\n    state.parentRow = row\n    state.depth = row.depth + 1\n    row.expanded = true\n    state.indexPath = [...row.indexes, row.children?.length ?? 0]\n  }\n\n  function runWithLoading<Arg extends any[]>(fn: (...args: Arg) => Promise<void> | void) {\n    return async (...args: Arg) => {\n      state.loading = true\n      if (state.row) {\n        state.row.operating = true\n      }\n      try {\n        await fn.apply(null, args)\n      } catch (error) {\n        console.error(error)\n      }\n      state.loading = false\n      if (state.row) {\n        state.row.operating = false\n      }\n    }\n  }\n\n  /** 保存 */\n  const handleSave = runWithLoading(async () => {\n    const { model, saveMethod } = props\n    const valid = await formRef.value?.validate()\n    if (!model || !valid) return\n\n    let item = getInsertData()\n\n    // 新增\n    if (state.formActionType === 'create' || state.formActionType === 'createChild') {\n      await props.beforeCreate?.(item, state.parentRow?.data)\n      if (saveMethod) {\n        const result = await saveMethod(item, state.formActionType, state.parentRow?.data)\n        if (result) {\n          item = result\n        }\n      }\n      insert(item)\n      return\n    }\n\n    // 普通模式下的编辑\n    if (saveMethod) {\n      const result = await saveMethod(item, state.formActionType, state.parentRow?.data)\n      if (result) {\n        item = result\n      }\n    }\n\n    const { row } = state\n    row &&\n      Object.keys(item).forEach((key) => {\n        o(row.data).set(key, o(item).get(key))\n      })\n  })\n\n  const handleDelete = runWithLoading(async (row: TableRow) => {\n    const { deleteMethod } = props\n\n    if (deleteMethod) {\n      await deleteMethod([row.data])\n    }\n\n    const data = [...(props.data ?? [])]\n\n    const parent = visitDataByIndexPath(data, row.indexes.slice(0, -1), childrenKey.value)\n\n    if (parent) {\n      const children = parent[childrenKey.value]\n      if (children) {\n        children.splice(row.index, 1)\n      } else {\n        console.error('行路径不正确')\n      }\n    } else {\n      data.splice(row.index, 1)\n    }\n\n    if (state.row === row) {\n      resetState()\n    }\n\n    emit('update:data', data)\n  })\n\n  function handleClose() {\n    resetState()\n  }\n\n  return {\n    handleDelete,\n    handleInsertChild,\n    handleInsertToNext,\n    handleInsertToPrev,\n    handleCreate,\n    handleClose,\n    handleSave\n  }\n}\n"],"mappings":"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"}

package/dist/components/batch-edit/use-shortcut-key.js

@@ -0,0 +1,44 @@
+import { shallowRef } from "vue";
+//#region src/components/batch-edit/use-shortcut-key.ts
+function useShortcutKey(options) {
+	const { props, onClose, onSave, state } = options;
+	const focused = shallowRef(false);
+	function handleFocusIn() {
+		focused.value = true;
+	}
+	function handleFocusOut(e) {
+		if (!e.currentTarget.contains(e.relatedTarget)) focused.value = false;
+	}
+	function runEscape(e) {
+		e.preventDefault();
+		onClose();
+	}
+	function runSave(e) {
+		if (!state.formVisible) return;
+		if (props.quickEdit && state.formActionType === "update") return;
+		e.preventDefault();
+		onSave();
+	}
+	/**
+	* 键盘快捷键（仅组件获焦时生效）：
+	* - Esc          关闭表单
+	* - ⌘/Ctrl + S   保存（快速编辑模式下编辑行时除外）
+	*/
+	function handleKeydown(e) {
+		if (!focused.value) return;
+		if (props.readonly && e.key !== "Escape") return;
+		if (e.key === "Escape") return runEscape(e);
+		if (!(e.metaKey || e.ctrlKey)) return;
+		if (e.key.toLowerCase() === "s") return runSave(e);
+	}
+	return {
+		focused,
+		handleFocusIn,
+		handleFocusOut,
+		handleKeydown
+	};
+}
+//#endregion
+export { useShortcutKey };
+
+//# sourceMappingURL=use-shortcut-key.js.map

package/dist/components/batch-edit/use-shortcut-key.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-shortcut-key.js","names":[],"sources":["../../../src/components/batch-edit/use-shortcut-key.ts"],"sourcesContent":["import { shallowRef } from 'vue'\n\nimport type { BatchEditProps, BatchEditStates } from '../../types'\n\ninterface Options {\n  props: BatchEditProps\n  onSave: () => void\n  onClose: () => void\n  state: BatchEditStates\n}\nexport function useShortcutKey(options: Options) {\n  const { props, onClose, onSave, state } = options\n  const focused = shallowRef(false)\n\n  function handleFocusIn() {\n    focused.value = true\n  }\n\n  function handleFocusOut(e: FocusEvent) {\n    const root = e.currentTarget as HTMLElement\n    if (!root.contains(e.relatedTarget as Node | null)) {\n      focused.value = false\n    }\n  }\n\n  function runEscape(e: KeyboardEvent) {\n    e.preventDefault()\n    onClose()\n  }\n\n  function runSave(e: KeyboardEvent) {\n    if (!state.formVisible) return\n    if (props.quickEdit && state.formActionType === 'update') return\n    e.preventDefault()\n    onSave()\n  }\n\n  /**\n   * 键盘快捷键（仅组件获焦时生效）：\n   * - Esc          关闭表单\n   * - ⌘/Ctrl + S   保存（快速编辑模式下编辑行时除外）\n   */\n  function handleKeydown(e: KeyboardEvent) {\n    if (!focused.value) return\n    if (props.readonly && e.key !== 'Escape') return\n\n    if (e.key === 'Escape') return runEscape(e)\n\n    const meta = e.metaKey || e.ctrlKey\n    if (!meta) return\n\n    const key = e.key.toLowerCase()\n\n    if (key === 's') return runSave(e)\n  }\n\n  return { focused, handleFocusIn, handleFocusOut, handleKeydown }\n}\n"],"mappings":";;AAUA,SAAgB,eAAe,SAAkB;CAC/C,MAAM,EAAE,OAAO,SAAS,QAAQ,UAAU;CAC1C,MAAM,UAAU,WAAW,KAAK;CAEhC,SAAS,gBAAgB;EACvB,QAAQ,QAAQ;CAClB;CAEA,SAAS,eAAe,GAAe;EAErC,IAAI,CADS,EAAE,cACL,SAAS,EAAE,aAA4B,GAC/C,QAAQ,QAAQ;CAEpB;CAEA,SAAS,UAAU,GAAkB;EACnC,EAAE,eAAe;EACjB,QAAQ;CACV;CAEA,SAAS,QAAQ,GAAkB;EACjC,IAAI,CAAC,MAAM,aAAa;EACxB,IAAI,MAAM,aAAa,MAAM,mBAAmB,UAAU;EAC1D,EAAE,eAAe;EACjB,OAAO;CACT;;;;;;CAOA,SAAS,cAAc,GAAkB;EACvC,IAAI,CAAC,QAAQ,OAAO;EACpB,IAAI,MAAM,YAAY,EAAE,QAAQ,UAAU;EAE1C,IAAI,EAAE,QAAQ,UAAU,OAAO,UAAU,CAAC;EAG1C,IAAI,EADS,EAAE,WAAW,EAAE,UACjB;EAIX,IAFY,EAAE,IAAI,YAEZ,MAAM,KAAK,OAAO,QAAQ,CAAC;CACnC;CAEA,OAAO;EAAE;EAAS;EAAe;EAAgB;CAAc;AACjE"}

package/dist/components/cascade/cascade.vue.d.ts

@@ -2,13 +2,15 @@ import { CascadeProps } from "../../types/cascade.js";
 //#region src/components/cascade/cascade.vue.d.ts
 declare const __VLS_export: import("vue").DefineComponent<CascadeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
   "update:modelValue": (value?: string | string[] | undefined) => any;
-  clear: () => any;
   change: (...args: [value?: string | undefined, label?: string | undefined, item?: Record<string, any> | undefined] | [value: string[], label: string[], data: Record<string, any>[]]) => any;
+  clear: () => any;
 }, string, import("vue").PublicProps, Readonly<CascadeProps> & Readonly<{
   "onUpdate:modelValue"?: ((value?: string | string[] | undefined) => any) | undefined;
-  onClear?: (() => any) | undefined;
   onChange?: ((...args: [value?: string | undefined, label?: string | undefined, item?: Record<string, any> | undefined] | [value: string[], label: string[], data: Record<string, any>[]]) => any) | undefined;
+  onClear?: (() => any) | undefined;
 }>, {
+  readonly: boolean;
+  disabled: boolean;
   labelKey: string;
   valueKey: string;
   childrenKey: string;
@@ -16,8 +18,6 @@ declare const __VLS_export: import("vue").DefineComponent<CascadeProps, {}, {},
   placeholder: string;
   clearable: boolean;
   filterable: boolean;
-  disabled: boolean;
-  readonly: boolean;
   visibilityLimit: number;
   separator: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/components/checkbox/checkbox-button.vue.d.ts

@@ -17,9 +17,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
   "onUpdate:modelValue"?: ((checked: boolean) => any) | undefined;
   onChange?: ((checked: boolean) => any) | undefined;
 }>, {
-  type: import("@veltra/utils").ColorType;
-  disabled: boolean;
   readonly: boolean;
+  disabled: boolean;
+  type: import("@veltra/utils").ColorType;
   round: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/checkbox/checkbox.vue.d.ts

@@ -18,8 +18,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
   "onUpdate:modelValue"?: ((checked: boolean) => any) | undefined;
   onChange?: ((checked: boolean, e: MouseEvent) => any) | undefined;
 }>, {
-  disabled: boolean;
   readonly: boolean;
+  disabled: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/checkbox-group/checkbox-group.vue.d.ts

@@ -12,10 +12,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
   "onUpdate:modelValue"?: ((value: any[]) => any) | undefined;
 }>, {
+  readonly: boolean;
+  disabled: boolean;
   labelKey: string;
   valueKey: string;
-  disabled: boolean;
-  readonly: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 //#endregion

package/dist/components/code-editor/code-editor.vue.d.ts

@@ -10,8 +10,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
   "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
 }>, {
-  disabled: boolean;
   readonly: boolean;
+  disabled: boolean;
   dark: boolean;
   defaultLines: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/components/date-panel/date-panel.vue.d.ts

@@ -7,8 +7,8 @@ declare const __VLS_export: import("vue").DefineComponent<DatePanelProps, {}, {}
   "onSelect:range-date"?: ((rangeDate?: [import("@cat-kit/core").Dater, import("@cat-kit/core").Dater] | undefined) => any) | undefined;
   "onSelect:date"?: ((date: import("@cat-kit/core").Dater) => any) | undefined;
 }>, {
-  type: "date" | "month" | "year";
   size: import("@veltra/utils").ComponentSize;
+  type: "date" | "month" | "year";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 //#endregion

package/dist/components/date-picker/date-picker.vue.d.ts

@@ -5,11 +5,11 @@ declare const __VLS_export: import("vue").DefineComponent<DatePickerProps, {}, {
 }, string, import("vue").PublicProps, Readonly<DatePickerProps> & Readonly<{
   "onUpdate:modelValue"?: ((value?: string | number | Date | undefined) => any) | undefined;
 }>, {
+  readonly: boolean;
+  disabled: boolean;
   type: "date" | "month" | "year";
   placeholder: string;
   clearable: boolean;
-  disabled: boolean;
-  readonly: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 //#endregion

package/dist/components/date-range-picker/date-range-picker.vue.d.ts

@@ -5,11 +5,11 @@ declare const __VLS_export: import("vue").DefineComponent<DateRangePickerProps,
 }, string, import("vue").PublicProps, Readonly<DateRangePickerProps> & Readonly<{
   "onUpdate:modelValue"?: ((value?: [string, string] | undefined) => any) | undefined;
 }>, {
+  readonly: boolean;
+  disabled: boolean;
   type: "date" | "month" | "year";
   placeholder: [string, string];
   clearable: boolean;
-  disabled: boolean;
-  readonly: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 //#endregion

package/dist/components/empty/empty.vue.d.ts

@@ -1,8 +1,8 @@
 import { EmptyProps } from "../../types/empty.js";
 //#region src/components/empty/empty.vue.d.ts
 declare const __VLS_export: import("vue").DefineComponent<EmptyProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<EmptyProps> & Readonly<{}>, {
-  text: string;
   size: number;
+  text: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 //#endregion

package/dist/components/file-picker/file-picker.vue.d.ts

@@ -11,8 +11,8 @@ declare const __VLS_base: import("vue").DefineComponent<UploaderProps, {}, {}, {
 }, string, import("vue").PublicProps, Readonly<UploaderProps> & Readonly<{
   onPick?: ((files: File[]) => any) | undefined;
 }>, {
-  tag: string;
   multiple: boolean;
+  tag: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/form/form.js.map

@@ -1 +1 @@
-{"version":3,"file":"form.js","names":[],"sources":["../../../src/components/form/form.vue"],"sourcesContent":["<template>\n  <u-grid\n    tag=\"form\"\n    ref=\"grid\"\n    @submit.prevent\n    :cols=\"cols || breakpointCols\"\n    :class=\"[cls.b, bem.is('readonly', readonly)]\"\n  >\n    <template\n      v-for=\"{ node, isFormItem, formItemProps, field, modelValue } of getSlotsNodes()\"\n      :key=\"node.key\"\n    >\n      <u-form-item v-if=\"!isFormItem && field\" v-bind=\"formItemProps\">\n        <component\n          :is=\"node\"\n          :model-value=\"modelValue ?? o(model ?? {}).get(field)\"\n          @update:model-value=\"handleUpdateValue(field, $event)\"\n        />\n      </u-form-item>\n\n      <component v-else :is=\"node\" />\n    </template>\n  </u-grid>\n</template>\n\n<script lang=\"tsx\" setup>\nimport { o } from '@cat-kit/core'\nimport { bem } from '@veltra/utils'\nimport { provideFormContext } from '@veltra/utils'\nimport { nextTick, shallowRef, toRef, useTemplateRef } from 'vue'\n\nimport type { BreakCols, GridExposed, FormProps, _FormExposed } from '../../types'\nimport { UFormItem } from '../form-item'\nimport { UGrid } from '../grid'\nimport { useFormFields } from './use-form-fields'\nimport { useNodeInterceptor } from './use-node-interceptor'\n\ndefineOptions({ name: 'Form' })\n\nconst props = defineProps<FormProps>()\n\ndefineSlots<{ default(props?: { data: Record<string, any> | undefined }): any }>()\n\nconst cls = bem('form')\nconst formItemCls = bem('form-item')\nconst gridRef = useTemplateRef('grid')\n\nconst breakpointCols: BreakCols = { xs: 1, md: 2, lg: 3, xl: 4, default: 4 }\n\nconst {\n  validate: runValidate,\n  clearValidate,\n  reset,\n  registerField,\n  unregisterField,\n  shouldValidate\n} = useFormFields({ props })\n\nasync function validate(keys?: string[]) {\n  const valid = await runValidate(keys)\n  if (!valid) {\n    await nextTick()\n\n    gridRef.value?.el\n      ?.querySelector(`.${formItemCls.e('error-text')}`)\n      ?.scrollIntoView({ block: 'center' })\n  }\n  return valid\n}\n\nprovideFormContext({\n  formProps: props,\n  registerField,\n  unregisterField,\n  validateFields: validate,\n  shouldValidate\n})\n\nconst { getSlotsNodes } = useNodeInterceptor()\n\nfunction handleUpdateValue(field: string, value: any) {\n  if (!props.model) return\n  o(props.model).set(field, value)\n}\n\ndefineExpose<_FormExposed>({ el: toRef(() => gridRef.value?.el), validate, clearValidate, reset })\n</script>\n"],"mappings":""}
+{"version":3,"file":"form.js","names":[],"sources":["../../../src/components/form/form.vue"],"sourcesContent":["<template>\n  <u-grid\n    tag=\"form\"\n    ref=\"grid\"\n    @submit.prevent\n    :cols=\"cols || breakpointCols\"\n    :class=\"[cls.b, bem.is('readonly', readonly)]\"\n  >\n    <template\n      v-for=\"{ node, isFormItem, formItemProps, field, modelValue } of getSlotsNodes()\"\n      :key=\"node.key\"\n    >\n      <u-form-item v-if=\"!isFormItem && field\" v-bind=\"formItemProps\">\n        <component\n          :is=\"node\"\n          :model-value=\"modelValue ?? o(model ?? {}).get(field)\"\n          @update:model-value=\"handleUpdateValue(field, $event)\"\n        />\n      </u-form-item>\n\n      <component v-else :is=\"node\" />\n    </template>\n  </u-grid>\n</template>\n\n<script lang=\"tsx\" setup>\nimport { o } from '@cat-kit/core'\nimport { bem } from '@veltra/utils'\nimport { provideFormContext } from '@veltra/utils'\nimport { nextTick, toRef, useTemplateRef } from 'vue'\n\nimport type { BreakCols, FormProps, _FormExposed, FormEmits } from '../../types'\nimport { UFormItem } from '../form-item'\nimport { UGrid } from '../grid'\nimport { useFormFields } from './use-form-fields'\nimport { useNodeInterceptor } from './use-node-interceptor'\n\ndefineOptions({ name: 'Form' })\n\nconst props = defineProps<FormProps>()\n\nconst emit = defineEmits<FormEmits>()\n\ndefineSlots<{ default(props?: { data: Record<string, any> | undefined }): any }>()\n\nconst cls = bem('form')\nconst formItemCls = bem('form-item')\nconst gridRef = useTemplateRef('grid')\n\nconst breakpointCols: BreakCols = { xs: 1, md: 2, lg: 3, xl: 4, default: 4 }\n\nconst {\n  validate: runValidate,\n  clearValidate,\n  reset,\n  registerField,\n  unregisterField,\n  shouldValidate\n} = useFormFields({ props })\n\nasync function validate(keys?: string[]) {\n  const valid = await runValidate(keys)\n  if (!valid) {\n    await nextTick()\n\n    gridRef.value?.el\n      ?.querySelector(`.${formItemCls.e('error-text')}`)\n      ?.scrollIntoView({ block: 'center' })\n  }\n  return valid\n}\n\nfunction handleFieldChange(field: string, value: any) {\n  emit('field:change', field, value)\n}\n\nprovideFormContext({\n  formProps: props,\n  registerField,\n  unregisterField,\n  validateFields: validate,\n  shouldValidate,\n  handleFieldChange\n})\n\nconst { getSlotsNodes } = useNodeInterceptor()\n\nfunction handleUpdateValue(field: string, value: any) {\n  if (!props.model) return\n  o(props.model).set(field, value)\n}\n\ndefineExpose<_FormExposed>({ el: toRef(() => gridRef.value?.el), validate, clearValidate, reset })\n</script>\n"],"mappings":""}

package/dist/components/form/form.vue.d.ts

@@ -5,7 +5,11 @@ type __VLS_Slots = {
     data: Record<string, any> | undefined;
   }): any;
 };
-declare const __VLS_base: import("vue").DefineComponent<FormProps, _FormExposed, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<FormProps, _FormExposed, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+  "field:change": (field: string, value: any) => any;
+}, string, import("vue").PublicProps, Readonly<FormProps> & Readonly<{
+  "onField:change"?: ((field: string, value: any) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 type __VLS_WithSlots<T, S> = T & {

package/dist/components/form/form.vue_vue_type_script_setup_true_lang.js

@@ -18,8 +18,10 @@ var form_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 		disabled: { type: Boolean },
 		size: {}
 	},
-	setup(__props, { expose: __expose }) {
+	emits: ["field:change"],
+	setup(__props, { expose: __expose, emit: __emit }) {
 		const props = __props;
+		const emit = __emit;
 		const cls = bem("form");
 		const formItemCls = bem("form-item");
 		const gridRef = useTemplateRef("grid");
@@ -39,12 +41,16 @@ var form_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 			}
 			return valid;
 		}
+		function handleFieldChange(field, value) {
+			emit("field:change", field, value);
+		}
 		provideFormContext({
 			formProps: props,
 			registerField,
 			unregisterField,
 			validateFields: validate,
-			shouldValidate
+			shouldValidate,
+			handleFieldChange
 		});
 		const { getSlotsNodes } = useNodeInterceptor();
 		function handleUpdateValue(field, value) {

package/dist/components/form/form.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"form.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/form/form.vue"],"sourcesContent":["<template>\n  <u-grid\n    tag=\"form\"\n    ref=\"grid\"\n    @submit.prevent\n    :cols=\"cols || breakpointCols\"\n    :class=\"[cls.b, bem.is('readonly', readonly)]\"\n  >\n    <template\n      v-for=\"{ node, isFormItem, formItemProps, field, modelValue } of getSlotsNodes()\"\n      :key=\"node.key\"\n    >\n      <u-form-item v-if=\"!isFormItem && field\" v-bind=\"formItemProps\">\n        <component\n          :is=\"node\"\n          :model-value=\"modelValue ?? o(model ?? {}).get(field)\"\n          @update:model-value=\"handleUpdateValue(field, $event)\"\n        />\n      </u-form-item>\n\n      <component v-else :is=\"node\" />\n    </template>\n  </u-grid>\n</template>\n\n<script lang=\"tsx\" setup>\nimport { o } from '@cat-kit/core'\nimport { bem } from '@veltra/utils'\nimport { provideFormContext } from '@veltra/utils'\nimport { nextTick, shallowRef, toRef, useTemplateRef } from 'vue'\n\nimport type { BreakCols, GridExposed, FormProps, _FormExposed } from '../../types'\nimport { UFormItem } from '../form-item'\nimport { UGrid } from '../grid'\nimport { useFormFields } from './use-form-fields'\nimport { useNodeInterceptor } from './use-node-interceptor'\n\ndefineOptions({ name: 'Form' })\n\nconst props = defineProps<FormProps>()\n\ndefineSlots<{ default(props?: { data: Record<string, any> | undefined }): any }>()\n\nconst cls = bem('form')\nconst formItemCls = bem('form-item')\nconst gridRef = useTemplateRef('grid')\n\nconst breakpointCols: BreakCols = { xs: 1, md: 2, lg: 3, xl: 4, default: 4 }\n\nconst {\n  validate: runValidate,\n  clearValidate,\n  reset,\n  registerField,\n  unregisterField,\n  shouldValidate\n} = useFormFields({ props })\n\nasync function validate(keys?: string[]) {\n  const valid = await runValidate(keys)\n  if (!valid) {\n    await nextTick()\n\n    gridRef.value?.el\n      ?.querySelector(`.${formItemCls.e('error-text')}`)\n      ?.scrollIntoView({ block: 'center' })\n  }\n  return valid\n}\n\nprovideFormContext({\n  formProps: props,\n  registerField,\n  unregisterField,\n  validateFields: validate,\n  shouldValidate\n})\n\nconst { getSlotsNodes } = useNodeInterceptor()\n\nfunction handleUpdateValue(field: string, value: any) {\n  if (!props.model) return\n  o(props.model).set(field, value)\n}\n\ndefineExpose<_FormExposed>({ el: toRef(() => gridRef.value?.el), validate, clearValidate, reset })\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;EAuCA,MAAM,QAAQ;EAId,MAAM,MAAM,IAAI,MAAM;EACtB,MAAM,cAAc,IAAI,WAAW;EACnC,MAAM,UAAU,eAAe,MAAM;EAErC,MAAM,iBAA4B;GAAE,IAAI;GAAG,IAAI;GAAG,IAAI;GAAG,IAAI;GAAG,SAAS;EAAE;EAE3E,MAAM,EACJ,UAAU,aACV,eACA,OACA,eACA,iBACA,mBACE,cAAc,EAAE,MAAM,CAAC;EAE3B,eAAe,SAAS,MAAiB;GACvC,MAAM,QAAQ,MAAM,YAAY,IAAI;GACpC,IAAI,CAAC,OAAO;IACV,MAAM,SAAS;IAEf,QAAQ,OAAO,IACX,cAAc,IAAI,YAAY,EAAE,YAAY,GAAG,GAC/C,eAAe,EAAE,OAAO,SAAS,CAAC;GACxC;GACA,OAAO;EACT;EAEA,mBAAmB;GACjB,WAAW;GACX;GACA;GACA,gBAAgB;GAChB;EACF,CAAC;EAED,MAAM,EAAE,kBAAkB,mBAAmB;EAE7C,SAAS,kBAAkB,OAAe,OAAY;GACpD,IAAI,CAAC,MAAM,OAAO;GAClB,EAAE,MAAM,KAAK,EAAE,IAAI,OAAO,KAAK;EACjC;EAEA,SAA2B;GAAE,IAAI,YAAY,QAAQ,OAAO,EAAE;GAAG;GAAU;GAAe;EAAM,CAAC;;uBApF/F,YAqBS,MAAA,SAAA,GAAA;IApBP,KAAI;IACJ,KAAI;IACH,UAAM,OAAA,OAAA,OAAA,KAAA,oBAAP,CAAA,GAAe,CAAA,SAAA,CAAA;IACd,MAAM,QAAA,QAAQ;IACd,OAAK,eAAA,CAAG,MAAA,GAAA,EAAI,GAAG,MAAA,GAAA,EAAI,GAAE,YAAa,QAAA,QAAQ,CAAA,CAAA;;2BAGwC,EAAA,UAAA,IAAA,GADnF,mBAaW,UAAA,MAAA,WAZwD,MAAA,aAAA,EAAa,IAAA,EAArE,MAAM,YAAY,eAAe,OAAO,iBAAU;6DACrD,KAAK,IAAA,GAAA,CAAA,CAES,cAAc,SAAA,UAAA,GAAlC,YAMc,MAAA,iBAAA,GANd,WAMc;;;QANmC,aAAa,GAAA;6BAK1D,EAAA,UAAA,GAJF,YAIE,wBAHK,IAAI,GAAA;OACR,eAAa,cAAc,MAAA,CAAA,EAAE,QAAA,SAAK,CAAA,CAAA,EAAQ,IAAI,KAAK;OACnD,wBAAkB,WAAE,kBAAkB,OAAO,MAAM;;;+BAIxD,YAA+B,wBAAR,IAAI,GAAA,EAAA,KAAA,EAAA,CAAA,EAAA,GAAA,EAAA"}
+{"version":3,"file":"form.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/form/form.vue"],"sourcesContent":["<template>\n  <u-grid\n    tag=\"form\"\n    ref=\"grid\"\n    @submit.prevent\n    :cols=\"cols || breakpointCols\"\n    :class=\"[cls.b, bem.is('readonly', readonly)]\"\n  >\n    <template\n      v-for=\"{ node, isFormItem, formItemProps, field, modelValue } of getSlotsNodes()\"\n      :key=\"node.key\"\n    >\n      <u-form-item v-if=\"!isFormItem && field\" v-bind=\"formItemProps\">\n        <component\n          :is=\"node\"\n          :model-value=\"modelValue ?? o(model ?? {}).get(field)\"\n          @update:model-value=\"handleUpdateValue(field, $event)\"\n        />\n      </u-form-item>\n\n      <component v-else :is=\"node\" />\n    </template>\n  </u-grid>\n</template>\n\n<script lang=\"tsx\" setup>\nimport { o } from '@cat-kit/core'\nimport { bem } from '@veltra/utils'\nimport { provideFormContext } from '@veltra/utils'\nimport { nextTick, toRef, useTemplateRef } from 'vue'\n\nimport type { BreakCols, FormProps, _FormExposed, FormEmits } from '../../types'\nimport { UFormItem } from '../form-item'\nimport { UGrid } from '../grid'\nimport { useFormFields } from './use-form-fields'\nimport { useNodeInterceptor } from './use-node-interceptor'\n\ndefineOptions({ name: 'Form' })\n\nconst props = defineProps<FormProps>()\n\nconst emit = defineEmits<FormEmits>()\n\ndefineSlots<{ default(props?: { data: Record<string, any> | undefined }): any }>()\n\nconst cls = bem('form')\nconst formItemCls = bem('form-item')\nconst gridRef = useTemplateRef('grid')\n\nconst breakpointCols: BreakCols = { xs: 1, md: 2, lg: 3, xl: 4, default: 4 }\n\nconst {\n  validate: runValidate,\n  clearValidate,\n  reset,\n  registerField,\n  unregisterField,\n  shouldValidate\n} = useFormFields({ props })\n\nasync function validate(keys?: string[]) {\n  const valid = await runValidate(keys)\n  if (!valid) {\n    await nextTick()\n\n    gridRef.value?.el\n      ?.querySelector(`.${formItemCls.e('error-text')}`)\n      ?.scrollIntoView({ block: 'center' })\n  }\n  return valid\n}\n\nfunction handleFieldChange(field: string, value: any) {\n  emit('field:change', field, value)\n}\n\nprovideFormContext({\n  formProps: props,\n  registerField,\n  unregisterField,\n  validateFields: validate,\n  shouldValidate,\n  handleFieldChange\n})\n\nconst { getSlotsNodes } = useNodeInterceptor()\n\nfunction handleUpdateValue(field: string, value: any) {\n  if (!props.model) return\n  o(props.model).set(field, value)\n}\n\ndefineExpose<_FormExposed>({ el: toRef(() => gridRef.value?.el), validate, clearValidate, reset })\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;EAuCA,MAAM,QAAQ;EAEd,MAAM,OAAO;EAIb,MAAM,MAAM,IAAI,MAAM;EACtB,MAAM,cAAc,IAAI,WAAW;EACnC,MAAM,UAAU,eAAe,MAAM;EAErC,MAAM,iBAA4B;GAAE,IAAI;GAAG,IAAI;GAAG,IAAI;GAAG,IAAI;GAAG,SAAS;EAAE;EAE3E,MAAM,EACJ,UAAU,aACV,eACA,OACA,eACA,iBACA,mBACE,cAAc,EAAE,MAAM,CAAC;EAE3B,eAAe,SAAS,MAAiB;GACvC,MAAM,QAAQ,MAAM,YAAY,IAAI;GACpC,IAAI,CAAC,OAAO;IACV,MAAM,SAAS;IAEf,QAAQ,OAAO,IACX,cAAc,IAAI,YAAY,EAAE,YAAY,GAAG,GAC/C,eAAe,EAAE,OAAO,SAAS,CAAC;GACxC;GACA,OAAO;EACT;EAEA,SAAS,kBAAkB,OAAe,OAAY;GACpD,KAAK,gBAAgB,OAAO,KAAK;EACnC;EAEA,mBAAmB;GACjB,WAAW;GACX;GACA;GACA,gBAAgB;GAChB;GACA;EACF,CAAC;EAED,MAAM,EAAE,kBAAkB,mBAAmB;EAE7C,SAAS,kBAAkB,OAAe,OAAY;GACpD,IAAI,CAAC,MAAM,OAAO;GAClB,EAAE,MAAM,KAAK,EAAE,IAAI,OAAO,KAAK;EACjC;EAEA,SAA2B;GAAE,IAAI,YAAY,QAAQ,OAAO,EAAE;GAAG;GAAU;GAAe;EAAM,CAAC;;uBA3F/F,YAqBS,MAAA,SAAA,GAAA;IApBP,KAAI;IACJ,KAAI;IACH,UAAM,OAAA,OAAA,OAAA,KAAA,oBAAP,CAAA,GAAe,CAAA,SAAA,CAAA;IACd,MAAM,QAAA,QAAQ;IACd,OAAK,eAAA,CAAG,MAAA,GAAA,EAAI,GAAG,MAAA,GAAA,EAAI,GAAE,YAAa,QAAA,QAAQ,CAAA,CAAA;;2BAGwC,EAAA,UAAA,IAAA,GADnF,mBAaW,UAAA,MAAA,WAZwD,MAAA,aAAA,EAAa,IAAA,EAArE,MAAM,YAAY,eAAe,OAAO,iBAAU;6DACrD,KAAK,IAAA,GAAA,CAAA,CAES,cAAc,SAAA,UAAA,GAAlC,YAMc,MAAA,iBAAA,GANd,WAMc;;;QANmC,aAAa,GAAA;6BAK1D,EAAA,UAAA,GAJF,YAIE,wBAHK,IAAI,GAAA;OACR,eAAa,cAAc,MAAA,CAAA,EAAE,QAAA,SAAK,CAAA,CAAA,EAAQ,IAAI,KAAK;OACnD,wBAAkB,WAAE,kBAAkB,OAAO,MAAM;;;+BAIxD,YAA+B,wBAAR,IAAI,GAAA,EAAA,KAAA,EAAA,CAAA,EAAA,GAAA,EAAA"}

package/dist/components/form-item/form-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-item.js","names":[],"sources":["../../../src/components/form-item/form-item.vue"],"sourcesContent":["<template>\n  <u-grid-item :span=\"span\" :class=\"className\">\n    <label\n      v-if=\"props.label || $slots.label\"\n      :class=\"[cls.e('label'), bem.is('required', !!rules?.required)]\"\n      :style=\"labelStyles\"\n    >\n      <u-tip v-if=\"tips\" :content=\"tips\" :class=\"cls.e('tips')\">\n        <span :class=\"cls.e('tip-label')\">\n          <slot name=\"label\">{{ label }}:</slot>\n        </span>\n      </u-tip>\n      <template v-else>\n        <slot name=\"label\">{{ label }}:</slot>\n      </template>\n    </label>\n\n    <section :class=\"cls.e('wrapper')\">\n      <div :class=\"cls.e('content')\">\n        <slot></slot>\n      </div>\n\n      <!-- 只有表单控件处于非只读状态时，才显示错误提示 -->\n      <section :class=\"cls.e('error')\" v-if=\"!readonly && !formProps?.noTips\">\n        <transition name=\"form-item-tips\" mode=\"out-in\">\n          <span :class=\"cls.e('error-text')\" v-if=\"!!errorTip\">\n            {{ errorTip }}\n          </span>\n        </transition>\n      </section>\n    </section>\n  </u-grid-item>\n</template>\n\n<script lang=\"tsx\" setup>\nimport { o } from '@cat-kit/core'\nimport { useConfig, useFallbackProps } from '@veltra/compositions'\nimport { bem, withUnit } from '@veltra/utils'\nimport { injectFormContext } from '@veltra/utils'\nimport { type CSSProperties, computed, onBeforeUnmount, shallowRef, watch } from 'vue'\n\nimport type { FormItemProps, ComponentSize } from '../../types'\nimport { UGridItem } from '../grid'\nimport { UTip } from '../tip'\nimport { formItemCls as cls, defineField } from './helper'\nimport { validateField } from './validate'\n\ndefineOptions({ name: 'FormItem' })\n\nconst props = withDefaults(defineProps<FormItemProps>(), { readonly: undefined })\n\ndefineSlots<{\n  /** 标签插槽 */\n  label?: () => any\n  default?: () => any\n}>()\n\n/** 表单组件上下文 */\nconst { formProps, registerField, unregisterField, shouldValidate } = injectFormContext()\n\nconst { config } = useConfig()\n\nconst { size, readonly } = useFallbackProps([formProps ?? {}, props], {\n  size: 'default' as ComponentSize,\n  readonly: false\n})\n\nconst errorTip = shallowRef<string>()\n/** 递增序号，丢弃过期的异步校验结果 */\nlet validateSeq = 0\n/** 最近一次 validate 的 Promise，供过期调用等待最新结果 */\nlet latestValidatePromise: Promise<boolean> = Promise.resolve(true)\n\nconst className = computed(() => {\n  return [cls.b, cls.m(size.value), bem.is('error', !!errorTip.value)].join(' ')\n})\n\n/** label样式 */\nconst labelStyles = computed<CSSProperties>(() => {\n  return {\n    width: withUnit(props.labelWidth ?? formProps?.labelWidth ?? config.form.labelWidth, 'px')\n  }\n})\n\nconst fieldItem = defineField({\n  clearValidate() {\n    errorTip.value = ''\n  },\n  async validate() {\n    if (!props.field || !formProps?.model || !props.rules || !shouldValidate?.()) return true\n\n    const seq = ++validateSeq\n\n    latestValidatePromise = validateField(formProps.model!, props.field!, props.rules!).then(\n      (tip) => {\n        if (seq !== validateSeq) return latestValidatePromise\n\n        errorTip.value = tip\n        return !errorTip.value\n      }\n    )\n    return latestValidatePromise\n  }\n})\n\nwatch(\n  () => props.field,\n  (field, oldField) => {\n    if (oldField) {\n      unregisterField?.(oldField)\n    }\n    if (field) {\n      registerField?.(field, fieldItem)\n    }\n  },\n  { immediate: true }\n)\n\nlet stopWatchFieldValue: (() => void) | undefined\n\nwatch(\n  [() => formProps?.model, () => props.field],\n  ([model, field]) => {\n    stopWatchFieldValue?.()\n\n    if (!field || !model) return\n\n    stopWatchFieldValue = watch(\n      () => o(model).get(field),\n      () => {\n        fieldItem.validate()\n      }\n    )\n  },\n  { immediate: true }\n)\n\nonBeforeUnmount(() => {\n  props.field && unregisterField?.(props.field)\n})\n</script>\n"],"mappings":""}
+{"version":3,"file":"form-item.js","names":[],"sources":["../../../src/components/form-item/form-item.vue"],"sourcesContent":["<template>\n  <u-grid-item :span=\"span\" :class=\"className\">\n    <label\n      v-if=\"props.label || $slots.label\"\n      :class=\"[cls.e('label'), bem.is('required', !!rules?.required)]\"\n      :style=\"labelStyles\"\n    >\n      <u-tip v-if=\"tips\" :content=\"tips\" :class=\"cls.e('tips')\">\n        <span :class=\"cls.e('tip-label')\">\n          <slot name=\"label\">{{ label }}:</slot>\n        </span>\n      </u-tip>\n      <template v-else>\n        <slot name=\"label\">{{ label }}:</slot>\n      </template>\n    </label>\n\n    <section :class=\"cls.e('wrapper')\">\n      <div :class=\"cls.e('content')\">\n        <slot></slot>\n      </div>\n\n      <!-- 只有表单控件处于非只读状态时，才显示错误提示 -->\n      <section :class=\"cls.e('error')\" v-if=\"!readonly && !formProps?.noTips\">\n        <transition name=\"form-item-tips\" mode=\"out-in\">\n          <span :class=\"cls.e('error-text')\" v-if=\"!!errorTip\">\n            {{ errorTip }}\n          </span>\n        </transition>\n      </section>\n    </section>\n  </u-grid-item>\n</template>\n\n<script lang=\"tsx\" setup>\nimport { o } from '@cat-kit/core'\nimport { useConfig, useFallbackProps } from '@veltra/compositions'\nimport { bem, withUnit } from '@veltra/utils'\nimport { injectFormContext } from '@veltra/utils'\nimport { type CSSProperties, computed, onBeforeUnmount, shallowRef, watch } from 'vue'\n\nimport type { FormItemProps, ComponentSize } from '../../types'\nimport { UGridItem } from '../grid'\nimport { UTip } from '../tip'\nimport { formItemCls as cls, defineField } from './helper'\nimport { validateField } from './validate'\n\ndefineOptions({ name: 'FormItem' })\n\nconst props = withDefaults(defineProps<FormItemProps>(), { readonly: undefined })\n\ndefineSlots<{\n  /** 标签插槽 */\n  label?: () => any\n  default?: () => any\n}>()\n\n/** 表单组件上下文 */\nconst { formProps, registerField, unregisterField, shouldValidate, handleFieldChange } =\n  injectFormContext()\n\nconst { config } = useConfig()\n\nconst { size, readonly } = useFallbackProps([formProps ?? {}, props], {\n  size: 'default' as ComponentSize,\n  readonly: false\n})\n\nconst errorTip = shallowRef<string>()\n/** 递增序号，丢弃过期的异步校验结果 */\nlet validateSeq = 0\n/** 最近一次 validate 的 Promise，供过期调用等待最新结果 */\nlet latestValidatePromise: Promise<boolean> = Promise.resolve(true)\n\nconst className = computed(() => {\n  return [cls.b, cls.m(size.value), bem.is('error', !!errorTip.value)].join(' ')\n})\n\n/** label样式 */\nconst labelStyles = computed<CSSProperties>(() => {\n  return {\n    width: withUnit(props.labelWidth ?? formProps?.labelWidth ?? config.form.labelWidth, 'px')\n  }\n})\n\nconst fieldItem = defineField({\n  clearValidate() {\n    errorTip.value = ''\n  },\n  async validate() {\n    if (!props.field || !formProps?.model || !props.rules || !shouldValidate?.()) return true\n\n    const seq = ++validateSeq\n\n    latestValidatePromise = validateField(formProps.model!, props.field!, props.rules!).then(\n      (tip) => {\n        if (seq !== validateSeq) return latestValidatePromise\n\n        errorTip.value = tip\n        return !errorTip.value\n      }\n    )\n    return latestValidatePromise\n  }\n})\n\nwatch(\n  () => props.field,\n  (field, oldField) => {\n    if (oldField) {\n      unregisterField?.(oldField)\n    }\n    if (field) {\n      registerField?.(field, fieldItem)\n    }\n  },\n  { immediate: true }\n)\n\nlet stopWatchFieldValue: (() => void) | undefined\n\nwatch(\n  [() => formProps?.model, () => props.field],\n  ([model, field]) => {\n    stopWatchFieldValue?.()\n\n    if (!field || !model) return\n\n    stopWatchFieldValue = watch(\n      () => o(model).get(field),\n      (value) => {\n        handleFieldChange?.(field, value)\n        fieldItem.validate()\n      }\n    )\n  },\n  { immediate: true }\n)\n\nonBeforeUnmount(() => {\n  props.field && unregisterField?.(props.field)\n})\n</script>\n"],"mappings":""}

package/dist/components/form-item/form-item.vue_vue_type_script_setup_true_lang.js

@@ -27,7 +27,7 @@ var form_item_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 	setup(__props) {
 		const props = __props;
 		/** 表单组件上下文 */
-		const { formProps, registerField, unregisterField, shouldValidate } = injectFormContext();
+		const { formProps, registerField, unregisterField, shouldValidate, handleFieldChange } = injectFormContext();
 		const { config } = useConfig();
 		const { size, readonly } = useFallbackProps([formProps ?? {}, props], {
 			size: "default",
@@ -72,7 +72,8 @@ var form_item_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 		watch([() => formProps?.model, () => props.field], ([model, field]) => {
 			stopWatchFieldValue?.();
 			if (!field || !model) return;
-			stopWatchFieldValue = watch(() => o(model).get(field), () => {
+			stopWatchFieldValue = watch(() => o(model).get(field), (value) => {
+				handleFieldChange?.(field, value);
 				fieldItem.validate();
 			});
 		}, { immediate: true });