@veltra/desktop 1.2.8 → 1.2.10

package/src/components/batch-edit/use-handlers.ts

@@ -0,0 +1,226 @@
+import { last, o } from '@cat-kit/core'
+import { computed, nextTick, type ShallowRef } from 'vue'
+
+import type {
+  TableRow,
+  BatchEditEmits,
+  BatchEditProps,
+  BatchEditStates,
+  FormExposed
+} from '../../types'
+
+/** 按索引路径在原始数据树中定位节点（等价于历史 Forest.visit 路径访问） */
+function visitDataByIndexPath<T extends Record<string, unknown>>(
+  roots: T[],
+  indexPath: number[],
+  childrenKey: string
+): T | undefined {
+  if (!indexPath.length) return undefined
+  let currentList: T[] | undefined = roots
+  let node: T | undefined
+  for (let i = 0; i < indexPath.length; i++) {
+    const idx = indexPath[i]!
+    if (!currentList) return undefined
+    node = currentList[idx]
+    if (node === undefined) return undefined
+    if (i < indexPath.length - 1) {
+      const next = node[childrenKey]
+      currentList = Array.isArray(next) ? (next as T[]) : undefined
+    }
+  }
+  return node
+}
+
+interface Options {
+  props: BatchEditProps
+  emit: BatchEditEmits
+  state: BatchEditStates
+  formRef: ShallowRef<FormExposed | null>
+  resetState: () => void
+}
+
+export interface EditReturned {
+  handleSave: () => Promise<void>
+  handleClose: () => void
+  handleCreate: () => void
+  handleDelete: (row: TableRow) => Promise<void>
+  handleInsertToNext: (row: TableRow) => void
+  handleInsertToPrev: (row: TableRow) => void
+  handleInsertChild: (row: TableRow) => void
+}
+
+export function useHandlers(options: Options): EditReturned {
+  const { props, emit, state, resetState, formRef } = options
+
+  const childrenKey = computed(() => {
+    return typeof props.tree === 'string' ? props.tree : 'children'
+  })
+
+  function getInsertData(): Record<string, any> {
+    return o(props.model ?? {}).copy()
+  }
+
+  /**
+   * 插入数据
+   * @param item 数据
+   */
+  function insert(item: Record<string, any>) {
+    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: TableRow) {
+    resetState()
+    state.formActionType = 'create'
+    state.formVisible = true
+    state.depth = row.depth
+    state.indexPath = [...row.indexes]
+  }
+
+  function handleInsertToNext(row: TableRow) {
+    resetState()
+    state.formActionType = 'create'
+    state.formVisible = true
+    state.depth = row.depth
+    state.indexPath = [...row.indexes.slice(0, -1), row.index + 1]
+  }
+
+  function handleInsertChild(row: TableRow) {
+    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<Arg extends any[]>(fn: (...args: Arg) => Promise<void> | void) {
+    return async (...args: Arg) => {
+      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: TableRow) => {
+    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
+  }
+}

package/src/components/batch-edit/use-shortcut-key.ts

@@ -0,0 +1,58 @@
+import { shallowRef } from 'vue'
+
+import type { BatchEditProps, BatchEditStates } from '../../types'
+
+interface Options {
+  props: BatchEditProps
+  onSave: () => void
+  onClose: () => void
+  state: BatchEditStates
+}
+export function useShortcutKey(options: Options) {
+  const { props, onClose, onSave, state } = options
+  const focused = shallowRef(false)
+
+  function handleFocusIn() {
+    focused.value = true
+  }
+
+  function handleFocusOut(e: FocusEvent) {
+    const root = e.currentTarget as HTMLElement
+    if (!root.contains(e.relatedTarget as Node | null)) {
+      focused.value = false
+    }
+  }
+
+  function runEscape(e: KeyboardEvent) {
+    e.preventDefault()
+    onClose()
+  }
+
+  function runSave(e: KeyboardEvent) {
+    if (!state.formVisible) return
+    if (props.quickEdit && state.formActionType === 'update') return
+    e.preventDefault()
+    onSave()
+  }
+
+  /**
+   * 键盘快捷键（仅组件获焦时生效）：
+   * - Esc          关闭表单
+   * - ⌘/Ctrl + S   保存（快速编辑模式下编辑行时除外）
+   */
+  function handleKeydown(e: KeyboardEvent) {
+    if (!focused.value) return
+    if (props.readonly && e.key !== 'Escape') return
+
+    if (e.key === 'Escape') return runEscape(e)
+
+    const meta = e.metaKey || e.ctrlKey
+    if (!meta) return
+
+    const key = e.key.toLowerCase()
+
+    if (key === 's') return runSave(e)
+  }
+
+  return { focused, handleFocusIn, handleFocusOut, handleKeydown }
+}

package/src/components/form/form.vue

@@ -27,9 +27,9 @@
 import { o } from '@cat-kit/core'
 import { bem } from '@veltra/utils'
 import { provideFormContext } from '@veltra/utils'
-import { nextTick, shallowRef, toRef, useTemplateRef } from 'vue'
+import { nextTick, toRef, useTemplateRef } from 'vue'
 
-import type { BreakCols, GridExposed, FormProps, _FormExposed } from '../../types'
+import type { BreakCols, FormProps, _FormExposed, FormEmits } from '../../types'
 import { UFormItem } from '../form-item'
 import { UGrid } from '../grid'
 import { useFormFields } from './use-form-fields'
@@ -39,6 +39,8 @@ defineOptions({ name: 'Form' })
 
 const props = defineProps<FormProps>()
 
+const emit = defineEmits<FormEmits>()
+
 defineSlots<{ default(props?: { data: Record<string, any> | undefined }): any }>()
 
 const cls = bem('form')
@@ -68,12 +70,17 @@ async function validate(keys?: string[]) {
   return valid
 }
 
+function handleFieldChange(field: string, value: any) {
+  emit('field:change', field, value)
+}
+
 provideFormContext({
   formProps: props,
   registerField,
   unregisterField,
   validateFields: validate,
-  shouldValidate
+  shouldValidate,
+  handleFieldChange
 })
 
 const { getSlotsNodes } = useNodeInterceptor()

package/src/components/form-item/form-item.vue

@@ -56,7 +56,8 @@ defineSlots<{
 }>()
 
 /** 表单组件上下文 */
-const { formProps, registerField, unregisterField, shouldValidate } = injectFormContext()
+const { formProps, registerField, unregisterField, shouldValidate, handleFieldChange } =
+  injectFormContext()
 
 const { config } = useConfig()
 
@@ -127,7 +128,8 @@ watch(
 
     stopWatchFieldValue = watch(
       () => o(model).get(field),
-      () => {
+      (value) => {
+        handleFieldChange?.(field, value)
         fieldItem.validate()
       }
     )

package/src/types/batch-edit.ts

@@ -1,25 +1,32 @@
 import type { DeconstructValue } from '@veltra/utils'
 
 import type { ActionProps } from './action'
-import type { TableColumn, TableEmits, TableProps, TableRow } from './table'
+import type { TableColumn, TableColumnSlotsScope, TableEmits, TableProps, TableRow } from './table'
 
 /** 批量编辑列 */
-export interface BatchEditColumn extends TableColumn {
-  // /**
-  //  * 是否在列中显示
-  //  * @default true
-  //  */
-  // visible?: boolean
-  // /** 校验规则 */
-  // rules?: ValidateRule
-  // /** 默认值 */
-  // defaultValue?: any | (() => any)
-}
+export interface BatchEditColumn extends TableColumn {}
+
+export type BatchEditFeature = 'create' | 'update' | 'delete' | 'view' | 'createChild'
 
-export type BatchEditFeature = 'create' | 'update' | 'copy' | 'delete' | 'view' | 'createChild'
+export type BatchEditFormStatus = 'hidden'
 
-/** 批量编辑模式 */
-export type BatchEditMode = 'normal' | 'quick'
+/** 批量编辑状态 */
+export interface BatchEditStates {
+  /** 层级 */
+  depth: number
+  /** 表单可见性 */
+  formVisible: boolean
+  /** 表单操作类型 */
+  formActionType: 'create' | 'update' | 'view' | 'createChild'
+  /** 加载状态 */
+  loading: boolean
+  /** 当前编辑行 */
+  row?: TableRow
+  /** 当前编辑或者新增的父级行 */
+  parentRow?: TableRow
+  /** 行索引路径， */
+  indexPath: number[]
+}
 
 /** 批量编辑组件属性 */
 export interface BatchEditProps extends TableProps {
@@ -37,14 +44,13 @@ export interface BatchEditProps extends TableProps {
   /** 只读模式 */
   readonly?: boolean
   /**
-   * 编辑模式
-   * @default 'normal'
-   * @description `quick` 模式下编辑行时表单实时写回 `row.data`（经 `model` 中转），且不调用 `saveMethod`
+   * 开启快速编辑
+   * @description 开启后，编辑行时表单实时写回 `row.data`（经 `model` 中转），且不调用 `saveMethod`
    */
-  mode?: BatchEditMode
+  quickEdit?: boolean
   /**
    * 新增前的钩子
-   * @description 仅作用于 create 类操作。`normal` 模式在保存时调用；`quick` 模式在点击新增类按钮时立即调用。可直接修改传入的 draft 对象
+   * @description 仅作用于 create 类操作，在保存时调用。可直接修改传入的 draft 对象
    */
   beforeCreate?: (
     data: Record<string, any>,
@@ -56,14 +62,14 @@ export interface BatchEditProps extends TableProps {
   deleteMethod?: (data: Record<string, any>[]) => any
   /**
    * 保存方法
-   * @description 仅在 `normal` 模式下、保存时调用（create / update）
+   * @description 保存时调用。`quick` 模式下编辑行时实时写回，不调用此方法；新增时与 `normal` 模式一致
    * @returns 如果返回一个值，那么这个值会被插入，否则插入的为表单值
    */
   saveMethod?: (
     /** 表单数据 */
     data: Record<string, any>,
     /** 操作类型 */
-    actionType: 'create' | 'update',
+    actionType: BatchEditStates['formActionType'],
     /** 父级数据 */
     parentData?: Record<string, any>
   ) => any
@@ -109,6 +115,21 @@ export interface BatchEditEmits extends TableEmits {
   (e: 'update:data', value: Record<string, any>[]): void
 }
 
+export type BatchEditSlots = {
+  form?: (props: {
+    /** 当前编辑的层级 */
+    depth?: number
+    /** 当前编辑的行 */
+    row?: TableRow
+    /** 当前编辑的行索引 */
+    index?: number
+    /** 操作的目标行索引路径 */
+    indexes?: number[]
+  }) => any
+
+  header?: () => any
+} & Partial<{ [key: `column:${string}`]: (props: TableColumnSlotsScope) => any }>
+
 /** 批量编辑组件暴露的属性和方法(组件内部使用) */
 export interface _BatchEditExposed {}
 

package/src/types/form.ts

@@ -21,6 +21,10 @@ export interface FormProps extends ComponentProps {
   disabled?: boolean
 }
 
+export interface FormEmits {
+  (e: 'field:change', field: string, value: any): void
+}
+
 export interface _FormExposed {
   el: ShallowRef<HTMLElement | null | undefined>
   validate: (keys?: string[]) => Promise<boolean>

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

@@ -1,231 +0,0 @@
-import { computed, nextTick, shallowReactive, shallowRef, watch } from "vue";
-import { last, o, safeRun } from "@cat-kit/core";
-//#region src/components/batch-edit/use-edit.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 snapshotData(data) {
-	return safeRun(() => JSON.parse(JSON.stringify(data ?? {})), {});
-}
-function replaceModelData(model, data) {
-	for (const key of Object.keys(model)) delete model[key];
-	Object.assign(model, data);
-}
-function useEdit(options) {
-	const { props, emit, formRef } = options;
-	/** 组件状态 */
-	const state = shallowReactive({
-		depth: void 0,
-		visible: false,
-		type: "create",
-		loading: false
-	});
-	const insertIndexes = shallowRef([]);
-	function snapshotModelData() {
-		return snapshotData(props.model);
-	}
-	function setFormData(formData) {
-		if (!props.model) return;
-		replaceModelData(props.model, snapshotData(formData));
-	}
-	const isQuickMode = () => props.mode === "quick";
-	async function runBeforeCreate(data) {
-		await props.beforeCreate?.(data, state.parentRow?.data);
-	}
-	watch(() => state.row, (row) => {
-		if (row) {
-			state.type = "update";
-			state.visible = true;
-			setFormData(row.data);
-		} else state.visible = false;
-	}, { flush: "sync" });
-	/**
-	* quick + update：model 实时写回 row.data，让表格显示同步更新。
-	* normal 模式不写回，需等待保存。
-	*
-	* 监听源仅限 props.model（deep 遍历仅作用于 model，不触及 row 树）；
-	* mode/type/row 在回调中读取但不作为依赖，避免行切换等场景误触发。
-	*/
-	watch(() => props.model, (model) => {
-		const { row, type } = state;
-		if (props.mode !== "quick" || type !== "update" || !row || !model) return;
-		const data = row.data;
-		Object.keys(model).forEach((key) => {
-			const next = o(model).get(key);
-			if (o(data).get(key) !== next) o(data).set(key, next);
-		});
-	}, { deep: true });
-	const childrenKey = computed(() => {
-		return typeof props.tree === "string" ? props.tree : "children";
-	});
-	/**
-	* 插入数据
-	* @param item 数据
-	*/
-	function insert(item) {
-		const data = [...props.data ?? []];
-		const parent = visitDataByIndexPath(data ?? [], insertIndexes.value.slice(0, -1), childrenKey.value);
-		if (parent) {
-			const children = parent[childrenKey.value];
-			if (!children) parent[childrenKey.value] = [item];
-			else children.splice(last(insertIndexes.value), 0, item);
-		} else data.splice(last(insertIndexes.value), 0, item);
-		emit("update:data", data);
-		return item;
-	}
-	function getInsertData() {
-		return snapshotModelData();
-	}
-	async function runCreate(cb, initialData) {
-		state.parentRow = void 0;
-		if (state.row) state.row.isCurrent = false;
-		state.row = void 0;
-		state.type = "create";
-		cb();
-		await nextTick();
-		setFormData(initialData);
-		if (isQuickMode() && props.model) await runBeforeCreate(props.model);
-		state.visible = true;
-	}
-	/**
-	* 点击新增按钮
-	*/
-	async function handleCreate() {
-		const { data } = props;
-		await runCreate(() => {
-			state.depth = 1;
-			insertIndexes.value = [data?.length ?? 0];
-		});
-	}
-	async function handleInsertToPrev(row) {
-		await runCreate(() => {
-			state.depth = row.depth;
-			insertIndexes.value = [...row.indexes];
-		});
-	}
-	async function handleInsertToNext(row) {
-		await runCreate(() => {
-			state.depth = row.depth;
-			insertIndexes.value = [...row.indexes.slice(0, -1), row.index + 1];
-		});
-	}
-	async function handleInsertChild(row) {
-		await runCreate(() => {
-			state.parentRow = row;
-			state.depth = row.depth + 1;
-			row.expanded = true;
-			insertIndexes.value = [...row.indexes, row.children?.length ?? 0];
-		});
-	}
-	/** 编辑指定行（等同于点击行） */
-	function handleEdit(row) {
-		state.type = "update";
-		state.row = row;
-		state.depth = row.depth;
-	}
-	/** 复制指定行：在其下方以 create 模式打开表单，并预填副本数据 */
-	async function handleCopy(row) {
-		await runCreate(() => {
-			state.depth = row.depth;
-			insertIndexes.value = [...row.indexes.slice(0, -1), row.index + 1];
-		}, row.data);
-	}
-	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;
-		if (!model) return;
-		if (isQuickMode() && state.type === "update") return;
-		formRef.value?.clearValidate();
-		if (!await formRef.value?.validate()) return;
-		if (isQuickMode() && state.type === "create") {
-			insert(getInsertData());
-			return;
-		}
-		let item = getInsertData();
-		if (state.type === "create") {
-			await runBeforeCreate(item);
-			if (saveMethod) {
-				const result = await saveMethod(item, state.type, state.parentRow?.data);
-				if (result) item = result;
-			}
-			insert(item);
-			return;
-		}
-		if (saveMethod) {
-			const result = await saveMethod(item, state.type, 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) {
-			state.row = void 0;
-			state.depth = void 0;
-		}
-		emit("update:data", data);
-	});
-	function handleClose() {
-		state.visible = false;
-		if (state.row) state.row.isCurrent = false;
-		state.row = void 0;
-		state.parentRow = void 0;
-		state.depth = void 0;
-		insertIndexes.value = [];
-	}
-	return {
-		state,
-		insertIndexes,
-		handleDelete,
-		handleInsertChild,
-		handleInsertToNext,
-		handleInsertToPrev,
-		handleCreate,
-		handleEdit,
-		handleCopy,
-		handleClose,
-		handleSave
-	};
-}
-//#endregion
-export { useEdit };
-
-//# sourceMappingURL=use-edit.js.map