element-plus 1.2.0-beta.3 → 1.2.0-beta.4

package/lib/components/select-v2/src/group-item.vue_vue_type_template_id_bef7365a_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"group-item.vue_vue_type_template_id_bef7365a_lang.js","sources":["../../../../../../packages/components/select-v2/src/group-item.vue?vue&type=template&id=bef7365a&lang.js"],"sourcesContent":["<template>\n  <div\n    v-if=\"item.isTitle\"\n    class=\"el-select-group__title\"\n    :style=\"[style, { lineHeight: `${height}px` }]\"\n  >\n    {{ item.label }}\n  </div>\n  <div v-else class=\"el-select-group__split\" :style=\"style\">\n    <span\n      class=\"el-select-group__split-dash\"\n      :style=\"{ top: `${height / 2}px` }\"\n    ></span>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\n\nexport default defineComponent({\n  props: {\n    item: {\n      type: Object,\n      required: true,\n    },\n    style: Object,\n    height: Number,\n  },\n})\n</script>\n"],"names":["_createElementBlock","_createElementVNode"],"mappings":";;;;;;;SAEU,UAAK,4BADbA;;IAEE,OAAM;AAAA,IACL,2BAAQ,6BAAwB;yBAE9B,UAAK,gCAEVA;;IAAY,OAAM;AAAA,IAA0B,0BAAO;;IACjDC;MACE,OAAM;AAAA,MACL,oCAAiB;;;;;;;"}

package/lib/components/select-v2/src/option-item.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var optionItem_vue_vue_type_script_lang = require('./option-item.vue_vue&type=script&lang.js');
-var optionItem_vue_vue_type_template_id_119b30a9_lang = require('./option-item.vue_vue&type=template&id=119b30a9&lang.js');
+var optionItem_vue_vue_type_script_lang = require('./option-item.vue_vue_type_script_lang.js');
+var optionItem_vue_vue_type_template_id_119b30a9_lang = require('./option-item.vue_vue_type_template_id_119b30a9_lang.js');
 
 optionItem_vue_vue_type_script_lang["default"].render = optionItem_vue_vue_type_template_id_119b30a9_lang.render;
 optionItem_vue_vue_type_script_lang["default"].__file = "packages/components/select-v2/src/option-item.vue";

package/lib/components/select-v2/src/option-item.vue.d.ts

@@ -25,9 +25,9 @@ declare const _default: import("vue").DefineComponent<{
     hovering: boolean;
     selected: boolean;
 } & {
+    index?: number | undefined;
     data?: unknown[] | undefined;
     style?: Record<string, any> | undefined;
-    index?: number | undefined;
     item?: Record<string, any> | undefined;
 }> & {
     onSelect?: ((...args: any[]) => any) | undefined;

package/lib/components/select-v2/src/option-item.vue_vue_type_script_lang.js

@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var useOption = require('./useOption.js');
+var defaults = require('./defaults.js');
+
+var script = vue.defineComponent({
+  props: defaults.OptionProps,
+  emits: ["select", "hover"],
+  setup(props, { emit }) {
+    const { hoverItem, selectOptionClick } = useOption.useOption(props, { emit });
+    return {
+      hoverItem,
+      selectOptionClick
+    };
+  }
+});
+
+exports["default"] = script;
+//# sourceMappingURL=option-item.vue_vue_type_script_lang.js.map

package/lib/components/select-v2/src/option-item.vue_vue_type_script_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"option-item.vue_vue_type_script_lang.js","sources":["../../../../../../packages/components/select-v2/src/option-item.vue"],"sourcesContent":["<template>\n  <li\n    :aria-selected=\"selected\"\n    :style=\"style\"\n    :class=\"{\n      'el-select-dropdown__option-item': true,\n      'is-selected': selected,\n      'is-disabled': disabled,\n      'is-created': created,\n      hover: hovering,\n    }\"\n    @mouseenter=\"hoverItem\"\n    @click.stop=\"selectOptionClick\"\n  >\n    <slot :item=\"item\" :index=\"index\" :disabled=\"disabled\">\n      <span>{{ item.label }}</span>\n    </slot>\n  </li>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { useOption } from './useOption'\nimport { OptionProps } from './defaults'\nexport default defineComponent({\n  props: OptionProps,\n  emits: ['select', 'hover'],\n  setup(props, { emit }) {\n    const { hoverItem, selectOptionClick } = useOption(props, { emit })\n    return {\n      hoverItem,\n      selectOptionClick,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","OptionProps","useOption"],"mappings":";;;;;;;;AAwBA,aAAeA,oBAAgB;AAAA,EAC7B,OAAOC;AAAA,EACP,OAAO,CAAC,UAAU;AAAA,EAClB,MAAM,OAAO,EAAE,QAAQ;AACrB,UAAM,EAAE,WAAW,sBAAsBC,oBAAU,OAAO,EAAE;AAC5D,WAAO;AAAA,MACL;AAAA,MACA;AAAA;AAAA;AAAA;;;;"}

package/lib/components/select-v2/src/option-item.vue_vue_type_template_id_119b30a9_lang.js

@@ -0,0 +1,33 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+
+const _hoisted_1 = ["aria-selected"];
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return vue.openBlock(), vue.createElementBlock("li", {
+    "aria-selected": _ctx.selected,
+    style: vue.normalizeStyle(_ctx.style),
+    class: vue.normalizeClass({
+      "el-select-dropdown__option-item": true,
+      "is-selected": _ctx.selected,
+      "is-disabled": _ctx.disabled,
+      "is-created": _ctx.created,
+      hover: _ctx.hovering
+    }),
+    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", {
+      item: _ctx.item,
+      index: _ctx.index,
+      disabled: _ctx.disabled
+    }, () => [
+      vue.createElementVNode("span", null, vue.toDisplayString(_ctx.item.label), 1)
+    ])
+  ], 46, _hoisted_1);
+}
+
+exports.render = render;
+//# sourceMappingURL=option-item.vue_vue_type_template_id_119b30a9_lang.js.map

package/lib/components/select-v2/src/option-item.vue_vue_type_template_id_119b30a9_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"option-item.vue_vue_type_template_id_119b30a9_lang.js","sources":["../../../../../../packages/components/select-v2/src/option-item.vue?vue&type=template&id=119b30a9&lang.js"],"sourcesContent":["<template>\n  <li\n    :aria-selected=\"selected\"\n    :style=\"style\"\n    :class=\"{\n      'el-select-dropdown__option-item': true,\n      'is-selected': selected,\n      'is-disabled': disabled,\n      'is-created': created,\n      hover: hovering,\n    }\"\n    @mouseenter=\"hoverItem\"\n    @click.stop=\"selectOptionClick\"\n  >\n    <slot :item=\"item\" :index=\"index\" :disabled=\"disabled\">\n      <span>{{ item.label }}</span>\n    </slot>\n  </li>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { useOption } from './useOption'\nimport { OptionProps } from './defaults'\nexport default defineComponent({\n  props: OptionProps,\n  emits: ['select', 'hover'],\n  setup(props, { emit }) {\n    const { hoverItem, selectOptionClick } = useOption(props, { emit })\n    return {\n      hoverItem,\n      selectOptionClick,\n    }\n  },\n})\n</script>\n"],"names":["_createElementBlock","_renderSlot","_createElementVNode"],"mappings":";;;;;;;;0BACEA;IACG,iBAAe;IACf,0BAAO;IACP;;;;;;;IAOA,qDAAY;IACZ,kEAAY;;IAEbC;MAAO,MAAM;MAAO,OAAO;MAAQ,UAAU;OAA7C;MACEC,yDAAS,UAAK;;;;;;;"}

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

@@ -2,7 +2,7 @@
 
 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_script_lang = require('./select-dropdown.vue_vue_type_script_lang.js');
 
 selectDropdown_vue_vue_type_script_lang["default"].__file = "packages/components/select-v2/src/select-dropdown.vue";
 

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

@@ -0,0 +1,182 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var util = require('../../../utils/util.js');
+require('../../virtual-list/index.js');
+require('./group-item.js');
+require('./option-item.js');
+var token = require('./token.js');
+var shared = require('@vue/shared');
+var fixedSizeList = require('../../virtual-list/src/components/fixed-size-list.js');
+var dynamicSizeList = require('../../virtual-list/src/components/dynamic-size-list.js');
+var groupItem_vue_vue_type_script_lang = require('./group-item.vue_vue_type_script_lang.js');
+var optionItem_vue_vue_type_script_lang = require('./option-item.vue_vue_type_script_lang.js');
+
+var script = vue.defineComponent({
+  name: "ElSelectDropdown",
+  props: {
+    data: Array,
+    hoveringIndex: Number,
+    width: Number
+  },
+  setup(props) {
+    const select = vue.inject(token.selectV2InjectionKey);
+    const cachedHeights = vue.ref([]);
+    const listRef = vue.ref(null);
+    const isSized = vue.computed(() => util.isUndefined(select.props.estimatedOptionHeight));
+    const listProps = vue.computed(() => {
+      if (isSized.value) {
+        return {
+          itemSize: select.props.itemHeight
+        };
+      }
+      return {
+        estimatedSize: select.props.estimatedOptionHeight,
+        itemSize: (idx) => cachedHeights.value[idx]
+      };
+    });
+    const contains = (arr = [], target) => {
+      const {
+        props: { valueKey }
+      } = select;
+      if (!shared.isObject(target)) {
+        return arr.includes(target);
+      }
+      return arr && arr.some((item) => {
+        return util.getValueByPath(item, valueKey) === util.getValueByPath(target, valueKey);
+      });
+    };
+    const isEqual = (selected, target) => {
+      if (!shared.isObject(target)) {
+        return selected === target;
+      } else {
+        const { valueKey } = select.props;
+        return util.getValueByPath(selected, valueKey) === util.getValueByPath(target, valueKey);
+      }
+    };
+    const isItemSelected = (modelValue, target) => {
+      if (select.props.multiple) {
+        return contains(modelValue, target.value);
+      }
+      return isEqual(modelValue, target.value);
+    };
+    const isItemDisabled = (modelValue, selected) => {
+      const { disabled, multiple, multipleLimit } = select.props;
+      return disabled || !selected && (multiple ? multipleLimit > 0 && modelValue.length >= multipleLimit : false);
+    };
+    const isItemHovering = (target) => props.hoveringIndex === target;
+    const scrollToItem = (index) => {
+      const list = listRef.value;
+      if (list) {
+        list.scrollToItem(index);
+      }
+    };
+    const resetScrollTop = () => {
+      const list = listRef.value;
+      if (list) {
+        list.resetScrollTop();
+      }
+    };
+    return {
+      select,
+      listProps,
+      listRef,
+      isSized,
+      isItemDisabled,
+      isItemHovering,
+      isItemSelected,
+      scrollToItem,
+      resetScrollTop
+    };
+  },
+  render(_ctx, _cache) {
+    var _a;
+    const {
+      $slots,
+      data,
+      listProps,
+      select,
+      isSized,
+      width,
+      isItemDisabled,
+      isItemHovering,
+      isItemSelected
+    } = _ctx;
+    const Comp = isSized ? fixedSizeList["default"] : dynamicSizeList["default"];
+    const {
+      props: selectProps,
+      onSelect,
+      onHover,
+      onKeyboardNavigate,
+      onKeyboardSelect
+    } = select;
+    const { height, modelValue, multiple } = selectProps;
+    if (data.length === 0) {
+      return vue.h("div", {
+        class: "el-select-dropdown",
+        style: {
+          width: `${width}px`
+        }
+      }, (_a = $slots.empty) == null ? void 0 : _a.call($slots));
+    }
+    const ListItem = vue.withCtx((scoped) => {
+      const { index, data: data2 } = scoped;
+      const item = data2[index];
+      if (data2[index].type === "Group") {
+        return vue.h(groupItem_vue_vue_type_script_lang["default"], {
+          item,
+          style: scoped.style,
+          height: isSized ? listProps.itemSize : listProps.estimatedSize
+        });
+      }
+      const selected = isItemSelected(modelValue, item);
+      const itemDisabled = isItemDisabled(modelValue, selected);
+      return vue.h(optionItem_vue_vue_type_script_lang["default"], {
+        ...scoped,
+        selected,
+        disabled: item.disabled || itemDisabled,
+        created: !!item.created,
+        hovering: isItemHovering(index),
+        item,
+        onSelect,
+        onHover
+      }, {
+        default: vue.withCtx((props) => {
+          return vue.renderSlot($slots, "default", props, () => [
+            vue.h("span", item.label)
+          ]);
+        })
+      });
+    });
+    const List = vue.h(Comp, {
+      ref: "listRef",
+      className: "el-select-dropdown__list",
+      data,
+      height,
+      width,
+      total: data.length,
+      scrollbarAlwaysOn: selectProps.scrollbarAlwaysOn,
+      onKeydown: [
+        _cache[1] || (_cache[1] = vue.withKeys(vue.withModifiers(() => onKeyboardNavigate("forward"), ["stop", "prevent"]), ["down"])),
+        _cache[2] || (_cache[2] = vue.withKeys(vue.withModifiers(() => onKeyboardNavigate("backward"), ["stop", "prevent"]), ["up"])),
+        _cache[3] || (_cache[3] = vue.withKeys(vue.withModifiers(onKeyboardSelect, ["stop", "prevent"]), ["enter"])),
+        _cache[4] || (_cache[4] = vue.withKeys(vue.withModifiers(() => select.expanded = false, ["stop", "prevent"]), ["esc"])),
+        _cache[5] || (_cache[5] = vue.withKeys(() => select.expanded = false, ["tab"]))
+      ],
+      ...listProps
+    }, {
+      default: ListItem
+    });
+    return vue.h("div", {
+      class: {
+        "is-multiple": multiple,
+        "el-select-dropdown": true
+      }
+    }, [List]);
+  }
+});
+
+exports["default"] = script;
+//# sourceMappingURL=select-dropdown.vue_vue_type_script_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"select-dropdown.vue_vue_type_script_lang.js","sources":["../../../../../../packages/components/select-v2/src/select-dropdown.vue"],"sourcesContent":["<script lang=\"ts\">\nimport {\n  defineComponent,\n  computed,\n  inject,\n  ref,\n  renderSlot,\n  h,\n  withCtx,\n  withKeys,\n  withModifiers,\n} from 'vue'\nimport { getValueByPath, isUndefined, isObject } from '@element-plus/utils/util'\n// import { addResizeListener, removeResizeListener, ResizableElement } from '@element-plus/utils/resize-event'\nimport {\n  FixedSizeList,\n  DynamicSizeList,\n} from '@element-plus/components/virtual-list'\nimport GroupItem from './group-item.vue'\nimport OptionItem from './option-item.vue'\n\nimport { selectV2InjectionKey } from './token'\n\nimport type { ItemProps } from '@element-plus/components/virtual-list'\nimport type { OptionItemProps, Option } from './select.types'\n\nexport default defineComponent({\n  name: 'ElSelectDropdown',\n\n  props: {\n    data: Array,\n    hoveringIndex: Number,\n    width: Number,\n  },\n  setup(props) {\n    const select = inject(selectV2InjectionKey) as any\n    const cachedHeights = ref<Array<number>>([])\n\n    const listRef = ref(null)\n\n    const isSized = computed(() =>\n      isUndefined(select.props.estimatedOptionHeight)\n    )\n    const listProps = computed(() => {\n      if (isSized.value) {\n        return {\n          itemSize: select.props.itemHeight,\n        }\n      }\n\n      return {\n        estimatedSize: select.props.estimatedOptionHeight,\n        itemSize: (idx: number) => cachedHeights.value[idx],\n      }\n    })\n\n    const contains = (arr: Array<any> = [], target: any) => {\n      const {\n        props: { valueKey },\n      } = select\n\n      if (!isObject(target)) {\n        return arr.includes(target)\n      }\n\n      return (\n        arr &&\n        arr.some((item) => {\n          return (\n            getValueByPath(item, valueKey) === getValueByPath(target, valueKey)\n          )\n        })\n      )\n    }\n    const isEqual = (selected: unknown, target: unknown) => {\n      if (!isObject(target)) {\n        return selected === target\n      } else {\n        const { valueKey } = select.props\n        return (\n          getValueByPath(selected, valueKey) ===\n          getValueByPath(target, valueKey)\n        )\n      }\n    }\n\n    const isItemSelected = (modelValue: any[] | any, target: Option) => {\n      if (select.props.multiple) {\n        return contains(modelValue, target.value)\n      }\n      return isEqual(modelValue, target.value)\n    }\n\n    const isItemDisabled = (modelValue: any[] | any, selected: boolean) => {\n      const { disabled, multiple, multipleLimit } = select.props\n      return (\n        disabled ||\n        (!selected &&\n          (multiple\n            ? multipleLimit > 0 && modelValue.length >= multipleLimit\n            : false))\n      )\n    }\n\n    const isItemHovering = (target: number) => props.hoveringIndex === target\n\n    const scrollToItem = (index: number) => {\n      const list = listRef.value as any\n      if (list) {\n        list.scrollToItem(index)\n      }\n    }\n\n    const resetScrollTop = () => {\n      const list = listRef.value as any\n      if (list) {\n        list.resetScrollTop()\n      }\n    }\n\n    // computed\n    return {\n      select,\n      listProps,\n      listRef,\n      isSized,\n\n      isItemDisabled,\n      isItemHovering,\n      isItemSelected,\n\n      scrollToItem,\n      resetScrollTop,\n    }\n  },\n\n  render(_ctx, _cache) {\n    const {\n      $slots,\n\n      data,\n      listProps,\n      select,\n      isSized,\n      width,\n      // methods\n      isItemDisabled,\n      isItemHovering,\n      isItemSelected,\n    } = _ctx\n\n    const Comp = isSized ? FixedSizeList : DynamicSizeList\n\n    const {\n      props: selectProps,\n      onSelect,\n      onHover,\n      onKeyboardNavigate,\n      onKeyboardSelect,\n    } = select\n    const { height, modelValue, multiple } = selectProps\n\n    if (data.length === 0) {\n      return h(\n        'div',\n        {\n          class: 'el-select-dropdown',\n          style: {\n            width: `${width}px`,\n          },\n        },\n        $slots.empty?.()\n      )\n    }\n\n    const ListItem = withCtx((scoped: ItemProps<any>) => {\n      const { index, data } = scoped\n      const item = data[index]\n      // render group item which is not selectable.\n      if (data[index].type === 'Group') {\n        return h(GroupItem, {\n          item,\n          style: scoped.style,\n          height: isSized ? listProps.itemSize : listProps.estimatedSize,\n        })\n      }\n\n      const selected = isItemSelected(modelValue, item)\n      const itemDisabled = isItemDisabled(modelValue, selected)\n      // render option item which is selectable\n      return h(\n        OptionItem,\n        {\n          ...scoped,\n          selected,\n          disabled: item.disabled || itemDisabled,\n          created: !!item.created,\n          hovering: isItemHovering(index),\n          item,\n          onSelect,\n          onHover,\n        },\n        {\n          default: withCtx((props: OptionItemProps) => {\n            return renderSlot($slots, 'default', props, () => [\n              h('span', item.label),\n            ])\n          }),\n        }\n      )\n    })\n\n    const List = h(\n      Comp,\n      {\n        ref: 'listRef', // forwarded ref so that select can access the list directly\n        className: 'el-select-dropdown__list',\n        data,\n        height,\n        width,\n        total: data.length,\n        scrollbarAlwaysOn: selectProps.scrollbarAlwaysOn,\n        onKeydown: [\n          _cache[1] ||\n            (_cache[1] = withKeys(\n              withModifiers(\n                () => onKeyboardNavigate('forward'),\n                ['stop', 'prevent']\n              ),\n              ['down']\n            )),\n          _cache[2] ||\n            (_cache[2] = withKeys(\n              withModifiers(\n                () => onKeyboardNavigate('backward'),\n                ['stop', 'prevent']\n              ),\n              ['up']\n            )),\n          _cache[3] ||\n            (_cache[3] = withKeys(\n              withModifiers(onKeyboardSelect, ['stop', 'prevent']),\n              ['enter']\n            )),\n\n          _cache[4] ||\n            (_cache[4] = withKeys(\n              withModifiers(\n                () => (select.expanded = false),\n                ['stop', 'prevent']\n              ),\n              ['esc']\n            )),\n          _cache[5] ||\n            (_cache[5] = withKeys(() => (select.expanded = false), ['tab'])),\n          // _cache[6] || (_cache[6] = () => {\n          //   console.log(11)\n          // }),\n        ],\n        ...listProps,\n      },\n      {\n        default: ListItem,\n      }\n    )\n    return h(\n      'div',\n      {\n        class: {\n          'is-multiple': multiple,\n          'el-select-dropdown': true,\n        },\n      },\n      [List]\n    )\n  },\n})\n</script>\n"],"names":["defineComponent","inject","selectV2InjectionKey","ref","computed","isUndefined","isObject","getValueByPath","FixedSizeList","DynamicSizeList","h","withCtx","GroupItem","OptionItem","renderSlot","withKeys","withModifiers"],"mappings":"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"}

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

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var select_vue_vue_type_script_lang = require('./select.vue_vue&type=script&lang.js');
-var select_vue_vue_type_template_id_13e598a4_lang = require('./select.vue_vue&type=template&id=13e598a4&lang.js');
+var select_vue_vue_type_script_lang = require('./select.vue_vue_type_script_lang.js');
+var select_vue_vue_type_template_id_13e598a4_lang = require('./select.vue_vue_type_template_id_13e598a4_lang.js');
 
 select_vue_vue_type_script_lang["default"].render = select_vue_vue_type_template_id_13e598a4_lang.render;
 select_vue_vue_type_script_lang["default"].__file = "packages/components/select-v2/src/select.vue";

package/lib/components/select-v2/src/select.vue.d.ts

@@ -87,6 +87,7 @@ declare const _default: import("vue").DefineComponent<{
     inputWrapperStyle: import("vue").ComputedRef<import("vue").CSSProperties>;
     popperSize: import("vue").Ref<number>;
     dropdownMenuVisible: import("vue").ComputedRef<boolean>;
+    hasModelValue: import("vue").ComputedRef<boolean>;
     shouldShowPlaceholder: import("vue").ComputedRef<boolean>;
     selectDisabled: import("vue").ComputedRef<boolean | undefined>;
     selectSize: import("vue").ComputedRef<any>;

package/lib/components/select-v2/src/select.vue_vue_type_script_lang.js

@@ -0,0 +1,54 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+require('../../../directives/index.js');
+var index$1 = require('../../popper/index.js');
+var index = require('../../tag/index.js');
+var index$2 = require('../../icon/index.js');
+var constants = require('../../../utils/constants.js');
+require('./select-dropdown.js');
+var useSelect = require('./useSelect.js');
+var token = require('./token.js');
+var defaults = require('./defaults.js');
+var selectDropdown_vue_vue_type_script_lang = require('./select-dropdown.vue_vue_type_script_lang.js');
+var index$3 = require('../../../directives/click-outside/index.js');
+
+var script = vue.defineComponent({
+  name: "ElSelectV2",
+  components: {
+    ElSelectMenu: selectDropdown_vue_vue_type_script_lang["default"],
+    ElTag: index.ElTag,
+    ElPopper: index$1["default"],
+    ElIcon: index$2.ElIcon
+  },
+  directives: { ClickOutside: index$3["default"], ModelText: vue.vModelText },
+  props: defaults.SelectProps,
+  emits: [
+    constants.UPDATE_MODEL_EVENT,
+    constants.CHANGE_EVENT,
+    "remove-tag",
+    "clear",
+    "visible-change",
+    "focus",
+    "blur"
+  ],
+  setup(props, { emit }) {
+    const API = useSelect["default"](props, emit);
+    vue.provide(token.selectV2InjectionKey, {
+      props: vue.reactive({
+        ...vue.toRefs(props),
+        height: API.popupHeight
+      }),
+      onSelect: API.onSelect,
+      onHover: API.onHover,
+      onKeyboardNavigate: API.onKeyboardNavigate,
+      onKeyboardSelect: API.onKeyboardSelect
+    });
+    return API;
+  }
+});
+
+exports["default"] = script;
+//# sourceMappingURL=select.vue_vue_type_script_lang.js.map

package/lib/components/select-v2/src/select.vue_vue_type_script_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.vue_vue_type_script_lang.js","sources":["../../../../../../packages/components/select-v2/src/select.vue"],"sourcesContent":["<template>\n  <div\n    ref=\"selectRef\"\n    v-click-outside:[popperRef]=\"handleClickOutside\"\n    :class=\"[selectSize ? 'el-select-v2--' + selectSize : '']\"\n    class=\"el-select-v2\"\n    @click.stop=\"toggleMenu\"\n    @mouseenter=\"states.comboBoxHovering = true\"\n    @mouseleave=\"states.comboBoxHovering = false\"\n  >\n    <el-popper\n      ref=\"popper\"\n      v-model:visible=\"dropdownMenuVisible\"\n      :append-to-body=\"popperAppendToBody\"\n      :popper-class=\"`el-select-v2__popper ${popperClass}`\"\n      :gpu-acceleration=\"false\"\n      :stop-popper-mouse-event=\"false\"\n      :popper-options=\"popperOptions\"\n      :fallback-placements=\"['bottom-start', 'top-start', 'right', 'left']\"\n      :effect=\"Effect.LIGHT\"\n      manual-mode\n      placement=\"bottom-start\"\n      pure\n      transition=\"el-zoom-in-top\"\n      trigger=\"click\"\n      @before-enter=\"handleMenuEnter\"\n      @after-leave=\"states.inputValue = states.displayInputValue\"\n    >\n      <template #trigger>\n        <div\n          ref=\"selectionRef\"\n          class=\"el-select-v2__wrapper\"\n          :class=\"{\n            'is-focused': states.isComposing,\n            'is-hovering': states.comboBoxHovering,\n            'is-filterable': filterable,\n            'is-disabled': disabled,\n          }\"\n        >\n          <div v-if=\"$slots.prefix\">\n            <slot name=\"prefix\"></slot>\n          </div>\n          <div v-if=\"multiple\" class=\"el-select-v2__selection\">\n            <template v-if=\"collapseTags && modelValue.length > 0\">\n              <div class=\"el-select-v2__selected-item\">\n                <el-tag\n                  :closable=\"\n                    !selectDisabled && !states.cachedOptions[0]?.disable\n                  \"\n                  :size=\"collapseTagSize\"\n                  type=\"info\"\n                  disable-transitions\n                  @close=\"deleteTag($event, states.cachedOptions[0])\"\n                >\n                  <span\n                    class=\"el-select-v2__tags-text\"\n                    :style=\"{\n                      maxWidth: `${tagMaxWidth}px`,\n                    }\"\n                    >{{ states.cachedOptions[0]?.label }}</span\n                  >\n                </el-tag>\n                <el-tag\n                  v-if=\"modelValue.length > 1\"\n                  :closable=\"false\"\n                  :size=\"collapseTagSize\"\n                  type=\"info\"\n                  disable-transitions\n                >\n                  <span\n                    class=\"el-select-v2__tags-text\"\n                    :style=\"{\n                      maxWidth: `${tagMaxWidth}px`,\n                    }\"\n                    >+ {{ modelValue.length - 1 }}</span\n                  >\n                </el-tag>\n              </div>\n            </template>\n\n            <template v-else>\n              <div\n                v-for=\"(selected, idx) in states.cachedOptions\"\n                :key=\"idx\"\n                class=\"el-select-v2__selected-item\"\n              >\n                <el-tag\n                  :key=\"getValueKey(selected)\"\n                  :closable=\"!selectDisabled && !selected.disabled\"\n                  :size=\"collapseTagSize\"\n                  type=\"info\"\n                  disable-transitions\n                  @close=\"deleteTag($event, selected)\"\n                >\n                  <span\n                    class=\"el-select-v2__tags-text\"\n                    :style=\"{\n                      maxWidth: `${tagMaxWidth}px`,\n                    }\"\n                    >{{ getLabel(selected) }}</span\n                  >\n                </el-tag>\n              </div>\n            </template>\n            <div\n              class=\"el-select-v2__selected-item el-select-v2__input-wrapper\"\n              :style=\"inputWrapperStyle\"\n            >\n              <input\n                :id=\"id\"\n                ref=\"inputRef\"\n                v-model-text=\"states.displayInputValue\"\n                :autocomplete=\"autocomplete\"\n                aria-autocomplete=\"list\"\n                aria-haspopup=\"listbox\"\n                autocapitalize=\"off\"\n                :aria-expanded=\"expanded\"\n                :aria-labelledby=\"label\"\n                class=\"el-select-v2__combobox-input\"\n                :class=\"[selectSize ? `is-${selectSize}` : '']\"\n                :disabled=\"disabled\"\n                role=\"combobox\"\n                :readonly=\"!filterable\"\n                spellcheck=\"false\"\n                type=\"text\"\n                :name=\"name\"\n                :unselectable=\"expanded ? 'on' : undefined\"\n                @update:modelValue=\"onUpdateInputValue\"\n                @focus=\"handleFocus\"\n                @input=\"onInput\"\n                @compositionstart=\"handleCompositionStart\"\n                @compositionupdate=\"handleCompositionUpdate\"\n                @compositionend=\"handleCompositionEnd\"\n                @keydown.up.stop.prevent=\"onKeyboardNavigate('backward')\"\n                @keydown.down.stop.prevent=\"onKeyboardNavigate('forward')\"\n                @keydown.enter.stop.prevent=\"onKeyboardSelect\"\n                @keydown.esc.stop.prevent=\"handleEsc\"\n                @keydown.delete.stop=\"handleDel\"\n              />\n              <span\n                v-if=\"filterable\"\n                ref=\"calculatorRef\"\n                aria-hidden=\"true\"\n                class=\"el-select-v2__input-calculator\"\n                v-text=\"states.displayInputValue\"\n              >\n              </span>\n            </div>\n          </div>\n          <template v-else>\n            <div\n              class=\"el-select-v2__selected-item el-select-v2__input-wrapper\"\n            >\n              <input\n                :id=\"id\"\n                ref=\"inputRef\"\n                v-model-text=\"states.displayInputValue\"\n                aria-autocomplete=\"list\"\n                aria-haspopup=\"listbox\"\n                :aria-labelledby=\"label\"\n                :aria-expanded=\"expanded\"\n                autocapitalize=\"off\"\n                :autocomplete=\"autocomplete\"\n                class=\"el-select-v2__combobox-input\"\n                :disabled=\"disabled\"\n                :name=\"name\"\n                role=\"combobox\"\n                :readonly=\"!filterable\"\n                spellcheck=\"false\"\n                type=\"text\"\n                :unselectable=\"expanded ? 'on' : undefined\"\n                @compositionstart=\"handleCompositionStart\"\n                @compositionupdate=\"handleCompositionUpdate\"\n                @compositionend=\"handleCompositionEnd\"\n                @focus=\"handleFocus\"\n                @input=\"onInput\"\n                @keydown.up.stop.prevent=\"onKeyboardNavigate('backward')\"\n                @keydown.down.stop.prevent=\"onKeyboardNavigate('forward')\"\n                @keydown.enter.stop.prevent=\"onKeyboardSelect\"\n                @keydown.esc.stop.prevent=\"handleEsc\"\n                @update:modelValue=\"onUpdateInputValue\"\n              />\n            </div>\n            <span\n              v-if=\"filterable\"\n              ref=\"calculatorRef\"\n              aria-hidden=\"true\"\n              class=\"el-select-v2__selected-item el-select-v2__input-calculator\"\n              v-text=\"states.displayInputValue\"\n            >\n            </span>\n          </template>\n          <span\n            v-if=\"shouldShowPlaceholder\"\n            :class=\"{\n              'el-select-v2__placeholder': true,\n              'is-transparent':\n                states.isComposing ||\n                (placeholder && multiple\n                  ? modelValue.length === 0\n                  : !hasModelValue),\n            }\"\n          >\n            {{ currentPlaceholder }}\n          </span>\n          <span class=\"el-select-v2__suffix\">\n            <el-icon\n              v-if=\"iconComponent\"\n              v-show=\"!showClearBtn\"\n              :class=\"['el-select-v2__caret', 'el-input__icon', iconReverse]\"\n            >\n              <component :is=\"iconComponent\" />\n            </el-icon>\n            <el-icon\n              v-if=\"showClearBtn && clearIcon\"\n              class=\"el-select-v2__caret el-input__icon\"\n              @click.prevent.stop=\"handleClear\"\n            >\n              <component :is=\"clearIcon\" />\n            </el-icon>\n          </span>\n        </div>\n      </template>\n      <template #default>\n        <el-select-menu\n          ref=\"menuRef\"\n          :data=\"filteredOptions\"\n          :width=\"popperSize\"\n          :hovering-index=\"states.hoveringIndex\"\n          :scrollbar-always-on=\"scrollbarAlwaysOn\"\n        >\n          <template #default=\"scope\">\n            <slot v-bind=\"scope\"></slot>\n          </template>\n          <template #empty>\n            <slot name=\"empty\">\n              <p class=\"el-select-v2__empty\">\n                {{ emptyText ? emptyText : '' }}\n              </p>\n            </slot>\n          </template>\n        </el-select-menu>\n      </template>\n    </el-popper>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, provide, toRefs, reactive, vModelText } from 'vue'\nimport { ClickOutside } from '@element-plus/directives'\nimport ElPopper from '@element-plus/components/popper'\nimport ElTag from '@element-plus/components/tag'\nimport ElIcon from '@element-plus/components/icon'\nimport { UPDATE_MODEL_EVENT, CHANGE_EVENT } from '@element-plus/utils/constants'\nimport ElSelectMenu from './select-dropdown.vue'\nimport useSelect from './useSelect'\nimport { selectV2InjectionKey } from './token'\nimport { SelectProps } from './defaults'\nexport default defineComponent({\n  name: 'ElSelectV2',\n  components: {\n    ElSelectMenu,\n    ElTag,\n    ElPopper,\n    ElIcon,\n  },\n  directives: { ClickOutside, ModelText: vModelText },\n  props: SelectProps,\n  emits: [\n    UPDATE_MODEL_EVENT,\n    CHANGE_EVENT,\n    'remove-tag',\n    'clear',\n    'visible-change',\n    'focus',\n    'blur',\n  ],\n\n  setup(props, { emit }) {\n    const API = useSelect(props, emit)\n    // TODO, remove the any cast to align the actual API.\n    provide(selectV2InjectionKey, {\n      props: reactive({\n        ...toRefs(props),\n        height: API.popupHeight,\n      }),\n      onSelect: API.onSelect,\n      onHover: API.onHover,\n      onKeyboardNavigate: API.onKeyboardNavigate,\n      onKeyboardSelect: API.onKeyboardSelect,\n    } as any)\n\n    return API\n  },\n})\n</script>\n"],"names":["defineComponent","ElSelectMenu","ElTag","ElPopper","ElIcon","ClickOutside","vModelText","SelectProps","UPDATE_MODEL_EVENT","CHANGE_EVENT","useSelect","selectV2InjectionKey","reactive","toRefs"],"mappings":";;;;;;;;;;;;;;;;;AAkQA,aAAeA,oBAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,kBACVC;AAAA,WACAC;AAAA,cACAC;AAAA,YACAC;AAAA;AAAA,EAEF,YAAY,gBAAEC,oBAAc,WAAWC;AAAA,EACvC,OAAOC;AAAA,EACP,OAAO;AAAA,IACLC;AAAA,IACAC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,EAGF,MAAM,OAAO,EAAE,QAAQ;AACrB,UAAM,MAAMC,qBAAU,OAAO;AAE7B,gBAAQC,4BAAsB;AAAA,MAC5B,OAAOC,aAAS;AAAA,WACXC,WAAO;AAAA,QACV,QAAQ,IAAI;AAAA;AAAA,MAEd,UAAU,IAAI;AAAA,MACd,SAAS,IAAI;AAAA,MACb,oBAAoB,IAAI;AAAA,MACxB,kBAAkB,IAAI;AAAA;AAGxB,WAAO;AAAA;AAAA;;;;"}