From 8b0db829ba3224ad10822055f8bfe841f434f214 Mon Sep 17 00:00:00 2001
From: HiNaruta <mydontspeak@foxmail.com>
Date: Fri, 23 Aug 2024 16:23:37 +0800
Subject: [PATCH 1/5] =?UTF-8?q?feat:=20=E2=9C=A8=20drop-menu=20=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=20filterable=20=E6=9C=AC=E5=9C=B0=E6=90=9C=E7=B4=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

feat: ✨ drop-menu 支持 filterable 本地搜索
---
 .../wd-drop-menu-item/wd-drop-menu-item.vue   | 66 ++++++++++++++++++-
 1 file changed, 63 insertions(+), 3 deletions(-)

diff --git a/src/uni_modules/wot-design-uni/components/wd-drop-menu-item/wd-drop-menu-item.vue b/src/uni_modules/wot-design-uni/components/wd-drop-menu-item/wd-drop-menu-item.vue
index ed4134570..3e758476b 100644
--- a/src/uni_modules/wot-design-uni/components/wd-drop-menu-item/wd-drop-menu-item.vue
+++ b/src/uni_modules/wot-design-uni/components/wd-drop-menu-item/wd-drop-menu-item.vue
@@ -16,8 +16,16 @@
       @after-leave="afterLeave"
     >
       <view v-if="options.length">
+        <wd-search
+          v-if="filterable"
+          v-model="filterVal"
+          :placeholder="filterPlaceholder || translate('filterPlaceholder')"
+          hide-cancel
+          placeholder-left
+          @change="handleFilterChange"
+        />
         <view
-          v-for="(item, index) in options"
+          v-for="(item, index) in filterOptions"
           :key="index"
           @click="choose(index)"
           :class="`wd-drop-item__option ${(item[valueKey] !== '' ? item[valueKey] : item) === modelValue ? 'is-active' : ''}`"
@@ -50,7 +58,7 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { computed, getCurrentInstance, inject, onBeforeMount, onBeforeUnmount, ref, watch } from 'vue'
+import { computed, getCurrentInstance, inject, onBeforeMount, onBeforeUnmount, ref, watch, nextTick } from 'vue'
 import { pushToQueue, removeFromQueue } from '../common/clickoutside'
 import { type Queue, queueKey } from '../composables/useQueue'
 import type { PopupType } from '../wd-popup/types'
@@ -58,6 +66,9 @@ import { useParent } from '../composables/useParent'
 import { DROP_MENU_KEY } from '../wd-drop-menu/types'
 import { isDef, isFunction } from '../common/util'
 import { dorpMenuItemProps, type DropMenuItemExpose } from './types'
+import { useTranslate } from '../composables/useTranslate'
+
+const { translate } = useTranslate('drop-menu')
 
 const props = defineProps(dorpMenuItemProps)
 const emit = defineEmits(['change', 'update:modelValue', 'open', 'opened', 'closed', 'close'])
@@ -70,6 +81,8 @@ const zIndex = ref<number>(12)
 const modal = ref<boolean>(true)
 const closeOnClickModal = ref<boolean>(true)
 const duration = ref<number>(0)
+const filterVal = ref<string>('')
+const filterOptions = ref<Array<Record<string, any>>>([])
 
 const { parent: dropMenu } = useParent(DROP_MENU_KEY)
 
@@ -101,6 +114,22 @@ watch(
   }
 )
 
+watch(
+  () => props.options,
+  (newValue) => {
+    console.log("🚀 ~ newValue:", newValue)
+    if (props.filterable && filterVal.value) {
+      formatFilterOptions(newValue, filterVal.value)
+    } else {
+      filterOptions.value = newValue
+    }
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
 onBeforeMount(() => {
   if (queue && queue.pushToQueue) {
     queue.pushToQueue(proxy)
@@ -117,6 +146,30 @@ onBeforeUnmount(() => {
   }
 })
 
+function handleFilterChange({ value }: { value: string }) {
+  if (value === '') {
+    filterOptions.value = []
+    filterVal.value = value
+    nextTick(() => {
+      filterOptions.value = props.options
+    })
+  } else {
+    filterVal.value = value
+    formatFilterOptions(props.options, value)
+  }
+}
+
+function formatFilterOptions(options: Record<string, any>[], filterVal: string) {
+  const filterOptionsTemp = options.filter((item) => {
+    return item[props.labelKey].indexOf(filterVal) > -1
+  })
+  filterOptions.value = []
+  nextTick(() => {
+    filterOptions.value = filterOptionsTemp
+  })
+}
+
+
 function getShowPop() {
   return showPop.value
 }
@@ -124,13 +177,20 @@ function getShowPop() {
 function choose(index: number) {
   if (props.disabled) return
   const { valueKey } = props
-  const item = props.options[index]
+  const item = filterOptions.value[index]
   emit('update:modelValue', item[valueKey] !== '' && item[valueKey] !== undefined ? item[valueKey] : item)
   emit('change', {
     value: item[valueKey] !== '' && item[valueKey] !== undefined ? item[valueKey] : item,
     selectedItem: item
   })
   close()
+  
+  //关闭清空搜索 避免清空画面闪过
+  if(filterVal.value !== '') {
+    setTimeout(() => {
+      handleFilterChange({ value: ''})
+    }, 300);
+  }
 }
 // 外部关闭弹出框
 function close() {

From 740d7d720571fbb19517082df2fcd51a3c729ee4 Mon Sep 17 00:00:00 2001
From: HiNaruta <mydontspeak@foxmail.com>
Date: Fri, 23 Aug 2024 16:33:17 +0800
Subject: [PATCH 2/5] =?UTF-8?q?feat:=20=E2=9C=A8=20drop-menu=20=E6=96=B0?=
 =?UTF-8?q?=E5=A2=9E=20filterable=20=E6=9C=AC=E5=9C=B0=E6=90=9C=E7=B4=A2?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

feat: ✨ drop-menu 支持 filterable 本地搜索 新增的配置参数
---
 .../wot-design-uni/components/wd-drop-menu-item/types.ts      | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/uni_modules/wot-design-uni/components/wd-drop-menu-item/types.ts b/src/uni_modules/wot-design-uni/components/wd-drop-menu-item/types.ts
index 43f6b01fc..a29f87c77 100644
--- a/src/uni_modules/wot-design-uni/components/wd-drop-menu-item/types.ts
+++ b/src/uni_modules/wot-design-uni/components/wd-drop-menu-item/types.ts
@@ -27,6 +27,10 @@ export const dorpMenuItemProps = {
   /**
    * 列表数据，对应数据结构 [{text: '标题', value: '0', tip: '提示文字'}]
    */
+  /** 可搜索（目前只支持本地搜索） */
+  filterable: makeBooleanProp(false),
+  /** 搜索框占位符 */
+  filterPlaceholder: String,
   options: makeArrayProp<Record<string, any>>(),
   /**
    * 禁用菜单

From 440503da87898e1d33a38bcc8a8fe033e7fa3f3e Mon Sep 17 00:00:00 2001
From: MOYAN <moyan>
Date: Sat, 14 Sep 2024 09:31:09 +0800
Subject: [PATCH 3/5] =?UTF-8?q?=E6=BC=94=E7=A4=BA=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E8=A1=A5=E5=85=85=E7=9B=B8=E5=BA=94=E7=9A=84=E4=BB=A3=E7=A0=81?=
 =?UTF-8?q?=EF=BC=8C=E5=9C=A8docs=E4=B8=AD=E8=A1=A5=E5=85=85=E7=9B=B8?=
 =?UTF-8?q?=E5=BA=94=E7=9A=84=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/component/drop-menu.md  | 22 ++++++++++++++++++++++
 src/pages/dropMenu/Index.vue | 17 +++++++++++++++++
 2 files changed, 39 insertions(+)

diff --git a/docs/component/drop-menu.md b/docs/component/drop-menu.md
index 3841171aa..0d583bb5e 100644
--- a/docs/component/drop-menu.md
+++ b/docs/component/drop-menu.md
@@ -186,6 +186,28 @@ const handleBeforeToggle: DropMenuItemBeforeToggle = ({ status, resolve }) => {
 </wd-drop-menu>
 ```
 
+
+## 可搜索
+
+设置 `filterable` 属性支持本地搜索，设置 `filter-placeholder` 属性设置搜索框的占位符。
+
+```html
+<wd-drop-menu>
+  <wd-drop-menu-item
+    v-model="value1"
+    :options="option1"
+    @change="handleChange1"
+  />
+  <wd-drop-menu-item
+    v-model="value2"
+    :options="option2"
+    @change="handleChange2"
+    filterable
+  />
+</wd-drop-menu>
+```
+
+
 ## DropMenu Attributes
 
 | 参数                 | 说明                                 | 类型    | 可选值    | 默认值 | 最低版本 |
diff --git a/src/pages/dropMenu/Index.vue b/src/pages/dropMenu/Index.vue
index bc7e987f9..23e84b1ff 100644
--- a/src/pages/dropMenu/Index.vue
+++ b/src/pages/dropMenu/Index.vue
@@ -55,6 +55,21 @@
           <wd-drop-menu-item v-model="value9" :options="option2" @change="handleChange9" />
         </wd-drop-menu>
       </demo-block>
+      <demo-block title="可搜索" transparent>
+        <wd-drop-menu>
+          <wd-drop-menu-item
+            v-model="value11"
+            :options="option1"
+            @change="handleChange1"
+          />
+          <wd-drop-menu-item
+            v-model="value12"
+            :options="option2"
+            @change="handleChange2"
+            filterable
+          />
+        </wd-drop-menu>
+      </demo-block>
     </view>
   </page-wraper>
 </template>
@@ -83,6 +98,8 @@ const value7 = ref<number>(0)
 const value8 = ref<number>(0)
 const value9 = ref<number>(0)
 const value10 = ref<number>(0)
+const value11 = ref<number>(0)
+const value12 = ref<number>(0)
 
 const option1 = ref<Record<string, any>[]>([
   { label: '全部商品', value: 0 },

From 0b2bade57ea6c7586ac41ffafc1f51ebd0b8b350 Mon Sep 17 00:00:00 2001
From: HiNaruta <mydontspeak@foxmail.com>
Date: Sat, 14 Sep 2024 11:32:57 +0800
Subject: [PATCH 4/5] =?UTF-8?q?feat-=E2=9C=A8-drop-menu-=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?-filterable-=E6=9C=AC=E5=9C=B0=E6=90=9C=E7=B4=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

晚上doc文档
---
 docs/component/drop-menu.md | 17 +++++------------
 1 file changed, 5 insertions(+), 12 deletions(-)

diff --git a/docs/component/drop-menu.md b/docs/component/drop-menu.md
index 0d583bb5e..a0067013c 100644
--- a/docs/component/drop-menu.md
+++ b/docs/component/drop-menu.md
@@ -189,22 +189,15 @@ const handleBeforeToggle: DropMenuItemBeforeToggle = ({ status, resolve }) => {
 
 ## 可搜索
 
-设置 `filterable` 属性支持本地搜索，设置 `filter-placeholder` 属性设置搜索框的占位符。
+设置 `filterable` 属性支持本地搜索，设置 `filter-placeholder` 属性设置搜索框的提示占位文本。
 
 ```html
 <wd-drop-menu>
-  <wd-drop-menu-item
-    v-model="value1"
-    :options="option1"
-    @change="handleChange1"
-  />
-  <wd-drop-menu-item
-    v-model="value2"
-    :options="option2"
-    @change="handleChange2"
-    filterable
-  />
+  <wd-drop-menu-item v-model="value1" :options="option1" @change="handleChange1" />
+  <wd-drop-menu-item v-model="value2" :options="option2" @change="handleChange2" filterable />
+  <wd-drop-menu-item v-model="value2" :options="option2" @change="handleChange2" filterable filter-placeholder="检索"/>
 </wd-drop-menu>
+
 ```
 
 

From d2ff67acaf52aa2cde696b45d5813a5f967be034 Mon Sep 17 00:00:00 2001
From: HiNaruta <mydontspeak@foxmail.com>
Date: Sat, 14 Sep 2024 11:39:43 +0800
Subject: [PATCH 5/5] =?UTF-8?q?=E5=AE=8C=E5=96=84=E6=96=87=E6=A1=A3?=
 =?UTF-8?q?=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/dropMenu/Index.vue | 26 +++++++++++++++-----------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/pages/dropMenu/Index.vue b/src/pages/dropMenu/Index.vue
index 23e84b1ff..5b370961c 100644
--- a/src/pages/dropMenu/Index.vue
+++ b/src/pages/dropMenu/Index.vue
@@ -57,17 +57,9 @@
       </demo-block>
       <demo-block title="可搜索" transparent>
         <wd-drop-menu>
-          <wd-drop-menu-item
-            v-model="value11"
-            :options="option1"
-            @change="handleChange1"
-          />
-          <wd-drop-menu-item
-            v-model="value12"
-            :options="option2"
-            @change="handleChange2"
-            filterable
-          />
+          <wd-drop-menu-item v-model="value11" :options="option1" @change="handleChange11" />
+          <wd-drop-menu-item v-model="value12" :options="option2" @change="handleChange12" filterable />
+          <wd-drop-menu-item v-model="value13" :options="option2" @change="handleChange13" filterable filter-placeholder=“检索” />
         </wd-drop-menu>
       </demo-block>
     </view>
@@ -98,8 +90,10 @@ const value7 = ref<number>(0)
 const value8 = ref<number>(0)
 const value9 = ref<number>(0)
 const value10 = ref<number>(0)
+  
 const value11 = ref<number>(0)
 const value12 = ref<number>(0)
+const value13 = ref<number>(0)
 
 const option1 = ref<Record<string, any>[]>([
   { label: '全部商品', value: 0 },
@@ -144,6 +138,16 @@ function handleChange9({ value }: any) {
   console.log(value)
 }
 
+function handleChange11({ value }: any) {
+  console.log(value)
+}
+function handleChange12({ value }: any) {
+  console.log(value)
+}
+function handleChange13({ value }: any) {
+  console.log(value)
+}
+
 function confirm() {
   dropMenu.value.close()
 }