@veltra/desktop 1.2.20 → 1.2.22

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

@@ -10,6 +10,7 @@ import { dfs, o } from "@cat-kit/core";
 //#region src/components/tree-select/tree-select.vue
 const _sfc_main = /*@__PURE__*/ defineComponent({
 	name: "UTreeSelect",
+	inheritAttrs: false,
 	__name: "tree-select",
 	props: /*@__PURE__*/ mergeModels({
 		modelValue: {},
@@ -139,9 +140,8 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			if (!visible) qs.value = "";
 		};
 		return (_ctx, _cache) => {
-			return !unref(readonly) ? (openBlock(), createBlock(unref(_sfc_main$2), {
-				key: 0,
-				class: normalizeClass([unref(cls).b, unref(bem).is("disabled", unref(disabled))]),
+			return !unref(readonly) ? (openBlock(), createBlock(unref(_sfc_main$2), mergeProps({ key: 0 }, _ctx.$attrs, {
+				class: [unref(cls).b, unref(bem).is("disabled", unref(disabled))],
 				trigger: "click",
 				"content-class": [
 					unref(cls).e("panel"),
@@ -155,7 +155,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				width: __props.width,
 				disabled: unref(disabled),
 				"onUpdate:visible": handleDropdownVisible
-			}, {
+			}), {
 				trigger: withCtx(() => [createVNode(unref(input_default), {
 					size: unref(size),
 					disabled: unref(disabled),
@@ -210,7 +210,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 					}), null, 16, ["selected", "class"])
 				]),
 				_: 3
-			}, 8, [
+			}, 16, [
 				"class",
 				"content-class",
 				"content-style",

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 { 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: 'UTreeSelect' })\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', 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    :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: '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\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', 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

@@ -24,15 +24,15 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
   onChange?: ((selectedData?: Record<string, any> | undefined) => any) | undefined;
   "onUpdate:text"?: ((text?: string | undefined) => any) | undefined;
 }>, {
+  disabled: boolean;
+  readonly: boolean;
+  minWidth: string;
   expandAll: boolean;
   labelKey: string;
   valueKey: string;
   placeholder: string;
   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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veltra/desktop",
-  "version": "1.2.20",
+  "version": "1.2.22",
   "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.2.20",
-    "@veltra/directives": "1.2.20",
-    "@veltra/icons": "1.2.20",
-    "@veltra/styles": "1.2.20",
-    "@veltra/utils": "1.2.20",
+    "@veltra/compositions": "1.2.22",
+    "@veltra/directives": "1.2.22",
+    "@veltra/icons": "1.2.22",
+    "@veltra/styles": "1.2.22",
+    "@veltra/utils": "1.2.22",
     "vue": ">=3.5.39"
   },
   "devDependencies": {

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

@@ -1,6 +1,7 @@
 <template>
   <u-dropdown
     v-if="!readonly"
+    v-bind="$attrs"
     trigger="click"
     :class="[cls.b, cls.m(size), bem.is('disabled', disabled)]"
     ref="dropdownRef"

package/src/components/cascade/cascade.vue

@@ -1,6 +1,7 @@
 <template>
   <u-dropdown
     v-if="!readonly"
+    v-bind="$attrs"
     :class="[cls.b, bem.is('disabled', disabled), bem.is('multiple', multiple), cls.m(size)]"
     :content-class="[cls.e('panel'), cls.em('panel', size)]"
     trigger="click"
@@ -124,7 +125,7 @@ import { useCheck } from './use-check'
 import { useDataMap } from './use-data-map'
 import { useSelect } from './use-select'
 
-defineOptions({ name: 'UCascade' })
+defineOptions({ name: 'UCascade', inheritAttrs: false })
 
 const props = withDefaults(defineProps<CascadeProps>(), {
   labelKey: 'label',

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

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="!readonly" :class="className" @click="handleInput">
+  <div v-if="!readonly" v-bind="$attrs" :class="className" @click="handleInput">
     <slot />
   </div>
 
@@ -21,7 +21,7 @@ import { computed } from 'vue'
 import type { CheckboxButtonProps, CheckboxButtonEmits } from '../../types'
 import { UTag } from '../tag'
 
-defineOptions({ name: 'UCheckboxButton' })
+defineOptions({ name: 'UCheckboxButton', inheritAttrs: false })
 
 const props = withDefaults(defineProps<CheckboxButtonProps>(), {
   disabled: undefined,

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

@@ -1,5 +1,5 @@
 <template>
-  <div :class="[cls.b, cls.m(size), bem.is('block', block)]" v-if="!readonly">
+  <div v-if="!readonly" v-bind="$attrs" :class="[cls.b, cls.m(size), bem.is('block', block)]">
     <u-checkbox
       v-for="item of items"
       :key="item[valueKey]"
@@ -34,7 +34,7 @@ import type { CheckboxGroupProps, CheckboxGroupEmits } from '../../types'
 import { UCheckbox } from '../checkbox'
 import { UTag } from '../tag'
 
-defineOptions({ name: 'UCheckboxGroup' })
+defineOptions({ name: 'UCheckboxGroup', inheritAttrs: false })
 
 const props = withDefaults(defineProps<CheckboxGroupProps>(), {
   labelKey: 'label',

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

@@ -1,12 +1,13 @@
 <template>
   <u-dropdown
+    v-if="!readonly"
+    v-bind="$attrs"
     :class="className"
     trigger="click"
     width="auto"
     ref="dropdownRef"
     @update:visible=""
     :disabled="disabled"
-    v-if="!readonly"
   >
     <template #trigger>
       <u-input
@@ -49,7 +50,7 @@ import { UDropdown } from '../dropdown'
 import { UIcon } from '../icon'
 import { UInput } from '../input'
 
-defineOptions({ name: 'UDatePicker' })
+defineOptions({ name: 'UDatePicker', inheritAttrs: false })
 
 const props = withDefaults(defineProps<DatePickerProps>(), {
   placeholder: '选择日期',

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

@@ -1,5 +1,7 @@
 <template>
   <u-dropdown
+    v-if="!readonly"
+    v-bind="$attrs"
     :class="className"
     trigger="click"
     :content-class="[cls.e('panel'), cls.em('panel', size)]"
@@ -8,7 +10,6 @@
     :disabled="disabled"
     @mouseenter.native="hovered = true"
     @mouseleave.native="hovered = false"
-    v-if="!readonly"
   >
     <template #trigger>
       <input
@@ -72,7 +73,7 @@ import { UDatePanel } from '../date-panel'
 import { UDropdown } from '../dropdown'
 import { UIcon } from '../icon'
 
-defineOptions({ name: 'UDateRangePicker' })
+defineOptions({ name: 'UDateRangePicker', inheritAttrs: false })
 
 const props = withDefaults(defineProps<DateRangePickerProps>(), {
   placeholder: () => ['起始日期', '结束日期'],

package/src/components/form/form.vue

@@ -3,6 +3,7 @@
     tag="form"
     ref="grid"
     @submit.prevent
+    gap="0 12px"
     :cols="cols || breakpointCols"
     :class="[cls.b, bem.is('readonly', readonly)]"
   >

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

@@ -15,10 +15,6 @@ $root-name: form-item;
 
     @include m.bem($root-name, content) {
       min-height: fn.use-var(form-component-height, $size);
-
-      @include m.bem($root-name, viewer) {
-        min-height: fn.use-var(form-component-height, $size);
-      }
     }
 
     @include m.bem($root-name, tips) {
@@ -39,6 +35,7 @@ $root-name: form-item;
     @include m.is(required) {
       &::before {
         content: '*';
+        padding-right: 2px;
         color: fn.use-var(color, danger);
       }
     }
@@ -63,13 +60,6 @@ $root-name: form-item;
     flex-grow: 1;
     word-break: break-all;
     @include m.flex($wrap: wrap);
-
-    @include m.bem($root-name, viewer) {
-      line-height: 1.3;
-      color: fn.use-var(text-color, title);
-      display: inline-flex;
-      align-items: center;
-    }
   }
 
   @include m.e(error) {

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

@@ -1,5 +1,5 @@
 <template>
-  <ul :class="[cls.b, cls.m(size)]" v-if="!readonly">
+  <ul v-if="!readonly" v-bind="$attrs" :class="[cls.b, cls.m(size)]">
     <li v-if="isEmpty && creatable">
       <u-button style="width: 100%" :icon="Plus" @click="handleAdd(0)" :size="size">
         新增
@@ -51,7 +51,7 @@ import type { GroupInputEmits, GroupInputProps } from '../../types'
 import { UButton } from '../button'
 import { useGroupItems } from './use-group-items'
 
-defineOptions({ name: 'UGroupInput' })
+defineOptions({ name: 'UGroupInput', inheritAttrs: false })
 
 const props = withDefaults(defineProps<GroupInputProps<GroupItem>>(), {
   modelValue: () => [],

package/src/components/input/input.vue

@@ -1,9 +1,10 @@
 <template>
   <div
+    v-if="!readonly"
+    v-bind="$attrs"
     :class="inputClass"
     @mouseenter="handleMouseEnter"
     @mouseleave="handleMouseLeave"
-    v-if="!readonly"
   >
     <span v-if="$slots.prefix || prefix" :class="prefixClass" @click="handlePrefixClick">
       {{ prefix }}
@@ -62,7 +63,7 @@ import { computed, getCurrentInstance, ref, shallowRef, nextTick } from 'vue'
 import type { InputEmits, InputProps, _InputExposed } from '../../types'
 import { UIcon } from '../icon'
 
-defineOptions({ name: 'UInput' })
+defineOptions({ name: 'UInput', inheritAttrs: false })
 
 const props = withDefaults(defineProps<InputProps>(), {
   placeholder: '请输入',

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

@@ -1,6 +1,7 @@
 <template>
   <u-dropdown
     v-if="!readonly"
+    v-bind="$attrs"
     trigger="click"
     ref="dropdownRef"
     :class="[cls.b, cls.m(size), bem.is('disabled', disabled)]"
@@ -164,7 +165,7 @@ import { UTag } from '../tag'
 import { MultiSelectDIKey } from './di'
 import UMultiSelectOption from './multi-select-option.vue'
 
-defineOptions({ name: 'UMultiSelect' })
+defineOptions({ name: 'UMultiSelect', inheritAttrs: false })
 
 const props = withDefaults(defineProps<MultiSelectProps>(), {
   labelKey: 'label',

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

@@ -1,6 +1,7 @@
 <template>
   <u-dropdown
     v-if="!readonly"
+    v-bind="$attrs"
     :class="[cls.b, cls.m(size), bem.is('disabled', disabled)]"
     trigger="click"
     :content-class="[cls.e('panel'), cls.em('panel', size), contentClass]"
@@ -113,7 +114,7 @@ import { UTag } from '../tag'
 import { UTree } from '../tree'
 import type { TreeSlotsScope } from '../tree/di'
 
-defineOptions({ name: 'UMultiTreeSelect' })
+defineOptions({ name: 'UMultiTreeSelect', inheritAttrs: false })
 
 const cls = bem('multi-tree-select')
 

package/src/components/number-input/number-input.vue

@@ -68,13 +68,13 @@ import { vRipple } from '@veltra/directives'
 import { ArrowDown, ArrowUp, Close } from '@veltra/icons/normal'
 import { bem, FORM_EMPTY_CONTENT, Tween } from '@veltra/utils'
 import { injectFormContext } from '@veltra/utils'
-import { computed, shallowRef, watch } from 'vue'
+import { computed, shallowRef, useAttrs, watch } from 'vue'
 
 import type { NumberInputEmits, NumberInputProps, InputExposed } from '../../types'
 import { UIcon } from '../icon'
 import { UInput } from '../input'
 
-defineOptions({ name: 'UNumberInput' })
+defineOptions({ name: 'UNumberInput', inheritAttrs: false })
 
 const props = withDefaults(defineProps<NumberInputProps>(), {
   placeholder: '请输入',
@@ -94,9 +94,12 @@ const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, prop
   readonly: false
 })
 
-const inputProps = computed(() => {
-  return o(props).pick(['disabled', 'placeholder', 'size', 'prefix'])
-})
+const attrs = useAttrs()
+
+const inputProps = computed(() => ({
+  ...attrs,
+  ...o(props).pick(['disabled', 'placeholder', 'size', 'prefix'])
+}))
 
 const inputRef = shallowRef<InputExposed>()
 

package/src/components/number-range-input/number-range-input.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="!readonly" :class="className">
+  <div v-if="!readonly" v-bind="$attrs" :class="className">
     <u-number-input
       v-model="startModel"
       :placeholder="startPlaceholder"
@@ -36,7 +36,7 @@ import { computed, getCurrentInstance, nextTick, onMounted, watch } from 'vue'
 import type { NumberRangeInputEmits, NumberRangeInputProps, NumberRangeTuple } from '../../types'
 import { UNumberInput } from '../number-input'
 
-defineOptions({ name: 'UNumberRangeInput' })
+defineOptions({ name: 'UNumberRangeInput', inheritAttrs: false })
 
 const props = withDefaults(defineProps<NumberRangeInputProps>(), {
   startPlaceholder: '请输入',

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

@@ -1,5 +1,5 @@
 <template>
-  <div :class="[cls.b, bem.is('block', block), cls.m(size)]" v-if="!readonly">
+  <div v-if="!readonly" v-bind="$attrs" :class="[cls.b, bem.is('block', block), cls.m(size)]">
     <u-radio
       v-for="item of items"
       :key="item[valueKey]"
@@ -26,7 +26,7 @@ import { injectFormContext } from '@veltra/utils'
 import type { RadioGroupProps, RadioGroupEmits } from '../../types'
 import URadio from '../radio/radio.vue'
 
-defineOptions({ name: 'URadioGroup' })
+defineOptions({ name: 'URadioGroup', inheritAttrs: false })
 
 const props = withDefaults(defineProps<RadioGroupProps>(), {
   labelKey: 'label',

package/src/components/select/select.vue

@@ -1,6 +1,7 @@
 <template>
   <u-dropdown
     v-if="!readonly"
+    v-bind="$attrs"
     trigger="click"
     :class="[cls.b, bem.is('disabled', disabled)]"
     ref="dropdownRef"
@@ -137,7 +138,7 @@ import { UScroll } from '../scroll'
 import { useKeyboard } from './use-keyboard'
 import { useOptions } from './use-options'
 
-defineOptions({ name: 'USelect' })
+defineOptions({ name: 'USelect', inheritAttrs: false })
 
 const props = withDefaults(defineProps<SelectProps>(), {
   labelKey: 'label',

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

@@ -1,6 +1,7 @@
 <template>
   <u-dropdown
     v-if="!readonly"
+    v-bind="$attrs"
     :class="[cls.b, bem.is('disabled', disabled)]"
     trigger="click"
     :content-class="[cls.e('panel'), cls.em('panel', size), contentClass]"
@@ -73,7 +74,7 @@ import { UInput } from '../input'
 import { UTree } from '../tree'
 import type { TreeSlotsScope } from '../tree/di'
 
-defineOptions({ name: 'UTreeSelect' })
+defineOptions({ name: 'UTreeSelect', inheritAttrs: false })
 
 const props = withDefaults(defineProps<TreeSelectProps>(), {
   labelKey: 'label',