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

package/lib/components/radio/src/radio-button.vue_vue&type=template&id=14e266b0&lang.js

@@ -11,34 +11,34 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     class: vue.normalizeClass(["el-radio-button", [
       _ctx.size ? "el-radio-button--" + _ctx.size : "",
       {
-        "is-active": _ctx.value === _ctx.label,
-        "is-disabled": _ctx.isDisabled,
+        "is-active": _ctx.modelValue === _ctx.label,
+        "is-disabled": _ctx.disabled,
         "is-focus": _ctx.focus
       }
     ]]),
     role: "radio",
-    "aria-checked": _ctx.value === _ctx.label,
-    "aria-disabled": _ctx.isDisabled,
+    "aria-checked": _ctx.modelValue === _ctx.label,
+    "aria-disabled": _ctx.disabled,
     tabindex: _ctx.tabIndex,
-    onKeydown: _cache[4] || (_cache[4] = vue.withKeys(vue.withModifiers(($event) => _ctx.value = _ctx.isDisabled ? _ctx.value : _ctx.label, ["stop", "prevent"]), ["space"]))
+    onKeydown: _cache[4] || (_cache[4] = vue.withKeys(vue.withModifiers(($event) => _ctx.modelValue = _ctx.disabled ? _ctx.modelValue : _ctx.label, ["stop", "prevent"]), ["space"]))
   }, [
     vue.withDirectives(vue.createElementVNode("input", {
       ref: "radioRef",
-      "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.value = $event),
+      "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.isDisabled,
+      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), [
-      [vue.vModelRadio, _ctx.value]
+      [vue.vModelRadio, _ctx.modelValue]
     ]),
     vue.createElementVNode("span", {
       class: "el-radio-button__inner",
-      style: vue.normalizeStyle(_ctx.value === _ctx.label ? _ctx.activeStyle : null),
+      style: vue.normalizeStyle(_ctx.modelValue === _ctx.label ? _ctx.activeStyle : {}),
       onKeydown: _cache[3] || (_cache[3] = vue.withModifiers(() => {
       }, ["stop"]))
     }, [

package/lib/components/radio/src/radio-button.vue_vue&type=template&id=14e266b0&lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio-button.vue_vue&type=template&id=14e266b0&lang.js","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': value === label,\n        'is-disabled': isDisabled,\n        'is-focus': focus,\n      },\n    ]\"\n    role=\"radio\"\n    :aria-checked=\"value === label\"\n    :aria-disabled=\"isDisabled\"\n    :tabindex=\"tabIndex\"\n    @keydown.space.stop.prevent=\"value = isDisabled ? value : label\"\n  >\n    <input\n      ref=\"radioRef\"\n      v-model=\"value\"\n      class=\"el-radio-button__original-radio\"\n      :value=\"label\"\n      type=\"radio\"\n      :name=\"name\"\n      :disabled=\"isDisabled\"\n      tabindex=\"-1\"\n      @focus=\"focus = true\"\n      @blur=\"focus = false\"\n    />\n    <span\n      class=\"el-radio-button__inner\"\n      :style=\"value === label ? activeStyle : null\"\n      @keydown.stop\n    >\n      <slot>\n        {{ label }}\n      </slot>\n    </span>\n  </label>\n</template>\n<script lang=\"ts\">\nimport { computed, defineComponent, ref } from 'vue'\nimport { useRadio, useRadioAttrs } from './useRadio'\n\nexport default defineComponent({\n  name: 'ElRadioButton',\n\n  props: {\n    label: {\n      type: [String, Number, Boolean],\n      default: '',\n    },\n    disabled: Boolean,\n    name: {\n      type: String,\n      default: '',\n    },\n  },\n  setup(props) {\n    const { isGroup, radioGroup, elFormItemSize, ELEMENT, focus, elForm } =\n      useRadio()\n\n    const size = computed(() => {\n      return radioGroup.radioGroupSize || elFormItemSize.value || ELEMENT.size\n    })\n\n    const radioRef = ref<HTMLInputElement>()\n\n    const value = computed<boolean | string | number>({\n      get() {\n        return radioGroup.modelValue\n      },\n      set(value) {\n        radioGroup.changeEvent(value)\n\n        radioRef.value.checked = radioGroup.modelValue === props.label\n      },\n    })\n\n    const { isDisabled, tabIndex } = useRadioAttrs(props, {\n      model: value,\n      elForm,\n      radioGroup,\n      isGroup,\n    })\n\n    const activeStyle = computed(() => {\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      isDisabled,\n      tabIndex,\n      value,\n      focus,\n      activeStyle,\n      radioRef,\n    }\n  },\n})\n</script>\n"],"names":["_createElementBlock","_createElementVNode","_renderSlot"],"mappings":";;;;;;;;;0BACEA;IACE,2BAAM;;;;;;;;IASN,MAAK;AAAA,IACJ,gBAAc,eAAU;IACxB,iBAAe;IACf,UAAU;IACV,gFAA4B,aAAQ,kBAAa,aAAQ;;uBAE1DC;MACE,KAAI;AAAA,mEACK;MACT,OAAM;AAAA,MACL,OAAO;MACR,MAAK;AAAA,MACJ,MAAM;MACN,UAAU;MACX,UAAS;AAAA,MACR,+CAAO;MACP,8CAAM;;wBARE;;IAUXA;MACE,OAAM;AAAA,MACL,0BAAO,eAAU,aAAQ;MACzB,uDAAD;;;MAEAC,2CAAA;gDACK;;;;;;;;"}
+{"version":3,"file":"radio-button.vue_vue&type=template&id=14e266b0&lang.js","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":";;;;;;;;;0BACEA;IACE,2BAAM;;;;;;;;IASN,MAAK;AAAA,IACJ,gBAAc,oBAAe;IAC7B,iBAAe;IACf,UAAU;IACV,gFAA4B,kBAAa,gBAAW,kBAAa;;uBAElEC;MACE,KAAI;AAAA,mEACK;MACT,OAAM;AAAA,MACL,OAAO;MACR,MAAK;AAAA,MACJ,MAAM;MACN,UAAU;MACX,UAAS;AAAA,MACR,+CAAO;MACP,8CAAM;;wBARE;;IAUXA;MACE,OAAM;AAAA,MACL,0BAAO,oBAAe,aAAQ;MAC9B,uDAAD;;;MAEAC,2CAAA;gDACK;;;;;;;;"}

package/lib/components/radio/src/radio-button2.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var radioButton_vue_vue_type_script_lang = require('./radio-button.vue_vue&type=script&lang.js');
+var radioButton_vue_vue_type_template_id_14e266b0_lang = require('./radio-button.vue_vue&type=template&id=14e266b0&lang.js');
+
+radioButton_vue_vue_type_script_lang["default"].render = radioButton_vue_vue_type_template_id_14e266b0_lang.render;
+radioButton_vue_vue_type_script_lang["default"].__file = "packages/components/radio/src/radio-button.vue";
+
+exports["default"] = radioButton_vue_vue_type_script_lang["default"];
+//# sourceMappingURL=radio-button2.js.map

package/lib/components/radio/src/radio-button2.js.map

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

package/lib/components/radio/src/radio-group.d.ts

@@ -0,0 +1,14 @@
+import type { ExtractPropTypes } from '@vue/runtime-core';
+export declare const radioGroupProps: {
+    readonly modelValue: import("element-plus/es/utils/props").BuildPropReturn<readonly [StringConstructor, NumberConstructor, BooleanConstructor], "", unknown, unknown, unknown>;
+    readonly fill: import("element-plus/es/utils/props").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
+    readonly textColor: import("element-plus/es/utils/props").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
+    readonly size: import("element-plus/es/utils/props").BuildPropReturn<StringConstructor, "", unknown, "" | "small" | "large" | "medium" | "mini", unknown>;
+    readonly disabled: BooleanConstructor;
+};
+export declare type RadioGroupProps = ExtractPropTypes<typeof radioGroupProps>;
+export declare const radioGroupEmits: {
+    "update:modelValue": (val: string | number | boolean) => boolean;
+    change: (val: string | number | boolean) => boolean;
+};
+export declare type RadioGroupEmits = typeof radioGroupEmits;

package/lib/components/radio/src/radio-group.js

@@ -2,11 +2,28 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var radioGroup_vue_vue_type_script_lang = require('./radio-group.vue_vue&type=script&lang.js');
-var radioGroup_vue_vue_type_template_id_53ef81f9_lang = require('./radio-group.vue_vue&type=template&id=53ef81f9&lang.js');
+var props = require('../../../utils/props.js');
+require('../../../hooks/index.js');
+var radio = require('./radio.js');
+var index = require('../../../hooks/use-form-item/index.js');
 
-radioGroup_vue_vue_type_script_lang["default"].render = radioGroup_vue_vue_type_template_id_53ef81f9_lang.render;
-radioGroup_vue_vue_type_script_lang["default"].__file = "packages/components/radio/src/radio-group.vue";
+const radioGroupProps = props.buildProps({
+  ...index.useFormItemProps,
+  modelValue: {
+    type: [String, Number, Boolean],
+    default: ""
+  },
+  fill: {
+    type: String,
+    default: ""
+  },
+  textColor: {
+    type: String,
+    default: ""
+  }
+});
+const radioGroupEmits = radio.radioEmits;
 
-exports["default"] = radioGroup_vue_vue_type_script_lang["default"];
+exports.radioGroupEmits = radioGroupEmits;
+exports.radioGroupProps = radioGroupProps;
 //# sourceMappingURL=radio-group.js.map

package/lib/components/radio/src/radio-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}
+{"version":3,"file":"radio-group.js","sources":["../../../../../../packages/components/radio/src/radio-group.ts"],"sourcesContent":["import { buildProps } from '@element-plus/utils/props'\nimport { useFormItemProps } from '@element-plus/hooks'\nimport { radioEmits } from './radio'\nimport type { ExtractPropTypes } from '@vue/runtime-core'\n\nexport const radioGroupProps = buildProps({\n  ...useFormItemProps,\n  modelValue: {\n    type: [String, Number, Boolean],\n    default: '',\n  },\n  fill: {\n    type: String,\n    default: '',\n  },\n  textColor: {\n    type: String,\n    default: '',\n  },\n} as const)\nexport type RadioGroupProps = ExtractPropTypes<typeof radioGroupProps>\n\nexport const radioGroupEmits = radioEmits\nexport type RadioGroupEmits = typeof radioGroupEmits\n"],"names":["buildProps","useFormItemProps","radioEmits"],"mappings":";;;;;;;;;MAKa,kBAAkBA,iBAAW;AAAA,KACrCC;AAAA,EACH,YAAY;AAAA,IACV,MAAM,CAAC,QAAQ,QAAQ;AAAA,IACvB,SAAS;AAAA;AAAA,EAEX,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,WAAW;AAAA,IACT,MAAM;AAAA,IACN,SAAS;AAAA;AAAA;MAKA,kBAAkBC;;;;;"}

package/lib/components/radio/src/radio-group.vue.d.ts

@@ -1,47 +1,37 @@
-import type { PropType } from 'vue';
-import type { ComponentSize } from 'element-plus/es/utils/types';
 declare const _default: import("vue").DefineComponent<{
-    modelValue: {
-        type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
-        default: string;
-    };
-    size: {
-        type: PropType<ComponentSize>;
-        validator: (val: string) => boolean;
-    };
-    fill: {
-        type: StringConstructor;
-        default: string;
-    };
-    textColor: {
-        type: StringConstructor;
-        default: string;
-    };
-    disabled: BooleanConstructor;
+    readonly modelValue: import("../../../utils/props").BuildPropReturn<readonly [StringConstructor, NumberConstructor, BooleanConstructor], "", unknown, unknown, unknown>;
+    readonly fill: import("../../../utils/props").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
+    readonly textColor: import("../../../utils/props").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
+    readonly size: import("../../../utils/props").BuildPropReturn<StringConstructor, "", unknown, "" | "small" | "large" | "medium" | "mini", unknown>;
+    readonly disabled: BooleanConstructor;
 }, {
-    handleKeydown: (e: any) => void;
-    radioGroupSize: import("vue").ComputedRef<ComponentSize>;
-    radioGroup: import("vue").Ref<null>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "change")[], "change" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    modelValue?: unknown;
-    size?: unknown;
-    fill?: unknown;
-    textColor?: unknown;
-    disabled?: unknown;
+    size: import("vue").ComputedRef<any>;
+    disabled: import("vue").ComputedRef<boolean>;
+    radioGroupRef: import("vue").Ref<HTMLDivElement | undefined>;
+    handleKeydown: (e: KeyboardEvent) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (val: string | number | boolean) => boolean;
+    change: (val: string | number | boolean) => boolean;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    readonly modelValue?: unknown;
+    readonly fill?: unknown;
+    readonly textColor?: unknown;
+    readonly size?: unknown;
+    readonly disabled?: unknown;
 } & {
-    fill: string;
+    size: import("../../../utils/props").BuildPropType<StringConstructor, "" | "small" | "large" | "medium" | "mini", unknown>;
     disabled: boolean;
-    modelValue: string | number | boolean;
+    modelValue: import("../../../utils/props").BuildPropType<readonly [StringConstructor, NumberConstructor, BooleanConstructor], unknown, unknown>;
+    fill: string;
     textColor: string;
-} & {
-    size?: ComponentSize | undefined;
-}> & {
-    onChange?: ((...args: any[]) => any) | undefined;
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+} & {}> & {
+    onChange?: ((val: string | number | boolean) => any) | undefined;
+    "onUpdate:modelValue"?: ((val: string | number | boolean) => any) | undefined;
 }, {
-    fill: string;
+    size: import("../../../utils/props").BuildPropType<StringConstructor, "" | "small" | "large" | "medium" | "mini", unknown>;
     disabled: boolean;
-    modelValue: string | number | boolean;
+    modelValue: import("../../../utils/props").BuildPropType<readonly [StringConstructor, NumberConstructor, BooleanConstructor], unknown, unknown>;
+    fill: string;
     textColor: string;
 }>;
 export default _default;

package/lib/components/radio/src/radio-group.vue_vue&type=script&lang.js

@@ -5,63 +5,32 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var vue = require('vue');
 var aria = require('../../../utils/aria.js');
 var constants = require('../../../utils/constants.js');
-var validators = require('../../../utils/validators.js');
 require('../../../tokens/index.js');
-var token = require('./token.js');
-var form = require('../../../tokens/form.js');
+require('../../../hooks/index.js');
+var radioGroup = require('./radio-group.js');
+var index = require('../../../hooks/use-form-item/index.js');
+var radio = require('../../../tokens/radio.js');
 
 var script = vue.defineComponent({
   name: "ElRadioGroup",
-  componentName: "ElRadioGroup",
-  props: {
-    modelValue: {
-      type: [String, Number, Boolean],
-      default: ""
-    },
-    size: {
-      type: String,
-      validator: validators.isValidComponentSize
-    },
-    fill: {
-      type: String,
-      default: ""
-    },
-    textColor: {
-      type: String,
-      default: ""
-    },
-    disabled: Boolean
-  },
-  emits: [constants.UPDATE_MODEL_EVENT, "change"],
+  props: radioGroup.radioGroupProps,
+  emits: radioGroup.radioGroupEmits,
   setup(props, ctx) {
-    const radioGroup = vue.ref(null);
-    const elFormItem = vue.inject(form.elFormItemKey, {});
-    const radioGroupSize = vue.computed(() => {
-      return props.size || elFormItem.size;
-    });
+    const radioGroupRef = vue.ref();
+    const { size, disabled, formItem } = index.useFormItem({});
     const changeEvent = (value) => {
       ctx.emit(constants.UPDATE_MODEL_EVENT, value);
-      vue.nextTick(() => {
-        ctx.emit("change", value);
-      });
+      vue.nextTick(() => ctx.emit("change", value));
     };
-    vue.provide(token["default"], vue.reactive({
-      name: "ElRadioGroup",
-      ...vue.toRefs(props),
-      radioGroupSize,
-      changeEvent
-    }));
-    vue.watch(() => props.modelValue, () => {
-      var _a;
-      (_a = elFormItem.validate) == null ? void 0 : _a.call(elFormItem, "change");
-    });
     const handleKeydown = (e) => {
+      if (!radioGroupRef.value)
+        return;
       const target = e.target;
       const className = target.nodeName === "INPUT" ? "[type=radio]" : "[role=radio]";
-      const radios = radioGroup.value.querySelectorAll(className);
+      const radios = radioGroupRef.value.querySelectorAll(className);
       const length = radios.length;
       const index = Array.from(radios).indexOf(target);
-      const roleRadios = radioGroup.value.querySelectorAll("[role=radio]");
+      const roleRadios = radioGroupRef.value.querySelectorAll("[role=radio]");
       let nextIndex = null;
       switch (e.code) {
         case aria.EVENT_CODE.left:
@@ -85,16 +54,22 @@ var script = vue.defineComponent({
       roleRadios[nextIndex].focus();
     };
     vue.onMounted(() => {
-      const radios = radioGroup.value.querySelectorAll("[type=radio]");
+      const radios = radioGroupRef.value.querySelectorAll("[type=radio]");
       const firstLabel = radios[0];
       if (!Array.from(radios).some((radio) => radio.checked) && firstLabel) {
         firstLabel.tabIndex = 0;
       }
     });
+    vue.provide(radio.radioGroupKey, vue.reactive({
+      ...vue.toRefs(props),
+      changeEvent
+    }));
+    vue.watch(() => props.modelValue, () => formItem == null ? void 0 : formItem.validate("change"));
     return {
-      handleKeydown,
-      radioGroupSize,
-      radioGroup
+      size,
+      disabled,
+      radioGroupRef,
+      handleKeydown
     };
   }
 });

package/lib/components/radio/src/radio-group.vue_vue&type=script&lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group.vue_vue&type=script&lang.js","sources":["../../../../../../packages/components/radio/src/radio-group.vue"],"sourcesContent":["<template>\n  <div\n    ref=\"radioGroup\"\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  computed,\n  provide,\n  onMounted,\n  inject,\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 { isValidComponentSize } from '@element-plus/utils/validators'\nimport { elFormItemKey } from '@element-plus/tokens'\nimport radioGroupKey from './token'\n\nimport type { PropType } from 'vue'\nimport type { ElFormItemContext } from '@element-plus/tokens'\nimport type { ComponentSize } from '@element-plus/utils/types'\n\nexport default defineComponent({\n  name: 'ElRadioGroup',\n\n  componentName: 'ElRadioGroup',\n\n  props: {\n    modelValue: {\n      type: [String, Number, Boolean],\n      default: '',\n    },\n    size: {\n      type: String as PropType<ComponentSize>,\n      validator: isValidComponentSize,\n    },\n    fill: {\n      type: String,\n      default: '',\n    },\n    textColor: {\n      type: String,\n      default: '',\n    },\n    disabled: Boolean,\n  },\n\n  emits: [UPDATE_MODEL_EVENT, 'change'],\n\n  setup(props, ctx) {\n    const radioGroup = ref(null)\n\n    const elFormItem = inject(elFormItemKey, {} as ElFormItemContext)\n\n    const radioGroupSize = computed<ComponentSize>(() => {\n      return props.size || elFormItem.size\n    })\n\n    // methods\n    const changeEvent = (value) => {\n      ctx.emit(UPDATE_MODEL_EVENT, value)\n      nextTick(() => {\n        ctx.emit('change', value)\n      })\n    }\n\n    provide(\n      radioGroupKey,\n      reactive({\n        name: 'ElRadioGroup',\n        ...toRefs(props),\n        radioGroupSize,\n        changeEvent,\n      } as any)\n    )\n\n    watch(\n      () => props.modelValue,\n      () => {\n        elFormItem.validate?.('change')\n      }\n    )\n\n    const handleKeydown = (e) => {\n      // 左右上下按键 可以在radio组内切换不同选项\n      const target = e.target\n      const className =\n        target.nodeName === 'INPUT' ? '[type=radio]' : '[role=radio]'\n      const radios = radioGroup.value.querySelectorAll(className)\n      const length = radios.length\n      const index = Array.from(radios).indexOf(target)\n      const roleRadios = radioGroup.value.querySelectorAll('[role=radio]')\n      let nextIndex = 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 = radioGroup.value.querySelectorAll('[type=radio]')\n      const firstLabel = radios[0]\n      if (\n        !Array.from(radios).some((radio: HTMLInputElement) => radio.checked) &&\n        firstLabel\n      ) {\n        firstLabel.tabIndex = 0\n      }\n    })\n    return {\n      handleKeydown,\n      radioGroupSize,\n      radioGroup,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","isValidComponentSize","UPDATE_MODEL_EVENT","ref","inject","elFormItemKey","computed","radioGroupKey","reactive","toRefs","EVENT_CODE"],"mappings":";;;;;;;;;;;;AAkCA,aAAeA,oBAAgB;AAAA,EAC7B,MAAM;AAAA,EAEN,eAAe;AAAA,EAEf,OAAO;AAAA,IACL,YAAY;AAAA,MACV,MAAM,CAAC,QAAQ,QAAQ;AAAA,MACvB,SAAS;AAAA;AAAA,IAEX,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,WAAWC;AAAA;AAAA,IAEb,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA;AAAA,IAEX,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA;AAAA,IAEX,UAAU;AAAA;AAAA,EAGZ,OAAO,CAACC,8BAAoB;AAAA,EAE5B,MAAM,OAAO,KAAK;AAChB,UAAM,aAAaC,QAAI;AAEvB,UAAM,aAAaC,WAAOC,oBAAe;AAEzC,UAAM,iBAAiBC,aAAwB,MAAM;AACnD,aAAO,MAAM,QAAQ,WAAW;AAAA;AAIlC,UAAM,cAAc,CAAC,UAAU;AAC7B,UAAI,KAAKJ,8BAAoB;AAC7B,mBAAS,MAAM;AACb,YAAI,KAAK,UAAU;AAAA;AAAA;AAIvB,gBACEK,kBACAC,aAAS;AAAA,MACP,MAAM;AAAA,SACHC,WAAO;AAAA,MACV;AAAA,MACA;AAAA;AAIJ,cACE,MAAM,MAAM,YACZ,MAAM;;AACJ,uBAAW,aAAX,oCAAsB;AAAA;AAI1B,UAAM,gBAAgB,CAAC,MAAM;AAE3B,YAAM,SAAS,EAAE;AACjB,YAAM,YACJ,OAAO,aAAa,UAAU,iBAAiB;AACjD,YAAM,SAAS,WAAW,MAAM,iBAAiB;AACjD,YAAM,SAAS,OAAO;AACtB,YAAM,QAAQ,MAAM,KAAK,QAAQ,QAAQ;AACzC,YAAM,aAAa,WAAW,MAAM,iBAAiB;AACrD,UAAI,YAAY;AAChB,cAAQ,EAAE;AAAA,aACHC,gBAAW;AAAA,aACXA,gBAAW;AACd,YAAE;AACF,YAAE;AACF,sBAAY,UAAU,IAAI,SAAS,IAAI,QAAQ;AAC/C;AAAA,aACGA,gBAAW;AAAA,aACXA,gBAAW;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,kBAAU,MAAM;AACd,YAAM,SAAS,WAAW,MAAM,iBAAiB;AACjD,YAAM,aAAa,OAAO;AAC1B,UACE,CAAC,MAAM,KAAK,QAAQ,KAAK,CAAC,UAA4B,MAAM,YAC5D,YACA;AACA,mBAAW,WAAW;AAAA;AAAA;AAG1B,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;;;"}
+{"version":3,"file":"radio-group.vue_vue&type=script&lang.js","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":["defineComponent","radioGroupProps","radioGroupEmits","ref","useFormItem","UPDATE_MODEL_EVENT","EVENT_CODE","radioGroupKey","reactive","toRefs"],"mappings":";;;;;;;;;;;;;AA6BA,aAAeA,oBAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,OAAOC;AAAA,EACP,OAAOC;AAAA,EAEP,MAAM,OAAO,KAAK;AAChB,UAAM,gBAAgBC;AACtB,UAAM,EAAE,MAAM,UAAU,aAAaC,kBAAY;AAEjD,UAAM,cAAc,CAAC,UAAyC;AAC5D,UAAI,KAAKC,8BAAoB;AAC7B,mBAAS,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,aACHC,gBAAW;AAAA,aACXA,gBAAW;AACd,YAAE;AACF,YAAE;AACF,sBAAY,UAAU,IAAI,SAAS,IAAI,QAAQ;AAC/C;AAAA,aACGA,gBAAW;AAAA,aACXA,gBAAW;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,kBAAU,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,gBACEC,qBACAC,aAAS;AAAA,SACJC,WAAO;AAAA,MACV;AAAA;AAIJ,cACE,MAAM,MAAM,YACZ,MAAM,qCAAU,SAAS;AAG3B,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;;;"}

package/lib/components/radio/src/radio-group.vue_vue&type=template&id=53ef81f9&lang.js

@@ -6,7 +6,7 @@ var vue = require('vue');
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createElementBlock("div", {
-    ref: "radioGroup",
+    ref: "radioGroupRef",
     class: "el-radio-group",
     role: "radiogroup",
     onKeydown: _cache[0] || (_cache[0] = (...args) => _ctx.handleKeydown && _ctx.handleKeydown(...args))

package/lib/components/radio/src/radio-group.vue_vue&type=template&id=53ef81f9&lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group.vue_vue&type=template&id=53ef81f9&lang.js","sources":["../../../../../../packages/components/radio/src/radio-group.vue?vue&type=template&id=53ef81f9&lang.js"],"sourcesContent":["<template>\n  <div\n    ref=\"radioGroup\"\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  computed,\n  provide,\n  onMounted,\n  inject,\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 { isValidComponentSize } from '@element-plus/utils/validators'\nimport { elFormItemKey } from '@element-plus/tokens'\nimport radioGroupKey from './token'\n\nimport type { PropType } from 'vue'\nimport type { ElFormItemContext } from '@element-plus/tokens'\nimport type { ComponentSize } from '@element-plus/utils/types'\n\nexport default defineComponent({\n  name: 'ElRadioGroup',\n\n  componentName: 'ElRadioGroup',\n\n  props: {\n    modelValue: {\n      type: [String, Number, Boolean],\n      default: '',\n    },\n    size: {\n      type: String as PropType<ComponentSize>,\n      validator: isValidComponentSize,\n    },\n    fill: {\n      type: String,\n      default: '',\n    },\n    textColor: {\n      type: String,\n      default: '',\n    },\n    disabled: Boolean,\n  },\n\n  emits: [UPDATE_MODEL_EVENT, 'change'],\n\n  setup(props, ctx) {\n    const radioGroup = ref(null)\n\n    const elFormItem = inject(elFormItemKey, {} as ElFormItemContext)\n\n    const radioGroupSize = computed<ComponentSize>(() => {\n      return props.size || elFormItem.size\n    })\n\n    // methods\n    const changeEvent = (value) => {\n      ctx.emit(UPDATE_MODEL_EVENT, value)\n      nextTick(() => {\n        ctx.emit('change', value)\n      })\n    }\n\n    provide(\n      radioGroupKey,\n      reactive({\n        name: 'ElRadioGroup',\n        ...toRefs(props),\n        radioGroupSize,\n        changeEvent,\n      } as any)\n    )\n\n    watch(\n      () => props.modelValue,\n      () => {\n        elFormItem.validate?.('change')\n      }\n    )\n\n    const handleKeydown = (e) => {\n      // 左右上下按键 可以在radio组内切换不同选项\n      const target = e.target\n      const className =\n        target.nodeName === 'INPUT' ? '[type=radio]' : '[role=radio]'\n      const radios = radioGroup.value.querySelectorAll(className)\n      const length = radios.length\n      const index = Array.from(radios).indexOf(target)\n      const roleRadios = radioGroup.value.querySelectorAll('[role=radio]')\n      let nextIndex = 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 = radioGroup.value.querySelectorAll('[type=radio]')\n      const firstLabel = radios[0]\n      if (\n        !Array.from(radios).some((radio: HTMLInputElement) => radio.checked) &&\n        firstLabel\n      ) {\n        firstLabel.tabIndex = 0\n      }\n    })\n    return {\n      handleKeydown,\n      radioGroupSize,\n      radioGroup,\n    }\n  },\n})\n</script>\n"],"names":["_createElementBlock","_renderSlot"],"mappings":";;;;;;;0BACEA;IACE,KAAI;AAAA,IACJ,OAAM;AAAA,IACN,MAAK;AAAA,IACJ,kDAAS;;IAEVC;;;;;;"}
+{"version":3,"file":"radio-group.vue_vue&type=template&id=53ef81f9&lang.js","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":";;;;;;;0BACEA;IACE,KAAI;AAAA,IACJ,OAAM;AAAA,IACN,MAAK;AAAA,IACJ,kDAAS;;IAEVC;;;;;;"}

package/lib/components/radio/src/radio-group2.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var radioGroup_vue_vue_type_script_lang = require('./radio-group.vue_vue&type=script&lang.js');
+var radioGroup_vue_vue_type_template_id_53ef81f9_lang = require('./radio-group.vue_vue&type=template&id=53ef81f9&lang.js');
+
+radioGroup_vue_vue_type_script_lang["default"].render = radioGroup_vue_vue_type_template_id_53ef81f9_lang.render;
+radioGroup_vue_vue_type_script_lang["default"].__file = "packages/components/radio/src/radio-group.vue";
+
+exports["default"] = radioGroup_vue_vue_type_script_lang["default"];
+//# sourceMappingURL=radio-group2.js.map

package/lib/components/radio/src/radio-group2.js.map

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

package/lib/components/radio/src/radio.d.ts

@@ -0,0 +1,33 @@
+import type { ExtractPropTypes, SetupContext } from 'vue';
+export declare const radioPropsBase: {
+    label: import("element-plus/es/utils/props").BuildPropReturn<(BooleanConstructor | StringConstructor | NumberConstructor)[], string, unknown, unknown, unknown>;
+    size: import("element-plus/es/utils/props").BuildPropReturn<StringConstructor, "", unknown, "" | "small" | "large" | "medium" | "mini", unknown>;
+    disabled: BooleanConstructor;
+};
+export declare const radioProps: {
+    readonly modelValue: import("element-plus/es/utils/props").BuildPropReturn<readonly [StringConstructor, NumberConstructor, BooleanConstructor], "", unknown, unknown, unknown>;
+    readonly name: import("element-plus/es/utils/props").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
+    readonly border: BooleanConstructor;
+    readonly label: import("element-plus/es/utils/props").BuildPropReturn<(BooleanConstructor | StringConstructor | NumberConstructor)[], string, unknown, unknown, unknown>;
+    readonly size: import("element-plus/es/utils/props").BuildPropReturn<StringConstructor, "", unknown, "" | "small" | "large" | "medium" | "mini", unknown>;
+    readonly disabled: BooleanConstructor;
+};
+export declare type RadioProps = ExtractPropTypes<typeof radioProps>;
+export declare const radioEmits: {
+    "update:modelValue": (val: string | number | boolean) => boolean;
+    change: (val: string | number | boolean) => boolean;
+};
+export declare type RadioEmits = typeof radioEmits;
+export declare const useRadio: (props: {
+    label: RadioProps['label'];
+    modelValue?: RadioProps['modelValue'];
+}, emit: SetupContext<RadioEmits>['emit']) => {
+    radioRef: import("vue").Ref<HTMLInputElement | undefined>;
+    isGroup: import("vue").ComputedRef<boolean>;
+    radioGroup: import("element-plus/es/tokens").RadioGroupContext | undefined;
+    focus: import("vue").Ref<boolean>;
+    size: import("vue").ComputedRef<any>;
+    disabled: import("vue").ComputedRef<boolean>;
+    tabIndex: import("vue").ComputedRef<0 | -1>;
+    modelValue: import("vue").WritableComputedRef<import("element-plus/es/utils/props").BuildPropType<readonly [StringConstructor, NumberConstructor, BooleanConstructor], unknown, unknown>>;
+};

package/lib/components/radio/src/radio.js

@@ -2,11 +2,78 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var radio_vue_vue_type_script_lang = require('./radio.vue_vue&type=script&lang.js');
-var radio_vue_vue_type_template_id_6aa3dfc7_lang = require('./radio.vue_vue&type=template&id=6aa3dfc7&lang.js');
+var vue = require('vue');
+var props = require('../../../utils/props.js');
+var constants = require('../../../utils/constants.js');
+var util = require('../../../utils/util.js');
+require('../../../tokens/index.js');
+require('../../../hooks/index.js');
+var index = require('../../../hooks/use-form-item/index.js');
+var shared = require('@vue/shared');
+var radio = require('../../../tokens/radio.js');
 
-radio_vue_vue_type_script_lang["default"].render = radio_vue_vue_type_template_id_6aa3dfc7_lang.render;
-radio_vue_vue_type_script_lang["default"].__file = "packages/components/radio/src/radio.vue";
+const radioPropsBase = props.buildProps({
+  ...index.useFormItemProps,
+  label: {
+    type: [String, Number, Boolean],
+    default: ""
+  }
+});
+const radioProps = props.buildProps({
+  ...radioPropsBase,
+  modelValue: {
+    type: [String, Number, Boolean],
+    default: ""
+  },
+  name: {
+    type: String,
+    default: ""
+  },
+  border: Boolean
+});
+const radioEmits = {
+  [constants.UPDATE_MODEL_EVENT]: (val) => shared.isString(val) || util.isNumber(val) || util.isBool(val),
+  change: (val) => shared.isString(val) || util.isNumber(val) || util.isBool(val)
+};
+const useRadio = (props, emit) => {
+  const radioRef = vue.ref();
+  const radioGroup = vue.inject(radio.radioGroupKey, void 0);
+  const isGroup = vue.computed(() => !!radioGroup);
+  const modelValue = vue.computed({
+    get() {
+      return isGroup.value ? radioGroup.modelValue : props.modelValue;
+    },
+    set(val) {
+      if (isGroup.value) {
+        radioGroup.changeEvent(val);
+      } else {
+        emit(constants.UPDATE_MODEL_EVENT, val);
+      }
+      radioRef.value.checked = props.modelValue === props.label;
+    }
+  });
+  const { size, disabled } = index.useFormItem({
+    size: vue.computed(() => radioGroup == null ? void 0 : radioGroup.size),
+    disabled: vue.computed(() => radioGroup == null ? void 0 : radioGroup.disabled)
+  });
+  const focus = vue.ref(false);
+  const tabIndex = vue.computed(() => {
+    return disabled.value || isGroup.value && modelValue.value !== props.label ? -1 : 0;
+  });
+  return {
+    radioRef,
+    isGroup,
+    radioGroup,
+    focus,
+    size,
+    disabled,
+    tabIndex,
+    modelValue
+  };
+};
 
-exports["default"] = radio_vue_vue_type_script_lang["default"];
+exports.radioEmits = radioEmits;
+exports.radioProps = radioProps;
+exports.radioPropsBase = radioPropsBase;
+exports.useRadio = useRadio;
 //# sourceMappingURL=radio.js.map

package/lib/components/radio/src/radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}
+{"version":3,"file":"radio.js","sources":["../../../../../../packages/components/radio/src/radio.ts"],"sourcesContent":["import { ref, computed, inject } from 'vue'\nimport { buildProps } from '@element-plus/utils/props'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { isBool, isString, isNumber } from '@element-plus/utils/util'\nimport { radioGroupKey } from '@element-plus/tokens'\nimport { useFormItem, useFormItemProps } from '@element-plus/hooks'\nimport type { ExtractPropTypes, SetupContext } from 'vue'\n\nexport const radioPropsBase = buildProps({\n  ...useFormItemProps,\n  label: {\n    type: [String, Number, Boolean],\n    default: '',\n  },\n})\nexport const radioProps = buildProps({\n  ...radioPropsBase,\n  modelValue: {\n    type: [String, Number, Boolean],\n    default: '',\n  },\n  name: {\n    type: String,\n    default: '',\n  },\n  border: Boolean,\n} as const)\nexport type RadioProps = ExtractPropTypes<typeof radioProps>\n\nexport const radioEmits = {\n  [UPDATE_MODEL_EVENT]: (val: string | number | boolean) =>\n    isString(val) || isNumber(val) || isBool(val),\n  change: (val: string | number | boolean) =>\n    isString(val) || isNumber(val) || isBool(val),\n}\nexport type RadioEmits = typeof radioEmits\n\nexport const useRadio = (\n  props: { label: RadioProps['label']; modelValue?: RadioProps['modelValue'] },\n  emit: SetupContext<RadioEmits>['emit']\n) => {\n  const radioRef = ref<HTMLInputElement>()\n  const radioGroup = inject(radioGroupKey, undefined)\n  const isGroup = computed(() => !!radioGroup)\n  const modelValue = computed<RadioProps['modelValue']>({\n    get() {\n      return isGroup.value ? radioGroup!.modelValue : props.modelValue!\n    },\n    set(val) {\n      if (isGroup.value) {\n        radioGroup!.changeEvent(val)\n      } else {\n        emit(UPDATE_MODEL_EVENT, val)\n      }\n      radioRef.value!.checked = props.modelValue === props.label\n    },\n  })\n\n  const { size, disabled } = useFormItem({\n    size: computed(() => radioGroup?.size),\n    disabled: computed(() => radioGroup?.disabled),\n  })\n  const focus = ref(false)\n  const tabIndex = computed(() => {\n    return disabled.value || (isGroup.value && modelValue.value !== props.label)\n      ? -1\n      : 0\n  })\n\n  return {\n    radioRef,\n    isGroup,\n    radioGroup,\n    focus,\n    size,\n    disabled,\n    tabIndex,\n    modelValue,\n  }\n}\n"],"names":["buildProps","useFormItemProps","UPDATE_MODEL_EVENT","isString","isNumber","isBool","ref","inject","radioGroupKey","computed","useFormItem"],"mappings":";;;;;;;;;;;;;;MAQa,iBAAiBA,iBAAW;AAAA,KACpCC;AAAA,EACH,OAAO;AAAA,IACL,MAAM,CAAC,QAAQ,QAAQ;AAAA,IACvB,SAAS;AAAA;AAAA;MAGA,aAAaD,iBAAW;AAAA,KAChC;AAAA,EACH,YAAY;AAAA,IACV,MAAM,CAAC,QAAQ,QAAQ;AAAA,IACvB,SAAS;AAAA;AAAA,EAEX,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,QAAQ;AAAA;MAIG,aAAa;AAAA,GACvBE,+BAAqB,CAAC,QACrBC,gBAAS,QAAQC,cAAS,QAAQC,YAAO;AAAA,EAC3C,QAAQ,CAAC,QACPF,gBAAS,QAAQC,cAAS,QAAQC,YAAO;AAAA;MAIhC,WAAW,CACtB,OACA,SACG;AACH,QAAM,WAAWC;AACjB,QAAM,aAAaC,WAAOC,qBAAe;AACzC,QAAM,UAAUC,aAAS,MAAM,CAAC,CAAC;AACjC,QAAM,aAAaA,aAAmC;AAAA,IACpD,MAAM;AACJ,aAAO,QAAQ,QAAQ,WAAY,aAAa,MAAM;AAAA;AAAA,IAExD,IAAI,KAAK;AACP,UAAI,QAAQ,OAAO;AACjB,mBAAY,YAAY;AAAA,aACnB;AACL,aAAKP,8BAAoB;AAAA;AAE3B,eAAS,MAAO,UAAU,MAAM,eAAe,MAAM;AAAA;AAAA;AAIzD,QAAM,EAAE,MAAM,aAAaQ,kBAAY;AAAA,IACrC,MAAMD,aAAS,MAAM,yCAAY;AAAA,IACjC,UAAUA,aAAS,MAAM,yCAAY;AAAA;AAEvC,QAAM,QAAQH,QAAI;AAClB,QAAM,WAAWG,aAAS,MAAM;AAC9B,WAAO,SAAS,SAAU,QAAQ,SAAS,WAAW,UAAU,MAAM,QAClE,KACA;AAAA;AAGN,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;;;;;;;"}

package/lib/components/radio/src/radio.vue.d.ts

@@ -1,56 +1,45 @@
-import type { PropType } from 'vue';
-import type { ComponentSize } from 'element-plus/es/utils/types';
 declare const _default: import("vue").DefineComponent<{
-    modelValue: {
-        type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
-        default: string;
-    };
-    label: {
-        type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
-        default: string;
-    };
-    disabled: BooleanConstructor;
-    name: {
-        type: StringConstructor;
-        default: string;
-    };
-    border: BooleanConstructor;
-    size: {
-        type: PropType<ComponentSize>;
-        validator: (val: string) => boolean;
-    };
+    readonly modelValue: import("../../../utils/props").BuildPropReturn<readonly [StringConstructor, NumberConstructor, BooleanConstructor], "", unknown, unknown, unknown>;
+    readonly name: import("../../../utils/props").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
+    readonly border: BooleanConstructor;
+    readonly label: import("../../../utils/props").BuildPropReturn<(BooleanConstructor | StringConstructor | NumberConstructor)[], string, unknown, unknown, unknown>;
+    readonly size: import("../../../utils/props").BuildPropReturn<StringConstructor, "", unknown, "" | "small" | "large" | "medium" | "mini", unknown>;
+    readonly disabled: BooleanConstructor;
 }, {
     focus: import("vue").Ref<boolean>;
     isGroup: import("vue").ComputedRef<boolean>;
-    isDisabled: import("vue").ComputedRef<boolean | undefined>;
-    model: import("vue").WritableComputedRef<string | number | boolean>;
+    modelValue: import("vue").WritableComputedRef<import("../../../utils/props").BuildPropType<readonly [StringConstructor, NumberConstructor, BooleanConstructor], unknown, unknown>>;
     tabIndex: import("vue").ComputedRef<0 | -1>;
-    radioSize: import("vue").ComputedRef<any>;
-    handleChange: () => void;
+    size: import("vue").ComputedRef<any>;
+    disabled: import("vue").ComputedRef<boolean>;
     radioRef: import("vue").Ref<HTMLInputElement | undefined>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "change")[], "change" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    modelValue?: unknown;
-    label?: unknown;
-    disabled?: unknown;
-    name?: unknown;
-    border?: unknown;
-    size?: unknown;
+    handleChange: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (val: string | number | boolean) => boolean;
+    change: (val: string | number | boolean) => boolean;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    readonly modelValue?: unknown;
+    readonly name?: unknown;
+    readonly border?: unknown;
+    readonly label?: unknown;
+    readonly size?: unknown;
+    readonly disabled?: unknown;
 } & {
+    size: import("../../../utils/props").BuildPropType<StringConstructor, "" | "small" | "large" | "medium" | "mini", unknown>;
+    disabled: boolean;
+    modelValue: import("../../../utils/props").BuildPropType<readonly [StringConstructor, NumberConstructor, BooleanConstructor], unknown, unknown>;
+    label: import("../../../utils/props").BuildPropType<(BooleanConstructor | StringConstructor | NumberConstructor)[], unknown, unknown>;
     name: string;
     border: boolean;
-    disabled: boolean;
-    modelValue: string | number | boolean;
-    label: string | number | boolean;
-} & {
-    size?: ComponentSize | undefined;
-}> & {
-    onChange?: ((...args: any[]) => any) | undefined;
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+} & {}> & {
+    onChange?: ((val: string | number | boolean) => any) | undefined;
+    "onUpdate:modelValue"?: ((val: string | number | boolean) => any) | undefined;
 }, {
+    size: import("../../../utils/props").BuildPropType<StringConstructor, "" | "small" | "large" | "medium" | "mini", unknown>;
+    disabled: boolean;
+    modelValue: import("../../../utils/props").BuildPropType<readonly [StringConstructor, NumberConstructor, BooleanConstructor], unknown, unknown>;
+    label: import("../../../utils/props").BuildPropType<(BooleanConstructor | StringConstructor | NumberConstructor)[], unknown, unknown>;
     name: string;
     border: boolean;
-    disabled: boolean;
-    modelValue: string | number | boolean;
-    label: string | number | boolean;
 }>;
 export default _default;