element-ps 1.0.0-alpha.6 → 1.0.1

package/es/packages/components/select-v2/src/select.vue_vue&type=template&id=13e598a4&lang.mjs

@@ -0,0 +1,190 @@
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot, createCommentVNode, createVNode, withCtx, normalizeStyle, toDisplayString, createBlock, Fragment, renderList, withDirectives, resolveDynamicComponent, vShow } from 'vue';
+
+const _hoisted_1 = { key: 0 };
+const _hoisted_2 = {
+  key: 1,
+  class: "el-select-v2__selection"
+};
+const _hoisted_3 = {
+  key: 0,
+  class: "el-select-v2__selected-item"
+};
+const _hoisted_4 = ["id", "autocomplete", "aria-expanded", "aria-labelledby", "disabled", "readonly", "name", "unselectable"];
+const _hoisted_5 = ["textContent"];
+const _hoisted_6 = { class: "el-select-v2__selected-item el-select-v2__input-wrapper" };
+const _hoisted_7 = ["id", "aria-labelledby", "aria-expanded", "autocomplete", "disabled", "name", "readonly", "unselectable"];
+const _hoisted_8 = ["textContent"];
+const _hoisted_9 = { class: "el-select-v2__suffix" };
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _a;
+  const _component_ps_tag = resolveComponent("ps-tag");
+  const _component_ps_icon = resolveComponent("ps-icon");
+  return openBlock(), createElementBlock("div", {
+    ref: "selectRef",
+    class: normalizeClass([[_ctx.selectSize ? "el-select-v2--" + _ctx.selectSize : ""], "el-select-v2"])
+  }, [
+    createElementVNode("div", {
+      ref: "selectionRef",
+      class: normalizeClass(["el-select-v2__wrapper", {
+        "is-focused": _ctx.states.isComposing,
+        "is-hovering": _ctx.states.comboBoxHovering,
+        "is-filterable": _ctx.filterable,
+        "is-disabled": _ctx.disabled
+      }])
+    }, [
+      _ctx.$slots.prefix ? (openBlock(), createElementBlock("div", _hoisted_1, [
+        renderSlot(_ctx.$slots, "prefix")
+      ])) : createCommentVNode("v-if", true),
+      _ctx.multiple ? (openBlock(), createElementBlock("div", _hoisted_2, [
+        _ctx.collapseTags && _ctx.modelValue.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_3, [
+          createVNode(_component_ps_tag, {
+            closable: !_ctx.selectDisabled && !((_a = _ctx.states.cachedOptions[0]) == null ? void 0 : _a.disable),
+            size: _ctx.collapseTagSize,
+            type: "info",
+            "disable-transitions": ""
+          }, {
+            default: withCtx(() => [
+              createElementVNode("span", {
+                class: "el-select-v2__tags-text",
+                style: normalizeStyle({
+                  maxWidth: `${_ctx.tagMaxWidth}px`
+                })
+              }, toDisplayString(_ctx.states.cachedOptions[0].label), 5)
+            ]),
+            _: 1
+          }, 8, ["closable", "size"]),
+          _ctx.modelValue.length > 1 ? (openBlock(), createBlock(_component_ps_tag, {
+            key: 0,
+            closable: false,
+            size: _ctx.collapseTagSize,
+            type: "info",
+            "disable-transitions": ""
+          }, {
+            default: withCtx(() => [
+              createElementVNode("span", {
+                class: "el-select-v2__tags-text",
+                style: normalizeStyle({
+                  maxWidth: `${_ctx.tagMaxWidth}px`
+                })
+              }, "+ " + toDisplayString(_ctx.modelValue.length - 1), 5)
+            ]),
+            _: 1
+          }, 8, ["size"])) : createCommentVNode("v-if", true)
+        ])) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(_ctx.states.cachedOptions, (selected, idx) => {
+          return openBlock(), createElementBlock("div", {
+            key: idx,
+            class: "el-select-v2__selected-item"
+          }, [
+            createVNode(_component_ps_tag, {
+              key: _ctx.getValueKey(selected),
+              closable: !_ctx.selectDisabled && !selected.disabled,
+              size: _ctx.collapseTagSize,
+              type: "info",
+              "disable-transitions": ""
+            }, {
+              default: withCtx(() => [
+                createElementVNode("span", {
+                  class: "el-select-v2__tags-text",
+                  style: normalizeStyle({
+                    maxWidth: `${_ctx.tagMaxWidth}px`
+                  })
+                }, toDisplayString(_ctx.getLabel(selected)), 5)
+              ]),
+              _: 2
+            }, 1032, ["closable", "size"])
+          ]);
+        }), 128)),
+        createElementVNode("div", {
+          class: "el-select-v2__selected-item el-select-v2__input-wrapper",
+          style: normalizeStyle(_ctx.inputWrapperStyle)
+        }, [
+          createElementVNode("input", {
+            id: _ctx.id,
+            ref: "inputRef",
+            autocomplete: _ctx.autocomplete,
+            "aria-autocomplete": "list",
+            "aria-haspopup": "listbox",
+            autocapitalize: "off",
+            "aria-expanded": _ctx.expanded,
+            "aria-labelledby": _ctx.label,
+            class: normalizeClass(["el-select-v2__combobox-input", [_ctx.selectSize ? `is-${_ctx.selectSize}` : ""]]),
+            disabled: _ctx.disabled,
+            role: "combobox",
+            readonly: !_ctx.filterable,
+            spellcheck: "false",
+            type: "text",
+            name: _ctx.name,
+            unselectable: _ctx.expanded ? "on" : void 0
+          }, null, 10, _hoisted_4),
+          _ctx.filterable ? (openBlock(), createElementBlock("span", {
+            key: 0,
+            ref: "calculatorRef",
+            "aria-hidden": "true",
+            class: "el-select-v2__input-calculator",
+            textContent: toDisplayString(_ctx.states.displayInputValue)
+          }, null, 8, _hoisted_5)) : createCommentVNode("v-if", true)
+        ], 4)
+      ])) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+        createElementVNode("div", _hoisted_6, [
+          createElementVNode("input", {
+            id: _ctx.id,
+            ref: "inputRef",
+            "aria-autocomplete": "list",
+            "aria-haspopup": "listbox",
+            "aria-labelledby": _ctx.label,
+            "aria-expanded": _ctx.expanded,
+            autocapitalize: "off",
+            autocomplete: _ctx.autocomplete,
+            class: "el-select-v2__combobox-input",
+            disabled: _ctx.disabled,
+            name: _ctx.name,
+            role: "combobox",
+            readonly: !_ctx.filterable,
+            spellcheck: "false",
+            type: "text",
+            unselectable: _ctx.expanded ? "on" : void 0
+          }, null, 8, _hoisted_7)
+        ]),
+        _ctx.filterable ? (openBlock(), createElementBlock("span", {
+          key: 0,
+          ref: "calculatorRef",
+          "aria-hidden": "true",
+          class: "el-select-v2__selected-item el-select-v2__input-calculator",
+          textContent: toDisplayString(_ctx.states.displayInputValue)
+        }, null, 8, _hoisted_8)) : createCommentVNode("v-if", true)
+      ], 64)),
+      _ctx.shouldShowPlaceholder ? (openBlock(), createElementBlock("span", {
+        key: 3,
+        class: normalizeClass({
+          "el-select-v2__placeholder": true,
+          "is-transparent": _ctx.states.isComposing || (_ctx.placeholder && _ctx.multiple ? _ctx.modelValue.length === 0 : !_ctx.modelValue)
+        })
+      }, toDisplayString(_ctx.currentPlaceholder), 3)) : createCommentVNode("v-if", true),
+      createElementVNode("span", _hoisted_9, [
+        _ctx.iconComponent ? withDirectives((openBlock(), createBlock(_component_ps_icon, {
+          key: 0,
+          class: normalizeClass(["el-select-v2__caret", "el-input__icon", _ctx.iconReverse])
+        }, {
+          default: withCtx(() => [
+            (openBlock(), createBlock(resolveDynamicComponent(_ctx.iconComponent)))
+          ]),
+          _: 1
+        }, 8, ["class"])), [
+          [vShow, !_ctx.showClearBtn]
+        ]) : createCommentVNode("v-if", true),
+        _ctx.showClearBtn && _ctx.clearIcon ? (openBlock(), createBlock(_component_ps_icon, {
+          key: 1,
+          class: "el-select-v2__caret el-input__icon"
+        }, {
+          default: withCtx(() => [
+            (openBlock(), createBlock(resolveDynamicComponent(_ctx.clearIcon)))
+          ]),
+          _: 1
+        })) : createCommentVNode("v-if", true)
+      ])
+    ], 2)
+  ], 2);
+}
+
+export { render };
+//# sourceMappingURL=select.vue_vue&type=template&id=13e598a4&lang.mjs.map

package/es/packages/components/select-v2/src/select.vue_vue&type=template&id=13e598a4&lang.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.vue_vue&type=template&id=13e598a4&lang.mjs","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;;;;;sBApJhBA;IACE,KAAI;AAAA,IACH,wBAAQ,qCAAgC,uBACnC;AAAA;IAENC;MACE,KAAI;AAAA,MACJ,uBAAM;;;;;;;MAQK,YAAO,uBAAlBD;QACEE;;MAES,8BAAXF,0BAAA;QACkB,qBAAgB,gBAAW,2BACzCA,0BAAA;UACEG;YACG,WAAW,2CAA0B,qBAAP,mBAAyB;AAAA,YACvD,MAAM;YACP,MAAK;AAAA,YACL,uBAAA;AAAA;6BAEA;cAAAF;gBACE,OAAM;AAAA,gBACL;;;iCAGG,YAAO,iBAAiB;;;;UAIxB,gBAAW,2BADnBG;;YAEG,UAAU;AAAA,YACV,MAAM;YACP,MAAK;AAAA,YACL,uBAAA;AAAA;6BAEA;cAAAH;gBACE,OAAM;AAAA,gBACL;;;iBAGA,uBAAK,gBAAW;;;;gCAOvBD,oDAC4B,YAAO,gBAAzB,UAAU;8BADpBA;YAEG,KAAK;AAAA,YACN,OAAM;AAAA;YAENG;cACG,KAAK,iBAAY;AAAA,cACjB,WAAW,wBAAmB,SAAS;AAAA,cACvC,MAAM;cACP,MAAK;AAAA,cACL,uBAAA;AAAA;+BAEA;gBAAAF;kBACE,OAAM;AAAA,kBACL;;;mCAGG,cAAS;;;;;;QAKrBA;UACE,OAAM;AAAA,UACL,sBAAO;;UAERA;YACG,IAAI;YACL,KAAI;AAAA,YACH,cAAc;YACf,qBAAkB;AAAA,YAClB,iBAAc;AAAA,YACd,gBAAe;AAAA,YACd,iBAAe;YACf,mBAAiB;YAClB,uBAAM,iCACG,wBAAmB;YAC3B,UAAU;YACX,MAAK;AAAA,YACJ,WAAW;YACZ,YAAW;AAAA,YACX,MAAK;AAAA,YACJ,MAAM;YACN,cAAc,uBAAkB;AAAA;UAG3B,gCADRD;;YAEE,KAAI;AAAA,YACJ,eAAY;AAAA,YACZ,OAAM;AAAA,yBACNK,4BAAe;AAAA;;0BAKrBL;QACEC,0BAAA;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,gCADRD;;UAEE,KAAI;AAAA,UACJ,eAAY;AAAA,UACZ,OAAM;AAAA,uBACNK,4BAAe;AAAA;;MAIX,2CADRL;;QAEG;;;;yBAMG;MAENC,2BAAA;QAEU,kDADRG;;UAGG,gEAAiD;;2BAElD;0BAAAA,oCAAgB;;;;mBAHP;;QAMH,qBAAgB,+BADxBA;;UAEE,OAAM;AAAA;2BAEN;0BAAAA,oCAAgB;;;;;;;;;;;"}

package/es/packages/components/select-v2/src/token.mjs

@@ -0,0 +1,4 @@
+const selectV2InjectionKey = "ElSelectV2Injection";
+
+export { selectV2InjectionKey };
+//# sourceMappingURL=token.mjs.map

package/es/packages/components/select-v2/src/token.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"token.mjs","sources":["../../../../../../../packages/components/select-v2/src/token.ts"],"sourcesContent":["import type { OptionProps, SelectProps } from './defaults'\nimport type { ExtractPropTypes, InjectionKey } from 'vue'\nimport type { Option } from './select.types'\n\nexport interface SelectV2Context {\n  props: ExtractPropTypes<typeof SelectProps>\n  expanded: boolean\n  onSelect: (option: Option<any>, index: number, byClick?: boolean) => void\n  onKeyboardNavigate: (direction: 'forward' | 'backward') => void\n  onKeyboardSelect: () => void\n}\n\nexport const selectV2InjectionKey =\n  'ElSelectV2Injection' as any as InjectionKey<SelectV2Context>\nexport type IOptionProps = ExtractPropTypes<typeof OptionProps>\nexport type ISelectProps = ExtractPropTypes<typeof SelectProps>\n"],"names":[],"mappings":"MAYa,uBACX;;;;"}

package/es/packages/components/select-v2/src/useSelect.mjs

@@ -0,0 +1,163 @@
+import { inject, reactive, ref, computed, onMounted } from 'vue';
+import { isArray } from '@vue/shared';
+import { ArrowUp } from '@element-plus/icons';
+import '../../../tokens/index.mjs';
+import '../../../hooks/index.mjs';
+import { useGlobalConfig } from '../../../utils/util.mjs';
+import { flattenOptions } from './util.mjs';
+import { useLocaleInject } from '../../../hooks/use-locale/index.mjs';
+import { elFormKey, elFormItemKey } from '../../../tokens/form.mjs';
+
+const DEFAULT_INPUT_PLACEHOLDER = "";
+const MINIMUM_INPUT_WIDTH = 11;
+const TAG_BASE_WIDTH = {
+  small: 42,
+  mini: 33
+};
+const useSelect = (props) => {
+  const { t } = useLocaleInject();
+  const elForm = inject(elFormKey, {});
+  const elFormItem = inject(elFormItemKey, {});
+  const $ELEMENT = useGlobalConfig();
+  const states = reactive({
+    inputValue: DEFAULT_INPUT_PLACEHOLDER,
+    displayInputValue: DEFAULT_INPUT_PLACEHOLDER,
+    calculatedWidth: 0,
+    cachedPlaceholder: "",
+    cachedOptions: [],
+    createdOptions: [],
+    createdLabel: "",
+    createdSelected: false,
+    currentPlaceholder: "",
+    hoveringIndex: -1,
+    comboBoxHovering: false,
+    isOnComposition: false,
+    isSilentBlur: false,
+    isComposing: false,
+    inputLength: 20,
+    selectWidth: 200,
+    initialInputHeight: 0,
+    previousQuery: null,
+    previousValue: "",
+    query: "",
+    selectedLabel: "",
+    softFocus: false,
+    tagInMultiLine: false
+  });
+  const inputRef = ref(null);
+  const selectRef = ref(null);
+  const selectionRef = ref(null);
+  const calculatorRef = ref(null);
+  const expanded = ref(false);
+  const selectDisabled = computed(() => props.disabled || elForm.disabled);
+  const showClearBtn = computed(() => {
+    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;
+  });
+  const iconComponent = computed(() => props.remote && props.filterable ? "" : ArrowUp);
+  const iconReverse = computed(() => iconComponent.value && expanded.value ? "is-reverse" : "");
+  const filteredOptions = computed(() => {
+    const isValidOption = (o) => {
+      const query = states.inputValue;
+      const containsQueryString = query ? o.label.includes(query) : true;
+      return containsQueryString;
+    };
+    if (props.loading) {
+      return [];
+    }
+    return flattenOptions(props.options.concat(states.createdOptions).map((v) => {
+      if (isArray(v.options)) {
+        const filtered = v.options.filter(isValidOption);
+        if (filtered.length > 0) {
+          return {
+            ...v,
+            options: filtered
+          };
+        }
+      } else {
+        if (props.remote || isValidOption(v)) {
+          return v;
+        }
+      }
+      return null;
+    }).filter((v) => v !== null));
+  });
+  const selectSize = computed(() => props.size || elFormItem.size || $ELEMENT.size);
+  const collapseTagSize = computed(() => ["small", "mini"].indexOf(selectSize.value) > -1 ? "mini" : "small");
+  const tagMaxWidth = computed(() => {
+    const select = selectionRef.value;
+    const size = collapseTagSize.value;
+    const paddingLeft = select ? parseInt(getComputedStyle(select).paddingLeft) : 0;
+    const paddingRight = select ? parseInt(getComputedStyle(select).paddingRight) : 0;
+    return states.selectWidth - paddingRight - paddingLeft - TAG_BASE_WIDTH[size];
+  });
+  const inputWrapperStyle = computed(() => {
+    return {
+      width: `${states.calculatedWidth === 0 ? MINIMUM_INPUT_WIDTH : Math.ceil(states.calculatedWidth) + MINIMUM_INPUT_WIDTH}px`
+    };
+  });
+  const shouldShowPlaceholder = computed(() => {
+    if (isArray(props.modelValue)) {
+      return props.modelValue.length === 0 && !states.displayInputValue;
+    }
+    return props.filterable ? states.displayInputValue.length === 0 : true;
+  });
+  const currentPlaceholder = computed(() => {
+    const _placeholder = props.placeholder || t("el.select.placeholder");
+    return props.multiple ? _placeholder : states.selectedLabel || _placeholder;
+  });
+  const initStates = () => {
+    if (props.multiple) {
+      if (props.modelValue.length > 0) {
+        let initHovering = false;
+        states.cachedOptions.length = 0;
+        props.modelValue.map((selected) => {
+          const itemIndex = filteredOptions.value.findIndex((option) => option.value === selected);
+          if (~itemIndex) {
+            states.cachedOptions.push(filteredOptions.value[itemIndex]);
+            initHovering = true;
+          }
+        });
+      } else {
+        states.cachedOptions = [];
+      }
+    } else {
+      if (props.modelValue) {
+        const options = filteredOptions.value;
+        const selectedItemIndex = options.findIndex((o) => o.value === props.modelValue);
+        if (~selectedItemIndex) {
+          states.selectedLabel = options[selectedItemIndex].label;
+        } else {
+          states.selectedLabel = `${props.modelValue}`;
+        }
+      } else {
+        states.selectedLabel = "";
+      }
+    }
+  };
+  onMounted(() => {
+    initStates();
+  });
+  return {
+    collapseTagSize,
+    currentPlaceholder,
+    expanded,
+    iconComponent,
+    iconReverse,
+    inputWrapperStyle,
+    shouldShowPlaceholder,
+    selectDisabled,
+    selectSize,
+    showClearBtn,
+    states,
+    tagMaxWidth,
+    calculatorRef,
+    inputRef,
+    selectRef,
+    selectionRef
+  };
+};
+
+export { useSelect as default };
+//# sourceMappingURL=useSelect.mjs.map

package/es/packages/components/select-v2/src/useSelect.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSelect.mjs","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":[],"mappings":"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"}

package/es/packages/components/select-v2/src/util.mjs

@@ -0,0 +1,26 @@
+import { isArray } from '@vue/shared';
+
+const flattenOptions = (options) => {
+  const flattened = [];
+  options.map((option) => {
+    if (isArray(option.options)) {
+      flattened.push({
+        label: option.label,
+        isTitle: true,
+        type: "Group"
+      });
+      option.options.forEach((o) => {
+        flattened.push(o);
+      });
+      flattened.push({
+        type: "Group"
+      });
+    } else {
+      flattened.push(option);
+    }
+  });
+  return flattened;
+};
+
+export { flattenOptions };
+//# sourceMappingURL=util.mjs.map

package/es/packages/components/select-v2/src/util.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"util.mjs","sources":["../../../../../../../packages/components/select-v2/src/util.ts"],"sourcesContent":["import { isArray } from '@vue/shared'\n\nimport type { Option, OptionGroup } from './select.types'\n\nexport const flattenOptions = (options: Array<Option | OptionGroup>) => {\n  const flattened: any[] = []\n  options.map((option) => {\n    if (isArray(option.options)) {\n      flattened.push({\n        label: option.label,\n        isTitle: true,\n        type: 'Group',\n      })\n\n      option.options.forEach((o: Option) => {\n        flattened.push(o)\n      })\n      flattened.push({\n        type: 'Group',\n      })\n    } else {\n      flattened.push(option)\n    }\n  })\n\n  return flattened\n}\n"],"names":[],"mappings":";;MAIa,iBAAiB,CAAC,YAAyC;AACtE,QAAM,YAAmB;AACzB,UAAQ,IAAI,CAAC,WAAW;AACtB,QAAI,QAAQ,OAAO,UAAU;AAC3B,gBAAU,KAAK;AAAA,QACb,OAAO,OAAO;AAAA,QACd,SAAS;AAAA,QACT,MAAM;AAAA;AAGR,aAAO,QAAQ,QAAQ,CAAC,MAAc;AACpC,kBAAU,KAAK;AAAA;AAEjB,gBAAU,KAAK;AAAA,QACb,MAAM;AAAA;AAAA,WAEH;AACL,gBAAU,KAAK;AAAA;AAAA;AAInB,SAAO;AAAA;;;;"}

package/es/packages/components/skeleton/index.mjs

@@ -0,0 +1,14 @@
+import { withInstall, withNoopInstall } from '../../utils/with-install.mjs';
+import './src/index.mjs';
+import './src/item.mjs';
+import './src/types.mjs';
+import script from './src/index.vue_vue&type=script&lang.mjs';
+import script$1 from './src/item.vue_vue&type=script&lang.mjs';
+
+const PsSkeleton = withInstall(script, {
+  SkeletonItem: script$1
+});
+const PsSkeletonItem = withNoopInstall(script$1);
+
+export { PsSkeleton, PsSkeletonItem, PsSkeleton as default };
+//# sourceMappingURL=index.mjs.map

package/es/packages/components/skeleton/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../../../../../packages/components/skeleton/index.ts"],"sourcesContent":["import { withInstall, withNoopInstall } from '@element-ps/utils/with-install'\n\nimport Skeleton from './src/index.vue'\nimport SkeletonItem from './src/item.vue'\n\nexport const PsSkeleton = withInstall(Skeleton, {\n  SkeletonItem,\n})\nexport default PsSkeleton\nexport const PsSkeletonItem = withNoopInstall(SkeletonItem)\n\nexport * from './src/types'\n"],"names":["Skeleton","SkeletonItem"],"mappings":";;;;;;;MAKa,aAAa,YAAYA,QAAU;AAAA,gBAC9CC;AAAA;MAGW,iBAAiB,gBAAgBA;;;;"}

package/es/packages/components/skeleton/src/image-placeholder.mjs

@@ -0,0 +1,7 @@
+import script from './image-placeholder.vue_vue&type=script&lang.mjs';
+export { default } from './image-placeholder.vue_vue&type=script&lang.mjs';
+import { render } from './image-placeholder.vue_vue&type=template&id=f0b3074e&lang.mjs';
+
+script.render = render;
+script.__file = "packages/components/skeleton/src/image-placeholder.vue";
+//# sourceMappingURL=image-placeholder.mjs.map

package/es/packages/components/skeleton/src/image-placeholder.mjs.map

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

package/es/packages/components/skeleton/src/image-placeholder.vue_vue&type=script&lang.mjs

@@ -0,0 +1,8 @@
+import { defineComponent } from 'vue';
+
+var script = defineComponent({
+  name: "ImgPlaceholder"
+});
+
+export { script as default };
+//# sourceMappingURL=image-placeholder.vue_vue&type=script&lang.mjs.map

package/es/packages/components/skeleton/src/image-placeholder.vue_vue&type=script&lang.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-placeholder.vue_vue&type=script&lang.mjs","sources":["../../../../../../../packages/components/skeleton/src/image-placeholder.vue"],"sourcesContent":["<template>\n  <svg viewBox=\"0 0 1024 1024\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n      d=\"M64 896V128h896v768H64z m64-128l192-192 116.352 116.352L640 448l256 307.2V192H128v576z m224-480a96 96 0 1 1-0.064 192.064A96 96 0 0 1 352 288z\"\n    />\n  </svg>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\n\nexport default defineComponent({\n  name: 'ImgPlaceholder',\n})\n</script>\n"],"names":[],"mappings":";;AAWA,aAAe,gBAAgB;AAAA,EAC7B,MAAM;AAAA;;;;"}

package/es/packages/components/skeleton/src/image-placeholder.vue_vue&type=template&id=f0b3074e&lang.mjs

@@ -0,0 +1,16 @@
+import { createElementVNode, openBlock, createElementBlock } from 'vue';
+
+const _hoisted_1 = {
+  viewBox: "0 0 1024 1024",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+const _hoisted_2 = /* @__PURE__ */ createElementVNode("path", { d: "M64 896V128h896v768H64z m64-128l192-192 116.352 116.352L640 448l256 307.2V192H128v576z m224-480a96 96 0 1 1-0.064 192.064A96 96 0 0 1 352 288z" }, null, -1);
+const _hoisted_3 = [
+  _hoisted_2
+];
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3);
+}
+
+export { render };
+//# sourceMappingURL=image-placeholder.vue_vue&type=template&id=f0b3074e&lang.mjs.map

package/es/packages/components/skeleton/src/image-placeholder.vue_vue&type=template&id=f0b3074e&lang.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-placeholder.vue_vue&type=template&id=f0b3074e&lang.mjs","sources":["../../../../../../../packages/components/skeleton/src/image-placeholder.vue?vue&type=template&id=f0b3074e&lang.js"],"sourcesContent":["<template>\n  <svg viewBox=\"0 0 1024 1024\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n      d=\"M64 896V128h896v768H64z m64-128l192-192 116.352 116.352L640 448l256 307.2V192H128v576z m224-480a96 96 0 1 1-0.064 192.064A96 96 0 0 1 352 288z\"\n    />\n  </svg>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\n\nexport default defineComponent({\n  name: 'ImgPlaceholder',\n})\n</script>\n"],"names":["_createElementBlock"],"mappings":";;;EACO,SAAQ;AAAA,EAAgB,OAAM;AAAA;gEAE/B,GAAE;;EADJ;AAAA;;sBADFA,0BAAA;;;;;"}

package/es/packages/components/skeleton/src/index.mjs

@@ -0,0 +1,7 @@
+import script from './index.vue_vue&type=script&lang.mjs';
+export { default } from './index.vue_vue&type=script&lang.mjs';
+import { render } from './index.vue_vue&type=template&id=0065b6ac&lang.mjs';
+
+script.render = render;
+script.__file = "packages/components/skeleton/src/index.vue";
+//# sourceMappingURL=index.mjs.map

package/es/packages/components/skeleton/src/index.mjs.map

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

package/es/packages/components/skeleton/src/index.vue_vue&type=script&lang.mjs

@@ -0,0 +1,45 @@
+import { defineComponent, computed } from 'vue';
+import './item.mjs';
+import script$1 from './item.vue_vue&type=script&lang.mjs';
+
+var script = defineComponent({
+  name: "PsSkeleton",
+  components: {
+    [script$1.name]: script$1
+  },
+  props: {
+    animated: {
+      type: Boolean,
+      default: false
+    },
+    count: {
+      type: Number,
+      default: 1
+    },
+    rows: {
+      type: Number,
+      default: 3
+    },
+    loading: {
+      type: Boolean,
+      default: true
+    },
+    throttle: {
+      type: Number
+    },
+    widget: {
+      type: String
+    }
+  },
+  setup(props) {
+    const innerLoading = computed(() => {
+      return props.loading;
+    });
+    return {
+      uiLoading: innerLoading
+    };
+  }
+});
+
+export { script as default };
+//# sourceMappingURL=index.vue_vue&type=script&lang.mjs.map

package/es/packages/components/skeleton/src/index.vue_vue&type=script&lang.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.vue_vue&type=script&lang.mjs","sources":["../../../../../../../packages/components/skeleton/src/index.vue"],"sourcesContent":["<template>\n  <template v-if=\"uiLoading\">\n    <div\n      :class=\"['el-skeleton', animated ? 'is-animated' : '']\"\n      v-bind=\"$attrs\"\n      :widget=\"widget\"\n    >\n      <template v-for=\"i in count\" :key=\"i\">\n        <slot v-if=\"loading\" :key=\"i\" name=\"template\">\n          <el-skeleton-item class=\"is-first\" variant=\"p\" />\n          <el-skeleton-item\n            v-for=\"item in rows\"\n            :key=\"item\"\n            :class=\"{\n              'el-skeleton__paragraph': true,\n              'is-last': item === rows && rows > 1,\n            }\"\n            variant=\"p\"\n          />\n        </slot>\n      </template>\n    </div>\n  </template>\n  <template v-else>\n    <div :widget=\"widget\">\n      <slot v-bind=\"$attrs\"></slot>\n    </div>\n  </template>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed } from 'vue'\nimport SkeletonItem from './item.vue'\n\nexport default defineComponent({\n  name: 'PsSkeleton',\n  components: {\n    [SkeletonItem.name]: SkeletonItem,\n  },\n  props: {\n    animated: {\n      type: Boolean,\n      default: false,\n    },\n    count: {\n      type: Number,\n      default: 1,\n    },\n    rows: {\n      type: Number,\n      default: 3,\n    },\n    loading: {\n      type: Boolean,\n      default: true,\n    },\n    throttle: {\n      type: Number,\n    },\n    widget: {\n      type: String,\n    },\n  },\n  setup(props) {\n    const innerLoading = computed(() => {\n      return props.loading\n    })\n\n    return {\n      uiLoading: innerLoading,\n    }\n  },\n})\n</script>\n"],"names":["SkeletonItem"],"mappings":";;;;AAkCA,aAAe,gBAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,KACTA,SAAa,OAAOA;AAAA;AAAA,EAEvB,OAAO;AAAA,IACL,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA;AAAA,IAEX,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA;AAAA,IAEX,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA;AAAA,IAEX,SAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA;AAAA,IAEX,UAAU;AAAA,MACR,MAAM;AAAA;AAAA,IAER,QAAQ;AAAA,MACN,MAAM;AAAA;AAAA;AAAA,EAGV,MAAM,OAAO;AACX,UAAM,eAAe,SAAS,MAAM;AAClC,aAAO,MAAM;AAAA;AAGf,WAAO;AAAA,MACL,WAAW;AAAA;AAAA;AAAA;;;;"}

package/es/packages/components/skeleton/src/index.vue_vue&type=template&id=0065b6ac&lang.mjs

@@ -0,0 +1,40 @@
+import { resolveComponent, openBlock, createElementBlock, mergeProps, Fragment, renderList, renderSlot, createVNode, createBlock, normalizeClass, createCommentVNode, normalizeProps, guardReactiveProps } from 'vue';
+
+const _hoisted_1 = ["widget"];
+const _hoisted_2 = ["widget"];
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_el_skeleton_item = resolveComponent("el-skeleton-item");
+  return _ctx.uiLoading ? (openBlock(), createElementBlock("div", mergeProps({
+    key: 0,
+    class: ["el-skeleton", _ctx.animated ? "is-animated" : ""]
+  }, _ctx.$attrs, { widget: _ctx.widget }), [
+    (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.count, (i) => {
+      return openBlock(), createElementBlock(Fragment, { key: i }, [
+        _ctx.loading ? renderSlot(_ctx.$slots, "template", { key: i }, () => [
+          createVNode(_component_el_skeleton_item, {
+            class: "is-first",
+            variant: "p"
+          }),
+          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.rows, (item) => {
+            return openBlock(), createBlock(_component_el_skeleton_item, {
+              key: item,
+              class: normalizeClass({
+                "el-skeleton__paragraph": true,
+                "is-last": item === _ctx.rows && _ctx.rows > 1
+              }),
+              variant: "p"
+            }, null, 8, ["class"]);
+          }), 128))
+        ]) : createCommentVNode("v-if", true)
+      ], 64);
+    }), 128))
+  ], 16, _hoisted_1)) : (openBlock(), createElementBlock("div", {
+    key: 1,
+    widget: _ctx.widget
+  }, [
+    renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(_ctx.$attrs)))
+  ], 8, _hoisted_2));
+}
+
+export { render };
+//# sourceMappingURL=index.vue_vue&type=template&id=0065b6ac&lang.mjs.map

package/es/packages/components/skeleton/src/index.vue_vue&type=template&id=0065b6ac&lang.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.vue_vue&type=template&id=0065b6ac&lang.mjs","sources":["../../../../../../../packages/components/skeleton/src/index.vue?vue&type=template&id=0065b6ac&lang.js"],"sourcesContent":["<template>\n  <template v-if=\"uiLoading\">\n    <div\n      :class=\"['el-skeleton', animated ? 'is-animated' : '']\"\n      v-bind=\"$attrs\"\n      :widget=\"widget\"\n    >\n      <template v-for=\"i in count\" :key=\"i\">\n        <slot v-if=\"loading\" :key=\"i\" name=\"template\">\n          <el-skeleton-item class=\"is-first\" variant=\"p\" />\n          <el-skeleton-item\n            v-for=\"item in rows\"\n            :key=\"item\"\n            :class=\"{\n              'el-skeleton__paragraph': true,\n              'is-last': item === rows && rows > 1,\n            }\"\n            variant=\"p\"\n          />\n        </slot>\n      </template>\n    </div>\n  </template>\n  <template v-else>\n    <div :widget=\"widget\">\n      <slot v-bind=\"$attrs\"></slot>\n    </div>\n  </template>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed } from 'vue'\nimport SkeletonItem from './item.vue'\n\nexport default defineComponent({\n  name: 'PsSkeleton',\n  components: {\n    [SkeletonItem.name]: SkeletonItem,\n  },\n  props: {\n    animated: {\n      type: Boolean,\n      default: false,\n    },\n    count: {\n      type: Number,\n      default: 1,\n    },\n    rows: {\n      type: Number,\n      default: 3,\n    },\n    loading: {\n      type: Boolean,\n      default: true,\n    },\n    throttle: {\n      type: Number,\n    },\n    widget: {\n      type: String,\n    },\n  },\n  setup(props) {\n    const innerLoading = computed(() => {\n      return props.loading\n    })\n\n    return {\n      uiLoading: innerLoading,\n    }\n  },\n})\n</script>\n"],"names":["_createElementBlock","_mergeProps","_renderSlot","_createVNode","_createBlock"],"mappings":";;;;;;SACkB,+BACdA,0BAAAC;;IACG,uBAAuB;KAChB,eACP,QAAQ;sBAETD,8CAAsB,aAAL;8DAAkB;QACrB,eAAZE,sCAAsB,KAAK,KAA3B;UACEC;YAAkB,OAAM;AAAA,YAAW,SAAQ;AAAA;AAAA,4BAC3CH,8CACiB,YAAR;gCADTI;cAEG,KAAK;AAAA,cACL;;;;cAID,SAAQ;AAAA;;;;;sCAOhBJ;;IAAM,QAAQ;;IACZE,qEAAc;;;;;;"}

package/es/packages/components/skeleton/src/item.mjs

@@ -0,0 +1,7 @@
+import script from './item.vue_vue&type=script&lang.mjs';
+export { default } from './item.vue_vue&type=script&lang.mjs';
+import { render } from './item.vue_vue&type=template&id=70f521eb&lang.mjs';
+
+script.render = render;
+script.__file = "packages/components/skeleton/src/item.vue";
+//# sourceMappingURL=item.mjs.map

package/es/packages/components/skeleton/src/item.mjs.map

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