@element-plus/nightly 0.0.20220119 → 0.0.20220123

package/es/components/scrollbar/src/bar2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"bar2.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}
+{"version":3,"file":"bar2.mjs","sources":["../../../../../../packages/components/scrollbar/src/bar.vue"],"sourcesContent":["<template>\n  <transition name=\"el-scrollbar-fade\">\n    <div\n      v-show=\"always || visible\"\n      ref=\"instance\"\n      :class=\"['el-scrollbar__bar', 'is-' + bar.key]\"\n      @mousedown=\"clickTrackHandler\"\n    >\n      <div\n        ref=\"thumb\"\n        class=\"el-scrollbar__thumb\"\n        :style=\"thumbStyle\"\n        @mousedown=\"clickThumbHandler\"\n      ></div>\n    </div>\n  </transition>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  inject,\n  onBeforeUnmount,\n  ref,\n  toRef,\n} from 'vue'\nimport { useEventListener, isClient } from '@vueuse/core'\nimport { scrollbarContextKey } from '@element-plus/tokens'\nimport { throwError } from '@element-plus/utils/error'\nimport { BAR_MAP, renderThumbStyle } from './util'\n\nimport { barProps } from './bar'\n\nconst COMPONENT_NAME = 'Bar'\nexport default defineComponent({\n  name: COMPONENT_NAME,\n  props: barProps,\n\n  setup(props) {\n    const scrollbar = inject(scrollbarContextKey)\n    if (!scrollbar)\n      throwError(COMPONENT_NAME, 'can not inject scrollbar context')\n\n    const instance = ref<HTMLDivElement>()\n    const thumb = ref<HTMLDivElement>()\n\n    const barStore = ref({})\n    const visible = ref(false)\n\n    let cursorDown = false\n    let cursorLeave = false\n    let onselectstartStore:\n      | ((this: GlobalEventHandlers, ev: Event) => any)\n      | null = isClient ? document.onselectstart : null\n\n    const bar = computed(\n      () => BAR_MAP[props.vertical ? 'vertical' : 'horizontal']\n    )\n\n    const thumbStyle = computed(() =>\n      renderThumbStyle({\n        size: props.size,\n        move: props.move,\n        bar: bar.value,\n      })\n    )\n\n    const offsetRatio = computed(\n      () =>\n        // offsetRatioX = original width of thumb / current width of thumb / ratioX\n        // offsetRatioY = original height of thumb / current height of thumb / ratioY\n        // instance height = wrap height - GAP\n        instance.value![bar.value.offset] ** 2 /\n        scrollbar.wrapElement![bar.value.scrollSize] /\n        props.ratio /\n        thumb.value![bar.value.offset]\n    )\n\n    const clickThumbHandler = (e: MouseEvent) => {\n      // prevent click event of middle and right button\n      e.stopPropagation()\n      if (e.ctrlKey || [1, 2].includes(e.button)) return\n\n      window.getSelection()?.removeAllRanges()\n      startDrag(e)\n\n      const el = e.currentTarget as HTMLDivElement\n      if (!el) return\n      barStore.value[bar.value.axis] =\n        el[bar.value.offset] -\n        (e[bar.value.client] - el.getBoundingClientRect()[bar.value.direction])\n    }\n\n    const clickTrackHandler = (e: MouseEvent) => {\n      if (!thumb.value || !instance.value || !scrollbar.wrapElement) return\n\n      const offset = Math.abs(\n        (e.target as HTMLElement).getBoundingClientRect()[bar.value.direction] -\n          e[bar.value.client]\n      )\n      const thumbHalf = thumb.value[bar.value.offset] / 2\n      const thumbPositionPercentage =\n        ((offset - thumbHalf) * 100 * offsetRatio.value) /\n        instance.value[bar.value.offset]\n\n      scrollbar.wrapElement[bar.value.scroll] =\n        (thumbPositionPercentage *\n          scrollbar.wrapElement[bar.value.scrollSize]) /\n        100\n    }\n\n    const startDrag = (e: MouseEvent) => {\n      e.stopImmediatePropagation()\n      cursorDown = true\n      document.addEventListener('mousemove', mouseMoveDocumentHandler)\n      document.addEventListener('mouseup', mouseUpDocumentHandler)\n      onselectstartStore = document.onselectstart\n      document.onselectstart = () => false\n    }\n\n    const mouseMoveDocumentHandler = (e: MouseEvent) => {\n      if (!instance.value || !thumb.value) return\n      if (cursorDown === false) return\n\n      const prevPage = barStore.value[bar.value.axis]\n      if (!prevPage) return\n\n      const offset =\n        (instance.value.getBoundingClientRect()[bar.value.direction] -\n          e[bar.value.client]) *\n        -1\n      const thumbClickPosition = thumb.value[bar.value.offset] - prevPage\n      const thumbPositionPercentage =\n        ((offset - thumbClickPosition) * 100 * offsetRatio.value) /\n        instance.value[bar.value.offset]\n      scrollbar.wrapElement[bar.value.scroll] =\n        (thumbPositionPercentage *\n          scrollbar.wrapElement[bar.value.scrollSize]) /\n        100\n    }\n\n    const mouseUpDocumentHandler = () => {\n      cursorDown = false\n      barStore.value[bar.value.axis] = 0\n      document.removeEventListener('mousemove', mouseMoveDocumentHandler)\n      document.removeEventListener('mouseup', mouseUpDocumentHandler)\n      restoreOnselectstart()\n      if (cursorLeave) visible.value = false\n    }\n\n    const mouseMoveScrollbarHandler = () => {\n      cursorLeave = false\n      visible.value = !!props.size\n    }\n\n    const mouseLeaveScrollbarHandler = () => {\n      cursorLeave = true\n      visible.value = cursorDown\n    }\n\n    onBeforeUnmount(() => {\n      restoreOnselectstart()\n      document.removeEventListener('mouseup', mouseUpDocumentHandler)\n    })\n\n    const restoreOnselectstart = () => {\n      if (document.onselectstart !== onselectstartStore)\n        document.onselectstart = onselectstartStore\n    }\n\n    useEventListener(\n      toRef(scrollbar, 'scrollbarElement'),\n      'mousemove',\n      mouseMoveScrollbarHandler\n    )\n    useEventListener(\n      toRef(scrollbar, 'scrollbarElement'),\n      'mouseleave',\n      mouseLeaveScrollbarHandler\n    )\n\n    return {\n      instance,\n      thumb,\n      bar,\n      thumbStyle,\n      visible,\n      clickTrackHandler,\n      clickThumbHandler,\n    }\n  },\n})\n</script>\n"],"names":["_createBlock","_createElementVNode"],"mappings":";;;;;;;;;AAkCA,MAAM,iBAAiB;AACvB,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,OAAO;AAAA,EAEP,MAAM,OAAO;AACX,UAAM,YAAY,OAAO;AACzB,QAAI,CAAC;AACH,iBAAW,gBAAgB;AAE7B,UAAM,WAAW;AACjB,UAAM,QAAQ;AAEd,UAAM,WAAW,IAAI;AACrB,UAAM,UAAU,IAAI;AAEpB,QAAI,aAAa;AACjB,QAAI,cAAc;AAClB,QAAI,qBAEO,WAAW,SAAS,gBAAgB;AAE/C,UAAM,MAAM,SACV,MAAM,QAAQ,MAAM,WAAW,aAAa;AAG9C,UAAM,aAAa,SAAS,MAC1B,iBAAiB;AAAA,MACf,MAAM,MAAM;AAAA,MACZ,MAAM,MAAM;AAAA,MACZ,KAAK,IAAI;AAAA;AAIb,UAAM,cAAc,SAClB,MAIE,SAAS,MAAO,IAAI,MAAM,WAAW,IACrC,UAAU,YAAa,IAAI,MAAM,cACjC,MAAM,QACN,MAAM,MAAO,IAAI,MAAM;AAG3B,UAAM,oBAAoB,CAAC,MAAkB;AAE3C,QAAE;AACF,UAAI,EAAE,WAAW,CAAC,GAAG,GAAG,SAAS,EAAE;AAAS;AAE5C,aAAO,gBAAgB;AACvB,gBAAU;AAEV,YAAM,KAAK,EAAE;AACb,UAAI,CAAC;AAAI;AACT,eAAS,MAAM,IAAI,MAAM,QACvB,GAAG,IAAI,MAAM,aACV,IAAI,MAAM,UAAU,GAAG,wBAAwB,IAAI,MAAM;AAAA;AAGhE,UAAM,oBAAoB,CAAC,MAAkB;AAC3C,UAAI,CAAC,MAAM,SAAS,CAAC,SAAS,SAAS,CAAC,UAAU;AAAa;AAE/D,YAAM,SAAS,KAAK,IACjB,EAAE,OAAuB,wBAAwB,IAAI,MAAM,aAC1D,EAAE,IAAI,MAAM;AAEhB,YAAM,YAAY,MAAM,MAAM,IAAI,MAAM,UAAU;AAClD,YAAM,0BACF,UAAS,aAAa,MAAM,YAAY,QAC1C,SAAS,MAAM,IAAI,MAAM;AAE3B,gBAAU,YAAY,IAAI,MAAM,UAC7B,0BACC,UAAU,YAAY,IAAI,MAAM,cAClC;AAAA;AAGJ,UAAM,YAAY,CAAC,MAAkB;AACnC,QAAE;AACF,mBAAa;AACb,eAAS,iBAAiB,aAAa;AACvC,eAAS,iBAAiB,WAAW;AACrC,2BAAqB,SAAS;AAC9B,eAAS,gBAAgB,MAAM;AAAA;AAGjC,UAAM,2BAA2B,CAAC,MAAkB;AAClD,UAAI,CAAC,SAAS,SAAS,CAAC,MAAM;AAAO;AACrC,UAAI,eAAe;AAAO;AAE1B,YAAM,WAAW,SAAS,MAAM,IAAI,MAAM;AAC1C,UAAI,CAAC;AAAU;AAEf,YAAM,SACH,UAAS,MAAM,wBAAwB,IAAI,MAAM,aAChD,EAAE,IAAI,MAAM,WACd;AACF,YAAM,qBAAqB,MAAM,MAAM,IAAI,MAAM,UAAU;AAC3D,YAAM,0BACF,UAAS,sBAAsB,MAAM,YAAY,QACnD,SAAS,MAAM,IAAI,MAAM;AAC3B,gBAAU,YAAY,IAAI,MAAM,UAC7B,0BACC,UAAU,YAAY,IAAI,MAAM,cAClC;AAAA;AAGJ,UAAM,yBAAyB,MAAM;AACnC,mBAAa;AACb,eAAS,MAAM,IAAI,MAAM,QAAQ;AACjC,eAAS,oBAAoB,aAAa;AAC1C,eAAS,oBAAoB,WAAW;AACxC;AACA,UAAI;AAAa,gBAAQ,QAAQ;AAAA;AAGnC,UAAM,4BAA4B,MAAM;AACtC,oBAAc;AACd,cAAQ,QAAQ,CAAC,CAAC,MAAM;AAAA;AAG1B,UAAM,6BAA6B,MAAM;AACvC,oBAAc;AACd,cAAQ,QAAQ;AAAA;AAGlB,oBAAgB,MAAM;AACpB;AACA,eAAS,oBAAoB,WAAW;AAAA;AAG1C,UAAM,uBAAuB,MAAM;AACjC,UAAI,SAAS,kBAAkB;AAC7B,iBAAS,gBAAgB;AAAA;AAG7B,qBACE,MAAM,WAAW,qBACjB,aACA;AAEF,qBACE,MAAM,WAAW,qBACjB,cACA;AAGF,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;2BA5LJ,gBAca,eAdI;sBAaTA;AAAA,qBAZN;AAAA,qBAEMC,mBAAU;AAAA,QACb,KAAK;AAAA,QACL,sBAAS,8BAAE;AAAA;SAEZ;AAAA,2BACa;AAAA,UACX,KAAK;AAAA,UACJ,OAAK;AAAA,UACL,sBAAS;AAAA;;cATM;AAAA;;;;;;;;;;"}

package/es/components/scrollbar/src/scrollbar2.mjs

@@ -1,7 +1,164 @@
-import script from './scrollbar.vue_vue_type_script_lang.mjs';
-export { default } from './scrollbar.vue_vue_type_script_lang.mjs';
-import { render } from './scrollbar.vue_vue_type_template_id_303f965d_lang.mjs';
+import { defineComponent, ref, computed, watch, provide, reactive, onMounted, nextTick, resolveComponent, openBlock, createElementBlock, createElementVNode, normalizeClass, normalizeStyle, createBlock, resolveDynamicComponent, withCtx, renderSlot, Fragment, createVNode, createCommentVNode } from 'vue';
+import { useResizeObserver, useEventListener } from '@vueuse/core';
+import { addUnit, isNumber } from '../../../utils/util.mjs';
+import { debugWarn } from '../../../utils/error.mjs';
+import '../../../tokens/index.mjs';
+import Bar from './bar2.mjs';
+import { scrollbarProps, scrollbarEmits } from './scrollbar.mjs';
+import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
+import { scrollbarContextKey } from '../../../tokens/scrollbar.mjs';
 
-script.render = render;
-script.__file = "packages/components/scrollbar/src/scrollbar.vue";
+const _sfc_main = defineComponent({
+  name: "ElScrollbar",
+  components: {
+    Bar
+  },
+  props: scrollbarProps,
+  emits: scrollbarEmits,
+  setup(props, { emit }) {
+    let stopResizeObserver = void 0;
+    let stopResizeListener = void 0;
+    const scrollbar$ = ref();
+    const wrap$ = ref();
+    const resize$ = ref();
+    const sizeWidth = ref("0");
+    const sizeHeight = ref("0");
+    const moveX = ref(0);
+    const moveY = ref(0);
+    const ratioY = ref(1);
+    const ratioX = ref(1);
+    const SCOPE = "ElScrollbar";
+    const GAP = 4;
+    const style = computed(() => {
+      const style2 = {};
+      if (props.height)
+        style2.height = addUnit(props.height);
+      if (props.maxHeight)
+        style2.maxHeight = addUnit(props.maxHeight);
+      return [props.wrapStyle, style2];
+    });
+    const handleScroll = () => {
+      if (wrap$.value) {
+        const offsetHeight = wrap$.value.offsetHeight - GAP;
+        const offsetWidth = wrap$.value.offsetWidth - GAP;
+        moveY.value = wrap$.value.scrollTop * 100 / offsetHeight * ratioY.value;
+        moveX.value = wrap$.value.scrollLeft * 100 / offsetWidth * ratioX.value;
+        emit("scroll", {
+          scrollTop: wrap$.value.scrollTop,
+          scrollLeft: wrap$.value.scrollLeft
+        });
+      }
+    };
+    const setScrollTop = (value) => {
+      if (!isNumber(value)) {
+        debugWarn(SCOPE, "value must be a number");
+        return;
+      }
+      wrap$.value.scrollTop = value;
+    };
+    const setScrollLeft = (value) => {
+      if (!isNumber(value)) {
+        debugWarn(SCOPE, "value must be a number");
+        return;
+      }
+      wrap$.value.scrollLeft = value;
+    };
+    const update = () => {
+      if (!wrap$.value)
+        return;
+      const offsetHeight = wrap$.value.offsetHeight - GAP;
+      const offsetWidth = wrap$.value.offsetWidth - GAP;
+      const originalHeight = offsetHeight ** 2 / wrap$.value.scrollHeight;
+      const originalWidth = offsetWidth ** 2 / wrap$.value.scrollWidth;
+      const height = Math.max(originalHeight, props.minSize);
+      const width = Math.max(originalWidth, props.minSize);
+      ratioY.value = originalHeight / (offsetHeight - originalHeight) / (height / (offsetHeight - height));
+      ratioX.value = originalWidth / (offsetWidth - originalWidth) / (width / (offsetWidth - width));
+      sizeHeight.value = height + GAP < offsetHeight ? `${height}px` : "";
+      sizeWidth.value = width + GAP < offsetWidth ? `${width}px` : "";
+    };
+    watch(() => props.noresize, (noresize) => {
+      if (noresize) {
+        stopResizeObserver?.();
+        stopResizeListener?.();
+      } else {
+        ;
+        ({ stop: stopResizeObserver } = useResizeObserver(resize$, update));
+        stopResizeListener = useEventListener("resize", update);
+      }
+    }, { immediate: true });
+    provide(scrollbarContextKey, reactive({
+      scrollbarElement: scrollbar$,
+      wrapElement: wrap$
+    }));
+    onMounted(() => {
+      if (!props.native)
+        nextTick(() => update());
+    });
+    return {
+      scrollbar$,
+      wrap$,
+      resize$,
+      moveX,
+      moveY,
+      ratioX,
+      ratioY,
+      sizeWidth,
+      sizeHeight,
+      style,
+      update,
+      handleScroll,
+      setScrollTop,
+      setScrollLeft
+    };
+  }
+});
+const _hoisted_1 = {
+  ref: "scrollbar$",
+  class: "el-scrollbar"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_bar = resolveComponent("bar");
+  return openBlock(), createElementBlock("div", _hoisted_1, [
+    createElementVNode("div", {
+      ref: "wrap$",
+      class: normalizeClass([
+        _ctx.wrapClass,
+        "el-scrollbar__wrap",
+        _ctx.native ? "" : "el-scrollbar__wrap--hidden-default"
+      ]),
+      style: normalizeStyle(_ctx.style),
+      onScroll: _cache[0] || (_cache[0] = (...args) => _ctx.handleScroll && _ctx.handleScroll(...args))
+    }, [
+      (openBlock(), createBlock(resolveDynamicComponent(_ctx.tag), {
+        ref: "resize$",
+        class: normalizeClass(["el-scrollbar__view", _ctx.viewClass]),
+        style: normalizeStyle(_ctx.viewStyle)
+      }, {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 8, ["class", "style"]))
+    ], 38),
+    !_ctx.native ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+      createVNode(_component_bar, {
+        move: _ctx.moveX,
+        ratio: _ctx.ratioX,
+        size: _ctx.sizeWidth,
+        always: _ctx.always
+      }, null, 8, ["move", "ratio", "size", "always"]),
+      createVNode(_component_bar, {
+        move: _ctx.moveY,
+        ratio: _ctx.ratioY,
+        size: _ctx.sizeHeight,
+        vertical: "",
+        always: _ctx.always
+      }, null, 8, ["move", "ratio", "size", "always"])
+    ], 64)) : createCommentVNode("v-if", true)
+  ], 512);
+}
+var Scrollbar = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+
+export { Scrollbar as default };
 //# sourceMappingURL=scrollbar2.mjs.map

package/es/components/scrollbar/src/scrollbar2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"scrollbar2.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}
+{"version":3,"file":"scrollbar2.mjs","sources":["../../../../../../packages/components/scrollbar/src/scrollbar.vue"],"sourcesContent":["<template>\n  <div ref=\"scrollbar$\" class=\"el-scrollbar\">\n    <div\n      ref=\"wrap$\"\n      :class=\"[\n        wrapClass,\n        'el-scrollbar__wrap',\n        native ? '' : 'el-scrollbar__wrap--hidden-default',\n      ]\"\n      :style=\"style\"\n      @scroll=\"handleScroll\"\n    >\n      <component\n        :is=\"tag\"\n        ref=\"resize$\"\n        :class=\"['el-scrollbar__view', viewClass]\"\n        :style=\"viewStyle\"\n      >\n        <slot />\n      </component>\n    </div>\n    <template v-if=\"!native\">\n      <bar :move=\"moveX\" :ratio=\"ratioX\" :size=\"sizeWidth\" :always=\"always\" />\n      <bar\n        :move=\"moveY\"\n        :ratio=\"ratioY\"\n        :size=\"sizeHeight\"\n        vertical\n        :always=\"always\"\n      />\n    </template>\n  </div>\n</template>\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  nextTick,\n  onMounted,\n  provide,\n  ref,\n  watch,\n  reactive,\n} from 'vue'\nimport { useResizeObserver, useEventListener } from '@vueuse/core'\nimport { addUnit, isNumber } from '@element-plus/utils/util'\nimport { debugWarn } from '@element-plus/utils/error'\nimport { scrollbarContextKey } from '@element-plus/tokens'\nimport Bar from './bar.vue'\n\nimport { scrollbarProps, scrollbarEmits } from './scrollbar'\nimport type { StyleValue, CSSProperties } from 'vue'\n\nexport default defineComponent({\n  name: 'ElScrollbar',\n  components: {\n    Bar,\n  },\n  props: scrollbarProps,\n  emits: scrollbarEmits,\n\n  setup(props, { emit }) {\n    let stopResizeObserver: (() => void) | undefined = undefined\n    let stopResizeListener: (() => void) | undefined = undefined\n\n    const scrollbar$ = ref<HTMLDivElement>()\n    const wrap$ = ref<HTMLDivElement>()\n    const resize$ = ref<HTMLElement>()\n\n    const sizeWidth = ref('0')\n    const sizeHeight = ref('0')\n    const moveX = ref(0)\n    const moveY = ref(0)\n    const ratioY = ref(1)\n    const ratioX = ref(1)\n    const SCOPE = 'ElScrollbar'\n    const GAP = 4 // top 2 + bottom 2 of bar instance\n\n    const style = computed<StyleValue>(() => {\n      const style: CSSProperties = {}\n      if (props.height) style.height = addUnit(props.height)\n      if (props.maxHeight) style.maxHeight = addUnit(props.maxHeight)\n      return [props.wrapStyle, style]\n    })\n\n    const handleScroll = () => {\n      if (wrap$.value) {\n        const offsetHeight = wrap$.value.offsetHeight - GAP\n        const offsetWidth = wrap$.value.offsetWidth - GAP\n\n        moveY.value =\n          ((wrap$.value.scrollTop * 100) / offsetHeight) * ratioY.value\n        moveX.value =\n          ((wrap$.value.scrollLeft * 100) / offsetWidth) * ratioX.value\n\n        emit('scroll', {\n          scrollTop: wrap$.value.scrollTop,\n          scrollLeft: wrap$.value.scrollLeft,\n        })\n      }\n    }\n\n    const setScrollTop = (value: number) => {\n      if (!isNumber(value)) {\n        debugWarn(SCOPE, 'value must be a number')\n        return\n      }\n      wrap$.value!.scrollTop = value\n    }\n\n    const setScrollLeft = (value: number) => {\n      if (!isNumber(value)) {\n        debugWarn(SCOPE, 'value must be a number')\n        return\n      }\n      wrap$.value!.scrollLeft = value\n    }\n\n    const update = () => {\n      if (!wrap$.value) return\n\n      const offsetHeight = wrap$.value.offsetHeight - GAP\n      const offsetWidth = wrap$.value.offsetWidth - GAP\n\n      const originalHeight = offsetHeight ** 2 / wrap$.value.scrollHeight\n      const originalWidth = offsetWidth ** 2 / wrap$.value.scrollWidth\n      const height = Math.max(originalHeight, props.minSize)\n      const width = Math.max(originalWidth, props.minSize)\n\n      ratioY.value =\n        originalHeight /\n        (offsetHeight - originalHeight) /\n        (height / (offsetHeight - height))\n      ratioX.value =\n        originalWidth /\n        (offsetWidth - originalWidth) /\n        (width / (offsetWidth - width))\n\n      sizeHeight.value = height + GAP < offsetHeight ? `${height}px` : ''\n      sizeWidth.value = width + GAP < offsetWidth ? `${width}px` : ''\n    }\n\n    watch(\n      () => props.noresize,\n      (noresize) => {\n        if (noresize) {\n          stopResizeObserver?.()\n          stopResizeListener?.()\n        } else {\n          ;({ stop: stopResizeObserver } = useResizeObserver(resize$, update))\n          stopResizeListener = useEventListener('resize', update)\n        }\n      },\n      { immediate: true }\n    )\n\n    provide(\n      scrollbarContextKey,\n      reactive({\n        scrollbarElement: scrollbar$,\n        wrapElement: wrap$,\n      })\n    )\n\n    onMounted(() => {\n      if (!props.native) nextTick(() => update())\n    })\n\n    return {\n      scrollbar$,\n      wrap$,\n      resize$,\n\n      moveX,\n      moveY,\n      ratioX,\n      ratioY,\n      sizeWidth,\n      sizeHeight,\n      style,\n      update,\n      handleScroll,\n      setScrollTop,\n      setScrollLeft,\n    }\n  },\n})\n</script>\n"],"names":["_openBlock","_createElementBlock","_normalizeClass","_createBlock","_resolveDynamicComponent","_withCtx"],"mappings":"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"}

package/es/components/select/index.d.ts

@@ -53,7 +53,7 @@ export declare const ElSelect: import("../../utils/types").SFCWithInstall<import
     };
     clearIcon: {
         type: import("vue").PropType<string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>;
-        default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{}>, {}>;
+        default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
     };
     fitInputWidth: {
         type: BooleanConstructor;
@@ -61,7 +61,7 @@ export declare const ElSelect: import("../../utils/types").SFCWithInstall<import
     };
     suffixIcon: {
         type: import("vue").PropType<string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>;
-        default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{}>, {}>;
+        default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
     };
     tagType: {
         type: StringConstructor;
@@ -900,7 +900,7 @@ export declare const ElSelect: import("../../utils/types").SFCWithInstall<import
     };
     clearIcon: {
         type: import("vue").PropType<string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>;
-        default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{}>, {}>;
+        default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
     };
     fitInputWidth: {
         type: BooleanConstructor;
@@ -908,7 +908,7 @@ export declare const ElSelect: import("../../utils/types").SFCWithInstall<import
     };
     suffixIcon: {
         type: import("vue").PropType<string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>;
-        default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{}>, {}>;
+        default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
     };
     tagType: {
         type: StringConstructor;

package/es/components/select/index.mjs

@@ -1,18 +1,15 @@
 import { withInstall, withNoopInstall } from '../../utils/with-install.mjs';
-import './src/select.mjs';
-import './src/option.mjs';
-import './src/option-group.mjs';
+import Select from './src/select.mjs';
+import Option from './src/option.mjs';
+import OptionGroup from './src/option-group.mjs';
 export { selectGroupKey, selectKey } from './src/token.mjs';
-import script from './src/select.vue_vue_type_script_lang.mjs';
-import script$1 from './src/option.vue_vue_type_script_lang.mjs';
-import script$2 from './src/option-group.vue_vue_type_script_lang.mjs';
 
-const ElSelect = withInstall(script, {
-  Option: script$1,
-  OptionGroup: script$2
+const ElSelect = withInstall(Select, {
+  Option,
+  OptionGroup
 });
-const ElOption = withNoopInstall(script$1);
-const ElOptionGroup = withNoopInstall(script$2);
+const ElOption = withNoopInstall(Option);
+const ElOptionGroup = withNoopInstall(OptionGroup);
 
 export { ElOption, ElOptionGroup, ElSelect, ElSelect as default };
 //# sourceMappingURL=index.mjs.map

package/es/components/select/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../../../packages/components/select/index.ts"],"sourcesContent":["import { withInstall, withNoopInstall } from '@element-plus/utils/with-install'\n\nimport Select from './src/select.vue'\nimport Option from './src/option.vue'\nimport OptionGroup from './src/option-group.vue'\n\nexport const ElSelect = withInstall(Select, {\n  Option,\n  OptionGroup,\n})\nexport default ElSelect\nexport const ElOption = withNoopInstall(Option)\nexport const ElOptionGroup = withNoopInstall(OptionGroup)\n\nexport * from './src/token'\n"],"names":["Select","Option","OptionGroup"],"mappings":";;;;;;;;;AAIY,MAAC,QAAQ,GAAG,WAAW,CAACA,MAAM,EAAE;AAC5C,UAAEC,QAAM;AACR,eAAEC,QAAW;AACb,CAAC,EAAE;AAES,MAAC,QAAQ,GAAG,eAAe,CAACD,QAAM,EAAE;AACpC,MAAC,aAAa,GAAG,eAAe,CAACC,QAAW;;;;"}
+{"version":3,"file":"index.mjs","sources":["../../../../../packages/components/select/index.ts"],"sourcesContent":["import { withInstall, withNoopInstall } from '@element-plus/utils/with-install'\n\nimport Select from './src/select.vue'\nimport Option from './src/option.vue'\nimport OptionGroup from './src/option-group.vue'\n\nexport const ElSelect = withInstall(Select, {\n  Option,\n  OptionGroup,\n})\nexport default ElSelect\nexport const ElOption = withNoopInstall(Option)\nexport const ElOptionGroup = withNoopInstall(OptionGroup)\n\nexport * from './src/token'\n"],"names":[],"mappings":";;;;;;AAIY,MAAC,QAAQ,GAAG,WAAW,CAAC,MAAM,EAAE;AAC5C,EAAE,MAAM;AACR,EAAE,WAAW;AACb,CAAC,EAAE;AAES,MAAC,QAAQ,GAAG,eAAe,CAAC,MAAM,EAAE;AACpC,MAAC,aAAa,GAAG,eAAe,CAAC,WAAW;;;;"}

package/es/components/select/src/option-group.mjs

@@ -1,7 +1,66 @@
-import script from './option-group.vue_vue_type_script_lang.mjs';
-export { default } from './option-group.vue_vue_type_script_lang.mjs';
-import { render } from './option-group.vue_vue_type_template_id_072bbb70_lang.mjs';
+import { defineComponent, ref, getCurrentInstance, provide, reactive, toRefs, inject, onMounted, toRaw, watch, withDirectives, openBlock, createElementBlock, createElementVNode, toDisplayString, renderSlot, vShow } from 'vue';
+import { selectGroupKey, selectKey } from './token.mjs';
+import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
 
-script.render = render;
-script.__file = "packages/components/select/src/option-group.vue";
+const _sfc_main = defineComponent({
+  name: "ElOptionGroup",
+  componentName: "ElOptionGroup",
+  props: {
+    label: String,
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props) {
+    const visible = ref(true);
+    const instance = getCurrentInstance();
+    const children = ref([]);
+    provide(selectGroupKey, reactive({
+      ...toRefs(props)
+    }));
+    const select = inject(selectKey);
+    onMounted(() => {
+      children.value = flattedChildren(instance.subTree);
+    });
+    const flattedChildren = (node) => {
+      const children2 = [];
+      if (Array.isArray(node.children)) {
+        node.children.forEach((child) => {
+          if (child.type && child.type.name === "ElOption" && child.component && child.component.proxy) {
+            children2.push(child.component.proxy);
+          } else if (child.children?.length) {
+            children2.push(...flattedChildren(child));
+          }
+        });
+      }
+      return children2;
+    };
+    const { groupQueryChange } = toRaw(select);
+    watch(groupQueryChange, () => {
+      visible.value = children.value.some((option) => option.visible === true);
+    });
+    return {
+      visible
+    };
+  }
+});
+const _hoisted_1 = { class: "el-select-group__wrap" };
+const _hoisted_2 = { class: "el-select-group__title" };
+const _hoisted_3 = { class: "el-select-group" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return withDirectives((openBlock(), createElementBlock("ul", _hoisted_1, [
+    createElementVNode("li", _hoisted_2, toDisplayString(_ctx.label), 1),
+    createElementVNode("li", null, [
+      createElementVNode("ul", _hoisted_3, [
+        renderSlot(_ctx.$slots, "default")
+      ])
+    ])
+  ], 512)), [
+    [vShow, _ctx.visible]
+  ]);
+}
+var OptionGroup = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+
+export { OptionGroup as default };
 //# sourceMappingURL=option-group.mjs.map

package/es/components/select/src/option-group.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"option-group.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}
+{"version":3,"file":"option-group.mjs","sources":["../../../../../../packages/components/select/src/option-group.vue"],"sourcesContent":["<template>\n  <ul v-show=\"visible\" class=\"el-select-group__wrap\">\n    <li class=\"el-select-group__title\">{{ label }}</li>\n    <li>\n      <ul class=\"el-select-group\">\n        <slot></slot>\n      </ul>\n    </li>\n  </ul>\n</template>\n\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  provide,\n  inject,\n  ref,\n  reactive,\n  toRefs,\n  getCurrentInstance,\n  onMounted,\n  watch,\n  toRaw,\n} from 'vue'\nimport { selectGroupKey, selectKey } from './token'\n\nexport default defineComponent({\n  name: 'ElOptionGroup',\n  componentName: 'ElOptionGroup',\n\n  props: {\n    label: String,\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  setup(props) {\n    const visible = ref(true)\n    const instance = getCurrentInstance()\n    const children = ref([])\n\n    provide(\n      selectGroupKey,\n      reactive({\n        ...toRefs(props),\n      })\n    )\n\n    const select = inject(selectKey)\n\n    onMounted(() => {\n      children.value = flattedChildren(instance.subTree)\n    })\n\n    // get all instances of options\n    const flattedChildren = (node) => {\n      const children = []\n      if (Array.isArray(node.children)) {\n        node.children.forEach((child) => {\n          if (\n            child.type &&\n            child.type.name === 'ElOption' &&\n            child.component &&\n            child.component.proxy\n          ) {\n            children.push(child.component.proxy)\n          } else if (child.children?.length) {\n            children.push(...flattedChildren(child))\n          }\n        })\n      }\n      return children\n    }\n\n    const { groupQueryChange } = toRaw(select)\n    watch(groupQueryChange, () => {\n      visible.value = children.value.some((option) => option.visible === true)\n    })\n\n    return {\n      visible,\n    }\n  },\n})\n</script>\n"],"names":["_withDirectives","_createElementVNode"],"mappings":";;;;AA0BA,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,eAAe;AAAA,EAEf,OAAO;AAAA,IACL,OAAO;AAAA,IACP,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA;AAAA;AAAA,EAGb,MAAM,OAAO;AACX,UAAM,UAAU,IAAI;AACpB,UAAM,WAAW;AACjB,UAAM,WAAW,IAAI;AAErB,YACE,gBACA,SAAS;AAAA,SACJ,OAAO;AAAA;AAId,UAAM,SAAS,OAAO;AAEtB,cAAU,MAAM;AACd,eAAS,QAAQ,gBAAgB,SAAS;AAAA;AAI5C,UAAM,kBAAkB,CAAC,SAAS;AAChC,YAAM,YAAW;AACjB,UAAI,MAAM,QAAQ,KAAK,WAAW;AAChC,aAAK,SAAS,QAAQ,CAAC,UAAU;AAC/B,cACE,MAAM,QACN,MAAM,KAAK,SAAS,cACpB,MAAM,aACN,MAAM,UAAU,OAChB;AACA,sBAAS,KAAK,MAAM,UAAU;AAAA,qBACrB,MAAM,UAAU,QAAQ;AACjC,sBAAS,KAAK,GAAG,gBAAgB;AAAA;AAAA;AAAA;AAIvC,aAAO;AAAA;AAGT,UAAM,EAAE,qBAAqB,MAAM;AACnC,UAAM,kBAAkB,MAAM;AAC5B,cAAQ,QAAQ,SAAS,MAAM,KAAK,CAAC,WAAW,OAAO,YAAY;AAAA;AAGrE,WAAO;AAAA,MACL;AAAA;AAAA;AAAA;qBA/EE,OAAM;qBAEJ,OAAM;;2CAHd;SACEA,gDAAsC,kBAAK;AAAA,IAC3CC,mBAIK;AAAA,uBAHH,MAEK,MAFL;AAAA,yBACe;AAAA;;;YAJA;AAAA;;;;;;;"}

package/es/components/select/src/option.mjs

@@ -1,7 +1,83 @@
-import script from './option.vue_vue_type_script_lang.mjs';
-export { default } from './option.vue_vue_type_script_lang.mjs';
-import { render } from './option.vue_vue_type_template_id_2feb8304_lang.mjs';
+import { defineComponent, reactive, toRefs, getCurrentInstance, onBeforeUnmount, withDirectives, openBlock, createElementBlock, normalizeClass, withModifiers, renderSlot, createElementVNode, toDisplayString, vShow } from 'vue';
+import { useOption } from './useOption.mjs';
+import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
 
-script.render = render;
-script.__file = "packages/components/select/src/option.vue";
+const _sfc_main = defineComponent({
+  name: "ElOption",
+  componentName: "ElOption",
+  props: {
+    value: {
+      required: true,
+      type: [String, Number, Boolean, Object]
+    },
+    label: [String, Number],
+    created: Boolean,
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props) {
+    const states = reactive({
+      index: -1,
+      groupDisabled: false,
+      visible: true,
+      hitState: false,
+      hover: false
+    });
+    const { currentLabel, itemSelected, isDisabled, select, hoverItem } = useOption(props, states);
+    const { visible, hover } = toRefs(states);
+    const vm = getCurrentInstance().proxy;
+    const key = vm.value;
+    select.onOptionCreate(vm);
+    onBeforeUnmount(() => {
+      const { selected } = select;
+      const selectedOptions = select.props.multiple ? selected : [selected];
+      const doesExist = select.cachedOptions.has(key);
+      const doesSelected = selectedOptions.some((item) => {
+        return item.value === vm.value;
+      });
+      if (doesExist && !doesSelected) {
+        select.cachedOptions.delete(key);
+      }
+      select.onOptionDestroy(key);
+    });
+    function selectOptionClick() {
+      if (props.disabled !== true && states.groupDisabled !== true) {
+        select.handleOptionSelect(vm, true);
+      }
+    }
+    return {
+      currentLabel,
+      itemSelected,
+      isDisabled,
+      select,
+      hoverItem,
+      visible,
+      hover,
+      selectOptionClick,
+      states
+    };
+  }
+});
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return withDirectives((openBlock(), createElementBlock("li", {
+    class: normalizeClass(["el-select-dropdown__item", {
+      selected: _ctx.itemSelected,
+      "is-disabled": _ctx.isDisabled,
+      hover: _ctx.hover
+    }]),
+    onMouseenter: _cache[0] || (_cache[0] = (...args) => _ctx.hoverItem && _ctx.hoverItem(...args)),
+    onClick: _cache[1] || (_cache[1] = withModifiers((...args) => _ctx.selectOptionClick && _ctx.selectOptionClick(...args), ["stop"]))
+  }, [
+    renderSlot(_ctx.$slots, "default", {}, () => [
+      createElementVNode("span", null, toDisplayString(_ctx.currentLabel), 1)
+    ])
+  ], 34)), [
+    [vShow, _ctx.visible]
+  ]);
+}
+var Option = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+
+export { Option as default };
 //# sourceMappingURL=option.mjs.map

package/es/components/select/src/option.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"option.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}
+{"version":3,"file":"option.mjs","sources":["../../../../../../packages/components/select/src/option.vue"],"sourcesContent":["<template>\n  <li\n    v-show=\"visible\"\n    class=\"el-select-dropdown__item\"\n    :class=\"{\n      selected: itemSelected,\n      'is-disabled': isDisabled,\n      hover: hover,\n    }\"\n    @mouseenter=\"hoverItem\"\n    @click.stop=\"selectOptionClick\"\n  >\n    <slot>\n      <span>{{ currentLabel }}</span>\n    </slot>\n  </li>\n</template>\n\n<script lang=\"ts\">\nimport {\n  toRefs,\n  defineComponent,\n  getCurrentInstance,\n  onBeforeUnmount,\n  reactive,\n} from 'vue'\nimport { useOption } from './useOption'\nimport type { SelectOptionProxy } from './token'\n\nexport default defineComponent({\n  name: 'ElOption',\n  componentName: 'ElOption',\n\n  props: {\n    value: {\n      required: true,\n      type: [String, Number, Boolean, Object],\n    },\n    label: [String, Number],\n    created: Boolean,\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  setup(props) {\n    const states = reactive({\n      index: -1,\n      groupDisabled: false,\n      visible: true,\n      hitState: false,\n      hover: false,\n    })\n\n    const { currentLabel, itemSelected, isDisabled, select, hoverItem } =\n      useOption(props, states)\n\n    const { visible, hover } = toRefs(states)\n\n    const vm = getCurrentInstance().proxy\n    const key = (vm as unknown as SelectOptionProxy).value\n    select.onOptionCreate(vm as unknown as SelectOptionProxy)\n\n    onBeforeUnmount(() => {\n      const { selected } = select\n      const selectedOptions = select.props.multiple ? selected : [selected]\n      const doesExist = select.cachedOptions.has(key)\n      const doesSelected = selectedOptions.some((item) => {\n        return item.value === (vm as unknown as SelectOptionProxy).value\n      })\n      // if option is not selected, remove it from cache\n      if (doesExist && !doesSelected) {\n        select.cachedOptions.delete(key)\n      }\n      select.onOptionDestroy(key)\n    })\n\n    function selectOptionClick() {\n      if (props.disabled !== true && states.groupDisabled !== true) {\n        select.handleOptionSelect(vm, true)\n      }\n    }\n\n    return {\n      currentLabel,\n      itemSelected,\n      isDisabled,\n      select,\n      hoverItem,\n      visible,\n      hover,\n      selectOptionClick,\n      states,\n    }\n  },\n})\n</script>\n"],"names":["_withDirectives","_createElementBlock"],"mappings":";;;;AA6BA,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,eAAe;AAAA,EAEf,OAAO;AAAA,IACL,OAAO;AAAA,MACL,UAAU;AAAA,MACV,MAAM,CAAC,QAAQ,QAAQ,SAAS;AAAA;AAAA,IAElC,OAAO,CAAC,QAAQ;AAAA,IAChB,SAAS;AAAA,IACT,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA;AAAA;AAAA,EAIb,MAAM,OAAO;AACX,UAAM,SAAS,SAAS;AAAA,MACtB,OAAO;AAAA,MACP,eAAe;AAAA,MACf,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OAAO;AAAA;AAGT,UAAM,EAAE,cAAc,cAAc,YAAY,QAAQ,cACtD,UAAU,OAAO;AAEnB,UAAM,EAAE,SAAS,UAAU,OAAO;AAElC,UAAM,KAAK,qBAAqB;AAChC,UAAM,MAAO,GAAoC;AACjD,WAAO,eAAe;AAEtB,oBAAgB,MAAM;AACpB,YAAM,EAAE,aAAa;AACrB,YAAM,kBAAkB,OAAO,MAAM,WAAW,WAAW,CAAC;AAC5D,YAAM,YAAY,OAAO,cAAc,IAAI;AAC3C,YAAM,eAAe,gBAAgB,KAAK,CAAC,SAAS;AAClD,eAAO,KAAK,UAAW,GAAoC;AAAA;AAG7D,UAAI,aAAa,CAAC,cAAc;AAC9B,eAAO,cAAc,OAAO;AAAA;AAE9B,aAAO,gBAAgB;AAAA;AAGzB,iCAA6B;AAC3B,UAAI,MAAM,aAAa,QAAQ,OAAO,kBAAkB,MAAM;AAC5D,eAAO,mBAAmB,IAAI;AAAA;AAAA;AAIlC,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;2CA5FJ,yBAcK;SAZEA,6BAACC,mBAA0B;AAAA,0BACN,6BAAY;AAAA,qBAAuB;AAAA,qBAAyB,KAAK;AAAA;;IAM1F,cAAK,yDAAO;AAAA;KAEb;AAAA,eACE,aAA+B;AAAA;;WAXlB;AAAA;;;;;;;"}

package/es/components/select/src/select-dropdown.mjs

@@ -1,7 +1,44 @@
-import script from './select-dropdown.vue_vue_type_script_lang.mjs';
-export { default } from './select-dropdown.vue_vue_type_script_lang.mjs';
-import { render } from './select-dropdown.vue_vue_type_template_id_46cf6eee_lang.mjs';
+import { defineComponent, inject, computed, ref, onMounted, onBeforeUnmount, openBlock, createElementBlock, normalizeClass, normalizeStyle, renderSlot } from 'vue';
+import { addResizeListener, removeResizeListener } from '../../../utils/resize-event.mjs';
+import { selectKey } from './token.mjs';
+import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
 
-script.render = render;
-script.__file = "packages/components/select/src/select-dropdown.vue";
+const _sfc_main = defineComponent({
+  name: "ElSelectDropdown",
+  componentName: "ElSelectDropdown",
+  setup() {
+    const select = inject(selectKey);
+    const popperClass = computed(() => select.props.popperClass);
+    const isMultiple = computed(() => select.props.multiple);
+    const isFitInputWidth = computed(() => select.props.fitInputWidth);
+    const minWidth = ref("");
+    function updateMinWidth() {
+      minWidth.value = `${select.selectWrapper?.getBoundingClientRect().width}px`;
+    }
+    onMounted(() => {
+      updateMinWidth();
+      addResizeListener(select.selectWrapper, updateMinWidth);
+    });
+    onBeforeUnmount(() => {
+      removeResizeListener(select.selectWrapper, updateMinWidth);
+    });
+    return {
+      minWidth,
+      popperClass,
+      isMultiple,
+      isFitInputWidth
+    };
+  }
+});
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass(["el-select-dropdown", [{ "is-multiple": _ctx.isMultiple }, _ctx.popperClass]]),
+    style: normalizeStyle({ [_ctx.isFitInputWidth ? "width" : "minWidth"]: _ctx.minWidth })
+  }, [
+    renderSlot(_ctx.$slots, "default")
+  ], 6);
+}
+var ElSelectMenu = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+
+export { ElSelectMenu as default };
 //# sourceMappingURL=select-dropdown.mjs.map

package/es/components/select/src/select-dropdown.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"select-dropdown.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}
+{"version":3,"file":"select-dropdown.mjs","sources":["../../../../../../packages/components/select/src/select-dropdown.vue"],"sourcesContent":["<template>\n  <div\n    class=\"el-select-dropdown\"\n    :class=\"[{ 'is-multiple': isMultiple }, popperClass]\"\n    :style=\"{ [isFitInputWidth ? 'width' : 'minWidth']: minWidth }\"\n  >\n    <slot></slot>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  computed,\n  onMounted,\n  onBeforeUnmount,\n  inject,\n  ref,\n} from 'vue'\nimport {\n  addResizeListener,\n  removeResizeListener,\n} from '@element-plus/utils/resize-event'\nimport { selectKey } from './token'\nimport type { ResizableElement } from '@element-plus/utils/resize-event'\n\nexport default defineComponent({\n  name: 'ElSelectDropdown',\n\n  componentName: 'ElSelectDropdown',\n\n  setup() {\n    const select = inject(selectKey)!\n\n    // computed\n    const popperClass = computed(() => select.props.popperClass)\n    const isMultiple = computed(() => select.props.multiple)\n    const isFitInputWidth = computed(() => select.props.fitInputWidth)\n    const minWidth = ref('')\n\n    function updateMinWidth() {\n      minWidth.value = `${\n        select.selectWrapper?.getBoundingClientRect().width\n      }px`\n    }\n\n    onMounted(() => {\n      // TODO: updatePopper\n      // popper.value.update()\n      updateMinWidth()\n      addResizeListener(\n        select.selectWrapper as ResizableElement,\n        updateMinWidth\n      )\n    })\n\n    onBeforeUnmount(() => {\n      removeResizeListener(\n        select.selectWrapper as ResizableElement,\n        updateMinWidth\n      )\n    })\n\n    return {\n      minWidth,\n      popperClass,\n      isMultiple,\n      isFitInputWidth,\n    }\n  },\n})\n</script>\n"],"names":["_openBlock","_normalizeClass"],"mappings":";;;;;AA0BA,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EAEN,eAAe;AAAA,EAEf,QAAQ;AACN,UAAM,SAAS,OAAO;AAGtB,UAAM,cAAc,SAAS,MAAM,OAAO,MAAM;AAChD,UAAM,aAAa,SAAS,MAAM,OAAO,MAAM;AAC/C,UAAM,kBAAkB,SAAS,MAAM,OAAO,MAAM;AACpD,UAAM,WAAW,IAAI;AAErB,8BAA0B;AACxB,eAAS,QAAQ,GACf,OAAO,eAAe,wBAAwB;AAAA;AAIlD,cAAU,MAAM;AAGd;AACA,wBACE,OAAO,eACP;AAAA;AAIJ,oBAAgB,MAAM;AACpB,2BACE,OAAO,eACP;AAAA;AAIJ,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;2BAlEJ,wBAMM;SALCA,gCAAC,OAAoB;AAAA,IAEzB,OAAKC,sCAAoB,qCAA0B,KAAQ;AAAA;KAE5D;AAAA;;;;;;;"}