@varlet/ui 3.13.1 → 3.14.0

package/es/select/Select.mjs

@@ -1,3 +1,42 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
 import { computed, defineComponent, nextTick, ref, watch } from "vue";
 import { assert, call, doubleRaf, isArray, isEmpty, isFunction, preventDefault } from "@varlet/shared";
 import { useEventListener } from "@varlet/use";
@@ -6,19 +45,25 @@ import VarFieldDecorator from "../field-decorator/index.mjs";
 import VarFormDetails from "../form-details/index.mjs";
 import { useForm } from "../form/provide.mjs";
 import VarIcon from "../icon/index.mjs";
+import { t } from "../locale/index.mjs";
+import { injectLocaleProvider } from "../locale-provider/provide.mjs";
 import VarMenu from "../menu/index.mjs";
 import VarOption from "../option/index.mjs";
 import { createNamespace, MaybeVNode, useValidation } from "../utils/components.mjs";
 import { focusChildElementByKey, toPxNum } from "../utils/elements.mjs";
 import { props } from "./props.mjs";
 import { useOptions } from "./provide.mjs";
+import VarSelectFilter from "./SelectFilter.mjs";
+import { useOptionsMutationObserver } from "./useOptionsMutationObserver.mjs";
 import { useSelectController } from "./useSelectController.mjs";
+import { useSelectFilterSize } from "./useSelectFilterSize.mjs";
 const { name, n, classes } = createNamespace("select");
-import { renderSlot as _renderSlot, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, resolveComponent as _resolveComponent, createVNode as _createVNode, withModifiers as _withModifiers, normalizeClass as _normalizeClass, withCtx as _withCtx, createBlock as _createBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, createElementVNode as _createElementVNode, normalizeStyle as _normalizeStyle, normalizeProps as _normalizeProps, guardReactiveProps as _guardReactiveProps, createSlots as _createSlots } from "vue";
+import { renderSlot as _renderSlot, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, resolveComponent as _resolveComponent, createVNode as _createVNode, withModifiers as _withModifiers, normalizeClass as _normalizeClass, withCtx as _withCtx, createBlock as _createBlock, normalizeStyle as _normalizeStyle, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, createElementVNode as _createElementVNode, normalizeProps as _normalizeProps, guardReactiveProps as _guardReactiveProps, createSlots as _createSlots } from "vue";
 const _hoisted_1 = ["tabindex"];
 function __render__(_ctx, _cache) {
   const _component_maybe_v_node = _resolveComponent("maybe-v-node");
   const _component_var_chip = _resolveComponent("var-chip");
+  const _component_var_select_filter = _resolveComponent("var-select-filter");
   const _component_var_icon = _resolveComponent("var-icon");
   const _component_var_field_decorator = _resolveComponent("var-field-decorator");
   const _component_var_option = _resolveComponent("var-option");
@@ -27,19 +72,20 @@ function __render__(_ctx, _cache) {
   return _openBlock(), _createElementBlock("div", {
     ref: "root",
     class: _normalizeClass(_ctx.n()),
-    tabindex: _ctx.tabindex == null ? _ctx.disabled || _ctx.formDisabled ? void 0 : "0" : _ctx.tabindex,
-    onFocus: _cache[3] || (_cache[3] = (...args) => _ctx.handleFocus && _ctx.handleFocus(...args)),
-    onBlur: _cache[4] || (_cache[4] = (...args) => _ctx.handleRootBlur && _ctx.handleRootBlur(...args))
+    tabindex: _ctx.tabindex,
+    onFocus: _cache[6] || (_cache[6] = (...args) => _ctx.handleFocus && _ctx.handleFocus(...args)),
+    onBlur: _cache[7] || (_cache[7] = (...args) => _ctx.handleRootBlur && _ctx.handleRootBlur(...args))
   }, [
     _createVNode(_component_var_menu, {
+      ref: "menuRef",
       show: _ctx.showMenu,
-      "onUpdate:show": _cache[1] || (_cache[1] = ($event) => _ctx.showMenu = $event),
+      "onUpdate:show": _cache[4] || (_cache[4] = ($event) => _ctx.showMenu = $event),
       "var-select-cover": "",
       "same-width": "",
       "close-on-click-reference": "",
       "close-on-key-escape": false,
       class: _normalizeClass(_ctx.n("menu")),
-      "popover-class": _ctx.variant === "standard" && _ctx.hint ? _ctx.n("--standard-menu-margin") : void 0,
+      "popover-class": _ctx.variant === "standard" && _ctx.hint && !_ctx.filterable ? _ctx.n("--standard-menu-margin") : void 0,
       "offset-y": _ctx.offsetY,
       disabled: _ctx.formReadonly || _ctx.readonly || _ctx.formDisabled || _ctx.disabled,
       placement: _ctx.placement,
@@ -54,9 +100,20 @@ function __render__(_ctx, _cache) {
             class: _normalizeClass(_ctx.classes(_ctx.n("scroller"), _ctx.n("$-elevation--3")))
           },
           [
+            _ctx.showEmpty ? _renderSlot(_ctx.$slots, "empty", { key: 0 }, () => [
+              _createElementVNode(
+                "div",
+                {
+                  class: _normalizeClass(_ctx.n("empty"))
+                },
+                _toDisplayString((_ctx.pt ? _ctx.pt : _ctx.t)("selectEmptyText")),
+                3
+                /* TEXT, CLASS */
+              )
+            ]) : _createCommentVNode("v-if", true),
             _ctx.options.length ? (_openBlock(true), _createElementBlock(
               _Fragment,
-              { key: 0 },
+              { key: 1 },
               _renderList(_ctx.options, (option) => {
                 return _openBlock(), _createBlock(_component_var_option, {
                   key: option[_ctx.valueKey],
@@ -80,7 +137,7 @@ function __render__(_ctx, _cache) {
         _createVNode(
           _component_var_field_decorator,
           _normalizeProps(_guardReactiveProps({
-            value: _ctx.modelValue,
+            value: _ctx.pattern || _ctx.modelValue,
             size: _ctx.size,
             variant: _ctx.variant,
             placeholder: _ctx.placeholder,
@@ -92,16 +149,14 @@ function __render__(_ctx, _cache) {
             isFocusing: _ctx.isFocusing,
             isError: !!_ctx.errorMessage,
             formDisabled: _ctx.formDisabled,
+            composing: _ctx.isComposing,
             disabled: _ctx.disabled,
-            clearable: _ctx.clearable,
+            clearable: _ctx.clearable ? !_ctx.filterable || !_ctx.pattern : false,
             cursor: _ctx.cursor,
             onClick: _ctx.handleClick,
             onClear: _ctx.handleClear
           })),
           _createSlots({
-            "clear-icon": _withCtx(({ clear }) => [
-              _renderSlot(_ctx.$slots, "clear-icon", { clear })
-            ]),
             "append-icon": _withCtx(() => [
               _renderSlot(_ctx.$slots, "arrow-icon", {
                 focus: _ctx.isFocusing,
@@ -130,10 +185,10 @@ function __render__(_ctx, _cache) {
                   _createElementVNode(
                     "div",
                     {
-                      class: _normalizeClass(_ctx.n("label"))
+                      class: _normalizeClass(_ctx.classes(_ctx.n("label"), [_ctx.filterable && _ctx.showMenu, _ctx.n("--label-focusing")]))
                     },
                     [
-                      !_ctx.isEmptyModelValue ? _renderSlot(_ctx.$slots, "selected", { key: 0 }, () => [
+                      _ctx.isShowSelected() ? _renderSlot(_ctx.$slots, "selected", { key: 0 }, () => [
                         _ctx.multiple ? (_openBlock(), _createElementBlock(
                           _Fragment,
                           { key: 0 },
@@ -169,7 +224,20 @@ function __render__(_ctx, _cache) {
                                   }),
                                   128
                                   /* KEYED_FRAGMENT */
-                                ))
+                                )),
+                                _ctx.isShowMultipleFilter() ? (_openBlock(), _createBlock(_component_var_select_filter, {
+                                  key: 0,
+                                  ref: "filterRef",
+                                  modelValue: _ctx.pattern,
+                                  "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => _ctx.pattern = $event),
+                                  style: _normalizeStyle(_ctx.filterStyle),
+                                  multiple: _ctx.multiple,
+                                  onFocus: _ctx.handleFocus,
+                                  onBlur: _ctx.handleRootBlur,
+                                  onInput: _ctx.handleInput,
+                                  onCompositionstart: _ctx.handleCompositionStart,
+                                  onCompositionend: _ctx.handleCompositionEnd
+                                }, null, 8, ["modelValue", "style", "multiple", "onFocus", "onBlur", "onInput", "onCompositionstart", "onCompositionend"])) : _createCommentVNode("v-if", true)
                               ],
                               2
                               /* CLASS */
@@ -201,7 +269,20 @@ function __render__(_ctx, _cache) {
                                   }),
                                   128
                                   /* KEYED_FRAGMENT */
-                                ))
+                                )),
+                                _ctx.isShowMultipleFilter() ? (_openBlock(), _createBlock(_component_var_select_filter, {
+                                  key: 0,
+                                  ref: "filterRef",
+                                  modelValue: _ctx.pattern,
+                                  "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => _ctx.pattern = $event),
+                                  style: _normalizeStyle(__spreadProps(__spreadValues({}, _ctx.filterStyle), { paddingLeft: _ctx.labels.length ? "4px" : 0 })),
+                                  multiple: _ctx.multiple,
+                                  onFocus: _ctx.handleFocus,
+                                  onBlur: _ctx.handleRootBlur,
+                                  onInput: _ctx.handleInput,
+                                  onCompositionstart: _ctx.handleCompositionStart,
+                                  onCompositionend: _ctx.handleCompositionEnd
+                                }, null, 8, ["modelValue", "style", "multiple", "onFocus", "onBlur", "onInput", "onCompositionstart", "onCompositionend"])) : _createCommentVNode("v-if", true)
                               ],
                               2
                               /* CLASS */
@@ -218,18 +299,39 @@ function __render__(_ctx, _cache) {
                     2
                     /* CLASS */
                   ),
-                  _ctx.enableCustomPlaceholder ? (_openBlock(), _createElementBlock(
+                  _ctx.enableCustomPlaceholder && !_ctx.pattern ? (_openBlock(), _createElementBlock(
                     "span",
                     {
                       key: 0,
                       class: _normalizeClass(_ctx.classes(_ctx.n("placeholder"), _ctx.n("$--ellipsis"))),
-                      style: _normalizeStyle({
-                        color: _ctx.placeholderColor
-                      })
+                      style: _normalizeStyle({ color: _ctx.placeholderColor })
                     },
                     _toDisplayString(_ctx.placeholder),
                     7
                     /* TEXT, CLASS, STYLE */
+                  )) : _createCommentVNode("v-if", true),
+                  _ctx.isShowSingleFilter() ? (_openBlock(), _createBlock(_component_var_select_filter, {
+                    key: 1,
+                    ref: "filterRef",
+                    modelValue: _ctx.pattern,
+                    "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => _ctx.pattern = $event),
+                    style: _normalizeStyle(_ctx.filterStyle),
+                    onFocus: _ctx.handleFocus,
+                    onBlur: _ctx.handleRootBlur,
+                    onInput: _ctx.handleInput,
+                    onCompositionstart: _ctx.handleCompositionStart,
+                    onCompositionend: _ctx.handleCompositionEnd
+                  }, null, 8, ["modelValue", "style", "onFocus", "onBlur", "onInput", "onCompositionstart", "onCompositionend"])) : _createCommentVNode("v-if", true),
+                  _ctx.filterable ? (_openBlock(), _createElementBlock(
+                    "span",
+                    {
+                      key: 2,
+                      ref: "calculatorRef",
+                      class: _normalizeClass(_ctx.n("filter-calculator"))
+                    },
+                    _toDisplayString(_ctx.pattern),
+                    3
+                    /* TEXT, CLASS */
                   )) : _createCommentVNode("v-if", true)
                 ],
                 6
@@ -245,6 +347,13 @@ function __render__(_ctx, _cache) {
                 _renderSlot(_ctx.$slots, "prepend-icon")
               ]),
               key: "0"
+            } : void 0,
+            !_ctx.pattern ? {
+              name: "clear-icon",
+              fn: _withCtx(({ clear }) => [
+                _renderSlot(_ctx.$slots, "clear-icon", { clear })
+              ]),
+              key: "1"
             } : void 0
           ]),
           1040
@@ -256,7 +365,7 @@ function __render__(_ctx, _cache) {
     }, 8, ["show", "class", "popover-class", "offset-y", "disabled", "placement", "onClickOutside"]),
     _createVNode(_component_var_form_details, {
       "error-message": _ctx.errorMessage,
-      onClick: _cache[2] || (_cache[2] = _withModifiers(() => {
+      onClick: _cache[5] || (_cache[5] = _withModifiers(() => {
       }, ["stop"]))
     }, null, 8, ["error-message"])
   ], 42, _hoisted_1);
@@ -270,18 +379,23 @@ const __sfc__ = defineComponent({
     VarOption,
     VarFieldDecorator,
     VarFormDetails,
+    VarSelectFilter,
     MaybeVNode
   },
   props,
   setup(props2) {
+    var _a;
     const isFocusing = ref(false);
     const showMenu = ref(false);
     const root = ref(null);
+    const filterRef = ref(null);
+    const pattern = ref("");
+    const isComposing = ref(false);
+    const filterable = computed(() => props2.filterable);
     const multiple = computed(() => props2.multiple);
     const focusColor = computed(() => props2.focusColor);
     const isEmptyModelValue = computed(() => isEmpty(props2.modelValue));
     const cursor = computed(() => props2.disabled || props2.readonly ? "" : "pointer");
-    const offsetY = ref(0);
     const { bindForm, form } = useForm();
     const { length, options, bindOptions } = useOptions();
     const { label, labels, computeLabel, getSelectedValue } = useSelectController({
@@ -297,8 +411,21 @@ const __sfc__ = defineComponent({
       // expose
       resetValidation
     } = useValidation();
+    const readonly = computed(() => (form == null ? void 0 : form.readonly.value) || props2.readonly);
+    const disabled = computed(() => (form == null ? void 0 : form.disabled.value) || props2.disabled);
     const menuEl = ref(null);
-    const placement = computed(() => props2.variant === "outlined" ? "bottom" : "cover-top");
+    const menuRef = ref(null);
+    const placement = computed(() => props2.variant === "standard" && !props2.filterable ? "cover-top" : "bottom");
+    const { t: pt } = injectLocaleProvider();
+    const _offsetY = ref(0);
+    const offsetY = computed({
+      get() {
+        return _offsetY.value + (placement.value === "bottom" ? 2 : 0);
+      },
+      set(v2) {
+        _offsetY.value = v2;
+      }
+    });
     const placeholderColor = computed(() => {
       const { hint, blurColor, focusColor: focusColor2 } = props2;
       if (hint) {
@@ -313,8 +440,23 @@ const __sfc__ = defineComponent({
       return blurColor || "var(--field-decorator-placeholder-color, var(--field-decorator-blur-color))";
     });
     const enableCustomPlaceholder = computed(() => !props2.hint && isEmpty(props2.modelValue));
+    const tabindex = computed(() => {
+      var _a2;
+      if (disabled.value) {
+        return void 0;
+      }
+      if (filterable.value && isFocusing.value) {
+        return "-1";
+      }
+      return (_a2 = props2.tabindex) != null ? _a2 : "0";
+    });
+    const { calculatorRef, filterStyle } = useSelectFilterSize(pattern);
     const selectProvider = {
+      pattern: computed(() => pattern.value),
+      showMenu: computed(() => showMenu.value),
       multiple,
+      filterable,
+      filter: (_a = props2.filter) != null ? _a : (pattern2, option) => String(option[props2.labelKey]).toLocaleLowerCase().includes(pattern2.toLocaleLowerCase()),
       focusColor,
       computeLabel,
       onSelect,
@@ -322,6 +464,13 @@ const __sfc__ = defineComponent({
       validate,
       resetValidation
     };
+    const { showEmpty } = useOptionsMutationObserver(menuEl, showMenu, {
+      onAfterUpdate: () => {
+        var _a2;
+        return (_a2 = menuRef.value) == null ? void 0 : _a2.resize();
+      }
+    });
+    let focusTransferToFilter = false;
     watch(
       () => props2.multiple,
       () => {
@@ -336,9 +485,24 @@ const __sfc__ = defineComponent({
     useEventListener(() => window, "keydown", handleKeydown);
     useEventListener(() => window, "keyup", handleKeyup);
     call(bindForm, selectProvider);
+    function isShowSingleFilter() {
+      return filterable.value && !readonly.value && !disabled.value && !multiple.value;
+    }
+    function isShowMultipleFilter() {
+      return filterable.value && !readonly.value && !disabled.value && multiple.value;
+    }
+    function isShowSelected() {
+      if (isEmptyModelValue.value && !multiple.value) {
+        return false;
+      }
+      if (!multiple.value && (pattern.value || isComposing.value)) {
+        return false;
+      }
+      return true;
+    }
     function handleKeydown(event) {
-      const { disabled, readonly } = props2;
-      if ((form == null ? void 0 : form.disabled.value) || (form == null ? void 0 : form.readonly.value) || disabled || readonly || !isFocusing.value) {
+      var _a2;
+      if (disabled.value || readonly.value || !isFocusing.value) {
         return;
       }
       const { key } = event;
@@ -361,6 +525,7 @@ const __sfc__ = defineComponent({
       if (key === "Enter" && !showMenu.value) {
         preventDefault(event);
         showMenu.value = true;
+        (_a2 = filterRef.value) == null ? void 0 : _a2.focus();
         return;
       }
       if ((key === "ArrowDown" || key === "ArrowUp") && showMenu.value) {
@@ -369,8 +534,7 @@ const __sfc__ = defineComponent({
       }
     }
     function handleKeyup(event) {
-      const { disabled, readonly } = props2;
-      if ((form == null ? void 0 : form.disabled.value) || (form == null ? void 0 : form.readonly.value) || disabled || readonly || showMenu.value || !isFocusing.value) {
+      if (disabled.value || readonly.value || showMenu.value || !isFocusing.value) {
         return;
       }
       const { key } = event;
@@ -386,29 +550,46 @@ const __sfc__ = defineComponent({
       });
     }
     function handleFocus() {
-      const { disabled, readonly, onFocus } = props2;
-      if ((form == null ? void 0 : form.disabled.value) || (form == null ? void 0 : form.readonly.value) || disabled || readonly) {
+      var _a2;
+      const { disabled: disabled2, readonly: readonly2, onFocus } = props2;
+      if ((form == null ? void 0 : form.disabled.value) || (form == null ? void 0 : form.readonly.value) || disabled2 || readonly2) {
+        return;
+      }
+      if (focusTransferToFilter) {
+        focusTransferToFilter = false;
         return;
       }
       offsetY.value = toPxNum(props2.offsetY);
       focus();
+      if (isShowMultipleFilter() || isShowSingleFilter()) {
+        focusTransferToFilter = true;
+        (_a2 = filterRef.value) == null ? void 0 : _a2.focus();
+      }
       call(onFocus);
       validateWithTrigger("onFocus");
     }
     function handleBlur() {
-      const { disabled, readonly, onBlur } = props2;
-      if ((form == null ? void 0 : form.disabled.value) || (form == null ? void 0 : form.readonly.value) || disabled || readonly) {
+      const { disabled: disabled2, readonly: readonly2, onBlur } = props2;
+      if ((form == null ? void 0 : form.disabled.value) || (form == null ? void 0 : form.readonly.value) || disabled2 || readonly2) {
         return;
       }
       blur();
       call(onBlur);
       validateWithTrigger("onBlur");
+      pattern.value = "";
     }
     function handleRootBlur() {
-      if (showMenu.value) {
-        return;
-      }
-      handleBlur();
+      return __async(this, null, function* () {
+        if (focusTransferToFilter) {
+          yield nextTick();
+          focusTransferToFilter = false;
+          return;
+        }
+        if (showMenu.value) {
+          return;
+        }
+        handleBlur();
+      });
     }
     function handleClickOutside() {
       if (!isFocusing.value) {
@@ -417,24 +598,29 @@ const __sfc__ = defineComponent({
       handleBlur();
     }
     function onSelect(option) {
-      const { disabled, readonly, multiple: multiple2, onChange } = props2;
-      if ((form == null ? void 0 : form.disabled.value) || (form == null ? void 0 : form.readonly.value) || disabled || readonly) {
+      const { disabled: disabled2, readonly: readonly2, multiple: multiple2, onChange } = props2;
+      if ((form == null ? void 0 : form.disabled.value) || (form == null ? void 0 : form.readonly.value) || disabled2 || readonly2) {
         return;
       }
       const selectedValue = getSelectedValue(option);
       call(props2["onUpdate:modelValue"], selectedValue);
       call(onChange, selectedValue);
       validateWithTrigger("onChange");
+      nextTick(() => {
+        var _a2;
+        return (_a2 = filterRef.value) == null ? void 0 : _a2.focus();
+      });
       if (!multiple2) {
         root.value.focus();
         doubleRaf().then(() => {
           showMenu.value = false;
+          pattern.value = "";
         });
       }
     }
     function handleClear() {
-      const { disabled, readonly, multiple: multiple2, clearable, onClear, onChange } = props2;
-      if ((form == null ? void 0 : form.disabled.value) || (form == null ? void 0 : form.readonly.value) || disabled || readonly || !clearable) {
+      const { disabled: disabled2, readonly: readonly2, multiple: multiple2, clearable, onClear, onChange } = props2;
+      if ((form == null ? void 0 : form.disabled.value) || (form == null ? void 0 : form.readonly.value) || disabled2 || readonly2 || !clearable) {
         return;
       }
       const changedModelValue = multiple2 ? [] : void 0;
@@ -445,23 +631,23 @@ const __sfc__ = defineComponent({
       validateWithTrigger("onChange");
     }
     function handleClick(e) {
-      const { disabled, onClick } = props2;
-      if ((form == null ? void 0 : form.disabled.value) || disabled) {
+      const { disabled: disabled2, onClick } = props2;
+      if ((form == null ? void 0 : form.disabled.value) || disabled2) {
         return;
       }
       call(onClick, e);
       validateWithTrigger("onClick");
     }
     function handleClose(text) {
-      const { disabled, readonly, modelValue, onClose, onChange } = props2;
-      if ((form == null ? void 0 : form.disabled.value) || (form == null ? void 0 : form.readonly.value) || disabled || readonly) {
+      const { disabled: disabled2, readonly: readonly2, modelValue, onClose, onChange } = props2;
+      if ((form == null ? void 0 : form.disabled.value) || (form == null ? void 0 : form.readonly.value) || disabled2 || readonly2) {
         return;
       }
       const option = options.find(({ label: label2 }) => label2.value === text);
       const changedModelValue = modelValue.filter(
         (value) => {
-          var _a;
-          return value !== ((_a = option.value.value) != null ? _a : option.label.value);
+          var _a2;
+          return value !== ((_a2 = option.value.value) != null ? _a2 : option.label.value);
         }
       );
       call(props2["onUpdate:modelValue"], changedModelValue);
@@ -470,6 +656,15 @@ const __sfc__ = defineComponent({
       call(onChange, changedModelValue);
       validateWithTrigger("onChange");
     }
+    function handleInput() {
+      showMenu.value = true;
+    }
+    function handleCompositionStart() {
+      isComposing.value = true;
+    }
+    function handleCompositionEnd() {
+      isComposing.value = false;
+    }
     function focus() {
       offsetY.value = toPxNum(props2.offsetY);
       isFocusing.value = true;
@@ -487,6 +682,14 @@ const __sfc__ = defineComponent({
     }
     return {
       root,
+      filterRef,
+      calculatorRef,
+      isComposing,
+      filterStyle,
+      pattern,
+      tabindex,
+      readonly,
+      disabled,
       offsetY,
       isFocusing,
       showMenu,
@@ -497,13 +700,20 @@ const __sfc__ = defineComponent({
       labels,
       isEmptyModelValue,
       menuEl,
+      menuRef,
       placement,
       cursor,
       placeholderColor,
       enableCustomPlaceholder,
+      showEmpty,
+      t,
+      pt,
       isFunction,
       n,
       classes,
+      isShowSelected,
+      isShowSingleFilter,
+      isShowMultipleFilter,
       handleFocus,
       handleBlur,
       handleClickOutside,
@@ -511,6 +721,9 @@ const __sfc__ = defineComponent({
       handleClick,
       handleClose,
       handleRootBlur,
+      handleInput,
+      handleCompositionStart,
+      handleCompositionEnd,
       reset,
       validate,
       resetValidation,

package/es/select/SelectFilter.mjs

@@ -0,0 +1,61 @@
+import { computed, defineComponent, ref } from "vue";
+import { call } from "@varlet/shared";
+import { createNamespace, defineListenerProp } from "../utils/components.mjs";
+const { n, classes } = createNamespace("select");
+import { vModelText as _vModelText, normalizeClass as _normalizeClass, withDirectives as _withDirectives, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+function __render__(_ctx, _cache) {
+  return _withDirectives((_openBlock(), _createElementBlock(
+    "input",
+    {
+      ref: "filterInputRef",
+      "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.value = $event),
+      type: "text",
+      class: _normalizeClass(_ctx.classes(_ctx.n("filter"), [_ctx.multiple, _ctx.n("filter--multiple")]))
+    },
+    null,
+    2
+    /* CLASS */
+  )), [
+    [_vModelText, _ctx.value]
+  ]);
+}
+const __sfc__ = defineComponent({
+  name: "VarSelectFilter",
+  props: {
+    modelValue: {
+      type: String,
+      default: ""
+    },
+    multiple: Boolean,
+    "onUpdate:modelValue": defineListenerProp()
+  },
+  setup(props) {
+    const filterInputRef = ref();
+    const value = computed({
+      get: () => props.modelValue,
+      set: (val) => call(props["onUpdate:modelValue"], val)
+    });
+    const focus = () => {
+      var _a;
+      (_a = filterInputRef.value) == null ? void 0 : _a.focus();
+    };
+    const blur = () => {
+      var _a;
+      (_a = filterInputRef.value) == null ? void 0 : _a.blur();
+    };
+    return {
+      n,
+      classes,
+      value,
+      filterInputRef,
+      // expose
+      focus,
+      blur
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/select/props.mjs

@@ -54,6 +54,10 @@ const props = __spreadValues({
   },
   rules: [Array, Function, Object],
   tabindex: String,
+  filterable: Boolean,
+  filter: {
+    type: Function
+  },
   onFocus: defineListenerProp(),
   onBlur: defineListenerProp(),
   onClose: defineListenerProp(),

package/es/select/select.css

@@ -1 +1 @@
-:root { --select-scroller-background: var(--color-surface-container-high); --select-scroller-padding: 6px 0; --select-scroller-max-height: 278px; --select-scroller-border-radius: 2px; --select-chips-margin: -5px 0 0 0; --select-chips-padding: 2px 0; --select-chip-margin: 5px 5px 0 0; --select-chip-background-color: #e0e0e0; --select-arrow-size: 20px; --select-standard-menu-margin: calc(var(--field-decorator-placeholder-size) * 0.75 + 12px) 0 0 0; --select-label-font-size: 16px;}.var-select { text-align: left; outline: none;}.var-select__menu[var-select-cover] { width: 100%; background: transparent; display: block;}.var-select__chip[var-select-cover] { margin: var(--select-chip-margin); background-color: var(--select-chip-background-color);}.var-select__chips { padding: var(--select-chips-padding); margin: var(--select-chips-margin);}.var-select__scroller { max-height: var(--select-scroller-max-height); background: var(--select-scroller-background); padding: var(--select-scroller-padding); overflow-y: auto; transition: background-color 0.25s; border-radius: var(--select-scroller-border-radius);}.var-select__wrap { position: relative; display: flex; flex-direction: column; width: 100%;}.var-select__select { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 24px; outline: none; border: none; font-size: inherit; color: var(--field-decorator-text-color); word-break: break-all; overflow: hidden; transition: color 0.25s;}.var-select__label { display: flex; align-items: center; font-size: var(--select-label-font-size);}.var-select__placeholder { max-width: 100%; position: absolute; top: 50%; left: 0; transform: translateY(-50%); font-size: var(--field-decorator-placeholder-size); line-height: 1.5em; color: var(--field-decorator-blur-color); pointer-events: none; cursor: inherit;}.var-select__arrow[var-select-cover] { flex-shrink: 0; font-size: var(--select-arrow-size); margin-left: 6px;}.var-select--standard-menu-margin { margin: var(--select-standard-menu-margin) !important;}.var-select--disabled { color: var(--field-decorator-disabled-color); cursor: not-allowed;}.var-select--error { color: var(--field-decorator-error-color);}.var-select--arrow-rotate { transform: rotate(180deg);}
+:root { --select-scroller-background: var(--color-surface-container-high); --select-scroller-padding: 6px 0; --select-scroller-max-height: 278px; --select-scroller-border-radius: 2px; --select-chips-margin: -5px 0 0 0; --select-chips-padding: 2px 0; --select-chip-margin: 5px 5px 0 0; --select-chip-background-color: #e0e0e0; --select-arrow-size: 20px; --select-standard-menu-margin: calc(var(--field-decorator-placeholder-size) * 0.75 + 12px) 0 0 0; --select-label-font-size: 16px; --select-empty-text-color: rgba(0, 0, 0, 0.6); --select-empty-height: 38px; --select-empty-font-size: 14px;}.var-select { text-align: left; outline: none;}.var-select__menu[var-select-cover] { width: 100%; background: transparent; display: block;}.var-select__chip[var-select-cover] { margin: var(--select-chip-margin); background-color: var(--select-chip-background-color);}.var-select__chips { padding: var(--select-chips-padding); margin: var(--select-chips-margin);}.var-select__scroller { max-height: var(--select-scroller-max-height); background: var(--select-scroller-background); padding: var(--select-scroller-padding); overflow-y: auto; transition: background-color 0.25s; border-radius: var(--select-scroller-border-radius);}.var-select__select { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 24px; outline: none; border: none; font-size: inherit; color: var(--field-decorator-text-color); word-break: break-all; overflow: hidden; transition: color 0.25s;}.var-select__values { display: flex; flex-wrap: wrap; align-items: center;}.var-select__chips { display: flex; flex-wrap: wrap; align-items: center;}.var-select__filter { flex: 1; position: absolute; left: 0; top: 0; height: 100%; border: none; outline: none; padding: 0; background-color: transparent; font-size: var(--field-decorator-placeholder-size); line-height: inherit; color: var(--field-decorator-text-color);}.var-select__filter--multiple { position: unset;}.var-select__chips .var-select__filter { padding-left: 0; margin-top: 4px;}.var-select__filter-calculator { position: absolute; left: 0; top: 0; max-width: 100%; visibility: hidden; white-space: pre; overflow: hidden; pointer-events: none;}.var-select__label { display: flex; align-items: center; font-size: var(--select-label-font-size);}.var-select__placeholder { max-width: 100%; position: absolute; top: 50%; left: 0; transform: translateY(-50%); font-size: var(--field-decorator-placeholder-size); line-height: 1.5em; color: var(--field-decorator-blur-color); pointer-events: none; cursor: inherit;}.var-select__empty { color: var(--select-empty-text-color); text-align: center; height: var(--select-empty-height); font-size: var(--select-empty-font-size); display: flex; align-items: center; justify-content: center;}.var-select__arrow[var-select-cover] { flex-shrink: 0; font-size: var(--select-arrow-size); margin-left: 6px;}.var-select--standard-menu-margin { margin: var(--select-standard-menu-margin) !important;}.var-select--disabled { color: var(--field-decorator-disabled-color); cursor: not-allowed;}.var-select--error { color: var(--field-decorator-error-color);}.var-select--arrow-rotate { transform: rotate(180deg);}.var-select--label-focusing { color: var(--field-decorator-blur-color);}