element-ps 1.0.0-alpha.6 → 1.0.1

package/lib/packages/components/scrollbar/src/bar.vue_vue&type=script&lang.js

@@ -0,0 +1,111 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var dom = require('../../../utils/dom.js');
+var util = require('./util.js');
+
+var script = vue.defineComponent({
+  name: "Bar",
+  props: {
+    vertical: Boolean,
+    size: String,
+    move: Number,
+    ratio: Number,
+    always: Boolean
+  },
+  setup(props) {
+    const instance = vue.ref(null);
+    const thumb = vue.ref(null);
+    const scrollbar = vue.inject("scrollbar", {});
+    const wrap = vue.inject("scrollbar-wrap", {});
+    const bar = vue.computed(() => util.BAR_MAP[props.vertical ? "vertical" : "horizontal"]);
+    const barStore = vue.ref({});
+    const cursorDown = vue.ref(null);
+    const cursorLeave = vue.ref(null);
+    const visible = vue.ref(false);
+    let onselectstartStore = null;
+    const offsetRatio = vue.computed(() => {
+      return instance.value[bar.value.offset] ** 2 / wrap.value[bar.value.scrollSize] / props.ratio / thumb.value[bar.value.offset];
+    });
+    const clickThumbHandler = (e) => {
+      e.stopPropagation();
+      if (e.ctrlKey || [1, 2].includes(e.button)) {
+        return;
+      }
+      window.getSelection().removeAllRanges();
+      startDrag(e);
+      barStore.value[bar.value.axis] = e.currentTarget[bar.value.offset] - (e[bar.value.client] - e.currentTarget.getBoundingClientRect()[bar.value.direction]);
+    };
+    const clickTrackHandler = (e) => {
+      const offset = Math.abs(e.target.getBoundingClientRect()[bar.value.direction] - e[bar.value.client]);
+      const thumbHalf = thumb.value[bar.value.offset] / 2;
+      const thumbPositionPercentage = (offset - thumbHalf) * 100 * offsetRatio.value / instance.value[bar.value.offset];
+      wrap.value[bar.value.scroll] = thumbPositionPercentage * wrap.value[bar.value.scrollSize] / 100;
+    };
+    const startDrag = (e) => {
+      e.stopImmediatePropagation();
+      cursorDown.value = true;
+      dom.on(document, "mousemove", mouseMoveDocumentHandler);
+      dom.on(document, "mouseup", mouseUpDocumentHandler);
+      onselectstartStore = document.onselectstart;
+      document.onselectstart = () => false;
+    };
+    const mouseMoveDocumentHandler = (e) => {
+      if (cursorDown.value === false)
+        return;
+      const prevPage = barStore.value[bar.value.axis];
+      if (!prevPage)
+        return;
+      const offset = (instance.value.getBoundingClientRect()[bar.value.direction] - e[bar.value.client]) * -1;
+      const thumbClickPosition = thumb.value[bar.value.offset] - prevPage;
+      const thumbPositionPercentage = (offset - thumbClickPosition) * 100 * offsetRatio.value / instance.value[bar.value.offset];
+      wrap.value[bar.value.scroll] = thumbPositionPercentage * wrap.value[bar.value.scrollSize] / 100;
+    };
+    const mouseUpDocumentHandler = () => {
+      cursorDown.value = false;
+      barStore.value[bar.value.axis] = 0;
+      dom.off(document, "mousemove", mouseMoveDocumentHandler);
+      dom.off(document, "mouseup", mouseUpDocumentHandler);
+      document.onselectstart = onselectstartStore;
+      if (cursorLeave.value) {
+        visible.value = false;
+      }
+    };
+    const thumbStyle = vue.computed(() => util.renderThumbStyle({
+      size: props.size,
+      move: props.move,
+      bar: bar.value
+    }));
+    const mouseMoveScrollbarHandler = () => {
+      cursorLeave.value = false;
+      visible.value = !!props.size;
+    };
+    const mouseLeaveScrollbarHandler = () => {
+      cursorLeave.value = true;
+      visible.value = cursorDown.value;
+    };
+    vue.onMounted(() => {
+      dom.on(scrollbar.value, "mousemove", mouseMoveScrollbarHandler);
+      dom.on(scrollbar.value, "mouseleave", mouseLeaveScrollbarHandler);
+    });
+    vue.onBeforeUnmount(() => {
+      dom.off(document, "mouseup", mouseUpDocumentHandler);
+      dom.off(scrollbar.value, "mousemove", mouseMoveScrollbarHandler);
+      dom.off(scrollbar.value, "mouseleave", mouseLeaveScrollbarHandler);
+    });
+    return {
+      instance,
+      thumb,
+      bar,
+      clickTrackHandler,
+      clickThumbHandler,
+      thumbStyle,
+      visible
+    };
+  }
+});
+
+exports["default"] = script;
+//# sourceMappingURL=bar.vue_vue&type=script&lang.js.map

package/lib/packages/components/scrollbar/src/bar.vue_vue&type=script&lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bar.vue_vue&type=script&lang.js","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  onMounted,\n  ref,\n} from 'vue'\nimport { off, on } from '@element-ps/utils/dom'\nimport { BAR_MAP, renderThumbStyle } from './util'\n\nimport type { Ref } from 'vue'\nimport type { Nullable } from '@element-ps/utils/types'\n\nexport default defineComponent({\n  name: 'Bar',\n  props: {\n    vertical: Boolean,\n    size: String,\n    move: Number,\n    ratio: Number,\n    always: Boolean,\n  },\n  setup(props) {\n    const instance = ref(null)\n    const thumb = ref(null)\n    const scrollbar = inject('scrollbar', {} as Ref<Nullable<HTMLElement>>)\n    const wrap = inject('scrollbar-wrap', {} as Ref<Nullable<HTMLElement>>)\n    const bar = computed(\n      () => BAR_MAP[props.vertical ? 'vertical' : 'horizontal']\n    )\n    const barStore = ref({})\n    const cursorDown = ref(null)\n    const cursorLeave = ref(null)\n    const visible = ref(false)\n    let onselectstartStore = null\n\n    const offsetRatio = computed(() => {\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      return (\n        instance.value[bar.value.offset] ** 2 /\n        wrap.value[bar.value.scrollSize] /\n        props.ratio /\n        thumb.value[bar.value.offset]\n      )\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)) {\n        return\n      }\n      window.getSelection().removeAllRanges()\n      startDrag(e)\n      barStore.value[bar.value.axis] =\n        e.currentTarget[bar.value.offset] -\n        (e[bar.value.client] -\n          (e.currentTarget as HTMLElement).getBoundingClientRect()[\n            bar.value.direction\n          ])\n    }\n\n    const clickTrackHandler = (e: MouseEvent) => {\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      wrap.value[bar.value.scroll] =\n        (thumbPositionPercentage * wrap.value[bar.value.scrollSize]) / 100\n    }\n\n    const startDrag = (e: MouseEvent) => {\n      e.stopImmediatePropagation()\n      cursorDown.value = true\n      on(document, 'mousemove', mouseMoveDocumentHandler)\n      on(document, 'mouseup', mouseUpDocumentHandler)\n      onselectstartStore = document.onselectstart\n      document.onselectstart = () => false\n    }\n\n    const mouseMoveDocumentHandler = (e: MouseEvent) => {\n      if (cursorDown.value === false) return\n      const prevPage = barStore.value[bar.value.axis]\n\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      wrap.value[bar.value.scroll] =\n        (thumbPositionPercentage * wrap.value[bar.value.scrollSize]) / 100\n    }\n\n    const mouseUpDocumentHandler = () => {\n      cursorDown.value = false\n      barStore.value[bar.value.axis] = 0\n      off(document, 'mousemove', mouseMoveDocumentHandler)\n      off(document, 'mouseup', mouseUpDocumentHandler)\n      document.onselectstart = onselectstartStore\n      if (cursorLeave.value) {\n        visible.value = false\n      }\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 mouseMoveScrollbarHandler = () => {\n      cursorLeave.value = false\n      visible.value = !!props.size\n    }\n\n    const mouseLeaveScrollbarHandler = () => {\n      cursorLeave.value = true\n      visible.value = cursorDown.value\n    }\n\n    onMounted(() => {\n      on(scrollbar.value, 'mousemove', mouseMoveScrollbarHandler)\n      on(scrollbar.value, 'mouseleave', mouseLeaveScrollbarHandler)\n    })\n\n    onBeforeUnmount(() => {\n      off(document, 'mouseup', mouseUpDocumentHandler)\n      off(scrollbar.value, 'mousemove', mouseMoveScrollbarHandler)\n      off(scrollbar.value, 'mouseleave', mouseLeaveScrollbarHandler)\n    })\n\n    return {\n      instance,\n      thumb,\n      bar,\n      clickTrackHandler,\n      clickThumbHandler,\n      thumbStyle,\n      visible,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","ref","inject","computed","BAR_MAP","renderThumbStyle"],"mappings":"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"}

package/lib/packages/components/scrollbar/src/bar.vue_vue&type=template&id=2f63f10a&lang.js

@@ -0,0 +1,30 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return vue.openBlock(), vue.createBlock(vue.Transition, { name: "el-scrollbar-fade" }, {
+    default: vue.withCtx(() => [
+      vue.withDirectives(vue.createElementVNode("div", {
+        ref: "instance",
+        class: vue.normalizeClass(["el-scrollbar__bar", "is-" + _ctx.bar.key]),
+        onMousedown: _cache[1] || (_cache[1] = (...args) => _ctx.clickTrackHandler && _ctx.clickTrackHandler(...args))
+      }, [
+        vue.createElementVNode("div", {
+          ref: "thumb",
+          class: "el-scrollbar__thumb",
+          style: vue.normalizeStyle(_ctx.thumbStyle),
+          onMousedown: _cache[0] || (_cache[0] = (...args) => _ctx.clickThumbHandler && _ctx.clickThumbHandler(...args))
+        }, null, 36)
+      ], 34), [
+        [vue.vShow, _ctx.always || _ctx.visible]
+      ])
+    ]),
+    _: 1
+  });
+}
+
+exports.render = render;
+//# sourceMappingURL=bar.vue_vue&type=template&id=2f63f10a&lang.js.map

package/lib/packages/components/scrollbar/src/bar.vue_vue&type=template&id=2f63f10a&lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bar.vue_vue&type=template&id=2f63f10a&lang.js","sources":["../../../../../../../packages/components/scrollbar/src/bar.vue?vue&type=template&id=2f63f10a&lang.js"],"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  onMounted,\n  ref,\n} from 'vue'\nimport { off, on } from '@element-ps/utils/dom'\nimport { BAR_MAP, renderThumbStyle } from './util'\n\nimport type { Ref } from 'vue'\nimport type { Nullable } from '@element-ps/utils/types'\n\nexport default defineComponent({\n  name: 'Bar',\n  props: {\n    vertical: Boolean,\n    size: String,\n    move: Number,\n    ratio: Number,\n    always: Boolean,\n  },\n  setup(props) {\n    const instance = ref(null)\n    const thumb = ref(null)\n    const scrollbar = inject('scrollbar', {} as Ref<Nullable<HTMLElement>>)\n    const wrap = inject('scrollbar-wrap', {} as Ref<Nullable<HTMLElement>>)\n    const bar = computed(\n      () => BAR_MAP[props.vertical ? 'vertical' : 'horizontal']\n    )\n    const barStore = ref({})\n    const cursorDown = ref(null)\n    const cursorLeave = ref(null)\n    const visible = ref(false)\n    let onselectstartStore = null\n\n    const offsetRatio = computed(() => {\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      return (\n        instance.value[bar.value.offset] ** 2 /\n        wrap.value[bar.value.scrollSize] /\n        props.ratio /\n        thumb.value[bar.value.offset]\n      )\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)) {\n        return\n      }\n      window.getSelection().removeAllRanges()\n      startDrag(e)\n      barStore.value[bar.value.axis] =\n        e.currentTarget[bar.value.offset] -\n        (e[bar.value.client] -\n          (e.currentTarget as HTMLElement).getBoundingClientRect()[\n            bar.value.direction\n          ])\n    }\n\n    const clickTrackHandler = (e: MouseEvent) => {\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      wrap.value[bar.value.scroll] =\n        (thumbPositionPercentage * wrap.value[bar.value.scrollSize]) / 100\n    }\n\n    const startDrag = (e: MouseEvent) => {\n      e.stopImmediatePropagation()\n      cursorDown.value = true\n      on(document, 'mousemove', mouseMoveDocumentHandler)\n      on(document, 'mouseup', mouseUpDocumentHandler)\n      onselectstartStore = document.onselectstart\n      document.onselectstart = () => false\n    }\n\n    const mouseMoveDocumentHandler = (e: MouseEvent) => {\n      if (cursorDown.value === false) return\n      const prevPage = barStore.value[bar.value.axis]\n\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      wrap.value[bar.value.scroll] =\n        (thumbPositionPercentage * wrap.value[bar.value.scrollSize]) / 100\n    }\n\n    const mouseUpDocumentHandler = () => {\n      cursorDown.value = false\n      barStore.value[bar.value.axis] = 0\n      off(document, 'mousemove', mouseMoveDocumentHandler)\n      off(document, 'mouseup', mouseUpDocumentHandler)\n      document.onselectstart = onselectstartStore\n      if (cursorLeave.value) {\n        visible.value = false\n      }\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 mouseMoveScrollbarHandler = () => {\n      cursorLeave.value = false\n      visible.value = !!props.size\n    }\n\n    const mouseLeaveScrollbarHandler = () => {\n      cursorLeave.value = true\n      visible.value = cursorDown.value\n    }\n\n    onMounted(() => {\n      on(scrollbar.value, 'mousemove', mouseMoveScrollbarHandler)\n      on(scrollbar.value, 'mouseleave', mouseLeaveScrollbarHandler)\n    })\n\n    onBeforeUnmount(() => {\n      off(document, 'mouseup', mouseUpDocumentHandler)\n      off(scrollbar.value, 'mousemove', mouseMoveScrollbarHandler)\n      off(scrollbar.value, 'mouseleave', mouseLeaveScrollbarHandler)\n    })\n\n    return {\n      instance,\n      thumb,\n      bar,\n      clickTrackHandler,\n      clickThumbHandler,\n      thumbStyle,\n      visible,\n    }\n  },\n})\n</script>\n"],"names":["_createBlock","_createElementVNode"],"mappings":";;;;;;;0BACEA,kCAAY,MAAK;yBACf;yBAAAC;QAEE,KAAI;AAAA,QACH,wDAAqC,SAAI;AAAA,QACzC,oDAAW;;QAEZA;UACE,KAAI;AAAA,UACJ,OAAM;AAAA,UACL,0BAAO;UACP,oDAAW;;;oBATN,eAAU;;;;;;;;;"}

package/lib/packages/components/scrollbar/src/index.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var index_vue_vue_type_script_lang = require('./index.vue_vue&type=script&lang.js');
+var index_vue_vue_type_template_id_988caaee_lang = require('./index.vue_vue&type=template&id=988caaee&lang.js');
+
+index_vue_vue_type_script_lang["default"].render = index_vue_vue_type_template_id_988caaee_lang.render;
+index_vue_vue_type_script_lang["default"].__file = "packages/components/scrollbar/src/index.vue";
+
+exports["default"] = index_vue_vue_type_script_lang["default"];
+//# sourceMappingURL=index.js.map

package/lib/packages/components/scrollbar/src/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}

package/lib/packages/components/scrollbar/src/index.vue_vue&type=script&lang.js

@@ -0,0 +1,161 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var resizeEvent = require('../../../utils/resize-event.js');
+var util = require('../../../utils/util.js');
+var error = require('../../../utils/error.js');
+require('./bar.js');
+var bar_vue_vue_type_script_lang = require('./bar.vue_vue&type=script&lang.js');
+var shared = require('@vue/shared');
+
+var script = vue.defineComponent({
+  name: "PsScrollbar",
+  components: { Bar: bar_vue_vue_type_script_lang["default"] },
+  props: {
+    height: {
+      type: [String, Number],
+      default: ""
+    },
+    maxHeight: {
+      type: [String, Number],
+      default: ""
+    },
+    native: {
+      type: Boolean,
+      default: false
+    },
+    wrapStyle: {
+      type: [String, Array],
+      default: ""
+    },
+    wrapClass: {
+      type: [String, Array],
+      default: ""
+    },
+    viewClass: {
+      type: [String, Array],
+      default: ""
+    },
+    viewStyle: {
+      type: [String, Array],
+      default: ""
+    },
+    noresize: Boolean,
+    tag: {
+      type: String,
+      default: "div"
+    },
+    always: {
+      type: Boolean,
+      default: false
+    },
+    minSize: {
+      type: Number,
+      default: 20
+    }
+  },
+  emits: ["scroll"],
+  setup(props, { emit }) {
+    const sizeWidth = vue.ref("0");
+    const sizeHeight = vue.ref("0");
+    const moveX = vue.ref(0);
+    const moveY = vue.ref(0);
+    const scrollbar = vue.ref(null);
+    const wrap = vue.ref(null);
+    const resize = vue.ref(null);
+    const ratioY = vue.ref(1);
+    const ratioX = vue.ref(1);
+    const SCOPE = "PsScrollbar";
+    const GAP = 4;
+    vue.provide("scrollbar", scrollbar);
+    vue.provide("scrollbar-wrap", wrap);
+    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 (!util.isNumber(value)) {
+        error.debugWarn(SCOPE, "value must be a number");
+        return;
+      }
+      wrap.value.scrollTop = value;
+    };
+    const setScrollLeft = (value) => {
+      if (!util.isNumber(value)) {
+        error.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` : "";
+    };
+    const style = vue.computed(() => {
+      let style2 = props.wrapStyle;
+      if (shared.isArray(style2)) {
+        style2 = util.toObject(style2);
+        style2.height = util.addUnit(props.height);
+        style2.maxHeight = util.addUnit(props.maxHeight);
+      } else if (shared.isString(style2)) {
+        style2 += util.addUnit(props.height) ? `height: ${util.addUnit(props.height)};` : "";
+        style2 += util.addUnit(props.maxHeight) ? `max-height: ${util.addUnit(props.maxHeight)};` : "";
+      }
+      return style2;
+    });
+    vue.onMounted(() => {
+      if (!props.native) {
+        vue.nextTick(update);
+      }
+      if (!props.noresize) {
+        resizeEvent.addResizeListener(resize.value, update);
+        addEventListener("resize", update);
+      }
+    });
+    vue.onBeforeUnmount(() => {
+      if (!props.noresize) {
+        resizeEvent.removeResizeListener(resize.value, update);
+        removeEventListener("resize", update);
+      }
+    });
+    return {
+      moveX,
+      moveY,
+      ratioX,
+      ratioY,
+      sizeWidth,
+      sizeHeight,
+      style,
+      scrollbar,
+      wrap,
+      resize,
+      update,
+      handleScroll,
+      setScrollTop,
+      setScrollLeft
+    };
+  }
+});
+
+exports["default"] = script;
+//# sourceMappingURL=index.vue_vue&type=script&lang.js.map

package/lib/packages/components/scrollbar/src/index.vue_vue&type=script&lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.vue_vue&type=script&lang.js","sources":["../../../../../../../packages/components/scrollbar/src/index.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  onBeforeUnmount,\n  onMounted,\n  provide,\n  ref,\n} from 'vue'\nimport {\n  addResizeListener,\n  removeResizeListener,\n} from '@element-ps/utils/resize-event'\nimport {\n  addUnit,\n  isArray,\n  isNumber,\n  isString,\n  toObject,\n} from '@element-ps/utils/util'\nimport { debugWarn } from '@element-ps/utils/error'\nimport Bar from './bar.vue'\n\nimport type { CSSProperties, PropType } from 'vue'\n\nexport default defineComponent({\n  name: 'PsScrollbar',\n  components: { Bar },\n  props: {\n    height: {\n      type: [String, Number],\n      default: '',\n    },\n    maxHeight: {\n      type: [String, Number],\n      default: '',\n    },\n    native: {\n      type: Boolean,\n      default: false,\n    },\n    wrapStyle: {\n      type: [String, Array] as PropType<string | CSSProperties[]>,\n      default: '',\n    },\n    wrapClass: {\n      type: [String, Array],\n      default: '',\n    },\n    viewClass: {\n      type: [String, Array],\n      default: '',\n    },\n    viewStyle: {\n      type: [String, Array],\n      default: '',\n    },\n    noresize: Boolean, // 如果 container 尺寸不会发生变化，最好设置它可以优化性能\n    tag: {\n      type: String,\n      default: 'div',\n    },\n    always: {\n      type: Boolean,\n      default: false,\n    },\n    minSize: {\n      type: Number,\n      default: 20,\n    },\n  },\n  emits: ['scroll'],\n  setup(props, { emit }) {\n    const sizeWidth = ref('0')\n    const sizeHeight = ref('0')\n    const moveX = ref(0)\n    const moveY = ref(0)\n    const scrollbar = ref(null)\n    const wrap = ref(null)\n    const resize = ref(null)\n    const ratioY = ref(1)\n    const ratioX = ref(1)\n    const SCOPE = 'PsScrollbar'\n    const GAP = 4 // top 2 + bottom 2 of bar instance\n\n    provide('scrollbar', scrollbar)\n    provide('scrollbar-wrap', wrap)\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    const style = computed(() => {\n      let style = props.wrapStyle as CSSProperties\n      if (isArray(style)) {\n        style = toObject(style)\n        style.height = addUnit(props.height)\n        style.maxHeight = addUnit(props.maxHeight)\n      } else if (isString(style)) {\n        style += addUnit(props.height)\n          ? `height: ${addUnit(props.height)};`\n          : ''\n        style += addUnit(props.maxHeight)\n          ? `max-height: ${addUnit(props.maxHeight)};`\n          : ''\n      }\n      return style\n    })\n\n    onMounted(() => {\n      if (!props.native) {\n        nextTick(update)\n      }\n      if (!props.noresize) {\n        addResizeListener(resize.value, update)\n        addEventListener('resize', update)\n      }\n    })\n\n    onBeforeUnmount(() => {\n      if (!props.noresize) {\n        removeResizeListener(resize.value, update)\n        removeEventListener('resize', update)\n      }\n    })\n\n    return {\n      moveX,\n      moveY,\n      ratioX,\n      ratioY,\n      sizeWidth,\n      sizeHeight,\n      style,\n      scrollbar,\n      wrap,\n      resize,\n      update,\n      handleScroll,\n      setScrollTop,\n      setScrollLeft,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","Bar","ref","isNumber","computed","isArray","toObject","addUnit","isString"],"mappings":"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"}

package/lib/packages/components/scrollbar/src/index.vue_vue&type=template&id=988caaee&lang.js

@@ -0,0 +1,54 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+
+const _hoisted_1 = {
+  ref: "scrollbar",
+  class: "el-scrollbar"
+};
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_bar = vue.resolveComponent("bar");
+  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+    vue.createElementVNode("div", {
+      ref: "wrap",
+      class: vue.normalizeClass([
+        _ctx.wrapClass,
+        "el-scrollbar__wrap",
+        _ctx.native ? "" : "el-scrollbar__wrap--hidden-default"
+      ]),
+      style: vue.normalizeStyle(_ctx.style),
+      onScroll: _cache[0] || (_cache[0] = (...args) => _ctx.handleScroll && _ctx.handleScroll(...args))
+    }, [
+      (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.tag), {
+        ref: "resize",
+        class: vue.normalizeClass(["el-scrollbar__view", _ctx.viewClass]),
+        style: vue.normalizeStyle(_ctx.viewStyle)
+      }, {
+        default: vue.withCtx(() => [
+          vue.renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 8, ["class", "style"]))
+    ], 38),
+    !_ctx.native ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+      vue.createVNode(_component_bar, {
+        move: _ctx.moveX,
+        ratio: _ctx.ratioX,
+        size: _ctx.sizeWidth,
+        always: _ctx.always
+      }, null, 8, ["move", "ratio", "size", "always"]),
+      vue.createVNode(_component_bar, {
+        move: _ctx.moveY,
+        ratio: _ctx.ratioY,
+        size: _ctx.sizeHeight,
+        vertical: "",
+        always: _ctx.always
+      }, null, 8, ["move", "ratio", "size", "always"])
+    ], 64)) : vue.createCommentVNode("v-if", true)
+  ], 512);
+}
+
+exports.render = render;
+//# sourceMappingURL=index.vue_vue&type=template&id=988caaee&lang.js.map

package/lib/packages/components/scrollbar/src/index.vue_vue&type=template&id=988caaee&lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.vue_vue&type=template&id=988caaee&lang.js","sources":["../../../../../../../packages/components/scrollbar/src/index.vue?vue&type=template&id=988caaee&lang.js"],"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  onBeforeUnmount,\n  onMounted,\n  provide,\n  ref,\n} from 'vue'\nimport {\n  addResizeListener,\n  removeResizeListener,\n} from '@element-ps/utils/resize-event'\nimport {\n  addUnit,\n  isArray,\n  isNumber,\n  isString,\n  toObject,\n} from '@element-ps/utils/util'\nimport { debugWarn } from '@element-ps/utils/error'\nimport Bar from './bar.vue'\n\nimport type { CSSProperties, PropType } from 'vue'\n\nexport default defineComponent({\n  name: 'PsScrollbar',\n  components: { Bar },\n  props: {\n    height: {\n      type: [String, Number],\n      default: '',\n    },\n    maxHeight: {\n      type: [String, Number],\n      default: '',\n    },\n    native: {\n      type: Boolean,\n      default: false,\n    },\n    wrapStyle: {\n      type: [String, Array] as PropType<string | CSSProperties[]>,\n      default: '',\n    },\n    wrapClass: {\n      type: [String, Array],\n      default: '',\n    },\n    viewClass: {\n      type: [String, Array],\n      default: '',\n    },\n    viewStyle: {\n      type: [String, Array],\n      default: '',\n    },\n    noresize: Boolean, // 如果 container 尺寸不会发生变化，最好设置它可以优化性能\n    tag: {\n      type: String,\n      default: 'div',\n    },\n    always: {\n      type: Boolean,\n      default: false,\n    },\n    minSize: {\n      type: Number,\n      default: 20,\n    },\n  },\n  emits: ['scroll'],\n  setup(props, { emit }) {\n    const sizeWidth = ref('0')\n    const sizeHeight = ref('0')\n    const moveX = ref(0)\n    const moveY = ref(0)\n    const scrollbar = ref(null)\n    const wrap = ref(null)\n    const resize = ref(null)\n    const ratioY = ref(1)\n    const ratioX = ref(1)\n    const SCOPE = 'PsScrollbar'\n    const GAP = 4 // top 2 + bottom 2 of bar instance\n\n    provide('scrollbar', scrollbar)\n    provide('scrollbar-wrap', wrap)\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    const style = computed(() => {\n      let style = props.wrapStyle as CSSProperties\n      if (isArray(style)) {\n        style = toObject(style)\n        style.height = addUnit(props.height)\n        style.maxHeight = addUnit(props.maxHeight)\n      } else if (isString(style)) {\n        style += addUnit(props.height)\n          ? `height: ${addUnit(props.height)};`\n          : ''\n        style += addUnit(props.maxHeight)\n          ? `max-height: ${addUnit(props.maxHeight)};`\n          : ''\n      }\n      return style\n    })\n\n    onMounted(() => {\n      if (!props.native) {\n        nextTick(update)\n      }\n      if (!props.noresize) {\n        addResizeListener(resize.value, update)\n        addEventListener('resize', update)\n      }\n    })\n\n    onBeforeUnmount(() => {\n      if (!props.noresize) {\n        removeResizeListener(resize.value, update)\n        removeEventListener('resize', update)\n      }\n    })\n\n    return {\n      moveX,\n      moveY,\n      ratioX,\n      ratioY,\n      sizeWidth,\n      sizeHeight,\n      style,\n      scrollbar,\n      wrap,\n      resize,\n      update,\n      handleScroll,\n      setScrollTop,\n      setScrollLeft,\n    }\n  },\n})\n</script>\n"],"names":["_createElementBlock","_createElementVNode","_createBlock","_renderSlot","_createVNode"],"mappings":";;;;;;;EACO,KAAI;AAAA,EAAY,OAAM;AAAA;;;0BAA3BA,8BAAA;IACEC;MACE,KAAI;AAAA,MACH;;;;;MAKA,0BAAO;MACP,iDAAQ;;wBAETC,4CACO;QACL,KAAI;AAAA,QACH,iDAA8B;QAC9B,0BAAO;;6BAER;UAAAC;;;;;KAGa,gCAAjBH;MACEI;QAAM,MAAM;QAAQ,OAAO;QAAS,MAAM;QAAY,QAAQ;;MAC9DA;QACG,MAAM;QACN,OAAO;QACP,MAAM;QACP,UAAA;AAAA,QACC,QAAQ;;;;;;;;"}

package/lib/packages/components/scrollbar/src/util.js

@@ -0,0 +1,39 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const BAR_MAP = {
+  vertical: {
+    offset: "offsetHeight",
+    scroll: "scrollTop",
+    scrollSize: "scrollHeight",
+    size: "height",
+    key: "vertical",
+    axis: "Y",
+    client: "clientY",
+    direction: "top"
+  },
+  horizontal: {
+    offset: "offsetWidth",
+    scroll: "scrollLeft",
+    scrollSize: "scrollWidth",
+    size: "width",
+    key: "horizontal",
+    axis: "X",
+    client: "clientX",
+    direction: "left"
+  }
+};
+function renderThumbStyle({ move, size, bar }) {
+  const style = {};
+  const translate = `translate${bar.axis}(${move}%)`;
+  style[bar.size] = size;
+  style.transform = translate;
+  style.msTransform = translate;
+  style.webkitTransform = translate;
+  return style;
+}
+
+exports.BAR_MAP = BAR_MAP;
+exports.renderThumbStyle = renderThumbStyle;
+//# sourceMappingURL=util.js.map

package/lib/packages/components/scrollbar/src/util.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"util.js","sources":["../../../../../../../packages/components/scrollbar/src/util.ts"],"sourcesContent":["export const BAR_MAP = {\n  vertical: {\n    offset: 'offsetHeight',\n    scroll: 'scrollTop',\n    scrollSize: 'scrollHeight',\n    size: 'height',\n    key: 'vertical',\n    axis: 'Y',\n    client: 'clientY',\n    direction: 'top',\n  },\n  horizontal: {\n    offset: 'offsetWidth',\n    scroll: 'scrollLeft',\n    scrollSize: 'scrollWidth',\n    size: 'width',\n    key: 'horizontal',\n    axis: 'X',\n    client: 'clientX',\n    direction: 'left',\n  },\n}\n\nexport function renderThumbStyle({ move, size, bar }) {\n  const style = {} as any\n  const translate = `translate${bar.axis}(${move}%)`\n\n  style[bar.size] = size\n  style.transform = translate\n  style.msTransform = translate\n  style.webkitTransform = translate\n\n  return style\n}\n"],"names":[],"mappings":";;;;MAAa,UAAU;AAAA,EACrB,UAAU;AAAA,IACR,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,MAAM;AAAA,IACN,KAAK;AAAA,IACL,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,WAAW;AAAA;AAAA,EAEb,YAAY;AAAA,IACV,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,MAAM;AAAA,IACN,KAAK;AAAA,IACL,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,WAAW;AAAA;AAAA;0BAIkB,EAAE,MAAM,MAAM,OAAO;AACpD,QAAM,QAAQ;AACd,QAAM,YAAY,YAAY,IAAI,QAAQ;AAE1C,QAAM,IAAI,QAAQ;AAClB,QAAM,YAAY;AAClB,QAAM,cAAc;AACpB,QAAM,kBAAkB;AAExB,SAAO;AAAA;;;;;"}

package/lib/packages/components/select/index.js

@@ -0,0 +1,27 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var withInstall = require('../../utils/with-install.js');
+require('./src/select.js');
+require('./src/option.js');
+require('./src/option-group.js');
+var token = require('./src/token.js');
+var select_vue_vue_type_script_lang = require('./src/select.vue_vue&type=script&lang.js');
+var option_vue_vue_type_script_lang = require('./src/option.vue_vue&type=script&lang.js');
+var optionGroup_vue_vue_type_script_lang = require('./src/option-group.vue_vue&type=script&lang.js');
+
+const PsSelect = withInstall.withInstall(select_vue_vue_type_script_lang["default"], {
+  Option: option_vue_vue_type_script_lang["default"],
+  OptionGroup: optionGroup_vue_vue_type_script_lang["default"]
+});
+const PsOption = withInstall.withNoopInstall(option_vue_vue_type_script_lang["default"]);
+const PsOptionGroup = withInstall.withNoopInstall(optionGroup_vue_vue_type_script_lang["default"]);
+
+exports.selectGroupKey = token.selectGroupKey;
+exports.selectKey = token.selectKey;
+exports.PsOption = PsOption;
+exports.PsOptionGroup = PsOptionGroup;
+exports.PsSelect = PsSelect;
+exports["default"] = PsSelect;
+//# sourceMappingURL=index.js.map

package/lib/packages/components/select/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../packages/components/select/index.ts"],"sourcesContent":["import { withInstall, withNoopInstall } from '@element-ps/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 PsSelect = withInstall(Select, {\n  Option,\n  OptionGroup,\n})\nexport default PsSelect\nexport const PsOption = withNoopInstall(Option)\nexport const PsOptionGroup = withNoopInstall(OptionGroup)\n\nexport * from './src/token'\n"],"names":["withInstall","Select","Option","OptionGroup","withNoopInstall"],"mappings":";;;;;;;;;;;;;MAMa,WAAWA,wBAAYC,4CAAQ;AAAA,UAC1CC;AAAA,eACAC;AAAA;MAGW,WAAWC,4BAAgBF;MAC3B,gBAAgBE,4BAAgBD;;;;;;;;;"}

package/lib/packages/components/select/src/option-group.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var optionGroup_vue_vue_type_script_lang = require('./option-group.vue_vue&type=script&lang.js');
+var optionGroup_vue_vue_type_template_id_072bbb70_lang = require('./option-group.vue_vue&type=template&id=072bbb70&lang.js');
+
+optionGroup_vue_vue_type_script_lang["default"].render = optionGroup_vue_vue_type_template_id_072bbb70_lang.render;
+optionGroup_vue_vue_type_script_lang["default"].__file = "packages/components/select/src/option-group.vue";
+
+exports["default"] = optionGroup_vue_vue_type_script_lang["default"];
+//# sourceMappingURL=option-group.js.map

package/lib/packages/components/select/src/option-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"option-group.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}

package/lib/packages/components/select/src/option-group.vue_vue&type=script&lang.js

@@ -0,0 +1,49 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var token = require('./token.js');
+
+var script = vue.defineComponent({
+  name: "PsOptionGroup",
+  componentName: "PsOptionGroup",
+  props: {
+    label: String,
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props) {
+    const visible = vue.ref(true);
+    const instance = vue.getCurrentInstance();
+    const children = vue.ref([]);
+    vue.provide(token.selectGroupKey, vue.reactive({
+      ...vue.toRefs(props)
+    }));
+    vue.onMounted(() => {
+      children.value = flattedChildren(instance.subTree);
+    });
+    const flattedChildren = (node) => {
+      const children2 = [];
+      if (Array.isArray(node.children)) {
+        node.children.forEach((child) => {
+          var _a;
+          if (child.type && child.type.name === "PsOption" && child.component && child.component.proxy) {
+            children2.push(child.component.proxy);
+          } else if ((_a = child.children) == null ? void 0 : _a.length) {
+            children2.push(...flattedChildren(child));
+          }
+        });
+      }
+      return children2;
+    };
+    return {
+      visible
+    };
+  }
+});
+
+exports["default"] = script;
+//# sourceMappingURL=option-group.vue_vue&type=script&lang.js.map

package/lib/packages/components/select/src/option-group.vue_vue&type=script&lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"option-group.vue_vue&type=script&lang.js","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: 'PsOptionGroup',\n  componentName: 'PsOptionGroup',\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    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 === 'PsOption' &&\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    return {\n      visible,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","ref","getCurrentInstance","selectGroupKey","reactive","toRefs"],"mappings":";;;;;;;AA0BA,aAAeA,oBAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,eAAe;AAAA,EACf,OAAO;AAAA,IACL,OAAO;AAAA,IACP,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA;AAAA;AAAA,EAGb,MAAM,OAAO;AACX,UAAM,UAAUC,QAAI;AACpB,UAAM,WAAWC;AACjB,UAAM,WAAWD,QAAI;AAErB,gBACEE,sBACAC,aAAS;AAAA,SACJC,WAAO;AAAA;AAId,kBAAU,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,YAAM,aAAN,mBAAgB,QAAQ;AACjC,sBAAS,KAAK,GAAG,gBAAgB;AAAA;AAAA;AAAA;AAIvC,aAAO;AAAA;AAGT,WAAO;AAAA,MACL;AAAA;AAAA;AAAA;;;;"}

package/lib/packages/components/select/src/option-group.vue_vue&type=template&id=072bbb70&lang.js

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+
+const _hoisted_1 = { class: "el-select-group__wrap" };
+const _hoisted_2 = { class: "el-select-group__title" };
+const _hoisted_3 = { class: "el-select-group" };
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return vue.withDirectives((vue.openBlock(), vue.createElementBlock("ul", _hoisted_1, [
+    vue.createElementVNode("li", _hoisted_2, vue.toDisplayString(_ctx.label), 1),
+    vue.createElementVNode("li", null, [
+      vue.createElementVNode("ul", _hoisted_3, [
+        vue.renderSlot(_ctx.$slots, "default")
+      ])
+    ])
+  ], 512)), [
+    [vue.vShow, _ctx.visible]
+  ]);
+}
+
+exports.render = render;
+//# sourceMappingURL=option-group.vue_vue&type=template&id=072bbb70&lang.js.map

package/lib/packages/components/select/src/option-group.vue_vue&type=template&id=072bbb70&lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"option-group.vue_vue&type=template&id=072bbb70&lang.js","sources":["../../../../../../../packages/components/select/src/option-group.vue?vue&type=template&id=072bbb70&lang.js"],"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: 'PsOptionGroup',\n  componentName: 'PsOptionGroup',\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    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 === 'PsOption' &&\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    return {\n      visible,\n    }\n  },\n})\n</script>\n"],"names":["_createElementBlock","_createElementVNode","_renderSlot"],"mappings":";;;;;;qBACuB,OAAM;qBACrB,OAAM;qBAEJ,OAAM;;8CAHdA,6BAAA;IACEC,6BAAA,gCAAsC;IACtCA;MACEA,6BAAA;QACEC;;;;gBAJM;;;;;;"}