@element-plus/nightly 0.0.20220121 → 0.0.20220125

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

@@ -2,11 +2,70 @@
 
 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');
+var vue = require('vue');
+var token = require('./token.js');
+var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.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";
+const _sfc_main = vue.defineComponent({
+  name: "ElOptionGroup",
+  componentName: "ElOptionGroup",
+  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)
+    }));
+    const select = vue.inject(token.selectKey);
+    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 === "ElOption" && 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;
+    };
+    const { groupQueryChange } = vue.toRaw(select);
+    vue.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 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]
+  ]);
+}
+var OptionGroup = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render]]);
 
-exports["default"] = optionGroup_vue_vue_type_script_lang["default"];
+exports["default"] = OptionGroup;
 //# sourceMappingURL=option-group.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"option-group.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}
+{"version":3,"file":"option-group.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: '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":["defineComponent","ref","getCurrentInstance","selectGroupKey","reactive","toRefs","inject","selectKey"],"mappings":";;;;;;;;AA0BA,MAAK,YAAaA,oBAAa;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,UAAUC,QAAI;AACpB,UAAM,WAAWC;AACjB,UAAM,WAAWD,QAAI;AAErB,gBACEE,sBACAC,aAAS;AAAA,SACJC,WAAO;AAAA;AAId,UAAM,SAASC,WAAOC;AAEtB,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;AAKA,iCAAoB,UAAU;AAAA,qBACrB,MAAM;AACf,sBAAS,KAAK,mBAAmB;AAAA;AAAA;AAAA;AAIvC;AAAO;AAGT;AACA,UAAM,kBAAkB;AACtB;AAAmE;AAGrE;AAAO;AACL;AAAA;AAAA;;qBA7EI,OAAM;;;SAFZ,gBAAmD;AAAR,2BAKtC;AAAA,2BAHH,MAEK;AAFL;AACe;;;;AAJA;;;;;;;;"}

package/lib/components/select/src/option.js

@@ -2,11 +2,86 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var option_vue_vue_type_script_lang = require('./option.vue_vue_type_script_lang.js');
-var option_vue_vue_type_template_id_2feb8304_lang = require('./option.vue_vue_type_template_id_2feb8304_lang.js');
+var vue = require('vue');
+var useOption = require('./useOption.js');
+var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
 
-option_vue_vue_type_script_lang["default"].render = option_vue_vue_type_template_id_2feb8304_lang.render;
-option_vue_vue_type_script_lang["default"].__file = "packages/components/select/src/option.vue";
+const _sfc_main = vue.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 = vue.reactive({
+      index: -1,
+      groupDisabled: false,
+      visible: true,
+      hitState: false,
+      hover: false
+    });
+    const { currentLabel, itemSelected, isDisabled, select, hoverItem } = useOption.useOption(props, states);
+    const { visible, hover } = vue.toRefs(states);
+    const vm = vue.getCurrentInstance().proxy;
+    const key = vm.value;
+    select.onOptionCreate(vm);
+    vue.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 vue.withDirectives((vue.openBlock(), vue.createElementBlock("li", {
+    class: vue.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] = vue.withModifiers((...args) => _ctx.selectOptionClick && _ctx.selectOptionClick(...args), ["stop"]))
+  }, [
+    vue.renderSlot(_ctx.$slots, "default", {}, () => [
+      vue.createElementVNode("span", null, vue.toDisplayString(_ctx.currentLabel), 1)
+    ])
+  ], 34)), [
+    [vue.vShow, _ctx.visible]
+  ]);
+}
+var Option = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render]]);
 
-exports["default"] = option_vue_vue_type_script_lang["default"];
+exports["default"] = Option;
 //# sourceMappingURL=option.js.map

package/lib/components/select/src/option.js.map

@@ -1 +1 @@
-{"version":3,"file":"option.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}
+{"version":3,"file":"option.js","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":["defineComponent","reactive","useOption","toRefs","getCurrentInstance","_withDirectives","_createElementBlock"],"mappings":";;;;;;;;AA6BA,MAAK,YAAaA,oBAAa;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,SAASC,aAAS;AAAA,MACtB,OAAO;AAAA,MACP,eAAe;AAAA,MACf,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OAAO;AAAA;AAGT,UAAM,EAAE,cAAc,cAAc,YAAY,QAAQ,cACtDC,oBAAU,OAAO;AAEnB,UAAM,EAAE,SAAS,UAAUC,WAAO;AAElC,UAAM,KAAKC,yBAAqB;AAChC,UAAM,MAAO,GAAoC;AACjD,WAAO,eAAe;AAEtB,wBAAgB,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;SAZEC,qCAACC,uBAA0B;AAAA,8BACN,6BAAY;AAAA,qBAAuB;AAAA,qBAAyB,KAAK;AAAA;;IAM1F,cAAK,yDAAO;AAAA;KAEb;AAAA,mBACE,aAA+B;AAAA;;WAXlB;AAAA;;;;;;;"}

package/lib/components/select/src/select-dropdown.js

@@ -2,11 +2,48 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var selectDropdown_vue_vue_type_script_lang = require('./select-dropdown.vue_vue_type_script_lang.js');
-var selectDropdown_vue_vue_type_template_id_46cf6eee_lang = require('./select-dropdown.vue_vue_type_template_id_46cf6eee_lang.js');
+var vue = require('vue');
+var resizeEvent = require('../../../utils/resize-event.js');
+var token = require('./token.js');
+var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
 
-selectDropdown_vue_vue_type_script_lang["default"].render = selectDropdown_vue_vue_type_template_id_46cf6eee_lang.render;
-selectDropdown_vue_vue_type_script_lang["default"].__file = "packages/components/select/src/select-dropdown.vue";
+const _sfc_main = vue.defineComponent({
+  name: "ElSelectDropdown",
+  componentName: "ElSelectDropdown",
+  setup() {
+    const select = vue.inject(token.selectKey);
+    const popperClass = vue.computed(() => select.props.popperClass);
+    const isMultiple = vue.computed(() => select.props.multiple);
+    const isFitInputWidth = vue.computed(() => select.props.fitInputWidth);
+    const minWidth = vue.ref("");
+    function updateMinWidth() {
+      var _a;
+      minWidth.value = `${(_a = select.selectWrapper) == null ? void 0 : _a.getBoundingClientRect().width}px`;
+    }
+    vue.onMounted(() => {
+      updateMinWidth();
+      resizeEvent.addResizeListener(select.selectWrapper, updateMinWidth);
+    });
+    vue.onBeforeUnmount(() => {
+      resizeEvent.removeResizeListener(select.selectWrapper, updateMinWidth);
+    });
+    return {
+      minWidth,
+      popperClass,
+      isMultiple,
+      isFitInputWidth
+    };
+  }
+});
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return vue.openBlock(), vue.createElementBlock("div", {
+    class: vue.normalizeClass(["el-select-dropdown", [{ "is-multiple": _ctx.isMultiple }, _ctx.popperClass]]),
+    style: vue.normalizeStyle({ [_ctx.isFitInputWidth ? "width" : "minWidth"]: _ctx.minWidth })
+  }, [
+    vue.renderSlot(_ctx.$slots, "default")
+  ], 6);
+}
+var ElSelectMenu = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render]]);
 
-exports["default"] = selectDropdown_vue_vue_type_script_lang["default"];
+exports["default"] = ElSelectMenu;
 //# sourceMappingURL=select-dropdown.js.map

package/lib/components/select/src/select-dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"select-dropdown.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}
+{"version":3,"file":"select-dropdown.js","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":["defineComponent","inject","selectKey","computed","ref"],"mappings":";;;;;;;;;AA0BA,MAAK,YAAaA,oBAAa;AAAA,EAC7B,MAAM;AAAA,EAEN,eAAe;AAAA,EAEf,QAAQ;AACN,UAAM,SAASC,WAAOC;AAGtB,UAAM,cAAcC,aAAS,MAAM,OAAO,MAAM;AAChD,UAAM,aAAaA,aAAS,MAAM,OAAO,MAAM;AAC/C,UAAM,kBAAkBA,aAAS,MAAM,OAAO,MAAM;AACpD,UAAM,WAAWC,QAAI;AAErB,8BAA0B;AACxB;AACgD;AAIlD;AAGE;AACA;AAEE;AAIJ;AACE;AAEE;AAIJ;AAAO;AACL,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;SAjEG,kCAAC;AAAoB,wDAEA;AAAkC;;AAE5D;;;;;;;;"}