@element-plus/nightly 0.0.20220117 → 0.0.20220118

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

@@ -10,6 +10,7 @@ import '../../../hooks/index.mjs';
 import { rateProps, rateEmits } from './rate.mjs';
 import { elFormKey } from '../../../tokens/form.mjs';
 import { useSize } from '../../../hooks/use-common-props/index.mjs';
+import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
 
 function getValueFromMap(value, map) {
   const isExcludedObject = (val) => isObject(val);
@@ -33,11 +34,11 @@ var script = defineComponent({
   setup(props, { emit }) {
     const elForm = inject(elFormKey, {});
     const rateSize = useSize();
+    const ns = useNamespace("rate");
     const currentValue = ref(props.modelValue);
     const hoverIndex = ref(-1);
     const pointerAtLeftHalf = ref(true);
-    const prefix = "el-rate";
-    const rateKls = computed(() => [prefix, `${prefix}--${rateSize.value}`]);
+    const rateKls = computed(() => [ns.b(), ns.m(rateSize.value)]);
     const rateDisabled = computed(() => props.disabled || elForm.disabled);
     const text = computed(() => {
       let result = "";
@@ -147,10 +148,10 @@ var script = defineComponent({
       }
       if (props.allowHalf) {
         let target = event.target;
-        if (hasClass(target, "el-rate__item")) {
-          target = target.querySelector(".el-rate__icon");
+        if (hasClass(target, ns.e("item"))) {
+          target = target.querySelector(`.${ns.e("icon")}`);
         }
-        if (target.clientWidth === 0 || hasClass(target, "el-rate__decimal")) {
+        if (target.clientWidth === 0 || hasClass(target, ns.e("decimal"))) {
           target = target.parentNode;
         }
         pointerAtLeftHalf.value = event.offsetX * 2 <= target.clientWidth;
@@ -178,6 +179,7 @@ var script = defineComponent({
       emit(UPDATE_MODEL_EVENT, 0);
     }
     return {
+      ns,
       hoverIndex,
       currentValue,
       rateDisabled,

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

@@ -1 +1 @@
-{"version":3,"file":"rate.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/rate/src/rate.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"rateKls\"\n    role=\"slider\"\n    :aria-valuenow=\"currentValue\"\n    :aria-valuetext=\"text\"\n    aria-valuemin=\"0\"\n    :aria-valuemax=\"max\"\n    tabindex=\"0\"\n    @keydown=\"handleKey\"\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      @mousemove=\"setCurrentValue(item, $event)\"\n      @mouseleave=\"resetCurrentValue\"\n      @click=\"selectValue(item)\"\n    >\n      <el-icon\n        :class=\"[{ hover: hoverIndex === item }]\"\n        class=\"el-rate__icon\"\n        :style=\"getIconStyle(item)\"\n      >\n        <component :is=\"iconComponents[item - 1]\" />\n        <el-icon\n          v-if=\"showDecimalIcon(item)\"\n          :style=\"decimalStyle\"\n          class=\"el-rate__icon el-rate__decimal\"\n        >\n          <component :is=\"decimalIconComponent\" />\n        </el-icon>\n      </el-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-plus/tokens'\nimport { hasClass } from '@element-plus/utils/dom'\nimport { EVENT_CODE } from '@element-plus/utils/aria'\n\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { StarFilled, Star } from '@element-plus/icons-vue'\nimport { useSize } from '@element-plus/hooks'\nimport { rateProps, rateEmits } from './rate'\nimport type { ElFormContext } from '@element-plus/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: 'ElRate',\n  components: {\n    ElIcon,\n    StarFilled,\n    Star,\n  },\n  props: rateProps,\n  emits: rateEmits,\n\n  setup(props, { emit }) {\n    const elForm = inject(elFormKey, {} as ElFormContext)\n\n    const rateSize = useSize()\n    const currentValue = ref(props.modelValue)\n    const hoverIndex = ref(-1)\n    const pointerAtLeftHalf = ref(true)\n\n    const prefix = 'el-rate'\n    const rateKls = computed(() => [prefix, `${prefix}--${rateSize.value}`])\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    function selectValue(value: number) {\n      if (rateDisabled.value) {\n        return\n      }\n      if (props.allowHalf && pointerAtLeftHalf.value) {\n        emit(UPDATE_MODEL_EVENT, currentValue.value)\n        if (props.modelValue !== currentValue.value) {\n          emit('change', currentValue.value)\n        }\n      } else {\n        emit(UPDATE_MODEL_EVENT, value)\n        if (props.modelValue !== value) {\n          emit('change', value)\n        }\n      }\n    }\n\n    function handleKey(e: KeyboardEvent) {\n      if (rateDisabled.value) {\n        return\n      }\n      let _currentValue = currentValue.value\n      const code = e.code\n      if (code === EVENT_CODE.up || code === EVENT_CODE.right) {\n        if (props.allowHalf) {\n          _currentValue += 0.5\n        } else {\n          _currentValue += 1\n        }\n        e.stopPropagation()\n        e.preventDefault()\n      } else if (code === EVENT_CODE.left || code === EVENT_CODE.down) {\n        if (props.allowHalf) {\n          _currentValue -= 0.5\n        } else {\n          _currentValue -= 1\n        }\n        e.stopPropagation()\n        e.preventDefault()\n      }\n      _currentValue = _currentValue < 0 ? 0 : _currentValue\n      _currentValue = _currentValue > props.max ? props.max : _currentValue\n      emit(UPDATE_MODEL_EVENT, _currentValue)\n      emit('change', _currentValue)\n      return _currentValue\n    }\n\n    function setCurrentValue(value: number, event: MouseEvent) {\n      if (rateDisabled.value) {\n        return\n      }\n      if (props.allowHalf) {\n        let target = event.target as HTMLElement\n        if (hasClass(target, 'el-rate__item')) {\n          target = target.querySelector('.el-rate__icon')!\n        }\n        if (target.clientWidth === 0 || hasClass(target, 'el-rate__decimal')) {\n          target = target.parentNode as HTMLElement\n        }\n        pointerAtLeftHalf.value = event.offsetX * 2 <= target.clientWidth\n        currentValue.value = pointerAtLeftHalf.value ? value - 0.5 : value\n      } else {\n        currentValue.value = value\n      }\n      hoverIndex.value = value\n    }\n\n    function resetCurrentValue() {\n      if (rateDisabled.value) {\n        return\n      }\n      if (props.allowHalf) {\n        pointerAtLeftHalf.value =\n          props.modelValue !== Math.floor(props.modelValue)\n      }\n      currentValue.value = props.modelValue\n      hoverIndex.value = -1\n    }\n\n    watch(\n      () => props.modelValue,\n      (val) => {\n        currentValue.value = val\n        pointerAtLeftHalf.value =\n          props.modelValue !== Math.floor(props.modelValue)\n      }\n    )\n\n    if (!props.modelValue) {\n      emit(UPDATE_MODEL_EVENT, 0)\n    }\n\n    return {\n      hoverIndex,\n      currentValue,\n      rateDisabled,\n      text,\n      decimalStyle,\n      decimalIconComponent,\n      iconComponents,\n      rateKls,\n\n      showDecimalIcon,\n      getIconStyle,\n      selectValue,\n      handleKey,\n      setCurrentValue,\n      resetCurrentValue,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"rate.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/rate/src/rate.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"rateKls\"\n    role=\"slider\"\n    :aria-valuenow=\"currentValue\"\n    :aria-valuetext=\"text\"\n    aria-valuemin=\"0\"\n    :aria-valuemax=\"max\"\n    tabindex=\"0\"\n    @keydown=\"handleKey\"\n  >\n    <span\n      v-for=\"(item, key) in max\"\n      :key=\"key\"\n      :class=\"ns.e('item')\"\n      :style=\"{ cursor: rateDisabled ? 'auto' : 'pointer' }\"\n      @mousemove=\"setCurrentValue(item, $event)\"\n      @mouseleave=\"resetCurrentValue\"\n      @click=\"selectValue(item)\"\n    >\n      <el-icon\n        :class=\"[ns.e('icon'), { hover: hoverIndex === item }]\"\n        :style=\"getIconStyle(item)\"\n      >\n        <component :is=\"iconComponents[item - 1]\" />\n        <el-icon\n          v-if=\"showDecimalIcon(item)\"\n          :style=\"decimalStyle\"\n          :class=\"[ns.e('icon'), ns.e('decimal')]\"\n        >\n          <component :is=\"decimalIconComponent\" />\n        </el-icon>\n      </el-icon>\n    </span>\n    <span\n      v-if=\"showText || showScore\"\n      :class=\"ns.e('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-plus/tokens'\nimport { hasClass } from '@element-plus/utils/dom'\nimport { EVENT_CODE } from '@element-plus/utils/aria'\n\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { StarFilled, Star } from '@element-plus/icons-vue'\nimport { useNamespace, useSize } from '@element-plus/hooks'\nimport { rateProps, rateEmits } from './rate'\nimport type { ElFormContext } from '@element-plus/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: 'ElRate',\n  components: {\n    ElIcon,\n    StarFilled,\n    Star,\n  },\n  props: rateProps,\n  emits: rateEmits,\n\n  setup(props, { emit }) {\n    const elForm = inject(elFormKey, {} as ElFormContext)\n    const rateSize = useSize()\n    const ns = useNamespace('rate')\n\n    const currentValue = ref(props.modelValue)\n    const hoverIndex = ref(-1)\n    const pointerAtLeftHalf = ref(true)\n\n    const rateKls = computed(() => [ns.b(), ns.m(rateSize.value)])\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    function selectValue(value: number) {\n      if (rateDisabled.value) {\n        return\n      }\n      if (props.allowHalf && pointerAtLeftHalf.value) {\n        emit(UPDATE_MODEL_EVENT, currentValue.value)\n        if (props.modelValue !== currentValue.value) {\n          emit('change', currentValue.value)\n        }\n      } else {\n        emit(UPDATE_MODEL_EVENT, value)\n        if (props.modelValue !== value) {\n          emit('change', value)\n        }\n      }\n    }\n\n    function handleKey(e: KeyboardEvent) {\n      if (rateDisabled.value) {\n        return\n      }\n      let _currentValue = currentValue.value\n      const code = e.code\n      if (code === EVENT_CODE.up || code === EVENT_CODE.right) {\n        if (props.allowHalf) {\n          _currentValue += 0.5\n        } else {\n          _currentValue += 1\n        }\n        e.stopPropagation()\n        e.preventDefault()\n      } else if (code === EVENT_CODE.left || code === EVENT_CODE.down) {\n        if (props.allowHalf) {\n          _currentValue -= 0.5\n        } else {\n          _currentValue -= 1\n        }\n        e.stopPropagation()\n        e.preventDefault()\n      }\n      _currentValue = _currentValue < 0 ? 0 : _currentValue\n      _currentValue = _currentValue > props.max ? props.max : _currentValue\n      emit(UPDATE_MODEL_EVENT, _currentValue)\n      emit('change', _currentValue)\n      return _currentValue\n    }\n\n    function setCurrentValue(value: number, event: MouseEvent) {\n      if (rateDisabled.value) {\n        return\n      }\n      if (props.allowHalf) {\n        // TODO: use cache via computed https://github.com/element-plus/element-plus/pull/5456#discussion_r786472092\n        let target = event.target as HTMLElement\n        if (hasClass(target, ns.e('item'))) {\n          target = target.querySelector(`.${ns.e('icon')}`)!\n        }\n        if (target.clientWidth === 0 || hasClass(target, ns.e('decimal'))) {\n          target = target.parentNode as HTMLElement\n        }\n        pointerAtLeftHalf.value = event.offsetX * 2 <= target.clientWidth\n        currentValue.value = pointerAtLeftHalf.value ? value - 0.5 : value\n      } else {\n        currentValue.value = value\n      }\n      hoverIndex.value = value\n    }\n\n    function resetCurrentValue() {\n      if (rateDisabled.value) {\n        return\n      }\n      if (props.allowHalf) {\n        pointerAtLeftHalf.value =\n          props.modelValue !== Math.floor(props.modelValue)\n      }\n      currentValue.value = props.modelValue\n      hoverIndex.value = -1\n    }\n\n    watch(\n      () => props.modelValue,\n      (val) => {\n        currentValue.value = val\n        pointerAtLeftHalf.value =\n          props.modelValue !== Math.floor(props.modelValue)\n      }\n    )\n\n    if (!props.modelValue) {\n      emit(UPDATE_MODEL_EVENT, 0)\n    }\n\n    return {\n      ns,\n      hoverIndex,\n      currentValue,\n      rateDisabled,\n      text,\n      decimalStyle,\n      decimalIconComponent,\n      iconComponents,\n      rateKls,\n\n      showDecimalIcon,\n      getIconStyle,\n      selectValue,\n      handleKey,\n      setCurrentValue,\n      resetCurrentValue,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":"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"}

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

@@ -17,14 +17,14 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.max, (item, key) => {
       return openBlock(), createElementBlock("span", {
         key,
-        class: "el-rate__item",
+        class: normalizeClass(_ctx.ns.e("item")),
         style: normalizeStyle({ cursor: _ctx.rateDisabled ? "auto" : "pointer" }),
         onMousemove: ($event) => _ctx.setCurrentValue(item, $event),
         onMouseleave: _cache[0] || (_cache[0] = (...args) => _ctx.resetCurrentValue && _ctx.resetCurrentValue(...args)),
         onClick: ($event) => _ctx.selectValue(item)
       }, [
         createVNode(_component_el_icon, {
-          class: normalizeClass([[{ hover: _ctx.hoverIndex === item }], "el-rate__icon"]),
+          class: normalizeClass([_ctx.ns.e("icon"), { hover: _ctx.hoverIndex === item }]),
           style: normalizeStyle(_ctx.getIconStyle(item))
         }, {
           default: withCtx(() => [
@@ -32,23 +32,23 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             _ctx.showDecimalIcon(item) ? (openBlock(), createBlock(_component_el_icon, {
               key: 0,
               style: normalizeStyle(_ctx.decimalStyle),
-              class: "el-rate__icon el-rate__decimal"
+              class: normalizeClass([_ctx.ns.e("icon"), _ctx.ns.e("decimal")])
             }, {
               default: withCtx(() => [
                 (openBlock(), createBlock(resolveDynamicComponent(_ctx.decimalIconComponent)))
               ]),
               _: 1
-            }, 8, ["style"])) : createCommentVNode("v-if", true)
+            }, 8, ["style", "class"])) : createCommentVNode("v-if", true)
           ]),
           _: 2
         }, 1032, ["class", "style"])
-      ], 44, _hoisted_2);
+      ], 46, _hoisted_2);
     }), 128)),
     _ctx.showText || _ctx.showScore ? (openBlock(), createElementBlock("span", {
       key: 0,
-      class: "el-rate__text",
+      class: normalizeClass(_ctx.ns.e("text")),
       style: normalizeStyle({ color: _ctx.textColor })
-    }, toDisplayString(_ctx.text), 5)) : createCommentVNode("v-if", true)
+    }, toDisplayString(_ctx.text), 7)) : createCommentVNode("v-if", true)
   ], 42, _hoisted_1);
 }
 

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

@@ -1 +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=\"rateKls\"\n    role=\"slider\"\n    :aria-valuenow=\"currentValue\"\n    :aria-valuetext=\"text\"\n    aria-valuemin=\"0\"\n    :aria-valuemax=\"max\"\n    tabindex=\"0\"\n    @keydown=\"handleKey\"\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      @mousemove=\"setCurrentValue(item, $event)\"\n      @mouseleave=\"resetCurrentValue\"\n      @click=\"selectValue(item)\"\n    >\n      <el-icon\n        :class=\"[{ hover: hoverIndex === item }]\"\n        class=\"el-rate__icon\"\n        :style=\"getIconStyle(item)\"\n      >\n        <component :is=\"iconComponents[item - 1]\" />\n        <el-icon\n          v-if=\"showDecimalIcon(item)\"\n          :style=\"decimalStyle\"\n          class=\"el-rate__icon el-rate__decimal\"\n        >\n          <component :is=\"decimalIconComponent\" />\n        </el-icon>\n      </el-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-plus/tokens'\nimport { hasClass } from '@element-plus/utils/dom'\nimport { EVENT_CODE } from '@element-plus/utils/aria'\n\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { StarFilled, Star } from '@element-plus/icons-vue'\nimport { useSize } from '@element-plus/hooks'\nimport { rateProps, rateEmits } from './rate'\nimport type { ElFormContext } from '@element-plus/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: 'ElRate',\n  components: {\n    ElIcon,\n    StarFilled,\n    Star,\n  },\n  props: rateProps,\n  emits: rateEmits,\n\n  setup(props, { emit }) {\n    const elForm = inject(elFormKey, {} as ElFormContext)\n\n    const rateSize = useSize()\n    const currentValue = ref(props.modelValue)\n    const hoverIndex = ref(-1)\n    const pointerAtLeftHalf = ref(true)\n\n    const prefix = 'el-rate'\n    const rateKls = computed(() => [prefix, `${prefix}--${rateSize.value}`])\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    function selectValue(value: number) {\n      if (rateDisabled.value) {\n        return\n      }\n      if (props.allowHalf && pointerAtLeftHalf.value) {\n        emit(UPDATE_MODEL_EVENT, currentValue.value)\n        if (props.modelValue !== currentValue.value) {\n          emit('change', currentValue.value)\n        }\n      } else {\n        emit(UPDATE_MODEL_EVENT, value)\n        if (props.modelValue !== value) {\n          emit('change', value)\n        }\n      }\n    }\n\n    function handleKey(e: KeyboardEvent) {\n      if (rateDisabled.value) {\n        return\n      }\n      let _currentValue = currentValue.value\n      const code = e.code\n      if (code === EVENT_CODE.up || code === EVENT_CODE.right) {\n        if (props.allowHalf) {\n          _currentValue += 0.5\n        } else {\n          _currentValue += 1\n        }\n        e.stopPropagation()\n        e.preventDefault()\n      } else if (code === EVENT_CODE.left || code === EVENT_CODE.down) {\n        if (props.allowHalf) {\n          _currentValue -= 0.5\n        } else {\n          _currentValue -= 1\n        }\n        e.stopPropagation()\n        e.preventDefault()\n      }\n      _currentValue = _currentValue < 0 ? 0 : _currentValue\n      _currentValue = _currentValue > props.max ? props.max : _currentValue\n      emit(UPDATE_MODEL_EVENT, _currentValue)\n      emit('change', _currentValue)\n      return _currentValue\n    }\n\n    function setCurrentValue(value: number, event: MouseEvent) {\n      if (rateDisabled.value) {\n        return\n      }\n      if (props.allowHalf) {\n        let target = event.target as HTMLElement\n        if (hasClass(target, 'el-rate__item')) {\n          target = target.querySelector('.el-rate__icon')!\n        }\n        if (target.clientWidth === 0 || hasClass(target, 'el-rate__decimal')) {\n          target = target.parentNode as HTMLElement\n        }\n        pointerAtLeftHalf.value = event.offsetX * 2 <= target.clientWidth\n        currentValue.value = pointerAtLeftHalf.value ? value - 0.5 : value\n      } else {\n        currentValue.value = value\n      }\n      hoverIndex.value = value\n    }\n\n    function resetCurrentValue() {\n      if (rateDisabled.value) {\n        return\n      }\n      if (props.allowHalf) {\n        pointerAtLeftHalf.value =\n          props.modelValue !== Math.floor(props.modelValue)\n      }\n      currentValue.value = props.modelValue\n      hoverIndex.value = -1\n    }\n\n    watch(\n      () => props.modelValue,\n      (val) => {\n        currentValue.value = val\n        pointerAtLeftHalf.value =\n          props.modelValue !== Math.floor(props.modelValue)\n      }\n    )\n\n    if (!props.modelValue) {\n      emit(UPDATE_MODEL_EVENT, 0)\n    }\n\n    return {\n      hoverIndex,\n      currentValue,\n      rateDisabled,\n      text,\n      decimalStyle,\n      decimalIconComponent,\n      iconComponents,\n      rateKls,\n\n      showDecimalIcon,\n      getIconStyle,\n      selectValue,\n      handleKey,\n      setCurrentValue,\n      resetCurrentValue,\n    }\n  },\n})\n</script>\n"],"names":["_openBlock","_createVNode"],"mappings":";;;;;;;;;;IAEK,uBAAO;IACR;IACC,eAAa,EAAE;IACf;IACD,iBAAc;;;aAGNA,wCAAE;;;;QAIP;QACD;QACC;;QAEAC,WAAU;eACL,4BAAa,KAAK;;;UAGrB;;;;;;;;;;;;;;;;;;;;;;KAeG;;;;;"}
+{"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=\"rateKls\"\n    role=\"slider\"\n    :aria-valuenow=\"currentValue\"\n    :aria-valuetext=\"text\"\n    aria-valuemin=\"0\"\n    :aria-valuemax=\"max\"\n    tabindex=\"0\"\n    @keydown=\"handleKey\"\n  >\n    <span\n      v-for=\"(item, key) in max\"\n      :key=\"key\"\n      :class=\"ns.e('item')\"\n      :style=\"{ cursor: rateDisabled ? 'auto' : 'pointer' }\"\n      @mousemove=\"setCurrentValue(item, $event)\"\n      @mouseleave=\"resetCurrentValue\"\n      @click=\"selectValue(item)\"\n    >\n      <el-icon\n        :class=\"[ns.e('icon'), { hover: hoverIndex === item }]\"\n        :style=\"getIconStyle(item)\"\n      >\n        <component :is=\"iconComponents[item - 1]\" />\n        <el-icon\n          v-if=\"showDecimalIcon(item)\"\n          :style=\"decimalStyle\"\n          :class=\"[ns.e('icon'), ns.e('decimal')]\"\n        >\n          <component :is=\"decimalIconComponent\" />\n        </el-icon>\n      </el-icon>\n    </span>\n    <span\n      v-if=\"showText || showScore\"\n      :class=\"ns.e('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-plus/tokens'\nimport { hasClass } from '@element-plus/utils/dom'\nimport { EVENT_CODE } from '@element-plus/utils/aria'\n\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { StarFilled, Star } from '@element-plus/icons-vue'\nimport { useNamespace, useSize } from '@element-plus/hooks'\nimport { rateProps, rateEmits } from './rate'\nimport type { ElFormContext } from '@element-plus/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: 'ElRate',\n  components: {\n    ElIcon,\n    StarFilled,\n    Star,\n  },\n  props: rateProps,\n  emits: rateEmits,\n\n  setup(props, { emit }) {\n    const elForm = inject(elFormKey, {} as ElFormContext)\n    const rateSize = useSize()\n    const ns = useNamespace('rate')\n\n    const currentValue = ref(props.modelValue)\n    const hoverIndex = ref(-1)\n    const pointerAtLeftHalf = ref(true)\n\n    const rateKls = computed(() => [ns.b(), ns.m(rateSize.value)])\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    function selectValue(value: number) {\n      if (rateDisabled.value) {\n        return\n      }\n      if (props.allowHalf && pointerAtLeftHalf.value) {\n        emit(UPDATE_MODEL_EVENT, currentValue.value)\n        if (props.modelValue !== currentValue.value) {\n          emit('change', currentValue.value)\n        }\n      } else {\n        emit(UPDATE_MODEL_EVENT, value)\n        if (props.modelValue !== value) {\n          emit('change', value)\n        }\n      }\n    }\n\n    function handleKey(e: KeyboardEvent) {\n      if (rateDisabled.value) {\n        return\n      }\n      let _currentValue = currentValue.value\n      const code = e.code\n      if (code === EVENT_CODE.up || code === EVENT_CODE.right) {\n        if (props.allowHalf) {\n          _currentValue += 0.5\n        } else {\n          _currentValue += 1\n        }\n        e.stopPropagation()\n        e.preventDefault()\n      } else if (code === EVENT_CODE.left || code === EVENT_CODE.down) {\n        if (props.allowHalf) {\n          _currentValue -= 0.5\n        } else {\n          _currentValue -= 1\n        }\n        e.stopPropagation()\n        e.preventDefault()\n      }\n      _currentValue = _currentValue < 0 ? 0 : _currentValue\n      _currentValue = _currentValue > props.max ? props.max : _currentValue\n      emit(UPDATE_MODEL_EVENT, _currentValue)\n      emit('change', _currentValue)\n      return _currentValue\n    }\n\n    function setCurrentValue(value: number, event: MouseEvent) {\n      if (rateDisabled.value) {\n        return\n      }\n      if (props.allowHalf) {\n        // TODO: use cache via computed https://github.com/element-plus/element-plus/pull/5456#discussion_r786472092\n        let target = event.target as HTMLElement\n        if (hasClass(target, ns.e('item'))) {\n          target = target.querySelector(`.${ns.e('icon')}`)!\n        }\n        if (target.clientWidth === 0 || hasClass(target, ns.e('decimal'))) {\n          target = target.parentNode as HTMLElement\n        }\n        pointerAtLeftHalf.value = event.offsetX * 2 <= target.clientWidth\n        currentValue.value = pointerAtLeftHalf.value ? value - 0.5 : value\n      } else {\n        currentValue.value = value\n      }\n      hoverIndex.value = value\n    }\n\n    function resetCurrentValue() {\n      if (rateDisabled.value) {\n        return\n      }\n      if (props.allowHalf) {\n        pointerAtLeftHalf.value =\n          props.modelValue !== Math.floor(props.modelValue)\n      }\n      currentValue.value = props.modelValue\n      hoverIndex.value = -1\n    }\n\n    watch(\n      () => props.modelValue,\n      (val) => {\n        currentValue.value = val\n        pointerAtLeftHalf.value =\n          props.modelValue !== Math.floor(props.modelValue)\n      }\n    )\n\n    if (!props.modelValue) {\n      emit(UPDATE_MODEL_EVENT, 0)\n    }\n\n    return {\n      ns,\n      hoverIndex,\n      currentValue,\n      rateDisabled,\n      text,\n      decimalStyle,\n      decimalIconComponent,\n      iconComponents,\n      rateKls,\n\n      showDecimalIcon,\n      getIconStyle,\n      selectValue,\n      handleKey,\n      setCurrentValue,\n      resetCurrentValue,\n    }\n  },\n})\n</script>\n"],"names":["_openBlock","_createVNode"],"mappings":";;;;;;;;;;IAEK,uBAAO;IACR;IACC,eAAa,EAAE;IACf;IACD,iBAAc;;;aAGNA,wCAAE;;;;QAIP;QACA,uBAAO;QACP;;QAEAC,WAAU;eACL,4BAAa;;;UAGhB,uBAAQ;;;;;qCAKmB;;;;;;oCAI1B;;;;;;;;;;;KAKE;;;;;"}

package/es/components/result/index.d.ts

@@ -3,6 +3,17 @@ export declare const ElResult: import("../../utils/types").SFCWithInstall<import
     readonly subTitle: import("../../utils/props").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
     readonly icon: import("../../utils/props").BuildPropReturn<unknown, "info", unknown, "success" | "warning" | "info" | "error", unknown>;
 }, {
+    ns: {
+        namespace: import("vue").ComputedRef<string>;
+        b: (blockSuffix?: string) => string;
+        e: (element?: string | undefined) => string;
+        m: (modifier?: string | undefined) => string;
+        be: (blockSuffix?: string | undefined, element?: string | undefined) => string;
+        em: (element?: string | undefined, modifier?: string | undefined) => string;
+        bm: (blockSuffix?: string | undefined, modifier?: string | undefined) => string;
+        bem: (blockSuffix?: string | undefined, element?: string | undefined, modifier?: string | undefined) => string;
+        is: (name: string, state?: boolean) => string;
+    };
     resultIcon: import("vue").ComputedRef<{
         class: "icon-success" | "icon-warning" | "icon-error" | "icon-info";
         component: import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;

package/es/components/result/src/result.d.ts

@@ -1,4 +1,5 @@
 import type { Component, ExtractPropTypes } from 'vue';
+import type Result from './result.vue';
 export declare const IconMap: {
     readonly success: "icon-success";
     readonly warning: "icon-warning";
@@ -12,3 +13,4 @@ export declare const resultProps: {
     readonly icon: import("element-plus/es/utils/props").BuildPropReturn<unknown, "info", unknown, "success" | "warning" | "info" | "error", unknown>;
 };
 export declare type ResultProps = ExtractPropTypes<typeof resultProps>;
+export declare type ResultInstance = InstanceType<typeof Result>;

package/es/components/result/src/result.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"result.mjs","sources":["../../../../../../packages/components/result/src/result.ts"],"sourcesContent":["import { buildProps } from '@element-plus/utils/props'\nimport {\n  WarningFilled,\n  CircleCheckFilled,\n  CircleCloseFilled,\n  InfoFilled,\n} from '@element-plus/icons-vue'\nimport type { Component, ExtractPropTypes } from 'vue'\n\nexport const IconMap = {\n  success: 'icon-success',\n  warning: 'icon-warning',\n  error: 'icon-error',\n  info: 'icon-info',\n} as const\n\nexport const IconComponentMap: Record<\n  typeof IconMap[keyof typeof IconMap],\n  Component\n> = {\n  [IconMap.success]: CircleCheckFilled,\n  [IconMap.warning]: WarningFilled,\n  [IconMap.error]: CircleCloseFilled,\n  [IconMap.info]: InfoFilled,\n}\n\nexport const resultProps = buildProps({\n  title: {\n    type: String,\n    default: '',\n  },\n  subTitle: {\n    type: String,\n    default: '',\n  },\n  icon: {\n    values: ['success', 'warning', 'info', 'error'],\n    default: 'info',\n  },\n} as const)\n\nexport type ResultProps = ExtractPropTypes<typeof resultProps>\n"],"names":[],"mappings":";;;AAOY,MAAC,OAAO,GAAG;AACvB,EAAE,OAAO,EAAE,cAAc;AACzB,EAAE,OAAO,EAAE,cAAc;AACzB,EAAE,KAAK,EAAE,YAAY;AACrB,EAAE,IAAI,EAAE,WAAW;AACnB,EAAE;AACU,MAAC,gBAAgB,GAAG;AAChC,EAAE,CAAC,OAAO,CAAC,OAAO,GAAG,iBAAiB;AACtC,EAAE,CAAC,OAAO,CAAC,OAAO,GAAG,aAAa;AAClC,EAAE,CAAC,OAAO,CAAC,KAAK,GAAG,iBAAiB;AACpC,EAAE,CAAC,OAAO,CAAC,IAAI,GAAG,UAAU;AAC5B,EAAE;AACU,MAAC,WAAW,GAAG,UAAU,CAAC;AACtC,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,IAAI,EAAE;AACR,IAAI,MAAM,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,CAAC;AACnD,IAAI,OAAO,EAAE,MAAM;AACnB,GAAG;AACH,CAAC;;;;"}
+{"version":3,"file":"result.mjs","sources":["../../../../../../packages/components/result/src/result.ts"],"sourcesContent":["import { buildProps } from '@element-plus/utils/props'\nimport {\n  WarningFilled,\n  CircleCheckFilled,\n  CircleCloseFilled,\n  InfoFilled,\n} from '@element-plus/icons-vue'\nimport type { Component, ExtractPropTypes } from 'vue'\nimport type Result from './result.vue'\n\nexport const IconMap = {\n  success: 'icon-success',\n  warning: 'icon-warning',\n  error: 'icon-error',\n  info: 'icon-info',\n} as const\n\nexport const IconComponentMap: Record<\n  typeof IconMap[keyof typeof IconMap],\n  Component\n> = {\n  [IconMap.success]: CircleCheckFilled,\n  [IconMap.warning]: WarningFilled,\n  [IconMap.error]: CircleCloseFilled,\n  [IconMap.info]: InfoFilled,\n}\n\nexport const resultProps = buildProps({\n  title: {\n    type: String,\n    default: '',\n  },\n  subTitle: {\n    type: String,\n    default: '',\n  },\n  icon: {\n    values: ['success', 'warning', 'info', 'error'],\n    default: 'info',\n  },\n} as const)\n\nexport type ResultProps = ExtractPropTypes<typeof resultProps>\n\nexport type ResultInstance = InstanceType<typeof Result>\n"],"names":[],"mappings":";;;AAOY,MAAC,OAAO,GAAG;AACvB,EAAE,OAAO,EAAE,cAAc;AACzB,EAAE,OAAO,EAAE,cAAc;AACzB,EAAE,KAAK,EAAE,YAAY;AACrB,EAAE,IAAI,EAAE,WAAW;AACnB,EAAE;AACU,MAAC,gBAAgB,GAAG;AAChC,EAAE,CAAC,OAAO,CAAC,OAAO,GAAG,iBAAiB;AACtC,EAAE,CAAC,OAAO,CAAC,OAAO,GAAG,aAAa;AAClC,EAAE,CAAC,OAAO,CAAC,KAAK,GAAG,iBAAiB;AACpC,EAAE,CAAC,OAAO,CAAC,IAAI,GAAG,UAAU;AAC5B,EAAE;AACU,MAAC,WAAW,GAAG,UAAU,CAAC;AACtC,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,IAAI,EAAE;AACR,IAAI,MAAM,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,CAAC;AACnD,IAAI,OAAO,EAAE,MAAM;AACnB,GAAG;AACH,CAAC;;;;"}

package/es/components/result/src/result.vue.d.ts

@@ -3,6 +3,17 @@ declare const _default: import("vue").DefineComponent<{
     readonly subTitle: import("../../../utils/props").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
     readonly icon: import("../../../utils/props").BuildPropReturn<unknown, "info", unknown, "success" | "warning" | "info" | "error", unknown>;
 }, {
+    ns: {
+        namespace: import("vue").ComputedRef<string>;
+        b: (blockSuffix?: string) => string;
+        e: (element?: string | undefined) => string;
+        m: (modifier?: string | undefined) => string;
+        be: (blockSuffix?: string | undefined, element?: string | undefined) => string;
+        em: (element?: string | undefined, modifier?: string | undefined) => string;
+        bm: (blockSuffix?: string | undefined, modifier?: string | undefined) => string;
+        bem: (blockSuffix?: string | undefined, element?: string | undefined, modifier?: string | undefined) => string;
+        is: (name: string, state?: boolean) => string;
+    };
     resultIcon: import("vue").ComputedRef<{
         class: "icon-success" | "icon-warning" | "icon-error" | "icon-info";
         component: import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;

package/es/components/result/src/result.vue_vue_type_script_lang.mjs

@@ -1,10 +1,13 @@
 import { defineComponent, computed } from 'vue';
+import '../../../hooks/index.mjs';
 import { resultProps, IconMap, IconComponentMap } from './result.mjs';
+import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
 
 var script = defineComponent({
   name: "ElResult",
   props: resultProps,
   setup(props) {
+    const ns = useNamespace("result");
     const resultIcon = computed(() => {
       const icon = props.icon;
       const iconClass = icon && IconMap[icon] ? IconMap[icon] : "icon-info";
@@ -15,6 +18,7 @@ var script = defineComponent({
       };
     });
     return {
+      ns,
       resultIcon
     };
   }

package/es/components/result/src/result.vue_vue_type_script_lang.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"result.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/result/src/result.vue"],"sourcesContent":["<template>\n  <div class=\"el-result\">\n    <div class=\"el-result__icon\">\n      <slot name=\"icon\">\n        <component\n          :is=\"resultIcon.component\"\n          v-if=\"resultIcon.component\"\n          :class=\"resultIcon.class\"\n        />\n      </slot>\n    </div>\n    <div v-if=\"title || $slots.title\" class=\"el-result__title\">\n      <slot name=\"title\">\n        <p>{{ title }}</p>\n      </slot>\n    </div>\n    <div v-if=\"subTitle || $slots.subTitle\" class=\"el-result__subtitle\">\n      <slot name=\"subTitle\">\n        <p>{{ subTitle }}</p>\n      </slot>\n    </div>\n    <div v-if=\"$slots.extra\" class=\"el-result__extra\">\n      <slot name=\"extra\"></slot>\n    </div>\n  </div>\n</template>\n<script lang=\"ts\">\nimport { computed, defineComponent } from 'vue'\nimport { resultProps, IconComponentMap, IconMap } from './result'\n\nexport default defineComponent({\n  name: 'ElResult',\n  props: resultProps,\n  setup(props) {\n    const resultIcon = computed(() => {\n      const icon = props.icon\n      const iconClass = icon && IconMap[icon] ? IconMap[icon] : 'icon-info'\n      const iconComponent =\n        IconComponentMap[iconClass] || IconComponentMap['icon-info']\n\n      return {\n        class: iconClass,\n        component: iconComponent,\n      }\n    })\n\n    return {\n      resultIcon,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":";;;AA4BA,aAAe,eAAe,CAAC;;AAE/B,EAAE,KAAK,EAAE,WAAW;EAClB,MAAM,KAAK,EAAE;IACX,MAAM,UAAU;MACd,MAAM;MACN,MAAM,SAAS,GAAG,IAAI,IAAI;MAC1B,MAAM,aAAa,GAAG;MACtB,OAAO;QACL,KAAK,EAAE,SAAS;QAChB,SAAS,EAAE,aAAa;;MAE1B,CAAC;WACI;gBACK;MACV;;;;;;"}
+{"version":3,"file":"result.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/result/src/result.vue"],"sourcesContent":["<template>\n  <div :class=\"ns.b()\">\n    <div :class=\"ns.e('icon')\">\n      <slot name=\"icon\">\n        <component\n          :is=\"resultIcon.component\"\n          v-if=\"resultIcon.component\"\n          :class=\"resultIcon.class\"\n        />\n      </slot>\n    </div>\n    <div v-if=\"title || $slots.title\" :class=\"ns.e('title')\">\n      <slot name=\"title\">\n        <p>{{ title }}</p>\n      </slot>\n    </div>\n    <div v-if=\"subTitle || $slots.subTitle\" :class=\"ns.e('subtitle')\">\n      <slot name=\"subTitle\">\n        <p>{{ subTitle }}</p>\n      </slot>\n    </div>\n    <div v-if=\"$slots.extra\" :class=\"ns.e('extra')\">\n      <slot name=\"extra\"></slot>\n    </div>\n  </div>\n</template>\n<script lang=\"ts\">\nimport { computed, defineComponent } from 'vue'\nimport { useNamespace } from '@element-plus/hooks'\nimport { resultProps, IconComponentMap, IconMap } from './result'\n\nexport default defineComponent({\n  name: 'ElResult',\n  props: resultProps,\n  setup(props) {\n    const ns = useNamespace('result')\n\n    const resultIcon = computed(() => {\n      const icon = props.icon\n      const iconClass = icon && IconMap[icon] ? IconMap[icon] : 'icon-info'\n      const iconComponent =\n        IconComponentMap[iconClass] || IconComponentMap['icon-info']\n\n      return {\n        class: iconClass,\n        component: iconComponent,\n      }\n    })\n\n    return {\n      ns,\n      resultIcon,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":";;;;;AA6BA,aAAe,eAAe,CAAC;;AAE/B,EAAE,KAAK,EAAE,WAAW;EAClB,MAAM,KAAK,EAAE;IACX,MAAM,EAAE,GAAG;IACX,MAAM;MACJ,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC;;MAExB,MAAM,aAAa,GAAG;MACtB,OAAO;QACL,KAAK,EAAE,SAAS;QAChB,SAAS,EAAE;QACX;;WAEG;QACH;gBACQ;MACV;;;;;;"}

package/es/components/result/src/result.vue_vue_type_template_id_263c10e5_lang.mjs

@@ -1,43 +1,42 @@
-import { openBlock, createElementBlock, createElementVNode, renderSlot, createBlock, resolveDynamicComponent, normalizeClass, createCommentVNode, toDisplayString } from 'vue';
+import { openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot, createBlock, resolveDynamicComponent, createCommentVNode, toDisplayString } from 'vue';
 
-const _hoisted_1 = { class: "el-result" };
-const _hoisted_2 = { class: "el-result__icon" };
-const _hoisted_3 = {
-  key: 0,
-  class: "el-result__title"
-};
-const _hoisted_4 = {
-  key: 1,
-  class: "el-result__subtitle"
-};
-const _hoisted_5 = {
-  key: 2,
-  class: "el-result__extra"
-};
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", _hoisted_1, [
-    createElementVNode("div", _hoisted_2, [
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass(_ctx.ns.b())
+  }, [
+    createElementVNode("div", {
+      class: normalizeClass(_ctx.ns.e("icon"))
+    }, [
       renderSlot(_ctx.$slots, "icon", {}, () => [
         _ctx.resultIcon.component ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.resultIcon.component), {
           key: 0,
           class: normalizeClass(_ctx.resultIcon.class)
         }, null, 8, ["class"])) : createCommentVNode("v-if", true)
       ])
-    ]),
-    _ctx.title || _ctx.$slots.title ? (openBlock(), createElementBlock("div", _hoisted_3, [
+    ], 2),
+    _ctx.title || _ctx.$slots.title ? (openBlock(), createElementBlock("div", {
+      key: 0,
+      class: normalizeClass(_ctx.ns.e("title"))
+    }, [
       renderSlot(_ctx.$slots, "title", {}, () => [
         createElementVNode("p", null, toDisplayString(_ctx.title), 1)
       ])
-    ])) : createCommentVNode("v-if", true),
-    _ctx.subTitle || _ctx.$slots.subTitle ? (openBlock(), createElementBlock("div", _hoisted_4, [
+    ], 2)) : createCommentVNode("v-if", true),
+    _ctx.subTitle || _ctx.$slots.subTitle ? (openBlock(), createElementBlock("div", {
+      key: 1,
+      class: normalizeClass(_ctx.ns.e("subtitle"))
+    }, [
       renderSlot(_ctx.$slots, "subTitle", {}, () => [
         createElementVNode("p", null, toDisplayString(_ctx.subTitle), 1)
       ])
-    ])) : createCommentVNode("v-if", true),
-    _ctx.$slots.extra ? (openBlock(), createElementBlock("div", _hoisted_5, [
+    ], 2)) : createCommentVNode("v-if", true),
+    _ctx.$slots.extra ? (openBlock(), createElementBlock("div", {
+      key: 2,
+      class: normalizeClass(_ctx.ns.e("extra"))
+    }, [
       renderSlot(_ctx.$slots, "extra")
-    ])) : createCommentVNode("v-if", true)
-  ]);
+    ], 2)) : createCommentVNode("v-if", true)
+  ], 2);
 }
 
 export { render };

package/es/components/result/src/result.vue_vue_type_template_id_263c10e5_lang.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"result.vue_vue_type_template_id_263c10e5_lang.mjs","sources":["../../../../../../packages/components/result/src/result.vue?vue&type=template&id=263c10e5&lang.js"],"sourcesContent":["<template>\n  <div class=\"el-result\">\n    <div class=\"el-result__icon\">\n      <slot name=\"icon\">\n        <component\n          :is=\"resultIcon.component\"\n          v-if=\"resultIcon.component\"\n          :class=\"resultIcon.class\"\n        />\n      </slot>\n    </div>\n    <div v-if=\"title || $slots.title\" class=\"el-result__title\">\n      <slot name=\"title\">\n        <p>{{ title }}</p>\n      </slot>\n    </div>\n    <div v-if=\"subTitle || $slots.subTitle\" class=\"el-result__subtitle\">\n      <slot name=\"subTitle\">\n        <p>{{ subTitle }}</p>\n      </slot>\n    </div>\n    <div v-if=\"$slots.extra\" class=\"el-result__extra\">\n      <slot name=\"extra\"></slot>\n    </div>\n  </div>\n</template>\n<script lang=\"ts\">\nimport { computed, defineComponent } from 'vue'\nimport { resultProps, IconComponentMap, IconMap } from './result'\n\nexport default defineComponent({\n  name: 'ElResult',\n  props: resultProps,\n  setup(props) {\n    const resultIcon = computed(() => {\n      const icon = props.icon\n      const iconClass = icon && IconMap[icon] ? IconMap[icon] : 'icon-info'\n      const iconComponent =\n        IconComponentMap[iconClass] || IconComponentMap['icon-info']\n\n      return {\n        class: iconClass,\n        component: iconComponent,\n      }\n    })\n\n    return {\n      resultIcon,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":";;;qBACO,KAAK,EAAC;;;;EAUyB;;;;EAKM;;;;EAKf;;;;;;;;;;;;;;;KAVd,wBAAe,MAAM;;;0DAEtB;;;;qBAGa;;;;;;;"}
+{"version":3,"file":"result.vue_vue_type_template_id_263c10e5_lang.mjs","sources":["../../../../../../packages/components/result/src/result.vue?vue&type=template&id=263c10e5&lang.js"],"sourcesContent":["<template>\n  <div :class=\"ns.b()\">\n    <div :class=\"ns.e('icon')\">\n      <slot name=\"icon\">\n        <component\n          :is=\"resultIcon.component\"\n          v-if=\"resultIcon.component\"\n          :class=\"resultIcon.class\"\n        />\n      </slot>\n    </div>\n    <div v-if=\"title || $slots.title\" :class=\"ns.e('title')\">\n      <slot name=\"title\">\n        <p>{{ title }}</p>\n      </slot>\n    </div>\n    <div v-if=\"subTitle || $slots.subTitle\" :class=\"ns.e('subtitle')\">\n      <slot name=\"subTitle\">\n        <p>{{ subTitle }}</p>\n      </slot>\n    </div>\n    <div v-if=\"$slots.extra\" :class=\"ns.e('extra')\">\n      <slot name=\"extra\"></slot>\n    </div>\n  </div>\n</template>\n<script lang=\"ts\">\nimport { computed, defineComponent } from 'vue'\nimport { useNamespace } from '@element-plus/hooks'\nimport { resultProps, IconComponentMap, IconMap } from './result'\n\nexport default defineComponent({\n  name: 'ElResult',\n  props: resultProps,\n  setup(props) {\n    const ns = useNamespace('result')\n\n    const resultIcon = computed(() => {\n      const icon = props.icon\n      const iconClass = icon && IconMap[icon] ? IconMap[icon] : 'icon-info'\n      const iconComponent =\n        IconComponentMap[iconClass] || IconComponentMap['icon-info']\n\n      return {\n        class: iconClass,\n        component: iconComponent,\n      }\n    })\n\n    return {\n      ns,\n      resultIcon,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;KAWe;sBAAX;;;;;YAEI;;;;gCAGyB;;;eAAiB;;;;;;;;;;;"}

package/es/components/row/index.d.ts

@@ -1,7 +1,7 @@
 export declare const ElRow: import("../../utils/types").SFCWithInstall<import("vue").DefineComponent<{
     readonly tag: import("../../utils/props").BuildPropReturn<StringConstructor, "div", unknown, unknown, unknown>;
     readonly gutter: import("../../utils/props").BuildPropReturn<NumberConstructor, 0, unknown, unknown, unknown>;
-    readonly justify: import("../../utils/props").BuildPropReturn<StringConstructor, "start", unknown, "space-around" | "space-between" | "center" | "end" | "start", unknown>;
+    readonly justify: import("../../utils/props").BuildPropReturn<StringConstructor, "start", unknown, "center" | "space-around" | "space-between" | "end" | "start", unknown>;
     readonly align: import("../../utils/props").BuildPropReturn<StringConstructor, "top", unknown, "top" | "bottom" | "middle", unknown>;
 }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
@@ -12,12 +12,12 @@ export declare const ElRow: import("../../utils/types").SFCWithInstall<import("v
     readonly align?: unknown;
 } & {
     align: import("../../utils/props").BuildPropType<StringConstructor, "top" | "bottom" | "middle", unknown>;
-    justify: import("../../utils/props").BuildPropType<StringConstructor, "space-around" | "space-between" | "center" | "end" | "start", unknown>;
+    justify: import("../../utils/props").BuildPropType<StringConstructor, "center" | "space-around" | "space-between" | "end" | "start", unknown>;
     tag: string;
     gutter: number;
 } & {}>, {
     align: import("../../utils/props").BuildPropType<StringConstructor, "top" | "bottom" | "middle", unknown>;
-    justify: import("../../utils/props").BuildPropType<StringConstructor, "space-around" | "space-between" | "center" | "end" | "start", unknown>;
+    justify: import("../../utils/props").BuildPropType<StringConstructor, "center" | "space-around" | "space-between" | "end" | "start", unknown>;
     tag: string;
     gutter: number;
 }>> & Record<string, any>;

package/es/components/row/src/row.d.ts

@@ -2,14 +2,14 @@ import type { ExtractPropTypes } from 'vue';
 export declare const rowProps: {
     readonly tag: import("element-plus/es/utils/props").BuildPropReturn<StringConstructor, "div", unknown, unknown, unknown>;
     readonly gutter: import("element-plus/es/utils/props").BuildPropReturn<NumberConstructor, 0, unknown, unknown, unknown>;
-    readonly justify: import("element-plus/es/utils/props").BuildPropReturn<StringConstructor, "start", unknown, "space-around" | "space-between" | "center" | "end" | "start", unknown>;
+    readonly justify: import("element-plus/es/utils/props").BuildPropReturn<StringConstructor, "start", unknown, "center" | "space-around" | "space-between" | "end" | "start", unknown>;
     readonly align: import("element-plus/es/utils/props").BuildPropReturn<StringConstructor, "top", unknown, "top" | "bottom" | "middle", unknown>;
 };
 export declare type RowProps = ExtractPropTypes<typeof rowProps>;
-declare const _default: import("vue").DefineComponent<{
+declare const Row: import("vue").DefineComponent<{
     readonly tag: import("element-plus/es/utils/props").BuildPropReturn<StringConstructor, "div", unknown, unknown, unknown>;
     readonly gutter: import("element-plus/es/utils/props").BuildPropReturn<NumberConstructor, 0, unknown, unknown, unknown>;
-    readonly justify: import("element-plus/es/utils/props").BuildPropReturn<StringConstructor, "start", unknown, "space-around" | "space-between" | "center" | "end" | "start", unknown>;
+    readonly justify: import("element-plus/es/utils/props").BuildPropReturn<StringConstructor, "start", unknown, "center" | "space-around" | "space-between" | "end" | "start", unknown>;
     readonly align: import("element-plus/es/utils/props").BuildPropReturn<StringConstructor, "top", unknown, "top" | "bottom" | "middle", unknown>;
 }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
@@ -20,13 +20,14 @@ declare const _default: import("vue").DefineComponent<{
     readonly align?: unknown;
 } & {
     align: import("element-plus/es/utils/props").BuildPropType<StringConstructor, "top" | "bottom" | "middle", unknown>;
-    justify: import("element-plus/es/utils/props").BuildPropType<StringConstructor, "space-around" | "space-between" | "center" | "end" | "start", unknown>;
+    justify: import("element-plus/es/utils/props").BuildPropType<StringConstructor, "center" | "space-around" | "space-between" | "end" | "start", unknown>;
     tag: string;
     gutter: number;
 } & {}>, {
     align: import("element-plus/es/utils/props").BuildPropType<StringConstructor, "top" | "bottom" | "middle", unknown>;
-    justify: import("element-plus/es/utils/props").BuildPropType<StringConstructor, "space-around" | "space-between" | "center" | "end" | "start", unknown>;
+    justify: import("element-plus/es/utils/props").BuildPropType<StringConstructor, "center" | "space-around" | "space-between" | "end" | "start", unknown>;
     tag: string;
     gutter: number;
 }>;
-export default _default;
+export default Row;
+export declare type RowInstance = InstanceType<typeof Row>;

package/es/components/row/src/row.mjs

@@ -1,5 +1,7 @@
 import { defineComponent, computed, provide, h } from 'vue';
 import { buildProps } from '../../../utils/props.mjs';
+import '../../../hooks/index.mjs';
+import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
 
 const rowProps = buildProps({
   tag: {
@@ -21,30 +23,31 @@ const rowProps = buildProps({
     default: "top"
   }
 });
-var Row = defineComponent({
+const Row = defineComponent({
   name: "ElRow",
   props: rowProps,
   setup(props, { slots }) {
+    const ns = useNamespace("row");
     const gutter = computed(() => props.gutter);
     provide("ElRow", {
       gutter
     });
     const style = computed(() => {
-      const ret = {
+      const styles = {
         marginLeft: "",
         marginRight: ""
       };
       if (props.gutter) {
-        ret.marginLeft = `-${props.gutter / 2}px`;
-        ret.marginRight = ret.marginLeft;
+        styles.marginLeft = `-${props.gutter / 2}px`;
+        styles.marginRight = styles.marginLeft;
       }
-      return ret;
+      return styles;
     });
     return () => {
       var _a;
       return h(props.tag, {
         class: [
-          "el-row",
+          ns.b(),
           props.justify !== "start" ? `is-justify-${props.justify}` : "",
           props.align !== "top" ? `is-align-${props.align}` : ""
         ],

package/es/components/row/src/row.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"row.mjs","sources":["../../../../../../packages/components/row/src/row.ts"],"sourcesContent":["import { defineComponent, computed, h, provide } from 'vue'\nimport { buildProps } from '@element-plus/utils/props'\nimport type { ExtractPropTypes } from 'vue'\n\nexport const rowProps = buildProps({\n  tag: {\n    type: String,\n    default: 'div',\n  },\n  gutter: {\n    type: Number,\n    default: 0,\n  },\n  justify: {\n    type: String,\n    values: ['start', 'center', 'end', 'space-around', 'space-between'],\n    default: 'start',\n  },\n  align: {\n    type: String,\n    values: ['top', 'middle', 'bottom'],\n    default: 'top',\n  },\n} as const)\nexport type RowProps = ExtractPropTypes<typeof rowProps>\n\nexport default defineComponent({\n  name: 'ElRow',\n  props: rowProps,\n\n  setup(props, { slots }) {\n    const gutter = computed(() => props.gutter)\n    provide('ElRow', {\n      gutter,\n    })\n\n    const style = computed(() => {\n      const ret = {\n        marginLeft: '',\n        marginRight: '',\n      }\n      if (props.gutter) {\n        ret.marginLeft = `-${props.gutter / 2}px`\n        ret.marginRight = ret.marginLeft\n      }\n      return ret\n    })\n\n    return () =>\n      h(\n        props.tag,\n        {\n          class: [\n            'el-row',\n            props.justify !== 'start' ? `is-justify-${props.justify}` : '',\n            props.align !== 'top' ? `is-align-${props.align}` : '',\n          ],\n          style: style.value,\n        },\n        slots.default?.()\n      )\n  },\n})\n"],"names":[],"mappings":";;;AAEY,MAAC,QAAQ,GAAG,UAAU,CAAC;AACnC,EAAE,GAAG,EAAE;AACP,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,OAAO,EAAE;AACX,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,MAAM,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,cAAc,EAAE,eAAe,CAAC;AACvE,IAAI,OAAO,EAAE,OAAO;AACpB,GAAG;AACH,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,MAAM,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,CAAC;AACvC,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,CAAC,EAAE;AACH,UAAe,eAAe,CAAC;AAC/B,EAAE,IAAI,EAAE,OAAO;AACf,EAAE,KAAK,EAAE,QAAQ;AACjB,EAAE,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE;AAC1B,IAAI,MAAM,MAAM,GAAG,QAAQ,CAAC,MAAM,KAAK,CAAC,MAAM,CAAC,CAAC;AAChD,IAAI,OAAO,CAAC,OAAO,EAAE;AACrB,MAAM,MAAM;AACZ,KAAK,CAAC,CAAC;AACP,IAAI,MAAM,KAAK,GAAG,QAAQ,CAAC,MAAM;AACjC,MAAM,MAAM,GAAG,GAAG;AAClB,QAAQ,UAAU,EAAE,EAAE;AACtB,QAAQ,WAAW,EAAE,EAAE;AACvB,OAAO,CAAC;AACR,MAAM,IAAI,KAAK,CAAC,MAAM,EAAE;AACxB,QAAQ,GAAG,CAAC,UAAU,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC;AAClD,QAAQ,GAAG,CAAC,WAAW,GAAG,GAAG,CAAC,UAAU,CAAC;AACzC,OAAO;AACP,MAAM,OAAO,GAAG,CAAC;AACjB,KAAK,CAAC,CAAC;AACP,IAAI,OAAO,MAAM;AACjB,MAAM,IAAI,EAAE,CAAC;AACb,MAAM,OAAO,CAAC,CAAC,KAAK,CAAC,GAAG,EAAE;AAC1B,QAAQ,KAAK,EAAE;AACf,UAAU,QAAQ;AAClB,UAAU,KAAK,CAAC,OAAO,KAAK,OAAO,GAAG,CAAC,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE;AACxE,UAAU,KAAK,CAAC,KAAK,KAAK,KAAK,GAAG,CAAC,SAAS,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,GAAG,EAAE;AAChE,SAAS;AACT,QAAQ,KAAK,EAAE,KAAK,CAAC,KAAK;AAC1B,OAAO,EAAE,CAAC,EAAE,GAAG,KAAK,CAAC,OAAO,KAAK,IAAI,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;AACjE,KAAK,CAAC;AACN,GAAG;AACH,CAAC,CAAC;;;;"}
+{"version":3,"file":"row.mjs","sources":["../../../../../../packages/components/row/src/row.ts"],"sourcesContent":["import { defineComponent, computed, h, provide } from 'vue'\nimport { buildProps } from '@element-plus/utils/props'\nimport { useNamespace } from '@element-plus/hooks'\nimport type { ExtractPropTypes, CSSProperties } from 'vue'\n\nexport const rowProps = buildProps({\n  tag: {\n    type: String,\n    default: 'div',\n  },\n  gutter: {\n    type: Number,\n    default: 0,\n  },\n  justify: {\n    type: String,\n    values: ['start', 'center', 'end', 'space-around', 'space-between'],\n    default: 'start',\n  },\n  align: {\n    type: String,\n    values: ['top', 'middle', 'bottom'],\n    default: 'top',\n  },\n} as const)\nexport type RowProps = ExtractPropTypes<typeof rowProps>\n\nconst Row = defineComponent({\n  name: 'ElRow',\n  props: rowProps,\n\n  setup(props, { slots }) {\n    const ns = useNamespace('row')\n\n    const gutter = computed(() => props.gutter)\n    provide('ElRow', {\n      gutter,\n    })\n\n    const style = computed(() => {\n      const styles: CSSProperties = {\n        marginLeft: '',\n        marginRight: '',\n      }\n      if (props.gutter) {\n        styles.marginLeft = `-${props.gutter / 2}px`\n        styles.marginRight = styles.marginLeft\n      }\n      return styles\n    })\n\n    return () =>\n      h(\n        props.tag,\n        {\n          class: [\n            ns.b(),\n            props.justify !== 'start' ? `is-justify-${props.justify}` : '',\n            props.align !== 'top' ? `is-align-${props.align}` : '',\n          ],\n          style: style.value,\n        },\n        slots.default?.()\n      )\n  },\n})\n\nexport default Row\nexport type RowInstance = InstanceType<typeof Row>\n"],"names":[],"mappings":";;;;;AAGY,MAAC,QAAQ,GAAG,UAAU,CAAC;AACnC,EAAE,GAAG,EAAE;AACP,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,OAAO,EAAE;AACX,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,MAAM,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,cAAc,EAAE,eAAe,CAAC;AACvE,IAAI,OAAO,EAAE,OAAO;AACpB,GAAG;AACH,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,MAAM,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,CAAC;AACvC,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,CAAC,EAAE;AACE,MAAC,GAAG,GAAG,eAAe,CAAC;AAC5B,EAAE,IAAI,EAAE,OAAO;AACf,EAAE,KAAK,EAAE,QAAQ;AACjB,EAAE,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE;AAC1B,IAAI,MAAM,EAAE,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;AACnC,IAAI,MAAM,MAAM,GAAG,QAAQ,CAAC,MAAM,KAAK,CAAC,MAAM,CAAC,CAAC;AAChD,IAAI,OAAO,CAAC,OAAO,EAAE;AACrB,MAAM,MAAM;AACZ,KAAK,CAAC,CAAC;AACP,IAAI,MAAM,KAAK,GAAG,QAAQ,CAAC,MAAM;AACjC,MAAM,MAAM,MAAM,GAAG;AACrB,QAAQ,UAAU,EAAE,EAAE;AACtB,QAAQ,WAAW,EAAE,EAAE;AACvB,OAAO,CAAC;AACR,MAAM,IAAI,KAAK,CAAC,MAAM,EAAE;AACxB,QAAQ,MAAM,CAAC,UAAU,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC;AACrD,QAAQ,MAAM,CAAC,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC;AAC/C,OAAO;AACP,MAAM,OAAO,MAAM,CAAC;AACpB,KAAK,CAAC,CAAC;AACP,IAAI,OAAO,MAAM;AACjB,MAAM,IAAI,EAAE,CAAC;AACb,MAAM,OAAO,CAAC,CAAC,KAAK,CAAC,GAAG,EAAE;AAC1B,QAAQ,KAAK,EAAE;AACf,UAAU,EAAE,CAAC,CAAC,EAAE;AAChB,UAAU,KAAK,CAAC,OAAO,KAAK,OAAO,GAAG,CAAC,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE;AACxE,UAAU,KAAK,CAAC,KAAK,KAAK,KAAK,GAAG,CAAC,SAAS,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,GAAG,EAAE;AAChE,SAAS;AACT,QAAQ,KAAK,EAAE,KAAK,CAAC,KAAK;AAC1B,OAAO,EAAE,CAAC,EAAE,GAAG,KAAK,CAAC,OAAO,KAAK,IAAI,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;AACjE,KAAK,CAAC;AACN,GAAG;AACH,CAAC;;;;"}

package/es/components/scrollbar/index.d.ts

@@ -44,8 +44,8 @@ export declare const ElScrollbar: import("../../utils/types").SFCWithInstall<imp
     readonly minSize?: unknown;
 } & {
     height: import("../../utils/props").BuildPropType<readonly [StringConstructor, NumberConstructor], unknown, unknown>;
-    always: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     maxHeight: import("../../utils/props").BuildPropType<readonly [StringConstructor, NumberConstructor], unknown, unknown>;
+    always: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     native: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     wrapStyle: import("vue").StyleValue;
     wrapClass: import("../../utils/props").BuildPropType<readonly [StringConstructor, ArrayConstructor], unknown, unknown>;
@@ -61,8 +61,8 @@ export declare const ElScrollbar: import("../../utils/types").SFCWithInstall<imp
     }) => any) | undefined;
 }, {
     height: import("../../utils/props").BuildPropType<readonly [StringConstructor, NumberConstructor], unknown, unknown>;
-    always: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     maxHeight: import("../../utils/props").BuildPropType<readonly [StringConstructor, NumberConstructor], unknown, unknown>;
+    always: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     native: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     wrapStyle: import("vue").StyleValue;
     wrapClass: import("../../utils/props").BuildPropType<readonly [StringConstructor, ArrayConstructor], unknown, unknown>;

package/es/components/scrollbar/src/bar.vue_vue_type_script_lang.mjs

@@ -1,5 +1,5 @@
 import { defineComponent, inject, ref, computed, onBeforeUnmount, toRef } from 'vue';
-import { useEventListener } from '@vueuse/core';
+import { isClient, useEventListener } from '@vueuse/core';
 import '../../../tokens/index.mjs';
 import { throwError } from '../../../utils/error.mjs';
 import { BAR_MAP, renderThumbStyle } from './util.mjs';
@@ -20,7 +20,7 @@ var script = defineComponent({
     const visible = ref(false);
     let cursorDown = false;
     let cursorLeave = false;
-    let onselectstartStore = null;
+    let onselectstartStore = isClient ? document.onselectstart : null;
     const bar = computed(() => BAR_MAP[props.vertical ? "vertical" : "horizontal"]);
     const thumbStyle = computed(() => renderThumbStyle({
       size: props.size,
@@ -74,7 +74,7 @@ var script = defineComponent({
       barStore.value[bar.value.axis] = 0;
       document.removeEventListener("mousemove", mouseMoveDocumentHandler);
       document.removeEventListener("mouseup", mouseUpDocumentHandler);
-      document.onselectstart = onselectstartStore;
+      restoreOnselectstart();
       if (cursorLeave)
         visible.value = false;
     };
@@ -86,7 +86,14 @@ var script = defineComponent({
       cursorLeave = true;
       visible.value = cursorDown;
     };
-    onBeforeUnmount(() => document.removeEventListener("mouseup", mouseUpDocumentHandler));
+    onBeforeUnmount(() => {
+      restoreOnselectstart();
+      document.removeEventListener("mouseup", mouseUpDocumentHandler);
+    });
+    const restoreOnselectstart = () => {
+      if (document.onselectstart !== onselectstartStore)
+        document.onselectstart = onselectstartStore;
+    };
     useEventListener(toRef(scrollbar, "scrollbarElement"), "mousemove", mouseMoveScrollbarHandler);
     useEventListener(toRef(scrollbar, "scrollbarElement"), "mouseleave", mouseLeaveScrollbarHandler);
     return {