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

package/es/components/progress/src/index.vue_vue_type_script_lang.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/progress/src/index.vue"],"sourcesContent":["<template>\n  <div\n    class=\"el-progress\"\n    :class=\"[\n      `el-progress--${type}`,\n      status ? `is-${status}` : '',\n      {\n        'el-progress--without-text': !showText,\n        'el-progress--text-inside': textInside,\n      },\n    ]\"\n    role=\"progressbar\"\n    :aria-valuenow=\"percentage\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n  >\n    <div v-if=\"type === 'line'\" class=\"el-progress-bar\">\n      <div\n        class=\"el-progress-bar__outer\"\n        :style=\"{ height: `${strokeWidth}px` }\"\n      >\n        <div\n          :class=\"[\n            'el-progress-bar__inner',\n            { 'el-progress-bar__inner--indeterminate': indeterminate },\n          ]\"\n          :style=\"barStyle\"\n        >\n          <div\n            v-if=\"(showText || $slots.default) && textInside\"\n            class=\"el-progress-bar__innerText\"\n          >\n            <slot v-bind=\"slotData\">\n              <span>{{ content }}</span>\n            </slot>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div\n      v-else\n      class=\"el-progress-circle\"\n      :style=\"{ height: `${width}px`, width: `${width}px` }\"\n    >\n      <svg viewBox=\"0 0 100 100\">\n        <path\n          class=\"el-progress-circle__track\"\n          :d=\"trackPath\"\n          stroke=\"#e5e9f2\"\n          :stroke-width=\"relativeStrokeWidth\"\n          fill=\"none\"\n          :style=\"trailPathStyle\"\n        />\n        <path\n          class=\"el-progress-circle__path\"\n          :d=\"trackPath\"\n          :stroke=\"stroke\"\n          fill=\"none\"\n          :stroke-linecap=\"strokeLinecap\"\n          :stroke-width=\"percentage ? relativeStrokeWidth : 0\"\n          :style=\"circlePathStyle\"\n        />\n      </svg>\n    </div>\n    <div\n      v-if=\"(showText || $slots.default) && !textInside\"\n      class=\"el-progress__text\"\n      :style=\"{ fontSize: `${progressTextSize}px` }\"\n    >\n      <slot v-bind=\"slotData\">\n        <span v-if=\"!status\">{{ content }}</span>\n        <el-icon v-else><component :is=\"statusIcon\" /></el-icon>\n      </slot>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent } from 'vue'\nimport { ElIcon } from '@element-plus/components/icon'\nimport {\n  WarningFilled,\n  CircleCheck,\n  CircleClose,\n  Check,\n  Close,\n} from '@element-plus/icons'\n\nimport type { PropType, SVGAttributes } from 'vue'\n\ntype ProgressFuncType = (percentage: number) => string\n\ninterface IProgressProps {\n  type: string\n  percentage: number\n  status: string\n  indeterminate: boolean\n  duration: number\n  strokeWidth: number\n  strokeLinecap: NonNullable<SVGAttributes['stroke-linecap']>\n  textInside: boolean\n  width: number\n  showText: boolean\n  color:\n    | string\n    | Array<string | { color: string; percentage: number }>\n    | ProgressFuncType\n  format: ProgressFuncType\n}\n\nexport default defineComponent({\n  name: 'ElProgress',\n  components: {\n    ElIcon,\n    CircleCheck,\n    CircleClose,\n    Check,\n    Close,\n    WarningFilled,\n  },\n  props: {\n    type: {\n      type: String,\n      default: 'line',\n      validator: (val: string): boolean =>\n        ['line', 'circle', 'dashboard'].indexOf(val) > -1,\n    },\n    percentage: {\n      type: Number,\n      default: 0,\n      validator: (val: number): boolean => val >= 0 && val <= 100,\n    },\n    status: {\n      type: String,\n      default: '',\n      validator: (val: string): boolean =>\n        ['', 'success', 'exception', 'warning'].indexOf(val) > -1,\n    },\n    indeterminate: {\n      type: Boolean,\n      default: false,\n    },\n    duration: {\n      type: Number,\n      default: 3,\n    },\n    strokeWidth: {\n      type: Number,\n      default: 6,\n    },\n    strokeLinecap: {\n      type: String as PropType<IProgressProps['strokeLinecap']>,\n      default: 'round' as IProgressProps['strokeLinecap'],\n    },\n    textInside: {\n      type: Boolean,\n      default: false,\n    },\n    width: {\n      type: Number,\n      default: 126,\n    },\n    showText: {\n      type: Boolean,\n      default: true,\n    },\n    color: {\n      type: [String, Array, Function],\n      default: '',\n    },\n    format: {\n      type: Function,\n      default: (percentage: number): string => `${percentage}%`,\n    },\n  },\n  setup(props: IProgressProps) {\n    const barStyle = computed(() => {\n      return {\n        width: `${props.percentage}%`,\n        animationDuration: `${props.duration}s`,\n        backgroundColor: getCurrentColor(props.percentage),\n      }\n    })\n\n    const relativeStrokeWidth = computed(() => {\n      return ((props.strokeWidth / props.width) * 100).toFixed(1)\n    })\n\n    const radius = computed(() => {\n      if (props.type === 'circle' || props.type === 'dashboard') {\n        return parseInt(`${50 - parseFloat(relativeStrokeWidth.value) / 2}`, 10)\n      } else {\n        return 0\n      }\n    })\n\n    const trackPath = computed(() => {\n      const r = radius.value\n      const isDashboard = props.type === 'dashboard'\n      return `\n          M 50 50\n          m 0 ${isDashboard ? '' : '-'}${r}\n          a ${r} ${r} 0 1 1 0 ${isDashboard ? '-' : ''}${r * 2}\n          a ${r} ${r} 0 1 1 0 ${isDashboard ? '' : '-'}${r * 2}\n          `\n    })\n\n    const perimeter = computed(() => {\n      return 2 * Math.PI * radius.value\n    })\n\n    const rate = computed(() => {\n      return props.type === 'dashboard' ? 0.75 : 1\n    })\n\n    const strokeDashoffset = computed(() => {\n      const offset = (-1 * perimeter.value * (1 - rate.value)) / 2\n      return `${offset}px`\n    })\n\n    const trailPathStyle = computed(() => {\n      return {\n        strokeDasharray: `${perimeter.value * rate.value}px, ${\n          perimeter.value\n        }px`,\n        strokeDashoffset: strokeDashoffset.value,\n      }\n    })\n\n    const circlePathStyle = computed(() => {\n      return {\n        strokeDasharray: `${\n          perimeter.value * rate.value * (props.percentage / 100)\n        }px, ${perimeter.value}px`,\n        strokeDashoffset: strokeDashoffset.value,\n        transition: 'stroke-dasharray 0.6s ease 0s, stroke 0.6s ease',\n      }\n    })\n\n    const stroke = computed(() => {\n      let ret\n      if (props.color) {\n        ret = getCurrentColor(props.percentage)\n      } else {\n        switch (props.status) {\n          case 'success':\n            ret = '#13ce66'\n            break\n          case 'exception':\n            ret = '#ff4949'\n            break\n          case 'warning':\n            ret = '#e6a23c'\n            break\n          default:\n            ret = '#20a0ff'\n        }\n      }\n      return ret\n    })\n\n    const statusIcon = computed(() => {\n      if (props.status === 'warning') {\n        return WarningFilled\n      }\n      if (props.type === 'line') {\n        return props.status === 'success' ? CircleCheck : CircleClose\n      } else {\n        return props.status === 'success' ? Check : Close\n      }\n    })\n\n    const progressTextSize = computed(() => {\n      return props.type === 'line'\n        ? 12 + props.strokeWidth * 0.4\n        : props.width * 0.111111 + 2\n    })\n\n    const content = computed(() => {\n      return props.format(props.percentage)\n    })\n\n    const getCurrentColor = (percentage) => {\n      const { color } = props\n      if (typeof color === 'function') {\n        return color(percentage)\n      } else if (typeof color === 'string') {\n        return color\n      } else {\n        const span = 100 / color.length\n        const seriesColors = color.map((seriesColor, index) => {\n          if (typeof seriesColor === 'string') {\n            return {\n              color: seriesColor,\n              percentage: (index + 1) * span,\n            }\n          }\n          return seriesColor\n        })\n        const colorArray = seriesColors.sort(\n          (a, b) => a.percentage - b.percentage\n        )\n\n        for (let i = 0; i < colorArray.length; i++) {\n          if (colorArray[i].percentage > percentage) {\n            return colorArray[i].color\n          }\n        }\n        return colorArray[colorArray.length - 1]?.color\n      }\n    }\n\n    const slotData = computed(() => {\n      return {\n        percentage: props.percentage,\n      }\n    })\n\n    return {\n      barStyle,\n      relativeStrokeWidth,\n      radius,\n      trackPath,\n      perimeter,\n      rate,\n      strokeDashoffset,\n      trailPathStyle,\n      circlePathStyle,\n      stroke,\n      statusIcon,\n      progressTextSize,\n      content,\n      getCurrentColor,\n      slotData,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":"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"}

package/es/components/progress/src/index.vue_vue_type_template_id_556e268a_lang.mjs

@@ -0,0 +1,94 @@
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, normalizeStyle, renderSlot, normalizeProps, guardReactiveProps, toDisplayString, createCommentVNode, createBlock, withCtx, resolveDynamicComponent } from 'vue';
+
+const _hoisted_1 = ["aria-valuenow"];
+const _hoisted_2 = {
+  key: 0,
+  class: "el-progress-bar"
+};
+const _hoisted_3 = {
+  key: 0,
+  class: "el-progress-bar__innerText"
+};
+const _hoisted_4 = { viewBox: "0 0 100 100" };
+const _hoisted_5 = ["d", "stroke-width"];
+const _hoisted_6 = ["d", "stroke", "stroke-linecap", "stroke-width"];
+const _hoisted_7 = { key: 0 };
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_el_icon = resolveComponent("el-icon");
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass(["el-progress", [
+      `el-progress--${_ctx.type}`,
+      _ctx.status ? `is-${_ctx.status}` : "",
+      {
+        "el-progress--without-text": !_ctx.showText,
+        "el-progress--text-inside": _ctx.textInside
+      }
+    ]]),
+    role: "progressbar",
+    "aria-valuenow": _ctx.percentage,
+    "aria-valuemin": "0",
+    "aria-valuemax": "100"
+  }, [
+    _ctx.type === "line" ? (openBlock(), createElementBlock("div", _hoisted_2, [
+      createElementVNode("div", {
+        class: "el-progress-bar__outer",
+        style: normalizeStyle({ height: `${_ctx.strokeWidth}px` })
+      }, [
+        createElementVNode("div", {
+          class: normalizeClass([
+            "el-progress-bar__inner",
+            { "el-progress-bar__inner--indeterminate": _ctx.indeterminate }
+          ]),
+          style: normalizeStyle(_ctx.barStyle)
+        }, [
+          (_ctx.showText || _ctx.$slots.default) && _ctx.textInside ? (openBlock(), createElementBlock("div", _hoisted_3, [
+            renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(_ctx.slotData)), () => [
+              createElementVNode("span", null, toDisplayString(_ctx.content), 1)
+            ])
+          ])) : createCommentVNode("v-if", true)
+        ], 6)
+      ], 4)
+    ])) : (openBlock(), createElementBlock("div", {
+      key: 1,
+      class: "el-progress-circle",
+      style: normalizeStyle({ height: `${_ctx.width}px`, width: `${_ctx.width}px` })
+    }, [
+      (openBlock(), createElementBlock("svg", _hoisted_4, [
+        createElementVNode("path", {
+          class: "el-progress-circle__track",
+          d: _ctx.trackPath,
+          stroke: "#e5e9f2",
+          "stroke-width": _ctx.relativeStrokeWidth,
+          fill: "none",
+          style: normalizeStyle(_ctx.trailPathStyle)
+        }, null, 12, _hoisted_5),
+        createElementVNode("path", {
+          class: "el-progress-circle__path",
+          d: _ctx.trackPath,
+          stroke: _ctx.stroke,
+          fill: "none",
+          "stroke-linecap": _ctx.strokeLinecap,
+          "stroke-width": _ctx.percentage ? _ctx.relativeStrokeWidth : 0,
+          style: normalizeStyle(_ctx.circlePathStyle)
+        }, null, 12, _hoisted_6)
+      ]))
+    ], 4)),
+    (_ctx.showText || _ctx.$slots.default) && !_ctx.textInside ? (openBlock(), createElementBlock("div", {
+      key: 2,
+      class: "el-progress__text",
+      style: normalizeStyle({ fontSize: `${_ctx.progressTextSize}px` })
+    }, [
+      renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(_ctx.slotData)), () => [
+        !_ctx.status ? (openBlock(), createElementBlock("span", _hoisted_7, toDisplayString(_ctx.content), 1)) : (openBlock(), createBlock(_component_el_icon, { key: 1 }, {
+          default: withCtx(() => [
+            (openBlock(), createBlock(resolveDynamicComponent(_ctx.statusIcon)))
+          ]),
+          _: 1
+        }))
+      ])
+    ], 4)) : createCommentVNode("v-if", true)
+  ], 10, _hoisted_1);
+}
+
+export { render };
+//# sourceMappingURL=index.vue_vue_type_template_id_556e268a_lang.mjs.map

package/es/components/progress/src/index.vue_vue_type_template_id_556e268a_lang.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.vue_vue_type_template_id_556e268a_lang.mjs","sources":["../../../../../../packages/components/progress/src/index.vue?vue&type=template&id=556e268a&lang.js"],"sourcesContent":["<template>\n  <div\n    class=\"el-progress\"\n    :class=\"[\n      `el-progress--${type}`,\n      status ? `is-${status}` : '',\n      {\n        'el-progress--without-text': !showText,\n        'el-progress--text-inside': textInside,\n      },\n    ]\"\n    role=\"progressbar\"\n    :aria-valuenow=\"percentage\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n  >\n    <div v-if=\"type === 'line'\" class=\"el-progress-bar\">\n      <div\n        class=\"el-progress-bar__outer\"\n        :style=\"{ height: `${strokeWidth}px` }\"\n      >\n        <div\n          :class=\"[\n            'el-progress-bar__inner',\n            { 'el-progress-bar__inner--indeterminate': indeterminate },\n          ]\"\n          :style=\"barStyle\"\n        >\n          <div\n            v-if=\"(showText || $slots.default) && textInside\"\n            class=\"el-progress-bar__innerText\"\n          >\n            <slot v-bind=\"slotData\">\n              <span>{{ content }}</span>\n            </slot>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div\n      v-else\n      class=\"el-progress-circle\"\n      :style=\"{ height: `${width}px`, width: `${width}px` }\"\n    >\n      <svg viewBox=\"0 0 100 100\">\n        <path\n          class=\"el-progress-circle__track\"\n          :d=\"trackPath\"\n          stroke=\"#e5e9f2\"\n          :stroke-width=\"relativeStrokeWidth\"\n          fill=\"none\"\n          :style=\"trailPathStyle\"\n        />\n        <path\n          class=\"el-progress-circle__path\"\n          :d=\"trackPath\"\n          :stroke=\"stroke\"\n          fill=\"none\"\n          :stroke-linecap=\"strokeLinecap\"\n          :stroke-width=\"percentage ? relativeStrokeWidth : 0\"\n          :style=\"circlePathStyle\"\n        />\n      </svg>\n    </div>\n    <div\n      v-if=\"(showText || $slots.default) && !textInside\"\n      class=\"el-progress__text\"\n      :style=\"{ fontSize: `${progressTextSize}px` }\"\n    >\n      <slot v-bind=\"slotData\">\n        <span v-if=\"!status\">{{ content }}</span>\n        <el-icon v-else><component :is=\"statusIcon\" /></el-icon>\n      </slot>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent } from 'vue'\nimport { ElIcon } from '@element-plus/components/icon'\nimport {\n  WarningFilled,\n  CircleCheck,\n  CircleClose,\n  Check,\n  Close,\n} from '@element-plus/icons'\n\nimport type { PropType, SVGAttributes } from 'vue'\n\ntype ProgressFuncType = (percentage: number) => string\n\ninterface IProgressProps {\n  type: string\n  percentage: number\n  status: string\n  indeterminate: boolean\n  duration: number\n  strokeWidth: number\n  strokeLinecap: NonNullable<SVGAttributes['stroke-linecap']>\n  textInside: boolean\n  width: number\n  showText: boolean\n  color:\n    | string\n    | Array<string | { color: string; percentage: number }>\n    | ProgressFuncType\n  format: ProgressFuncType\n}\n\nexport default defineComponent({\n  name: 'ElProgress',\n  components: {\n    ElIcon,\n    CircleCheck,\n    CircleClose,\n    Check,\n    Close,\n    WarningFilled,\n  },\n  props: {\n    type: {\n      type: String,\n      default: 'line',\n      validator: (val: string): boolean =>\n        ['line', 'circle', 'dashboard'].indexOf(val) > -1,\n    },\n    percentage: {\n      type: Number,\n      default: 0,\n      validator: (val: number): boolean => val >= 0 && val <= 100,\n    },\n    status: {\n      type: String,\n      default: '',\n      validator: (val: string): boolean =>\n        ['', 'success', 'exception', 'warning'].indexOf(val) > -1,\n    },\n    indeterminate: {\n      type: Boolean,\n      default: false,\n    },\n    duration: {\n      type: Number,\n      default: 3,\n    },\n    strokeWidth: {\n      type: Number,\n      default: 6,\n    },\n    strokeLinecap: {\n      type: String as PropType<IProgressProps['strokeLinecap']>,\n      default: 'round' as IProgressProps['strokeLinecap'],\n    },\n    textInside: {\n      type: Boolean,\n      default: false,\n    },\n    width: {\n      type: Number,\n      default: 126,\n    },\n    showText: {\n      type: Boolean,\n      default: true,\n    },\n    color: {\n      type: [String, Array, Function],\n      default: '',\n    },\n    format: {\n      type: Function,\n      default: (percentage: number): string => `${percentage}%`,\n    },\n  },\n  setup(props: IProgressProps) {\n    const barStyle = computed(() => {\n      return {\n        width: `${props.percentage}%`,\n        animationDuration: `${props.duration}s`,\n        backgroundColor: getCurrentColor(props.percentage),\n      }\n    })\n\n    const relativeStrokeWidth = computed(() => {\n      return ((props.strokeWidth / props.width) * 100).toFixed(1)\n    })\n\n    const radius = computed(() => {\n      if (props.type === 'circle' || props.type === 'dashboard') {\n        return parseInt(`${50 - parseFloat(relativeStrokeWidth.value) / 2}`, 10)\n      } else {\n        return 0\n      }\n    })\n\n    const trackPath = computed(() => {\n      const r = radius.value\n      const isDashboard = props.type === 'dashboard'\n      return `\n          M 50 50\n          m 0 ${isDashboard ? '' : '-'}${r}\n          a ${r} ${r} 0 1 1 0 ${isDashboard ? '-' : ''}${r * 2}\n          a ${r} ${r} 0 1 1 0 ${isDashboard ? '' : '-'}${r * 2}\n          `\n    })\n\n    const perimeter = computed(() => {\n      return 2 * Math.PI * radius.value\n    })\n\n    const rate = computed(() => {\n      return props.type === 'dashboard' ? 0.75 : 1\n    })\n\n    const strokeDashoffset = computed(() => {\n      const offset = (-1 * perimeter.value * (1 - rate.value)) / 2\n      return `${offset}px`\n    })\n\n    const trailPathStyle = computed(() => {\n      return {\n        strokeDasharray: `${perimeter.value * rate.value}px, ${\n          perimeter.value\n        }px`,\n        strokeDashoffset: strokeDashoffset.value,\n      }\n    })\n\n    const circlePathStyle = computed(() => {\n      return {\n        strokeDasharray: `${\n          perimeter.value * rate.value * (props.percentage / 100)\n        }px, ${perimeter.value}px`,\n        strokeDashoffset: strokeDashoffset.value,\n        transition: 'stroke-dasharray 0.6s ease 0s, stroke 0.6s ease',\n      }\n    })\n\n    const stroke = computed(() => {\n      let ret\n      if (props.color) {\n        ret = getCurrentColor(props.percentage)\n      } else {\n        switch (props.status) {\n          case 'success':\n            ret = '#13ce66'\n            break\n          case 'exception':\n            ret = '#ff4949'\n            break\n          case 'warning':\n            ret = '#e6a23c'\n            break\n          default:\n            ret = '#20a0ff'\n        }\n      }\n      return ret\n    })\n\n    const statusIcon = computed(() => {\n      if (props.status === 'warning') {\n        return WarningFilled\n      }\n      if (props.type === 'line') {\n        return props.status === 'success' ? CircleCheck : CircleClose\n      } else {\n        return props.status === 'success' ? Check : Close\n      }\n    })\n\n    const progressTextSize = computed(() => {\n      return props.type === 'line'\n        ? 12 + props.strokeWidth * 0.4\n        : props.width * 0.111111 + 2\n    })\n\n    const content = computed(() => {\n      return props.format(props.percentage)\n    })\n\n    const getCurrentColor = (percentage) => {\n      const { color } = props\n      if (typeof color === 'function') {\n        return color(percentage)\n      } else if (typeof color === 'string') {\n        return color\n      } else {\n        const span = 100 / color.length\n        const seriesColors = color.map((seriesColor, index) => {\n          if (typeof seriesColor === 'string') {\n            return {\n              color: seriesColor,\n              percentage: (index + 1) * span,\n            }\n          }\n          return seriesColor\n        })\n        const colorArray = seriesColors.sort(\n          (a, b) => a.percentage - b.percentage\n        )\n\n        for (let i = 0; i < colorArray.length; i++) {\n          if (colorArray[i].percentage > percentage) {\n            return colorArray[i].color\n          }\n        }\n        return colorArray[colorArray.length - 1]?.color\n      }\n    }\n\n    const slotData = computed(() => {\n      return {\n        percentage: props.percentage,\n      }\n    })\n\n    return {\n      barStyle,\n      relativeStrokeWidth,\n      radius,\n      trackPath,\n      perimeter,\n      rate,\n      strokeDashoffset,\n      trailPathStyle,\n      circlePathStyle,\n      stroke,\n      statusIcon,\n      progressTextSize,\n      content,\n      getCurrentColor,\n      slotData,\n    }\n  },\n})\n</script>\n"],"names":["_createElementBlock","_createElementVNode","_renderSlot","_createBlock","_resolveDynamicComponent"],"mappings":";;;;;EAgBgC,OAAM;AAAA;;;EAc1B,OAAM;AAAA;qBAcP,SAAQ;;;;;;sBA3CjBA;IACE,uBAAM;;;;;;;;IASN,MAAK;AAAA,IACJ,iBAAe;IAChB,iBAAc;AAAA,IACd,iBAAc;AAAA;IAEH,qCAAXA,0BAAA;MACEC;QACE,OAAM;AAAA,QACL,mCAAoB;;QAErBA;UACG;;;;UAIA,sBAAO;;UAGC,kBAAY,YAAO,YAAY,gCADxCD,0BAAA;YAIEE,qEAAc,iBAAd;cACED,iDAAS;;;;;wBAMnBD;;MAEE,OAAM;AAAA,MACL,mCAAoB,0BAAqB;;oBAE1CA,0BAAA;QACEC;UACE,OAAM;AAAA,UACL,GAAG;UACJ,QAAO;AAAA,UACN,gBAAc;UACf,MAAK;AAAA,UACJ,sBAAO;;QAEVA;UACE,OAAM;AAAA,UACL,GAAG;UACH,QAAQ;UACT,MAAK;AAAA,UACJ,kBAAgB;UAChB,gBAAc,kBAAa;UAC3B,sBAAO;;;;IAKL,kBAAY,YAAO,aAAa,gCADzCD;;MAEE,OAAM;AAAA,MACL,qCAAsB;;MAEvBE,qEAAc,iBAAd;SACe,4BAAbF,uDAAwB,mCACxBG;2BAAgB;0BAAAA,YAA8BC,wBAAd;;;;;;;;;;;"}

package/es/components/radio/index.mjs

@@ -5,9 +5,9 @@ import './src/radio-group2.mjs';
 export { radioEmits, radioProps, radioPropsBase, useRadio } from './src/radio.mjs';
 export { radioGroupEmits, radioGroupProps } from './src/radio-group.mjs';
 export { radioButtonProps } from './src/radio-button.mjs';
-import script from './src/radio.vue_vue&type=script&lang.mjs';
-import script$1 from './src/radio-button.vue_vue&type=script&lang.mjs';
-import script$2 from './src/radio-group.vue_vue&type=script&lang.mjs';
+import script from './src/radio.vue_vue_type_script_lang.mjs';
+import script$1 from './src/radio-button.vue_vue_type_script_lang.mjs';
+import script$2 from './src/radio-group.vue_vue_type_script_lang.mjs';
 
 const ElRadio = withInstall(script, {
   RadioButton: script$1,

package/es/components/radio/src/radio-button.vue_vue_type_script_lang.mjs

@@ -0,0 +1,41 @@
+import { defineComponent, computed } from 'vue';
+import { useRadio } from './radio.mjs';
+import { radioButtonProps } from './radio-button.mjs';
+
+var script = defineComponent({
+  name: "ElRadioButton",
+  props: radioButtonProps,
+  setup(props, { emit }) {
+    const {
+      radioRef,
+      isGroup,
+      focus,
+      size,
+      disabled,
+      tabIndex,
+      modelValue,
+      radioGroup
+    } = useRadio(props, emit);
+    const activeStyle = computed(() => {
+      return {
+        backgroundColor: (radioGroup == null ? void 0 : radioGroup.fill) || "",
+        borderColor: (radioGroup == null ? void 0 : radioGroup.fill) || "",
+        boxShadow: (radioGroup == null ? void 0 : radioGroup.fill) ? `-1px 0 0 0 ${radioGroup.fill}` : "",
+        color: (radioGroup == null ? void 0 : radioGroup.textColor) || ""
+      };
+    });
+    return {
+      isGroup,
+      size,
+      disabled,
+      tabIndex,
+      modelValue,
+      focus,
+      activeStyle,
+      radioRef
+    };
+  }
+});
+
+export { script as default };
+//# sourceMappingURL=radio-button.vue_vue_type_script_lang.mjs.map

package/es/components/radio/src/radio-button.vue_vue_type_script_lang.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-button.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/radio/src/radio-button.vue"],"sourcesContent":["<template>\n  <label\n    class=\"el-radio-button\"\n    :class=\"[\n      size ? 'el-radio-button--' + size : '',\n      {\n        'is-active': modelValue === label,\n        'is-disabled': disabled,\n        'is-focus': focus,\n      },\n    ]\"\n    role=\"radio\"\n    :aria-checked=\"modelValue === label\"\n    :aria-disabled=\"disabled\"\n    :tabindex=\"tabIndex\"\n    @keydown.space.stop.prevent=\"modelValue = disabled ? modelValue : label\"\n  >\n    <input\n      ref=\"radioRef\"\n      v-model=\"modelValue\"\n      class=\"el-radio-button__original-radio\"\n      :value=\"label\"\n      type=\"radio\"\n      :name=\"name\"\n      :disabled=\"disabled\"\n      tabindex=\"-1\"\n      @focus=\"focus = true\"\n      @blur=\"focus = false\"\n    />\n    <span\n      class=\"el-radio-button__inner\"\n      :style=\"modelValue === label ? activeStyle : {}\"\n      @keydown.stop\n    >\n      <slot>\n        {{ label }}\n      </slot>\n    </span>\n  </label>\n</template>\n<script lang=\"ts\">\nimport { computed, defineComponent } from 'vue'\nimport { useRadio } from './radio'\nimport { radioButtonProps } from './radio-button'\nimport type { CSSProperties } from 'vue'\n\nexport default defineComponent({\n  name: 'ElRadioButton',\n  props: radioButtonProps,\n\n  setup(props, { emit }) {\n    const {\n      radioRef,\n      isGroup,\n      focus,\n      size,\n      disabled,\n      tabIndex,\n      modelValue,\n      radioGroup,\n    } = useRadio(props, emit)\n\n    const activeStyle = computed<CSSProperties>(() => {\n      return {\n        backgroundColor: radioGroup?.fill || '',\n        borderColor: radioGroup?.fill || '',\n        boxShadow: radioGroup?.fill ? `-1px 0 0 0 ${radioGroup.fill}` : '',\n        color: radioGroup?.textColor || '',\n      }\n    })\n\n    return {\n      isGroup,\n      size,\n      disabled,\n      tabIndex,\n      modelValue,\n      focus,\n      activeStyle,\n      radioRef,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":";;;;AA8CA,aAAe,gBAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,OAAO;AAAA,EAEP,MAAM,OAAO,EAAE,QAAQ;AACrB,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,QACE,SAAS,OAAO;AAEpB,UAAM,cAAc,SAAwB,MAAM;AAChD,aAAO;AAAA,QACL,iBAAiB,0CAAY,SAAQ;AAAA,QACrC,aAAa,0CAAY,SAAQ;AAAA,QACjC,WAAW,0CAAY,QAAO,cAAc,WAAW,SAAS;AAAA,QAChE,OAAO,0CAAY,cAAa;AAAA;AAAA;AAIpC,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;;;"}

package/es/components/radio/src/radio-button.vue_vue_type_template_id_14e266b0_lang.mjs

@@ -0,0 +1,49 @@
+import { openBlock, createElementBlock, normalizeClass, withKeys, withModifiers, withDirectives, createElementVNode, vModelRadio, normalizeStyle, renderSlot, createTextVNode, toDisplayString } from 'vue';
+
+const _hoisted_1 = ["aria-checked", "aria-disabled", "tabindex"];
+const _hoisted_2 = ["value", "name", "disabled"];
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("label", {
+    class: normalizeClass(["el-radio-button", [
+      _ctx.size ? "el-radio-button--" + _ctx.size : "",
+      {
+        "is-active": _ctx.modelValue === _ctx.label,
+        "is-disabled": _ctx.disabled,
+        "is-focus": _ctx.focus
+      }
+    ]]),
+    role: "radio",
+    "aria-checked": _ctx.modelValue === _ctx.label,
+    "aria-disabled": _ctx.disabled,
+    tabindex: _ctx.tabIndex,
+    onKeydown: _cache[4] || (_cache[4] = withKeys(withModifiers(($event) => _ctx.modelValue = _ctx.disabled ? _ctx.modelValue : _ctx.label, ["stop", "prevent"]), ["space"]))
+  }, [
+    withDirectives(createElementVNode("input", {
+      ref: "radioRef",
+      "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.modelValue = $event),
+      class: "el-radio-button__original-radio",
+      value: _ctx.label,
+      type: "radio",
+      name: _ctx.name,
+      disabled: _ctx.disabled,
+      tabindex: "-1",
+      onFocus: _cache[1] || (_cache[1] = ($event) => _ctx.focus = true),
+      onBlur: _cache[2] || (_cache[2] = ($event) => _ctx.focus = false)
+    }, null, 40, _hoisted_2), [
+      [vModelRadio, _ctx.modelValue]
+    ]),
+    createElementVNode("span", {
+      class: "el-radio-button__inner",
+      style: normalizeStyle(_ctx.modelValue === _ctx.label ? _ctx.activeStyle : {}),
+      onKeydown: _cache[3] || (_cache[3] = withModifiers(() => {
+      }, ["stop"]))
+    }, [
+      renderSlot(_ctx.$slots, "default", {}, () => [
+        createTextVNode(toDisplayString(_ctx.label), 1)
+      ])
+    ], 36)
+  ], 42, _hoisted_1);
+}
+
+export { render };
+//# sourceMappingURL=radio-button.vue_vue_type_template_id_14e266b0_lang.mjs.map

package/es/components/radio/src/radio-button.vue_vue_type_template_id_14e266b0_lang.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-button.vue_vue_type_template_id_14e266b0_lang.mjs","sources":["../../../../../../packages/components/radio/src/radio-button.vue?vue&type=template&id=14e266b0&lang.js"],"sourcesContent":["<template>\n  <label\n    class=\"el-radio-button\"\n    :class=\"[\n      size ? 'el-radio-button--' + size : '',\n      {\n        'is-active': modelValue === label,\n        'is-disabled': disabled,\n        'is-focus': focus,\n      },\n    ]\"\n    role=\"radio\"\n    :aria-checked=\"modelValue === label\"\n    :aria-disabled=\"disabled\"\n    :tabindex=\"tabIndex\"\n    @keydown.space.stop.prevent=\"modelValue = disabled ? modelValue : label\"\n  >\n    <input\n      ref=\"radioRef\"\n      v-model=\"modelValue\"\n      class=\"el-radio-button__original-radio\"\n      :value=\"label\"\n      type=\"radio\"\n      :name=\"name\"\n      :disabled=\"disabled\"\n      tabindex=\"-1\"\n      @focus=\"focus = true\"\n      @blur=\"focus = false\"\n    />\n    <span\n      class=\"el-radio-button__inner\"\n      :style=\"modelValue === label ? activeStyle : {}\"\n      @keydown.stop\n    >\n      <slot>\n        {{ label }}\n      </slot>\n    </span>\n  </label>\n</template>\n<script lang=\"ts\">\nimport { computed, defineComponent } from 'vue'\nimport { useRadio } from './radio'\nimport { radioButtonProps } from './radio-button'\nimport type { CSSProperties } from 'vue'\n\nexport default defineComponent({\n  name: 'ElRadioButton',\n  props: radioButtonProps,\n\n  setup(props, { emit }) {\n    const {\n      radioRef,\n      isGroup,\n      focus,\n      size,\n      disabled,\n      tabIndex,\n      modelValue,\n      radioGroup,\n    } = useRadio(props, emit)\n\n    const activeStyle = computed<CSSProperties>(() => {\n      return {\n        backgroundColor: radioGroup?.fill || '',\n        borderColor: radioGroup?.fill || '',\n        boxShadow: radioGroup?.fill ? `-1px 0 0 0 ${radioGroup.fill}` : '',\n        color: radioGroup?.textColor || '',\n      }\n    })\n\n    return {\n      isGroup,\n      size,\n      disabled,\n      tabIndex,\n      modelValue,\n      focus,\n      activeStyle,\n      radioRef,\n    }\n  },\n})\n</script>\n"],"names":["_createElementBlock","_createElementVNode","_renderSlot"],"mappings":";;;;;sBACEA;IACE,uBAAM;;;;;;;;IASN,MAAK;AAAA,IACJ,gBAAc,oBAAe;IAC7B,iBAAe;IACf,UAAU;IACV,wEAA4B,kBAAa,gBAAW,kBAAa;;mBAElEC;MACE,KAAI;AAAA,mEACK;MACT,OAAM;AAAA,MACL,OAAO;MACR,MAAK;AAAA,MACJ,MAAM;MACN,UAAU;MACX,UAAS;AAAA,MACR,+CAAO;MACP,8CAAM;;oBARE;;IAUXA;MACE,OAAM;AAAA,MACL,sBAAO,oBAAe,aAAQ;MAC9B,mDAAD;;;MAEAC,uCAAA;wCACK;;;;;;;;"}

package/es/components/radio/src/radio-button2.mjs

@@ -1,6 +1,6 @@
-import script from './radio-button.vue_vue&type=script&lang.mjs';
-export { default } from './radio-button.vue_vue&type=script&lang.mjs';
-import { render } from './radio-button.vue_vue&type=template&id=14e266b0&lang.mjs';
+import script from './radio-button.vue_vue_type_script_lang.mjs';
+export { default } from './radio-button.vue_vue_type_script_lang.mjs';
+import { render } from './radio-button.vue_vue_type_template_id_14e266b0_lang.mjs';
 
 script.render = render;
 script.__file = "packages/components/radio/src/radio-button.vue";

package/es/components/radio/src/radio-group.vue_vue_type_script_lang.mjs

@@ -0,0 +1,74 @@
+import { defineComponent, ref, nextTick, onMounted, provide, reactive, toRefs, watch } from 'vue';
+import { EVENT_CODE } from '../../../utils/aria.mjs';
+import { UPDATE_MODEL_EVENT } from '../../../utils/constants.mjs';
+import '../../../tokens/index.mjs';
+import '../../../hooks/index.mjs';
+import { radioGroupProps, radioGroupEmits } from './radio-group.mjs';
+import { useFormItem } from '../../../hooks/use-form-item/index.mjs';
+import { radioGroupKey } from '../../../tokens/radio.mjs';
+
+var script = defineComponent({
+  name: "ElRadioGroup",
+  props: radioGroupProps,
+  emits: radioGroupEmits,
+  setup(props, ctx) {
+    const radioGroupRef = ref();
+    const { size, disabled, formItem } = useFormItem({});
+    const changeEvent = (value) => {
+      ctx.emit(UPDATE_MODEL_EVENT, value);
+      nextTick(() => ctx.emit("change", value));
+    };
+    const handleKeydown = (e) => {
+      if (!radioGroupRef.value)
+        return;
+      const target = e.target;
+      const className = target.nodeName === "INPUT" ? "[type=radio]" : "[role=radio]";
+      const radios = radioGroupRef.value.querySelectorAll(className);
+      const length = radios.length;
+      const index = Array.from(radios).indexOf(target);
+      const roleRadios = radioGroupRef.value.querySelectorAll("[role=radio]");
+      let nextIndex = null;
+      switch (e.code) {
+        case EVENT_CODE.left:
+        case EVENT_CODE.up:
+          e.stopPropagation();
+          e.preventDefault();
+          nextIndex = index === 0 ? length - 1 : index - 1;
+          break;
+        case EVENT_CODE.right:
+        case EVENT_CODE.down:
+          e.stopPropagation();
+          e.preventDefault();
+          nextIndex = index === length - 1 ? 0 : index + 1;
+          break;
+        default:
+          break;
+      }
+      if (nextIndex === null)
+        return;
+      roleRadios[nextIndex].click();
+      roleRadios[nextIndex].focus();
+    };
+    onMounted(() => {
+      const radios = radioGroupRef.value.querySelectorAll("[type=radio]");
+      const firstLabel = radios[0];
+      if (!Array.from(radios).some((radio) => radio.checked) && firstLabel) {
+        firstLabel.tabIndex = 0;
+      }
+    });
+    provide(radioGroupKey, reactive({
+      ...toRefs(props),
+      changeEvent
+    }));
+    watch(() => props.modelValue, () => formItem == null ? void 0 : formItem.validate("change"));
+    return {
+      size,
+      disabled,
+      radioGroupRef,
+      handleKeydown
+    };
+  }
+});
+
+export { script as default };
+//# sourceMappingURL=radio-group.vue_vue_type_script_lang.mjs.map

package/es/components/radio/src/radio-group.vue_vue_type_script_lang.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/radio/src/radio-group.vue"],"sourcesContent":["<template>\n  <div\n    ref=\"radioGroupRef\"\n    class=\"el-radio-group\"\n    role=\"radiogroup\"\n    @keydown=\"handleKeydown\"\n  >\n    <slot></slot>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  nextTick,\n  provide,\n  onMounted,\n  ref,\n  reactive,\n  toRefs,\n  watch,\n} from 'vue'\nimport { EVENT_CODE } from '@element-plus/utils/aria'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { radioGroupKey } from '@element-plus/tokens'\nimport { useFormItem } from '@element-plus/hooks'\nimport { radioGroupEmits, radioGroupProps } from './radio-group'\nimport type { RadioGroupProps } from '..'\n\nexport default defineComponent({\n  name: 'ElRadioGroup',\n  props: radioGroupProps,\n  emits: radioGroupEmits,\n\n  setup(props, ctx) {\n    const radioGroupRef = ref<HTMLDivElement>()\n    const { size, disabled, formItem } = useFormItem({})\n\n    const changeEvent = (value: RadioGroupProps['modelValue']) => {\n      ctx.emit(UPDATE_MODEL_EVENT, value)\n      nextTick(() => ctx.emit('change', value))\n    }\n\n    const handleKeydown = (e: KeyboardEvent) => {\n      if (!radioGroupRef.value) return\n\n      // 左右上下按键 可以在 radio 组内切换不同选项\n      const target = e.target as HTMLInputElement\n      const className =\n        target.nodeName === 'INPUT' ? '[type=radio]' : '[role=radio]'\n      const radios =\n        radioGroupRef.value.querySelectorAll<HTMLInputElement>(className)\n      const length = radios.length\n      const index = Array.from(radios).indexOf(target)\n      const roleRadios =\n        radioGroupRef.value.querySelectorAll<HTMLInputElement>('[role=radio]')\n\n      let nextIndex: number | null = null\n      switch (e.code) {\n        case EVENT_CODE.left:\n        case EVENT_CODE.up:\n          e.stopPropagation()\n          e.preventDefault()\n          nextIndex = index === 0 ? length - 1 : index - 1\n          break\n        case EVENT_CODE.right:\n        case EVENT_CODE.down:\n          e.stopPropagation()\n          e.preventDefault()\n          nextIndex = index === length - 1 ? 0 : index + 1\n          break\n        default:\n          break\n      }\n      if (nextIndex === null) return\n      roleRadios[nextIndex].click()\n      roleRadios[nextIndex].focus()\n    }\n\n    onMounted(() => {\n      const radios =\n        radioGroupRef.value!.querySelectorAll<HTMLInputElement>('[type=radio]')\n      const firstLabel = radios[0]\n      if (!Array.from(radios).some((radio) => radio.checked) && firstLabel) {\n        firstLabel.tabIndex = 0\n      }\n    })\n\n    provide(\n      radioGroupKey,\n      reactive({\n        ...toRefs(props),\n        changeEvent,\n      })\n    )\n\n    watch(\n      () => props.modelValue,\n      () => formItem?.validate('change')\n    )\n\n    return {\n      size,\n      disabled,\n      radioGroupRef,\n      handleKeydown,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;;AA6BA,aAAe,gBAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AAAA,EAEP,MAAM,OAAO,KAAK;AAChB,UAAM,gBAAgB;AACtB,UAAM,EAAE,MAAM,UAAU,aAAa,YAAY;AAEjD,UAAM,cAAc,CAAC,UAAyC;AAC5D,UAAI,KAAK,oBAAoB;AAC7B,eAAS,MAAM,IAAI,KAAK,UAAU;AAAA;AAGpC,UAAM,gBAAgB,CAAC,MAAqB;AAC1C,UAAI,CAAC,cAAc;AAAO;AAG1B,YAAM,SAAS,EAAE;AACjB,YAAM,YACJ,OAAO,aAAa,UAAU,iBAAiB;AACjD,YAAM,SACJ,cAAc,MAAM,iBAAmC;AACzD,YAAM,SAAS,OAAO;AACtB,YAAM,QAAQ,MAAM,KAAK,QAAQ,QAAQ;AACzC,YAAM,aACJ,cAAc,MAAM,iBAAmC;AAEzD,UAAI,YAA2B;AAC/B,cAAQ,EAAE;AAAA,aACH,WAAW;AAAA,aACX,WAAW;AACd,YAAE;AACF,YAAE;AACF,sBAAY,UAAU,IAAI,SAAS,IAAI,QAAQ;AAC/C;AAAA,aACG,WAAW;AAAA,aACX,WAAW;AACd,YAAE;AACF,YAAE;AACF,sBAAY,UAAU,SAAS,IAAI,IAAI,QAAQ;AAC/C;AAAA;AAEA;AAAA;AAEJ,UAAI,cAAc;AAAM;AACxB,iBAAW,WAAW;AACtB,iBAAW,WAAW;AAAA;AAGxB,cAAU,MAAM;AACd,YAAM,SACJ,cAAc,MAAO,iBAAmC;AAC1D,YAAM,aAAa,OAAO;AAC1B,UAAI,CAAC,MAAM,KAAK,QAAQ,KAAK,CAAC,UAAU,MAAM,YAAY,YAAY;AACpE,mBAAW,WAAW;AAAA;AAAA;AAI1B,YACE,eACA,SAAS;AAAA,SACJ,OAAO;AAAA,MACV;AAAA;AAIJ,UACE,MAAM,MAAM,YACZ,MAAM,qCAAU,SAAS;AAG3B,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;;;"}

package/es/components/radio/src/radio-group.vue_vue_type_template_id_53ef81f9_lang.mjs

@@ -0,0 +1,15 @@
+import { openBlock, createElementBlock, renderSlot } from 'vue';
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", {
+    ref: "radioGroupRef",
+    class: "el-radio-group",
+    role: "radiogroup",
+    onKeydown: _cache[0] || (_cache[0] = (...args) => _ctx.handleKeydown && _ctx.handleKeydown(...args))
+  }, [
+    renderSlot(_ctx.$slots, "default")
+  ], 544);
+}
+
+export { render };
+//# sourceMappingURL=radio-group.vue_vue_type_template_id_53ef81f9_lang.mjs.map

package/es/components/radio/src/radio-group.vue_vue_type_template_id_53ef81f9_lang.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.vue_vue_type_template_id_53ef81f9_lang.mjs","sources":["../../../../../../packages/components/radio/src/radio-group.vue?vue&type=template&id=53ef81f9&lang.js"],"sourcesContent":["<template>\n  <div\n    ref=\"radioGroupRef\"\n    class=\"el-radio-group\"\n    role=\"radiogroup\"\n    @keydown=\"handleKeydown\"\n  >\n    <slot></slot>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  nextTick,\n  provide,\n  onMounted,\n  ref,\n  reactive,\n  toRefs,\n  watch,\n} from 'vue'\nimport { EVENT_CODE } from '@element-plus/utils/aria'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { radioGroupKey } from '@element-plus/tokens'\nimport { useFormItem } from '@element-plus/hooks'\nimport { radioGroupEmits, radioGroupProps } from './radio-group'\nimport type { RadioGroupProps } from '..'\n\nexport default defineComponent({\n  name: 'ElRadioGroup',\n  props: radioGroupProps,\n  emits: radioGroupEmits,\n\n  setup(props, ctx) {\n    const radioGroupRef = ref<HTMLDivElement>()\n    const { size, disabled, formItem } = useFormItem({})\n\n    const changeEvent = (value: RadioGroupProps['modelValue']) => {\n      ctx.emit(UPDATE_MODEL_EVENT, value)\n      nextTick(() => ctx.emit('change', value))\n    }\n\n    const handleKeydown = (e: KeyboardEvent) => {\n      if (!radioGroupRef.value) return\n\n      // 左右上下按键 可以在 radio 组内切换不同选项\n      const target = e.target as HTMLInputElement\n      const className =\n        target.nodeName === 'INPUT' ? '[type=radio]' : '[role=radio]'\n      const radios =\n        radioGroupRef.value.querySelectorAll<HTMLInputElement>(className)\n      const length = radios.length\n      const index = Array.from(radios).indexOf(target)\n      const roleRadios =\n        radioGroupRef.value.querySelectorAll<HTMLInputElement>('[role=radio]')\n\n      let nextIndex: number | null = null\n      switch (e.code) {\n        case EVENT_CODE.left:\n        case EVENT_CODE.up:\n          e.stopPropagation()\n          e.preventDefault()\n          nextIndex = index === 0 ? length - 1 : index - 1\n          break\n        case EVENT_CODE.right:\n        case EVENT_CODE.down:\n          e.stopPropagation()\n          e.preventDefault()\n          nextIndex = index === length - 1 ? 0 : index + 1\n          break\n        default:\n          break\n      }\n      if (nextIndex === null) return\n      roleRadios[nextIndex].click()\n      roleRadios[nextIndex].focus()\n    }\n\n    onMounted(() => {\n      const radios =\n        radioGroupRef.value!.querySelectorAll<HTMLInputElement>('[type=radio]')\n      const firstLabel = radios[0]\n      if (!Array.from(radios).some((radio) => radio.checked) && firstLabel) {\n        firstLabel.tabIndex = 0\n      }\n    })\n\n    provide(\n      radioGroupKey,\n      reactive({\n        ...toRefs(props),\n        changeEvent,\n      })\n    )\n\n    watch(\n      () => props.modelValue,\n      () => formItem?.validate('change')\n    )\n\n    return {\n      size,\n      disabled,\n      radioGroupRef,\n      handleKeydown,\n    }\n  },\n})\n</script>\n"],"names":["_createElementBlock","_renderSlot"],"mappings":";;;sBACEA;IACE,KAAI;AAAA,IACJ,OAAM;AAAA,IACN,MAAK;AAAA,IACJ,kDAAS;;IAEVC;;;;;;"}

package/es/components/radio/src/radio-group2.mjs

@@ -1,6 +1,6 @@
-import script from './radio-group.vue_vue&type=script&lang.mjs';
-export { default } from './radio-group.vue_vue&type=script&lang.mjs';
-import { render } from './radio-group.vue_vue&type=template&id=53ef81f9&lang.mjs';
+import script from './radio-group.vue_vue_type_script_lang.mjs';
+export { default } from './radio-group.vue_vue_type_script_lang.mjs';
+import { render } from './radio-group.vue_vue_type_template_id_53ef81f9_lang.mjs';
 
 script.render = render;
 script.__file = "packages/components/radio/src/radio-group.vue";

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

@@ -0,0 +1,27 @@
+import { defineComponent, nextTick } from 'vue';
+import { radioProps, radioEmits, useRadio } from './radio.mjs';
+
+var script = defineComponent({
+  name: "ElRadio",
+  props: radioProps,
+  emits: radioEmits,
+  setup(props, { emit }) {
+    const { radioRef, isGroup, focus, size, disabled, tabIndex, modelValue } = useRadio(props, emit);
+    function handleChange() {
+      nextTick(() => emit("change", modelValue.value));
+    }
+    return {
+      focus,
+      isGroup,
+      modelValue,
+      tabIndex,
+      size,
+      disabled,
+      radioRef,
+      handleChange
+    };
+  }
+});
+
+export { script as default };
+//# sourceMappingURL=radio.vue_vue_type_script_lang.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"radio.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/radio/src/radio.vue"],"sourcesContent":["<template>\n  <label\n    class=\"el-radio\"\n    :class=\"{\n      [`el-radio--${size || ''}`]: size,\n      'is-disabled': disabled,\n      'is-focus': focus,\n      'is-bordered': border,\n      'is-checked': modelValue === label,\n    }\"\n    role=\"radio\"\n    :aria-checked=\"modelValue === label\"\n    :aria-disabled=\"disabled\"\n    :tabindex=\"tabIndex\"\n    @keydown.space.stop.prevent=\"modelValue = disabled ? modelValue : label\"\n  >\n    <span\n      class=\"el-radio__input\"\n      :class=\"{\n        'is-disabled': disabled,\n        'is-checked': modelValue === label,\n      }\"\n    >\n      <span class=\"el-radio__inner\"></span>\n      <input\n        ref=\"radioRef\"\n        v-model=\"modelValue\"\n        class=\"el-radio__original\"\n        :value=\"label\"\n        type=\"radio\"\n        aria-hidden=\"true\"\n        :name=\"name\"\n        :disabled=\"disabled\"\n        tabindex=\"-1\"\n        @focus=\"focus = true\"\n        @blur=\"focus = false\"\n        @change=\"handleChange\"\n      />\n    </span>\n    <span class=\"el-radio__label\" @keydown.stop>\n      <slot>\n        {{ label }}\n      </slot>\n    </span>\n  </label>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, nextTick } from 'vue'\nimport { useRadio, radioEmits, radioProps } from './radio'\n\nexport default defineComponent({\n  name: 'ElRadio',\n  props: radioProps,\n  emits: radioEmits,\n\n  setup(props, { emit }) {\n    const { radioRef, isGroup, focus, size, disabled, tabIndex, modelValue } =\n      useRadio(props, emit)\n\n    function handleChange() {\n      nextTick(() => emit('change', modelValue.value))\n    }\n\n    return {\n      focus,\n      isGroup,\n      modelValue,\n      tabIndex,\n      size,\n      disabled,\n      radioRef,\n\n      handleChange,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":";;;AAmDA,aAAe,gBAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AAAA,EAEP,MAAM,OAAO,EAAE,QAAQ;AACrB,UAAM,EAAE,UAAU,SAAS,OAAO,MAAM,UAAU,UAAU,eAC1D,SAAS,OAAO;AAElB,4BAAwB;AACtB,eAAS,MAAM,KAAK,UAAU,WAAW;AAAA;AAG3C,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA;AAAA;AAAA;;;;"}

package/es/components/radio/src/radio.vue_vue_type_template_id_6aa3dfc7_lang.mjs

@@ -0,0 +1,58 @@
+import { createElementVNode, openBlock, createElementBlock, normalizeClass, withKeys, withModifiers, withDirectives, vModelRadio, renderSlot, createTextVNode, toDisplayString } from 'vue';
+
+const _hoisted_1 = ["aria-checked", "aria-disabled", "tabindex"];
+const _hoisted_2 = /* @__PURE__ */ createElementVNode("span", { class: "el-radio__inner" }, null, -1);
+const _hoisted_3 = ["value", "name", "disabled"];
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("label", {
+    class: normalizeClass(["el-radio", {
+      [`el-radio--${_ctx.size || ""}`]: _ctx.size,
+      "is-disabled": _ctx.disabled,
+      "is-focus": _ctx.focus,
+      "is-bordered": _ctx.border,
+      "is-checked": _ctx.modelValue === _ctx.label
+    }]),
+    role: "radio",
+    "aria-checked": _ctx.modelValue === _ctx.label,
+    "aria-disabled": _ctx.disabled,
+    tabindex: _ctx.tabIndex,
+    onKeydown: _cache[5] || (_cache[5] = withKeys(withModifiers(($event) => _ctx.modelValue = _ctx.disabled ? _ctx.modelValue : _ctx.label, ["stop", "prevent"]), ["space"]))
+  }, [
+    createElementVNode("span", {
+      class: normalizeClass(["el-radio__input", {
+        "is-disabled": _ctx.disabled,
+        "is-checked": _ctx.modelValue === _ctx.label
+      }])
+    }, [
+      _hoisted_2,
+      withDirectives(createElementVNode("input", {
+        ref: "radioRef",
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.modelValue = $event),
+        class: "el-radio__original",
+        value: _ctx.label,
+        type: "radio",
+        "aria-hidden": "true",
+        name: _ctx.name,
+        disabled: _ctx.disabled,
+        tabindex: "-1",
+        onFocus: _cache[1] || (_cache[1] = ($event) => _ctx.focus = true),
+        onBlur: _cache[2] || (_cache[2] = ($event) => _ctx.focus = false),
+        onChange: _cache[3] || (_cache[3] = (...args) => _ctx.handleChange && _ctx.handleChange(...args))
+      }, null, 40, _hoisted_3), [
+        [vModelRadio, _ctx.modelValue]
+      ])
+    ], 2),
+    createElementVNode("span", {
+      class: "el-radio__label",
+      onKeydown: _cache[4] || (_cache[4] = withModifiers(() => {
+      }, ["stop"]))
+    }, [
+      renderSlot(_ctx.$slots, "default", {}, () => [
+        createTextVNode(toDisplayString(_ctx.label), 1)
+      ])
+    ], 32)
+  ], 42, _hoisted_1);
+}
+
+export { render };
+//# sourceMappingURL=radio.vue_vue_type_template_id_6aa3dfc7_lang.mjs.map

package/es/components/radio/src/radio.vue_vue_type_template_id_6aa3dfc7_lang.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.vue_vue_type_template_id_6aa3dfc7_lang.mjs","sources":["../../../../../../packages/components/radio/src/radio.vue?vue&type=template&id=6aa3dfc7&lang.js"],"sourcesContent":["<template>\n  <label\n    class=\"el-radio\"\n    :class=\"{\n      [`el-radio--${size || ''}`]: size,\n      'is-disabled': disabled,\n      'is-focus': focus,\n      'is-bordered': border,\n      'is-checked': modelValue === label,\n    }\"\n    role=\"radio\"\n    :aria-checked=\"modelValue === label\"\n    :aria-disabled=\"disabled\"\n    :tabindex=\"tabIndex\"\n    @keydown.space.stop.prevent=\"modelValue = disabled ? modelValue : label\"\n  >\n    <span\n      class=\"el-radio__input\"\n      :class=\"{\n        'is-disabled': disabled,\n        'is-checked': modelValue === label,\n      }\"\n    >\n      <span class=\"el-radio__inner\"></span>\n      <input\n        ref=\"radioRef\"\n        v-model=\"modelValue\"\n        class=\"el-radio__original\"\n        :value=\"label\"\n        type=\"radio\"\n        aria-hidden=\"true\"\n        :name=\"name\"\n        :disabled=\"disabled\"\n        tabindex=\"-1\"\n        @focus=\"focus = true\"\n        @blur=\"focus = false\"\n        @change=\"handleChange\"\n      />\n    </span>\n    <span class=\"el-radio__label\" @keydown.stop>\n      <slot>\n        {{ label }}\n      </slot>\n    </span>\n  </label>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, nextTick } from 'vue'\nimport { useRadio, radioEmits, radioProps } from './radio'\n\nexport default defineComponent({\n  name: 'ElRadio',\n  props: radioProps,\n  emits: radioEmits,\n\n  setup(props, { emit }) {\n    const { radioRef, isGroup, focus, size, disabled, tabIndex, modelValue } =\n      useRadio(props, emit)\n\n    function handleChange() {\n      nextTick(() => emit('change', modelValue.value))\n    }\n\n    return {\n      focus,\n      isGroup,\n      modelValue,\n      tabIndex,\n      size,\n      disabled,\n      radioRef,\n\n      handleChange,\n    }\n  },\n})\n</script>\n"],"names":["_createElementBlock","_createElementVNode","_renderSlot"],"mappings":";;;gEAuBY,OAAM;;;sBAtBhBA;IACE,uBAAM;;;;;;;IAQN,MAAK;AAAA,IACJ,gBAAc,oBAAe;IAC7B,iBAAe;IACf,UAAU;IACV,wEAA4B,kBAAa,gBAAW,kBAAa;;IAElEC;MACE,uBAAM;;;;;MAMN;AAAA,qBACAA;QACE,KAAI;AAAA,qEACK;QACT,OAAM;AAAA,QACL,OAAO;QACR,MAAK;AAAA,QACL,eAAY;AAAA,QACX,MAAM;QACN,UAAU;QACX,UAAS;AAAA,QACR,+CAAO;QACP,8CAAM;QACN,iDAAQ;;sBAVA;;;IAabA;MAAM,OAAM;AAAA,MAAmB,mDAAD;;;MAC5BC,uCAAA;wCACK;;;;;;;;"}

package/es/components/radio/src/radio2.mjs

@@ -1,6 +1,6 @@
-import script from './radio.vue_vue&type=script&lang.mjs';
-export { default } from './radio.vue_vue&type=script&lang.mjs';
-import { render } from './radio.vue_vue&type=template&id=6aa3dfc7&lang.mjs';
+import script from './radio.vue_vue_type_script_lang.mjs';
+export { default } from './radio.vue_vue_type_script_lang.mjs';
+import { render } from './radio.vue_vue_type_template_id_6aa3dfc7_lang.mjs';
 
 script.render = render;
 script.__file = "packages/components/radio/src/radio.vue";

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

@@ -22,7 +22,10 @@ export declare const ElRate: import("../../utils/types").SFCWithInstall<import("
     rateDisabled: import("vue").ComputedRef<boolean | undefined>;
     text: import("vue").ComputedRef<string>;
     decimalStyle: import("vue").ComputedRef<{
-        color: string;
+        color: string | {
+            excluded?: boolean | undefined;
+            value: string;
+        };
         width: string;
     }>;
     decimalIconComponent: import("vue").ComputedRef<string | import("vue").ComponentOptions<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions, any, any, any> | import("vue").FunctionalComponent<any, any> | {
@@ -30,11 +33,22 @@ export declare const ElRate: import("../../utils/types").SFCWithInstall<import("
         __isFragment?: undefined;
         __isTeleport?: undefined;
         __isSuspense?: undefined;
+    } | {
+        excluded?: boolean | undefined;
+        value: string | import("vue").ComponentOptions<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions, any, any, any> | import("vue").FunctionalComponent<any, any> | {
+            new (...args: any[]): any;
+            __isFragment?: undefined;
+            __isTeleport?: undefined;
+            __isSuspense?: undefined;
+        };
     }>;
     iconComponents: import("vue").ComputedRef<any[]>;
     showDecimalIcon: (item: number) => boolean;
     getIconStyle: (item: number) => {
-        color: string;
+        color: string | {
+            excluded?: boolean | undefined;
+            value: string;
+        };
     };
     selectValue: (value: number) => void;
     handleKey: (e: KeyboardEvent) => number | undefined;

package/es/components/rate/index.mjs

@@ -1,7 +1,7 @@
 import { withInstall } from '../../utils/with-install.mjs';
 import './src/rate2.mjs';
 export { rateEmits, rateProps } from './src/rate.mjs';
-import script from './src/rate.vue_vue&type=script&lang.mjs';
+import script from './src/rate.vue_vue_type_script_lang.mjs';
 
 const ElRate = withInstall(script);
 

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

@@ -22,7 +22,10 @@ declare const _default: import("vue").DefineComponent<{
     rateDisabled: import("vue").ComputedRef<boolean | undefined>;
     text: import("vue").ComputedRef<string>;
     decimalStyle: import("vue").ComputedRef<{
-        color: string;
+        color: string | {
+            excluded?: boolean | undefined;
+            value: string;
+        };
         width: string;
     }>;
     decimalIconComponent: import("vue").ComputedRef<string | import("vue").ComponentOptions<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions, any, any, any> | import("vue").FunctionalComponent<any, any> | {
@@ -30,11 +33,22 @@ declare const _default: import("vue").DefineComponent<{
         __isFragment?: undefined;
         __isTeleport?: undefined;
         __isSuspense?: undefined;
+    } | {
+        excluded?: boolean | undefined;
+        value: string | import("vue").ComponentOptions<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions, any, any, any> | import("vue").FunctionalComponent<any, any> | {
+            new (...args: any[]): any;
+            __isFragment?: undefined;
+            __isTeleport?: undefined;
+            __isSuspense?: undefined;
+        };
     }>;
     iconComponents: import("vue").ComputedRef<any[]>;
     showDecimalIcon: (item: number) => boolean;
     getIconStyle: (item: number) => {
-        color: string;
+        color: string | {
+            excluded?: boolean | undefined;
+            value: string;
+        };
     };
     selectValue: (value: number) => void;
     handleKey: (e: KeyboardEvent) => number | undefined;