@veltra/desktop 1.7.9 → 1.7.11

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

@@ -15,7 +15,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 	__name: "batch-edit-form",
 	setup(__props, { expose: __expose }) {
 		const batchEditCtx = inject(BatchEditDIKey);
-		const { cls, props, state, handleClose, handleSave, staticFeatures, dynamicFeatures, syncing } = batchEditCtx;
+		const { cls, props, state, emit, handleClose, handleSave, staticFeatures, dynamicFeatures, syncing } = batchEditCtx;
 		const focused = toRef(batchEditCtx, "focused");
 		const formComponentRef = shallowRef();
 		__expose({
@@ -24,10 +24,13 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			clearValidate: () => formComponentRef.value?.clearValidate(),
 			reset: () => formComponentRef.value?.reset()
 		});
-		function handleFieldChange(field, value) {
+		function handleFieldUpdate(field, value) {
 			if (syncing.value) return;
 			if (state.row && props.quickEdit) o(state.row.data).set(field, value);
 		}
+		function handleFormFieldChange(field, ...args) {
+			emit("field:change", field, ...args);
+		}
 		const creatable = computed(() => {
 			if (state.formActionType !== "create") return false;
 			return staticFeatures.value.has("create") || dynamicFeatures.value.create?.(state.row);
@@ -86,7 +89,8 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 							model: unref(props).model,
 							readonly: unref(props).readonly,
 							"label-width": unref(props).labelWidth,
-							"onField:change": handleFieldChange
+							"onField:update": handleFieldUpdate,
+							"onField:change": handleFormFieldChange
 						}, {
 							default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({
 								row: unref(state).row,

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

@@ -1 +1 @@
-{"version":3,"file":"batch-edit-form.js","names":[],"sources":["../../../src/components/batch-edit/batch-edit-form.vue"],"sourcesContent":["<template>\n  <!-- 表单常驻挂载（快照只在挂载时对传入的 model 拍一次），仅用 v-show 控制显隐 -->\n  <aside :class=\"cls.e('form')\" v-if=\"!!props.model\" v-show=\"state.formVisible\">\n    <header :class=\"cls.e('form-header')\">\n      <span :class=\"[cls.e('form-icon'), bem.is(state.formActionType)]\">\n        <u-icon>\n          <component :is=\"headerInfo.icon\" />\n        </u-icon>\n      </span>\n      <div :class=\"cls.e('form-title')\">\n        <h3 :class=\"cls.e('form-title-text')\">{{ headerInfo.title }}</h3>\n      </div>\n      <u-button\n        :class=\"cls.e('form-close')\"\n        :icon=\"Close\"\n        text\n        circle\n        size=\"small\"\n        title=\"关闭\"\n        @click=\"handleClose\"\n      />\n    </header>\n\n    <u-scroll always :class=\"cls.e('form-body')\">\n      <transition name=\"fade\" appear mode=\"out-in\">\n        <u-form\n          ref=\"formComponentRef\"\n          :model=\"props.model\"\n          :readonly=\"props.readonly\"\n          :label-width=\"props.labelWidth\"\n          @field:change=\"handleFieldChange\"\n        >\n          <slot\n            v-bind=\"{\n              row: state.row,\n              parentRow: state.parentRow,\n              formActionType: state.formActionType,\n              depth: state.depth,\n              indexes: state.indexPath,\n              index: state.row?.index\n            }\"\n          />\n        </u-form>\n      </transition>\n    </u-scroll>\n\n    <footer :class=\"cls.e('form-footer')\">\n      <span :class=\"cls.e('form-hint')\">\n        <template v-if=\"props.readonly\"> 只读模式 </template>\n\n        <span :class=\"{ [bem.is('concealed')]: !focused }\">\n          <template v-if=\"!(state.formActionType === 'update' && props.quickEdit)\">\n            <u-kbd>Ctrl + S</u-kbd> 保存 ·\n          </template>\n          <u-kbd>Esc</u-kbd> 关闭\n        </span>\n      </span>\n\n      <div :class=\"cls.e('form-actions')\">\n        <u-button size=\"small\" text :loading=\"state.loading\" @click=\"handleClose\"> 取消 </u-button>\n        <u-button\n          v-if=\"showSaveBtn\"\n          type=\"primary\"\n          size=\"small\"\n          title=\"保存\"\n          :icon=\"Save\"\n          :loading=\"state.loading\"\n          @click=\"handleSave\"\n        />\n      </div>\n    </footer>\n  </aside>\n</template>\n\n<script lang=\"ts\" setup>\nimport { o } from '@cat-kit/core'\nimport { Close, Save } from '@veltra/icons/normal'\nimport { bem } from '@veltra/utils'\nimport { computed, inject, shallowRef, toRef } from 'vue'\n\nimport type { _FormExposed, FormExposed } from '../../types/form'\nimport { UButton } from '../button'\nimport { UForm } from '../form'\nimport { UIcon } from '../icon'\nimport { UKbd } from '../kbd'\nimport { UScroll } from '../scroll'\nimport { BatchEditDIKey } from './di'\nimport { FORM_ACTION_HEADER_MAP } from './form-action-header'\n\ndefineOptions({ name: 'UBatchEditForm' })\n\nconst batchEditCtx = inject(BatchEditDIKey)!\n\nconst { cls, props, state, handleClose, handleSave, staticFeatures, dynamicFeatures, syncing } =\n  batchEditCtx\n\nconst focused = toRef(batchEditCtx, 'focused')\n\nconst formComponentRef = shallowRef<FormExposed>()\n\ndefineExpose<_FormExposed>({\n  el: toRef(() => formComponentRef.value?.el),\n  validate: () => formComponentRef.value?.validate() ?? Promise.resolve(true),\n  clearValidate: () => formComponentRef.value?.clearValidate(),\n  reset: () => formComponentRef.value?.reset()\n})\n\nfunction handleFieldChange(field: string, value: any) {\n  // 编程方式重置/回显期间不写回行数据，避免默认值污染源数据\n  if (syncing.value) return\n\n  if (state.row && props.quickEdit) {\n    o(state.row.data).set(field, value)\n  }\n}\n\nconst creatable = computed(() => {\n  if (state.formActionType !== 'create') return false\n  return staticFeatures.value.has('create') || dynamicFeatures.value.create?.(state.row)\n})\n\nconst creatableChild = computed(() => {\n  if (state.formActionType !== 'createChild') return false\n  return (\n    staticFeatures.value.has('createChild') || dynamicFeatures.value.createChild?.(state.parentRow)\n  )\n})\n\nconst updatable = computed(() => {\n  if (state.formActionType !== 'update') return false\n  return staticFeatures.value.has('update') || dynamicFeatures.value.update?.(state.row)\n})\n\nconst showSaveBtn = computed(() => {\n  if (props.readonly) return false\n  if (props.quickEdit && state.formActionType === 'update') return false\n  return creatable.value || updatable.value || creatableChild.value\n})\n\nconst headerInfo = computed(() => FORM_ACTION_HEADER_MAP[state.formActionType])\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"batch-edit-form.js","names":[],"sources":["../../../src/components/batch-edit/batch-edit-form.vue"],"sourcesContent":["<template>\n  <!-- 表单常驻挂载（快照只在挂载时对传入的 model 拍一次），仅用 v-show 控制显隐 -->\n  <aside :class=\"cls.e('form')\" v-if=\"!!props.model\" v-show=\"state.formVisible\">\n    <header :class=\"cls.e('form-header')\">\n      <span :class=\"[cls.e('form-icon'), bem.is(state.formActionType)]\">\n        <u-icon>\n          <component :is=\"headerInfo.icon\" />\n        </u-icon>\n      </span>\n      <div :class=\"cls.e('form-title')\">\n        <h3 :class=\"cls.e('form-title-text')\">{{ headerInfo.title }}</h3>\n      </div>\n      <u-button\n        :class=\"cls.e('form-close')\"\n        :icon=\"Close\"\n        text\n        circle\n        size=\"small\"\n        title=\"关闭\"\n        @click=\"handleClose\"\n      />\n    </header>\n\n    <u-scroll always :class=\"cls.e('form-body')\">\n      <transition name=\"fade\" appear mode=\"out-in\">\n        <u-form\n          ref=\"formComponentRef\"\n          :model=\"props.model\"\n          :readonly=\"props.readonly\"\n          :label-width=\"props.labelWidth\"\n          @field:update=\"handleFieldUpdate\"\n          @field:change=\"handleFormFieldChange\"\n        >\n          <slot\n            v-bind=\"{\n              row: state.row,\n              parentRow: state.parentRow,\n              formActionType: state.formActionType,\n              depth: state.depth,\n              indexes: state.indexPath,\n              index: state.row?.index\n            }\"\n          />\n        </u-form>\n      </transition>\n    </u-scroll>\n\n    <footer :class=\"cls.e('form-footer')\">\n      <span :class=\"cls.e('form-hint')\">\n        <template v-if=\"props.readonly\"> 只读模式 </template>\n\n        <span :class=\"{ [bem.is('concealed')]: !focused }\">\n          <template v-if=\"!(state.formActionType === 'update' && props.quickEdit)\">\n            <u-kbd>Ctrl + S</u-kbd> 保存 ·\n          </template>\n          <u-kbd>Esc</u-kbd> 关闭\n        </span>\n      </span>\n\n      <div :class=\"cls.e('form-actions')\">\n        <u-button size=\"small\" text :loading=\"state.loading\" @click=\"handleClose\"> 取消 </u-button>\n        <u-button\n          v-if=\"showSaveBtn\"\n          type=\"primary\"\n          size=\"small\"\n          title=\"保存\"\n          :icon=\"Save\"\n          :loading=\"state.loading\"\n          @click=\"handleSave\"\n        />\n      </div>\n    </footer>\n  </aside>\n</template>\n\n<script lang=\"ts\" setup>\nimport { o } from '@cat-kit/core'\nimport { Close, Save } from '@veltra/icons/normal'\nimport { bem } from '@veltra/utils'\nimport { computed, inject, shallowRef, toRef } from 'vue'\n\nimport type { _FormExposed, FormExposed } from '../../types/form'\nimport { UButton } from '../button'\nimport { UForm } from '../form'\nimport { UIcon } from '../icon'\nimport { UKbd } from '../kbd'\nimport { UScroll } from '../scroll'\nimport { BatchEditDIKey } from './di'\nimport { FORM_ACTION_HEADER_MAP } from './form-action-header'\n\ndefineOptions({ name: 'UBatchEditForm' })\n\nconst batchEditCtx = inject(BatchEditDIKey)!\n\nconst {\n  cls,\n  props,\n  state,\n  emit,\n  handleClose,\n  handleSave,\n  staticFeatures,\n  dynamicFeatures,\n  syncing\n} = batchEditCtx\n\nconst focused = toRef(batchEditCtx, 'focused')\n\nconst formComponentRef = shallowRef<FormExposed>()\n\ndefineExpose<_FormExposed>({\n  el: toRef(() => formComponentRef.value?.el),\n  validate: () => formComponentRef.value?.validate() ?? Promise.resolve(true),\n  clearValidate: () => formComponentRef.value?.clearValidate(),\n  reset: () => formComponentRef.value?.reset()\n})\n\nfunction handleFieldUpdate(field: string, value: any) {\n  // 编程方式重置/回显期间不写回行数据，避免默认值污染源数据\n  if (syncing.value) return\n\n  if (state.row && props.quickEdit) {\n    o(state.row.data).set(field, value)\n  }\n}\n\nfunction handleFormFieldChange(field: string, ...args: any[]) {\n  emit('field:change', field, ...args)\n}\n\nconst creatable = computed(() => {\n  if (state.formActionType !== 'create') return false\n  return staticFeatures.value.has('create') || dynamicFeatures.value.create?.(state.row)\n})\n\nconst creatableChild = computed(() => {\n  if (state.formActionType !== 'createChild') return false\n  return (\n    staticFeatures.value.has('createChild') || dynamicFeatures.value.createChild?.(state.parentRow)\n  )\n})\n\nconst updatable = computed(() => {\n  if (state.formActionType !== 'update') return false\n  return staticFeatures.value.has('update') || dynamicFeatures.value.update?.(state.row)\n})\n\nconst showSaveBtn = computed(() => {\n  if (props.readonly) return false\n  if (props.quickEdit && state.formActionType === 'update') return false\n  return creatable.value || updatable.value || creatableChild.value\n})\n\nconst headerInfo = computed(() => FORM_ACTION_HEADER_MAP[state.formActionType])\n</script>\n"],"mappings":"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"}

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

@@ -46,6 +46,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		textEllipsis: { type: Boolean }
 	},
 	emits: [
+		"field:change",
 		"update:data",
 		"create",
 		"create-prev",

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

@@ -1 +1 @@
-{"version":3,"file":"batch-edit.js","names":[],"sources":["../../../src/components/batch-edit/batch-edit.vue"],"sourcesContent":["<template>\n  <u-layout\n    :class=\"cls.b\"\n    :cols=\"cols\"\n    rows=\"minmax(0, 1fr) \"\n    gap=\"8px\"\n    resizable\n    tabindex=\"-1\"\n    @focusin=\"handleFocusIn\"\n    @focusout=\"handleFocusOut\"\n    @keydown.capture=\"handleKeydown\"\n  >\n    <!-- 编辑列表 -->\n    <BatchEditList :slots=\"slots\" />\n\n    <!-- 编辑表单 -->\n    <BatchEditForm ref=\"form\" v-slot=\"scoped\">\n      <slot name=\"form\" v-bind=\"scoped\" />\n    </BatchEditForm>\n  </u-layout>\n</template>\n\n<script lang=\"ts\" setup>\nimport { bem } from '@veltra/utils'\nimport { computed, provide, useTemplateRef } from 'vue'\n\nimport type { BatchEditEmits, BatchEditProps, BatchEditSlots, FormExposed } from '../../types'\nimport { ULayout } from '../layout'\nimport BatchEditForm from './batch-edit-form.vue'\nimport BatchEditList from './batch-edit-list.vue'\nimport { BatchEditDIKey } from './di'\nimport { useEditState } from './use-edit-state'\nimport { useFeatures } from './use-features'\nimport { useHandlers } from './use-handlers'\nimport { useShortcutKey } from './use-shortcut-key'\n\ndefineOptions({ name: 'UBatchEdit' })\n\nconst props = withDefaults(defineProps<BatchEditProps>(), { cols: () => ['1fr', '420px'] })\n\nconst emit = defineEmits<BatchEditEmits>()\n\nconst slots = defineSlots<BatchEditSlots>()\n\nconst cls = bem('batch-edit')\n\nconst formRef = useTemplateRef<FormExposed>('form')\n\nconst { state, resetState, syncing } = useEditState({ props, formRef })\n\nconst { staticFeatures, dynamicFeatures } = useFeatures({ props })\n\nconst handlers = useHandlers({ props, emit, state, resetState, formRef })\n\n// 快捷键处理\nconst { handleFocusIn, handleFocusOut, handleKeydown, focused } = useShortcutKey({\n  props,\n  onSave: handlers.handleSave,\n  onClose: handlers.handleClose,\n  state\n})\n\nconst cols = computed(() => {\n  return state.formVisible ? props.cols : undefined\n})\n\nprovide(BatchEditDIKey, {\n  cls,\n  props,\n  emit,\n  state,\n  staticFeatures,\n  dynamicFeatures,\n  focused,\n  syncing,\n  ...handlers\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsCA,MAAM,QAAQ;EAEd,MAAM,OAAO;EAEb,MAAM,QAAQ,SAAA;EAEd,MAAM,MAAM,IAAI,YAAY;EAE5B,MAAM,UAAU,eAA4B,MAAM;EAElD,MAAM,EAAE,OAAO,YAAY,YAAY,aAAa;GAAE;GAAO;EAAQ,CAAC;EAEtE,MAAM,EAAE,gBAAgB,oBAAoB,YAAY,EAAE,MAAM,CAAC;EAEjE,MAAM,WAAW,YAAY;GAAE;GAAO;GAAM;GAAO;GAAY;EAAQ,CAAC;EAGxE,MAAM,EAAE,eAAe,gBAAgB,eAAe,YAAY,eAAe;GAC/E;GACA,QAAQ,SAAS;GACjB,SAAS,SAAS;GAClB;EACF,CAAC;EAED,MAAM,OAAO,eAAe;GAC1B,OAAO,MAAM,cAAc,MAAM,OAAO,KAAA;EAC1C,CAAC;EAED,QAAQ,gBAAgB;GACtB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA,GAAG;EACL,CAAC;;GA3EC,OAAA,UAAA,GAAA,YAkBW,MAAA,WAAA,GAAA;IAjBR,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,CAAC;IACZ,MAAM,KAAA;IACP,MAAK;IACL,KAAI;IACJ,WAAA;IACA,UAAS;IACR,WAAS,MAAA,aAAA;IACT,YAAU,MAAA,cAAA;IACO,kBAAA,MAAA,aAAA;;IAElB,SAAA,cAAa;KAAb,mBAAA,QAAA;KACA,YAAgC,aAAA,EAAT,MAAK,CAAA;KAE5B,mBAAA,QAAA;KACA,YAEgB,aAAA,EAFD,KAAI,OAAM,GAAA;MACvB,SAAA,SADgC,WAAM,CACtC,WAAoC,KAAA,QAAA,QAAA,eAAA,mBAAV,MAAM,CAAA,CAAA,CAAA,CAAA"}
+{"version":3,"file":"batch-edit.js","names":[],"sources":["../../../src/components/batch-edit/batch-edit.vue"],"sourcesContent":["<template>\n  <u-layout\n    :class=\"cls.b\"\n    :cols=\"cols\"\n    rows=\"minmax(0, 1fr) \"\n    gap=\"8px\"\n    resizable\n    tabindex=\"-1\"\n    @focusin=\"handleFocusIn\"\n    @focusout=\"handleFocusOut\"\n    @keydown.capture=\"handleKeydown\"\n  >\n    <!-- 编辑列表 -->\n    <BatchEditList :slots=\"slots\" />\n\n    <!-- 编辑表单 -->\n    <BatchEditForm ref=\"form\" v-slot=\"scoped\">\n      <slot name=\"form\" v-bind=\"scoped\" />\n    </BatchEditForm>\n  </u-layout>\n</template>\n\n<script lang=\"ts\" setup>\nimport { bem } from '@veltra/utils'\nimport { computed, provide, useTemplateRef } from 'vue'\n\nimport type { BatchEditEmits, BatchEditProps, BatchEditSlots, FormExposed } from '../../types'\nimport { ULayout } from '../layout'\nimport BatchEditForm from './batch-edit-form.vue'\nimport BatchEditList from './batch-edit-list.vue'\nimport { BatchEditDIKey } from './di'\nimport { useEditState } from './use-edit-state'\nimport { useFeatures } from './use-features'\nimport { useHandlers } from './use-handlers'\nimport { useShortcutKey } from './use-shortcut-key'\n\ndefineOptions({ name: 'UBatchEdit' })\n\nconst props = withDefaults(defineProps<BatchEditProps>(), { cols: () => ['1fr', '420px'] })\n\nconst emit = defineEmits<BatchEditEmits>()\n\nconst slots = defineSlots<BatchEditSlots>()\n\nconst cls = bem('batch-edit')\n\nconst formRef = useTemplateRef<FormExposed>('form')\n\nconst { state, resetState, syncing } = useEditState({ props, formRef })\n\nconst { staticFeatures, dynamicFeatures } = useFeatures({ props })\n\nconst handlers = useHandlers({ props, emit, state, resetState, formRef })\n\n// 快捷键处理\nconst { handleFocusIn, handleFocusOut, handleKeydown, focused } = useShortcutKey({\n  props,\n  onSave: handlers.handleSave,\n  onClose: handlers.handleClose,\n  state\n})\n\nconst cols = computed(() => {\n  return state.formVisible ? props.cols : undefined\n})\n\nprovide(BatchEditDIKey, {\n  cls,\n  props,\n  emit,\n  state,\n  staticFeatures,\n  dynamicFeatures,\n  focused,\n  syncing,\n  ...handlers\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsCA,MAAM,QAAQ;EAEd,MAAM,OAAO;EAEb,MAAM,QAAQ,SAAA;EAEd,MAAM,MAAM,IAAI,YAAY;EAE5B,MAAM,UAAU,eAA4B,MAAM;EAElD,MAAM,EAAE,OAAO,YAAY,YAAY,aAAa;GAAE;GAAO;EAAQ,CAAC;EAEtE,MAAM,EAAE,gBAAgB,oBAAoB,YAAY,EAAE,MAAM,CAAC;EAEjE,MAAM,WAAW,YAAY;GAAE;GAAO;GAAM;GAAO;GAAY;EAAQ,CAAC;EAGxE,MAAM,EAAE,eAAe,gBAAgB,eAAe,YAAY,eAAe;GAC/E;GACA,QAAQ,SAAS;GACjB,SAAS,SAAS;GAClB;EACF,CAAC;EAED,MAAM,OAAO,eAAe;GAC1B,OAAO,MAAM,cAAc,MAAM,OAAO,KAAA;EAC1C,CAAC;EAED,QAAQ,gBAAgB;GACtB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA,GAAG;EACL,CAAC;;GA3EC,OAAA,UAAA,GAAA,YAkBW,MAAA,WAAA,GAAA;IAjBR,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,CAAC;IACZ,MAAM,KAAA;IACP,MAAK;IACL,KAAI;IACJ,WAAA;IACA,UAAS;IACR,WAAS,MAAA,aAAA;IACT,YAAU,MAAA,cAAA;IACO,kBAAA,MAAA,aAAA;;IAElB,SAAA,cAAa;KAAb,mBAAA,QAAA;KACA,YAAgC,aAAA,EAAT,MAAK,CAAA;KAE5B,mBAAA,QAAA;KACA,YAEgB,aAAA,EAFD,KAAI,OAAM,GAAA;MACvB,SAAA,SADgC,WAAM,CACtC,WAAoC,KAAA,QAAA,QAAA,eAAA,mBAAV,MAAM,CAAA,CAAA,CAAA,CAAA"}

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

@@ -1 +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 { nextTick, shallowReactive, shallowRef, watch, type ShallowRef } from 'vue'\n\nimport type { BatchEditProps, BatchEditStates, FormExposed } from '../../types'\n\ninterface Options {\n  props: BatchEditProps\n  formRef: ShallowRef<FormExposed | null>\n}\n\nexport function useEditState(options: Options) {\n  const { props, formRef } = 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  /** 是否正在以编程方式重置/回显表单，此期间禁止 quick-edit 回写行数据 */\n  const syncing = shallowRef(false)\n\n  function resetState() {\n    // 表单常驻挂载，重置即恢复到 model 初始快照\n    formRef.value?.reset()\n\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      syncing.value = true\n\n      // 先重置回 model 初始快照，再同步回显行数据。\n      // 同一 tick 内的连续写入会被表单字段 watcher 合并，\n      // 重置产生的默认值不会触发 field:change 回写行数据\n      formRef.value?.reset()\n\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      } else {\n        resetState()\n      }\n\n      nextTick(() => {\n        syncing.value = false\n      })\n    }\n  )\n\n  return { state, resetState, syncing }\n}\n"],"mappings":";;;AAUA,SAAgB,aAAa,SAAkB;CAC7C,MAAM,EAAE,OAAO,YAAY;CAE3B,MAAM,eAAgC;EACpC,OAAO;EACP,aAAa;EACb,gBAAgB;EAChB,SAAS;EACT,WAAW,CAAC;CACd;CAEA,MAAM,QAAQ,gBAAgB,EAAE,GAAG,aAAa,CAAC;;CAGjD,MAAM,UAAU,WAAW,KAAK;CAEhC,SAAS,aAAa;EAEpB,QAAQ,OAAO,MAAM;EAErB,IAAI,MAAM,KACR,MAAM,IAAI,YAAY;EAGxB,OAAO,KAAK,KAAK,CAAC,CAAC,SAAS,QAAQ;GAClC,OAAO,MAAM;EACf,CAAC;EAED,OAAO,OAAO,OAAO,YAAY;CACnC;CAEA,YACQ,MAAM,MACX,QAAQ;EACP,QAAQ,QAAQ;EAKhB,QAAQ,OAAO,MAAM;EAErB,IAAI,KAAK;GACP,IAAI,MAAM,OACR,EAAE,MAAM,KAAK,CAAC,CAAC,WAAW,IAAI,IAAI;GAEpC,MAAM,iBAAiB,MAAM,WAAW,SAAS;GACjD,MAAM,cAAc;GACpB,MAAM,QAAQ,IAAI;GAClB,MAAM,YAAY,CAAC,GAAG,IAAI,OAAO;EACnC,OACE,WAAW;EAGb,eAAe;GACb,QAAQ,QAAQ;EAClB,CAAC;CACH,CACF;CAEA,OAAO;EAAE;EAAO;EAAY;CAAQ;AACtC"}
+{"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 { nextTick, shallowReactive, shallowRef, watch, type ShallowRef } from 'vue'\n\nimport type { BatchEditProps, BatchEditStates, FormExposed } from '../../types'\n\ninterface Options {\n  props: BatchEditProps\n  formRef: ShallowRef<FormExposed | null>\n}\n\nexport function useEditState(options: Options) {\n  const { props, formRef } = 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  /** 是否正在以编程方式重置/回显表单，此期间禁止 quick-edit 回写行数据 */\n  const syncing = shallowRef(false)\n\n  function resetState() {\n    // 表单常驻挂载，重置即恢复到 model 初始快照\n    formRef.value?.reset()\n\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      syncing.value = true\n\n      // 先重置回 model 初始快照，再同步回显行数据。\n      // 同一 tick 内的连续写入会被表单字段 watcher 合并，\n      // 重置产生的默认值不会触发 field:update 回写行数据\n      formRef.value?.reset()\n\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      } else {\n        resetState()\n      }\n\n      nextTick(() => {\n        syncing.value = false\n      })\n    }\n  )\n\n  return { state, resetState, syncing }\n}\n"],"mappings":";;;AAUA,SAAgB,aAAa,SAAkB;CAC7C,MAAM,EAAE,OAAO,YAAY;CAE3B,MAAM,eAAgC;EACpC,OAAO;EACP,aAAa;EACb,gBAAgB;EAChB,SAAS;EACT,WAAW,CAAC;CACd;CAEA,MAAM,QAAQ,gBAAgB,EAAE,GAAG,aAAa,CAAC;;CAGjD,MAAM,UAAU,WAAW,KAAK;CAEhC,SAAS,aAAa;EAEpB,QAAQ,OAAO,MAAM;EAErB,IAAI,MAAM,KACR,MAAM,IAAI,YAAY;EAGxB,OAAO,KAAK,KAAK,CAAC,CAAC,SAAS,QAAQ;GAClC,OAAO,MAAM;EACf,CAAC;EAED,OAAO,OAAO,OAAO,YAAY;CACnC;CAEA,YACQ,MAAM,MACX,QAAQ;EACP,QAAQ,QAAQ;EAKhB,QAAQ,OAAO,MAAM;EAErB,IAAI,KAAK;GACP,IAAI,MAAM,OACR,EAAE,MAAM,KAAK,CAAC,CAAC,WAAW,IAAI,IAAI;GAEpC,MAAM,iBAAiB,MAAM,WAAW,SAAS;GACjD,MAAM,cAAc;GACpB,MAAM,QAAQ,IAAI;GAClB,MAAM,YAAY,CAAC,GAAG,IAAI,OAAO;EACnC,OACE,WAAW;EAGb,eAAe;GACb,QAAQ,QAAQ;EAClB,CAAC;CACH,CACF;CAEA,OAAO;EAAE;EAAO;EAAY;CAAQ;AACtC"}

package/dist/components/button/button.js

@@ -65,7 +65,6 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			return withDirectives((openBlock(), createElementBlock("button", {
 				class: normalizeClass(classList.value),
 				type: "button",
-				"aria-label": "button",
 				ref_key: "buttonRef",
 				ref: buttonRef,
 				onClick: handleClick

package/dist/components/button/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","names":[],"sources":["../../../src/components/button/button.vue"],"sourcesContent":["<template>\n  <button\n    :class=\"classList\"\n    type=\"button\"\n    aria-label=\"button\"\n    ref=\"buttonRef\"\n    v-ripple=\"ripple\"\n    @click=\"handleClick\"\n  >\n    <!-- 加载图标 -->\n    <u-icon v-if=\"loading\" :class=\"[bem.is('loading')]\" :size=\"iconSize\">\n      <component :is=\"loadingIcon\" />\n    </u-icon>\n\n    <!-- 左侧图标 -->\n    <u-icon v-if=\"!!icon && iconPosition === 'left' && !loading\" :size=\"iconSize\">\n      <component :is=\"icon\" />\n    </u-icon>\n\n    <slot />\n\n    <!-- 右侧图标 -->\n    <u-icon v-if=\"!!icon && iconPosition === 'right'\" :size=\"iconSize\">\n      <component :is=\"icon\" />\n    </u-icon>\n  </button>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useFallbackProps } from '@veltra/compositions'\nimport { vRipple } from '@veltra/directives'\nimport { Loading } from '@veltra/icons'\nimport { bem } from '@veltra/utils'\nimport { computed, shallowRef } from 'vue'\n\nimport type { ButtonEmits, ButtonProps, _ButtonExposed, ComponentSize } from '../../types'\nimport { UIcon } from '../icon'\n\ndefineOptions({ name: 'UButton' })\n\nconst props = withDefaults(defineProps<ButtonProps>(), {\n  iconPosition: 'left',\n  loadingIcon: () => Loading,\n  disabled: false,\n  propagate: true\n})\n\nconst { size } = useFallbackProps([props], { size: 'default' as ComponentSize })\n\nconst emit = defineEmits<ButtonEmits>()\n\nconst cls = bem('button')\n\nconst classList = computed(() => {\n  return [\n    cls.b,\n    cls.m(size.value),\n    props.type && cls.m('color-' + props.type),\n    bem.is('circle', props.circle),\n    bem.is('disabled', props.disabled),\n    bem.is('loading', props.loading),\n    bem.is('plain', props.plain),\n    bem.is('text', props.text)\n  ]\n})\n\nconst ripple = computed(() => {\n  if (props.disabled || props.loading || props.text) return false\n  if (props.plain && props.type) {\n    return bem.is(`ripple-${props.type}`)\n  }\n  return true\n})\n\nconst handleClick = (e: MouseEvent) => {\n  if (props.disabled || props.loading) {\n    e.stopPropagation()\n    return\n  }\n\n  !props.propagate && e.stopPropagation()\n\n  emit('click', e)\n}\n\nconst buttonRef = shallowRef<HTMLButtonElement>()\n\nconst exposed: _ButtonExposed = { el: buttonRef }\n\ndefineExpose(exposed)\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwCA,MAAM,QAAQ;EAOd,MAAM,EAAE,SAAS,iBAAiB,CAAC,KAAK,GAAG,EAAE,MAAM,UAA2B,CAAC;EAE/E,MAAM,OAAO;EAEb,MAAM,MAAM,IAAI,QAAQ;EAExB,MAAM,YAAY,eAAe;GAC/B,OAAO;IACL,IAAI;IACJ,IAAI,EAAE,KAAK,KAAK;IAChB,MAAM,QAAQ,IAAI,EAAE,WAAW,MAAM,IAAI;IACzC,IAAI,GAAG,UAAU,MAAM,MAAM;IAC7B,IAAI,GAAG,YAAY,MAAM,QAAQ;IACjC,IAAI,GAAG,WAAW,MAAM,OAAO;IAC/B,IAAI,GAAG,SAAS,MAAM,KAAK;IAC3B,IAAI,GAAG,QAAQ,MAAM,IAAI;GAC3B;EACF,CAAC;EAED,MAAM,SAAS,eAAe;GAC5B,IAAI,MAAM,YAAY,MAAM,WAAW,MAAM,MAAM,OAAO;GAC1D,IAAI,MAAM,SAAS,MAAM,MACvB,OAAO,IAAI,GAAG,UAAU,MAAM,MAAM;GAEtC,OAAO;EACT,CAAC;EAED,MAAM,eAAe,MAAkB;GACrC,IAAI,MAAM,YAAY,MAAM,SAAS;IACnC,EAAE,gBAAgB;IAClB;GACF;GAEA,CAAC,MAAM,aAAa,EAAE,gBAAgB;GAEtC,KAAK,SAAS,CAAC;EACjB;EAEA,MAAM,YAAY,WAA8B;EAIhD,SAAa,EAFqB,IAAI,UAEzB,CAAO;;GAxFlB,OAAA,gBAAA,UAAA,GAAA,mBAwBS,UAAA;IAvBN,OAAK,eAAE,UAAA,KAAS;IACjB,MAAK;IACL,cAAW;IACP,SAAA;IAAJ,KAAI;IAEH,SAAO;;IAER,mBAAA,QAAA;IACc,QAAA,WAAd,UAAA,GAAA,YAES,MAAA,WAAA,GAAA;;KAFe,OAAK,eAAA,CAAG,MAAA,GAAA,CAAG,CAAC,GAAE,SAAA,CAAA,CAAA;KAAe,MAAM,QAAA;;KACzD,SAAA,cAA+B,EAA/B,UAAA,GAAA,YAA+B,wBAAf,QAAA,WAAW,CAAA,EAAA,CAAA;;;IAG7B,mBAAA,QAAA;IACgB,CAAA,CAAA,QAAA,QAAQ,QAAA,iBAAY,UAAA,CAAgB,QAAA,WAApD,UAAA,GAAA,YAES,MAAA,WAAA,GAAA;;KAFqD,MAAM,QAAA;;KAClE,SAAA,cAAwB,EAAxB,UAAA,GAAA,YAAwB,wBAAR,QAAA,IAAI,CAAA,EAAA,CAAA;;;IAGtB,WAAQ,KAAA,QAAA,SAAA;IAER,mBAAA,QAAA;IACgB,CAAA,CAAA,QAAA,QAAQ,QAAA,iBAAY,WAApC,UAAA,GAAA,YAES,MAAA,WAAA,GAAA;;KAF0C,MAAM,QAAA;;KACvD,SAAA,cAAwB,EAAxB,UAAA,GAAA,YAAwB,wBAAR,QAAA,IAAI,CAAA,EAAA,CAAA;;;GAjBZ,GAAA,CAAA,IAAA,CAAA,CAAA,MAAA,OAAA,GAAA,OAAA,KAAM,CAAA,CAAA"}
+{"version":3,"file":"button.js","names":[],"sources":["../../../src/components/button/button.vue"],"sourcesContent":["<template>\n  <button :class=\"classList\" type=\"button\" ref=\"buttonRef\" v-ripple=\"ripple\" @click=\"handleClick\">\n    <!-- 加载图标 -->\n    <u-icon v-if=\"loading\" :class=\"[bem.is('loading')]\" :size=\"iconSize\">\n      <component :is=\"loadingIcon\" />\n    </u-icon>\n\n    <!-- 左侧图标 -->\n    <u-icon v-if=\"!!icon && iconPosition === 'left' && !loading\" :size=\"iconSize\">\n      <component :is=\"icon\" />\n    </u-icon>\n\n    <slot />\n\n    <!-- 右侧图标 -->\n    <u-icon v-if=\"!!icon && iconPosition === 'right'\" :size=\"iconSize\">\n      <component :is=\"icon\" />\n    </u-icon>\n  </button>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useFallbackProps } from '@veltra/compositions'\nimport { vRipple } from '@veltra/directives'\nimport { Loading } from '@veltra/icons'\nimport { bem } from '@veltra/utils'\nimport { computed, shallowRef } from 'vue'\n\nimport type { ButtonEmits, ButtonProps, _ButtonExposed, ComponentSize } from '../../types'\nimport { UIcon } from '../icon'\n\ndefineOptions({ name: 'UButton' })\n\nconst props = withDefaults(defineProps<ButtonProps>(), {\n  iconPosition: 'left',\n  loadingIcon: () => Loading,\n  disabled: false,\n  propagate: true\n})\n\nconst { size } = useFallbackProps([props], { size: 'default' as ComponentSize })\n\nconst emit = defineEmits<ButtonEmits>()\n\nconst cls = bem('button')\n\nconst classList = computed(() => {\n  return [\n    cls.b,\n    cls.m(size.value),\n    props.type && cls.m('color-' + props.type),\n    bem.is('circle', props.circle),\n    bem.is('disabled', props.disabled),\n    bem.is('loading', props.loading),\n    bem.is('plain', props.plain),\n    bem.is('text', props.text)\n  ]\n})\n\nconst ripple = computed(() => {\n  if (props.disabled || props.loading || props.text) return false\n  if (props.plain && props.type) {\n    return bem.is(`ripple-${props.type}`)\n  }\n  return true\n})\n\nconst handleClick = (e: MouseEvent) => {\n  if (props.disabled || props.loading) {\n    e.stopPropagation()\n    return\n  }\n\n  !props.propagate && e.stopPropagation()\n\n  emit('click', e)\n}\n\nconst buttonRef = shallowRef<HTMLButtonElement>()\n\nconst exposed: _ButtonExposed = { el: buttonRef }\n\ndefineExpose(exposed)\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiCA,MAAM,QAAQ;EAOd,MAAM,EAAE,SAAS,iBAAiB,CAAC,KAAK,GAAG,EAAE,MAAM,UAA2B,CAAC;EAE/E,MAAM,OAAO;EAEb,MAAM,MAAM,IAAI,QAAQ;EAExB,MAAM,YAAY,eAAe;GAC/B,OAAO;IACL,IAAI;IACJ,IAAI,EAAE,KAAK,KAAK;IAChB,MAAM,QAAQ,IAAI,EAAE,WAAW,MAAM,IAAI;IACzC,IAAI,GAAG,UAAU,MAAM,MAAM;IAC7B,IAAI,GAAG,YAAY,MAAM,QAAQ;IACjC,IAAI,GAAG,WAAW,MAAM,OAAO;IAC/B,IAAI,GAAG,SAAS,MAAM,KAAK;IAC3B,IAAI,GAAG,QAAQ,MAAM,IAAI;GAC3B;EACF,CAAC;EAED,MAAM,SAAS,eAAe;GAC5B,IAAI,MAAM,YAAY,MAAM,WAAW,MAAM,MAAM,OAAO;GAC1D,IAAI,MAAM,SAAS,MAAM,MACvB,OAAO,IAAI,GAAG,UAAU,MAAM,MAAM;GAEtC,OAAO;EACT,CAAC;EAED,MAAM,eAAe,MAAkB;GACrC,IAAI,MAAM,YAAY,MAAM,SAAS;IACnC,EAAE,gBAAgB;IAClB;GACF;GAEA,CAAC,MAAM,aAAa,EAAE,gBAAgB;GAEtC,KAAK,SAAS,CAAC;EACjB;EAEA,MAAM,YAAY,WAA8B;EAIhD,SAAa,EAFqB,IAAI,UAEzB,CAAO;;GAjFlB,OAAA,gBAAA,UAAA,GAAA,mBAiBS,UAAA;IAjBA,OAAK,eAAE,UAAA,KAAS;IAAE,MAAK;IAAa,SAAA;IAAJ,KAAI;IAA+B,SAAO;;IACjF,mBAAA,QAAA;IACc,QAAA,WAAd,UAAA,GAAA,YAES,MAAA,WAAA,GAAA;;KAFe,OAAK,eAAA,CAAG,MAAA,GAAA,CAAG,CAAC,GAAE,SAAA,CAAA,CAAA;KAAe,MAAM,QAAA;;KACzD,SAAA,cAA+B,EAA/B,UAAA,GAAA,YAA+B,wBAAf,QAAA,WAAW,CAAA,EAAA,CAAA;;;IAG7B,mBAAA,QAAA;IACgB,CAAA,CAAA,QAAA,QAAQ,QAAA,iBAAY,UAAA,CAAgB,QAAA,WAApD,UAAA,GAAA,YAES,MAAA,WAAA,GAAA;;KAFqD,MAAM,QAAA;;KAClE,SAAA,cAAwB,EAAxB,UAAA,GAAA,YAAwB,wBAAR,QAAA,IAAI,CAAA,EAAA,CAAA;;;IAGtB,WAAQ,KAAA,QAAA,SAAA;IAER,mBAAA,QAAA;IACgB,CAAA,CAAA,QAAA,QAAQ,QAAA,iBAAY,WAApC,UAAA,GAAA,YAES,MAAA,WAAA,GAAA;;KAF0C,MAAM,QAAA;;KACvD,SAAA,cAAwB,EAAxB,UAAA,GAAA,YAAwB,wBAAR,QAAA,IAAI,CAAA,EAAA,CAAA;;;GAf2C,GAAA,CAAA,IAAA,CAAA,CAAA,MAAA,OAAA,GAAA,OAAA,KAAM,CAAA,CAAA"}

package/dist/components/drawer/drawer.js

@@ -1,5 +1,5 @@
 import _sfc_main$1 from "../icon/icon.js";
-import { Teleport, Transition, computed, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, mergeModels, mergeProps, normalizeClass, normalizeStyle, openBlock, renderSlot, shallowRef, unref, useModel, withCtx, withModifiers } from "vue";
+import { Teleport, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeModels, mergeProps, normalizeClass, normalizeStyle, openBlock, renderSlot, shallowRef, toDisplayString, unref, useModel, withCtx, withModifiers } from "vue";
 import { bem, zIndex } from "@veltra/utils";
 import { Close } from "@veltra/icons/normal";
 //#region src/components/drawer/drawer.vue
@@ -54,7 +54,8 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			return openBlock(), createBlock(Teleport, { to: "body" }, [createVNode(Transition, {
 				name: "fade",
 				mode: "out-in",
-				onEnter
+				onEnter,
+				onAfterLeave: _cache[1] || (_cache[1] = ($event) => emit("closed"))
 			}, {
 				default: withCtx(() => [overlayVisible.value ? (openBlock(), createElementBlock("div", {
 					key: 0,
@@ -70,14 +71,21 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 						class: drawerClass.value,
 						style: drawerStyle.value,
 						onClick: _cache[0] || (_cache[0] = withModifiers(() => {}, ["stop"]))
-					}), [__props.showClose ? (openBlock(), createElementBlock("span", {
-						key: 0,
-						class: normalizeClass(unref(cls).e("close")),
-						onClick: close
-					}, [createVNode(unref(_sfc_main$1), null, {
-						default: withCtx(() => [createVNode(unref(Close))]),
-						_: 1
-					})], 2)) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, "default")], 16)) : createCommentVNode("v-if", true)]),
+					}), [
+						__props.title ? (openBlock(), createElementBlock("div", {
+							key: 0,
+							class: normalizeClass(unref(cls).e("header"))
+						}, [createElementVNode("span", { class: normalizeClass(unref(cls).e("title")) }, toDisplayString(__props.title), 3)], 2)) : createCommentVNode("v-if", true),
+						__props.showClose ? (openBlock(), createElementBlock("span", {
+							key: 1,
+							class: normalizeClass(unref(cls).e("close")),
+							onClick: close
+						}, [createVNode(unref(_sfc_main$1), null, {
+							default: withCtx(() => [createVNode(unref(Close))]),
+							_: 1
+						})], 2)) : createCommentVNode("v-if", true),
+						renderSlot(_ctx.$slots, "default")
+					], 16)) : createCommentVNode("v-if", true)]),
 					_: 3
 				}, 8, ["name"])], 6)) : createCommentVNode("v-if", true)]),
 				_: 3

package/dist/components/drawer/drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"drawer.js","names":["$attrs"],"sources":["../../../src/components/drawer/drawer.vue"],"sourcesContent":["<template>\n  <Teleport to=\"body\">\n    <transition name=\"fade\" mode=\"out-in\" @enter=\"onEnter\">\n      <div v-if=\"overlayVisible\" :class=\"overlayCls.b\" :style=\"{ zIndex: zIndex() }\" @click=\"close\">\n        <transition :name=\"transitionName\" appear @after-leave=\"onAfterDrawerLeave\">\n          <div\n            v-bind=\"$attrs\"\n            v-if=\"drawerVisible\"\n            :class=\"drawerClass\"\n            :style=\"drawerStyle\"\n            @click.stop\n          >\n            <span :class=\"cls.e('close')\" @click=\"close\" v-if=\"showClose\">\n              <u-icon><Close /></u-icon>\n            </span>\n            <slot />\n          </div>\n        </transition>\n      </div>\n    </transition>\n  </Teleport>\n</template>\n\n<script lang=\"ts\" setup>\nimport { Close } from '@veltra/icons/normal'\nimport { bem, zIndex } from '@veltra/utils'\nimport { computed, shallowRef } from 'vue'\n\nimport type { DrawerProps, DrawerEmits } from '../../types'\nimport { UIcon } from '../icon'\n\ndefineOptions({ name: 'UDrawer', inheritAttrs: false })\n\nconst props = withDefaults(defineProps<DrawerProps>(), { direction: 'right', closable: true })\n\nconst emit = defineEmits<DrawerEmits>()\n\nconst cls = bem('drawer')\nconst overlayCls = bem('drawer-overlay')\n\nconst overlayVisible = defineModel<boolean>({ default: false })\n\nconst drawerVisible = shallowRef(false)\n\n// 根据方向计算过渡动画名称\nconst transitionName = computed(() => {\n  return `drawer-slide-${props.direction}`\n})\n\n// 计算抽屉样式类\nconst drawerClass = computed(() => {\n  return [cls.b, bem.is(props.direction)]\n})\n\n// 计算抽屉样式\nconst drawerStyle = computed(() => {\n  const style: Record<string, string> = {}\n\n  return style\n})\n\nconst onEnter = () => {\n  drawerVisible.value = true\n}\n\nconst onAfterDrawerLeave = () => {\n  overlayVisible.value = false\n}\n\n// 关闭抽屉\nconst close = () => {\n  drawerVisible.value = false\n  emit('close')\n}\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;EAiCA,MAAM,QAAQ;EAEd,MAAM,OAAO;EAEb,MAAM,MAAM,IAAI,QAAQ;EACxB,MAAM,aAAa,IAAI,gBAAgB;EAEvC,MAAM,iBAAiB,SAAoB,SAAA,YAAmB;EAE9D,MAAM,gBAAgB,WAAW,KAAK;EAGtC,MAAM,iBAAiB,eAAe;GACpC,OAAO,gBAAgB,MAAM;EAC/B,CAAC;EAGD,MAAM,cAAc,eAAe;GACjC,OAAO,CAAC,IAAI,GAAG,IAAI,GAAG,MAAM,SAAS,CAAC;EACxC,CAAC;EAGD,MAAM,cAAc,eAAe;GAGjC,OAAO,CAAA;EACT,CAAC;EAED,MAAM,gBAAgB;GACpB,cAAc,QAAQ;EACxB;EAEA,MAAM,2BAA2B;GAC/B,eAAe,QAAQ;EACzB;EAGA,MAAM,cAAc;GAClB,cAAc,QAAQ;GACtB,KAAK,OAAO;EACd;;GAxEE,OAAA,UAAA,GAAA,YAmBW,UAAA,EAnBD,IAAG,OAAM,GAAA,CACjB,YAiBa,YAAA;IAjBD,MAAK;IAAO,MAAK;IAAiB;;IAC5C,SAAA,cAeM,CAfK,eAAA,SAAX,UAAA,GAAA,mBAeM,OAAA;;KAfsB,OAAK,eAAE,MAAA,UAAA,CAAU,CAAC,CAAC;KAAG,OAAK,eAAA,EAAA,QAAY,MAAA,MAAA,CAAM,CAAA,EAAA,CAAA;KAAO,SAAO;IACrF,GAAA,CAAA,YAaa,YAAA;KAbA,MAAM,eAAA;KAAgB,QAAA;KAAQ,cAAa;;KACtD,SAAA,cAWM,CATE,cAAA,SAFR,UAAA,GAAA,mBAWM,OAXN,WAWM,EAAA,KAAA,EAAA,GAVIA,KAAAA,QAAM;MAEb,OAAO,YAAA;MACP,OAAO,YAAA;MACP,SAAK,OAAA,OAAA,OAAA,KAAA,oBAAN,CAAA,GAAW,CAAA,MAAA,CAAA;KAEwC,CAAA,GAAA,CAAA,QAAA,aAAnD,UAAA,GAAA,mBAEO,QAAA;;MAFA,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,OAAA,CAAA;MAAY,SAAO;KACpC,GAAA,CAAA,YAA0B,MAAA,WAAA,GAAA,MAAA;MAAlB,SAAA,cAAS,CAAT,YAAS,MAAA,KAAA,CAAA,CAAA,CAAA;;KAEnB,CAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,QAAA,IAAA,GAAA,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,EAAA,KAAA,mBAAA,QAAA,IAAA,CAAA,CAAA"}
+{"version":3,"file":"drawer.js","names":["$attrs"],"sources":["../../../src/components/drawer/drawer.vue"],"sourcesContent":["<template>\n  <Teleport to=\"body\">\n    <transition name=\"fade\" mode=\"out-in\" @enter=\"onEnter\" @after-leave=\"emit('closed')\">\n      <div v-if=\"overlayVisible\" :class=\"overlayCls.b\" :style=\"{ zIndex: zIndex() }\" @click=\"close\">\n        <transition :name=\"transitionName\" appear @after-leave=\"onAfterDrawerLeave\">\n          <div\n            v-bind=\"$attrs\"\n            v-if=\"drawerVisible\"\n            :class=\"drawerClass\"\n            :style=\"drawerStyle\"\n            @click.stop\n          >\n            <div v-if=\"title\" :class=\"cls.e('header')\">\n              <span :class=\"cls.e('title')\">{{ title }}</span>\n            </div>\n            <span :class=\"cls.e('close')\" @click=\"close\" v-if=\"showClose\">\n              <u-icon><Close /></u-icon>\n            </span>\n            <slot />\n          </div>\n        </transition>\n      </div>\n    </transition>\n  </Teleport>\n</template>\n\n<script lang=\"ts\" setup>\nimport { Close } from '@veltra/icons/normal'\nimport { bem, zIndex } from '@veltra/utils'\nimport { computed, shallowRef } from 'vue'\n\nimport type { DrawerProps, DrawerEmits } from '../../types'\nimport { UIcon } from '../icon'\n\ndefineOptions({ name: 'UDrawer', inheritAttrs: false })\n\nconst props = withDefaults(defineProps<DrawerProps>(), { direction: 'right' })\n\nconst emit = defineEmits<DrawerEmits>()\n\nconst cls = bem('drawer')\nconst overlayCls = bem('drawer-overlay')\n\nconst overlayVisible = defineModel<boolean>({ default: false })\n\nconst drawerVisible = shallowRef(false)\n\n// 根据方向计算过渡动画名称\nconst transitionName = computed(() => {\n  return `drawer-slide-${props.direction}`\n})\n\n// 计算抽屉样式类\nconst drawerClass = computed(() => {\n  return [cls.b, bem.is(props.direction)]\n})\n\n// 计算抽屉样式\nconst drawerStyle = computed(() => {\n  const style: Record<string, string> = {}\n\n  return style\n})\n\nconst onEnter = () => {\n  drawerVisible.value = true\n}\n\nconst onAfterDrawerLeave = () => {\n  overlayVisible.value = false\n}\n\n// 关闭抽屉\nconst close = () => {\n  drawerVisible.value = false\n  emit('close')\n}\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;EAoCA,MAAM,QAAQ;EAEd,MAAM,OAAO;EAEb,MAAM,MAAM,IAAI,QAAQ;EACxB,MAAM,aAAa,IAAI,gBAAgB;EAEvC,MAAM,iBAAiB,SAAoB,SAAA,YAAmB;EAE9D,MAAM,gBAAgB,WAAW,KAAK;EAGtC,MAAM,iBAAiB,eAAe;GACpC,OAAO,gBAAgB,MAAM;EAC/B,CAAC;EAGD,MAAM,cAAc,eAAe;GACjC,OAAO,CAAC,IAAI,GAAG,IAAI,GAAG,MAAM,SAAS,CAAC;EACxC,CAAC;EAGD,MAAM,cAAc,eAAe;GAGjC,OAAO,CAAA;EACT,CAAC;EAED,MAAM,gBAAgB;GACpB,cAAc,QAAQ;EACxB;EAEA,MAAM,2BAA2B;GAC/B,eAAe,QAAQ;EACzB;EAGA,MAAM,cAAc;GAClB,cAAc,QAAQ;GACtB,KAAK,OAAO;EACd;;GA3EE,OAAA,UAAA,GAAA,YAsBW,UAAA,EAtBD,IAAG,OAAM,GAAA,CACjB,YAoBa,YAAA;IApBD,MAAK;IAAO,MAAK;IAAiB;IAAU,cAAW,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,QAAA;;IACvE,SAAA,cAkBM,CAlBK,eAAA,SAAX,UAAA,GAAA,mBAkBM,OAAA;;KAlBsB,OAAK,eAAE,MAAA,UAAA,CAAU,CAAC,CAAC;KAAG,OAAK,eAAA,EAAA,QAAY,MAAA,MAAA,CAAM,CAAA,EAAA,CAAA;KAAO,SAAO;IACrF,GAAA,CAAA,YAgBa,YAAA;KAhBA,MAAM,eAAA;KAAgB,QAAA;KAAQ,cAAa;;KACtD,SAAA,cAcM,CAZE,cAAA,SAFR,UAAA,GAAA,mBAcM,OAdN,WAcM,EAAA,KAAA,EAAA,GAbIA,KAAAA,QAAM;MAEb,OAAO,YAAA;MACP,OAAO,YAAA;MACP,SAAK,OAAA,OAAA,OAAA,KAAA,oBAAN,CAAA,GAAW,CAAA,MAAA,CAAA;;MAEA,QAAA,SAAX,UAAA,GAAA,mBAEM,OAAA;;OAFa,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,QAAA,CAAA;MAC7B,GAAA,CAAA,mBAAgD,QAAA,EAAzC,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,OAAA,CAAA,EAAc,GAAA,gBAAA,QAAA,KAAK,GAAA,CAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,QAAA,IAAA;MAEW,QAAA,aAAnD,UAAA,GAAA,mBAEO,QAAA;;OAFA,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,OAAA,CAAA;OAAY,SAAO;MACpC,GAAA,CAAA,YAA0B,MAAA,WAAA,GAAA,MAAA;OAAlB,SAAA,cAAS,CAAT,YAAS,MAAA,KAAA,CAAA,CAAA,CAAA;;;MAEnB,WAAQ,KAAA,QAAA,SAAA"}

package/dist/components/drawer/style2.css

@@ -34,6 +34,21 @@
   align-items: center;
   justify-content: center;
 }
+.u-drawer__header {
+  height: 48px;
+  flex-shrink: 0;
+  padding: 0 var(--u-gap-default);
+  font-size: var(--u-font-size-title-default);
+  border-bottom: var(--u-border);
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-wrap: nowrap;
+}
+.u-drawer__title {
+  font-weight: 600;
+  line-height: 1em;
+}
 .u-drawer.is-right {
   top: 4px;
   bottom: 4px;

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    gap=\"0 12px\"\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: 'UForm' })\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":""}
+{"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    gap=\"0 12px\"\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        <div v-if=\"shouldShowModified(field)\" :class=\"cls.e('data-before')\">\n          <span :class=\"cls.e('changed-tag')\">{{ modifiedLabel }}</span>\n          <component :is=\"node\" readonly :model-value=\"getBaselineFieldValue(field)\" />\n        </div>\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 { isFieldModified } from './is-field-modified'\nimport { useFormFields } from './use-form-fields'\nimport { useNodeInterceptor } from './use-node-interceptor'\n\ndefineOptions({ name: 'UForm' })\n\nconst props = withDefaults(defineProps<FormProps>(), { modifiedLabel: '变更前：' })\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  getBaselineModel\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 handleFieldUpdate(field: string, value: any) {\n  emit('field:update', field, value)\n}\n\nfunction handleFieldChange(field: string, ...args: any[]) {\n  emit('field:change', field, ...args)\n}\n\nprovideFormContext({\n  formProps: props,\n  registerField,\n  unregisterField,\n  validateFields: validate,\n  shouldValidate,\n  handleFieldUpdate,\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\nfunction getBaselineFieldValue(field: string) {\n  return o(getBaselineModel() ?? {}).get(field)\n}\n\nfunction shouldShowModified(field: string) {\n  if (!props.showModified) return false\n  const baseline = getBaselineModel()\n  if (!baseline || !props.model) return false\n  const current = o(props.model).get(field)\n  const initial = o(baseline).get(field)\n  return isFieldModified(current, initial)\n}\n\ndefineExpose<_FormExposed>({ el: toRef(() => gridRef.value?.el), validate, clearValidate, reset })\n</script>\n"],"mappings":""}

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

@@ -1,8 +1,9 @@
 import _sfc_main from "../grid/grid.js";
 import form_item_default from "../form-item/form-item.js";
+import { isFieldModified } from "./is-field-modified.js";
 import { useFormFields } from "./use-form-fields.js";
 import { useNodeInterceptor } from "./use-node-interceptor.js";
-import { Fragment, createBlock, createElementBlock, defineComponent, mergeProps, nextTick, normalizeClass, openBlock, renderList, resolveDynamicComponent, toRef, unref, useTemplateRef, withCtx, withModifiers } from "vue";
+import { Fragment, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeProps, nextTick, normalizeClass, openBlock, renderList, resolveDynamicComponent, toDisplayString, toRef, unref, useTemplateRef, withCtx, withModifiers } from "vue";
 import { bem, provideFormContext } from "@veltra/utils";
 import { o } from "@cat-kit/core";
 //#region src/components/form/form.vue?vue&type=script&setup=true&lang.tsx
@@ -12,6 +13,9 @@ var form_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 	props: {
 		cols: {},
 		model: {},
+		showModified: { type: Boolean },
+		modifiedLabel: { default: "变更前：" },
+		initialModel: {},
 		labelWidth: {},
 		labelPosition: {},
 		noTips: { type: Boolean },
@@ -19,7 +23,7 @@ var form_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 		disabled: { type: Boolean },
 		size: {}
 	},
-	emits: ["field:change"],
+	emits: ["field:change", "field:update"],
 	setup(__props, { expose: __expose, emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
@@ -33,7 +37,7 @@ var form_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 			xl: 4,
 			default: 4
 		};
-		const { validate: runValidate, clearValidate, reset, registerField, unregisterField, shouldValidate } = useFormFields({ props });
+		const { validate: runValidate, clearValidate, reset, registerField, unregisterField, shouldValidate, getBaselineModel } = useFormFields({ props });
 		async function validate(keys) {
 			const valid = await runValidate(keys);
 			if (!valid) {
@@ -42,8 +46,11 @@ var form_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 			}
 			return valid;
 		}
-		function handleFieldChange(field, value) {
-			emit("field:change", field, value);
+		function handleFieldUpdate(field, value) {
+			emit("field:update", field, value);
+		}
+		function handleFieldChange(field, ...args) {
+			emit("field:change", field, ...args);
 		}
 		provideFormContext({
 			formProps: props,
@@ -51,6 +58,7 @@ var form_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 			unregisterField,
 			validateFields: validate,
 			shouldValidate,
+			handleFieldUpdate,
 			handleFieldChange
 		});
 		const { getSlotsNodes } = useNodeInterceptor();
@@ -58,6 +66,17 @@ var form_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 			if (!props.model) return;
 			o(props.model).set(field, value);
 		}
+		function getBaselineFieldValue(field) {
+			return o(getBaselineModel() ?? {}).get(field);
+		}
+		function shouldShowModified(field) {
+			if (!props.showModified) return false;
+			const baseline = getBaselineModel();
+			if (!baseline || !props.model) return false;
+			const current = o(props.model).get(field);
+			const initial = o(baseline).get(field);
+			return isFieldModified(current, initial);
+		}
 		__expose({
 			el: toRef(() => gridRef.value?.el),
 			validate,
@@ -81,7 +100,13 @@ var form_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 						default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(node), {
 							"model-value": modelValue ?? unref(o)(__props.model ?? {}).get(field),
 							"onUpdate:modelValue": ($event) => handleUpdateValue(field, $event)
-						}, null, 8, ["model-value", "onUpdate:modelValue"]))]),
+						}, null, 8, ["model-value", "onUpdate:modelValue"])), shouldShowModified(field) ? (openBlock(), createElementBlock("div", {
+							key: 0,
+							class: normalizeClass(unref(cls).e("data-before"))
+						}, [createElementVNode("span", { class: normalizeClass(unref(cls).e("changed-tag")) }, toDisplayString(__props.modifiedLabel), 3), (openBlock(), createBlock(resolveDynamicComponent(node), {
+							readonly: "",
+							"model-value": getBaselineFieldValue(field)
+						}, null, 8, ["model-value"]))], 2)) : createCommentVNode("v-if", true)]),
 						_: 2
 					}, 1040)) : (openBlock(), createBlock(resolveDynamicComponent(node), { key: 1 }))], 64);
 				}), 128))]),

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    gap=\"0 12px\"\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: 'UForm' })\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":";;;;;;;;;;;;;;;;;;;;;;;EAwCA,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,CAAA,EAC/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,CAAC,CAAC,IAAI,OAAO,KAAK;EACjC;EAEA,SAA2B;GAAE,IAAI,YAAY,QAAQ,OAAO,EAAE;GAAG;GAAU;GAAe;EAAM,CAAC;;GA5F/F,OAAA,UAAA,GAAA,YAsBS,MAAA,SAAA,GAAA;IArBP,KAAI;IACJ,KAAI;IACH,UAAM,OAAA,OAAA,OAAA,KAAA,oBAAP,CAAA,GAAe,CAAA,SAAA,CAAA;IACf,KAAI;IACH,MAAM,QAAA,QAAQ;IACd,OAAK,eAAA,CAAG,MAAA,GAAA,CAAG,CAAC,GAAG,MAAA,GAAA,CAAG,CAAC,GAAE,YAAa,QAAA,QAAQ,CAAA,CAAA;;IAGzC,SAAA,cAAiF,EADnF,UAAA,IAAA,GAAA,mBAaW,UAAA,MAAA,WAZwD,MAAA,aAAA,CAAa,CAAA,IAAA,EAArE,MAAM,YAAY,eAAe,OAAO,iBAAU;KACrD,OAAA,UAAA,GAAA,mBAAA,UAAA,EAAA,KAAA,KAAK,IAAA,GAAA,CAES,CAAA,cAAc,SAAlC,UAAA,GAAA,YAMc,MAAA,iBAAA,GANd,WAMc;;;KANmC,GAAA,aAAa,GAAA;MAC5D,SAAA,cAIE,EAJF,UAAA,GAAA,YAIE,wBAHK,IAAI,GAAA;OACR,eAAa,cAAc,MAAA,CAAA,CAAC,CAAC,QAAA,SAAK,CAAA,CAAA,CAAA,CAAQ,IAAI,KAAK;OACnD,wBAAkB,WAAE,kBAAkB,OAAO,MAAM;;;KAIxD,GAAA,IAAA,MAAA,UAAA,GAAA,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    gap=\"0 12px\"\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        <div v-if=\"shouldShowModified(field)\" :class=\"cls.e('data-before')\">\n          <span :class=\"cls.e('changed-tag')\">{{ modifiedLabel }}</span>\n          <component :is=\"node\" readonly :model-value=\"getBaselineFieldValue(field)\" />\n        </div>\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 { isFieldModified } from './is-field-modified'\nimport { useFormFields } from './use-form-fields'\nimport { useNodeInterceptor } from './use-node-interceptor'\n\ndefineOptions({ name: 'UForm' })\n\nconst props = withDefaults(defineProps<FormProps>(), { modifiedLabel: '变更前：' })\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  getBaselineModel\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 handleFieldUpdate(field: string, value: any) {\n  emit('field:update', field, value)\n}\n\nfunction handleFieldChange(field: string, ...args: any[]) {\n  emit('field:change', field, ...args)\n}\n\nprovideFormContext({\n  formProps: props,\n  registerField,\n  unregisterField,\n  validateFields: validate,\n  shouldValidate,\n  handleFieldUpdate,\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\nfunction getBaselineFieldValue(field: string) {\n  return o(getBaselineModel() ?? {}).get(field)\n}\n\nfunction shouldShowModified(field: string) {\n  if (!props.showModified) return false\n  const baseline = getBaselineModel()\n  if (!baseline || !props.model) return false\n  const current = o(props.model).get(field)\n  const initial = o(baseline).get(field)\n  return isFieldModified(current, initial)\n}\n\ndefineExpose<_FormExposed>({ el: toRef(() => gridRef.value?.el), validate, clearValidate, reset })\n</script>\n"],"mappings":"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"}

package/dist/components/form/is-field-modified.js

@@ -0,0 +1,12 @@
+//#region src/components/form/is-field-modified.ts
+/** 判断字段当前值相对基准值是否已变更 */
+function isFieldModified(current, initial) {
+	if (current === initial) return false;
+	if ((current === null || current === void 0 || current === "") && (initial === null || initial === void 0 || initial === "")) return false;
+	if (current !== null && typeof current === "object" || initial !== null && typeof initial === "object") return JSON.stringify(current) !== JSON.stringify(initial);
+	return true;
+}
+//#endregion
+export { isFieldModified };
+
+//# sourceMappingURL=is-field-modified.js.map

package/dist/components/form/is-field-modified.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"is-field-modified.js","names":[],"sources":["../../../src/components/form/is-field-modified.ts"],"sourcesContent":["/** 判断字段当前值相对基准值是否已变更 */\nexport function isFieldModified(current: unknown, initial: unknown): boolean {\n  if (current === initial) return false\n\n  const currentNullish = current === null || current === undefined || current === ''\n  const initialNullish = initial === null || initial === undefined || initial === ''\n  if (currentNullish && initialNullish) return false\n\n  const currentIsObject = current !== null && typeof current === 'object'\n  const initialIsObject = initial !== null && typeof initial === 'object'\n  if (currentIsObject || initialIsObject) {\n    return JSON.stringify(current) !== JSON.stringify(initial)\n  }\n\n  return true\n}\n"],"mappings":";;AACA,SAAgB,gBAAgB,SAAkB,SAA2B;CAC3E,IAAI,YAAY,SAAS,OAAO;CAIhC,KAFuB,YAAY,QAAQ,YAAY,KAAA,KAAa,YAAY,QACzD,YAAY,QAAQ,YAAY,KAAA,KAAa,YAAY,KAC1C,OAAO;CAI7C,IAFwB,YAAY,QAAQ,OAAO,YAAY,YACvC,YAAY,QAAQ,OAAO,YAAY,UAE7D,OAAO,KAAK,UAAU,OAAO,MAAM,KAAK,UAAU,OAAO;CAG3D,OAAO;AACT"}

package/dist/components/form/style2.css

@@ -26,10 +26,46 @@
   padding: 0 8px;
 }
 .u-form__data-before {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-wrap: wrap;
+  margin-top: 4px;
+  padding: 2px 8px;
+  border-left: 2px solid var(--u-color-info);
+  background-color: var(--u-color-info-a-8);
+  border-radius: 2px;
+  width: fit-content;
+  max-width: 100%;
+  line-height: 1.4;
+  font-size: var(--u-font-size-assist-default);
+}
+.u-form__data-before:has(.u-input), .u-form__data-before:has(.u-textarea), .u-form__data-before:has(.u-select), .u-form__data-before:has(.u-multi-select), .u-form__data-before:has(.u-multi-tree-select), .u-form__data-before:has(.u-auto-complete), .u-form__data-before:has(.u-cascade), .u-form__data-before:has(.u-date-picker), .u-form__data-before:has(.u-date-range-picker), .u-form__data-before:has(.u-number-input), .u-form__data-before:has(.u-tree-select) {
   width: 100%;
-  line-height: 1.3;
+}
+.u-form__data-before .u-form-item__content {
+  background: transparent;
+  padding: 0;
+}
+.u-form__data-before .u-input,
+.u-form__data-before .u-textarea,
+.u-form__data-before .u-select,
+.u-form__data-before .u-multi-select,
+.u-form__data-before .u-multi-tree-select,
+.u-form__data-before .u-auto-complete,
+.u-form__data-before .u-cascade,
+.u-form__data-before .u-date-picker,
+.u-form__data-before .u-date-range-picker {
+  border: none;
+  box-shadow: none;
+  background: transparent;
+  min-height: auto;
+  height: auto;
+  padding: 0;
 }
 .u-form__changed-tag {
   color: var(--u-color-info);
   font-size: var(--u-font-size-assist-default);
+  font-style: normal;
+  flex-shrink: 0;
 }

package/dist/components/form/use-form-fields.js

@@ -1,4 +1,4 @@
-import { nextTick, watch } from "vue";
+import { nextTick, shallowRef, watch } from "vue";
 import { copy, o } from "@cat-kit/core";
 //#region src/components/form/use-form-fields.ts
 /** 按快照逐字段写回 model，支持 undefined 与嵌套对象 */
@@ -22,7 +22,7 @@ function useFormFields(options) {
 	const fields = {};
 	let willValidate = true;
 	/** model 初始快照，供 reset 恢复 */
-	let initialSnapshot;
+	const initialSnapshot = shallowRef();
 	function runWithoutChangeValidate(fn) {
 		willValidate = false;
 		fn();
@@ -34,7 +34,7 @@ function useFormFields(options) {
 		return willValidate;
 	}
 	watch(() => props.model, (model) => {
-		initialSnapshot = model ? copy(model) : void 0;
+		initialSnapshot.value = model ? copy(model) : void 0;
 	}, {
 		immediate: true,
 		deep: false
@@ -55,12 +55,16 @@ function useFormFields(options) {
 		return validList.every((valid) => valid);
 	}
 	function reset() {
-		if (!props.model || !initialSnapshot) return;
+		if (!props.model || !initialSnapshot.value) return;
 		runWithoutChangeValidate(() => {
-			applySnapshot(props.model, initialSnapshot);
+			applySnapshot(props.model, initialSnapshot.value);
 			Object.values(fields).forEach((item) => item.clearValidate?.());
 		});
 	}
+	/** 变更前基准数据：优先 initialModel，否则为 model 引用变更时的快照 */
+	function getBaselineModel() {
+		return props.initialModel ?? initialSnapshot.value;
+	}
 	return {
 		fields,
 		registerField,
@@ -68,7 +72,8 @@ function useFormFields(options) {
 		unregisterField,
 		clearValidate,
 		reset,
-		shouldValidate
+		shouldValidate,
+		getBaselineModel
 	};
 }
 //#endregion

package/dist/components/form/use-form-fields.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-form-fields.js","names":[],"sources":["../../../src/components/form/use-form-fields.ts"],"sourcesContent":["import { copy, o } from '@cat-kit/core'\nimport type { FormFieldItem } from '@veltra/utils'\nimport { nextTick, watch } from 'vue'\n\nimport type { FormProps } from '../../types/form'\n\ninterface Options {\n  props: FormProps\n}\n\n/** 按快照逐字段写回 model，支持 undefined 与嵌套对象 */\nfunction applySnapshot(target: Record<string, any>, source: Record<string, any>) {\n  for (const key of Object.keys(source)) {\n    const sourceValue = source[key]\n    const targetValue = target[key]\n\n    if (\n      sourceValue !== null &&\n      typeof sourceValue === 'object' &&\n      !Array.isArray(sourceValue) &&\n      targetValue !== null &&\n      typeof targetValue === 'object' &&\n      !Array.isArray(targetValue)\n    ) {\n      applySnapshot(targetValue, sourceValue)\n      continue\n    }\n\n    if (Array.isArray(sourceValue)) {\n      o(target).set(key, copy(sourceValue))\n      continue\n    }\n\n    o(target).set(key, sourceValue)\n  }\n}\n\nexport function useFormFields(options: Options) {\n  const { props } = options\n  const fields: Record<string, FormFieldItem> = {}\n\n  let willValidate = true\n\n  /** model 初始快照，供 reset 恢复 */\n  let initialSnapshot: Record<string, any> | undefined\n\n  function runWithoutChangeValidate(fn: () => void) {\n    willValidate = false\n    fn()\n    nextTick(() => {\n      willValidate = true\n    })\n  }\n\n  function shouldValidate() {\n    return willValidate\n  }\n\n  watch(\n    () => props.model,\n    (model) => {\n      initialSnapshot = model ? copy(model) : undefined\n    },\n    { immediate: true, deep: false }\n  )\n\n  function registerField(field: string, item: FormFieldItem) {\n    fields[field] = item\n  }\n\n  function unregisterField(field: string) {\n    delete fields[field]\n  }\n\n  function clearValidate() {\n    Object.values(fields).forEach((item) => item.clearValidate?.())\n  }\n\n  async function validate(keys?: string[]) {\n    let validList: boolean[]\n    if (keys) {\n      validList = await Promise.all(\n        keys.map((key) => fields[key]?.validate() ?? Promise.resolve(true))\n      )\n    } else {\n      validList = await Promise.all(Object.values(fields).map((field) => field.validate()))\n    }\n    return validList.every((valid) => valid)\n  }\n\n  function reset() {\n    if (!props.model || !initialSnapshot) return\n\n    runWithoutChangeValidate(() => {\n      applySnapshot(props.model!, initialSnapshot!)\n      Object.values(fields).forEach((item) => item.clearValidate?.())\n    })\n  }\n\n  return { fields, registerField, validate, unregisterField, clearValidate, reset, shouldValidate }\n}\n"],"mappings":";;;;AAWA,SAAS,cAAc,QAA6B,QAA6B;CAC/E,KAAK,MAAM,OAAO,OAAO,KAAK,MAAM,GAAG;EACrC,MAAM,cAAc,OAAO;EAC3B,MAAM,cAAc,OAAO;EAE3B,IACE,gBAAgB,QAChB,OAAO,gBAAgB,YACvB,CAAC,MAAM,QAAQ,WAAW,KAC1B,gBAAgB,QAChB,OAAO,gBAAgB,YACvB,CAAC,MAAM,QAAQ,WAAW,GAC1B;GACA,cAAc,aAAa,WAAW;GACtC;EACF;EAEA,IAAI,MAAM,QAAQ,WAAW,GAAG;GAC9B,EAAE,MAAM,CAAC,CAAC,IAAI,KAAK,KAAK,WAAW,CAAC;GACpC;EACF;EAEA,EAAE,MAAM,CAAC,CAAC,IAAI,KAAK,WAAW;CAChC;AACF;AAEA,SAAgB,cAAc,SAAkB;CAC9C,MAAM,EAAE,UAAU;CAClB,MAAM,SAAwC,CAAC;CAE/C,IAAI,eAAe;;CAGnB,IAAI;CAEJ,SAAS,yBAAyB,IAAgB;EAChD,eAAe;EACf,GAAG;EACH,eAAe;GACb,eAAe;EACjB,CAAC;CACH;CAEA,SAAS,iBAAiB;EACxB,OAAO;CACT;CAEA,YACQ,MAAM,QACX,UAAU;EACT,kBAAkB,QAAQ,KAAK,KAAK,IAAI,KAAA;CAC1C,GACA;EAAE,WAAW;EAAM,MAAM;CAAM,CACjC;CAEA,SAAS,cAAc,OAAe,MAAqB;EACzD,OAAO,SAAS;CAClB;CAEA,SAAS,gBAAgB,OAAe;EACtC,OAAO,OAAO;CAChB;CAEA,SAAS,gBAAgB;EACvB,OAAO,OAAO,MAAM,CAAC,CAAC,SAAS,SAAS,KAAK,gBAAgB,CAAC;CAChE;CAEA,eAAe,SAAS,MAAiB;EACvC,IAAI;EACJ,IAAI,MACF,YAAY,MAAM,QAAQ,IACxB,KAAK,KAAK,QAAQ,OAAO,IAAI,EAAE,SAAS,KAAK,QAAQ,QAAQ,IAAI,CAAC,CACpE;OAEA,YAAY,MAAM,QAAQ,IAAI,OAAO,OAAO,MAAM,CAAC,CAAC,KAAK,UAAU,MAAM,SAAS,CAAC,CAAC;EAEtF,OAAO,UAAU,OAAO,UAAU,KAAK;CACzC;CAEA,SAAS,QAAQ;EACf,IAAI,CAAC,MAAM,SAAS,CAAC,iBAAiB;EAEtC,+BAA+B;GAC7B,cAAc,MAAM,OAAQ,eAAgB;GAC5C,OAAO,OAAO,MAAM,CAAC,CAAC,SAAS,SAAS,KAAK,gBAAgB,CAAC;EAChE,CAAC;CACH;CAEA,OAAO;EAAE;EAAQ;EAAe;EAAU;EAAiB;EAAe;EAAO;CAAe;AAClG"}
+{"version":3,"file":"use-form-fields.js","names":[],"sources":["../../../src/components/form/use-form-fields.ts"],"sourcesContent":["import { copy, o } from '@cat-kit/core'\nimport type { FormFieldItem } from '@veltra/utils'\nimport { nextTick, shallowRef, watch } from 'vue'\n\nimport type { FormProps } from '../../types/form'\n\ninterface Options {\n  props: FormProps\n}\n\n/** 按快照逐字段写回 model，支持 undefined 与嵌套对象 */\nfunction applySnapshot(target: Record<string, any>, source: Record<string, any>) {\n  for (const key of Object.keys(source)) {\n    const sourceValue = source[key]\n    const targetValue = target[key]\n\n    if (\n      sourceValue !== null &&\n      typeof sourceValue === 'object' &&\n      !Array.isArray(sourceValue) &&\n      targetValue !== null &&\n      typeof targetValue === 'object' &&\n      !Array.isArray(targetValue)\n    ) {\n      applySnapshot(targetValue, sourceValue)\n      continue\n    }\n\n    if (Array.isArray(sourceValue)) {\n      o(target).set(key, copy(sourceValue))\n      continue\n    }\n\n    o(target).set(key, sourceValue)\n  }\n}\n\nexport function useFormFields(options: Options) {\n  const { props } = options\n  const fields: Record<string, FormFieldItem> = {}\n\n  let willValidate = true\n\n  /** model 初始快照，供 reset 恢复 */\n  const initialSnapshot = shallowRef<Record<string, any> | undefined>()\n\n  function runWithoutChangeValidate(fn: () => void) {\n    willValidate = false\n    fn()\n    nextTick(() => {\n      willValidate = true\n    })\n  }\n\n  function shouldValidate() {\n    return willValidate\n  }\n\n  watch(\n    () => props.model,\n    (model) => {\n      initialSnapshot.value = model ? copy(model) : undefined\n    },\n    { immediate: true, deep: false }\n  )\n\n  function registerField(field: string, item: FormFieldItem) {\n    fields[field] = item\n  }\n\n  function unregisterField(field: string) {\n    delete fields[field]\n  }\n\n  function clearValidate() {\n    Object.values(fields).forEach((item) => item.clearValidate?.())\n  }\n\n  async function validate(keys?: string[]) {\n    let validList: boolean[]\n    if (keys) {\n      validList = await Promise.all(\n        keys.map((key) => fields[key]?.validate() ?? Promise.resolve(true))\n      )\n    } else {\n      validList = await Promise.all(Object.values(fields).map((field) => field.validate()))\n    }\n    return validList.every((valid) => valid)\n  }\n\n  function reset() {\n    if (!props.model || !initialSnapshot.value) return\n\n    runWithoutChangeValidate(() => {\n      applySnapshot(props.model!, initialSnapshot.value!)\n      Object.values(fields).forEach((item) => item.clearValidate?.())\n    })\n  }\n\n  /** 变更前基准数据：优先 initialModel，否则为 model 引用变更时的快照 */\n  function getBaselineModel() {\n    return props.initialModel ?? initialSnapshot.value\n  }\n\n  return {\n    fields,\n    registerField,\n    validate,\n    unregisterField,\n    clearValidate,\n    reset,\n    shouldValidate,\n    getBaselineModel\n  }\n}\n"],"mappings":";;;;AAWA,SAAS,cAAc,QAA6B,QAA6B;CAC/E,KAAK,MAAM,OAAO,OAAO,KAAK,MAAM,GAAG;EACrC,MAAM,cAAc,OAAO;EAC3B,MAAM,cAAc,OAAO;EAE3B,IACE,gBAAgB,QAChB,OAAO,gBAAgB,YACvB,CAAC,MAAM,QAAQ,WAAW,KAC1B,gBAAgB,QAChB,OAAO,gBAAgB,YACvB,CAAC,MAAM,QAAQ,WAAW,GAC1B;GACA,cAAc,aAAa,WAAW;GACtC;EACF;EAEA,IAAI,MAAM,QAAQ,WAAW,GAAG;GAC9B,EAAE,MAAM,CAAC,CAAC,IAAI,KAAK,KAAK,WAAW,CAAC;GACpC;EACF;EAEA,EAAE,MAAM,CAAC,CAAC,IAAI,KAAK,WAAW;CAChC;AACF;AAEA,SAAgB,cAAc,SAAkB;CAC9C,MAAM,EAAE,UAAU;CAClB,MAAM,SAAwC,CAAC;CAE/C,IAAI,eAAe;;CAGnB,MAAM,kBAAkB,WAA4C;CAEpE,SAAS,yBAAyB,IAAgB;EAChD,eAAe;EACf,GAAG;EACH,eAAe;GACb,eAAe;EACjB,CAAC;CACH;CAEA,SAAS,iBAAiB;EACxB,OAAO;CACT;CAEA,YACQ,MAAM,QACX,UAAU;EACT,gBAAgB,QAAQ,QAAQ,KAAK,KAAK,IAAI,KAAA;CAChD,GACA;EAAE,WAAW;EAAM,MAAM;CAAM,CACjC;CAEA,SAAS,cAAc,OAAe,MAAqB;EACzD,OAAO,SAAS;CAClB;CAEA,SAAS,gBAAgB,OAAe;EACtC,OAAO,OAAO;CAChB;CAEA,SAAS,gBAAgB;EACvB,OAAO,OAAO,MAAM,CAAC,CAAC,SAAS,SAAS,KAAK,gBAAgB,CAAC;CAChE;CAEA,eAAe,SAAS,MAAiB;EACvC,IAAI;EACJ,IAAI,MACF,YAAY,MAAM,QAAQ,IACxB,KAAK,KAAK,QAAQ,OAAO,IAAI,EAAE,SAAS,KAAK,QAAQ,QAAQ,IAAI,CAAC,CACpE;OAEA,YAAY,MAAM,QAAQ,IAAI,OAAO,OAAO,MAAM,CAAC,CAAC,KAAK,UAAU,MAAM,SAAS,CAAC,CAAC;EAEtF,OAAO,UAAU,OAAO,UAAU,KAAK;CACzC;CAEA,SAAS,QAAQ;EACf,IAAI,CAAC,MAAM,SAAS,CAAC,gBAAgB,OAAO;EAE5C,+BAA+B;GAC7B,cAAc,MAAM,OAAQ,gBAAgB,KAAM;GAClD,OAAO,OAAO,MAAM,CAAC,CAAC,SAAS,SAAS,KAAK,gBAAgB,CAAC;EAChE,CAAC;CACH;;CAGA,SAAS,mBAAmB;EAC1B,OAAO,MAAM,gBAAgB,gBAAgB;CAC/C;CAEA,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;AACF"}

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')\" :show-delay=\"500\">\n        <span :class=\"cls.e('tip-label')\">\n          <slot name=\"label\">{{ label }}{{ labelPosition === 'top' ? '' : ':' }}</slot>\n        </span>\n      </u-tip>\n      <template v-else>\n        <slot name=\"label\">{{ label }}{{ labelPosition === 'top' ? '' : ':' }}</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: 'UFormItem' })\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 labelPosition = computed(() => props.labelPosition ?? formProps?.labelPosition ?? 'left')\n\nconst className = computed(() => {\n  return [\n    cls.b,\n    cls.m(size.value),\n    bem.is('error', !!errorTip.value),\n    bem.is('label-top', labelPosition.value === 'top')\n  ].join(' ')\n})\n\n/** label样式 */\nconst labelStyles = computed<CSSProperties>(() => {\n  if (labelPosition.value === 'top') return {}\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":""}
+{"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')\" :show-delay=\"500\">\n        <span :class=\"cls.e('tip-label')\">\n          <slot name=\"label\">{{ label }}{{ labelPosition === 'top' ? '' : ':' }}</slot>\n        </span>\n      </u-tip>\n      <template v-else>\n        <slot name=\"label\">{{ label }}{{ labelPosition === 'top' ? '' : ':' }}</slot>\n      </template>\n    </label>\n\n    <section :class=\"cls.e('wrapper')\">\n      <div :class=\"cls.e('content')\">\n        <ContentSlot>\n          <slot></slot>\n        </ContentSlot>\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, extractNormalVNodes, withUnit } from '@veltra/utils'\nimport { injectFormContext } from '@veltra/utils'\nimport {\n  type CSSProperties,\n  type SetupContext,\n  type VNode,\n  cloneVNode,\n  computed,\n  onBeforeUnmount,\n  shallowRef,\n  watch\n} from 'vue'\n\nimport type { FormItemEmits, 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: 'UFormItem' })\n\nconst props = withDefaults(defineProps<FormItemProps>(), { readonly: undefined })\n\nconst emit = defineEmits<FormItemEmits>()\n\ndefineSlots<{\n  /** 标签插槽 */\n  label?: () => any\n  default?: () => any\n}>()\n\n/** 表单组件上下文 */\nconst {\n  formProps,\n  registerField,\n  unregisterField,\n  shouldValidate,\n  handleFieldUpdate,\n  handleFieldChange\n} = injectFormContext()\n\nfunction wrapControlChange(node: VNode) {\n  if (!node || typeof node.type === 'symbol') return node\n\n  return cloneVNode(node, {\n    onChange: (...args: any[]) => {\n      emit('change', ...args)\n      if (props.field) handleFieldChange?.(props.field, ...args)\n    }\n  })\n}\n\n/**\n * 承载默认插槽并拦截控件 change。\n * 必须经填充插槽接收内容（而非直接读 UFormItem 的 $slots）：\n * 读父级 $slots 时组件自身没有更新路径，父级重渲染后动态 props（disabled、data 等）会冻结在首帧。\n */\nfunction ContentSlot(_: unknown, { slots }: SetupContext) {\n  return extractNormalVNodes(slots.default?.() ?? []).map(wrapControlChange)\n}\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 labelPosition = computed(() => props.labelPosition ?? formProps?.labelPosition ?? 'left')\n\nconst className = computed(() => {\n  return [\n    cls.b,\n    cls.m(size.value),\n    bem.is('error', !!errorTip.value),\n    bem.is('label-top', labelPosition.value === 'top')\n  ].join(' ')\n})\n\n/** label样式 */\nconst labelStyles = computed<CSSProperties>(() => {\n  if (labelPosition.value === 'top') return {}\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        handleFieldUpdate?.(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":""}