Update main from dev (#1740)

* feat(select): editable-select和select组件增加input-cahnge事件 (#1738) Co-authored-by: GreatZP <greatzp@greatzp.cn> * chore: Update package.json (#1739) --------- Co-authored-by: GreatZP <greatzp@greatzp.cn>
DevCloudFE · Sep 12, 2023 · 5030024 · 5030024
1 parent 4afaf09
commit 5030024
Show file tree

Hide file tree

Showing 8 changed files with 19 additions and 6 deletions.
diff --git a/packages/devui-vue/devui/editable-select/src/composables/use-input-event.ts b/packages/devui-vue/devui/editable-select/src/composables/use-input-event.ts
@@ -64,6 +64,7 @@ export function useInputEvent(
 
   const handleInputChange = () => {
     states.query = states.inputValue;
+    ctx.emit('inputChange', states.query);
     handleQueryChange(states.query);
   };
 

diff --git a/packages/devui-vue/devui/editable-select/src/editable-select.tsx b/packages/devui-vue/devui/editable-select/src/editable-select.tsx
@@ -21,7 +21,7 @@ import './editable-select.scss';
 export default defineComponent({
   name: 'DEditableSelect',
   props: editableSelectProps,
-  emits: ['update:modelValue', 'focus', 'blur', 'clear', 'change', 'visibleChange', 'loadMore'],
+  emits: ['update:modelValue', 'focus', 'blur', 'clear', 'change', 'visibleChange', 'loadMore', 'inputChange'],
   setup(props: EditableSelectProps, ctx: SetupContext) {
     // name space
     const ns = useNamespace('editable-select');

diff --git a/packages/devui-vue/devui/select/src/select.tsx b/packages/devui-vue/devui/select/src/select.tsx
@@ -29,7 +29,7 @@ import { FlexibleOverlay, Placement } from '../../overlay';
 export default defineComponent({
   name: 'DSelect',
   props: selectProps,
-  emits: ['toggle-change', 'value-change', 'update:modelValue', 'focus', 'blur', 'remove-tag', 'clear'],
+  emits: ['toggle-change', 'value-change', 'update:modelValue', 'focus', 'blur', 'remove-tag', 'clear', 'input-change'],
   setup(props: SelectProps, ctx: SetupContext) {
     const app = getCurrentInstance();
     const t = createI18nTranslate('DSelect', app);

diff --git a/packages/devui-vue/devui/select/src/use-select.ts b/packages/devui-vue/devui/select/src/use-select.ts
@@ -268,6 +268,7 @@ export default function useSelect(
 
   const queryChange = (query: string) => {
     filterQuery.value = query;
+    ctx.emit('input-change', query);
   };
 
   const isLoading = computed(() => typeof props.loading === 'boolean' && props.loading);

diff --git a/packages/devui-vue/docs/components/editable-select/index.md b/packages/devui-vue/docs/components/editable-select/index.md
@@ -215,7 +215,7 @@ export default defineComponent({
 
 ```vue
 <template>
-  <d-editable-select v-model="value" :width="450" :options="options" allow-clear></d-editable-select>
+  <d-editable-select v-model="value" :width="450" :options="options" allow-clear @input-change="handleInputChange"></d-editable-select>
 </template>
 
 <script>
@@ -240,9 +240,14 @@ export default defineComponent({
       },
     ]);
 
+    const handleInputChange = (val) => {
+      console.log(val);
+    };
+
     return {
       value,
       options,
+      handleInputChange,
     };
   },
 });
@@ -471,6 +476,7 @@ export default defineComponent({
 | blur           | `(e: FocusEvent)->void`        | 可选，当 input 失去焦点时触发 |                       |
 | change         | `(value:string\|number)=>void` | 可选，选中值发生变化时触发    |
 | visible-change | `(visible:boolean)=>void`       | 可选，下拉框显隐时触发        |
+| input-change | `(inputvalue:string)=>void`       | 可选，输入框输入内容时触发        |[可清空选项](#可清空选项)|
 
 ### EditableSelect 插槽
 

diff --git a/packages/devui-vue/docs/components/menu/index.md b/packages/devui-vue/docs/components/menu/index.md
@@ -374,7 +374,7 @@ const addSelect = () => {
 | open-keys           | Array                 | []         | 默认展开的子菜单 key 值                                                         | [默认展开](#默认展开)     |
 | default-select-keys | Array                 | []         | 默认选择菜单项 key 值                                                           | [基本用法](#基本用法)     |
 | router              | Boolean               | false      | 是否启用`vue-router`模式。启用该模式会在激活导航时以 key 作为 path 进行路由跳转 | -                         |
-| disableOverflowStyle| Boolean               | false      | 是否禁用宽度过小时菜单的省略样式                                              | -                         |
+| disable-overflow-style| Boolean               | false      | 是否禁用宽度过小时菜单的省略样式                                              | -                         |
 
 ### Menu 事件
 

diff --git a/packages/devui-vue/docs/components/select/index.md b/packages/devui-vue/docs/components/select/index.md
@@ -376,7 +376,7 @@ export default defineComponent({
 ```vue
 <template>
   <div class="mb-0">默认筛选</div>
-  <d-select class="mb-2" v-model="value1" :allow-clear="true" filter>
+  <d-select class="mb-2" v-model="value1" :allow-clear="true" filter @input-change="handleInput">
     <d-option v-for="(item, index) in options.data" :key="index" :value="item.value" :name="item.name"></d-option>
   </d-select>
   <div class="mb-0">远程搜索</div>
@@ -418,13 +418,17 @@ export default defineComponent({
         options1.data = [];
       }
     };
+    const handleInput = (val) => {
+      console.log(val);
+    };
     return {
       value1,
       value2,
       options,
       options1,
       loading,
       filterFunc,
+      handleInput,
     };
   },
 });
@@ -539,6 +543,7 @@ export default defineComponent({
 | clear         | `Function()`              | 可选, 通过右侧删除图标清空所有选项时触发                       |
 | remove-tag    | `Function(value)`         | 可选，多选时删除单个 tag 时触发，参数为当前 tag 的值           |
 | load-more    | `Function()`               | 可选，下拉框有滚动条时滚动到底部触发           |[下拉列表显隐方法](#下拉列表显隐方法)|
+| input-change    | `Function(value)`       | 可选，输入框输入内容时触发，参数为输入的值           |[筛选、搜索选项](#筛选、搜索选项)|
 
 ### Select 插槽
 

diff --git a/packages/devui-vue/package.json b/packages/devui-vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-devui",
-  "version": "1.5.15",
+  "version": "1.5.15-feat.1",
   "license": "MIT",
   "description": "DevUI components based on Vite and Vue3",
   "keywords": [