@veltra/desktop 1.7.18 → 1.8.0

package/dist/components/expression-editor/expression-editor.js.map

@@ -1 +1 @@
-{"version":3,"file":"expression-editor.js","names":[],"sources":["../../../src/components/expression-editor/expression-editor.vue"],"sourcesContent":["<template>\n  <div :class=\"className\">\n    <div\n      ref=\"container\"\n      :class=\"cls.e('container')\"\n      :contenteditable=\"!readonly && !disabled\"\n      :data-empty=\"isEmpty || undefined\"\n      :data-placeholder=\"props.placeholder\"\n      @keydown=\"onKeydown\"\n      @blur=\"onBlur\"\n    ></div>\n\n    <div v-if=\"showPlaceholder\" :class=\"cls.e('placeholder')\">\n      {{ props.placeholder }}\n    </div>\n\n    <VariablePicker\n      ref=\"pickerRef\"\n      :visible=\"pickerVisible\"\n      :trigger-dom=\"pickerTriggerDom\"\n      :variables=\"props.variables\"\n      :filter=\"pickerFilter\"\n      :selectable-levels=\"props.selectableLevels ?? 'leaf'\"\n      @select=\"onPickerSelect\"\n      @dismiss=\"onPickerDismiss\"\n      @update:visible=\"onPickerVisibleChange\"\n    />\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useFormFallbackProps } from '@veltra/compositions'\nimport { bem } from '@veltra/utils'\nimport { injectFormContext } from '@veltra/utils'\nimport {\n  computed,\n  nextTick,\n  onBeforeUnmount,\n  onMounted,\n  shallowRef,\n  useTemplateRef,\n  watch\n} from 'vue'\n\nimport type { ExpressionEditorProps, VariableItem } from '../../types'\nimport VariablePicker from './components/variable-picker.vue'\nimport { createEditor, type EditorAPI } from './core/editor'\nimport { createMention, type MentionAPI } from './core/mention'\nimport { parse, type Doc } from './core/model'\nimport { createVariableMap } from './di'\n\ndefineOptions({ name: 'UExpressionEditor' })\n\nconst props = withDefaults(defineProps<ExpressionEditorProps>(), {\n  placeholder: '请输入表达式，输入 @ 可插入变量',\n  selectableLevels: 'leaf'\n})\n\nconst emit = defineEmits<{ (e: 'update:modelValue', value: string): void }>()\n\nconst cls = bem('expression-editor')\nconst { formProps } = injectFormContext()\nconst { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props])\n\nconst containerRef = useTemplateRef<HTMLDivElement>('container')\nconst pickerRef = useTemplateRef<{ handleKeydown: (e: KeyboardEvent) => boolean }>('pickerRef')\n\nconst className = computed(() => [\n  cls.b,\n  cls.m(size.value),\n  bem.is('disabled', disabled.value),\n  bem.is('readonly', readonly.value)\n])\n\nconst variableMap = computed(() => createVariableMap(props.variables))\n\nconst editorRef = shallowRef<EditorAPI | null>(null)\nconst mention: MentionAPI = createMention()\n\nconst currentDoc = shallowRef<Doc>([])\nconst isEmpty = computed(() => currentDoc.value.length === 0)\nconst showPlaceholder = computed(() => isEmpty.value && !disabled.value)\n\nconst pickerMode = shallowRef<'mention' | 'reselect' | null>(null)\nconst pickerTriggerDom = shallowRef<HTMLElement | undefined>(undefined)\nconst reselectingSegIdx = shallowRef<number | null>(null)\nconst pickerFilter = shallowRef('')\n\nconst pickerVisible = computed(() => pickerMode.value !== null)\n\nfunction syncMention() {\n  const editor = editorRef.value\n  if (!editor) return\n  if (pickerMode.value === 'reselect') return\n  const caret = editor.getCaretOffset()\n  const state = mention.update(currentDoc.value, caret)\n  if (state) {\n    pickerMode.value = 'mention'\n    pickerFilter.value = state.filter\n    pickerTriggerDom.value = containerRef.value ?? undefined\n  } else if (pickerMode.value === 'mention') {\n    closePicker()\n  }\n}\n\nfunction closePicker() {\n  pickerMode.value = null\n  reselectingSegIdx.value = null\n  pickerFilter.value = ''\n}\n\nonMounted(() => {\n  if (!containerRef.value) return\n  const initialDoc = parse(props.modelValue ?? '', variableMap.value)\n  currentDoc.value = initialDoc\n\n  const editor = createEditor({\n    container: containerRef.value,\n    cls,\n    initialDoc,\n    getVariableMap: () => variableMap.value,\n    onChange: (doc) => {\n      currentDoc.value = doc\n      const value = serializeFromDoc(doc)\n      if (value !== (props.modelValue ?? '')) emit('update:modelValue', value)\n      syncMention()\n    },\n    onSelectionChange: () => {\n      syncMention()\n    },\n    onChipReselect: ({ chipEl, segIndex }) => {\n      if (disabled.value || readonly.value) return\n      mention.commit()\n      pickerMode.value = 'reselect'\n      pickerFilter.value = ''\n      pickerTriggerDom.value = chipEl\n      reselectingSegIdx.value = segIndex\n    },\n    onChipRemove: ({ segIndex }) => {\n      if (disabled.value || readonly.value) return\n      editor.removeVarAt(segIndex)\n    }\n  })\n  editorRef.value = editor\n})\n\nonBeforeUnmount(() => {\n  editorRef.value?.dispose()\n})\n\nfunction serializeFromDoc(doc: Doc): string {\n  let s = ''\n  for (const seg of doc) s += seg.kind === 'text' ? seg.value : `{${seg.value}}`\n  return s\n}\n\nwatch(\n  () => props.modelValue,\n  (v) => {\n    const editor = editorRef.value\n    if (!editor) return\n    if (v === editor.getValue()) return\n    editor.setValue(v ?? '')\n  }\n)\n\nwatch(variableMap, () => {\n  // variables 变化：重渲染以刷新 chip label / type\n  const editor = editorRef.value\n  if (!editor) return\n  editor.setValue(editor.getValue())\n})\n\nfunction onKeydown(e: KeyboardEvent) {\n  if (disabled.value || readonly.value) return\n  // mention / reselect 激活时，优先把箭头键 / Enter / Esc 转给 picker\n  if (pickerMode.value !== null) {\n    const handledByPicker = pickerRef.value?.handleKeydown(e)\n    if (handledByPicker) {\n      e.preventDefault()\n      return\n    }\n  }\n\n  if (pickerMode.value === 'mention') {\n    // 这些键导致 mention 退出（保留 @filter 文本，光标继续移动）\n    if (e.key === ' ' || e.key === 'ArrowLeft' || e.key === 'ArrowRight') {\n      mention.dismiss()\n      closePicker()\n    }\n  }\n}\n\nfunction onBlur() {\n  if (pickerMode.value === 'mention') {\n    mention.dismiss()\n    // 下一帧再关闭，避免和 picker 内 click 冲突\n    void nextTick(() => closePicker())\n  }\n}\n\nfunction onPickerSelect(item: VariableItem) {\n  const editor = editorRef.value\n  if (!editor) return\n\n  if (pickerMode.value === 'mention') {\n    const state = mention.getState()\n    if (!state) return\n    const anchor = state.anchorOffset\n    const caret = editor.getCaretOffset() ?? anchor + state.filter.length + 1\n    editor.replaceRangeWithVar(anchor, caret, {\n      value: item.value,\n      label: item.label,\n      ...(item.type ? { type: item.type } : {})\n    })\n    mention.commit()\n  } else if (pickerMode.value === 'reselect') {\n    const idx = reselectingSegIdx.value\n    if (idx !== null) {\n      editor.replaceVarAt(idx, {\n        value: item.value,\n        label: item.label,\n        ...(item.type ? { type: item.type } : {})\n      })\n    }\n  }\n  closePicker()\n}\n\nfunction onPickerDismiss() {\n  if (pickerMode.value === 'mention') mention.dismiss()\n  closePicker()\n}\n\nfunction onPickerVisibleChange(v: boolean) {\n  if (!v && pickerMode.value !== null) {\n    if (pickerMode.value === 'mention') mention.dismiss()\n    closePicker()\n  }\n}\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"expression-editor.js","names":[],"sources":["../../../src/components/expression-editor/expression-editor.vue"],"sourcesContent":["<template>\n  <div ref=\"rootEl\" :class=\"cls.b\">\n    <!-- 提示行独立在边框盒（shell）之外 -->\n    <div v-if=\"showHint\" :class=\"cls.e('hint')\">输入 <kbd>@</kbd> 唤起变量面板</div>\n\n    <div :class=\"shellClass\">\n      <div :class=\"cls.e('body')\">\n        <div\n          ref=\"container\"\n          :class=\"cls.e('container')\"\n          :contenteditable=\"!readonly && !disabled\"\n          :data-empty=\"isEmpty || undefined\"\n          :data-placeholder=\"props.placeholder\"\n          @keydown=\"onKeydown\"\n          @blur=\"onBlur\"\n        ></div>\n\n        <div v-if=\"showPlaceholder\" :class=\"cls.e('placeholder')\">\n          {{ props.placeholder }}\n        </div>\n      </div>\n\n      <!-- mention 面板的定位锚点：跟随 `@` 字符位置（见 positionMentionAnchor） -->\n      <span ref=\"mentionAnchor\" :class=\"cls.e('mention-anchor')\" aria-hidden=\"true\"></span>\n    </div>\n\n    <VariablePicker\n      ref=\"pickerRef\"\n      :visible=\"pickerVisible\"\n      :trigger-dom=\"pickerTriggerDom\"\n      :variables=\"props.variables\"\n      :filter=\"pickerFilter\"\n      :selectable-levels=\"props.selectableLevels ?? 'leaf'\"\n      @select=\"onPickerSelect\"\n      @dismiss=\"onPickerDismiss\"\n      @update:visible=\"onPickerVisibleChange\"\n    />\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useFormFallbackProps } from '@veltra/compositions'\nimport { bem } from '@veltra/utils'\nimport { injectFormContext } from '@veltra/utils'\nimport {\n  computed,\n  nextTick,\n  onBeforeUnmount,\n  onMounted,\n  shallowRef,\n  useTemplateRef,\n  watch\n} from 'vue'\n\nimport type { ExpressionEditorProps, VariableItem } from '../../types'\nimport VariablePicker from './components/variable-picker.vue'\nimport { createEditor, type EditorAPI } from './core/editor'\nimport { createMention, type MentionAPI } from './core/mention'\nimport { parse, type Doc } from './core/model'\nimport { createVariableMap } from './di'\n\ndefineOptions({ name: 'UExpressionEditor' })\n\nconst props = withDefaults(defineProps<ExpressionEditorProps>(), {\n  placeholder: '请输入表达式，输入 @ 可插入变量',\n  selectableLevels: 'leaf'\n})\n\nconst emit = defineEmits<{ (e: 'update:modelValue', value: string): void }>()\n\nconst cls = bem('expression-editor')\nconst { formProps } = injectFormContext()\nconst { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props])\n\nconst containerRef = useTemplateRef<HTMLDivElement>('container')\nconst rootElRef = useTemplateRef<HTMLDivElement>('rootEl')\nconst mentionAnchorRef = useTemplateRef<HTMLSpanElement>('mentionAnchor')\nconst pickerRef = useTemplateRef<{ handleKeydown: (e: KeyboardEvent) => boolean }>('pickerRef')\n\n/** 视觉盒（边框 / 背景 / 聚焦光晕 / 尺寸态）挂在 shell 上，根节点只做布局 */\nconst shellClass = computed(() => [\n  cls.e('shell'),\n  cls.em('shell', size.value),\n  bem.is('disabled', disabled.value),\n  bem.is('readonly', readonly.value)\n])\n\nconst variableMap = computed(() => createVariableMap(props.variables))\n\nconst editorRef = shallowRef<EditorAPI | null>(null)\nconst mention: MentionAPI = createMention()\n\nconst currentDoc = shallowRef<Doc>([])\nconst isEmpty = computed(() => currentDoc.value.length === 0)\nconst showPlaceholder = computed(() => isEmpty.value && !disabled.value)\nconst showHint = computed(() => isEmpty.value && !disabled.value && !readonly.value)\n\nconst pickerMode = shallowRef<'mention' | 'reselect' | null>(null)\nconst pickerTriggerDom = shallowRef<HTMLElement | undefined>(undefined)\nconst reselectingSegIdx = shallowRef<number | null>(null)\nconst pickerFilter = shallowRef('')\n\nconst pickerVisible = computed(() => pickerMode.value !== null)\n\n/** 把 mention 锚点移到 `@` 字符下方，面板据此定位 */\nfunction positionMentionAnchor(anchorOffset: number) {\n  const rootEl = rootElRef.value\n  const anchor = mentionAnchorRef.value\n  const rect = editorRef.value?.getRectAtOffset(anchorOffset)\n  if (!rootEl || !anchor || !rect) return\n  // absolute 定位以 padding box 为基准，需扣除根节点边框宽度\n  const rootRect = rootEl.getBoundingClientRect()\n  anchor.style.left = `${rect.left - rootRect.left - rootEl.clientLeft}px`\n  anchor.style.top = `${rect.bottom - rootRect.top - rootEl.clientTop}px`\n}\n\nfunction syncMention() {\n  const editor = editorRef.value\n  if (!editor) return\n  if (pickerMode.value === 'reselect') return\n  const caret = editor.getCaretOffset()\n  const state = mention.update(currentDoc.value, caret)\n  if (state) {\n    pickerMode.value = 'mention'\n    pickerFilter.value = state.filter\n    positionMentionAnchor(state.anchorOffset)\n    pickerTriggerDom.value = mentionAnchorRef.value ?? containerRef.value ?? undefined\n  } else if (pickerMode.value === 'mention') {\n    closePicker()\n  }\n}\n\nfunction closePicker() {\n  pickerMode.value = null\n  reselectingSegIdx.value = null\n  pickerFilter.value = ''\n}\n\nonMounted(() => {\n  if (!containerRef.value) return\n  const initialDoc = parse(props.modelValue ?? '', variableMap.value)\n  currentDoc.value = initialDoc\n\n  const editor = createEditor({\n    container: containerRef.value,\n    cls,\n    initialDoc,\n    getVariableMap: () => variableMap.value,\n    onChange: (doc) => {\n      currentDoc.value = doc\n      const value = serializeFromDoc(doc)\n      if (value !== (props.modelValue ?? '')) emit('update:modelValue', value)\n      syncMention()\n    },\n    onSelectionChange: () => {\n      syncMention()\n    },\n    onChipReselect: ({ chipEl, segIndex }) => {\n      if (disabled.value || readonly.value) return\n      mention.commit()\n      pickerMode.value = 'reselect'\n      pickerFilter.value = ''\n      pickerTriggerDom.value = chipEl\n      reselectingSegIdx.value = segIndex\n      // chip 的 mousedown 被 preventDefault，编辑器没有焦点时点击 chip 焦点不会转移，\n      // 键盘导航依赖 container 的 keydown，这里主动把焦点拉回编辑器\n      containerRef.value?.focus()\n    }\n  })\n  editorRef.value = editor\n})\n\nonBeforeUnmount(() => {\n  editorRef.value?.dispose()\n})\n\nfunction serializeFromDoc(doc: Doc): string {\n  let s = ''\n  for (const seg of doc) s += seg.kind === 'text' ? seg.value : `{${seg.value}}`\n  return s\n}\n\nwatch(\n  () => props.modelValue,\n  (v) => {\n    const editor = editorRef.value\n    if (!editor) return\n    if (v === editor.getValue()) return\n    editor.setValue(v ?? '')\n  }\n)\n\nwatch(variableMap, () => {\n  // variables 变化：重渲染以刷新 chip label / type\n  const editor = editorRef.value\n  if (!editor) return\n  editor.setValue(editor.getValue())\n})\n\nfunction onKeydown(e: KeyboardEvent) {\n  if (disabled.value || readonly.value) return\n  // mention / reselect 激活时，优先把箭头键 / Enter / Esc 转给 picker\n  if (pickerMode.value !== null) {\n    const handledByPicker = pickerRef.value?.handleKeydown(e)\n    if (handledByPicker) {\n      e.preventDefault()\n      return\n    }\n  }\n\n  if (pickerMode.value === 'mention') {\n    // 这些键导致 mention 退出（保留 @filter 文本，光标继续移动）\n    if (e.key === ' ' || e.key === 'ArrowLeft' || e.key === 'ArrowRight') {\n      mention.dismiss()\n      closePicker()\n    }\n  }\n}\n\nfunction onBlur() {\n  if (pickerMode.value === 'mention') {\n    mention.dismiss()\n    // 下一帧再关闭，避免和 picker 内 click 冲突\n    void nextTick(() => closePicker())\n  }\n}\n\nfunction onPickerSelect(item: VariableItem) {\n  const editor = editorRef.value\n  if (!editor) return\n\n  if (pickerMode.value === 'mention') {\n    const state = mention.getState()\n    if (!state) return\n    const anchor = state.anchorOffset\n    const caret = editor.getCaretOffset() ?? anchor + state.filter.length + 1\n    editor.replaceRangeWithVar(anchor, caret, {\n      value: item.value,\n      label: item.label,\n      ...(item.type ? { type: item.type } : {})\n    })\n    mention.commit()\n  } else if (pickerMode.value === 'reselect') {\n    const idx = reselectingSegIdx.value\n    if (idx !== null) {\n      editor.replaceVarAt(idx, {\n        value: item.value,\n        label: item.label,\n        ...(item.type ? { type: item.type } : {})\n      })\n    }\n  }\n  closePicker()\n}\n\nfunction onPickerDismiss() {\n  if (pickerMode.value === 'mention') mention.dismiss()\n  closePicker()\n}\n\nfunction onPickerVisibleChange(v: boolean) {\n  if (!v && pickerMode.value !== null) {\n    if (pickerMode.value === 'mention') mention.dismiss()\n    closePicker()\n  }\n}\n</script>\n"],"mappings":"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"}

package/dist/components/expression-editor/style2.css

@@ -17,45 +17,108 @@
 /** 暗色：`UITheme.render()` 按主题系列写入 html[data-theme] */
 .u-expression-editor {
   position: relative;
+  width: 100%;
+}
+.u-expression-editor__shell {
   background-color: var(--u-bg-color-top);
   border-width: var(--u-border-width);
   border-style: var(--u-border-style);
   border-color: var(--u-border-muted-color);
   border-radius: var(--u-radius-default);
-  width: 100%;
+  transition: border-color var(--u-transition-fast) var(--u-transition-ease), box-shadow var(--u-transition-fast) var(--u-transition-ease);
 }
-.u-expression-editor:not(.is-disabled):not(.is-readonly):hover {
+.u-expression-editor__shell:not(.is-disabled):not(.is-readonly):hover {
   border-color: var(--u-color-primary);
 }
-.u-expression-editor:not(.is-disabled):not(.is-readonly):focus-within {
+.u-expression-editor__shell:not(.is-disabled):not(.is-readonly):focus-within {
   border-color: var(--u-color-primary);
+  box-shadow: var(--u-focus-ring);
   outline: none;
 }
-.u-expression-editor.is-disabled {
+.u-expression-editor__shell.is-disabled {
   background-color: var(--u-color-disabled);
   cursor: not-allowed;
   border-color: var(--u-border-muted-color);
 }
-.u-expression-editor.is-disabled:hover {
+.u-expression-editor__shell.is-disabled:hover {
   border-color: var(--u-border-muted-color);
 }
-.u-expression-editor.is-readonly {
+.u-expression-editor__shell.is-readonly {
   background-color: var(--u-bg-color-middle);
   cursor: default;
   border-color: var(--u-border-muted-color);
   user-select: text;
 }
-.u-expression-editor.is-readonly:hover {
+.u-expression-editor__shell.is-readonly:hover {
   border-color: var(--u-border-muted-color);
 }
+.u-expression-editor__shell--small {
+  min-height: var(--u-form-component-height-small);
+  padding: var(--u-gap-small);
+}
+.u-expression-editor__shell--small .u-expression-editor__placeholder {
+  font-size: var(--u-font-size-main-small);
+}
+.u-expression-editor__shell--small .u-expression-editor__container {
+  font-size: var(--u-font-size-main-small);
+}
+.u-expression-editor__shell--default {
+  min-height: var(--u-form-component-height-default);
+  padding: var(--u-gap-default);
+}
+.u-expression-editor__shell--default .u-expression-editor__placeholder {
+  font-size: var(--u-font-size-main-default);
+}
+.u-expression-editor__shell--default .u-expression-editor__container {
+  font-size: var(--u-font-size-main-default);
+}
+.u-expression-editor__shell--large {
+  min-height: var(--u-form-component-height-large);
+  padding: var(--u-gap-large);
+}
+.u-expression-editor__shell--large .u-expression-editor__placeholder {
+  font-size: var(--u-font-size-main-large);
+}
+.u-expression-editor__shell--large .u-expression-editor__container {
+  font-size: var(--u-font-size-main-large);
+}
 .u-expression-editor__placeholder {
   position: absolute;
+  top: 0;
+  left: 0;
   color: var(--u-text-color-placeholder);
   pointer-events: none;
   user-select: none;
   transition: opacity 0.2s ease;
   font-weight: 400;
 }
+.u-expression-editor__body {
+  position: relative;
+}
+.u-expression-editor__hint {
+  font-size: var(--u-font-size-main-small);
+  color: var(--u-text-color-placeholder);
+  user-select: none;
+  margin-bottom: 4px;
+}
+.u-expression-editor__mention-anchor {
+  position: absolute;
+  width: 0;
+  height: 0;
+  pointer-events: none;
+}
+.u-expression-editor__hint kbd, .u-expression-editor__picker-hint kbd {
+  display: inline-block;
+  min-width: 18px;
+  padding: 1px 4px;
+  border: var(--u-border);
+  border-radius: var(--u-radius-small);
+  font-size: 11px;
+  line-height: 1.4;
+  text-align: center;
+  color: var(--u-text-color-second);
+  background-color: var(--u-bg-color-top);
+}
 .u-expression-editor__container {
   position: relative;
   outline: none;
@@ -93,80 +156,65 @@
   background-color: var(--u-expression-editor-chip-bg, var(--u-color-primary-light-7));
   box-shadow: 0 1px 4px var(--u-shadow-color);
 }
-.u-expression-editor__chip:hover .u-expression-editor__chip-close {
-  opacity: 1;
-  max-width: 14px;
-  margin-left: 2px;
-}
 .u-expression-editor__chip.is-focused {
   box-shadow: 0 0 0 2px var(--u-color-primary-light-7);
 }
 .u-expression-editor__chip-label {
   pointer-events: none;
 }
-.u-expression-editor__chip-close {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 14px;
-  max-width: 0;
-  margin-left: 0;
-  overflow: hidden;
-  font-size: 14px;
-  line-height: 1;
-  color: var(--u-color-primary);
-  opacity: 0;
-  transition: opacity 0.12s ease, max-width 0.12s ease, margin-left 0.12s ease;
-  cursor: pointer;
-}
-.u-expression-editor__chip-close:hover {
-  transform: scale(1.1);
-}
 .u-expression-editor__picker {
-  min-width: 220px;
+  margin: calc(var(--u-gap-default) * -1);
+  min-width: 240px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
   background-color: var(--u-bg-color-top);
+  border: var(--u-border);
+  border-radius: var(--u-radius-default);
+  backdrop-filter: var(--u-bg-filter);
+  -webkit-backdrop-filter: var(--u-bg-filter);
 }
 .u-expression-editor__picker-body {
+  flex: 1 1 auto;
+  min-height: 0;
   display: flex;
   align-items: stretch;
-  min-height: 200px;
 }
 .u-expression-editor__panel {
   flex: 1 1 auto;
   min-width: 0;
   max-height: 320px;
+  display: flex;
+  flex-direction: column;
 }
 .u-expression-editor__panel-list {
-  height: 100%;
-  min-height: 200px;
+  flex: 1 1 auto;
+  min-height: 0;
 }
 .u-expression-editor__panel-content {
-  padding: 4px 0;
+  padding: 4px;
 }
 .u-expression-editor__item {
-  padding: 6px 12px;
-  cursor: pointer;
-  user-select: none;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 8px;
-  transition: background-color 0.12s ease, color 0.12s ease;
-  color: var(--u-text-color-main);
-  font-size: 13px;
-  line-height: 1.4;
+  gap: var(--u-gap-default);
+  height: var(--u-form-component-height-default);
+  padding: 0 var(--u-gap-default);
   border-radius: var(--u-radius-small);
-  margin: 1px 4px;
+  font-size: var(--u-font-size-main-default);
+  color: var(--u-text-color-main);
+  cursor: pointer;
+  user-select: none;
+  transition: background-color 0.15s ease, color 0.15s ease;
 }
 .u-expression-editor__item.is-active {
-  background-color: var(--u-color-primary);
-  color: var(--u-text-color-white);
-}
-.u-expression-editor__item.is-active .u-expression-editor__item-expand {
-  color: var(--u-text-color-white);
+  background-color: var(--u-bg-color-hover);
+  color: var(--u-text-color-title);
 }
 .u-expression-editor__item-label {
   flex: 1;
+  min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -175,31 +223,59 @@
   flex-shrink: 0;
   color: var(--u-text-color-placeholder);
   font-size: 12px;
+  box-sizing: content-box;
+  padding: 6px;
+  margin: -6px;
+  border-radius: var(--u-radius-small);
+  cursor: pointer;
+  transition: color 0.15s ease, background-color 0.15s ease;
+}
+.u-expression-editor__item-expand:hover {
+  color: var(--u-color-primary);
+  background-color: var(--u-bg-color-hover);
 }
 .u-expression-editor__empty {
   flex: 1;
   padding: 32px 16px;
   text-align: center;
 }
-.u-expression-editor__breadcrumbs {
+.u-expression-editor__picker-hint {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
+  gap: 4px 12px;
   padding: 6px 10px;
+  border-top: var(--u-border);
+  font-size: var(--u-font-size-main-small);
+  color: var(--u-text-color-placeholder);
+  user-select: none;
+}
+.u-expression-editor__picker-hint span {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+}
+.u-expression-editor__breadcrumbs {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 2px;
+  padding: 6px 8px;
+  background-color: var(--u-bg-color-middle);
   border-bottom: var(--u-border);
-  font-size: 12px;
+  font-size: var(--u-font-size-main-small);
   color: var(--u-text-color-second);
 }
 .u-expression-editor__breadcrumb-item {
   display: inline-flex;
   align-items: center;
-  gap: 4px;
+  gap: 2px;
 }
 .u-expression-editor__breadcrumb-link {
-  cursor: pointer;
-  transition: color 0.12s ease, background-color 0.12s ease;
-  padding: 2px 6px;
+  padding: 3px 6px;
   border-radius: var(--u-radius-small);
+  cursor: pointer;
+  transition: color 0.15s ease, background-color 0.15s ease;
 }
 .u-expression-editor__breadcrumb-link:hover {
   color: var(--u-color-primary);
@@ -210,7 +286,7 @@
   font-weight: 600;
 }
 .u-expression-editor__breadcrumb-separator {
-  font-size: 10px;
+  font-size: 12px;
   color: var(--u-text-color-placeholder);
 }
 .u-expression-editor__path-preview {
@@ -218,7 +294,7 @@
   border-left: var(--u-border);
   padding: 8px 12px;
   background-color: var(--u-bg-color-middle);
-  font-size: 12px;
+  font-size: var(--u-font-size-main-small);
 }
 .u-expression-editor__path-preview-title {
   color: var(--u-text-color-second);
@@ -236,52 +312,15 @@
   gap: 4px;
   line-height: 1.6;
   color: var(--u-text-color-main);
+  padding-left: calc(var(--depth, 0) * 12px);
 }
 .u-expression-editor__path-tree-item.is-active {
   color: var(--u-color-primary);
   font-weight: 600;
 }
-.u-expression-editor__path-tree-branch {
-  color: var(--u-text-color-placeholder);
-}
 .u-expression-editor__path-tree-label {
+  min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.u-expression-editor--small {
-  min-height: var(--u-form-component-height-small);
-  padding: var(--u-gap-small);
-}
-.u-expression-editor--small .u-expression-editor__placeholder {
-  top: var(--u-gap-small);
-  left: var(--u-gap-small);
-  font-size: var(--u-font-size-main-small);
-}
-.u-expression-editor--small .u-expression-editor__container {
-  font-size: var(--u-font-size-main-small);
-}
-.u-expression-editor--default {
-  min-height: var(--u-form-component-height-default);
-  padding: var(--u-gap-default);
-}
-.u-expression-editor--default .u-expression-editor__placeholder {
-  top: var(--u-gap-default);
-  left: var(--u-gap-default);
-  font-size: var(--u-font-size-main-default);
-}
-.u-expression-editor--default .u-expression-editor__container {
-  font-size: var(--u-font-size-main-default);
-}
-.u-expression-editor--large {
-  min-height: var(--u-form-component-height-large);
-  padding: var(--u-gap-large);
-}
-.u-expression-editor--large .u-expression-editor__placeholder {
-  top: var(--u-gap-large);
-  left: var(--u-gap-large);
-  font-size: var(--u-font-size-main-large);
-}
-.u-expression-editor--large .u-expression-editor__container {
-  font-size: var(--u-font-size-main-large);
-}

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, renderKey } of getSlotsNodes()\"\n      :key=\"renderKey\"\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=\"createModifiedPreview(node, 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, type VNode } 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 { forkUnmountedVNode, 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\nprovideFormContext({\n  formProps: props,\n  registerField,\n  unregisterField,\n  validateFields: validate,\n  shouldValidate,\n  handleFieldUpdate\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 createModifiedPreview(node: VNode, field: string) {\n  return forkUnmountedVNode(node, { readonly: true, modelValue: getBaselineFieldValue(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":""}
+{"version":3,"file":"form.js","names":[],"sources":["../../../src/components/form/form.vue"],"sourcesContent":["<template>\n  <u-grid\n    tag=\"form\"\n    ref=\"grid\"\n    @submit.prevent\n    :cols=\"cols || breakpointCols\"\n    :class=\"[cls.b, bem.is('readonly', readonly)]\"\n  >\n    <template\n      v-for=\"{ node, isFormItem, formItemProps, field, modelValue, renderKey } of getSlotsNodes()\"\n      :key=\"renderKey\"\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=\"createModifiedPreview(node, 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, type VNode } 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 { forkUnmountedVNode, 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\nprovideFormContext({\n  formProps: props,\n  registerField,\n  unregisterField,\n  validateFields: validate,\n  shouldValidate,\n  handleFieldUpdate\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 createModifiedPreview(node: VNode, field: string) {\n  return forkUnmountedVNode(node, { readonly: true, modelValue: getBaselineFieldValue(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

@@ -90,7 +90,6 @@ var form_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 				tag: "form",
 				ref: "grid",
 				onSubmit: _cache[0] || (_cache[0] = withModifiers(() => {}, ["prevent"])),
-				gap: "0 12px",
 				cols: __props.cols || breakpointCols,
 				class: normalizeClass([unref(cls).b, unref(bem).is("readonly", __props.readonly)])
 			}, {

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, renderKey } of getSlotsNodes()\"\n      :key=\"renderKey\"\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=\"createModifiedPreview(node, 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, type VNode } 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 { forkUnmountedVNode, 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\nprovideFormContext({\n  formProps: props,\n  registerField,\n  unregisterField,\n  validateFields: validate,\n  shouldValidate,\n  handleFieldUpdate\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 createModifiedPreview(node: VNode, field: string) {\n  return forkUnmountedVNode(node, { readonly: true, modelValue: getBaselineFieldValue(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":";;;;;;;;;;;;;;;;;;;;;;;;;;;EA6CA,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,gBACA,qBACE,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,SAAS,sBAAsB,OAAe;GAC5C,OAAO,EAAE,iBAAiB,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,KAAK;EAC9C;EAEA,SAAS,sBAAsB,MAAa,OAAe;GACzD,OAAO,mBAAmB,MAAM;IAAE,UAAU;IAAM,YAAY,sBAAsB,KAAK;GAAE,CAAC;EAC9F;EAEA,SAAS,mBAAmB,OAAe;GACzC,IAAI,CAAC,MAAM,cAAc,OAAO;GAChC,MAAM,WAAW,iBAAiB;GAClC,IAAI,CAAC,YAAY,CAAC,MAAM,OAAO,OAAO;GACtC,MAAM,UAAU,EAAE,MAAM,KAAK,CAAC,CAAC,IAAI,KAAK;GACxC,MAAM,UAAU,EAAE,QAAQ,CAAC,CAAC,IAAI,KAAK;GACrC,OAAO,gBAAgB,SAAS,OAAO;EACzC;EAEA,SAA2B;GAAE,IAAI,YAAY,QAAQ,OAAO,EAAE;GAAG;GAAU;GAAe;EAAM,CAAC;;GAnH/F,OAAA,UAAA,GAAA,YA0BS,MAAA,SAAA,GAAA;IAzBP,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,cAA4F,EAD9F,UAAA,IAAA,GAAA,mBAiBW,UAAA,MAAA,WAhBmE,MAAA,aAAA,CAAa,CAAA,IAAA,EAAhF,MAAM,YAAY,eAAe,OAAO,YAAY,gBAAS;KAChE,OAAA,UAAA,GAAA,mBAAA,UAAA,EAAA,KAAA,UAAS,GAAA,CAEK,CAAA,cAAc,SAAlC,UAAA,GAAA,YAUc,MAAA,iBAAA,GAVd,WAUc;;;KAVmC,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;MAE3C,GAAA,MAAA,GAAA,CAAA,eAAA,qBAAA,CAAA,IAAA,mBAAmB,KAAK,KAAnC,UAAA,GAAA,mBAGM,OAAA;;OAHiC,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,aAAA,CAAA;MACjD,GAAA,CAAA,mBAA8D,QAAA,EAAvD,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,aAAA,CAAA,EAAoB,GAAA,gBAAA,QAAA,aAAa,GAAA,CAAA,IACpD,UAAA,GAAA,YAAsD,wBAAtC,sBAAsB,MAAM,KAAK,CAAA,CAAA,EAAA,GAAA,CAAA,KAAA,mBAAA,QAAA,IAAA,CAAA,CAAA;;KAIrD,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    :cols=\"cols || breakpointCols\"\n    :class=\"[cls.b, bem.is('readonly', readonly)]\"\n  >\n    <template\n      v-for=\"{ node, isFormItem, formItemProps, field, modelValue, renderKey } of getSlotsNodes()\"\n      :key=\"renderKey\"\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=\"createModifiedPreview(node, 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, type VNode } 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 { forkUnmountedVNode, 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\nprovideFormContext({\n  formProps: props,\n  registerField,\n  unregisterField,\n  validateFields: validate,\n  shouldValidate,\n  handleFieldUpdate\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 createModifiedPreview(node: VNode, field: string) {\n  return forkUnmountedVNode(node, { readonly: true, modelValue: getBaselineFieldValue(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":";;;;;;;;;;;;;;;;;;;;;;;;;;;EA4CA,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,gBACA,qBACE,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,SAAS,sBAAsB,OAAe;GAC5C,OAAO,EAAE,iBAAiB,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,KAAK;EAC9C;EAEA,SAAS,sBAAsB,MAAa,OAAe;GACzD,OAAO,mBAAmB,MAAM;IAAE,UAAU;IAAM,YAAY,sBAAsB,KAAK;GAAE,CAAC;EAC9F;EAEA,SAAS,mBAAmB,OAAe;GACzC,IAAI,CAAC,MAAM,cAAc,OAAO;GAChC,MAAM,WAAW,iBAAiB;GAClC,IAAI,CAAC,YAAY,CAAC,MAAM,OAAO,OAAO;GACtC,MAAM,UAAU,EAAE,MAAM,KAAK,CAAC,CAAC,IAAI,KAAK;GACxC,MAAM,UAAU,EAAE,QAAQ,CAAC,CAAC,IAAI,KAAK;GACrC,OAAO,gBAAgB,SAAS,OAAO;EACzC;EAEA,SAA2B;GAAE,IAAI,YAAY,QAAQ,OAAO,EAAE;GAAG;GAAU;GAAe;EAAM,CAAC;;GAlH/F,OAAA,UAAA,GAAA,YAyBS,MAAA,SAAA,GAAA;IAxBP,KAAI;IACJ,KAAI;IACH,UAAM,OAAA,OAAA,OAAA,KAAA,oBAAP,CAAA,GAAe,CAAA,SAAA,CAAA;IACd,MAAM,QAAA,QAAQ;IACd,OAAK,eAAA,CAAG,MAAA,GAAA,CAAG,CAAC,GAAG,MAAA,GAAA,CAAG,CAAC,GAAE,YAAa,QAAA,QAAQ,CAAA,CAAA;;IAGzC,SAAA,cAA4F,EAD9F,UAAA,IAAA,GAAA,mBAiBW,UAAA,MAAA,WAhBmE,MAAA,aAAA,CAAa,CAAA,IAAA,EAAhF,MAAM,YAAY,eAAe,OAAO,YAAY,gBAAS;KAChE,OAAA,UAAA,GAAA,mBAAA,UAAA,EAAA,KAAA,UAAS,GAAA,CAEK,CAAA,cAAc,SAAlC,UAAA,GAAA,YAUc,MAAA,iBAAA,GAVd,WAUc;;;KAVmC,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;MAE3C,GAAA,MAAA,GAAA,CAAA,eAAA,qBAAA,CAAA,IAAA,mBAAmB,KAAK,KAAnC,UAAA,GAAA,mBAGM,OAAA;;OAHiC,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,aAAA,CAAA;MACjD,GAAA,CAAA,mBAA8D,QAAA,EAAvD,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,aAAA,CAAA,EAAoB,GAAA,gBAAA,QAAA,aAAa,GAAA,CAAA,IACpD,UAAA,GAAA,YAAsD,wBAAtC,sBAAsB,MAAM,KAAK,CAAA,CAAA,EAAA,GAAA,CAAA,KAAA,mBAAA,QAAA,IAAA,CAAA,CAAA;;KAIrD,GAAA,IAAA,MAAA,UAAA,GAAA,YAA+B,wBAAR,IAAI,GAAA,EAAA,KAAA,EAAA,CAAA,EAAA,GAAA,EAAA"}

package/dist/components/form/style2.css

@@ -15,15 +15,20 @@
 * --u-height-small: 24px;
 */
 /** 暗色：`UITheme.render()` 按主题系列写入 html[data-theme] */
+.u-form {
+  gap: 0 12px;
+}
 .u-form.is-readonly {
-  gap: 6px;
+  gap: 10px 12px;
 }
 .u-form.is-readonly .u-form-item__label {
-  background-color: var(--u-bg-color-top);
+  color: var(--u-text-color-second);
 }
 .u-form.is-readonly .u-form-item__content {
+  padding: 4px 12px;
+  color: var(--u-text-color-main);
   background-color: var(--u-bg-color-middle);
-  padding: 0 8px;
+  border-radius: var(--u-radius-default);
 }
 .u-form__data-before {
   display: flex;

package/dist/components/index.d.ts

@@ -4,33 +4,33 @@ import _sfc_main$2 from "./scroll/scroll.js";
 import _sfc_main$3 from "./tip/tip.js";
 import _sfc_main$4 from "./dropdown/dropdown.js";
 import input_default from "./input/input.js";
-import _sfc_main$5 from "./select/select.js";
-import _sfc_main$6 from "./condition-editor/condition-editor.js";
-import _sfc_main$7 from "./tabs/tabs-horizontal.js";
-import _sfc_main$8 from "./tabs/tabs-vertical.js";
-import _sfc_main$9 from "./tabs/tabs.js";
-import _sfc_main$10 from "./checkbox/checkbox.js";
-import _sfc_main$11 from "./tree/tree.js";
-import _sfc_main$12 from "./tree-select/tree-select.js";
-import _sfc_main$13 from "./code-editor/code-editor.js";
-import _sfc_main$14 from "./drawer/drawer.js";
-import _sfc_main$15 from "./grid/grid.js";
-import _sfc_main$16 from "./grid/grid-item.js";
+import _sfc_main$5 from "./loading/loading.js";
+import _sfc_main$6 from "./select/select.js";
+import _sfc_main$7 from "./condition-editor/condition-editor.js";
+import _sfc_main$8 from "./tabs/tabs-horizontal.js";
+import _sfc_main$9 from "./tabs/tabs-vertical.js";
+import _sfc_main$10 from "./tabs/tabs.js";
+import _sfc_main$11 from "./checkbox/checkbox.js";
+import _sfc_main$12 from "./tree/tree.js";
+import _sfc_main$13 from "./tree-select/tree-select.js";
+import _sfc_main$14 from "./code-editor/code-editor.js";
+import _sfc_main$15 from "./drawer/drawer.js";
+import _sfc_main$16 from "./grid/grid.js";
+import _sfc_main$17 from "./grid/grid-item.js";
 import form_item_default from "./form-item/form-item.js";
 import form_default from "./form/form.js";
-import _sfc_main$17 from "./button/button.js";
-import _sfc_main$18 from "./button/button-group.js";
-import _sfc_main$19 from "./message-confirm/message-confirm.js";
-import _sfc_main$20 from "./calendar/calendar.js";
-import _sfc_main$21 from "./radio/radio.js";
-import _sfc_main$22 from "./card/card.js";
-import _sfc_main$23 from "./card/card-header.js";
-import _sfc_main$24 from "./card/card-cover.js";
-import _sfc_main$25 from "./card/card-content.js";
-import _sfc_main$26 from "./card/card-action.js";
-import _sfc_main$27 from "./date-panel/date-panel.js";
-import _sfc_main$28 from "./date-range-picker/date-range-picker.js";
-import _sfc_main$29 from "./loading/loading.js";
+import _sfc_main$18 from "./button/button.js";
+import _sfc_main$19 from "./button/button-group.js";
+import _sfc_main$20 from "./message-confirm/message-confirm.js";
+import _sfc_main$21 from "./calendar/calendar.js";
+import _sfc_main$22 from "./radio/radio.js";
+import _sfc_main$23 from "./card/card.js";
+import _sfc_main$24 from "./card/card-header.js";
+import _sfc_main$25 from "./card/card-cover.js";
+import _sfc_main$26 from "./card/card-content.js";
+import _sfc_main$27 from "./card/card-action.js";
+import _sfc_main$28 from "./date-panel/date-panel.js";
+import _sfc_main$29 from "./date-range-picker/date-range-picker.js";
 import _sfc_main$30 from "./progress-nodes/progress-nodes.js";
 import _sfc_main$31 from "./auto-complete/auto-complete.js";
 import _sfc_main$32 from "./progress/progress.js";
@@ -108,4 +108,4 @@ import { defineBatchEditColumns } from "./batch-edit/helper.js";
 import "./batch-edit/index.js";
 import { defineTableColumns } from "./table/use-columns.js";
 import "./table/index.js";
-export { type EvaluateOptions as ConditionEvaluateOptions, ContextmenuPanelDIKey, ContextmenuRootDIKey, _sfc_main$57 as UAction, action_group_default as UActionGroup, _sfc_main$31 as UAutoComplete, _sfc_main$84 as UBadge, _sfc_main$58 as UBatchEdit, _sfc_main$81 as UBreadcrumb, _sfc_main$17 as UButton, _sfc_main$18 as UButtonGroup, _sfc_main$20 as UCalendar, _sfc_main$22 as UCard, _sfc_main$26 as UCardAction, _sfc_main$25 as UCardContent, _sfc_main$24 as UCardCover, _sfc_main$23 as UCardHeader, _sfc_main$60 as UCascade, _sfc_main$48 as UCheckTag, _sfc_main$10 as UCheckbox, _sfc_main$36 as UCheckboxButton, _sfc_main$78 as UCheckboxGroup, _sfc_main$13 as UCodeEditor, _sfc_main$44 as UCollapse, _sfc_main$45 as UCollapseItem, _sfc_main$6 as UConditionEditor, _sfc_main$49 as UContextmenu, _sfc_main$27 as UDatePanel, _sfc_main$62 as UDatePicker, _sfc_main$28 as UDateRangePicker, _sfc_main$52 as UDialog, _sfc_main$14 as UDrawer, _sfc_main$4 as UDropdown, _sfc_main$73 as UDualNav, _sfc_main$1 as UEmpty, _sfc_main$53 as UExpressionEditor, _sfc_main$41 as UFilePicker, _sfc_main$79 as UFileViewer, _sfc_main$83 as UFloatButton, form_default as UForm, form_item_default as UFormItem, _sfc_main$39 as UGanttChart, _sfc_main$15 as UGrid, _sfc_main$75 as UGridInput, _sfc_main$16 as UGridItem, _sfc_main$66 as UGroupInput, _sfc_main$74 as UGroupNav, _sfc_main as UIcon, _sfc_main$86 as UImageCropper, input_default as UInput, _sfc_main$55 as UKbd, _sfc_main$34 as ULayout, _sfc_main$67 as UList, _sfc_main$68 as UListItem, _sfc_main$29 as ULoading, _sfc_main$40 as UMessage, _sfc_main$19 as UMessageConfirm, _sfc_main$37 as UMultiSelect, _sfc_main$65 as UMultiTreeSelect, _sfc_main$72 as UNav, _sfc_main$70 as UNavItem, _sfc_main$71 as UNavSub, NodeRender as UNodeRender, _sfc_main$33 as UNotification, _sfc_main$51 as UNumber, _sfc_main$42 as UNumberInput, _sfc_main$43 as UNumberRangeInput, _sfc_main$82 as UPaginator, _sfc_main$63 as UPalette, _sfc_main$50 as UPasswordInput, _sfc_main$56 as UPopConfirm, _sfc_main$32 as UProgress, _sfc_main$30 as UProgressNodes, _sfc_main$21 as URadio, _sfc_main$77 as URadioGroup, _sfc_main$69 as URichTextEditor, _sfc_main$2 as UScroll, _sfc_main$85 as USegment, _sfc_main$5 as USelect, _sfc_main$38 as USlider, _sfc_main$61 as USteps, _sfc_main$76 as USwitch, _sfc_main$46 as UTable, _sfc_main$47 as UTableEditor, _sfc_main$9 as UTabs, _sfc_main$7 as UTabsHorizontal, _sfc_main$8 as UTabsVertical, _sfc_main$35 as UTag, _sfc_main$80 as UText, _sfc_main$59 as UTextarea, _sfc_main$64 as UTheme, _sfc_main$3 as UTip, _sfc_main$11 as UTree, _sfc_main$12 as UTreeSelect, _sfc_main$54 as UWatermark, contextmenu, createEmptyGroup, createEmptyLeaf, defineBatchEditColumns, defineTableColumns, evaluate as evaluateConditionExpression, message, messageConfirm, notification, vLoading };
+export { type EvaluateOptions as ConditionEvaluateOptions, ContextmenuPanelDIKey, ContextmenuRootDIKey, _sfc_main$57 as UAction, action_group_default as UActionGroup, _sfc_main$31 as UAutoComplete, _sfc_main$84 as UBadge, _sfc_main$58 as UBatchEdit, _sfc_main$81 as UBreadcrumb, _sfc_main$18 as UButton, _sfc_main$19 as UButtonGroup, _sfc_main$21 as UCalendar, _sfc_main$23 as UCard, _sfc_main$27 as UCardAction, _sfc_main$26 as UCardContent, _sfc_main$25 as UCardCover, _sfc_main$24 as UCardHeader, _sfc_main$60 as UCascade, _sfc_main$48 as UCheckTag, _sfc_main$11 as UCheckbox, _sfc_main$36 as UCheckboxButton, _sfc_main$78 as UCheckboxGroup, _sfc_main$14 as UCodeEditor, _sfc_main$44 as UCollapse, _sfc_main$45 as UCollapseItem, _sfc_main$7 as UConditionEditor, _sfc_main$49 as UContextmenu, _sfc_main$28 as UDatePanel, _sfc_main$62 as UDatePicker, _sfc_main$29 as UDateRangePicker, _sfc_main$52 as UDialog, _sfc_main$15 as UDrawer, _sfc_main$4 as UDropdown, _sfc_main$73 as UDualNav, _sfc_main$1 as UEmpty, _sfc_main$53 as UExpressionEditor, _sfc_main$41 as UFilePicker, _sfc_main$79 as UFileViewer, _sfc_main$83 as UFloatButton, form_default as UForm, form_item_default as UFormItem, _sfc_main$39 as UGanttChart, _sfc_main$16 as UGrid, _sfc_main$75 as UGridInput, _sfc_main$17 as UGridItem, _sfc_main$66 as UGroupInput, _sfc_main$74 as UGroupNav, _sfc_main as UIcon, _sfc_main$86 as UImageCropper, input_default as UInput, _sfc_main$55 as UKbd, _sfc_main$34 as ULayout, _sfc_main$67 as UList, _sfc_main$68 as UListItem, _sfc_main$5 as ULoading, _sfc_main$40 as UMessage, _sfc_main$20 as UMessageConfirm, _sfc_main$37 as UMultiSelect, _sfc_main$65 as UMultiTreeSelect, _sfc_main$72 as UNav, _sfc_main$70 as UNavItem, _sfc_main$71 as UNavSub, NodeRender as UNodeRender, _sfc_main$33 as UNotification, _sfc_main$51 as UNumber, _sfc_main$42 as UNumberInput, _sfc_main$43 as UNumberRangeInput, _sfc_main$82 as UPaginator, _sfc_main$63 as UPalette, _sfc_main$50 as UPasswordInput, _sfc_main$56 as UPopConfirm, _sfc_main$32 as UProgress, _sfc_main$30 as UProgressNodes, _sfc_main$22 as URadio, _sfc_main$77 as URadioGroup, _sfc_main$69 as URichTextEditor, _sfc_main$2 as UScroll, _sfc_main$85 as USegment, _sfc_main$6 as USelect, _sfc_main$38 as USlider, _sfc_main$61 as USteps, _sfc_main$76 as USwitch, _sfc_main$46 as UTable, _sfc_main$47 as UTableEditor, _sfc_main$10 as UTabs, _sfc_main$8 as UTabsHorizontal, _sfc_main$9 as UTabsVertical, _sfc_main$35 as UTag, _sfc_main$80 as UText, _sfc_main$59 as UTextarea, _sfc_main$64 as UTheme, _sfc_main$3 as UTip, _sfc_main$12 as UTree, _sfc_main$13 as UTreeSelect, _sfc_main$54 as UWatermark, contextmenu, createEmptyGroup, createEmptyLeaf, defineBatchEditColumns, defineTableColumns, evaluate as evaluateConditionExpression, message, messageConfirm, notification, vLoading };