diff --git a/apps/web-antd/src/adapter/component/index.ts b/apps/web-antd/src/adapter/component/index.ts index f382880a..7ae93072 100644 --- a/apps/web-antd/src/adapter/component/index.ts +++ b/apps/web-antd/src/adapter/component/index.ts @@ -41,6 +41,7 @@ import { const withDefaultPlaceholder = ( component: T, type: 'input' | 'select', + componentProps: Recordable = {}, ) => { return defineComponent({ inheritAttrs: false, @@ -63,7 +64,11 @@ const withDefaultPlaceholder = ( } }); return () => - h(component, { ...props, ...attrs, placeholder, ref: innerRef }, slots); + h( + component, + { ...componentProps, placeholder, ...props, ...attrs, ref: innerRef }, + slots, + ); }, }); }; @@ -102,38 +107,20 @@ async function initComponentAdapter() { // 如果你的组件体积比较大,可以使用异步加载 // Button: () => // import('xxx').then((res) => res.Button), - ApiSelect: (props, { attrs, slots }) => { - return h( - ApiComponent, - { - placeholder: $t('ui.placeholder.select'), - ...props, - ...attrs, - component: Select, - loadingSlot: 'suffixIcon', - visibleEvent: 'onDropdownVisibleChange', - modelPropName: 'value', - }, - slots, - ); - }, - ApiTreeSelect: (props, { attrs, slots }) => { - return h( - ApiComponent, - { - placeholder: $t('ui.placeholder.select'), - ...props, - ...attrs, - component: TreeSelect, - fieldNames: { label: 'label', value: 'value', children: 'children' }, - loadingSlot: 'suffixIcon', - modelPropName: 'value', - optionsPropName: 'treeData', - visibleEvent: 'onVisibleChange', - }, - slots, - ); - }, + ApiSelect: withDefaultPlaceholder(ApiComponent, 'select', { + component: Select, + loadingSlot: 'suffixIcon', + visibleEvent: 'onDropdownVisibleChange', + modelPropName: 'value', + }), + ApiTreeSelect: withDefaultPlaceholder(ApiComponent, 'select', { + component: TreeSelect, + fieldNames: { label: 'label', value: 'value', children: 'children' }, + loadingSlot: 'suffixIcon', + modelPropName: 'value', + optionsPropName: 'treeData', + visibleEvent: 'onVisibleChange', + }), AutoComplete, Checkbox, CheckboxGroup, @@ -143,19 +130,11 @@ async function initComponentAdapter() { return h(Button, { ...props, attrs, type: 'default' }, slots); }, Divider, - IconPicker: (props, { attrs, slots }) => { - return h( - IconPicker, - { - iconSlot: 'addonAfter', - inputComponent: Input, - modelValueProp: 'value', - ...props, - ...attrs, - }, - slots, - ); - }, + IconPicker: withDefaultPlaceholder(IconPicker, 'select', { + iconSlot: 'addonAfter', + inputComponent: Input, + modelValueProp: 'value', + }), Input: withDefaultPlaceholder(Input, 'input'), InputNumber: withDefaultPlaceholder(InputNumber, 'input'), InputPassword: withDefaultPlaceholder(InputPassword, 'input'), diff --git a/apps/web-ele/src/adapter/component/index.ts b/apps/web-ele/src/adapter/component/index.ts index 5de86aa5..5de17b75 100644 --- a/apps/web-ele/src/adapter/component/index.ts +++ b/apps/web-ele/src/adapter/component/index.ts @@ -37,6 +37,7 @@ import { const withDefaultPlaceholder = ( component: T, type: 'input' | 'select', + componentProps: Recordable = {}, ) => { return defineComponent({ inheritAttrs: false, @@ -59,7 +60,11 @@ const withDefaultPlaceholder = ( } }); return () => - h(component, { ...props, ...attrs, placeholder, ref: innerRef }, slots); + h( + component, + { ...componentProps, placeholder, ...props, ...attrs, ref: innerRef }, + slots, + ); }, }); }; @@ -89,37 +94,19 @@ async function initComponentAdapter() { // 如果你的组件体积比较大,可以使用异步加载 // Button: () => // import('xxx').then((res) => res.Button), - ApiSelect: (props, { attrs, slots }) => { - return h( - ApiComponent, - { - placeholder: $t('ui.placeholder.select'), - ...props, - ...attrs, - component: ElSelectV2, - loadingSlot: 'loading', - visibleEvent: 'onVisibleChange', - }, - slots, - ); - }, - ApiTreeSelect: (props, { attrs, slots }) => { - return h( - ApiComponent, - { - placeholder: $t('ui.placeholder.select'), - ...props, - ...attrs, - component: ElTreeSelect, - props: { label: 'label', children: 'children' }, - nodeKey: 'value', - loadingSlot: 'loading', - optionsPropName: 'data', - visibleEvent: 'onVisibleChange', - }, - slots, - ); - }, + ApiSelect: withDefaultPlaceholder(ApiComponent, 'select', { + component: ElSelectV2, + loadingSlot: 'loading', + visibleEvent: 'onVisibleChange', + }), + ApiTreeSelect: withDefaultPlaceholder(ApiComponent, 'select', { + component: ElTreeSelect, + props: { label: 'label', children: 'children' }, + nodeKey: 'value', + loadingSlot: 'loading', + optionsPropName: 'data', + visibleEvent: 'onVisibleChange', + }), Checkbox: ElCheckbox, CheckboxGroup: (props, { attrs, slots }) => { let defaultSlot; @@ -149,19 +136,11 @@ async function initComponentAdapter() { return h(ElButton, { ...props, attrs, type: 'primary' }, slots); }, Divider: ElDivider, - IconPicker: (props, { attrs, slots }) => { - return h( - IconPicker, - { - iconSlot: 'append', - modelValueProp: 'model-value', - inputComponent: ElInput, - ...props, - ...attrs, - }, - slots, - ); - }, + IconPicker: withDefaultPlaceholder(IconPicker, 'select', { + iconSlot: 'append', + modelValueProp: 'model-value', + inputComponent: ElInput, + }), Input: withDefaultPlaceholder(ElInput, 'input'), InputNumber: withDefaultPlaceholder(ElInputNumber, 'input'), RadioGroup: (props, { attrs, slots }) => { diff --git a/apps/web-naive/src/adapter/component/index.ts b/apps/web-naive/src/adapter/component/index.ts index 83430d8c..b7aa9d85 100644 --- a/apps/web-naive/src/adapter/component/index.ts +++ b/apps/web-naive/src/adapter/component/index.ts @@ -37,6 +37,7 @@ import { message } from '#/adapter/naive'; const withDefaultPlaceholder = ( component: T, type: 'input' | 'select', + componentProps: Recordable = {}, ) => { return defineComponent({ inheritAttrs: false, @@ -59,7 +60,11 @@ const withDefaultPlaceholder = ( } }); return () => - h(component, { ...props, ...attrs, placeholder, ref: innerRef }, slots); + h( + component, + { ...componentProps, placeholder, ...props, ...attrs, ref: innerRef }, + slots, + ); }, }); }; @@ -90,37 +95,19 @@ async function initComponentAdapter() { // Button: () => // import('xxx').then((res) => res.Button), - ApiSelect: (props, { attrs, slots }) => { - return h( - ApiComponent, - { - placeholder: $t('ui.placeholder.select'), - ...props, - ...attrs, - component: NSelect, - modelPropName: 'value', - }, - slots, - ); - }, - ApiTreeSelect: (props, { attrs, slots }) => { - return h( - ApiComponent, - { - placeholder: $t('ui.placeholder.select'), - ...props, - ...attrs, - component: NTreeSelect, - nodeKey: 'value', - loadingSlot: 'arrow', - keyField: 'value', - modelPropName: 'value', - optionsPropName: 'options', - visibleEvent: 'onVisibleChange', - }, - slots, - ); - }, + ApiSelect: withDefaultPlaceholder(ApiComponent, 'select', { + component: NSelect, + modelPropName: 'value', + }), + ApiTreeSelect: withDefaultPlaceholder(ApiComponent, 'select', { + component: NTreeSelect, + nodeKey: 'value', + loadingSlot: 'arrow', + keyField: 'value', + modelPropName: 'value', + optionsPropName: 'options', + visibleEvent: 'onVisibleChange', + }), Checkbox: NCheckbox, CheckboxGroup: (props, { attrs, slots }) => { let defaultSlot; @@ -148,13 +135,10 @@ async function initComponentAdapter() { return h(NButton, { ...props, attrs, type: 'primary' }, slots); }, Divider: NDivider, - IconPicker: (props, { attrs, slots }) => { - return h( - IconPicker, - { iconSlot: 'suffix', inputComponent: NInput, ...props, ...attrs }, - slots, - ); - }, + IconPicker: withDefaultPlaceholder(IconPicker, 'select', { + iconSlot: 'suffix', + inputComponent: NInput, + }), Input: withDefaultPlaceholder(NInput, 'input'), InputNumber: withDefaultPlaceholder(NInputNumber, 'input'), RadioGroup: (props, { attrs, slots }) => { diff --git a/playground/src/adapter/component/index.ts b/playground/src/adapter/component/index.ts index 6a2dc750..9b847dfc 100644 --- a/playground/src/adapter/component/index.ts +++ b/playground/src/adapter/component/index.ts @@ -41,6 +41,7 @@ import { const withDefaultPlaceholder = ( component: T, type: 'input' | 'select', + componentProps: Recordable = {}, ) => { return defineComponent({ inheritAttrs: false, @@ -63,7 +64,11 @@ const withDefaultPlaceholder = ( } }); return () => - h(component, { ...props, ...attrs, placeholder, ref: innerRef }, slots); + h( + component, + { ...componentProps, placeholder, ...props, ...attrs, ref: innerRef }, + slots, + ); }, }); }; @@ -103,38 +108,20 @@ async function initComponentAdapter() { // Button: () => // import('xxx').then((res) => res.Button), - ApiSelect: (props, { attrs, slots }) => { - return h( - ApiComponent, - { - placeholder: $t('ui.placeholder.select'), - ...props, - ...attrs, - component: Select, - loadingSlot: 'suffixIcon', - modelPropName: 'value', - visibleEvent: 'onVisibleChange', - }, - slots, - ); - }, - ApiTreeSelect: (props, { attrs, slots }) => { - return h( - ApiComponent, - { - placeholder: $t('ui.placeholder.select'), - ...props, - ...attrs, - component: TreeSelect, - fieldNames: { label: 'label', value: 'value', children: 'children' }, - loadingSlot: 'suffixIcon', - modelPropName: 'value', - optionsPropName: 'treeData', - visibleEvent: 'onVisibleChange', - }, - slots, - ); - }, + ApiSelect: withDefaultPlaceholder(ApiComponent, 'select', { + component: Select, + loadingSlot: 'suffixIcon', + modelPropName: 'value', + visibleEvent: 'onVisibleChange', + }), + ApiTreeSelect: withDefaultPlaceholder(ApiComponent, 'select', { + component: TreeSelect, + fieldNames: { label: 'label', value: 'value', children: 'children' }, + loadingSlot: 'suffixIcon', + modelPropName: 'value', + optionsPropName: 'treeData', + visibleEvent: 'onVisibleChange', + }), AutoComplete, Checkbox, CheckboxGroup, @@ -144,19 +131,11 @@ async function initComponentAdapter() { return h(Button, { ...props, attrs, type: 'default' }, slots); }, Divider, - IconPicker: (props, { attrs, slots }) => { - return h( - IconPicker, - { - iconSlot: 'addonAfter', - inputComponent: Input, - modelValueProp: 'value', - ...props, - ...attrs, - }, - slots, - ); - }, + IconPicker: withDefaultPlaceholder(IconPicker, 'select', { + iconSlot: 'addonAfter', + inputComponent: Input, + modelValueProp: 'value', + }), Input: withDefaultPlaceholder(Input, 'input'), InputNumber: withDefaultPlaceholder(InputNumber, 'input'), InputPassword: withDefaultPlaceholder(InputPassword, 'input'),