ele-admin-plus 1.4.0 → 1.4.1

package/lib/ele-basic-select/components/select-view.d.ts

@@ -0,0 +1,160 @@
+import { ElInputInstance } from '../../ele-app/el';
+import { SelectedItem } from '../types';
+
+declare function __VLS_template(): {
+    default?(_: {}): any;
+    select?(_: {
+        visible: boolean;
+        value: import('../types').SelectValue;
+        selectedLabel: string | undefined;
+        selected: SelectedItem[] | undefined;
+        currentTags: SelectedItem[];
+        omittedTags: SelectedItem[];
+        omittedSize: number;
+        openPopper: () => void;
+        closePopper: () => void;
+        removeItem: (item: SelectedItem) => void;
+    }): any;
+    prefix?(_: {}): any;
+    clearIcon?(_: {}): any;
+    suffixIcon?(_: {
+        visible: boolean;
+    }): any;
+    maxTagPlaceholder?(_: {
+        omittedValues: SelectedItem[];
+        omittedSize: number;
+    }): any;
+};
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    value: {
+        type: import('vue').PropType<import('../types').SelectValue>;
+        default: () => null;
+    };
+    multiple: BooleanConstructor;
+    disabled: BooleanConstructor;
+    size: import('vue').PropType<import('../../ele-app/el').ElInputProps["size"]>;
+    clearable: BooleanConstructor;
+    placeholder: StringConstructor;
+    selectedLabel: StringConstructor;
+    selected: import('vue').PropType<SelectedItem[]>;
+    maxTagCount: NumberConstructor;
+    maxTagTextLength: NumberConstructor;
+    tagType: import('vue').PropType<import('../../ele-app/el').ElTagProps["type"]>;
+    automaticDropdown: BooleanConstructor;
+    filterable: BooleanConstructor;
+    visible: BooleanConstructor;
+    selectClass: StringConstructor;
+    selectStyle: import('vue').PropType<import('../../ele-app/types').StyleValue | string>;
+    inputStyle: import('vue').PropType<import('../../ele-app/types').StyleValue>;
+    selectTagsStyle: import('vue').PropType<import('../../ele-app/types').StyleValue>;
+    popperClass: StringConstructor;
+    popperWidth: (StringConstructor | NumberConstructor)[];
+    popperHeight: (StringConstructor | NumberConstructor)[];
+    popperType: {
+        type: import('vue').PropType<import('../types').PopperType>;
+        default: string;
+    };
+    popperProps: import('vue').PropType<import('../types').PopperProps>;
+    popperSlots: ObjectConstructor;
+    popperTitle: StringConstructor;
+    teleported: BooleanConstructor;
+    persistent: BooleanConstructor;
+    placement: import('vue').PropType<import('../../ele-app/plus').EleTooltipProps["placement"]>;
+    transition: {
+        type: StringConstructor;
+        default: string;
+    };
+    popperOptions: import('vue').PropType<import('../../ele-app/plus').EleTooltipProps["popperOptions"]>;
+    responsive: {
+        type: BooleanConstructor;
+        default: null;
+    };
+}>, {
+    inputRef: import('vue').Ref<ElInputInstance, ElInputInstance>;
+    searchRef: import('vue').Ref<ElInputInstance, ElInputInstance>;
+    focusSearchInput: () => void;
+    updateSearchValue: (modelValue: string) => void;
+    updateInputValue: (modelValue: string) => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    clear: () => void;
+    focus: (_e: FocusEvent) => void;
+    blur: (_e: FocusEvent) => void;
+    "update:visible": (_visible: boolean) => void;
+    filterChange: (_value: string) => void;
+    removeTag: (_item: SelectedItem) => void;
+    inputClick: (_e: MouseEvent) => void;
+    wrapClick: (_isCustom?: boolean | undefined) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    value: {
+        type: import('vue').PropType<import('../types').SelectValue>;
+        default: () => null;
+    };
+    multiple: BooleanConstructor;
+    disabled: BooleanConstructor;
+    size: import('vue').PropType<import('../../ele-app/el').ElInputProps["size"]>;
+    clearable: BooleanConstructor;
+    placeholder: StringConstructor;
+    selectedLabel: StringConstructor;
+    selected: import('vue').PropType<SelectedItem[]>;
+    maxTagCount: NumberConstructor;
+    maxTagTextLength: NumberConstructor;
+    tagType: import('vue').PropType<import('../../ele-app/el').ElTagProps["type"]>;
+    automaticDropdown: BooleanConstructor;
+    filterable: BooleanConstructor;
+    visible: BooleanConstructor;
+    selectClass: StringConstructor;
+    selectStyle: import('vue').PropType<import('../../ele-app/types').StyleValue | string>;
+    inputStyle: import('vue').PropType<import('../../ele-app/types').StyleValue>;
+    selectTagsStyle: import('vue').PropType<import('../../ele-app/types').StyleValue>;
+    popperClass: StringConstructor;
+    popperWidth: (StringConstructor | NumberConstructor)[];
+    popperHeight: (StringConstructor | NumberConstructor)[];
+    popperType: {
+        type: import('vue').PropType<import('../types').PopperType>;
+        default: string;
+    };
+    popperProps: import('vue').PropType<import('../types').PopperProps>;
+    popperSlots: ObjectConstructor;
+    popperTitle: StringConstructor;
+    teleported: BooleanConstructor;
+    persistent: BooleanConstructor;
+    placement: import('vue').PropType<import('../../ele-app/plus').EleTooltipProps["placement"]>;
+    transition: {
+        type: StringConstructor;
+        default: string;
+    };
+    popperOptions: import('vue').PropType<import('../../ele-app/plus').EleTooltipProps["popperOptions"]>;
+    responsive: {
+        type: BooleanConstructor;
+        default: null;
+    };
+}>> & Readonly<{
+    onClear?: (() => any) | undefined;
+    onFocus?: ((_e: FocusEvent) => any) | undefined;
+    onBlur?: ((_e: FocusEvent) => any) | undefined;
+    "onUpdate:visible"?: ((_visible: boolean) => any) | undefined;
+    onFilterChange?: ((_value: string) => any) | undefined;
+    onRemoveTag?: ((_item: SelectedItem) => any) | undefined;
+    onInputClick?: ((_e: MouseEvent) => any) | undefined;
+    onWrapClick?: ((_isCustom?: boolean | undefined) => any) | undefined;
+}>, {
+    value: import('../types').SelectValue;
+    teleported: boolean;
+    disabled: boolean;
+    clearable: boolean;
+    filterable: boolean;
+    persistent: boolean;
+    visible: boolean;
+    transition: string;
+    automaticDropdown: boolean;
+    multiple: boolean;
+    responsive: boolean;
+    popperType: import('../types').PopperType;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/ele-basic-select/index.cjs

@@ -1,9 +1,10 @@
 "use strict";
 const vue = require("vue");
-const elementPlus = require("element-plus");
-const index = require("../icons/index");
 const EleTooltip = require("../ele-tooltip/index");
+const EleModal = require("../ele-modal/index");
+const EleDrawer = require("../ele-drawer/index");
 const ReceiverView = require("../ele-config-provider/components/receiver-view");
+const SelectView = require("./components/select-view");
 const props = require("./props");
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   ...{ name: "EleBasicSelect" },
@@ -13,48 +14,15 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   setup(__props, { expose: __expose, emit: __emit }) {
     const props2 = __props;
     const emit = __emit;
+    const selectViewRef = vue.ref(null);
     const tooltipRef = vue.ref(null);
-    const inputRef = vue.ref(null);
-    const searchRef = vue.ref(null);
-    const inputValue = vue.ref(
-      props2.multiple || !props2.selectedLabel ? "" : props2.selectedLabel
-    );
-    const searchValue = vue.ref("");
-    const isEmpty = vue.computed(() => {
-      if (!props2.multiple) {
-        return props2.value == null || props2.value === "";
-      }
-      return !Array.isArray(props2.value) || !props2.value.length;
-    });
-    const inputPlaceholder = vue.computed(() => {
-      const str = isEmpty.value && props2.placeholder ? props2.placeholder : "";
-      if (!props2.filterable || !props2.visible || props2.multiple) {
-        return str;
-      }
-      return props2.selectedLabel || str;
-    });
-    const isCollapse = vue.computed(() => {
-      return typeof props2.maxTagCount === "number" && props2.selected != null && props2.selected.length > props2.maxTagCount;
-    });
-    const currentTags = vue.computed(() => {
-      if (!isCollapse.value || isEmpty.value || props2.selected == null) {
-        return props2.selected || [];
-      }
-      return props2.selected.slice(0, props2.maxTagCount);
-    });
-    const omittedTags = vue.computed(() => {
-      if (!isCollapse.value || isEmpty.value || props2.selected == null) {
-        return [];
-      }
-      return props2.selected.slice(props2.maxTagCount);
-    });
-    const omittedSize = vue.computed(() => {
-      if (isEmpty.value || props2.maxTagCount == null || props2.maxTagCount < 0) {
-        return 0;
+    const isSelectInputClick = vue.ref(false);
+    const updateVisible = (visible) => {
+      isSelectInputClick.value = false;
+      if (!props2.disabled || !visible) {
+        emit("update:visible", visible);
       }
-      return props2.value.length - props2.maxTagCount;
-    });
-    let isSelectInputClick = false;
+    };
     const updatePopper = () => {
       tooltipRef.value && tooltipRef.value.updatePopper();
     };
@@ -66,115 +34,156 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
             return;
           }
         }
-        const input = props2.multiple ? searchRef.value : inputRef.value;
-        input && input.focus();
-        vue.nextTick(() => {
-          input && input.focus();
-        });
-      }
-    };
-    const updateSearchValue = (modelValue) => {
-      if (props2.filterable && props2.visible && props2.multiple) {
-        searchValue.value = modelValue;
-        emit("filterChange", modelValue);
-      }
-    };
-    const updateInputValue = (modelValue) => {
-      if (props2.filterable && props2.visible && !props2.multiple) {
-        inputValue.value = modelValue;
-        emit("filterChange", modelValue);
-      }
-    };
-    const updateVisible = (visible) => {
-      isSelectInputClick = false;
-      if (!props2.disabled || !visible) {
-        emit("update:visible", visible);
+        selectViewRef.value && selectViewRef.value.focusSearchInput();
       }
     };
     const handleUpdatePopoverVisible = (visible) => {
-      if (!visible && props2.filterable && isSelectInputClick) {
-        isSelectInputClick = false;
+      if (!visible && props2.filterable && isSelectInputClick.value) {
+        isSelectInputClick.value = false;
         return;
       }
       updateVisible(visible);
     };
-    const handleSelectInputClick = () => {
-      isSelectInputClick = true;
-    };
-    const handleTagClose = (item) => {
-      if (!props2.disabled) {
-        emit("removeTag", item);
+    const handleWrapClick = (isCustom) => {
+      isSelectInputClick.value = true;
+      if (!isCustom && (props2.popperType === "modal" || props2.popperType === "drawer")) {
+        updateVisible(true);
       }
     };
-    const handleClear = () => {
-      isSelectInputClick = false;
-      emit("clear");
-    };
     const handleInputClick = (e) => {
       if (props2.automaticDropdown && props2.visible) {
-        isSelectInputClick = true;
+        isSelectInputClick.value = true;
         e.stopPropagation();
       }
     };
-    const handleInputFocus = (e) => {
+    const handleRemoveTag = (item) => {
+      emit("removeTag", item);
+    };
+    const handleClear = () => {
+      isSelectInputClick.value = false;
+      emit("clear");
+    };
+    const handleFocus = (e) => {
       if (props2.automaticDropdown && !props2.visible) {
         updateVisible(true);
       }
       emit("focus", e);
     };
-    const handleInputBlur = (e) => {
+    const handleBlur = (e) => {
       emit("blur", e);
     };
-    const handleInputEsc = (e) => {
-      if (!props2.disabled && props2.visible) {
-        e.stopPropagation();
-        e.preventDefault();
-        updateVisible(false);
-      }
+    const handleFilterChange = (value) => {
+      emit("filterChange", value);
     };
-    vue.watch(
-      () => props2.selectedLabel,
-      (label) => {
-        if (!props2.filterable || !props2.visible) {
-          inputValue.value = props2.multiple || !label ? "" : label;
-        }
-      }
-    );
-    vue.watch(
-      () => props2.visible,
-      (visible) => {
-        if (props2.filterable) {
-          if (props2.multiple) {
-            searchValue.value = "";
-            if (visible) {
-              focusSearchInput();
-            }
-          } else {
-            const label = props2.selectedLabel;
-            inputValue.value = visible || !label ? "" : label;
-          }
-        }
-      }
-    );
     __expose({
       tooltipRef,
-      inputRef,
-      searchRef,
-      currentTags,
-      omittedTags,
-      omittedSize,
+      selectViewRef,
       updatePopper,
       focusSearchInput,
-      updateSearchValue,
-      updateInputValue,
       updateVisible
     });
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createBlock(EleTooltip, {
+      return _ctx.popperType === "modal" || _ctx.popperType === "drawer" ? (vue.openBlock(), vue.createBlock(SelectView, vue.mergeProps({ key: 0 }, _ctx.$props, {
+        ref_key: "selectViewRef",
+        ref: selectViewRef,
+        "onUpdate:visible": updateVisible,
+        onRemoveTag: handleRemoveTag,
+        onClear: handleClear,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        onFilterChange: handleFilterChange,
+        onInputClick: handleInputClick,
+        onWrapClick: handleWrapClick
+      }), vue.createSlots({
+        default: vue.withCtx(() => [
+          _ctx.popperType === "drawer" ? (vue.openBlock(), vue.createBlock(EleDrawer, vue.mergeProps({
+            key: 0,
+            title: _ctx.popperTitle,
+            size: _ctx.popperWidth,
+            closeOnClickModal: false,
+            destroyOnClose: !_ctx.persistent,
+            responsive: _ctx.responsive,
+            class: _ctx.popperClass
+          }, _ctx.popperProps || {}, {
+            modelValue: _ctx.visible,
+            "onUpdate:modelValue": handleUpdatePopoverVisible
+          }), vue.createSlots({
+            default: vue.withCtx(() => [
+              vue.renderSlot(_ctx.$slots, "default")
+            ]),
+            _: 2
+          }, [
+            vue.renderList(Object.keys(_ctx.popperSlots || {}).filter(
+              (k) => k !== "default" && _ctx.popperSlots && _ctx.popperSlots[k] && _ctx.popperSlots[k] !== "default" && _ctx.$slots[_ctx.popperSlots[k]]
+            ), (name) => {
+              return {
+                name,
+                fn: vue.withCtx((slotProps) => {
+                  var _a;
+                  return [
+                    vue.renderSlot(_ctx.$slots, (_a = _ctx.popperSlots) == null ? void 0 : _a[name], vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
+                  ];
+                })
+              };
+            })
+          ]), 1040, ["title", "size", "destroyOnClose", "responsive", "class", "modelValue"])) : (vue.openBlock(), vue.createBlock(EleModal, vue.mergeProps({
+            key: 1,
+            position: "center",
+            title: _ctx.popperTitle,
+            width: _ctx.popperWidth,
+            bodyHeight: _ctx.popperHeight,
+            closeOnClickModal: false,
+            destroyOnClose: !_ctx.persistent,
+            responsive: _ctx.responsive,
+            class: _ctx.popperClass
+          }, _ctx.popperProps || {}, {
+            modelValue: _ctx.visible,
+            "onUpdate:modelValue": handleUpdatePopoverVisible
+          }), vue.createSlots({
+            default: vue.withCtx(() => [
+              vue.renderSlot(_ctx.$slots, "default")
+            ]),
+            _: 2
+          }, [
+            vue.renderList(Object.keys(_ctx.popperSlots || {}).filter(
+              (k) => k !== "default" && _ctx.popperSlots && _ctx.popperSlots[k] && _ctx.popperSlots[k] !== "default" && _ctx.$slots[_ctx.popperSlots[k]]
+            ), (name) => {
+              return {
+                name,
+                fn: vue.withCtx((slotProps) => {
+                  var _a;
+                  return [
+                    vue.renderSlot(_ctx.$slots, (_a = _ctx.popperSlots) == null ? void 0 : _a[name], vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
+                  ];
+                })
+              };
+            })
+          ]), 1040, ["title", "width", "bodyHeight", "destroyOnClose", "responsive", "class", "modelValue"]))
+        ]),
+        _: 2
+      }, [
+        vue.renderList(Object.keys(_ctx.$slots).filter((k) => k !== "default"), (name) => {
+          return {
+            name,
+            fn: vue.withCtx((slotProps) => [
+              vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
+            ])
+          };
+        })
+      ]), 1040)) : _ctx.popperType === "default" ? (vue.openBlock(), vue.createBlock(vue.unref(ReceiverView), {
+        key: 1,
+        wrapHeight: _ctx.popperHeight,
+        class: vue.normalizeClass(_ctx.popperClass)
+      }, {
+        default: vue.withCtx(() => [
+          vue.renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 8, ["wrapHeight", "class"])) : (vue.openBlock(), vue.createBlock(EleTooltip, vue.mergeProps({
+        key: 2,
         ref_key: "tooltipRef",
         ref: tooltipRef,
         trigger: "click",
-        visible: _ctx.visible,
         disabled: _ctx.disabled,
         placement: _ctx.placement,
         teleported: _ctx.teleported,
@@ -186,12 +195,15 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         effect: "light",
         persistent: true,
         isPopover: true,
-        triggerKeys: [],
+        triggerKeys: []
+      }, _ctx.popperProps || {}, {
+        visible: _ctx.visible,
         "onUpdate:visible": handleUpdatePopoverVisible
-      }, {
+      }), {
         body: vue.withCtx(() => [
           _ctx.persistent || _ctx.visible ? (vue.openBlock(), vue.createBlock(vue.unref(ReceiverView), {
             key: 0,
+            wrapHeight: _ctx.popperHeight,
             class: "ele-popover-body",
             onClick: focusSearchInput,
             onMouseup: focusSearchInput
@@ -200,138 +212,36 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
               vue.renderSlot(_ctx.$slots, "default")
             ]),
             _: 3
-          })) : vue.createCommentVNode("", true)
+          }, 8, ["wrapHeight"])) : vue.createCommentVNode("", true)
         ]),
         default: vue.withCtx(() => [
-          vue.createElementVNode("div", {
-            class: vue.normalizeClass([
-              "ele-select",
-              _ctx.selectClass,
-              { "is-empty": isEmpty.value },
-              { "is-multiple": _ctx.multiple },
-              { "is-disabled": _ctx.disabled },
-              { "is-filterable": _ctx.filterable },
-              { "is-small": _ctx.size === "small" },
-              { "is-large": _ctx.size === "large" },
-              { "is-opened": _ctx.visible }
-            ]),
-            style: vue.normalizeStyle(_ctx.selectStyle),
-            onClick: handleSelectInputClick
-          }, [
-            vue.createVNode(vue.unref(elementPlus.ElInput), {
-              ref_key: "inputRef",
-              ref: inputRef,
-              size: _ctx.size,
-              disabled: _ctx.disabled,
-              validateEvent: false,
-              modelValue: inputValue.value,
-              placeholder: _ctx.filterable && _ctx.multiple && _ctx.visible ? "" : inputPlaceholder.value,
-              readonly: !(_ctx.filterable && !_ctx.multiple),
-              style: vue.normalizeStyle(_ctx.inputStyle),
-              "onUpdate:modelValue": updateInputValue,
-              onClick: handleInputClick,
-              onFocus: handleInputFocus,
-              onBlur: handleInputBlur,
-              onKeydown: vue.withKeys(handleInputEsc, ["esc"])
-            }, vue.createSlots({
-              suffix: vue.withCtx(() => [
-                _ctx.clearable && !_ctx.disabled && !isEmpty.value ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElIcon), {
-                  key: 0,
-                  class: "ele-select-clear el-input__icon",
-                  onClick: vue.withModifiers(handleClear, ["stop"])
-                }, {
-                  default: vue.withCtx(() => [
-                    vue.renderSlot(_ctx.$slots, "clearIcon", {}, () => [
-                      vue.createVNode(vue.unref(index.CloseCircleFilled))
-                    ])
-                  ]),
-                  _: 3
-                })) : vue.createCommentVNode("", true),
-                vue.createVNode(vue.unref(elementPlus.ElIcon), { class: "ele-select-arrow el-input__icon" }, {
-                  default: vue.withCtx(() => [
-                    vue.renderSlot(_ctx.$slots, "suffixIcon", { visible: _ctx.visible }, () => [
-                      vue.createVNode(vue.unref(index.ArrowDown))
-                    ])
-                  ]),
-                  _: 3
-                })
-              ]),
-              _: 2
-            }, [
-              _ctx.$slots.prefix ? {
-                name: "prefix",
-                fn: vue.withCtx(() => [
-                  vue.renderSlot(_ctx.$slots, "prefix")
-                ]),
-                key: "0"
-              } : void 0
-            ]), 1032, ["size", "disabled", "modelValue", "placeholder", "readonly", "style"]),
-            _ctx.multiple ? (vue.openBlock(), vue.createElementBlock("div", {
-              key: 0,
-              class: "ele-select-tags",
-              style: vue.normalizeStyle(_ctx.selectTagsStyle)
-            }, [
-              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(currentTags.value, (item, index2) => {
-                return vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElTag), {
-                  key: index2 + "-" + item.value,
-                  size: _ctx.size,
-                  type: _ctx.tagType,
-                  closable: !_ctx.disabled,
-                  disableTransitions: true,
-                  title: item.label,
-                  onClose: ($event) => handleTagClose(item)
-                }, {
-                  default: vue.withCtx(() => [
-                    item.label && _ctx.maxTagTextLength && item.label.length > _ctx.maxTagTextLength ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-                      vue.createTextVNode(vue.toDisplayString(item.label.slice(0, _ctx.maxTagTextLength)) + "... ", 1)
-                    ], 64)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
-                      vue.createTextVNode(vue.toDisplayString(item.label), 1)
-                    ], 64))
-                  ]),
-                  _: 2
-                }, 1032, ["size", "type", "closable", "title", "onClose"]);
-              }), 128)),
-              isCollapse.value ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElTag), {
-                key: 0,
-                size: _ctx.size,
-                type: _ctx.tagType,
-                disableTransitions: true
-              }, {
-                default: vue.withCtx(() => [
-                  vue.renderSlot(_ctx.$slots, "maxTagPlaceholder", {
-                    omittedValues: omittedTags.value,
-                    omittedSize: omittedSize.value
-                  }, () => [
-                    vue.createTextVNode(" +" + vue.toDisplayString(omittedSize.value), 1)
-                  ])
-                ]),
-                _: 3
-              }, 8, ["size", "type"])) : vue.createCommentVNode("", true),
-              !_ctx.disabled && _ctx.filterable ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElTag), {
-                key: 1,
-                size: _ctx.size,
-                disableTransitions: true,
-                class: "ele-select-search"
-              }, {
-                default: vue.withCtx(() => [
-                  vue.createVNode(vue.unref(elementPlus.ElInput), {
-                    ref_key: "searchRef",
-                    ref: searchRef,
-                    size: _ctx.size,
-                    validateEvent: false,
-                    modelValue: searchValue.value,
-                    placeholder: inputPlaceholder.value,
-                    "onUpdate:modelValue": updateSearchValue,
-                    onKeydown: vue.withKeys(handleInputEsc, ["esc"])
-                  }, null, 8, ["size", "modelValue", "placeholder"])
-                ]),
-                _: 1
-              }, 8, ["size"])) : vue.createCommentVNode("", true)
-            ], 4)) : vue.createCommentVNode("", true)
-          ], 6)
+          _ctx.selectStyle === "none" ? (vue.openBlock(), vue.createElementBlock("div", {
+            key: 0,
+            class: vue.normalizeClass(_ctx.selectClass)
+          }, null, 2)) : (vue.openBlock(), vue.createBlock(SelectView, vue.mergeProps({ key: 1 }, _ctx.$props, {
+            ref_key: "selectViewRef",
+            ref: selectViewRef,
+            "onUpdate:visible": updateVisible,
+            onRemoveTag: handleRemoveTag,
+            onClear: handleClear,
+            onFocus: handleFocus,
+            onBlur: handleBlur,
+            onFilterChange: handleFilterChange,
+            onInputClick: handleInputClick,
+            onWrapClick: handleWrapClick
+          }), vue.createSlots({ _: 2 }, [
+            vue.renderList(Object.keys(_ctx.$slots).filter((k) => k !== "default"), (name) => {
+              return {
+                name,
+                fn: vue.withCtx((slotProps) => [
+                  vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
+                ])
+              };
+            })
+          ]), 1040))
         ]),
         _: 3
-      }, 8, ["visible", "disabled", "placement", "teleported", "width", "popperClass", "popperOptions", "transition", "gpuAcceleration"]);
+      }, 16, ["disabled", "placement", "teleported", "width", "popperClass", "popperOptions", "transition", "gpuAcceleration", "visible"]));
     };
   }
 });