feat(select): support filterable (#1945)

* feat(select): support filterable

* refactor: update

Author: rzzf

packages/varlet-ui/src/form/__tests__/__snapshots__/index.spec.js.snap

@@ -248,17 +248,20 @@ exports[`form with select 1`] = `
 "<form class="var-form">
   <div class="var-select">
     <div class="var-menu var--box var-select__menu" var-select-cover="">
-      <div class="var-field-decorator var--box var-field-decorator--standard">
+      <div class="var-field-decorator var--box var-field-decorator--standard var-field-decorator--disabled">
         <div class="var-field-decorator__controller var-field-decorator--disabled" style="cursor: pointer; overflow: visible; --field-decorator-middle-offset-left: 0px; --field-decorator-middle-offset-width: 0px; --field-decorator-middle-offset-height: 0px;">
           <div class="var-field-decorator__icon"></div>
           <div class="var-field-decorator__middle">
             <div class="var-select__select var-select--disabled" style="text-align: left;">
               <div class="var-select__label">
                 <div class="var-select__chips">
                   <transition-stub name="var-fade" appear="false" persisted="false" css="true"><span class="var-chip var--box var-chip--small var--inline-flex var-chip--default var-chip--round var-select__chip" var-select-cover=""><span class="var-chip__text-small"><span>option1</span></span><span class="var-chip--close"><i class="var-icon var-icon--set var-icon-close-circle" style="transition-duration: 0ms;"></i></span></span></transition-stub>
+                  <!--v-if-->
                 </div>
               </div>
               <!--v-if-->
+              <!--v-if-->
+              <!--v-if-->
             </div>
           </div>
           <!--v-if-->
@@ -290,9 +293,12 @@ exports[`form with select 2`] = `
               <div class="var-select__label">
                 <div class="var-select__chips">
                   <transition-stub name="var-fade" appear="false" persisted="false" css="true"><span class="var-chip var--box var-chip--small var--inline-flex var-chip--default var-chip--round var-select__chip" var-select-cover=""><span class="var-chip__text-small"><span>option1</span></span><span class="var-chip--close"><i class="var-icon var-icon--set var-icon-close-circle" style="transition-duration: 0ms;"></i></span></span></transition-stub>
+                  <!--v-if-->
                 </div>
               </div>
               <!--v-if-->
+              <!--v-if-->
+              <!--v-if-->
             </div>
           </div>
           <!--v-if-->

packages/varlet-ui/src/option/Option.vue

@@ -1,5 +1,6 @@
 <template>
   <div
+    v-show="visible"
     ref="root"
     v-ripple="{ disabled: disabled || !ripple }"
     v-hover:desktop="handleHovering"
@@ -47,6 +48,7 @@ import VarCheckbox from '../checkbox'
 import Hover from '../hover'
 import VarHoverOverlay, { useHoverOverlay } from '../hover-overlay'
 import Ripple from '../ripple'
+import { SelectOption } from '../select/props'
 import { createNamespace, MaybeVNode } from '../utils/components'
 import { props } from './props'
 import { OptionProvider, useSelect } from './provide'
@@ -66,26 +68,25 @@ export default defineComponent({
     const root = ref<HTMLElement>()
     const isFocusing = ref(false)
     const optionSelected = ref(false)
+    const option = computed(
+      () =>
+        props.option ??
+        ({
+          label: props.label,
+          value: props.value,
+          disabled: props.disabled,
+        } as SelectOption),
+    )
     const selected = computed(() => optionSelected.value)
     const value = computed<any>(() => props.value)
     const disabled = computed(() => props.disabled)
     const ripple = computed(() => props.ripple)
     const { select, bindSelect } = useSelect()
-    const { multiple, focusColor, onSelect, computeLabel } = select
+    const { query, filter, filterable, multiple, focusColor, onSelect, computeLabel } = select
     const { hovering, handleHovering } = useHoverOverlay()
 
-    const labelVNode = computed(() =>
-      isFunction(props.label)
-        ? props.label(
-            props.option ?? {
-              label: props.label,
-              value: props.value,
-              disabled: props.disabled,
-            },
-            optionSelected.value,
-          )
-        : props.label,
-    )
+    const labelVNode = computed<any>(() => (isFunction(props.label) ? option.value : props.label))
+    const visible = computed(() => !filterable.value || !query.value || filter.value(query.value, option.value))
 
     const optionProvider: OptionProvider = {
       label: labelVNode,
@@ -151,6 +152,7 @@ export default defineComponent({
     return {
       root,
       optionSelected,
+      visible,
       multiple,
       focusColor,
       hovering,