npm - element-ps - Versions diffs - 1.0.16 → 1.0.17 - Mend

element-ps 1.0.16 → 1.0.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (176) hide show

package/lib/packages/components/select-v2/src/select.vue_vue&type=script&lang.js.map CHANGED Viewed

	@@ -1 +1 @@
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 :class=\"[selectSize ? 'el-select-v2--' + selectSize : '']\"\n class=\"el-select-v2\"\n >\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 <ps-tag\n :closable=\"!selectDisabled && !states.cachedOptions[0]?.disable\"\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 >{{ states.cachedOptions[0].label }}</span\n >\n </ps-tag>\n <ps-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 </ps-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 <ps-tag\n :key=\"getValueKey(selected)\"\n :closable=\"!selectDisabled && !selected.disabled\"\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 >{{ getLabel(selected) }}</span\n >\n </ps-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 :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 />\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 class=\"el-select-v2__selected-item el-select-v2__input-wrapper\">\n <input\n :id=\"id\"\n ref=\"inputRef\"\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 />\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 ></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 ? ~~modelValue~~.length === 0 : !~~modelValue~~),\n }\"\n >{{ currentPlaceholder }}</span\n >\n <span class=\"el-select-v2__suffix\">\n <ps-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 </ps-icon>\n <ps-icon\n v-if=\"showClearBtn && clearIcon\"\n class=\"el-select-v2__caret el-input__icon\"\n >\n <component :is=\"clearIcon\" />\n </ps-icon>\n </span>\n </div>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, provide, toRefs, reactive } from 'vue'\nimport PsTag from '@element-ps/components/tag'\nimport useSelect from './useSelect'\nimport { selectV2InjectionKey } from './token'\nimport { SelectProps } from './defaults'\nimport PsIcon from '@element-ps/components/icon'\n\nexport default defineComponent({\n name: 'PsSelectV2',\n components: {\n PsTag,\n PsIcon\n },\n props: SelectProps,\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 }),\n } as any)\n\n return API\n },\n})\n</script>\n"],"names":["defineComponent","PsTag","PsIcon","SelectProps","useSelect","selectV2InjectionKey","reactive","toRefs"],"mappings":";;;;;;;;;;;AAgLA,aAAeA,oBAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,WACVC;AAAA,YACAC;AAAA;AAAA,EAEF,OAAOC;AAAA,EACP,MAAM,OAAO,EAAE,QAAQ;AACrB,UAAM,MAAMC,qBAAU,OAAO;~~AAE7B~~,gBAAQC,4BAAsB;AAAA,MAC5B,OAAOC,aAAS;AAAA,WACXC,WAAO;AAAA;AAAA;AAId,WAAO;AAAA;AAAA;;;;"}
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 :class=\"[selectSize ? 'el-select-v2--' + selectSize : '']\"\n class=\"el-select-v2\"\n >\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 <ps-tag\n :closable=\"!selectDisabled && !states.cachedOptions[0]?.disable\"\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 >{{ states.cachedOptions[0].label }}</span\n >\n </ps-tag>\n <ps-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 </ps-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 <ps-tag\n :key=\"getValueKey(selected)\"\n :closable=\"!selectDisabled && !selected.disabled\"\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 >{{ getLabel(selected) }}</span\n >\n </ps-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 :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 />\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 class=\"el-select-v2__selected-item el-select-v2__input-wrapper\">\n <input\n :id=\"id\"\n ref=\"inputRef\"\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 />\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 ></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 ? _modelValue.length === 0 : !_modelValue),\n }\"\n >{{ currentPlaceholder }}</span\n >\n <span class=\"el-select-v2__suffix\">\n <ps-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 </ps-icon>\n <ps-icon\n v-if=\"showClearBtn && clearIcon\"\n class=\"el-select-v2__caret el-input__icon\"\n >\n <component :is=\"clearIcon\" />\n </ps-icon>\n </span>\n </div>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, provide, toRefs, reactive } from 'vue'\nimport PsTag from '@element-ps/components/tag'\nimport useSelect from './useSelect'\nimport { selectV2InjectionKey } from './token'\nimport { SelectProps } from './defaults'\nimport PsIcon from '@element-ps/components/icon'\n\nexport default defineComponent({\n name: 'PsSelectV2',\n components: {\n PsTag,\n PsIcon\n },\n props: SelectProps,\n setup(props, { emit }) {\n const API = useSelect(props, emit)\n provide(selectV2InjectionKey, {\n props: reactive({\n ...toRefs(props),\n }),\n } as any)\n\n return API\n },\n})\n</script>\n"],"names":["defineComponent","PsTag","PsIcon","SelectProps","useSelect","selectV2InjectionKey","reactive","toRefs"],"mappings":";;;;;;;;;;;AAgLA,aAAeA,oBAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,WACVC;AAAA,YACAC;AAAA;AAAA,EAEF,OAAOC;AAAA,EACP,MAAM,OAAO,EAAE,QAAQ;AACrB,UAAM,MAAMC,qBAAU,OAAO;AAC7B,gBAAQC,4BAAsB;AAAA,MAC5B,OAAOC,aAAS;AAAA,WACXC,WAAO;AAAA;AAAA;AAId,WAAO;AAAA;AAAA;;;;"}

package/lib/packages/components/select-v2/src/select.vue_vue&type=template&id=13e598a4&lang.js CHANGED Viewed

@@ -40,7 +40,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         vue.renderSlot(_ctx.$slots, "prefix")
       ])) : vue.createCommentVNode("v-if", true),
       _ctx.multiple ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
-        _ctx.collapseTags && _ctx.modelValue.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
+        _ctx.collapseTags && _ctx._modelValue.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
           vue.createVNode(_component_ps_tag, {
             closable: !_ctx.selectDisabled && !((_a = _ctx.states.cachedOptions[0]) == null ? void 0 : _a.disable),
             size: _ctx.collapseTagSize,
@@ -57,7 +57,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             ]),
             _: 1
           }, 8, ["closable", "size"]),
-          _ctx.modelValue.length > 1 ? (vue.openBlock(), vue.createBlock(_component_ps_tag, {
+          _ctx._modelValue.length > 1 ? (vue.openBlock(), vue.createBlock(_component_ps_tag, {
             key: 0,
             closable: false,
             size: _ctx.collapseTagSize,
@@ -70,7 +70,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                 style: vue.normalizeStyle({
                   maxWidth: `${_ctx.tagMaxWidth}px`
                 })
-              }, "+ " + vue.toDisplayString(_ctx.modelValue.length - 1), 5)
+              }, "+ " + vue.toDisplayString(_ctx._modelValue.length - 1), 5)
             ]),
             _: 1
           }, 8, ["size"])) : vue.createCommentVNode("v-if", true)
@@ -161,7 +161,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         key: 3,
         class: vue.normalizeClass({
           "el-select-v2__placeholder": true,
-          "is-transparent": _ctx.states.isComposing || (_ctx.placeholder && _ctx.multiple ? _ctx.modelValue.length === 0 : !_ctx.modelValue)
+          "is-transparent": _ctx.states.isComposing || (_ctx.placeholder && _ctx.multiple ? _ctx._modelValue.length === 0 : !_ctx._modelValue)
         })
       }, vue.toDisplayString(_ctx.currentPlaceholder), 3)) : vue.createCommentVNode("v-if", true),
       vue.createElementVNode("span", _hoisted_9, [

package/lib/packages/components/select-v2/src/select.vue_vue&type=template&id=13e598a4&lang.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"select.vue_vue&type=template&id=13e598a4&lang.js","sources":["../../../../../../../packages/components/select-v2/src/select.vue?vue&type=template&id=13e598a4&lang.js"],"sourcesContent":["<template>\n <div\n ref=\"selectRef\"\n :class=\"[selectSize ? 'el-select-v2--' + selectSize : '']\"\n class=\"el-select-v2\"\n >\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 <ps-tag\n :closable=\"!selectDisabled && !states.cachedOptions[0]?.disable\"\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 >{{ states.cachedOptions[0].label }}</span\n >\n </ps-tag>\n <ps-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 </ps-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 <ps-tag\n :key=\"getValueKey(selected)\"\n :closable=\"!selectDisabled && !selected.disabled\"\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 >{{ getLabel(selected) }}</span\n >\n </ps-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 :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 />\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 class=\"el-select-v2__selected-item el-select-v2__input-wrapper\">\n <input\n :id=\"id\"\n ref=\"inputRef\"\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 />\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 ></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 ? ~~modelValue~~.length === 0 : !~~modelValue~~),\n }\"\n >{{ currentPlaceholder }}</span\n >\n <span class=\"el-select-v2__suffix\">\n <ps-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 </ps-icon>\n <ps-icon\n v-if=\"showClearBtn && clearIcon\"\n class=\"el-select-v2__caret el-input__icon\"\n >\n <component :is=\"clearIcon\" />\n </ps-icon>\n </span>\n </div>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, provide, toRefs, reactive } from 'vue'\nimport PsTag from '@element-ps/components/tag'\nimport useSelect from './useSelect'\nimport { selectV2InjectionKey } from './token'\nimport { SelectProps } from './defaults'\nimport PsIcon from '@element-ps/components/icon'\n\nexport default defineComponent({\n name: 'PsSelectV2',\n components: {\n PsTag,\n PsIcon\n },\n props: SelectProps,\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 }),\n } as any)\n\n return API\n },\n})\n</script>\n"],"names":["_createElementBlock","_createElementVNode","_renderSlot","_createVNode","_createBlock","_toDisplayString"],"mappings":";;;;;;;;;EAmB2B,OAAM;AAAA;;;EAElB,OAAM;AAAA;;;qBA0FR,OAAM;;;qBAsCP,OAAM;;;;;0BApJhBA;IACE,KAAI;AAAA,IACH,4BAAQ,qCAAgC,uBACnC;AAAA;IAENC;MACE,KAAI;AAAA,MACJ,2BAAM;;;;;;;MAQK,YAAO,2BAAlBD;QACEE;;MAES,kCAAXF,8BAAA;QACkB,qBAAgB,~~gBAAW~~,+~~BACzCA~~,8BAAA;UACEG;YACG,WAAW,2CAA0B,qBAAP,mBAAyB;AAAA,YACvD,MAAM;YACP,MAAK;AAAA,YACL,uBAAA;AAAA;iCAEA;cAAAF;gBACE,OAAM;AAAA,gBACL;;;qCAGG,YAAO,iBAAiB;;;;UAIxB,~~gBAAW~~,+~~BADnBG~~;;YAEG,UAAU;AAAA,YACV,MAAM;YACP,MAAK;AAAA,YACL,uBAAA;AAAA;iCAEA;cAAAH;gBACE,OAAM;AAAA,gBACL;;;iBAGA,2BAAK,~~gBAAW~~;;;;~~oCAOvBD~~,gEAC4B,YAAO,gBAAzB,UAAU;kCADpBA;YAEG,KAAK;AAAA,YACN,OAAM;AAAA;YAENG;cACG,KAAK,iBAAY;AAAA,cACjB,WAAW,wBAAmB,SAAS;AAAA,cACvC,MAAM;cACP,MAAK;AAAA,cACL,uBAAA;AAAA;mCAEA;gBAAAF;kBACE,OAAM;AAAA,kBACL;;;uCAGG,cAAS;;;;;;QAKrBA;UACE,OAAM;AAAA,UACL,0BAAO;;UAERA;YACG,IAAI;YACL,KAAI;AAAA,YACH,cAAc;YACf,qBAAkB;AAAA,YAClB,iBAAc;AAAA,YACd,gBAAe;AAAA,YACd,iBAAe;YACf,mBAAiB;YAClB,2BAAM,iCACG,wBAAmB;YAC3B,UAAU;YACX,MAAK;AAAA,YACJ,WAAW;YACZ,YAAW;AAAA,YACX,MAAK;AAAA,YACJ,MAAM;YACN,cAAc,uBAAkB;AAAA;UAG3B,oCADRD;;YAEE,KAAI;AAAA,YACJ,eAAY;AAAA,YACZ,OAAM;AAAA,yBACNK,gCAAe;AAAA;;8BAKrBL;QACEC,8BAAA;UACEA;YACG,IAAI;YACL,KAAI;AAAA,YACJ,qBAAkB;AAAA,YAClB,iBAAc;AAAA,YACb,mBAAiB;YACjB,iBAAe;YAChB,gBAAe;AAAA,YACd,cAAc;YACf,OAAM;AAAA,YACL,UAAU;YACV,MAAM;YACP,MAAK;AAAA,YACJ,WAAW;YACZ,YAAW;AAAA,YACX,MAAK;AAAA,YACJ,cAAc,uBAAkB;AAAA;;QAI7B,oCADRD;;UAEE,KAAI;AAAA,UACJ,eAAY;AAAA,UACZ,OAAM;AAAA,uBACNK,gCAAe;AAAA;;MAIX,+CADRL;;QAEG;;;;6BAMG;MAENC,+BAAA;QAEU,0DADRG;;UAGG,oEAAiD;;+BAElD;8BAAAA,4CAAgB;;;;uBAHP;;QAMH,qBAAgB,mCADxBA;;UAEE,OAAM;AAAA;+BAEN;8BAAAA,4CAAgB;;;;;;;;;;;"}
1	+ {"version":3,"file":"select.vue_vue&type=template&id=13e598a4&lang.js","sources":["../../../../../../../packages/components/select-v2/src/select.vue?vue&type=template&id=13e598a4&lang.js"],"sourcesContent":["<template>\n <div\n ref=\"selectRef\"\n :class=\"[selectSize ? 'el-select-v2--' + selectSize : '']\"\n class=\"el-select-v2\"\n >\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 <ps-tag\n :closable=\"!selectDisabled && !states.cachedOptions[0]?.disable\"\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 >{{ states.cachedOptions[0].label }}</span\n >\n </ps-tag>\n <ps-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 </ps-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 <ps-tag\n :key=\"getValueKey(selected)\"\n :closable=\"!selectDisabled && !selected.disabled\"\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 >{{ getLabel(selected) }}</span\n >\n </ps-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 :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 />\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 class=\"el-select-v2__selected-item el-select-v2__input-wrapper\">\n <input\n :id=\"id\"\n ref=\"inputRef\"\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 />\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 ></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 ? _modelValue.length === 0 : !_modelValue),\n }\"\n >{{ currentPlaceholder }}</span\n >\n <span class=\"el-select-v2__suffix\">\n <ps-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 </ps-icon>\n <ps-icon\n v-if=\"showClearBtn && clearIcon\"\n class=\"el-select-v2__caret el-input__icon\"\n >\n <component :is=\"clearIcon\" />\n </ps-icon>\n </span>\n </div>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, provide, toRefs, reactive } from 'vue'\nimport PsTag from '@element-ps/components/tag'\nimport useSelect from './useSelect'\nimport { selectV2InjectionKey } from './token'\nimport { SelectProps } from './defaults'\nimport PsIcon from '@element-ps/components/icon'\n\nexport default defineComponent({\n name: 'PsSelectV2',\n components: {\n PsTag,\n PsIcon\n },\n props: SelectProps,\n setup(props, { emit }) {\n const API = useSelect(props, emit)\n provide(selectV2InjectionKey, {\n props: reactive({\n ...toRefs(props),\n }),\n } as any)\n\n return API\n },\n})\n</script>\n"],"names":["_createElementBlock","_createElementVNode","_renderSlot","_createVNode","_createBlock","_toDisplayString"],"mappings":";;;;;;;;;EAmB2B,OAAM;AAAA;;;EAElB,OAAM;AAAA;;;qBA0FR,OAAM;;;qBAsCP,OAAM;;;;;0BApJhBA;IACE,KAAI;AAAA,IACH,4BAAQ,qCAAgC,uBACnC;AAAA;IAENC;MACE,KAAI;AAAA,MACJ,2BAAM;;;;;;;MAQK,YAAO,2BAAlBD;QACEE;;MAES,kCAAXF,8BAAA;QACkB,qBAAgB,iBAAY,+BAC1CA,8BAAA;UACEG;YACG,WAAW,2CAA0B,qBAAP,mBAAyB;AAAA,YACvD,MAAM;YACP,MAAK;AAAA,YACL,uBAAA;AAAA;iCAEA;cAAAF;gBACE,OAAM;AAAA,gBACL;;;qCAGG,YAAO,iBAAiB;;;;UAIxB,iBAAY,+BADpBG;;YAEG,UAAU;AAAA,YACV,MAAM;YACP,MAAK;AAAA,YACL,uBAAA;AAAA;iCAEA;cAAAH;gBACE,OAAM;AAAA,gBACL;;;iBAGA,2BAAK,iBAAY;;;;oCAOxBD,gEAC4B,YAAO,gBAAzB,UAAU;kCADpBA;YAEG,KAAK;AAAA,YACN,OAAM;AAAA;YAENG;cACG,KAAK,iBAAY;AAAA,cACjB,WAAW,wBAAmB,SAAS;AAAA,cACvC,MAAM;cACP,MAAK;AAAA,cACL,uBAAA;AAAA;mCAEA;gBAAAF;kBACE,OAAM;AAAA,kBACL;;;uCAGG,cAAS;;;;;;QAKrBA;UACE,OAAM;AAAA,UACL,0BAAO;;UAERA;YACG,IAAI;YACL,KAAI;AAAA,YACH,cAAc;YACf,qBAAkB;AAAA,YAClB,iBAAc;AAAA,YACd,gBAAe;AAAA,YACd,iBAAe;YACf,mBAAiB;YAClB,2BAAM,iCACG,wBAAmB;YAC3B,UAAU;YACX,MAAK;AAAA,YACJ,WAAW;YACZ,YAAW;AAAA,YACX,MAAK;AAAA,YACJ,MAAM;YACN,cAAc,uBAAkB;AAAA;UAG3B,oCADRD;;YAEE,KAAI;AAAA,YACJ,eAAY;AAAA,YACZ,OAAM;AAAA,yBACNK,gCAAe;AAAA;;8BAKrBL;QACEC,8BAAA;UACEA;YACG,IAAI;YACL,KAAI;AAAA,YACJ,qBAAkB;AAAA,YAClB,iBAAc;AAAA,YACb,mBAAiB;YACjB,iBAAe;YAChB,gBAAe;AAAA,YACd,cAAc;YACf,OAAM;AAAA,YACL,UAAU;YACV,MAAM;YACP,MAAK;AAAA,YACJ,WAAW;YACZ,YAAW;AAAA,YACX,MAAK;AAAA,YACJ,cAAc,uBAAkB;AAAA;;QAI7B,oCADRD;;UAEE,KAAI;AAAA,UACJ,eAAY;AAAA,UACZ,OAAM;AAAA,uBACNK,gCAAe;AAAA;;MAIX,+CADRL;;QAEG;;;;6BAMG;MAENC,+BAAA;QAEU,0DADRG;;UAGG,oEAAiD;;+BAElD;8BAAAA,4CAAgB;;;;uBAHP;;QAMH,qBAAgB,mCADxBA;;UAEE,OAAM;AAAA;+BAEN;8BAAAA,4CAAgB;;;;;;;;;;;"}

package/lib/packages/components/select-v2/src/useSelect.js CHANGED Viewed

@@ -55,7 +55,7 @@ const useSelect = (props) => {
   const expanded = vue.ref(false);
   const selectDisabled = vue.computed(() => props.disabled || elForm.disabled);
   const showClearBtn = vue.computed(() => {
-    const hasValue = props.multiple ? Array.isArray(props.modelValue) && props.modelValue.length > 0 : props.modelValue !== void 0 && props.modelValue !== null && props.modelValue !== "";
+    const hasValue = props.multiple ? Array.isArray(props._modelValue) && props._modelValue.length > 0 : props._modelValue !== void 0 && props._modelValue !== null && props._modelValue !== "";
     const criteria = props.clearable && !selectDisabled.value && states.comboBoxHovering && hasValue;
     return criteria;
   });
@@ -102,8 +102,8 @@ const useSelect = (props) => {
     };
   });
   const shouldShowPlaceholder = vue.computed(() => {
-    if (shared.isArray(props.modelValue)) {
-      return props.modelValue.length === 0 && !states.displayInputValue;
+    if (shared.isArray(props._modelValue)) {
+      return props._modelValue.length === 0 && !states.displayInputValue;
     }
     return props.filterable ? states.displayInputValue.length === 0 : true;
   });
@@ -113,10 +113,10 @@ const useSelect = (props) => {
   });
   const initStates = () => {
     if (props.multiple) {
-      if (props.modelValue.length > 0) {
+      if (props._modelValue.length > 0) {
         let initHovering = false;
         states.cachedOptions.length = 0;
-        props.modelValue.map((selected) => {
+        props._modelValue.map((selected) => {
           const itemIndex = filteredOptions.value.findIndex((option) => option.value === selected);
           if (~itemIndex) {
             states.cachedOptions.push(filteredOptions.value[itemIndex]);
@@ -127,13 +127,13 @@ const useSelect = (props) => {
         states.cachedOptions = [];
       }
     } else {
-      if (props.modelValue) {
+      if (props._modelValue) {
         const options = filteredOptions.value;
-        const selectedItemIndex = options.findIndex((o) => o.value === props.modelValue);
+        const selectedItemIndex = options.findIndex((o) => o.value === props._modelValue);
         if (~selectedItemIndex) {
           states.selectedLabel = options[selectedItemIndex].label;
         } else {
-          states.selectedLabel = `${props.modelValue}`;
+          states.selectedLabel = `${props._modelValue}`;
         }
       } else {
         states.selectedLabel = "";

package/lib/packages/components/select-v2/src/useSelect.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useSelect.js","sources":["../../../../../../../packages/components/select-v2/src/useSelect.ts"],"sourcesContent":["import { computed, ref, reactive, inject, onMounted } from 'vue'\nimport { isArray } from '@vue/shared'\nimport { ArrowUp } from '@element-plus/icons'\nimport { elFormKey, elFormItemKey } from '@element-ps/tokens'\nimport { useLocaleInject } from '@element-ps/hooks'\nimport { useGlobalConfig } from '@element-ps/utils/util'\nimport { flattenOptions } from './util'\nimport type { SelectProps } from './defaults'\nimport type { ExtractPropTypes, CSSProperties } from 'vue'\nimport type { ElFormContext, ElFormItemContext } from '@element-ps/tokens'\nimport type { OptionType, Option } from './select.types'\n\nconst DEFAULT_INPUT_PLACEHOLDER = ''\nconst MINIMUM_INPUT_WIDTH = 11\nconst TAG_BASE_WIDTH = {\n small: 42,\n mini: 33,\n}\n\nconst useSelect = (props: ExtractPropTypes<typeof SelectProps>) => {\n // inject\n const { t } = useLocaleInject()\n const elForm = inject(elFormKey, {} as ElFormContext)\n const elFormItem = inject(elFormItemKey, {} as ElFormItemContext)\n const $ELEMENT = useGlobalConfig()\n\n const states = reactive({\n inputValue: DEFAULT_INPUT_PLACEHOLDER,\n displayInputValue: DEFAULT_INPUT_PLACEHOLDER,\n calculatedWidth: 0,\n cachedPlaceholder: '',\n cachedOptions: [] as Option[],\n createdOptions: [] as Option[],\n createdLabel: '',\n createdSelected: false,\n currentPlaceholder: '',\n hoveringIndex: -1,\n comboBoxHovering: false,\n isOnComposition: false,\n isSilentBlur: false,\n isComposing: false,\n inputLength: 20,\n selectWidth: 200,\n initialInputHeight: 0,\n previousQuery: null,\n previousValue: '',\n query: '',\n selectedLabel: '',\n softFocus: false,\n tagInMultiLine: false,\n })\n\n // DOM & Component refs\n const inputRef = ref(null) // el-input ref\n const selectRef = ref(null)\n const selectionRef = ref(null) // tags ref\n const calculatorRef = ref<HTMLElement>(null as any as HTMLElement)\n\n // the controller of the expanded popup\n const expanded = ref(false)\n\n const selectDisabled = computed(() => props.disabled \|\| elForm.disabled)\n\n const showClearBtn = computed(() => {\n const hasValue = props.multiple\n ? Array.isArray(props.modelValue) && props.modelValue.length > 0\n : props.modelValue !== undefined &&\n props.modelValue !== null &&\n props.modelValue !== ''\n\n const criteria =\n props.clearable &&\n !selectDisabled.value &&\n states.comboBoxHovering &&\n hasValue\n return criteria\n })\n\n const iconComponent = computed(() =>\n props.remote && props.filterable ? '' : ArrowUp\n )\n\n const iconReverse = computed(() =>\n iconComponent.value && expanded.value ? 'is-reverse' : ''\n )\n\n const filteredOptions = computed(() => {\n const isValidOption = (o: Option): boolean => {\n // fill the conditions here.\n const query = states.inputValue\n // when query was given, we should test on the label see whether the label contains the given query\n const containsQueryString = query ? o.label.includes(query) : true\n return containsQueryString\n }\n if (props.loading) {\n return []\n }\n return flattenOptions(\n (props.options as OptionType[])\n .concat(states.createdOptions)\n .map((v) => {\n if (isArray(v.options)) {\n const filtered = v.options.filter(isValidOption)\n if (filtered.length > 0) {\n return {\n ...v,\n options: filtered,\n }\n }\n } else {\n if (props.remote \|\| isValidOption(v as Option)) {\n return v\n }\n }\n return null\n })\n .filter((v) => v !== null) as any\n )\n })\n\n const selectSize = computed(\n () => props.size \|\| elFormItem.size \|\| $ELEMENT.size\n )\n\n const collapseTagSize = computed(() =>\n ['small', 'mini'].indexOf(selectSize.value) > -1 ? 'mini' : 'small'\n )\n\n const tagMaxWidth = computed(() => {\n const select = selectionRef.value\n const size = collapseTagSize.value\n const paddingLeft = select\n ? parseInt(getComputedStyle(select).paddingLeft)\n : 0\n const paddingRight = select\n ? parseInt(getComputedStyle(select).paddingRight)\n : 0\n return (\n states.selectWidth - paddingRight - paddingLeft - TAG_BASE_WIDTH[size]\n )\n })\n\n const inputWrapperStyle = computed(() => {\n return {\n width: `${\n states.calculatedWidth === 0\n ? MINIMUM_INPUT_WIDTH\n : Math.ceil(states.calculatedWidth) + MINIMUM_INPUT_WIDTH\n }px`,\n } as CSSProperties\n })\n\n const shouldShowPlaceholder = computed(() => {\n if (isArray(props.modelValue)) {\n return props.modelValue.length === 0 && !states.displayInputValue\n }\n\n // when it's not multiple mode, we only determine this flag based on filterable and expanded\n // when filterable flag is true, which means we have input box on the screen\n return props.filterable ? states.displayInputValue.length === 0 : true\n })\n\n const currentPlaceholder = computed(() => {\n const _placeholder = props.placeholder \|\| t('el.select.placeholder')\n return props.multiple ? _placeholder : states.selectedLabel \|\| _placeholder\n })\n\n const initStates = () => {\n if (props.multiple) {\n if ((props.modelValue as Array<any>).length > 0) {\n let initHovering = false\n states.cachedOptions.length = 0\n ;(props.modelValue as Array<any>).map((selected) => {\n const itemIndex = filteredOptions.value.findIndex(\n (option) => (option as any).value === selected\n )\n if (~itemIndex) {\n states.cachedOptions.push(\n filteredOptions.value[itemIndex] as Option\n )\n initHovering = true\n }\n })\n } else {\n states.cachedOptions = []\n }\n } else {\n if (props.modelValue) {\n const options = filteredOptions.value\n const selectedItemIndex = options.findIndex(\n (o) => (o as any).value === props.modelValue\n )\n if (~selectedItemIndex) {\n states.selectedLabel = (options[selectedItemIndex] as any).label\n } else {\n states.selectedLabel = `${props.modelValue}`\n }\n } else {\n states.selectedLabel = ''\n }\n }\n }\n\n onMounted(() => {\n initStates()\n })\n\n return {\n // data exports\n collapseTagSize,\n currentPlaceholder,\n expanded,\n iconComponent,\n iconReverse,\n inputWrapperStyle,\n // readonly,\n shouldShowPlaceholder,\n selectDisabled,\n selectSize,\n showClearBtn,\n states,\n tagMaxWidth,\n\n // refs items exports\n calculatorRef,\n inputRef,\n selectRef,\n selectionRef,\n }\n}\n\nexport default useSelect\n"],"names":["useLocaleInject","inject","elFormKey","elFormItemKey","useGlobalConfig","reactive","ref","computed","ArrowUp","flattenOptions","isArray"],"mappings":"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"}
1	+ {"version":3,"file":"useSelect.js","sources":["../../../../../../../packages/components/select-v2/src/useSelect.ts"],"sourcesContent":["import { computed, ref, reactive, inject, onMounted } from 'vue'\nimport { isArray } from '@vue/shared'\nimport { ArrowUp } from '@element-plus/icons'\nimport { elFormKey, elFormItemKey } from '@element-ps/tokens'\nimport { useLocaleInject } from '@element-ps/hooks'\nimport { useGlobalConfig } from '@element-ps/utils/util'\nimport { flattenOptions } from './util'\nimport type { SelectProps } from './defaults'\nimport type { ExtractPropTypes, CSSProperties } from 'vue'\nimport type { ElFormContext, ElFormItemContext } from '@element-ps/tokens'\nimport type { OptionType, Option } from './select.types'\n\nconst DEFAULT_INPUT_PLACEHOLDER = ''\nconst MINIMUM_INPUT_WIDTH = 11\nconst TAG_BASE_WIDTH = {\n small: 42,\n mini: 33,\n}\n\nconst useSelect = (props: ExtractPropTypes<typeof SelectProps>) => {\n // inject\n const { t } = useLocaleInject()\n const elForm = inject(elFormKey, {} as ElFormContext)\n const elFormItem = inject(elFormItemKey, {} as ElFormItemContext)\n const $ELEMENT = useGlobalConfig()\n\n const states = reactive({\n inputValue: DEFAULT_INPUT_PLACEHOLDER,\n displayInputValue: DEFAULT_INPUT_PLACEHOLDER,\n calculatedWidth: 0,\n cachedPlaceholder: '',\n cachedOptions: [] as Option[],\n createdOptions: [] as Option[],\n createdLabel: '',\n createdSelected: false,\n currentPlaceholder: '',\n hoveringIndex: -1,\n comboBoxHovering: false,\n isOnComposition: false,\n isSilentBlur: false,\n isComposing: false,\n inputLength: 20,\n selectWidth: 200,\n initialInputHeight: 0,\n previousQuery: null,\n previousValue: '',\n query: '',\n selectedLabel: '',\n softFocus: false,\n tagInMultiLine: false,\n })\n\n // DOM & Component refs\n const inputRef = ref(null) // el-input ref\n const selectRef = ref(null)\n const selectionRef = ref(null) // tags ref\n const calculatorRef = ref<HTMLElement>(null as any as HTMLElement)\n\n // the controller of the expanded popup\n const expanded = ref(false)\n\n const selectDisabled = computed(() => props.disabled \|\| elForm.disabled)\n\n const showClearBtn = computed(() => {\n const hasValue = props.multiple\n ? Array.isArray(props._modelValue) && props._modelValue.length > 0\n : props._modelValue !== undefined &&\n props._modelValue !== null &&\n props._modelValue !== ''\n\n const criteria =\n props.clearable &&\n !selectDisabled.value &&\n states.comboBoxHovering &&\n hasValue\n return criteria\n })\n\n const iconComponent = computed(() =>\n props.remote && props.filterable ? '' : ArrowUp\n )\n\n const iconReverse = computed(() =>\n iconComponent.value && expanded.value ? 'is-reverse' : ''\n )\n\n const filteredOptions = computed(() => {\n const isValidOption = (o: Option): boolean => {\n // fill the conditions here.\n const query = states.inputValue\n // when query was given, we should test on the label see whether the label contains the given query\n const containsQueryString = query ? o.label.includes(query) : true\n return containsQueryString\n }\n if (props.loading) {\n return []\n }\n return flattenOptions(\n (props.options as OptionType[])\n .concat(states.createdOptions)\n .map((v) => {\n if (isArray(v.options)) {\n const filtered = v.options.filter(isValidOption)\n if (filtered.length > 0) {\n return {\n ...v,\n options: filtered,\n }\n }\n } else {\n if (props.remote \|\| isValidOption(v as Option)) {\n return v\n }\n }\n return null\n })\n .filter((v) => v !== null) as any\n )\n })\n\n const selectSize = computed(\n () => props.size \|\| elFormItem.size \|\| $ELEMENT.size\n )\n\n const collapseTagSize = computed(() =>\n ['small', 'mini'].indexOf(selectSize.value) > -1 ? 'mini' : 'small'\n )\n\n const tagMaxWidth = computed(() => {\n const select = selectionRef.value\n const size = collapseTagSize.value\n const paddingLeft = select\n ? parseInt(getComputedStyle(select).paddingLeft)\n : 0\n const paddingRight = select\n ? parseInt(getComputedStyle(select).paddingRight)\n : 0\n return (\n states.selectWidth - paddingRight - paddingLeft - TAG_BASE_WIDTH[size]\n )\n })\n\n const inputWrapperStyle = computed(() => {\n return {\n width: `${\n states.calculatedWidth === 0\n ? MINIMUM_INPUT_WIDTH\n : Math.ceil(states.calculatedWidth) + MINIMUM_INPUT_WIDTH\n }px`,\n } as CSSProperties\n })\n\n const shouldShowPlaceholder = computed(() => {\n if (isArray(props._modelValue)) {\n return props._modelValue.length === 0 && !states.displayInputValue\n }\n\n // when it's not multiple mode, we only determine this flag based on filterable and expanded\n // when filterable flag is true, which means we have input box on the screen\n return props.filterable ? states.displayInputValue.length === 0 : true\n })\n\n const currentPlaceholder = computed(() => {\n const _placeholder = props.placeholder \|\| t('el.select.placeholder')\n return props.multiple ? _placeholder : states.selectedLabel \|\| _placeholder\n })\n\n const initStates = () => {\n if (props.multiple) {\n if ((props._modelValue as Array<any>).length > 0) {\n let initHovering = false\n states.cachedOptions.length = 0\n ;(props._modelValue as Array<any>).map((selected) => {\n const itemIndex = filteredOptions.value.findIndex(\n (option) => (option as any).value === selected\n )\n if (~itemIndex) {\n states.cachedOptions.push(\n filteredOptions.value[itemIndex] as Option\n )\n initHovering = true\n }\n })\n } else {\n states.cachedOptions = []\n }\n } else {\n if (props._modelValue) {\n const options = filteredOptions.value\n const selectedItemIndex = options.findIndex(\n (o) => (o as any).value === props._modelValue\n )\n if (~selectedItemIndex) {\n states.selectedLabel = (options[selectedItemIndex] as any).label\n } else {\n states.selectedLabel = `${props._modelValue}`\n }\n } else {\n states.selectedLabel = ''\n }\n }\n }\n\n onMounted(() => {\n initStates()\n })\n\n return {\n // data exports\n collapseTagSize,\n currentPlaceholder,\n expanded,\n iconComponent,\n iconReverse,\n inputWrapperStyle,\n // readonly,\n shouldShowPlaceholder,\n selectDisabled,\n selectSize,\n showClearBtn,\n states,\n tagMaxWidth,\n\n // refs items exports\n calculatorRef,\n inputRef,\n selectRef,\n selectionRef,\n }\n}\n\nexport default useSelect\n"],"names":["useLocaleInject","inject","elFormKey","elFormItemKey","useGlobalConfig","reactive","ref","computed","ArrowUp","flattenOptions","isArray"],"mappings":"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"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "element-ps",
-  "version": "1.0.16",
+  "version": "1.0.17",
   "description": "A Component Library for Vue 3",
   "homepage": "https://element-plus.org/",
   "keywords": [

package/web-types.json CHANGED Viewed

	@@ -1 +1 @@
1	- {"$schema":"https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json","framework":"vue","name":"element-ps","version":"1.0.16","contributions":{"html":{"types-syntax":"typescript","description-markup":"markdown"}}}
1	+ {"$schema":"https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json","framework":"vue","name":"element-ps","version":"1.0.17","contributions":{"html":{"types-syntax":"typescript","description-markup":"markdown"}}}