@veltra/desktop 1.1.1 → 1.1.3

package/dist/components/tree/tree.js.map

@@ -1 +1 @@
-{"version":3,"file":"tree.js","names":[],"sources":["../../../src/components/tree/tree.vue"],"sourcesContent":["<template>\n  <u-scroll\n    :class=\"className\"\n    ref=\"scrollRef\"\n    :content-class=\"[cls.e('wrap'), bem.is('virtual', virtualEnabled)]\"\n  >\n    <template v-if=\"virtualEnabled\">\n      <UTreeNode\n        v-for=\"{ node, key, offset, index } of virtualNodes\"\n        :node=\"node\"\n        :key=\"key\"\n        :class=\"bem.is('selected', node.data === selectedData)\"\n        :index=\"index\"\n        :measure-element=\"measureElement\"\n        :style=\"{ transform: `translateY(${offset}px)` }\"\n      />\n    </template>\n    <template v-else>\n      <UTreeNode\n        v-for=\"node of nodes\"\n        :node=\"node\"\n        :key=\"node.key\"\n        :class=\"bem.is('selected', node.data === selectedData)\"\n      />\n    </template>\n\n    <div :class=\"cls.e('empty')\" v-if=\"!nodes.length\">\n      <UEmpty />\n    </div>\n  </u-scroll>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useFormComponent, useFormFallbackProps, useVirtualizer } from '@veltra/compositions'\nimport { bem, nextFrame, scrollIntoContainerView } from '@veltra/utils'\nimport { computed, provide, shallowRef, useSlots, watch, watchEffect, type VNode } from 'vue'\n\nimport type { TreeProps, TreeEmit, _TreeExposed } from '../../types'\nimport type { ScrollExposed } from '../../types'\nimport { UEmpty } from '../empty'\nimport { UScroll } from '../scroll'\nimport { TreeDIKey, type TreeConText, type TreeSlotsScope } from './di'\nimport UTreeNode from './tree-node.vue'\nimport { useCheck } from './use-check'\nimport { useFilter } from './use-filter'\nimport { useSelect } from './use-select'\nimport { useTreeNodes } from './use-tree-nodes'\n\ndefineOptions({\n  name: 'Tree'\n})\n\nconst props = withDefaults(defineProps<TreeProps>(), {\n  labelKey: 'label',\n  valueKey: 'value',\n  childrenKey: 'children',\n  expandOnClickNode: false,\n  checkStrictly: false,\n  data: () => []\n})\n\nconst emit = defineEmits<TreeEmit>()\n\nconst cls = bem('tree')\n\nconst { formProps } = useFormComponent()\n\nconst { size } = useFormFallbackProps([formProps ?? {}, props], {\n  size: 'default'\n})\n\nconst scrollRef = shallowRef<ScrollExposed>()\n\nconst className = computed(() => {\n  return [\n    cls.b,\n    cls.m(size.value),\n    bem.is('selectable', props.selectable),\n    bem.is('checkable', props.checkable)\n  ]\n})\n\ndefineSlots<{\n  default: (props: TreeSlotsScope) => any\n}>()\n\nconst slots = useSlots()\n\nfunction getTreeSlotsNode(ctx: TreeSlotsScope): VNode[] | string | undefined {\n  return (props.slots?.default ?? slots.default)?.(ctx) ?? ctx.node.label\n}\n\nconst { nodes, forest, getFlattedNodes, nodeDict } = useTreeNodes({\n  props\n})\n\nwatch(\n  [() => props.selectable, () => props.checkable, forest],\n  ([s, c]) => {\n    // 如果选择或勾选，则不更新节点\n    if (s || c) return\n    getFlattedNodes()\n  },\n  { immediate: true }\n)\n\nconst { filter } = useFilter({ forest, getFlattedNodes })\n\nconst { handleSelect, selectedData } = useSelect({\n  props,\n  emit,\n  nodeDict,\n  getFlattedNodes\n})\n\nconst { checkedData, toggleCheck } = useCheck({\n  props,\n  emit,\n  nodeDict,\n  getFlattedNodes\n})\n\nconst estimateSize = (): number => {\n  // 基于 style.scss 中节点稳态高度推算的默认值；\n  // 实际高度仍由 `measureElement` 通过 ResizeObserver 回填覆盖。\n  switch (size.value) {\n    case 'small':\n      return 32\n    case 'large':\n      return 44\n    default:\n      return 36\n  }\n}\n\n// 80 阈值内化为消费者侧语义；低于此值时不启用虚拟化。\nconst virtualEnabled = computed(() => nodes.value.length > 80)\n\nconst { virtualizer, items } = useVirtualizer({\n  count: computed(() => nodes.value.length),\n  scrollEl: () => scrollRef.value?.containerRef ?? null,\n  // 仅在虚拟化启用时把内容容器的 height 撑开到 totalSize；\n  // 关闭时传 null，hook 会清除此前写入的内联 height，回到 CSS 默认。\n  contentEl: () => (virtualEnabled.value ? (scrollRef.value?.contentRef ?? null) : null),\n  estimateSize,\n  gap: 2,\n  // 以节点稳定 key 作为虚拟项身份，展开 / 收起 / 过滤引起的 nodes 数组变更\n  // 保留未移动节点的真实测量值，避免再次滚动首屏抖动。\n  getItemKey: (i) => nodes.value[i]?.key ?? i\n})\n\n// 身份稳定性已由底层 `getItemKey` 保证；直接以 `node.key` 作为 Vue 层 key。\n// `item.index` 仅作为 nodes / snapshot 竞态边缘的 fallback。\nconst virtualNodes = computed(() => {\n  const _nodes = nodes.value\n  return items.value.map((item) => {\n    const node = _nodes[item.index]!\n    return {\n      node,\n      key: node?.key ?? item.index,\n      offset: item.start,\n      index: item.index\n    }\n  })\n})\n\nconst measureElement: (index: number, el: Element | null) => void = (index, el) =>\n  virtualizer.measureElement(index, el)\n\nfunction scrollTo(index: number): void {\n  virtualizer.scrollToIndex(index, { align: 'center' })\n}\n\nfunction scrollIntoView() {\n  const { selectable, checkable, scrollToView } = props\n  if (!scrollToView || (!selectable && !checkable) || !nodes.value) return\n  let index = -1\n\n  if (selectable) {\n    if (!selectedData.value) return\n    index = nodes.value.findIndex((node) => node.data === selectedData.value)\n  } else if (checkable) {\n    if (!checkedData.size) return\n    index = nodes.value.findIndex((node) => checkedData.has(node.data))\n  }\n\n  if (virtualEnabled.value) {\n    scrollTo(index)\n  } else {\n    const { contentRef, containerRef } = scrollRef.value ?? {}\n    const el = contentRef?.children[index]\n    el && scrollIntoContainerView(el as HTMLElement, containerRef ?? null)\n  }\n}\n\nwatchEffect(() => {\n  nextFrame(() => {\n    scrollIntoView()\n  })\n})\n\nprovide(TreeDIKey, {\n  cls,\n  selectedData,\n  checkedData,\n  getFlattedNodes,\n  getTreeSlotsNode,\n  treeEmit: emit as TreeEmit,\n  treeProps: props as TreeProps,\n  toggleCheck: toggleCheck as TreeConText['toggleCheck'],\n  handleSelect: handleSelect as TreeConText['handleSelect']\n})\n\ndefineExpose<_TreeExposed>({\n  filter,\n  forest,\n  nodes,\n  checkNode: toggleCheck,\n  selectNode: handleSelect,\n  checkAll(check: boolean) {\n    forest.value.roots.forEach((node) => {\n      toggleCheck(node, check)\n    })\n  },\n  getSelected() {\n    return selectedData\n  },\n  getChecked() {\n    return Array.from(checkedData)\n  },\n  scrollTo,\n\n  expandAll() {\n    forest.value.dfs((node) => {\n      node.expanded = true\n    })\n    getFlattedNodes()\n  },\n  collapseAll() {\n    forest.value.dfs((node) => {\n      node.expanded = false\n    })\n    getFlattedNodes()\n  }\n})\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"tree.js","names":[],"sources":["../../../src/components/tree/tree.vue"],"sourcesContent":["<template>\n  <u-scroll\n    :class=\"className\"\n    ref=\"scrollRef\"\n    :content-class=\"[cls.e('wrap'), bem.is('virtual', virtualEnabled)]\"\n  >\n    <template v-if=\"virtualEnabled\">\n      <UTreeNode\n        v-for=\"{ node, key, offset, index } of virtualNodes\"\n        :node=\"node\"\n        :key=\"key\"\n        :class=\"bem.is('selected', node.data === selectedData)\"\n        :index=\"index\"\n        :measure-element=\"measureElement\"\n        :style=\"{ transform: `translateY(${offset}px)` }\"\n      />\n    </template>\n    <template v-else>\n      <UTreeNode\n        v-for=\"node of nodes\"\n        :node=\"node\"\n        :key=\"node.key\"\n        :class=\"bem.is('selected', node.data === selectedData)\"\n      />\n    </template>\n\n    <div :class=\"cls.e('empty')\" v-if=\"!nodes.length\">\n      <UEmpty />\n    </div>\n  </u-scroll>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useFormFallbackProps, useVirtualizer } from '@veltra/compositions'\nimport { bem, nextFrame, scrollIntoContainerView } from '@veltra/utils'\nimport { injectFormContext } from '@veltra/utils'\nimport { computed, provide, shallowRef, useSlots, watch, watchEffect, type VNode } from 'vue'\n\nimport type { TreeProps, TreeEmit, _TreeExposed } from '../../types'\nimport type { ScrollExposed } from '../../types'\nimport { UEmpty } from '../empty'\nimport { UScroll } from '../scroll'\nimport { TreeDIKey, type TreeConText, type TreeSlotsScope } from './di'\nimport UTreeNode from './tree-node.vue'\nimport { useCheck } from './use-check'\nimport { useFilter } from './use-filter'\nimport { useSelect } from './use-select'\nimport { useTreeNodes } from './use-tree-nodes'\n\ndefineOptions({\n  name: 'Tree'\n})\n\nconst props = withDefaults(defineProps<TreeProps>(), {\n  labelKey: 'label',\n  valueKey: 'value',\n  childrenKey: 'children',\n  expandOnClickNode: false,\n  checkStrictly: false,\n  data: () => []\n})\n\nconst emit = defineEmits<TreeEmit>()\n\nconst cls = bem('tree')\n\nconst { formProps } = injectFormContext()\n\nconst { size } = useFormFallbackProps([formProps ?? {}, props], {\n  size: 'default'\n})\n\nconst scrollRef = shallowRef<ScrollExposed>()\n\nconst className = computed(() => {\n  return [\n    cls.b,\n    cls.m(size.value),\n    bem.is('selectable', props.selectable),\n    bem.is('checkable', props.checkable)\n  ]\n})\n\ndefineSlots<{\n  default: (props: TreeSlotsScope) => any\n}>()\n\nconst slots = useSlots()\n\nfunction getTreeSlotsNode(ctx: TreeSlotsScope): VNode[] | string | undefined {\n  return (props.slots?.default ?? slots.default)?.(ctx) ?? ctx.node.label\n}\n\nconst { nodes, forest, getFlattedNodes, nodeDict } = useTreeNodes({\n  props\n})\n\nwatch(\n  [() => props.selectable, () => props.checkable, forest],\n  ([s, c]) => {\n    // 如果选择或勾选，则不更新节点\n    if (s || c) return\n    getFlattedNodes()\n  },\n  { immediate: true }\n)\n\nconst { filter } = useFilter({ forest, getFlattedNodes })\n\nconst { handleSelect, selectedData } = useSelect({\n  props,\n  emit,\n  nodeDict,\n  getFlattedNodes\n})\n\nconst { checkedData, toggleCheck } = useCheck({\n  props,\n  emit,\n  nodeDict,\n  getFlattedNodes\n})\n\nconst estimateSize = (): number => {\n  // 基于 style.scss 中节点稳态高度推算的默认值；\n  // 实际高度仍由 `measureElement` 通过 ResizeObserver 回填覆盖。\n  switch (size.value) {\n    case 'small':\n      return 32\n    case 'large':\n      return 44\n    default:\n      return 36\n  }\n}\n\n// 80 阈值内化为消费者侧语义；低于此值时不启用虚拟化。\nconst virtualEnabled = computed(() => nodes.value.length > 80)\n\nconst { virtualizer, items } = useVirtualizer({\n  count: computed(() => nodes.value.length),\n  scrollEl: () => scrollRef.value?.containerRef ?? null,\n  // 仅在虚拟化启用时把内容容器的 height 撑开到 totalSize；\n  // 关闭时传 null，hook 会清除此前写入的内联 height，回到 CSS 默认。\n  contentEl: () => (virtualEnabled.value ? (scrollRef.value?.contentRef ?? null) : null),\n  estimateSize,\n  gap: 2,\n  // 以节点稳定 key 作为虚拟项身份，展开 / 收起 / 过滤引起的 nodes 数组变更\n  // 保留未移动节点的真实测量值，避免再次滚动首屏抖动。\n  getItemKey: (i) => nodes.value[i]?.key ?? i\n})\n\n// 身份稳定性已由底层 `getItemKey` 保证；直接以 `node.key` 作为 Vue 层 key。\n// `item.index` 仅作为 nodes / snapshot 竞态边缘的 fallback。\nconst virtualNodes = computed(() => {\n  const _nodes = nodes.value\n  return items.value.map((item) => {\n    const node = _nodes[item.index]!\n    return {\n      node,\n      key: node?.key ?? item.index,\n      offset: item.start,\n      index: item.index\n    }\n  })\n})\n\nconst measureElement: (index: number, el: Element | null) => void = (index, el) =>\n  virtualizer.measureElement(index, el)\n\nfunction scrollTo(index: number): void {\n  virtualizer.scrollToIndex(index, { align: 'center' })\n}\n\nfunction scrollIntoView() {\n  const { selectable, checkable, scrollToView } = props\n  if (!scrollToView || (!selectable && !checkable) || !nodes.value) return\n  let index = -1\n\n  if (selectable) {\n    if (!selectedData.value) return\n    index = nodes.value.findIndex((node) => node.data === selectedData.value)\n  } else if (checkable) {\n    if (!checkedData.size) return\n    index = nodes.value.findIndex((node) => checkedData.has(node.data))\n  }\n\n  if (virtualEnabled.value) {\n    scrollTo(index)\n  } else {\n    const { contentRef, containerRef } = scrollRef.value ?? {}\n    const el = contentRef?.children[index]\n    el && scrollIntoContainerView(el as HTMLElement, containerRef ?? null)\n  }\n}\n\nwatchEffect(() => {\n  nextFrame(() => {\n    scrollIntoView()\n  })\n})\n\nprovide(TreeDIKey, {\n  cls,\n  selectedData,\n  checkedData,\n  getFlattedNodes,\n  getTreeSlotsNode,\n  treeEmit: emit as TreeEmit,\n  treeProps: props as TreeProps,\n  toggleCheck: toggleCheck as TreeConText['toggleCheck'],\n  handleSelect: handleSelect as TreeConText['handleSelect']\n})\n\ndefineExpose<_TreeExposed>({\n  filter,\n  forest,\n  nodes,\n  checkNode: toggleCheck,\n  selectNode: handleSelect,\n  checkAll(check: boolean) {\n    forest.value.roots.forEach((node) => {\n      toggleCheck(node, check)\n    })\n  },\n  getSelected() {\n    return selectedData\n  },\n  getChecked() {\n    return Array.from(checkedData)\n  },\n  scrollTo,\n\n  expandAll() {\n    forest.value.dfs((node) => {\n      node.expanded = true\n    })\n    getFlattedNodes()\n  },\n  collapseAll() {\n    forest.value.dfs((node) => {\n      node.expanded = false\n    })\n    getFlattedNodes()\n  }\n})\n</script>\n"],"mappings":"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"}

package/dist/components/tree-select/tree-select.js

@@ -3,8 +3,8 @@ import _sfc_main$2 from "../tree/tree.js";
 import _sfc_main$3 from "../dropdown/dropdown.js";
 import input_default from "../input/input.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createSlots, createTextVNode, createVNode, defineComponent, mergeModels, mergeProps, nextTick, normalizeClass, openBlock, renderSlot, shallowRef, toDisplayString, unref, useModel, useSlots, watch, withCtx } from "vue";
-import { FORM_EMPTY_CONTENT, bem } from "@veltra/utils";
-import { useFormComponent, useFormFallbackProps } from "@veltra/compositions";
+import { FORM_EMPTY_CONTENT, bem, injectFormContext } from "@veltra/utils";
+import { useFormFallbackProps } from "@veltra/compositions";
 import { dfs, o } from "@cat-kit/core";
 import { ArrowDown, Search } from "@veltra/icons/normal";
 //#region src/components/tree-select/tree-select.vue
@@ -88,7 +88,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 		});
 		const model = useModel(__props, "modelValue");
 		const label = shallowRef();
-		const { formProps } = useFormComponent();
+		const { formProps } = injectFormContext();
 		const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props]);
 		const treeRef = shallowRef();
 		const dropdownRef = shallowRef();

package/dist/components/tree-select/tree-select.js.map

@@ -1 +1 @@
-{"version":3,"file":"tree-select.js","names":["$slots"],"sources":["../../../src/components/tree-select/tree-select.vue"],"sourcesContent":["<template>\n  <u-dropdown\n    v-if=\"!readonly\"\n    :class=\"[cls.b, bem.is('disabled', disabled)]\"\n    trigger=\"click\"\n    :content-class=\"[cls.e('panel'), cls.em('panel', size), contentClass]\"\n    :content-style=\"contentStyle\"\n    ref=\"dropdownRef\"\n    :min-width=\"minWidth\"\n    :width=\"width\"\n    :disabled=\"disabled\"\n    @update:visible=\"handleDropdownVisible\"\n  >\n    <template #trigger>\n      <u-input\n        :size=\"size\"\n        :disabled=\"disabled\"\n        :placeholder=\"placeholder\"\n        :clearable=\"clearable\"\n        :model-value=\"text ?? (model ? label : undefined)\"\n        @clear=\"handleClear\"\n        native-readonly\n      >\n        <template #prefix v-if=\"$slots.prefix\">\n          <slot name=\"prefix\" />\n        </template>\n        <template #suffix>\n          <u-icon :class=\"cls.e('arrow')\"><ArrowDown /></u-icon>\n        </template>\n      </u-input>\n    </template>\n    <template #content>\n      <!-- 过滤器 -->\n      <div v-if=\"filterable\" :class=\"[cls.e('content-filter'), cls.m(size)]\">\n        <u-input placeholder=\"输入关键字进行过滤\" v-model=\"qs\">\n          <template #suffix>\n            <u-icon><Search /></u-icon>\n          </template>\n        </u-input>\n      </div>\n      <!-- 菜单列表 -->\n\n      <u-tree\n        v-bind=\"treeProps\"\n        :selected=\"model\"\n        @update:selected=\"handleSelect\"\n        ref=\"treeRef\"\n        selectable\n        :class=\"cls.e('content-tree')\"\n        :slots=\"slots\"\n        scroll-to-view\n      />\n    </template>\n  </u-dropdown>\n\n  <template v-else>\n    {{ text || label || FORM_EMPTY_CONTENT }}\n  </template>\n</template>\n\n<script lang=\"ts\" setup>\nimport { dfs, o } from '@cat-kit/core'\nimport { useFormComponent, useFormFallbackProps } from '@veltra/compositions'\nimport { ArrowDown, Search } from '@veltra/icons/normal'\nimport { bem, FORM_EMPTY_CONTENT } from '@veltra/utils'\nimport { computed, nextTick, shallowRef, watch } from 'vue'\n\nimport type { TreeSelectProps, TreeSelectEmits, TreeExposed } from '../../types'\nimport { UDropdown } from '../dropdown'\nimport { UIcon } from '../icon'\nimport { UInput } from '../input'\nimport { UTree } from '../tree'\nimport type { TreeSlotsScope } from '../tree/di'\n\ndefineOptions({ name: 'TreeSelect' })\n\nconst props = withDefaults(defineProps<TreeSelectProps>(), {\n  labelKey: 'label',\n  valueKey: 'value',\n  placeholder: '请选择',\n  expandAll: false,\n  clearable: true,\n  disabled: undefined,\n  readonly: undefined,\n  filterable: false,\n  minWidth: '280px'\n})\n\nconst emit = defineEmits<TreeSelectEmits>()\n\nconst slots = defineSlots<{\n  /** 默认插槽 */\n  default?: (props: TreeSlotsScope) => any\n  /** 前缀插槽 */\n  prefix?: () => any\n}>()\n\nconst treeProps = computed(() => {\n  return o(props as Record<string, any>).omit([\n    'tips',\n    'field',\n    'placeholder',\n    'disabled',\n    'label',\n    'readonly',\n    'contentClass',\n    'contentStyle',\n    'minWidth',\n    'width'\n  ])\n})\n\nconst cls = bem('tree-select')\n\n/**过滤 */\nconst qs = shallowRef('')\nwatch(qs, (qs) => {\n  treeRef.value?.filter(qs)\n})\n\nconst model = defineModel<string | number>()\n\nconst label = shallowRef<string>()\n\nconst { formProps } = useFormComponent()\n\nconst { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props])\n\nconst treeRef = shallowRef<TreeExposed>()\n\nconst dropdownRef = shallowRef<InstanceType<typeof UDropdown>>()\n\n/**清空 */\nconst handleClear = () => {\n  model.value = ''\n  label.value = undefined\n  emit('clear')\n  emit('change', '', undefined)\n  emit('update:text', '')\n}\n\nlet changedByEvent = false\nwatch(\n  [() => props.data, model],\n  ([data, model]) => {\n    if (changedByEvent) return\n    if (!data?.length || model === undefined) {\n      label.value = undefined\n      model = undefined\n      return\n    }\n\n    let founded = false\n    const childrenKey = props.childrenKey ?? 'children'\n    data.some((item) => {\n      dfs(\n        item,\n        (v) => {\n          if (v[props.valueKey] === model) {\n            label.value = v[props.labelKey]\n            founded = true\n            return true\n          }\n        },\n        childrenKey\n      )\n\n      return founded\n    })\n  },\n  { immediate: true }\n)\n\nconst handleSelect = (selected?: string | number, selectedData?: Record<string, any>) => {\n  changedByEvent = true\n  nextTick(() => {\n    changedByEvent = false\n  })\n\n  model.value = selected ?? ''\n\n  if (selectedData) {\n    label.value = o(selectedData).get(props.labelKey)\n  } else {\n    label.value = ''\n  }\n\n  emit('change', selected, selectedData)\n  emit('update:text', label.value)\n  dropdownRef.value?.close()\n}\n\nconst handleDropdownVisible = (visible: boolean) => {\n  if (!visible) {\n    qs.value = ''\n  }\n}\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"tree-select.js","names":["$slots"],"sources":["../../../src/components/tree-select/tree-select.vue"],"sourcesContent":["<template>\n  <u-dropdown\n    v-if=\"!readonly\"\n    :class=\"[cls.b, bem.is('disabled', disabled)]\"\n    trigger=\"click\"\n    :content-class=\"[cls.e('panel'), cls.em('panel', size), contentClass]\"\n    :content-style=\"contentStyle\"\n    ref=\"dropdownRef\"\n    :min-width=\"minWidth\"\n    :width=\"width\"\n    :disabled=\"disabled\"\n    @update:visible=\"handleDropdownVisible\"\n  >\n    <template #trigger>\n      <u-input\n        :size=\"size\"\n        :disabled=\"disabled\"\n        :placeholder=\"placeholder\"\n        :clearable=\"clearable\"\n        :model-value=\"text ?? (model ? label : undefined)\"\n        @clear=\"handleClear\"\n        native-readonly\n      >\n        <template #prefix v-if=\"$slots.prefix\">\n          <slot name=\"prefix\" />\n        </template>\n        <template #suffix>\n          <u-icon :class=\"cls.e('arrow')\"><ArrowDown /></u-icon>\n        </template>\n      </u-input>\n    </template>\n    <template #content>\n      <!-- 过滤器 -->\n      <div v-if=\"filterable\" :class=\"[cls.e('content-filter'), cls.m(size)]\">\n        <u-input placeholder=\"输入关键字进行过滤\" v-model=\"qs\">\n          <template #suffix>\n            <u-icon><Search /></u-icon>\n          </template>\n        </u-input>\n      </div>\n      <!-- 菜单列表 -->\n\n      <u-tree\n        v-bind=\"treeProps\"\n        :selected=\"model\"\n        @update:selected=\"handleSelect\"\n        ref=\"treeRef\"\n        selectable\n        :class=\"cls.e('content-tree')\"\n        :slots=\"slots\"\n        scroll-to-view\n      />\n    </template>\n  </u-dropdown>\n\n  <template v-else>\n    {{ text || label || FORM_EMPTY_CONTENT }}\n  </template>\n</template>\n\n<script lang=\"ts\" setup>\nimport { dfs, o } from '@cat-kit/core'\nimport { useFormFallbackProps } from '@veltra/compositions'\nimport { ArrowDown, Search } from '@veltra/icons/normal'\nimport { bem, FORM_EMPTY_CONTENT } from '@veltra/utils'\nimport { injectFormContext } from '@veltra/utils'\nimport { computed, nextTick, shallowRef, watch } from 'vue'\n\nimport type { TreeSelectProps, TreeSelectEmits, TreeExposed } from '../../types'\nimport { UDropdown } from '../dropdown'\nimport { UIcon } from '../icon'\nimport { UInput } from '../input'\nimport { UTree } from '../tree'\nimport type { TreeSlotsScope } from '../tree/di'\n\ndefineOptions({ name: 'TreeSelect' })\n\nconst props = withDefaults(defineProps<TreeSelectProps>(), {\n  labelKey: 'label',\n  valueKey: 'value',\n  placeholder: '请选择',\n  expandAll: false,\n  clearable: true,\n  disabled: undefined,\n  readonly: undefined,\n  filterable: false,\n  minWidth: '280px'\n})\n\nconst emit = defineEmits<TreeSelectEmits>()\n\nconst slots = defineSlots<{\n  /** 默认插槽 */\n  default?: (props: TreeSlotsScope) => any\n  /** 前缀插槽 */\n  prefix?: () => any\n}>()\n\nconst treeProps = computed(() => {\n  return o(props as Record<string, any>).omit([\n    'tips',\n    'field',\n    'placeholder',\n    'disabled',\n    'label',\n    'readonly',\n    'contentClass',\n    'contentStyle',\n    'minWidth',\n    'width'\n  ])\n})\n\nconst cls = bem('tree-select')\n\n/**过滤 */\nconst qs = shallowRef('')\nwatch(qs, (qs) => {\n  treeRef.value?.filter(qs)\n})\n\nconst model = defineModel<string | number>()\n\nconst label = shallowRef<string>()\n\nconst { formProps } = injectFormContext()\n\nconst { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props])\n\nconst treeRef = shallowRef<TreeExposed>()\n\nconst dropdownRef = shallowRef<InstanceType<typeof UDropdown>>()\n\n/**清空 */\nconst handleClear = () => {\n  model.value = ''\n  label.value = undefined\n  emit('clear')\n  emit('change', '', undefined)\n  emit('update:text', '')\n}\n\nlet changedByEvent = false\nwatch(\n  [() => props.data, model],\n  ([data, model]) => {\n    if (changedByEvent) return\n    if (!data?.length || model === undefined) {\n      label.value = undefined\n      model = undefined\n      return\n    }\n\n    let founded = false\n    const childrenKey = props.childrenKey ?? 'children'\n    data.some((item) => {\n      dfs(\n        item,\n        (v) => {\n          if (v[props.valueKey] === model) {\n            label.value = v[props.labelKey]\n            founded = true\n            return true\n          }\n        },\n        childrenKey\n      )\n\n      return founded\n    })\n  },\n  { immediate: true }\n)\n\nconst handleSelect = (selected?: string | number, selectedData?: Record<string, any>) => {\n  changedByEvent = true\n  nextTick(() => {\n    changedByEvent = false\n  })\n\n  model.value = selected ?? ''\n\n  if (selectedData) {\n    label.value = o(selectedData).get(props.labelKey)\n  } else {\n    label.value = ''\n  }\n\n  emit('change', selected, selectedData)\n  emit('update:text', label.value)\n  dropdownRef.value?.close()\n}\n\nconst handleDropdownVisible = (visible: boolean) => {\n  if (!visible) {\n    qs.value = ''\n  }\n}\n</script>\n"],"mappings":"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"}

package/dist/components/tree-select/tree-select.vue.d.ts

@@ -15,24 +15,24 @@ type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_base: _$vue.DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
   "update:modelValue": (value: string | number | undefined) => any;
 } & {
-  clear: () => any;
   change: (value?: string | number | undefined, selectedData?: Record<string, any> | undefined) => any;
+  clear: () => any;
   "update:text": (text?: string | undefined) => any;
 }, string, _$vue.PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
   "onUpdate:modelValue"?: ((value: string | number | undefined) => any) | undefined;
-  onClear?: (() => any) | undefined;
   onChange?: ((value?: string | number | undefined, selectedData?: Record<string, any> | undefined) => any) | undefined;
+  onClear?: (() => any) | undefined;
   "onUpdate:text"?: ((text?: string | undefined) => any) | undefined;
 }>, {
-  minWidth: string;
-  disabled: boolean;
   expandAll: boolean;
   labelKey: string;
   valueKey: string;
-  readonly: boolean;
-  placeholder: string;
   clearable: boolean;
+  placeholder: string;
   filterable: boolean;
+  minWidth: string;
+  disabled: boolean;
+  readonly: boolean;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veltra/desktop",
-  "version": "1.1.1",
+  "version": "1.1.3",
   "files": [
     "dist",
     "src"
@@ -61,22 +61,22 @@
     "@lexical/rich-text": "^0.43.0",
     "@lexical/selection": "^0.43.0",
     "@lexical/utils": "^0.43.0",
-    "@veltra/compositions": "1.1.1",
-    "@veltra/directives": "1.1.1",
-    "@veltra/icons": "1.1.1",
-    "@veltra/styles": "1.1.1",
-    "@veltra/utils": "1.1.1",
+    "@veltra/compositions": "1.1.3",
+    "@veltra/directives": "1.1.3",
+    "@veltra/icons": "1.1.3",
+    "@veltra/styles": "1.1.3",
+    "@veltra/utils": "1.1.3",
     "@visactor/vtable": "^1.26.0",
     "codemirror": "^6.0.2",
     "docx-preview": "^0.3.7",
     "lexical": "^0.43.0"
   },
   "peerDependencies": {
-    "@veltra/compositions": "1.1.1",
-    "@veltra/directives": "1.1.1",
-    "@veltra/icons": "1.1.1",
-    "@veltra/styles": "1.1.1",
-    "@veltra/utils": "1.1.1",
+    "@veltra/compositions": "1.1.3",
+    "@veltra/directives": "1.1.3",
+    "@veltra/icons": "1.1.3",
+    "@veltra/styles": "1.1.3",
+    "@veltra/utils": "1.1.3",
     "vue": "^3.5.33"
   }
 }

package/src/components/auto-complete/auto-complete.vue

@@ -71,9 +71,10 @@
 </template>
 
 <script lang="ts" setup>
-import { useFormComponent, useFormFallbackProps } from '@veltra/compositions'
+import { useFormFallbackProps } from '@veltra/compositions'
 import { vRipple } from '@veltra/directives'
 import { bem, FORM_EMPTY_CONTENT, scrollIntoContainerView } from '@veltra/utils'
+import { injectFormContext } from '@veltra/utils'
 import { computed, shallowRef, watch } from 'vue'
 
 import type { AutoCompleteEmits, AutoCompleteProps, _AutoCompleteExposed } from '../../types'
@@ -108,7 +109,7 @@ const cls = bem('auto-complete')
 
 const optionClass = cls.e('option')
 
-const { formProps } = useFormComponent()
+const { formProps } = injectFormContext()
 const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {
   size: 'default',
   disabled: false,

package/src/components/auto-complete/style.scss

@@ -22,7 +22,7 @@ $root-name: auto-complete;
     }
 
     @include m.bem(tag) {
-      border: fn.use-var(border);
+      border: fn.use-var(border-muted);
     }
   }
 
@@ -68,7 +68,7 @@ $root-name: auto-complete;
 
   @include m.is(multiple) {
     line-height: 1;
-    border: fn.use-var(border);
+    border: fn.use-var(border-muted);
     box-shadow: fn.use-var(shadow, emboss);
     transition: border-color 0.25s ease, box-shadow 0.25s ease;
     overflow: hidden;

package/src/components/cascade/cascade.vue

@@ -105,9 +105,10 @@
 
 <script lang="ts" setup>
 import { Forest, o } from '@cat-kit/core'
-import { useFormComponent, useFormFallbackProps, useUserAction } from '@veltra/compositions'
+import { useFormFallbackProps, useUserAction } from '@veltra/compositions'
 import { ArrowDown, Close, Search } from '@veltra/icons/normal'
 import { bem, FORM_EMPTY_CONTENT } from '@veltra/utils'
+import { injectFormContext } from '@veltra/utils'
 import { computed, provide, shallowRef, triggerRef, watch } from 'vue'
 
 import type { CascadeProps, CascadeEmits, DropdownExposed } from '../../types'
@@ -145,7 +146,7 @@ const emit = defineEmits<CascadeEmits>()
 
 const cls = bem('cascade')
 
-const { formProps } = useFormComponent()
+const { formProps } = injectFormContext()
 
 const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {
   size: 'default',

package/src/components/cascade/style.scss

@@ -10,7 +10,7 @@ $menu-name: $root-name + '-panel-item';
   width: 100%;
 
   @include m.is(multiple) {
-    border: fn.use-var(border);
+    border: fn.use-var(border-muted);
     box-shadow: fn.use-var(shadow, emboss);
     transition: border-color 0.25s ease, box-shadow 0.25s ease;
     overflow: hidden;

package/src/components/checkbox/checkbox-button.vue

@@ -13,8 +13,9 @@
 </template>
 
 <script lang="ts" setup>
-import { useFormComponent, useFormFallbackProps } from '@veltra/compositions'
+import { useFormFallbackProps } from '@veltra/compositions'
 import { bem, FORM_EMPTY_CONTENT } from '@veltra/utils'
+import { injectFormContext } from '@veltra/utils'
 import { computed } from 'vue'
 
 import type { CheckboxButtonProps, CheckboxButtonEmits } from '../../types'
@@ -41,7 +42,7 @@ const cls = bem('checkbox-button')
 
 const checked = defineModel<boolean>()
 
-const { formProps } = useFormComponent()
+const { formProps } = injectFormContext()
 
 const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {
   size: 'default',

package/src/components/checkbox/checkbox.vue

@@ -18,8 +18,9 @@
 </template>
 
 <script lang="ts" setup>
-import { useFormComponent, useFormFallbackProps } from '@veltra/compositions'
+import { useFormFallbackProps } from '@veltra/compositions'
 import { bem } from '@veltra/utils'
+import { injectFormContext } from '@veltra/utils'
 import { computed } from 'vue'
 
 import type { CheckboxProps, CheckboxEmits } from '../../types'
@@ -37,7 +38,7 @@ const cls = bem('checkbox')
 
 const checked = defineModel<boolean>()
 
-const { formProps } = useFormComponent()
+const { formProps } = injectFormContext()
 
 const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {
   size: 'default',

package/src/components/checkbox/style.scss

@@ -19,7 +19,7 @@ $root-name: checkbox;
     @include m.is(disabled) {
       @include m.bem($root-name, wrap) {
         background-color: fn.use-var(text-color, disabled);
-        border-color: fn.use-var(border, color);
+        border-color: fn.use-var(border, muted-color);
       }
     }
   }
@@ -72,7 +72,7 @@ $root-name: checkbox;
 
 $button-name: checkbox-button;
 @include m.b($button-name) {
-  border: fn.use-var(border);
+  border: fn.use-var(border-muted);
   vertical-align: middle;
   display: inline-flex;
   align-items: center;

package/src/components/checkbox-group/checkbox-group.vue

@@ -26,8 +26,9 @@
 </template>
 
 <script lang="ts" setup>
-import { useFormComponent, useFormFallbackProps } from '@veltra/compositions'
+import { useFormFallbackProps } from '@veltra/compositions'
 import { bem, FORM_EMPTY_CONTENT } from '@veltra/utils'
+import { injectFormContext } from '@veltra/utils'
 
 import type { CheckboxGroupProps, CheckboxGroupEmits } from '../../types'
 import { UCheckbox } from '../checkbox'
@@ -50,7 +51,7 @@ const model = defineModel<any[]>()
 
 const cls = bem('checkbox-group')
 
-const { formProps } = useFormComponent()
+const { formProps } = injectFormContext()
 
 const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {
   size: 'default',

package/src/components/code-editor/code-editor.vue

@@ -8,8 +8,9 @@
 import { Compartment, EditorState, type Extension } from '@codemirror/state'
 import { oneDark } from '@codemirror/theme-one-dark'
 import { ViewPlugin, tooltips, type ViewUpdate } from '@codemirror/view'
-import { useFormComponent, useFormFallbackProps } from '@veltra/compositions'
+import { useFormFallbackProps } from '@veltra/compositions'
 import { bem, zIndex } from '@veltra/utils'
+import { injectFormContext } from '@veltra/utils'
 import { EditorView, basicSetup } from 'codemirror'
 import {
   computed,
@@ -36,7 +37,7 @@ const model = defineModel<string>()
 
 const cls = bem('code-editor')
 
-const { formProps } = useFormComponent()
+const { formProps } = injectFormContext()
 
 const { disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {
   disabled: false,

package/src/components/code-editor/style.scss

@@ -11,7 +11,7 @@ $root-name: code-editor;
   --u-code-editor-padding-block: 6px;
   --u-code-editor-bg: #{fn.use-var(bg, color, top)};
   --u-code-editor-fg: #{fn.use-var(text-color, main)};
-  --u-code-editor-border: #{fn.use-var(border, color)};
+  --u-code-editor-border: #{fn.use-var(border, muted-color)};
   --u-code-editor-gutter-fg: #{fn.use-var(text-color, placeholder)};
   --u-code-editor-active-bg: rgba(30, 136, 229, 0.06);
   --u-code-editor-selection-bg: rgba(30, 136, 229, 0.18);

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

@@ -49,7 +49,7 @@ defineOptions({
 
 const props = defineProps<CollapseItemProps>()
 
-const context = inject(CollapseDIKey)
+const context = inject(CollapseDIKey)!
 
 const cls = context?.cls ?? bem('collapse')
 
@@ -80,59 +80,21 @@ const handleClick = () => {
 }
 
 const wrapperEl = ref<HTMLElement>()
-let cleanupTransition: (() => void) | null = null
 
-const cancelTransition = () => {
-  cleanupTransition?.()
-  cleanupTransition = null
-}
-
-// 用 height 数值过渡替代 grid-template-rows，避免每帧 grid 重排带来的卡顿。
-const animateHeight = (active: boolean) => {
-  const el = wrapperEl.value
-  if (!el) return
-
-  cancelTransition()
-
-  const startHeight = el.offsetHeight
-  const endHeight = active ? el.scrollHeight : 0
-
-  if (startHeight === endHeight) {
-    el.style.height = active ? 'auto' : '0px'
-    return
-  }
-
-  el.style.height = `${startHeight}px`
-  // 强制 reflow，确保起始高度被采纳，避免 0 → auto 直接跳变。
-  void el.offsetHeight
-  el.style.height = `${endHeight}px`
-
-  const onEnd = (e: TransitionEvent) => {
-    if (e.target !== el || e.propertyName !== 'height') return
-    cleanup()
-    if (active) {
-      // 回归 auto，让后续内容动态变化时不被锁死高度。
-      el.style.height = 'auto'
-    }
-  }
-
-  const cleanup = () => {
-    el.removeEventListener('transitionend', onEnd)
-    el.removeEventListener('transitioncancel', onEnd)
-    cleanupTransition = null
-  }
-
-  el.addEventListener('transitionend', onEnd)
-  el.addEventListener('transitioncancel', onEnd)
-  cleanupTransition = cleanup
-}
+const { expandTransition } = context
 
 onMounted(() => {
   if (!wrapperEl.value) return
-  wrapperEl.value.style.height = isActive.value ? 'auto' : '0px'
+  expandTransition.setExpanded(wrapperEl.value, isActive.value)
 })
 
-watch(isActive, animateHeight)
+watch(isActive, (active) => {
+  if (!wrapperEl.value) return
+  active ? expandTransition.expand(wrapperEl.value) : expandTransition.collapse(wrapperEl.value)
+})
 
-onBeforeUnmount(cancelTransition)
+onBeforeUnmount(() => {
+  if (!wrapperEl.value) return
+  expandTransition.cancel(wrapperEl.value)
+})
 </script>

package/src/components/collapse/collapse.vue

@@ -6,7 +6,7 @@
 
 <script lang="ts" setup>
 import { useFormFallbackProps, useModel } from '@veltra/compositions'
-import { bem } from '@veltra/utils'
+import { bem, ExpandTransition } from '@veltra/utils'
 import { computed, provide } from 'vue'
 
 import type {
@@ -31,6 +31,10 @@ const emit = defineEmits<CollapseEmits>()
 
 const cls = bem('collapse')
 
+const expandTransition = new ExpandTransition({
+  transition: 'height 0.24s cubic-bezier(0.4, 0, 0.2, 1)'
+})
+
 const { size } = useFormFallbackProps([props], { size: 'default' })
 
 const iconPosition = computed(() => props.iconPosition ?? 'right')
@@ -109,7 +113,8 @@ provide(CollapseDIKey, {
   iconPosition,
   expandIcon,
   activeValues,
-  toggle
+  toggle,
+  expandTransition
 })
 
 defineExpose<_CollapseExposed>({

package/src/components/collapse/di.ts

@@ -1,4 +1,4 @@
-import type { BEM, ComponentSize } from '@veltra/utils'
+import { type BEM, type ComponentSize, ExpandTransition } from '@veltra/utils'
 import type { Component, ComputedRef, InjectionKey } from 'vue'
 
 import type { CollapseIconPosition, CollapseValue } from '../../types'
@@ -10,6 +10,7 @@ export interface CollapseContext {
   expandIcon: ComputedRef<Component | undefined>
   activeValues: ComputedRef<CollapseValue[]>
   toggle: (value: CollapseValue) => void
+  expandTransition: ExpandTransition
 }
 
 export const CollapseDIKey: InjectionKey<CollapseContext> = Symbol('Collapse')

package/src/components/collapse/style.scss

@@ -124,7 +124,7 @@ $header-padding-y: (
   }
 
   // ===== Content wrapper =====
-  // 高度由 collapse-item.vue 的 JS 在 isActive 切换时驱动：
+  // 高度由共享 expand transition hook 在 isActive 切换时驱动：
   //   未挂载前 → CSS 兜底 height: 0
   //   未激活   → 0px（带 transition）
   //   激活中   → 0 → scrollHeight（CSS transition: height）

package/src/components/date-picker/date-picker.vue

@@ -36,9 +36,10 @@
 
 <script lang="ts" setup>
 import { date, type Dater } from '@cat-kit/core'
-import { useFormComponent, useFormFallbackProps, useUserAction } from '@veltra/compositions'
+import { useFormFallbackProps, useUserAction } from '@veltra/compositions'
 import { Calendar } from '@veltra/icons/normal'
 import { bem, FORM_EMPTY_CONTENT } from '@veltra/utils'
+import { injectFormContext } from '@veltra/utils'
 import { computed, shallowRef, watch } from 'vue'
 
 import type { DatePickerEmits, DatePickerProps } from '../../types'
@@ -64,7 +65,7 @@ const emit = defineEmits<DatePickerEmits>()
 
 const cls = bem('date-picker')
 
-const { formProps } = useFormComponent()
+const { formProps } = injectFormContext()
 
 const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {
   size: 'default',

package/src/components/date-range-picker/date-range-picker.vue

@@ -61,9 +61,10 @@
 
 <script lang="ts" setup>
 import { date, type Dater } from '@cat-kit/core'
-import { useFormComponent, useFormFallbackProps, useUserAction } from '@veltra/compositions'
+import { useFormFallbackProps, useUserAction } from '@veltra/compositions'
 import { Calendar, Close } from '@veltra/icons/normal'
 import { bem, FORM_EMPTY_CONTENT } from '@veltra/utils'
+import { injectFormContext } from '@veltra/utils'
 import { computed, shallowRef, watch } from 'vue'
 
 import type { DateRangePickerEmits, DateRangePickerProps, DropdownExposed } from '../../types'
@@ -91,7 +92,7 @@ const className = computed(() => {
   return [cls.b, cls.m(size.value), bem.is('disabled', disabled.value)]
 })
 
-const { formProps } = useFormComponent()
+const { formProps } = injectFormContext()
 
 const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {
   size: 'default',

package/src/components/date-range-picker/style.scss

@@ -9,7 +9,7 @@ $root-name: date-range-picker;
   width: 100%;
   vertical-align: middle;
   line-height: 1;
-  border: fn.use-var(border);
+  border: fn.use-var(border-muted);
   box-shadow: fn.use-var(shadow, emboss);
   transition: border-color 0.25s ease, box-shadow 0.25s ease;
   overflow: hidden;

package/src/components/dialog/style.scss

@@ -41,7 +41,6 @@ $root-name: dialog;
     overflow: hidden;
     background-color: fn.use-var(bg-color, middle);
     backdrop-filter: fn.use-var(bg-filter);
-    -webkit-backdrop-filter: fn.use-var(bg-filter);
   }
 
   // 弹框头
@@ -66,6 +65,7 @@ $root-name: dialog;
   @include m.e(body) {
     padding: 8px;
     background-color: fn.use-var(bg-color, top);
+    backdrop-filter: fn.use-var(bg-filter);
     flex-grow: 1;
   }
 

package/src/components/expression-editor/expression-editor.vue

@@ -29,8 +29,9 @@
 </template>
 
 <script lang="ts" setup>
-import { useFormComponent, useFormFallbackProps } from '@veltra/compositions'
+import { useFormFallbackProps } from '@veltra/compositions'
 import { bem } from '@veltra/utils'
+import { injectFormContext } from '@veltra/utils'
 import {
   computed,
   nextTick,
@@ -62,7 +63,7 @@ const emit = defineEmits<{
 }>()
 
 const cls = bem('expression-editor')
-const { formProps } = useFormComponent()
+const { formProps } = injectFormContext()
 const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props])
 
 const containerRef = useTemplateRef<HTMLDivElement>('container')

package/src/components/expression-editor/style.scss

@@ -9,7 +9,7 @@ $root-name: expression-editor;
   background-color: fn.use-var(bg-color, top);
   border-width: fn.use-var(border, width);
   border-style: fn.use-var(border, style);
-  border-color: fn.use-var(border, color);
+  border-color: fn.use-var(border, muted-color);
   border-radius: fn.use-var(radius, default);
 
   @include m.is-not(disabled, readonly) {
@@ -26,21 +26,21 @@ $root-name: expression-editor;
   @include m.is('disabled') {
     background-color: fn.use-var(color, disabled);
     cursor: not-allowed;
-    border-color: fn.use-var(border, color);
+    border-color: fn.use-var(border, muted-color);
 
     &:hover {
-      border-color: fn.use-var(border, color);
+      border-color: fn.use-var(border, muted-color);
     }
   }
 
   @include m.is('readonly') {
     background-color: fn.use-var(bg-color, middle);
     cursor: default;
-    border-color: fn.use-var(border, color);
+    border-color: fn.use-var(border, muted-color);
     user-select: text;
 
     &:hover {
-      border-color: fn.use-var(border, color);
+      border-color: fn.use-var(border, muted-color);
     }
   }