@veltra/desktop 1.3.4 → 1.3.6

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

@@ -1 +1 @@
-{"version":3,"file":"tree-select.js","names":["$attrs","$slots"],"sources":["../../../src/components/tree-select/tree-select.vue"],"sourcesContent":["<template>\n  <u-dropdown\n    v-if=\"!readonly\"\n    v-bind=\"$attrs\"\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, fieldKey, 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: 'UTreeSelect', inheritAttrs: false })\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\nconst labelKey = computed(() => fieldKey(props.labelKey, 'label'))\nconst valueKey = computed(() => fieldKey(props.valueKey, 'value'))\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[valueKey.value] === model) {\n            label.value = v[labelKey.value]\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(labelKey.value)\n  } else {\n    label.value = ''\n  }\n\n  emit('change', 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":["$attrs","$slots"],"sources":["../../../src/components/tree-select/tree-select.vue"],"sourcesContent":["<template>\n  <u-dropdown\n    v-if=\"!readonly\"\n    v-bind=\"$attrs\"\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    v-model:visible=\"dropdownVisible\"\n    :min-width=\"minWidth\"\n    :width=\"width\"\n    :disabled=\"disabled\"\n    @update:visible=\"handleDropdownVisible\"\n    @mouseenter=\"hovered = true\"\n    @mouseleave=\"hovered = false\"\n  >\n    <template #trigger>\n      <u-input\n        ref=\"inputRef\"\n        :size=\"size\"\n        :disabled=\"disabled\"\n        :placeholder=\"inputPlaceholder\"\n        :clearable=\"false\"\n        :model-value=\"inputValue\"\n        @update:model-value=\"handleQueryInput\"\n        :native-readonly=\"!filterable || !querying\"\n        @click.capture=\"handleTriggerClickCapture\"\n      >\n        <template #prefix v-if=\"$slots.prefix\">\n          <slot name=\"prefix\" />\n        </template>\n        <template #suffix>\n          <transition name=\"zoom-in\" mode=\"out-in\">\n            <u-icon\n              v-if=\"showClear\"\n              :class=\"cls.e('clear')\"\n              title=\"清除\"\n              key=\"clear\"\n              @click.stop=\"handleClear\"\n            >\n              <Close />\n            </u-icon>\n            <u-icon v-else :class=\"cls.e('arrow')\" key=\"arrow\"><ArrowDown /></u-icon>\n          </transition>\n        </template>\n      </u-input>\n    </template>\n    <template #content>\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, Close } from '@veltra/icons/normal'\nimport { bem, fieldKey, FORM_EMPTY_CONTENT } from '@veltra/utils'\nimport { injectFormContext } from '@veltra/utils'\nimport { computed, nextTick, shallowRef, useTemplateRef, watch } from 'vue'\n\nimport type { TreeSelectProps, TreeSelectEmits, TreeExposed, InputExposed } 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: 'UTreeSelect', inheritAttrs: false })\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\nconst labelKey = computed(() => fieldKey(props.labelKey, 'label'))\nconst valueKey = computed(() => fieldKey(props.valueKey, 'value'))\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 dropdownVisible = shallowRef(false)\n\n/**\n * 是否处于查询态：决定触发输入框显示查询串还是选中标签。\n * 与面板可见状态解耦 —— 选择后立即退出查询态，\n * 不等面板关闭动画结束（否则显示值会延迟一个动画时长才恢复）。\n */\nconst querying = shallowRef(false)\n\nconst inputRef = useTemplateRef<InputExposed>('inputRef')\n\n/** 触发输入框的值：查询态下承载查询串，否则展示选中标签 */\nconst inputValue = computed(() => {\n  if (props.filterable && querying.value) return qs.value\n  return props.text ?? (model.value ? label.value : undefined)\n})\n\n/** 查询态下已选标签降级为占位提示 */\nconst inputPlaceholder = computed(() => {\n  const display = props.text ?? (model.value ? label.value : undefined)\n  if (props.filterable && querying.value && display) {\n    return display\n  }\n  return props.placeholder\n})\n\nfunction handleQueryInput(value: string) {\n  if (!props.filterable) return\n  qs.value = value\n}\n\nconst hovered = shallowRef(false)\n\n/** 悬停且存在选中值时展示清除按钮（替代下拉箭头） */\nconst showClear = computed(() => {\n  if (!props.clearable || disabled.value || !hovered.value) return false\n  return !!(props.text ?? (model.value ? label.value : undefined))\n})\n\n/**\n * 过滤模式下拦截输入区域的点击：\n * 阻止 dropdown 的 trigger 开合切换，保持面板展开以不中断输入。\n * 非输入区域（箭头、留白）放行，维持原开合行为。\n */\nfunction handleTriggerClickCapture(e: MouseEvent) {\n  if (!props.filterable || disabled.value) return\n  if (!(e.target instanceof HTMLInputElement)) return\n\n  e.stopPropagation()\n  if (!dropdownVisible.value) dropdownRef.value?.open()\n}\n\nwatch(dropdownVisible, (visible) => {\n  if (visible && props.filterable) {\n    // 面板展开后进入查询态并聚焦输入框，可以立即输入查询\n    querying.value = true\n    nextTick(() => inputRef.value?.el?.focus())\n  } else if (!visible) {\n    querying.value = false\n  }\n})\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[valueKey.value] === model) {\n            label.value = v[labelKey.value]\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(labelKey.value)\n  } else {\n    label.value = ''\n  }\n\n  emit('change', selectedData)\n  emit('update:text', label.value)\n  // 立即退出查询态，输入框同步恢复显示选中标签\n  querying.value = false\n  qs.value = ''\n  dropdownRef.value?.close()\n}\n\nconst handleDropdownVisible = (visible: boolean) => {\n  if (!visible) {\n    qs.value = ''\n  }\n}\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsFA,MAAM,QAAQ;EAYd,MAAM,OAAO;EAEb,MAAM,QAAQ,SAAA;EAOd,MAAM,YAAY,eAAe;GAC/B,OAAO,EAAE,KAA4B,CAAC,CAAC,KAAK;IAC1C;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF,CAAC;EACH,CAAC;EAED,MAAM,MAAM,IAAI,aAAa;EAE7B,MAAM,WAAW,eAAe,SAAS,MAAM,UAAU,OAAO,CAAC;EACjE,MAAM,WAAW,eAAe,SAAS,MAAM,UAAU,OAAO,CAAC;;EAGjE,MAAM,KAAK,WAAW,EAAE;EACxB,MAAM,KAAK,OAAO;GAChB,QAAQ,OAAO,OAAO,EAAE;EAC1B,CAAC;EAED,MAAM,QAAQ,SAA4B,SAAA,YAAC;EAE3C,MAAM,QAAQ,WAAmB;EAEjC,MAAM,kBAAkB,WAAW,KAAK;;;;;;EAOxC,MAAM,WAAW,WAAW,KAAK;EAEjC,MAAM,WAAW,eAA6B,UAAU;;EAGxD,MAAM,aAAa,eAAe;GAChC,IAAI,MAAM,cAAc,SAAS,OAAO,OAAO,GAAG;GAClD,OAAO,MAAM,SAAS,MAAM,QAAQ,MAAM,QAAQ,KAAA;EACpD,CAAC;;EAGD,MAAM,mBAAmB,eAAe;GACtC,MAAM,UAAU,MAAM,SAAS,MAAM,QAAQ,MAAM,QAAQ,KAAA;GAC3D,IAAI,MAAM,cAAc,SAAS,SAAS,SACxC,OAAO;GAET,OAAO,MAAM;EACf,CAAC;EAED,SAAS,iBAAiB,OAAe;GACvC,IAAI,CAAC,MAAM,YAAY;GACvB,GAAG,QAAQ;EACb;EAEA,MAAM,UAAU,WAAW,KAAK;;EAGhC,MAAM,YAAY,eAAe;GAC/B,IAAI,CAAC,MAAM,aAAa,SAAS,SAAS,CAAC,QAAQ,OAAO,OAAO;GACjE,OAAO,CAAC,EAAE,MAAM,SAAS,MAAM,QAAQ,MAAM,QAAQ,KAAA;EACvD,CAAC;;;;;;EAOD,SAAS,0BAA0B,GAAe;GAChD,IAAI,CAAC,MAAM,cAAc,SAAS,OAAO;GACzC,IAAI,EAAE,EAAE,kBAAkB,mBAAmB;GAE7C,EAAE,gBAAgB;GAClB,IAAI,CAAC,gBAAgB,OAAO,YAAY,OAAO,KAAK;EACtD;EAEA,MAAM,kBAAkB,YAAY;GAClC,IAAI,WAAW,MAAM,YAAY;IAE/B,SAAS,QAAQ;IACjB,eAAe,SAAS,OAAO,IAAI,MAAM,CAAC;GAC5C,OAAO,IAAI,CAAC,SACV,SAAS,QAAQ;EAErB,CAAC;EAED,MAAM,EAAE,cAAc,kBAAkB;EAExC,MAAM,EAAE,MAAM,UAAU,aAAa,qBAAqB,CAAC,aAAa,CAAC,GAAG,KAAK,CAAC;EAElF,MAAM,UAAU,WAAwB;EAExC,MAAM,cAAc,WAA2C;;EAG/D,MAAM,oBAAoB;GACxB,MAAM,QAAQ;GACd,MAAM,QAAQ,KAAA;GACd,KAAK,OAAO;GACZ,KAAK,UAAU,KAAA,CAAS;GACxB,KAAK,eAAe,EAAE;EACxB;EAEA,IAAI,iBAAiB;EACrB,MACE,OAAO,MAAM,MAAM,KAAK,IACvB,CAAC,MAAM,WAAW;GACjB,IAAI,gBAAgB;GACpB,IAAI,CAAC,MAAM,UAAU,UAAU,KAAA,GAAW;IACxC,MAAM,QAAQ,KAAA;IACd,QAAQ,KAAA;IACR;GACF;GAEA,IAAI,UAAU;GACd,MAAM,cAAc,MAAM,eAAe;GACzC,KAAK,MAAM,SAAS;IAClB,IACE,OACC,MAAM;KACL,IAAI,EAAE,SAAS,WAAW,OAAO;MAC/B,MAAM,QAAQ,EAAE,SAAS;MACzB,UAAU;MACV,OAAO;KACT;IACF,GACA,WACF;IAEA,OAAO;GACT,CAAC;EACH,GACA,EAAE,WAAW,KAAK,CACpB;EAEA,MAAM,gBAAgB,UAA4B,iBAAuC;GACvF,iBAAiB;GACjB,eAAe;IACb,iBAAiB;GACnB,CAAC;GAED,MAAM,QAAQ,YAAY;GAE1B,IAAI,cACF,MAAM,QAAQ,EAAE,YAAY,CAAC,CAAC,IAAI,SAAS,KAAK;QAEhD,MAAM,QAAQ;GAGhB,KAAK,UAAU,YAAY;GAC3B,KAAK,eAAe,MAAM,KAAK;GAE/B,SAAS,QAAQ;GACjB,GAAG,QAAQ;GACX,YAAY,OAAO,MAAM;EAC3B;EAEA,MAAM,yBAAyB,YAAqB;GAClD,IAAI,CAAC,SACH,GAAG,QAAQ;EAEf;;WAhRW,MAAA,QAAA,KAAA,UAAA,GADT,YA6Da,MAAA,WAAA,GA7Db,WA6Da,EAAA,KAAA,EAAA,GA3DHA,KAAAA,QAAM;IACb,OAAK,CAAG,MAAA,GAAA,CAAG,CAAC,GAAG,MAAA,GAAA,CAAG,CAAC,GAAE,YAAa,MAAA,QAAA,CAAQ,CAAA;IAC3C,SAAQ;IACP,iBAAa;KAAG,MAAA,GAAA,CAAG,CAAC,EAAC,OAAA;KAAW,MAAA,GAAA,CAAG,CAAC,GAAE,SAAU,MAAA,IAAA,CAAI;KAAG,QAAA;IAAY;IACnE,iBAAe,QAAA;aACZ;IAAJ,KAAI;IACI,SAAS,gBAAA;+DAAA,gBAAe,QAAA,SAIf,qBAAA;IAHhB,aAAW,QAAA;IACX,OAAO,QAAA;IACP,UAAU,MAAA,QAAA;IAEV,cAAU,OAAA,OAAA,OAAA,MAAA,WAAE,QAAA,QAAO;IACnB,cAAU,OAAA,OAAA,OAAA,MAAA,WAAE,QAAA,QAAO;;IAET,SAAO,cA6BN,CA5BV,YA4BU,MAAA,aAAA,GAAA;cA3BJ;KAAJ,KAAI;KACH,MAAM,MAAA,IAAA;KACN,UAAU,MAAA,QAAA;KACV,aAAa,iBAAA;KACb,WAAW;KACX,eAAa,WAAA;KACb,uBAAoB;KACpB,mBAAe,CAAG,QAAA,cAAU,CAAK,SAAA;qBAClB;;KAKL,QAAM,cAYF,CAXb,YAWa,YAAA;MAXD,MAAK;MAAU,MAAK;;6BASrB,CAPD,UAAA,SAAA,UAAA,GADR,YAQS,MAAA,WAAA,GAAA;OANN,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,OAAA,CAAA;OACb,OAAM;OACN,KAAI;OACH,SAAK,cAAO,aAAW,CAAA,MAAA,CAAA;;8BAEf,CAAT,YAAS,MAAA,KAAA,CAAA,CAAA,CAAA;;wCAEX,YAAyE,MAAA,WAAA,GAAA;OAAzD,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,OAAA,CAAA;OAAW,KAAI;;8BAAqB,CAAb,YAAa,MAAA,SAAA,CAAA,CAAA,CAAA;;;;;;QAd5CC,KAAAA,OAAO,SAAA;WAApB;uBACa,CAAtB,WAAsB,KAAA,QAAA,QAAA,CAAA,CAAA;;;;;;;;;IAkBjB,SAAO,cACH,CAAb,mBAAA,QAAA,GAEA,YASE,MAAA,WAAA,GATF,WACU,UAQR,OARiB;KAChB,UAAU,MAAA;KACV,qBAAiB;cACd;KAAJ,KAAI;KACJ,YAAA;KACC,OAAO,MAAA,GAAA,CAAG,CAAC,EAAC,cAAA;KACL;KACR,kBAAA;;;;;;;;;;;uBAKN,mBAEW,UAAA,EAAA,KAAA,EAAA,GAAA,CAAA,gBAAA,gBADN,QAAA,QAAQ,MAAA,SAAS,MAAA,kBAAA,CAAkB,GAAA,CAAA,CAAA,GAAA,EAAA"}

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

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

package/dist/types/tree.d.ts

@@ -33,7 +33,10 @@ interface TreeProps {
   childrenKey?: string;
   /** 数据 */
   data?: Record<string, any>[];
-  /** 禁止单选或多选的节点 */
+  /**
+   * 禁止单选或多选的节点。
+   * 在整棵树构建完成后调用，可安全访问 `node.children` / `node.isLeaf`。
+   */
   disabledNode?: (item: Record<string, any>, node: TreeNode$1) => boolean;
   /** 可多选 */
   checkable?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veltra/desktop",
-  "version": "1.3.4",
+  "version": "1.3.6",
   "files": [
     "dist",
     "src"
@@ -57,11 +57,11 @@
     "@cat-kit/core": ">=1.1.8",
     "@cat-kit/excel": ">=1.0.0",
     "@cat-kit/fe": "^1.1.8",
-    "@veltra/compositions": "1.3.4",
-    "@veltra/directives": "1.3.4",
-    "@veltra/icons": "1.3.4",
-    "@veltra/styles": "1.3.4",
-    "@veltra/utils": "1.3.4",
+    "@veltra/compositions": "1.3.6",
+    "@veltra/directives": "1.3.6",
+    "@veltra/icons": "1.3.6",
+    "@veltra/styles": "1.3.6",
+    "@veltra/utils": "1.3.6",
     "vue": ">=3.5.40"
   },
   "devDependencies": {

package/src/components/cascade/cascade.vue

@@ -2,7 +2,13 @@
   <u-dropdown
     v-if="!readonly"
     v-bind="$attrs"
-    :class="[cls.b, bem.is('disabled', disabled), bem.is('multiple', multiple), cls.m(size)]"
+    :class="[
+      cls.b,
+      bem.is('disabled', disabled),
+      bem.is('multiple', multiple),
+      cls.m(size),
+      bem.is('focus', multiple && dropdownVisible)
+    ]"
     :content-class="[cls.e('panel'), cls.em('panel', size)]"
     trigger="click"
     ref="dropdownRef"
@@ -10,7 +16,7 @@
     width="auto"
     @mouseenter="hovered = true"
     @mouseleave="hovered = false"
-    @update:visible="!$event && (qs = '')"
+    @update:visible="handleDropdownVisible"
   >
     <template #trigger>
       <!-- 单选展示 -->
@@ -233,6 +239,13 @@ function handleClear() {
 // 过滤
 const qs = shallowRef<string>('')
 
+const dropdownVisible = shallowRef(false)
+
+const handleDropdownVisible = (visible: boolean) => {
+  dropdownVisible.value = visible
+  if (!visible) qs.value = ''
+}
+
 watch([qs, forest], ([qs, forest]) => {
   const { filterable } = props
   if (!filterable || !qs) {

package/src/components/cascade/style.scss

@@ -23,6 +23,11 @@ $menu-name: $root-name + '-panel-item';
     &:hover {
       border-color: fn.use-var(color, primary);
     }
+
+    @include m.is(focus) {
+      border-color: fn.use-var(color, primary);
+      box-shadow: fn.use-var(focus-ring);
+    }
   }
 
   @include m.size using ($size) {

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

@@ -10,6 +10,7 @@
     :disabled="disabled"
     @mouseenter.native="hovered = true"
     @mouseleave.native="hovered = false"
+    @update:visible="dropdownVisible = $event"
   >
     <template #trigger>
       <input
@@ -87,8 +88,15 @@ const emit = defineEmits<DateRangePickerEmits>()
 
 const cls = bem('date-range-picker')
 
+const dropdownVisible = shallowRef(false)
+
 const className = computed(() => {
-  return [cls.b, cls.m(size.value), bem.is('disabled', disabled.value)]
+  return [
+    cls.b,
+    cls.m(size.value),
+    bem.is('disabled', disabled.value),
+    bem.is('focus', dropdownVisible.value)
+  ]
 })
 
 const { formProps } = injectFormContext()

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

@@ -32,6 +32,11 @@ $root-name: date-range-picker;
     border-color: fn.use-var(color, primary);
   }
 
+  @include m.is(focus) {
+    border-color: fn.use-var(color, primary);
+    box-shadow: fn.use-var(focus-ring);
+  }
+
   @include m.e(input) {
     outline: none;
     border: none;

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

@@ -7,11 +7,11 @@
     >
       <u-tip v-if="tips" :content="tips" :class="cls.e('tips')" :show-delay="500">
         <span :class="cls.e('tip-label')">
-          <slot name="label">{{ label }}:</slot>
+          <slot name="label">{{ label }}{{ labelPosition === 'top' ? '' : ':' }}</slot>
         </span>
       </u-tip>
       <template v-else>
-        <slot name="label">{{ label }}:</slot>
+        <slot name="label">{{ label }}{{ labelPosition === 'top' ? '' : ':' }}</slot>
       </template>
     </label>
 

package/src/components/form-item/style.scss

@@ -28,7 +28,7 @@ $root-name: form-item;
     color: fn.use-var(text-color, main);
     text-align: right;
     line-height: 1.3;
-    font-weight: 300;
+    font-weight: 400;
 
     @include m.flex($justify: flex-end);
 
@@ -99,6 +99,7 @@ $root-name: form-item;
       padding-right: 0;
       padding-bottom: 4px;
       text-align: left;
+      color: fn.use-var(text-color, second);
       justify-content: flex-start;
     }
   }

package/src/components/grid-input/style.scss

@@ -26,6 +26,7 @@ $root-name: grid-input;
 
       @include m.is(focus) {
         border-color: fn.use-var(color, primary);
+        box-shadow: fn.use-var(focus-ring);
 
         @keyframes fade {
           0% {

package/src/components/multi-select/multi-select.vue

@@ -4,7 +4,7 @@
     v-bind="$attrs"
     trigger="click"
     ref="dropdownRef"
-    :class="[cls.b, cls.m(size), bem.is('disabled', disabled)]"
+    :class="[cls.b, cls.m(size), bem.is('disabled', disabled), bem.is('focus', dropdownVisible)]"
     :content-class="[cls.e('panel'), cls.em('panel', size), contentClass]"
     :content-style="contentStyle"
     :min-width="minWidth"
@@ -16,11 +16,11 @@
   >
     <!-- 触发 -->
     <template #trigger>
-      <span :class="cls.e('placeholder')" v-show="!model?.length">
+      <span :class="cls.e('placeholder')" v-if="!filterable && !model?.length">
         {{ placeholder }}
       </span>
 
-      <div v-if="model?.length" :class="cls.e('tags')">
+      <div v-if="model?.length || filterable" :class="cls.e('tags')">
         <u-tag
           v-for="option of tags"
           :key="option[valueKey]"
@@ -31,6 +31,19 @@
           {{ option[labelKey] }}
         </u-tag>
         <u-tag v-if="restTag" size="small"> {{ restTag }}+ </u-tag>
+
+        <!-- 内嵌查询输入框：承载过滤与回车创建 -->
+        <input
+          v-if="filterable"
+          ref="inputRef"
+          :class="cls.e('input')"
+          v-model="queryString"
+          :placeholder="model?.length ? '' : placeholder"
+          :disabled="disabled"
+          @click.stop="handleInputClick"
+          @focus="handleInputFocus"
+          @keydown.enter.prevent="handleCreateByEnter"
+        />
       </div>
 
       <transition name="zoom-in" mode="out-in">
@@ -62,19 +75,6 @@
         <span> 已选 {{ model?.length }}/{{ max ?? options?.length ?? 0 }} </span>
       </div>
 
-      <!-- 过滤器 -->
-      <div v-if="filterable" :class="cls.e('content-filter')">
-        <u-input
-          placeholder="输入关键字进行过滤"
-          v-model="queryString"
-          @keydown.enter.prevent="handleCreateByEnter"
-        >
-          <template #suffix>
-            <u-icon><Search /></u-icon>
-          </template>
-        </u-input>
-      </div>
-
       <!-- 多选列表 -->
       <!--
         虚拟化启用时内容容器 height 由 useVirtualizer 命令式写入；
@@ -143,10 +143,18 @@
 <script lang="ts" setup>
 import { o as chainObj } from '@cat-kit/core'
 import { useFormFallbackProps, useVirtualizer } from '@veltra/compositions'
-import { ArrowDown, Close, Search } from '@veltra/icons/normal'
+import { ArrowDown, Close } from '@veltra/icons/normal'
 import { bem, fieldKey, FORM_EMPTY_CONTENT } from '@veltra/utils'
 import { injectFormContext } from '@veltra/utils'
-import { computed, shallowRef, shallowReactive, watch, provide } from 'vue'
+import {
+  computed,
+  nextTick,
+  shallowRef,
+  shallowReactive,
+  watch,
+  provide,
+  useTemplateRef
+} from 'vue'
 
 import type {
   MultiSelectEmits,
@@ -158,7 +166,6 @@ import { UCheckbox } from '../checkbox'
 import { UDropdown } from '../dropdown'
 import { UEmpty } from '../empty'
 import { UIcon } from '../icon'
-import { UInput } from '../input'
 import { UScroll } from '../scroll'
 import { useOptions } from '../select/use-options'
 import { UTag } from '../tag'
@@ -319,12 +326,35 @@ const restTag = computed(() => {
   return (model.value?.length ?? 0) - tags.value.length
 })
 
+const dropdownVisible = shallowRef(false)
+
+const inputRef = useTemplateRef<HTMLInputElement>('inputRef')
+
 const handleDropdownVisible = (visible: boolean) => {
+  dropdownVisible.value = visible
   if (!visible) {
     queryString.value = ''
   }
 }
 
+/**
+ * 拦截输入区域的点击（@click.stop）：阻止 dropdown 的 trigger 开合切换，
+ * 保持面板展开以不中断输入。
+ */
+const handleInputClick = () => {
+  if (!dropdownVisible.value) dropdownRef.value?.open()
+}
+
+const handleInputFocus = () => {
+  if (!dropdownVisible.value) dropdownRef.value?.open()
+}
+
+/** 勾选后把焦点还给输入框，便于连续输入过滤 */
+const refocusInput = () => {
+  if (!filterable.value) return
+  nextTick(() => inputRef.value?.focus())
+}
+
 const handleCheck = (option: Record<string, any>, checked: boolean) => {
   if (checked) {
     if (option.__isTemp && props.creatable) {
@@ -352,6 +382,7 @@ const handleCheck = (option: Record<string, any>, checked: boolean) => {
 
   emitChange()
   dropdownRef.value?.updateDropdown()
+  refocusInput()
 }
 
 /** 全选 */

package/src/components/multi-select/style.scss

@@ -36,13 +36,18 @@ $root-name: multi-select;
     border-color: fn.use-var(color, primary);
   }
 
+  @include m.is(focus) {
+    border-color: fn.use-var(color, primary);
+    box-shadow: fn.use-var(focus-ring);
+  }
+
   @include m.e(ripple) {
     background-color: fn.use-var(color, primary, light-7);
     opacity: 0.5;
   }
 
   @include m.e(options) {
-    max-height: 180px;
+    max-height: 240px;
   }
 
   @include m.e(options-wrap) {
@@ -79,6 +84,27 @@ $root-name: multi-select;
     @include m.flex($justify: flex-start, $align: center, $wrap: wrap);
   }
 
+  @include m.e(input) {
+    flex: 1;
+    min-width: 60px;
+    padding: 0;
+    margin: 0;
+    border: none;
+    outline: none;
+    background: transparent;
+    font: inherit;
+    color: fn.use-var(text-color, main);
+    cursor: text;
+
+    &::placeholder {
+      color: fn.use-var(text-color, placeholder);
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+  }
+
   @include m.e(readonly-tags) {
     padding-left: 0;
     padding-right: 0;
@@ -104,9 +130,6 @@ $root-name: multi-select;
 
   @include m.e(panel) {
     @include m.size using ($size) {
-      @include m.bem($root-name, content-filter) {
-        padding: calc(fn.use-var(gap, $size) / 2) fn.use-var(gap, $size);
-      }
       @include m.bem($root-name, content-header) {
         padding: calc(fn.use-var(gap, $size) / 2) calc(fn.use-var(gap, $size) * 2);
         border-bottom: fn.use-var(border);

package/src/components/multi-tree-select/multi-tree-select.vue

@@ -2,7 +2,7 @@
   <u-dropdown
     v-if="!readonly"
     v-bind="$attrs"
-    :class="[cls.b, cls.m(size), bem.is('disabled', disabled)]"
+    :class="[cls.b, cls.m(size), bem.is('disabled', disabled), bem.is('focus', dropdownVisible)]"
     trigger="click"
     :content-class="[cls.e('panel'), cls.em('panel', size), contentClass]"
     :content-style="contentStyle"
@@ -16,12 +16,12 @@
   >
     <template #trigger>
       <!-- 默认展示 -->
-      <span :class="cls.e('placeholder')" v-show="!tags.length">
+      <span :class="cls.e('placeholder')" v-if="!filterable && !tags.length">
         {{ placeholder }}
       </span>
 
       <!-- 选择的数据项 -->
-      <div v-if="tags.length" :class="cls.e('tags')">
+      <div v-if="tags.length || filterable" :class="cls.e('tags')">
         <u-tag
           v-for="(tag, index) in visibleTags"
           :key="tag[valueKey]"
@@ -31,6 +31,18 @@
           {{ tag[labelKey] }}
         </u-tag>
         <u-tag v-if="hiddenCount > 0">+{{ hiddenCount }}</u-tag>
+
+        <!-- 内嵌查询输入框：承载过滤 -->
+        <input
+          v-if="filterable"
+          ref="inputRef"
+          :class="cls.e('input')"
+          v-model="qs"
+          :placeholder="tags.length ? '' : placeholder"
+          :disabled="disabled"
+          @click.stop="handleInputClick"
+          @focus="handleInputFocus"
+        />
       </div>
       <!-- 清空 icon -->
       <transition name="zoom-in" mode="out-in">
@@ -59,14 +71,6 @@
           {{ allExpanded ? '收起全部' : '展开全部' }}
         </u-button>
       </div>
-      <!-- 过滤器 -->
-      <div v-if="filterable" :class="[cls.e('content-filter'), cls.m(size)]">
-        <u-input placeholder="输入关键字进行过滤" v-model="qs">
-          <template #suffix>
-            <u-icon><Search /></u-icon>
-          </template>
-        </u-input>
-      </div>
       <!-- 菜单列表 -->
       <u-tree
         v-bind="treeProps"
@@ -98,10 +102,10 @@
 <script lang="ts" setup>
 import { dfs, o } from '@cat-kit/core'
 import { useFormFallbackProps } from '@veltra/compositions'
-import { ArrowDown, Close, Search } from '@veltra/icons/normal'
+import { ArrowDown, Close } from '@veltra/icons/normal'
 import { bem, fieldKey, FORM_EMPTY_CONTENT } from '@veltra/utils'
 import { injectFormContext } from '@veltra/utils'
-import { computed, nextTick, shallowRef, watch } from 'vue'
+import { computed, nextTick, shallowRef, useTemplateRef, watch } from 'vue'
 
 import type { MultiTreeSelectProps, MultiTreeSelectEmits, TreeExposed } from '../../types'
 import type { DropdownExposed } from '../../types'
@@ -109,7 +113,6 @@ import { UButton } from '../button'
 import { UCheckbox } from '../checkbox'
 import { UDropdown } from '../dropdown'
 import { UIcon } from '../icon'
-import { UInput } from '../input'
 import { UTag } from '../tag'
 import { UTree } from '../tree'
 import type { TreeSlotsScope } from '../tree/di'
@@ -306,9 +309,26 @@ const hiddenCount = computed(() => {
   return 0
 })
 
+const dropdownVisible = shallowRef(false)
+
+const inputRef = useTemplateRef<HTMLInputElement>('inputRef')
+
 const handleDropdownVisible = (visible: boolean) => {
+  dropdownVisible.value = visible
   if (!visible) {
     qs.value = ''
   }
 }
+
+/**
+ * 拦截输入区域的点击（@click.stop）：阻止 dropdown 的 trigger 开合切换，
+ * 保持面板展开以不中断输入。
+ */
+const handleInputClick = () => {
+  if (!dropdownVisible.value) dropdownRef.value?.open()
+}
+
+const handleInputFocus = () => {
+  if (!dropdownVisible.value) dropdownRef.value?.open()
+}
 </script>

package/src/components/multi-tree-select/style.scss

@@ -22,6 +22,11 @@ $root-name: multi-tree-select;
     border-color: fn.use-var(color, primary);
   }
 
+  @include m.is(focus) {
+    border-color: fn.use-var(color, primary);
+    box-shadow: fn.use-var(focus-ring);
+  }
+
   @include m.size using ($size) {
     min-height: fn.use-var(form-component-height, $size);
     border-radius: fn.use-var(radius, $size);
@@ -58,16 +63,33 @@ $root-name: multi-tree-select;
     color: fn.use-var(text-color, placeholder);
   }
 
-  @include m.e(filter) {
-    margin-bottom: 4px;
-  }
-
   @include m.e(tags) {
     flex-grow: 1;
     overflow: hidden;
     @include m.flex($justify: flex-start, $align: center, $wrap: wrap);
   }
 
+  @include m.e(input) {
+    flex: 1;
+    min-width: 60px;
+    padding: 0;
+    margin: 0;
+    border: none;
+    outline: none;
+    background: transparent;
+    font: inherit;
+    color: fn.use-var(text-color, main);
+    cursor: text;
+
+    &::placeholder {
+      color: fn.use-var(text-color, placeholder);
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+  }
+
   @include m.e(readonly-tags) {
     padding-left: 0;
     padding-right: 0;
@@ -90,21 +112,18 @@ $root-name: multi-tree-select;
 
   @include m.e(panel) {
     @include m.size using ($size) {
-      @include m.bem($root-name, content-filter) {
-        padding: calc(fn.use-var(gap, $size) / 2) fn.use-var(gap, $size);
-      }
       @include m.bem($root-name, content-header) {
         padding: calc(fn.use-var(gap, $size) / 2) fn.use-var(gap, $size);
         border-bottom: fn.use-var(border);
       }
 
       @include m.bem($root-name, content-tree) {
-        padding: calc(fn.use-var(gap, $size) / 2) fn.use-var(gap, $size);
+        padding: fn.use-var(gap, $size);
       }
     }
   }
 
   @include m.e(content-tree) {
-    max-height: 272px;
+    max-height: 240px;
   }
 }