element-ps 1.0.14 → 1.0.17

package/es/packages/components/rate/src/rate.mjs

@@ -0,0 +1,87 @@
+import { StarFilled, Star } from '@element-plus/icons';
+import { UPDATE_MODEL_EVENT } from '../../../utils/constants.mjs';
+import { buildProps, definePropType, mutable } from '../../../utils/props.mjs';
+
+const rateProps = buildProps({
+  modelValue: {
+    type: Number,
+    default: 0
+  },
+  lowThreshold: {
+    type: Number,
+    default: 2
+  },
+  highThreshold: {
+    type: Number,
+    default: 4
+  },
+  max: {
+    type: Number,
+    default: 5
+  },
+  colors: {
+    type: definePropType([Array, Object]),
+    default: () => mutable(["#F7BA2A", "#F7BA2A", "#F7BA2A"])
+  },
+  voidColor: {
+    type: String,
+    default: "#C6D1DE"
+  },
+  disabledVoidColor: {
+    type: String,
+    default: "#EFF2F7"
+  },
+  icons: {
+    type: definePropType([Array, Object]),
+    default: () => [StarFilled, StarFilled, StarFilled]
+  },
+  voidIcon: {
+    type: definePropType([String, Object]),
+    default: () => Star
+  },
+  disabledvoidIcon: {
+    type: definePropType([String, Object]),
+    default: () => StarFilled
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  allowHalf: {
+    type: Boolean,
+    default: false
+  },
+  showText: {
+    type: Boolean,
+    default: false
+  },
+  showScore: {
+    type: Boolean,
+    default: false
+  },
+  textColor: {
+    type: String,
+    default: "#1f2d3d"
+  },
+  texts: {
+    type: definePropType([Array]),
+    default: () => mutable([
+      "Extremely bad",
+      "Disappointed",
+      "Fair",
+      "Satisfied",
+      "Surprise"
+    ])
+  },
+  scoreTemplate: {
+    type: String,
+    default: "{value}"
+  }
+});
+const rateEmits = {
+  change: (value) => typeof value === "number",
+  [UPDATE_MODEL_EVENT]: (value) => typeof value === "number"
+};
+
+export { rateEmits, rateProps };
+//# sourceMappingURL=rate.mjs.map

package/es/packages/components/rate/src/rate.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"rate.mjs","sources":["../../../../../../../packages/components/rate/src/rate.ts"],"sourcesContent":["import { Star, StarFilled } from '@element-plus/icons'\nimport { UPDATE_MODEL_EVENT } from '@element-ps/utils/constants'\nimport { buildProps, definePropType, mutable } from '@element-ps/utils/props'\nimport type { Component, ExtractPropTypes } from 'vue'\n\nexport const rateProps = buildProps({\n  modelValue: {\n    type: Number,\n    default: 0,\n  },\n  lowThreshold: {\n    type: Number,\n    default: 2,\n  },\n  highThreshold: {\n    type: Number,\n    default: 4,\n  },\n  max: {\n    type: Number,\n    default: 5,\n  },\n  colors: {\n    type: definePropType<string[] | Record<number, string>>([Array, Object]),\n    default: () => mutable(['#F7BA2A', '#F7BA2A', '#F7BA2A'] as const),\n  },\n  voidColor: {\n    type: String,\n    default: '#C6D1DE',\n  },\n  disabledVoidColor: {\n    type: String,\n    default: '#EFF2F7',\n  },\n  icons: {\n    type: definePropType<\n      Array<string | Component> | Record<number, string | Component>\n    >([Array, Object]),\n    default: () => [StarFilled, StarFilled, StarFilled],\n  },\n  voidIcon: {\n    type: definePropType<string | Component>([String, Object]),\n    default: () => Star,\n  },\n  disabledvoidIcon: {\n    type: definePropType<string | Component>([String, Object]),\n    default: () => StarFilled,\n  },\n  disabled: {\n    type: Boolean,\n    default: false,\n  },\n  allowHalf: {\n    type: Boolean,\n    default: false,\n  },\n  showText: {\n    type: Boolean,\n    default: false,\n  },\n  showScore: {\n    type: Boolean,\n    default: false,\n  },\n  textColor: {\n    type: String,\n    default: '#1f2d3d',\n  },\n  texts: {\n    type: definePropType<string[]>([Array]),\n    default: () =>\n      mutable([\n        'Extremely bad',\n        'Disappointed',\n        'Fair',\n        'Satisfied',\n        'Surprise',\n      ] as const),\n  },\n  scoreTemplate: {\n    type: String,\n    default: '{value}',\n  },\n} as const)\n\nexport type RateProps = ExtractPropTypes<typeof rateProps>\n\nexport const rateEmits = {\n  change: (value: number) => typeof value === 'number',\n  [UPDATE_MODEL_EVENT]: (value: number) => typeof value === 'number',\n}\nexport type RateEmits = typeof rateEmits\n"],"names":[],"mappings":";;;;MAKa,YAAY,WAAW;AAAA,EAClC,YAAY;AAAA,IACV,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,cAAc;AAAA,IACZ,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,eAAe;AAAA,IACb,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,KAAK;AAAA,IACH,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,QAAQ;AAAA,IACN,MAAM,eAAkD,CAAC,OAAO;AAAA,IAChE,SAAS,MAAM,QAAQ,CAAC,WAAW,WAAW;AAAA;AAAA,EAEhD,WAAW;AAAA,IACT,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,mBAAmB;AAAA,IACjB,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,OAAO;AAAA,IACL,MAAM,eAEJ,CAAC,OAAO;AAAA,IACV,SAAS,MAAM,CAAC,YAAY,YAAY;AAAA;AAAA,EAE1C,UAAU;AAAA,IACR,MAAM,eAAmC,CAAC,QAAQ;AAAA,IAClD,SAAS,MAAM;AAAA;AAAA,EAEjB,kBAAkB;AAAA,IAChB,MAAM,eAAmC,CAAC,QAAQ;AAAA,IAClD,SAAS,MAAM;AAAA;AAAA,EAEjB,UAAU;AAAA,IACR,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,WAAW;AAAA,IACT,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,UAAU;AAAA,IACR,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,WAAW;AAAA,IACT,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,WAAW;AAAA,IACT,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,OAAO;AAAA,IACL,MAAM,eAAyB,CAAC;AAAA,IAChC,SAAS,MACP,QAAQ;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA,EAGN,eAAe;AAAA,IACb,MAAM;AAAA,IACN,SAAS;AAAA;AAAA;MAMA,YAAY;AAAA,EACvB,QAAQ,CAAC,UAAkB,OAAO,UAAU;AAAA,GAC3C,qBAAqB,CAAC,UAAkB,OAAO,UAAU;AAAA;;;;"}

package/es/packages/components/rate/src/{index.vue_vue&type=script&lang.mjs → rate.vue_vue&type=script&lang.mjs}

@@ -3,90 +3,32 @@ import { isObject, isArray } from '@vue/shared';
 import '../../../tokens/index.mjs';
 import { PsIcon } from '../../icon/index.mjs';
 import { StarFilled, Star } from '@element-plus/icons';
+import { rateProps } from './rate.mjs';
 import { elFormKey } from '../../../tokens/form.mjs';
 
+function getValueFromMap(value, map) {
+  const isExcludedObject = (val) => isObject(val);
+  const matchedKeys = Object.keys(map).map((key) => +key).filter((key) => {
+    const val = map[key];
+    const excluded = isExcludedObject(val) ? val.excluded : false;
+    return excluded ? value < key : value <= key;
+  }).sort((a, b) => a - b);
+  const matchedValue = map[matchedKeys[0]];
+  return isExcludedObject(matchedValue) && matchedValue.value || matchedValue;
+}
 var script = defineComponent({
   name: "PsRate",
-  components: { PsIcon, StarFilled, Star },
-  props: {
-    modelValue: {
-      type: Number,
-      default: 0
-    },
-    lowThreshold: {
-      type: Number,
-      default: 2
-    },
-    highThreshold: {
-      type: Number,
-      default: 4
-    },
-    max: {
-      type: Number,
-      default: 5
-    },
-    colors: {
-      type: [Array, Object],
-      default: () => ["#F7BA2A", "#F7BA2A", "#F7BA2A"]
-    },
-    voidColor: {
-      type: String,
-      default: "#C6D1DE"
-    },
-    disabledVoidColor: {
-      type: String,
-      default: "#EFF2F7"
-    },
-    icons: {
-      type: [Array, Object],
-      default: () => [StarFilled, StarFilled, StarFilled]
-    },
-    voidIcon: {
-      type: [String, Object],
-      default: Star
-    },
-    disabledvoidIcon: {
-      type: [String, Object],
-      default: StarFilled
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    allowHalf: {
-      type: Boolean,
-      default: false
-    },
-    showText: {
-      type: Boolean,
-      default: false
-    },
-    showScore: {
-      type: Boolean,
-      default: false
-    },
-    textColor: {
-      type: String,
-      default: "#1f2d3d"
-    },
-    texts: {
-      type: Array,
-      default: () => [
-        "Extremely bad",
-        "Disappointed",
-        "Fair",
-        "Satisfied",
-        "Surprise"
-      ]
-    },
-    scoreTemplate: {
-      type: String,
-      default: "{value}"
-    }
+  components: {
+    PsIcon,
+    StarFilled,
+    Star
   },
+  props: rateProps,
   setup(props) {
     const elForm = inject(elFormKey, {});
     const currentValue = ref(props.modelValue);
+    const hoverIndex = ref(-1);
+    const pointerAtLeftHalf = ref(true);
     const rateDisabled = computed(() => props.disabled || elForm.disabled);
     const text = computed(() => {
       let result = "";
@@ -97,15 +39,6 @@ var script = defineComponent({
       }
       return result;
     });
-    function getValueFromMap(value, map) {
-      const matchedKeys = Object.keys(map).filter((key) => {
-        const val = map[key];
-        const excluded = isObject(val) ? val.excluded : false;
-        return excluded ? value < key : value <= key;
-      }).sort((a, b) => a - b);
-      const matchedValue = map[matchedKeys[0]];
-      return isObject(matchedValue) ? matchedValue.value || matchedValue : matchedValue || "";
-    }
     const valueDecimal = computed(() => props.modelValue * 100 - Math.floor(props.modelValue) * 100);
     const colorMap = computed(() => isArray(props.colors) ? {
       [props.lowThreshold]: props.colors[0],
@@ -143,7 +76,6 @@ var script = defineComponent({
       result.fill(voidComponent.value, threshold, props.max);
       return result;
     });
-    const pointerAtLeftHalf = ref(true);
     function showDecimalIcon(item) {
       const showWhenDisabled = rateDisabled.value && valueDecimal.value > 0 && item - 1 < props.modelValue && item > props.modelValue;
       const showWhenAllowHalf = props.allowHalf && pointerAtLeftHalf.value && item - 0.5 <= currentValue.value && item > currentValue.value;
@@ -155,7 +87,6 @@ var script = defineComponent({
         color: item <= currentValue.value ? activeColor.value : voidColor
       };
     }
-    const hoverIndex = ref(-1);
     return {
       hoverIndex,
       currentValue,
@@ -171,4 +102,4 @@ var script = defineComponent({
 });
 
 export { script as default };
-//# sourceMappingURL=index.vue_vue&type=script&lang.mjs.map
+//# sourceMappingURL=rate.vue_vue&type=script&lang.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rate.vue_vue&type=script&lang.mjs","sources":["../../../../../../../packages/components/rate/src/rate.vue"],"sourcesContent":["<template>\n  <div\n    class=\"el-rate\"\n    role=\"slider\"\n    :aria-valuenow=\"currentValue\"\n    :aria-valuetext=\"text\"\n    aria-valuemin=\"0\"\n    :aria-valuemax=\"max\"\n    tabindex=\"0\"\n  >\n    <span\n      v-for=\"(item, key) in max\"\n      :key=\"key\"\n      class=\"el-rate__item\"\n      :style=\"{ cursor: rateDisabled ? 'auto' : 'pointer' }\"\n    >\n      <ps-icon\n        :class=\"[{ hover: hoverIndex === item }]\"\n        class=\"el-rate__icon\"\n        :style=\"getIconStyle(item)\"\n      >\n        <component :is=\"iconComponents[item - 1]\" />\n        <ps-icon\n          v-if=\"showDecimalIcon(item)\"\n          :style=\"decimalStyle\"\n          class=\"el-rate__icon el-rate__decimal\"\n        >\n          <component :is=\"decimalIconComponent\" />\n        </ps-icon>\n      </ps-icon>\n    </span>\n    <span\n      v-if=\"showText || showScore\"\n      class=\"el-rate__text\"\n      :style=\"{ color: textColor }\"\n    >\n      {{ text }}\n    </span>\n  </div>\n</template>\n<script lang=\"ts\">\nimport { defineComponent, inject, computed, ref, watch } from 'vue'\nimport { isObject, isArray } from '@vue/shared'\nimport { elFormKey } from '@element-ps/tokens'\nimport { PsIcon } from '@element-ps/components/icon'\nimport { StarFilled, Star } from '@element-plus/icons'\nimport { rateProps, rateEmits } from './rate'\nimport type { ElFormContext } from '@element-ps/tokens'\n\nfunction getValueFromMap<T>(\n  value: number,\n  map: Record<string, T | { excluded?: boolean; value: T }>\n) {\n  const isExcludedObject = (\n    val: unknown\n  ): val is { excluded?: boolean } & Record<any, unknown> => isObject(val)\n\n  const matchedKeys = Object.keys(map)\n    .map((key) => +key)\n    .filter((key) => {\n      const val = map[key]\n      const excluded = isExcludedObject(val) ? val.excluded : false\n      return excluded ? value < key : value <= key\n    })\n    .sort((a, b) => a - b)\n  const matchedValue = map[matchedKeys[0]]\n  return (isExcludedObject(matchedValue) && matchedValue.value) || matchedValue\n}\n\nexport default defineComponent({\n  name: 'PsRate',\n  components: {\n    PsIcon,\n    StarFilled,\n    Star,\n  },\n  props: rateProps,\n  setup(props) {\n    const elForm = inject(elFormKey, {} as ElFormContext)\n\n    const currentValue = ref(props.modelValue)\n    const hoverIndex = ref(-1)\n    const pointerAtLeftHalf = ref(true)\n\n    const rateDisabled = computed(() => props.disabled || elForm.disabled)\n    const text = computed(() => {\n      let result = ''\n      if (props.showScore) {\n        result = props.scoreTemplate.replace(\n          /\\{\\s*value\\s*\\}/,\n          rateDisabled.value ? `${props.modelValue}` : `${currentValue.value}`\n        )\n      } else if (props.showText) {\n        result = props.texts[Math.ceil(currentValue.value) - 1]\n      }\n      return result\n    })\n    const valueDecimal = computed(\n      () => props.modelValue * 100 - Math.floor(props.modelValue) * 100\n    )\n    const colorMap = computed(() =>\n      isArray(props.colors)\n        ? {\n            [props.lowThreshold]: props.colors[0],\n            [props.highThreshold]: { value: props.colors[1], excluded: true },\n            [props.max]: props.colors[2],\n          }\n        : props.colors\n    )\n    const activeColor = computed(() =>\n      getValueFromMap(currentValue.value, colorMap.value)\n    )\n    const decimalStyle = computed(() => {\n      let width = ''\n      if (rateDisabled.value) {\n        width = `${valueDecimal.value}%`\n      } else if (props.allowHalf) {\n        width = '50%'\n      }\n      return {\n        color: activeColor.value,\n        width,\n      }\n    })\n    const componentMap = computed(() =>\n      isArray(props.icons)\n        ? {\n            [props.lowThreshold]: props.icons[0],\n            [props.highThreshold]: {\n              value: props.icons[1],\n              excluded: true,\n            },\n            [props.max]: props.icons[2],\n          }\n        : props.icons\n    )\n    const decimalIconComponent = computed(() =>\n      getValueFromMap(props.modelValue, componentMap.value)\n    )\n    const voidComponent = computed(() =>\n      rateDisabled.value ? props.disabledvoidIcon : props.voidIcon\n    )\n    const activeComponent = computed(() =>\n      getValueFromMap(currentValue.value, componentMap.value)\n    )\n    const iconComponents = computed(() => {\n      const result = Array(props.max)\n      const threshold = currentValue.value\n      result.fill(activeComponent.value, 0, threshold)\n      result.fill(voidComponent.value, threshold, props.max)\n      return result\n    })\n\n    function showDecimalIcon(item: number) {\n      const showWhenDisabled =\n        rateDisabled.value &&\n        valueDecimal.value > 0 &&\n        item - 1 < props.modelValue &&\n        item > props.modelValue\n      const showWhenAllowHalf =\n        props.allowHalf &&\n        pointerAtLeftHalf.value &&\n        item - 0.5 <= currentValue.value &&\n        item > currentValue.value\n      return showWhenDisabled || showWhenAllowHalf\n    }\n\n    function getIconStyle(item: number) {\n      const voidColor = rateDisabled.value\n        ? props.disabledVoidColor\n        : props.voidColor\n      return {\n        color: item <= currentValue.value ? activeColor.value : voidColor,\n      }\n    }\n\n    return {\n      hoverIndex,\n      currentValue,\n      rateDisabled,\n      text,\n      decimalStyle,\n      decimalIconComponent,\n      iconComponents,\n\n      showDecimalIcon,\n      getIconStyle,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;AAiDA,yBACE,OACA,KACA;AACA,QAAM,mBAAmB,CACvB,QACyD,SAAS;AAEpE,QAAM,cAAc,OAAO,KAAK,KAC7B,IAAI,CAAC,QAAQ,CAAC,KACd,OAAO,CAAC,QAAQ;AACf,UAAM,MAAM,IAAI;AAChB,UAAM,WAAW,iBAAiB,OAAO,IAAI,WAAW;AACxD,WAAO,WAAW,QAAQ,MAAM,SAAS;AAAA,KAE1C,KAAK,CAAC,GAAG,MAAM,IAAI;AACtB,QAAM,eAAe,IAAI,YAAY;AACrC,SAAQ,iBAAiB,iBAAiB,aAAa,SAAU;AAAA;AAGnE,aAAe,gBAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA;AAAA,EAEF,OAAO;AAAA,EACP,MAAM,OAAO;AACX,UAAM,SAAS,OAAO,WAAW;AAEjC,UAAM,eAAe,IAAI,MAAM;AAC/B,UAAM,aAAa,IAAI;AACvB,UAAM,oBAAoB,IAAI;AAE9B,UAAM,eAAe,SAAS,MAAM,MAAM,YAAY,OAAO;AAC7D,UAAM,OAAO,SAAS,MAAM;AAC1B,UAAI,SAAS;AACb,UAAI,MAAM,WAAW;AACnB,iBAAS,MAAM,cAAc,QAC3B,mBACA,aAAa,QAAQ,GAAG,MAAM,eAAe,GAAG,aAAa;AAAA,iBAEtD,MAAM,UAAU;AACzB,iBAAS,MAAM,MAAM,KAAK,KAAK,aAAa,SAAS;AAAA;AAEvD,aAAO;AAAA;AAET,UAAM,eAAe,SACnB,MAAM,MAAM,aAAa,MAAM,KAAK,MAAM,MAAM,cAAc;AAEhE,UAAM,WAAW,SAAS,MACxB,QAAQ,MAAM,UACV;AAAA,OACG,MAAM,eAAe,MAAM,OAAO;AAAA,OAClC,MAAM,gBAAgB,EAAE,OAAO,MAAM,OAAO,IAAI,UAAU;AAAA,OAC1D,MAAM,MAAM,MAAM,OAAO;AAAA,QAE5B,MAAM;AAEZ,UAAM,cAAc,SAAS,MAC3B,gBAAgB,aAAa,OAAO,SAAS;AAE/C,UAAM,eAAe,SAAS,MAAM;AAClC,UAAI,QAAQ;AACZ,UAAI,aAAa,OAAO;AACtB,gBAAQ,GAAG,aAAa;AAAA,iBACf,MAAM,WAAW;AAC1B,gBAAQ;AAAA;AAEV,aAAO;AAAA,QACL,OAAO,YAAY;AAAA,QACnB;AAAA;AAAA;AAGJ,UAAM,eAAe,SAAS,MAC5B,QAAQ,MAAM,SACV;AAAA,OACG,MAAM,eAAe,MAAM,MAAM;AAAA,OACjC,MAAM,gBAAgB;AAAA,QACrB,OAAO,MAAM,MAAM;AAAA,QACnB,UAAU;AAAA;AAAA,OAEX,MAAM,MAAM,MAAM,MAAM;AAAA,QAE3B,MAAM;AAEZ,UAAM,uBAAuB,SAAS,MACpC,gBAAgB,MAAM,YAAY,aAAa;AAEjD,UAAM,gBAAgB,SAAS,MAC7B,aAAa,QAAQ,MAAM,mBAAmB,MAAM;AAEtD,UAAM,kBAAkB,SAAS,MAC/B,gBAAgB,aAAa,OAAO,aAAa;AAEnD,UAAM,iBAAiB,SAAS,MAAM;AACpC,YAAM,SAAS,MAAM,MAAM;AAC3B,YAAM,YAAY,aAAa;AAC/B,aAAO,KAAK,gBAAgB,OAAO,GAAG;AACtC,aAAO,KAAK,cAAc,OAAO,WAAW,MAAM;AAClD,aAAO;AAAA;AAGT,6BAAyB,MAAc;AACrC,YAAM,mBACJ,aAAa,SACb,aAAa,QAAQ,KACrB,OAAO,IAAI,MAAM,cACjB,OAAO,MAAM;AACf,YAAM,oBACJ,MAAM,aACN,kBAAkB,SAClB,OAAO,OAAO,aAAa,SAC3B,OAAO,aAAa;AACtB,aAAO,oBAAoB;AAAA;AAG7B,0BAAsB,MAAc;AAClC,YAAM,YAAY,aAAa,QAC3B,MAAM,oBACN,MAAM;AACV,aAAO;AAAA,QACL,OAAO,QAAQ,aAAa,QAAQ,YAAY,QAAQ;AAAA;AAAA;AAI5D,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,MACA;AAAA;AAAA;AAAA;;;;"}

package/es/packages/components/rate/src/{index.vue_vue&type=template&id=55b4fa7d&lang.mjs → rate.vue_vue&type=template&id=38c42df6&lang.mjs}

@@ -48,4 +48,4 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 }
 
 export { render };
-//# sourceMappingURL=index.vue_vue&type=template&id=55b4fa7d&lang.mjs.map
+//# sourceMappingURL=rate.vue_vue&type=template&id=38c42df6&lang.mjs.map

package/es/packages/components/rate/src/rate.vue_vue&type=template&id=38c42df6&lang.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"rate.vue_vue&type=template&id=38c42df6&lang.mjs","sources":["../../../../../../../packages/components/rate/src/rate.vue?vue&type=template&id=38c42df6&lang.js"],"sourcesContent":["<template>\n  <div\n    class=\"el-rate\"\n    role=\"slider\"\n    :aria-valuenow=\"currentValue\"\n    :aria-valuetext=\"text\"\n    aria-valuemin=\"0\"\n    :aria-valuemax=\"max\"\n    tabindex=\"0\"\n  >\n    <span\n      v-for=\"(item, key) in max\"\n      :key=\"key\"\n      class=\"el-rate__item\"\n      :style=\"{ cursor: rateDisabled ? 'auto' : 'pointer' }\"\n    >\n      <ps-icon\n        :class=\"[{ hover: hoverIndex === item }]\"\n        class=\"el-rate__icon\"\n        :style=\"getIconStyle(item)\"\n      >\n        <component :is=\"iconComponents[item - 1]\" />\n        <ps-icon\n          v-if=\"showDecimalIcon(item)\"\n          :style=\"decimalStyle\"\n          class=\"el-rate__icon el-rate__decimal\"\n        >\n          <component :is=\"decimalIconComponent\" />\n        </ps-icon>\n      </ps-icon>\n    </span>\n    <span\n      v-if=\"showText || showScore\"\n      class=\"el-rate__text\"\n      :style=\"{ color: textColor }\"\n    >\n      {{ text }}\n    </span>\n  </div>\n</template>\n<script lang=\"ts\">\nimport { defineComponent, inject, computed, ref, watch } from 'vue'\nimport { isObject, isArray } from '@vue/shared'\nimport { elFormKey } from '@element-ps/tokens'\nimport { PsIcon } from '@element-ps/components/icon'\nimport { StarFilled, Star } from '@element-plus/icons'\nimport { rateProps, rateEmits } from './rate'\nimport type { ElFormContext } from '@element-ps/tokens'\n\nfunction getValueFromMap<T>(\n  value: number,\n  map: Record<string, T | { excluded?: boolean; value: T }>\n) {\n  const isExcludedObject = (\n    val: unknown\n  ): val is { excluded?: boolean } & Record<any, unknown> => isObject(val)\n\n  const matchedKeys = Object.keys(map)\n    .map((key) => +key)\n    .filter((key) => {\n      const val = map[key]\n      const excluded = isExcludedObject(val) ? val.excluded : false\n      return excluded ? value < key : value <= key\n    })\n    .sort((a, b) => a - b)\n  const matchedValue = map[matchedKeys[0]]\n  return (isExcludedObject(matchedValue) && matchedValue.value) || matchedValue\n}\n\nexport default defineComponent({\n  name: 'PsRate',\n  components: {\n    PsIcon,\n    StarFilled,\n    Star,\n  },\n  props: rateProps,\n  setup(props) {\n    const elForm = inject(elFormKey, {} as ElFormContext)\n\n    const currentValue = ref(props.modelValue)\n    const hoverIndex = ref(-1)\n    const pointerAtLeftHalf = ref(true)\n\n    const rateDisabled = computed(() => props.disabled || elForm.disabled)\n    const text = computed(() => {\n      let result = ''\n      if (props.showScore) {\n        result = props.scoreTemplate.replace(\n          /\\{\\s*value\\s*\\}/,\n          rateDisabled.value ? `${props.modelValue}` : `${currentValue.value}`\n        )\n      } else if (props.showText) {\n        result = props.texts[Math.ceil(currentValue.value) - 1]\n      }\n      return result\n    })\n    const valueDecimal = computed(\n      () => props.modelValue * 100 - Math.floor(props.modelValue) * 100\n    )\n    const colorMap = computed(() =>\n      isArray(props.colors)\n        ? {\n            [props.lowThreshold]: props.colors[0],\n            [props.highThreshold]: { value: props.colors[1], excluded: true },\n            [props.max]: props.colors[2],\n          }\n        : props.colors\n    )\n    const activeColor = computed(() =>\n      getValueFromMap(currentValue.value, colorMap.value)\n    )\n    const decimalStyle = computed(() => {\n      let width = ''\n      if (rateDisabled.value) {\n        width = `${valueDecimal.value}%`\n      } else if (props.allowHalf) {\n        width = '50%'\n      }\n      return {\n        color: activeColor.value,\n        width,\n      }\n    })\n    const componentMap = computed(() =>\n      isArray(props.icons)\n        ? {\n            [props.lowThreshold]: props.icons[0],\n            [props.highThreshold]: {\n              value: props.icons[1],\n              excluded: true,\n            },\n            [props.max]: props.icons[2],\n          }\n        : props.icons\n    )\n    const decimalIconComponent = computed(() =>\n      getValueFromMap(props.modelValue, componentMap.value)\n    )\n    const voidComponent = computed(() =>\n      rateDisabled.value ? props.disabledvoidIcon : props.voidIcon\n    )\n    const activeComponent = computed(() =>\n      getValueFromMap(currentValue.value, componentMap.value)\n    )\n    const iconComponents = computed(() => {\n      const result = Array(props.max)\n      const threshold = currentValue.value\n      result.fill(activeComponent.value, 0, threshold)\n      result.fill(voidComponent.value, threshold, props.max)\n      return result\n    })\n\n    function showDecimalIcon(item: number) {\n      const showWhenDisabled =\n        rateDisabled.value &&\n        valueDecimal.value > 0 &&\n        item - 1 < props.modelValue &&\n        item > props.modelValue\n      const showWhenAllowHalf =\n        props.allowHalf &&\n        pointerAtLeftHalf.value &&\n        item - 0.5 <= currentValue.value &&\n        item > currentValue.value\n      return showWhenDisabled || showWhenAllowHalf\n    }\n\n    function getIconStyle(item: number) {\n      const voidColor = rateDisabled.value\n        ? props.disabledVoidColor\n        : props.voidColor\n      return {\n        color: item <= currentValue.value ? activeColor.value : voidColor,\n      }\n    }\n\n    return {\n      hoverIndex,\n      currentValue,\n      rateDisabled,\n      text,\n      decimalStyle,\n      decimalIconComponent,\n      iconComponents,\n\n      showDecimalIcon,\n      getIconStyle,\n    }\n  },\n})\n</script>\n"],"names":["_createElementBlock","_createVNode","_createBlock"],"mappings":";;;;;sBACEA;IACE,OAAM;AAAA,IACN,MAAK;AAAA,IACJ,iBAAe;IACf,kBAAgB;IACjB,iBAAc;AAAA,IACb,iBAAe;IAChB,UAAS;AAAA;sBAETA,8CACwB,WAAd,MAAM;0BADhBA;QAEG;AAAA,QACD,OAAM;AAAA,QACL,gCAAiB;;QAElBC;UACG,iCAAiB,oBAAe,SAC3B;AAAA,UACL,sBAAO,kBAAa;AAAA;2BAErB;0BAAAC,oCAAgB,oBAAe;YAEvB,qBAAgB,sBADxBA;;cAEG,sBAAO;cACR,OAAM;AAAA;+BAEN;8BAAAA,oCAAgB;;;;;;;;;IAKd,iBAAY,+BADpBF;;MAEE,OAAM;AAAA,MACL,+BAAgB;uBAEd;;;;;;"}

package/es/packages/components/rate/src/rate2.mjs

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

package/es/packages/components/rate/src/rate2.mjs.map

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

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

@@ -34,7 +34,7 @@ const SelectProps = {
   loading: Boolean,
   loadingText: String,
   label: String,
-  modelValue: [Array, String, Number, Boolean, Object],
+  _modelValue: [Array, String, Number, Boolean, Object],
   multiple: Boolean,
   multipleLimit: {
     type: Number,

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

@@ -1 +1 @@
-{"version":3,"file":"defaults.mjs","sources":["../../../../../../../packages/components/select-v2/src/defaults.ts"],"sourcesContent":["import { isValidComponentSize } from '@element-ps/utils/validators'\nimport { CircleClose } from '@element-plus/icons'\n\nimport type { PropType, Component } from 'vue'\nimport type { ComponentSize } from '@element-ps/utils/types'\nimport type { OptionType } from './select.types'\nimport type { Options } from '@element-ps/components/popper'\n\nexport const SelectProps = {\n  allowCreate: Boolean,\n  autocomplete: {\n    type: String as PropType<'none' | 'both' | 'list' | 'inline'>,\n    default: 'none',\n  },\n  automaticDropdown: Boolean,\n  clearable: Boolean,\n  clearIcon: {\n    type: [String, Object] as PropType<string | Component>,\n    default: CircleClose,\n  },\n  collapseTags: Boolean,\n  defaultFirstOption: Boolean,\n  disabled: Boolean,\n  estimatedOptionHeight: {\n    type: Number,\n    default: undefined,\n  },\n  filterable: Boolean,\n  filterMethod: Function,\n  height: {\n    type: Number,\n    default: 170, // 5 items by default\n  },\n  itemHeight: {\n    type: Number,\n    default: 34,\n  },\n  id: String,\n  loading: Boolean,\n  loadingText: String,\n  label: String,\n  modelValue: [Array, String, Number, Boolean, Object] as PropType<\n    any[] | string | number | boolean | Record<string, any> | any\n  >,\n  multiple: Boolean,\n  multipleLimit: {\n    type: Number,\n    default: 0,\n  },\n  name: String,\n  noDataText: String,\n  noMatchText: String,\n  remoteMethod: Function,\n  reserveKeyword: Boolean,\n  options: {\n    type: Array as PropType<OptionType[]>,\n    required: true,\n  },\n  placeholder: {\n    type: String,\n  },\n  popperAppendToBody: {\n    type: Boolean,\n    default: true,\n  },\n  popperClass: {\n    type: String,\n    default: '',\n  },\n  popperOptions: {\n    type: Object as PropType<Partial<Options>>,\n    default: () => ({} as Partial<Options>),\n  },\n  remote: Boolean,\n  size: {\n    type: String as PropType<ComponentSize>,\n    validator: isValidComponentSize,\n  },\n  valueKey: {\n    type: String,\n    default: 'value',\n  },\n}\n\nexport const OptionProps = {\n  data: Array,\n  disabled: Boolean,\n  hovering: Boolean,\n  item: Object,\n  index: Number,\n  style: Object,\n  selected: Boolean,\n  created: Boolean,\n}\n"],"names":[],"mappings":";;;MAQa,cAAc;AAAA,EACzB,aAAa;AAAA,EACb,cAAc;AAAA,IACZ,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,mBAAmB;AAAA,EACnB,WAAW;AAAA,EACX,WAAW;AAAA,IACT,MAAM,CAAC,QAAQ;AAAA,IACf,SAAS;AAAA;AAAA,EAEX,cAAc;AAAA,EACd,oBAAoB;AAAA,EACpB,UAAU;AAAA,EACV,uBAAuB;AAAA,IACrB,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,YAAY;AAAA,IACV,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,IAAI;AAAA,EACJ,SAAS;AAAA,EACT,aAAa;AAAA,EACb,OAAO;AAAA,EACP,YAAY,CAAC,OAAO,QAAQ,QAAQ,SAAS;AAAA,EAG7C,UAAU;AAAA,EACV,eAAe;AAAA,IACb,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,MAAM;AAAA,EACN,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,cAAc;AAAA,EACd,gBAAgB;AAAA,EAChB,SAAS;AAAA,IACP,MAAM;AAAA,IACN,UAAU;AAAA;AAAA,EAEZ,aAAa;AAAA,IACX,MAAM;AAAA;AAAA,EAER,oBAAoB;AAAA,IAClB,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,aAAa;AAAA,IACX,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,eAAe;AAAA,IACb,MAAM;AAAA,IACN,SAAS;AAAO;AAAA,EAElB,QAAQ;AAAA,EACR,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,WAAW;AAAA;AAAA,EAEb,UAAU;AAAA,IACR,MAAM;AAAA,IACN,SAAS;AAAA;AAAA;MAIA,cAAc;AAAA,EACzB,MAAM;AAAA,EACN,UAAU;AAAA,EACV,UAAU;AAAA,EACV,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AAAA,EACP,UAAU;AAAA,EACV,SAAS;AAAA;;;;"}
+{"version":3,"file":"defaults.mjs","sources":["../../../../../../../packages/components/select-v2/src/defaults.ts"],"sourcesContent":["import { isValidComponentSize } from '@element-ps/utils/validators'\nimport { CircleClose } from '@element-plus/icons'\n\nimport type { PropType, Component } from 'vue'\nimport type { ComponentSize } from '@element-ps/utils/types'\nimport type { OptionType } from './select.types'\nimport type { Options } from '@element-ps/components/popper'\n\nexport const SelectProps = {\n  allowCreate: Boolean,\n  autocomplete: {\n    type: String as PropType<'none' | 'both' | 'list' | 'inline'>,\n    default: 'none',\n  },\n  automaticDropdown: Boolean,\n  clearable: Boolean,\n  clearIcon: {\n    type: [String, Object] as PropType<string | Component>,\n    default: CircleClose,\n  },\n  collapseTags: Boolean,\n  defaultFirstOption: Boolean,\n  disabled: Boolean,\n  estimatedOptionHeight: {\n    type: Number,\n    default: undefined,\n  },\n  filterable: Boolean,\n  filterMethod: Function,\n  height: {\n    type: Number,\n    default: 170, // 5 items by default\n  },\n  itemHeight: {\n    type: Number,\n    default: 34,\n  },\n  id: String,\n  loading: Boolean,\n  loadingText: String,\n  label: String,\n  _modelValue: [Array, String, Number, Boolean, Object] as PropType<\n    any[] | string | number | boolean | Record<string, any> | any\n  >,\n  multiple: Boolean,\n  multipleLimit: {\n    type: Number,\n    default: 0,\n  },\n  name: String,\n  noDataText: String,\n  noMatchText: String,\n  remoteMethod: Function,\n  reserveKeyword: Boolean,\n  options: {\n    type: Array as PropType<OptionType[]>,\n    required: true,\n  },\n  placeholder: {\n    type: String,\n  },\n  popperAppendToBody: {\n    type: Boolean,\n    default: true,\n  },\n  popperClass: {\n    type: String,\n    default: '',\n  },\n  popperOptions: {\n    type: Object as PropType<Partial<Options>>,\n    default: () => ({} as Partial<Options>),\n  },\n  remote: Boolean,\n  size: {\n    type: String as PropType<ComponentSize>,\n    validator: isValidComponentSize,\n  },\n  valueKey: {\n    type: String,\n    default: 'value',\n  },\n}\n\nexport const OptionProps = {\n  data: Array,\n  disabled: Boolean,\n  hovering: Boolean,\n  item: Object,\n  index: Number,\n  style: Object,\n  selected: Boolean,\n  created: Boolean,\n}\n"],"names":[],"mappings":";;;MAQa,cAAc;AAAA,EACzB,aAAa;AAAA,EACb,cAAc;AAAA,IACZ,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,mBAAmB;AAAA,EACnB,WAAW;AAAA,EACX,WAAW;AAAA,IACT,MAAM,CAAC,QAAQ;AAAA,IACf,SAAS;AAAA;AAAA,EAEX,cAAc;AAAA,EACd,oBAAoB;AAAA,EACpB,UAAU;AAAA,EACV,uBAAuB;AAAA,IACrB,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,YAAY;AAAA,IACV,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,IAAI;AAAA,EACJ,SAAS;AAAA,EACT,aAAa;AAAA,EACb,OAAO;AAAA,EACP,aAAa,CAAC,OAAO,QAAQ,QAAQ,SAAS;AAAA,EAG9C,UAAU;AAAA,EACV,eAAe;AAAA,IACb,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,MAAM;AAAA,EACN,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,cAAc;AAAA,EACd,gBAAgB;AAAA,EAChB,SAAS;AAAA,IACP,MAAM;AAAA,IACN,UAAU;AAAA;AAAA,EAEZ,aAAa;AAAA,IACX,MAAM;AAAA;AAAA,EAER,oBAAoB;AAAA,IAClB,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,aAAa;AAAA,IACX,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,eAAe;AAAA,IACb,MAAM;AAAA,IACN,SAAS;AAAO;AAAA,EAElB,QAAQ;AAAA,EACR,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,WAAW;AAAA;AAAA,EAEb,UAAU;AAAA,IACR,MAAM;AAAA,IACN,SAAS;AAAA;AAAA;MAIA,cAAc;AAAA,EACzB,MAAM;AAAA,EACN,UAAU;AAAA,EACV,UAAU;AAAA,EACV,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AAAA,EACP,UAAU;AAAA,EACV,SAAS;AAAA;;;;"}

package/es/packages/components/select-v2/src/select.vue_vue&type=script&lang.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"select.vue_vue&type=script&lang.mjs","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":[],"mappings":";;;;;;;AAgLA,aAAe,gBAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV;AAAA,IACA;AAAA;AAAA,EAEF,OAAO;AAAA,EACP,MAAM,OAAO,EAAE,QAAQ;AACrB,UAAM,MAAM,UAAU,OAAO;AAE7B,YAAQ,sBAAsB;AAAA,MAC5B,OAAO,SAAS;AAAA,WACX,OAAO;AAAA;AAAA;AAId,WAAO;AAAA;AAAA;;;;"}
+{"version":3,"file":"select.vue_vue&type=script&lang.mjs","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":[],"mappings":";;;;;;;AAgLA,aAAe,gBAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV;AAAA,IACA;AAAA;AAAA,EAEF,OAAO;AAAA,EACP,MAAM,OAAO,EAAE,QAAQ;AACrB,UAAM,MAAM,UAAU,OAAO;AAC7B,YAAQ,sBAAsB;AAAA,MAC5B,OAAO,SAAS;AAAA,WACX,OAAO;AAAA;AAAA;AAId,WAAO;AAAA;AAAA;;;;"}

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

@@ -36,7 +36,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         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, [
+        _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,
@@ -53,7 +53,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             ]),
             _: 1
           }, 8, ["closable", "size"]),
-          _ctx.modelValue.length > 1 ? (openBlock(), createBlock(_component_ps_tag, {
+          _ctx._modelValue.length > 1 ? (openBlock(), createBlock(_component_ps_tag, {
             key: 0,
             closable: false,
             size: _ctx.collapseTagSize,
@@ -66,7 +66,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                 style: normalizeStyle({
                   maxWidth: `${_ctx.tagMaxWidth}px`
                 })
-              }, "+ " + toDisplayString(_ctx.modelValue.length - 1), 5)
+              }, "+ " + toDisplayString(_ctx._modelValue.length - 1), 5)
             ]),
             _: 1
           }, 8, ["size"])) : createCommentVNode("v-if", true)
@@ -157,7 +157,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         key: 3,
         class: 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)
         })
       }, toDisplayString(_ctx.currentPlaceholder), 3)) : createCommentVNode("v-if", true),
       createElementVNode("span", _hoisted_9, [

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

@@ -1 +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;;;;;;;;;;;"}
+{"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    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,iBAAY,2BAC1CA,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,iBAAY,2BADpBG;;YAEG,UAAU;AAAA,YACV,MAAM;YACP,MAAK;AAAA,YACL,uBAAA;AAAA;6BAEA;cAAAH;gBACE,OAAM;AAAA,gBACL;;;iBAGA,uBAAK,iBAAY;;;;gCAOxBD,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/useSelect.mjs

@@ -51,7 +51,7 @@ const useSelect = (props) => {
   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 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;
   });
@@ -98,8 +98,8 @@ const useSelect = (props) => {
     };
   });
   const shouldShowPlaceholder = computed(() => {
-    if (isArray(props.modelValue)) {
-      return props.modelValue.length === 0 && !states.displayInputValue;
+    if (isArray(props._modelValue)) {
+      return props._modelValue.length === 0 && !states.displayInputValue;
     }
     return props.filterable ? states.displayInputValue.length === 0 : true;
   });
@@ -109,10 +109,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]);
@@ -123,13 +123,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/es/packages/components/select-v2/src/useSelect.mjs.map

@@ -1 +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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"}
+{"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":";;;;;;;;;;AAYA,MAAM,4BAA4B;AAClC,MAAM,sBAAsB;AAC5B,MAAM,iBAAiB;AAAA,EACrB,OAAO;AAAA,EACP,MAAM;AAAA;MAGF,YAAY,CAAC,UAAgD;AAEjE,QAAM,EAAE,MAAM;AACd,QAAM,SAAS,OAAO,WAAW;AACjC,QAAM,aAAa,OAAO,eAAe;AACzC,QAAM,WAAW;AAEjB,QAAM,SAAS,SAAS;AAAA,IACtB,YAAY;AAAA,IACZ,mBAAmB;AAAA,IACnB,iBAAiB;AAAA,IACjB,mBAAmB;AAAA,IACnB,eAAe;AAAA,IACf,gBAAgB;AAAA,IAChB,cAAc;AAAA,IACd,iBAAiB;AAAA,IACjB,oBAAoB;AAAA,IACpB,eAAe;AAAA,IACf,kBAAkB;AAAA,IAClB,iBAAiB;AAAA,IACjB,cAAc;AAAA,IACd,aAAa;AAAA,IACb,aAAa;AAAA,IACb,aAAa;AAAA,IACb,oBAAoB;AAAA,IACpB,eAAe;AAAA,IACf,eAAe;AAAA,IACf,OAAO;AAAA,IACP,eAAe;AAAA,IACf,WAAW;AAAA,IACX,gBAAgB;AAAA;AAIlB,QAAM,WAAW,IAAI;AACrB,QAAM,YAAY,IAAI;AACtB,QAAM,eAAe,IAAI;AACzB,QAAM,gBAAgB,IAAiB;AAGvC,QAAM,WAAW,IAAI;AAErB,QAAM,iBAAiB,SAAS,MAAM,MAAM,YAAY,OAAO;AAE/D,QAAM,eAAe,SAAS,MAAM;AAClC,UAAM,WAAW,MAAM,WACnB,MAAM,QAAQ,MAAM,gBAAgB,MAAM,YAAY,SAAS,IAC/D,MAAM,gBAAgB,UACtB,MAAM,gBAAgB,QACtB,MAAM,gBAAgB;AAE1B,UAAM,WACJ,MAAM,aACN,CAAC,eAAe,SAChB,OAAO,oBACP;AACF,WAAO;AAAA;AAGT,QAAM,gBAAgB,SAAS,MAC7B,MAAM,UAAU,MAAM,aAAa,KAAK;AAG1C,QAAM,cAAc,SAAS,MAC3B,cAAc,SAAS,SAAS,QAAQ,eAAe;AAGzD,QAAM,kBAAkB,SAAS,MAAM;AACrC,UAAM,gBAAgB,CAAC,MAAuB;AAE5C,YAAM,QAAQ,OAAO;AAErB,YAAM,sBAAsB,QAAQ,EAAE,MAAM,SAAS,SAAS;AAC9D,aAAO;AAAA;AAET,QAAI,MAAM,SAAS;AACjB,aAAO;AAAA;AAET,WAAO,eACJ,MAAM,QACJ,OAAO,OAAO,gBACd,IAAI,CAAC,MAAM;AACV,UAAI,QAAQ,EAAE,UAAU;AACtB,cAAM,WAAW,EAAE,QAAQ,OAAO;AAClC,YAAI,SAAS,SAAS,GAAG;AACvB,iBAAO;AAAA,eACF;AAAA,YACH,SAAS;AAAA;AAAA;AAAA,aAGR;AACL,YAAI,MAAM,UAAU,cAAc,IAAc;AAC9C,iBAAO;AAAA;AAAA;AAGX,aAAO;AAAA,OAER,OAAO,CAAC,MAAM,MAAM;AAAA;AAI3B,QAAM,aAAa,SACjB,MAAM,MAAM,QAAQ,WAAW,QAAQ,SAAS;AAGlD,QAAM,kBAAkB,SAAS,MAC/B,CAAC,SAAS,QAAQ,QAAQ,WAAW,SAAS,KAAK,SAAS;AAG9D,QAAM,cAAc,SAAS,MAAM;AACjC,UAAM,SAAS,aAAa;AAC5B,UAAM,OAAO,gBAAgB;AAC7B,UAAM,cAAc,SAChB,SAAS,iBAAiB,QAAQ,eAClC;AACJ,UAAM,eAAe,SACjB,SAAS,iBAAiB,QAAQ,gBAClC;AACJ,WACE,OAAO,cAAc,eAAe,cAAc,eAAe;AAAA;AAIrE,QAAM,oBAAoB,SAAS,MAAM;AACvC,WAAO;AAAA,MACL,OAAO,GACL,OAAO,oBAAoB,IACvB,sBACA,KAAK,KAAK,OAAO,mBAAmB;AAAA;AAAA;AAK9C,QAAM,wBAAwB,SAAS,MAAM;AAC3C,QAAI,QAAQ,MAAM,cAAc;AAC9B,aAAO,MAAM,YAAY,WAAW,KAAK,CAAC,OAAO;AAAA;AAKnD,WAAO,MAAM,aAAa,OAAO,kBAAkB,WAAW,IAAI;AAAA;AAGpE,QAAM,qBAAqB,SAAS,MAAM;AACxC,UAAM,eAAe,MAAM,eAAe,EAAE;AAC5C,WAAO,MAAM,WAAW,eAAe,OAAO,iBAAiB;AAAA;AAGjE,QAAM,aAAa,MAAM;AACvB,QAAI,MAAM,UAAU;AAClB,UAAK,MAAM,YAA2B,SAAS,GAAG;AAChD,YAAI,eAAe;AACnB,eAAO,cAAc,SAAS;AAC7B,QAAC,MAAM,YAA2B,IAAI,CAAC,aAAa;AACnD,gBAAM,YAAY,gBAAgB,MAAM,UACtC,CAAC,WAAY,OAAe,UAAU;AAExC,cAAI,CAAC,WAAW;AACd,mBAAO,cAAc,KACnB,gBAAgB,MAAM;AAExB,2BAAe;AAAA;AAAA;AAAA,aAGd;AACL,eAAO,gBAAgB;AAAA;AAAA,WAEpB;AACL,UAAI,MAAM,aAAa;AACrB,cAAM,UAAU,gBAAgB;AAChC,cAAM,oBAAoB,QAAQ,UAChC,CAAC,MAAO,EAAU,UAAU,MAAM;AAEpC,YAAI,CAAC,mBAAmB;AACtB,iBAAO,gBAAiB,QAAQ,mBAA2B;AAAA,eACtD;AACL,iBAAO,gBAAgB,GAAG,MAAM;AAAA;AAAA,aAE7B;AACL,eAAO,gBAAgB;AAAA;AAAA;AAAA;AAK7B,YAAU,MAAM;AACd;AAAA;AAGF,SAAO;AAAA,IAEL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IAGA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;;;;"}

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

@@ -1,6 +1,6 @@
 import { withInstall } from '../../utils/with-install.mjs';
-import './src/tag2.mjs';
-export { tagProps } from './src/tag.mjs';
+import './src/tag.mjs';
+export { tagProps } from './src/tag2.mjs';
 import script from './src/tag.vue_vue&type=script&lang.mjs';
 
 const PsTag = withInstall(script);

package/es/packages/components/tag/src/tag.mjs

@@ -1,28 +1,7 @@
-import { buildProps } from '../../../utils/props.mjs';
+import script from './tag.vue_vue&type=script&lang.mjs';
+export { default } from './tag.vue_vue&type=script&lang.mjs';
+import { render } from './tag.vue_vue&type=template&id=525996c5&lang.mjs';
 
-const tagProps = buildProps({
-  closable: Boolean,
-  type: {
-    type: String,
-    values: ["success", "info", "warning", "danger", ""],
-    default: ""
-  },
-  hit: Boolean,
-  disableTransitions: Boolean,
-  color: {
-    type: String,
-    default: ""
-  },
-  size: {
-    type: String,
-    values: ["large", "medium", "small", "mini"]
-  },
-  effect: {
-    type: String,
-    values: ["dark", "light", "plain"],
-    default: "light"
-  }
-});
-
-export { tagProps };
+script.render = render;
+script.__file = "packages/components/tag/src/tag.vue";
 //# sourceMappingURL=tag.mjs.map

package/es/packages/components/tag/src/tag.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"tag.mjs","sources":["../../../../../../../packages/components/tag/src/tag.ts"],"sourcesContent":["import { buildProps } from '@element-ps/utils/props'\n\nimport type { ExtractPropTypes } from 'vue'\n\nexport const tagProps = buildProps({\n  closable: Boolean,\n  type: {\n    type: String,\n    values: ['success', 'info', 'warning', 'danger', ''],\n    default: '',\n  },\n  hit: Boolean,\n  disableTransitions: Boolean,\n  color: {\n    type: String,\n    default: '',\n  },\n  size: {\n    type: String,\n    values: ['large', 'medium', 'small', 'mini'],\n  },\n  effect: {\n    type: String,\n    values: ['dark', 'light', 'plain'],\n    default: 'light',\n  },\n} as const)\nexport type TagProps = ExtractPropTypes<typeof tagProps>\n"],"names":[],"mappings":";;MAIa,WAAW,WAAW;AAAA,EACjC,UAAU;AAAA,EACV,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,QAAQ,CAAC,WAAW,QAAQ,WAAW,UAAU;AAAA,IACjD,SAAS;AAAA;AAAA,EAEX,KAAK;AAAA,EACL,oBAAoB;AAAA,EACpB,OAAO;AAAA,IACL,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,QAAQ,CAAC,SAAS,UAAU,SAAS;AAAA;AAAA,EAEvC,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,QAAQ,CAAC,QAAQ,SAAS;AAAA,IAC1B,SAAS;AAAA;AAAA;;;;"}
+{"version":3,"file":"tag.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

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

@@ -2,7 +2,7 @@ import { defineComponent, computed } from 'vue';
 import { PsIcon } from '../../icon/index.mjs';
 import { useGlobalConfig } from '../../../utils/util.mjs';
 import { Close } from '@element-plus/icons';
-import { tagProps } from './tag.mjs';
+import { tagProps } from './tag2.mjs';
 
 var script = defineComponent({
   name: "PsTag",