前端初始化
This commit is contained in:
“hsc”
+10
@@ -0,0 +1,10 @@
|
||||
import { RadioGroupProps } from "./radio-group.js";
|
||||
import { InjectionKey } from "vue";
|
||||
|
||||
//#region ../../packages/components/radio/src/constants.d.ts
|
||||
interface RadioGroupContext extends RadioGroupProps {
|
||||
changeEvent: (val: RadioGroupProps['modelValue']) => void;
|
||||
}
|
||||
declare const radioGroupKey: InjectionKey<RadioGroupContext>;
|
||||
//#endregion
|
||||
export { RadioGroupContext, radioGroupKey };
|
||||
+6
@@ -0,0 +1,6 @@
|
||||
//#region ../../packages/components/radio/src/constants.ts
|
||||
const radioGroupKey = Symbol("radioGroupKey");
|
||||
//#endregion
|
||||
export { radioGroupKey };
|
||||
|
||||
//# sourceMappingURL=constants.mjs.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"constants.mjs","names":[],"sources":["../../../../../../packages/components/radio/src/constants.ts"],"sourcesContent":["import type { InjectionKey } from 'vue'\nimport type { RadioGroupProps } from './radio-group'\n\nexport interface RadioGroupContext extends RadioGroupProps {\n changeEvent: (val: RadioGroupProps['modelValue']) => void\n}\n\nexport const radioGroupKey: InjectionKey<RadioGroupContext> =\n Symbol('radioGroupKey')\n"],"mappings":";AAOA,MAAa,gBACX,OAAO,gBAAgB"}
|
||||
+41
@@ -0,0 +1,41 @@
|
||||
import { EpPropFinalized, EpPropMergeType } from "../../../utils/vue/props/types.js";
|
||||
import { RadioPropsBase } from "./radio.js";
|
||||
import _default from "./radio-button.vue.js";
|
||||
import * as _$vue from "vue";
|
||||
import { ExtractPublicPropTypes } from "vue";
|
||||
|
||||
//#region ../../packages/components/radio/src/radio-button.d.ts
|
||||
interface RadioButtonProps extends RadioPropsBase {}
|
||||
/**
|
||||
* @deprecated Removed after 3.0.0, Use `RadioButtonProps` instead.
|
||||
*/
|
||||
declare const radioButtonProps: {
|
||||
readonly modelValue: EpPropFinalized<(StringConstructor | NumberConstructor | BooleanConstructor)[], unknown, unknown, undefined, boolean>;
|
||||
readonly size: {
|
||||
readonly type: _$vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly disabled: EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
|
||||
readonly label: EpPropFinalized<(StringConstructor | NumberConstructor | BooleanConstructor)[], unknown, unknown, undefined, boolean>;
|
||||
readonly value: EpPropFinalized<(StringConstructor | NumberConstructor | BooleanConstructor)[], unknown, unknown, undefined, boolean>;
|
||||
readonly name: EpPropFinalized<StringConstructor, unknown, unknown, undefined, boolean>;
|
||||
};
|
||||
/**
|
||||
* @deprecated Removed after 3.0.0, Use `RadioButtonProps` instead.
|
||||
*/
|
||||
type RadioButtonPropsPublic = ExtractPublicPropTypes<typeof radioButtonProps>;
|
||||
type RadioButtonInstance = InstanceType<typeof _default> & unknown;
|
||||
/**
|
||||
* @description default values for RadioButtonProps
|
||||
*/
|
||||
declare const radioButtonPropsDefaults: {
|
||||
readonly modelValue: undefined;
|
||||
readonly disabled: undefined;
|
||||
readonly label: undefined;
|
||||
readonly value: undefined;
|
||||
readonly name: undefined;
|
||||
};
|
||||
//#endregion
|
||||
export { RadioButtonInstance, RadioButtonProps, RadioButtonPropsPublic, radioButtonProps, radioButtonPropsDefaults };
|
||||
+21
@@ -0,0 +1,21 @@
|
||||
import { buildProps } from "../../../utils/vue/props/runtime.mjs";
|
||||
import { radioPropsBase } from "./radio.mjs";
|
||||
//#region ../../packages/components/radio/src/radio-button.ts
|
||||
/**
|
||||
* @deprecated Removed after 3.0.0, Use `RadioButtonProps` instead.
|
||||
*/
|
||||
const radioButtonProps = buildProps({ ...radioPropsBase });
|
||||
/**
|
||||
* @description default values for RadioButtonProps
|
||||
*/
|
||||
const radioButtonPropsDefaults = {
|
||||
modelValue: void 0,
|
||||
disabled: void 0,
|
||||
label: void 0,
|
||||
value: void 0,
|
||||
name: void 0
|
||||
};
|
||||
//#endregion
|
||||
export { radioButtonProps, radioButtonPropsDefaults };
|
||||
|
||||
//# sourceMappingURL=radio-button.mjs.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"radio-button.mjs","names":[],"sources":["../../../../../../packages/components/radio/src/radio-button.ts"],"sourcesContent":["import { buildProps } from '@element-plus/utils'\nimport { radioPropsBase } from './radio'\n\nimport type { ExtractPublicPropTypes } from 'vue'\nimport type { RadioPropsBase } from './radio'\nimport type RadioButton from './radio-button.vue'\n\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\nexport interface RadioButtonProps extends RadioPropsBase {}\n\n/**\n * @deprecated Removed after 3.0.0, Use `RadioButtonProps` instead.\n */\nexport const radioButtonProps = buildProps({\n ...radioPropsBase,\n} as const)\n\n/**\n * @deprecated Removed after 3.0.0, Use `RadioButtonProps` instead.\n */\nexport type RadioButtonPropsPublic = ExtractPublicPropTypes<\n typeof radioButtonProps\n>\nexport type RadioButtonInstance = InstanceType<typeof RadioButton> & unknown\n\n/**\n * @description default values for RadioButtonProps\n */\nexport const radioButtonPropsDefaults = {\n modelValue: undefined,\n disabled: undefined,\n label: undefined,\n value: undefined,\n name: undefined,\n} as const\n"],"mappings":";;;;;;AAaA,MAAa,mBAAmB,WAAW,EACzC,GAAG,gBACJ,CAAU;;;;AAaX,MAAa,2BAA2B;CACtC,YAAY,KAAA;CACZ,UAAU,KAAA;CACV,OAAO,KAAA;CACP,OAAO,KAAA;CACP,MAAM,KAAA;CACP"}
|
||||
+24
@@ -0,0 +1,24 @@
|
||||
import { RadioButtonProps } from "./radio-button.js";
|
||||
import * as _$vue from "vue";
|
||||
|
||||
//#region ../../packages/components/radio/src/radio-button.vue.d.ts
|
||||
declare var __VLS_1: {};
|
||||
type __VLS_Slots = {} & {
|
||||
default?: (props: typeof __VLS_1) => any;
|
||||
};
|
||||
declare const __VLS_base: _$vue.DefineComponent<RadioButtonProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<RadioButtonProps> & Readonly<{}>, {
|
||||
value: string | number | boolean;
|
||||
label: string | number | boolean;
|
||||
disabled: boolean;
|
||||
name: string;
|
||||
modelValue: string | number | boolean;
|
||||
}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
|
||||
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
||||
declare const _default: typeof __VLS_export;
|
||||
type __VLS_WithSlots<T, S> = T & {
|
||||
new (): {
|
||||
$slots: S;
|
||||
};
|
||||
};
|
||||
//#endregion
|
||||
export { _default as default };
|
||||
Generated
Vendored
+57
@@ -0,0 +1,57 @@
|
||||
import { useNamespace } from "../../../hooks/use-namespace/index.mjs";
|
||||
import { useRadio } from "./use-radio.mjs";
|
||||
import { radioButtonProps } from "./radio-button.mjs";
|
||||
import { computed, createElementBlock, createElementVNode, createTextVNode, defineComponent, isRef, normalizeClass, normalizeStyle, openBlock, renderSlot, toDisplayString, unref, vModelRadio, withDirectives, withModifiers } from "vue";
|
||||
//#region ../../packages/components/radio/src/radio-button.vue?vue&type=script&setup=true&lang.ts
|
||||
const _hoisted_1 = [
|
||||
"value",
|
||||
"name",
|
||||
"disabled"
|
||||
];
|
||||
var radio_button_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
|
||||
name: "ElRadioButton",
|
||||
__name: "radio-button",
|
||||
props: radioButtonProps,
|
||||
setup(__props) {
|
||||
const props = __props;
|
||||
const ns = useNamespace("radio");
|
||||
const { radioRef, focus, size, disabled, modelValue, radioGroup, actualValue } = useRadio(props);
|
||||
const activeStyle = computed(() => {
|
||||
return {
|
||||
backgroundColor: radioGroup?.fill || "",
|
||||
borderColor: radioGroup?.fill || "",
|
||||
boxShadow: radioGroup?.fill ? `-1px 0 0 0 ${radioGroup.fill}` : "",
|
||||
color: radioGroup?.textColor || ""
|
||||
};
|
||||
});
|
||||
return (_ctx, _cache) => {
|
||||
return openBlock(), createElementBlock("label", { class: normalizeClass([
|
||||
unref(ns).b("button"),
|
||||
unref(ns).is("active", unref(modelValue) === unref(actualValue)),
|
||||
unref(ns).is("disabled", unref(disabled)),
|
||||
unref(ns).is("focus", unref(focus)),
|
||||
unref(ns).bm("button", unref(size))
|
||||
]) }, [withDirectives(createElementVNode("input", {
|
||||
ref_key: "radioRef",
|
||||
ref: radioRef,
|
||||
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(modelValue) ? modelValue.value = $event : null),
|
||||
class: normalizeClass(unref(ns).be("button", "original-radio")),
|
||||
value: unref(actualValue),
|
||||
type: "radio",
|
||||
name: __props.name || unref(radioGroup)?.name,
|
||||
disabled: unref(disabled),
|
||||
onFocus: _cache[1] || (_cache[1] = ($event) => focus.value = true),
|
||||
onBlur: _cache[2] || (_cache[2] = ($event) => focus.value = false),
|
||||
onClick: _cache[3] || (_cache[3] = withModifiers(() => {}, ["stop"]))
|
||||
}, null, 42, _hoisted_1), [[vModelRadio, unref(modelValue)]]), createElementVNode("span", {
|
||||
class: normalizeClass(unref(ns).be("button", "inner")),
|
||||
style: normalizeStyle(unref(modelValue) === unref(actualValue) ? activeStyle.value : {}),
|
||||
onKeydown: _cache[4] || (_cache[4] = withModifiers(() => {}, ["stop"]))
|
||||
}, [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(__props.label), 1)])], 38)], 2);
|
||||
};
|
||||
}
|
||||
});
|
||||
//#endregion
|
||||
export { radio_button_vue_vue_type_script_setup_true_lang_default as default };
|
||||
|
||||
//# sourceMappingURL=radio-button.vue_vue_type_script_setup_true_lang.mjs.map
|
||||
Generated
Vendored
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"radio-button.vue_vue_type_script_setup_true_lang.mjs","names":[],"sources":["../../../../../../packages/components/radio/src/radio-button.vue"],"sourcesContent":["<template>\n <label\n :class=\"[\n ns.b('button'),\n ns.is('active', modelValue === actualValue),\n ns.is('disabled', disabled),\n ns.is('focus', focus),\n ns.bm('button', size),\n ]\"\n >\n <input\n ref=\"radioRef\"\n v-model=\"modelValue\"\n :class=\"ns.be('button', 'original-radio')\"\n :value=\"actualValue\"\n type=\"radio\"\n :name=\"name || radioGroup?.name\"\n :disabled=\"disabled\"\n @focus=\"focus = true\"\n @blur=\"focus = false\"\n @click.stop\n />\n <span\n :class=\"ns.be('button', 'inner')\"\n :style=\"modelValue === actualValue ? activeStyle : {}\"\n @keydown.stop\n >\n <slot>\n {{ label }}\n </slot>\n </span>\n </label>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed } from 'vue'\nimport { useNamespace } from '@element-plus/hooks'\nimport { useRadio } from './use-radio'\nimport { radioButtonPropsDefaults } from './radio-button'\n\nimport type { RadioButtonProps } from './radio-button'\nimport type { CSSProperties } from 'vue'\n\ndefineOptions({\n name: 'ElRadioButton',\n})\n\nconst props = withDefaults(\n defineProps<RadioButtonProps>(),\n radioButtonPropsDefaults\n)\n\nconst ns = useNamespace('radio')\nconst { radioRef, focus, size, disabled, modelValue, radioGroup, actualValue } =\n useRadio(props)\n\nconst 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</script>\n"],"mappings":";;;;;;;;;;;;;;;EA+CA,MAAM,QAAQ;EAKd,MAAM,KAAK,aAAa,QAAO;EAC/B,MAAM,EAAE,UAAU,OAAO,MAAM,UAAU,YAAY,YAAY,gBAC/D,SAAS,MAAK;EAEhB,MAAM,cAAc,eAA8B;GAChD,OAAO;IACL,iBAAiB,YAAY,QAAQ;IACrC,aAAa,YAAY,QAAQ;IACjC,WAAW,YAAY,OAAO,cAAc,WAAW,SAAS;IAChE,OAAO,YAAY,aAAa;IAClC;IACD;;uBA9DC,mBA8BQ,SAAA,EA7BL,OAAK,eAAA;IAAU,MAAA,GAAE,CAAC,EAAC,SAAA;IAAkB,MAAA,GAAE,CAAC,GAAE,UAAW,MAAA,WAAU,KAAK,MAAA,YAAW,CAAA;IAAS,MAAA,GAAE,CAAC,GAAE,YAAa,MAAA,SAAQ,CAAA;IAAS,MAAA,GAAE,CAAC,GAAE,SAAU,MAAA,MAAK,CAAA;IAAS,MAAA,GAAE,CAAC,GAAE,UAAW,MAAA,KAAI,CAAA;yBAQ7K,mBAWE,SAAA;aAVI;IAAJ,KAAI;qFACK,WAAU,QAAA,SAAA;IAClB,OAAK,eAAE,MAAA,GAAE,CAAC,GAAE,UAAA,iBAAA,CAAA;IACZ,OAAO,MAAA,YAAW;IACnB,MAAK;IACJ,MAAM,QAAA,QAAQ,MAAA,WAAU,EAAE;IAC1B,UAAU,MAAA,SAAQ;IAClB,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,QAAK;IACZ,QAAI,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,QAAK;IACX,SAAK,OAAA,OAAA,OAAA,KAAA,oBAAN,IAAW,CAAA,OAAA,CAAA;4CARF,MAAA,WAAU,CAAA,CAAA,CAAA,EAUrB,mBAQO,QAAA;IAPJ,OAAK,eAAE,MAAA,GAAE,CAAC,GAAE,UAAA,QAAA,CAAA;IACZ,OAAK,eAAE,MAAA,WAAU,KAAK,MAAA,YAAW,GAAG,YAAA,QAAW,EAAA,CAAA;IAC/C,WAAO,OAAA,OAAA,OAAA,KAAA,oBAAR,IAAa,CAAA,OAAA,CAAA;OAEb,WAEO,KAAA,QAAA,WAAA,EAAA,QAAA,CAAA,gBAAA,gBADF,QAAA,MAAK,EAAA,EAAA,CAAA,CAAA,CAAA,EAAA,GAAA,CAAA,EAAA,EAAA"}
|
||||
+7
@@ -0,0 +1,7 @@
|
||||
import radio_button_vue_vue_type_script_setup_true_lang_default from "./radio-button.vue_vue_type_script_setup_true_lang.mjs";
|
||||
//#region ../../packages/components/radio/src/radio-button.vue
|
||||
var radio_button_default = radio_button_vue_vue_type_script_setup_true_lang_default;
|
||||
//#endregion
|
||||
export { radio_button_default as default };
|
||||
|
||||
//# sourceMappingURL=radio-button2.mjs.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"radio-button2.mjs","names":[],"sources":["../../../../../../packages/components/radio/src/radio-button.vue"],"sourcesContent":["<template>\n <label\n :class=\"[\n ns.b('button'),\n ns.is('active', modelValue === actualValue),\n ns.is('disabled', disabled),\n ns.is('focus', focus),\n ns.bm('button', size),\n ]\"\n >\n <input\n ref=\"radioRef\"\n v-model=\"modelValue\"\n :class=\"ns.be('button', 'original-radio')\"\n :value=\"actualValue\"\n type=\"radio\"\n :name=\"name || radioGroup?.name\"\n :disabled=\"disabled\"\n @focus=\"focus = true\"\n @blur=\"focus = false\"\n @click.stop\n />\n <span\n :class=\"ns.be('button', 'inner')\"\n :style=\"modelValue === actualValue ? activeStyle : {}\"\n @keydown.stop\n >\n <slot>\n {{ label }}\n </slot>\n </span>\n </label>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed } from 'vue'\nimport { useNamespace } from '@element-plus/hooks'\nimport { useRadio } from './use-radio'\nimport { radioButtonPropsDefaults } from './radio-button'\n\nimport type { RadioButtonProps } from './radio-button'\nimport type { CSSProperties } from 'vue'\n\ndefineOptions({\n name: 'ElRadioButton',\n})\n\nconst props = withDefaults(\n defineProps<RadioButtonProps>(),\n radioButtonPropsDefaults\n)\n\nconst ns = useNamespace('radio')\nconst { radioRef, focus, size, disabled, modelValue, radioGroup, actualValue } =\n useRadio(props)\n\nconst 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</script>\n"],"mappings":""}
|
||||
+117
@@ -0,0 +1,117 @@
|
||||
import { EpPropFinalized, EpPropMergeType } from "../../../utils/vue/props/types.js";
|
||||
import { ComponentSize } from "../../../constants/size.js";
|
||||
import _default from "./radio-group.vue.js";
|
||||
import * as _$vue from "vue";
|
||||
import { ExtractPublicPropTypes } from "vue";
|
||||
|
||||
//#region ../../packages/components/radio/src/radio-group.d.ts
|
||||
type radioOptionProp = {
|
||||
value?: string;
|
||||
label?: string;
|
||||
disabled?: string;
|
||||
};
|
||||
declare const radioDefaultProps: Required<radioOptionProp>;
|
||||
type radioOption = Record<string, any>;
|
||||
interface RadioGroupProps {
|
||||
/**
|
||||
* @description native `id` attribute
|
||||
*/
|
||||
id?: string;
|
||||
/**
|
||||
* @description the size of radio buttons or bordered radios
|
||||
*/
|
||||
size?: ComponentSize;
|
||||
/**
|
||||
* @description whether the nesting radios are disabled
|
||||
*/
|
||||
disabled?: boolean;
|
||||
/**
|
||||
* @description binding value
|
||||
*/
|
||||
modelValue?: string | number | boolean;
|
||||
/**
|
||||
* @description border and background color when button is active
|
||||
*/
|
||||
fill?: string;
|
||||
/**
|
||||
* @description font color when button is active
|
||||
*/
|
||||
textColor?: string;
|
||||
/**
|
||||
* @description native `name` attribute
|
||||
*/
|
||||
name?: string;
|
||||
/**
|
||||
* @description whether to trigger form validation
|
||||
*/
|
||||
validateEvent?: boolean;
|
||||
/**
|
||||
* @description radio options
|
||||
*/
|
||||
options?: radioOption[];
|
||||
/**
|
||||
* @description custom prop names for options
|
||||
*/
|
||||
props?: radioOptionProp;
|
||||
/**
|
||||
* @description radio type
|
||||
*/
|
||||
type?: 'radio' | 'button';
|
||||
/**
|
||||
* @description native `aria-label` attribute
|
||||
*/
|
||||
ariaLabel?: string;
|
||||
}
|
||||
/**
|
||||
* @deprecated Removed after 3.0.0, Use `RadioGroupProps` instead.
|
||||
*/
|
||||
declare const radioGroupProps: {
|
||||
readonly ariaLabel: StringConstructor;
|
||||
readonly id: EpPropFinalized<StringConstructor, unknown, unknown, undefined, boolean>;
|
||||
readonly size: {
|
||||
readonly type: _$vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly disabled: EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
|
||||
readonly modelValue: EpPropFinalized<readonly [StringConstructor, NumberConstructor, BooleanConstructor], unknown, unknown, undefined, boolean>;
|
||||
readonly fill: EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
|
||||
readonly textColor: EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
|
||||
readonly name: EpPropFinalized<StringConstructor, unknown, unknown, undefined, boolean>;
|
||||
readonly validateEvent: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
|
||||
readonly options: {
|
||||
readonly type: _$vue.PropType<radioOption[]>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly props: EpPropFinalized<(new (...args: any[]) => radioOptionProp) | (() => radioOptionProp) | (((new (...args: any[]) => radioOptionProp) | (() => radioOptionProp)) | null)[], unknown, unknown, () => Required<radioOptionProp>, boolean>;
|
||||
readonly type: EpPropFinalized<StringConstructor, "button" | "radio", unknown, "radio", boolean>;
|
||||
};
|
||||
/**
|
||||
* @deprecated Removed after 3.0.0, Use `RadioGroupProps` instead.
|
||||
*/
|
||||
type RadioGroupPropsPublic = ExtractPublicPropTypes<typeof radioGroupProps>;
|
||||
declare const radioGroupEmits: {
|
||||
"update:modelValue": (val: string | number | boolean | undefined) => val is string | number | boolean;
|
||||
change: (val: string | number | boolean | undefined) => val is string | number | boolean;
|
||||
};
|
||||
type RadioGroupEmits = typeof radioGroupEmits;
|
||||
type RadioGroupInstance = InstanceType<typeof _default> & unknown;
|
||||
/**
|
||||
* @description default values for RadioGroupProps
|
||||
*/
|
||||
declare const radioGroupPropsDefaults: {
|
||||
readonly id: undefined;
|
||||
readonly disabled: undefined;
|
||||
readonly modelValue: undefined;
|
||||
readonly fill: "";
|
||||
readonly textColor: "";
|
||||
readonly name: undefined;
|
||||
readonly validateEvent: true;
|
||||
readonly props: () => Required<radioOptionProp>;
|
||||
readonly type: "radio";
|
||||
};
|
||||
//#endregion
|
||||
export { RadioGroupEmits, RadioGroupInstance, RadioGroupProps, RadioGroupPropsPublic, radioDefaultProps, radioGroupEmits, radioGroupProps, radioGroupPropsDefaults, radioOption, radioOptionProp };
|
||||
+102
@@ -0,0 +1,102 @@
|
||||
import { buildProps, definePropType } from "../../../utils/vue/props/runtime.mjs";
|
||||
import { useSizeProp } from "../../../hooks/use-size/index.mjs";
|
||||
import { useAriaProps } from "../../../hooks/use-aria/index.mjs";
|
||||
import { radioEmits } from "./radio.mjs";
|
||||
//#region ../../packages/components/radio/src/radio-group.ts
|
||||
const radioDefaultProps = {
|
||||
label: "label",
|
||||
value: "value",
|
||||
disabled: "disabled"
|
||||
};
|
||||
/**
|
||||
* @deprecated Removed after 3.0.0, Use `RadioGroupProps` instead.
|
||||
*/
|
||||
const radioGroupProps = buildProps({
|
||||
/**
|
||||
* @description native `id` attribute
|
||||
*/
|
||||
id: {
|
||||
type: String,
|
||||
default: void 0
|
||||
},
|
||||
/**
|
||||
* @description the size of radio buttons or bordered radios
|
||||
*/
|
||||
size: useSizeProp,
|
||||
/**
|
||||
* @description whether the nesting radios are disabled
|
||||
*/
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: void 0
|
||||
},
|
||||
/**
|
||||
* @description binding value
|
||||
*/
|
||||
modelValue: {
|
||||
type: [
|
||||
String,
|
||||
Number,
|
||||
Boolean
|
||||
],
|
||||
default: void 0
|
||||
},
|
||||
/**
|
||||
* @description border and background color when button is active
|
||||
*/
|
||||
fill: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
/**
|
||||
* @description font color when button is active
|
||||
*/
|
||||
textColor: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
/**
|
||||
* @description native `name` attribute
|
||||
*/
|
||||
name: {
|
||||
type: String,
|
||||
default: void 0
|
||||
},
|
||||
/**
|
||||
* @description whether to trigger form validation
|
||||
*/
|
||||
validateEvent: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
options: { type: definePropType(Array) },
|
||||
props: {
|
||||
type: definePropType(Object),
|
||||
default: () => radioDefaultProps
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
values: ["radio", "button"],
|
||||
default: "radio"
|
||||
},
|
||||
...useAriaProps(["ariaLabel"])
|
||||
});
|
||||
const radioGroupEmits = radioEmits;
|
||||
/**
|
||||
* @description default values for RadioGroupProps
|
||||
*/
|
||||
const radioGroupPropsDefaults = {
|
||||
id: void 0,
|
||||
disabled: void 0,
|
||||
modelValue: void 0,
|
||||
fill: "",
|
||||
textColor: "",
|
||||
name: void 0,
|
||||
validateEvent: true,
|
||||
props: () => radioDefaultProps,
|
||||
type: "radio"
|
||||
};
|
||||
//#endregion
|
||||
export { radioDefaultProps, radioGroupEmits, radioGroupProps, radioGroupPropsDefaults };
|
||||
|
||||
//# sourceMappingURL=radio-group.mjs.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"radio-group.mjs","names":[],"sources":["../../../../../../packages/components/radio/src/radio-group.ts"],"sourcesContent":["import { buildProps, definePropType } from '@element-plus/utils'\nimport { useAriaProps, useSizeProp } from '@element-plus/hooks'\nimport { radioEmits } from './radio'\n\nimport type { ComponentSize } from '@element-plus/constants'\nimport type { ExtractPublicPropTypes } from 'vue'\nimport type RadioGroup from './radio-group.vue'\n\nexport type radioOptionProp = {\n value?: string\n label?: string\n disabled?: string\n}\n\nexport const radioDefaultProps: Required<radioOptionProp> = {\n label: 'label',\n value: 'value',\n disabled: 'disabled',\n}\n\nexport type radioOption = Record<string, any>\n\nexport interface RadioGroupProps {\n /**\n * @description native `id` attribute\n */\n id?: string\n /**\n * @description the size of radio buttons or bordered radios\n */\n size?: ComponentSize\n /**\n * @description whether the nesting radios are disabled\n */\n disabled?: boolean\n /**\n * @description binding value\n */\n modelValue?: string | number | boolean\n /**\n * @description border and background color when button is active\n */\n fill?: string\n /**\n * @description font color when button is active\n */\n textColor?: string\n /**\n * @description native `name` attribute\n */\n name?: string\n /**\n * @description whether to trigger form validation\n */\n validateEvent?: boolean\n /**\n * @description radio options\n */\n options?: radioOption[]\n /**\n * @description custom prop names for options\n */\n props?: radioOptionProp\n /**\n * @description radio type\n */\n type?: 'radio' | 'button'\n /**\n * @description native `aria-label` attribute\n */\n ariaLabel?: string\n}\n\n/**\n * @deprecated Removed after 3.0.0, Use `RadioGroupProps` instead.\n */\nexport const radioGroupProps = buildProps({\n /**\n * @description native `id` attribute\n */\n id: {\n type: String,\n default: undefined,\n },\n /**\n * @description the size of radio buttons or bordered radios\n */\n size: useSizeProp,\n /**\n * @description whether the nesting radios are disabled\n */\n disabled: {\n type: Boolean,\n default: undefined,\n },\n /**\n * @description binding value\n */\n modelValue: {\n type: [String, Number, Boolean],\n default: undefined,\n },\n /**\n * @description border and background color when button is active\n */\n fill: {\n type: String,\n default: '',\n },\n /**\n * @description font color when button is active\n */\n textColor: {\n type: String,\n default: '',\n },\n /**\n * @description native `name` attribute\n */\n name: {\n type: String,\n default: undefined,\n },\n /**\n * @description whether to trigger form validation\n */\n validateEvent: {\n type: Boolean,\n default: true,\n },\n options: {\n type: definePropType<radioOption[]>(Array),\n },\n props: {\n type: definePropType<radioOptionProp>(Object),\n default: () => radioDefaultProps,\n },\n type: {\n type: String,\n values: ['radio', 'button'] as const,\n default: 'radio',\n },\n ...useAriaProps(['ariaLabel']),\n} as const)\n\n/**\n * @deprecated Removed after 3.0.0, Use `RadioGroupProps` instead.\n */\nexport type RadioGroupPropsPublic = ExtractPublicPropTypes<\n typeof radioGroupProps\n>\n\nexport const radioGroupEmits = radioEmits\nexport type RadioGroupEmits = typeof radioGroupEmits\nexport type RadioGroupInstance = InstanceType<typeof RadioGroup> & unknown\n\n/**\n * @description default values for RadioGroupProps\n */\nexport const radioGroupPropsDefaults = {\n id: undefined,\n disabled: undefined,\n modelValue: undefined,\n fill: '',\n textColor: '',\n name: undefined,\n validateEvent: true,\n props: () => radioDefaultProps,\n type: 'radio',\n} as const\n"],"mappings":";;;;;AAcA,MAAa,oBAA+C;CAC1D,OAAO;CACP,OAAO;CACP,UAAU;CACX;;;;AA0DD,MAAa,kBAAkB,WAAW;;;;CAIxC,IAAI;EACF,MAAM;EACN,SAAS,KAAA;EACV;;;;CAID,MAAM;;;;CAIN,UAAU;EACR,MAAM;EACN,SAAS,KAAA;EACV;;;;CAID,YAAY;EACV,MAAM;GAAC;GAAQ;GAAQ;GAAQ;EAC/B,SAAS,KAAA;EACV;;;;CAID,MAAM;EACJ,MAAM;EACN,SAAS;EACV;;;;CAID,WAAW;EACT,MAAM;EACN,SAAS;EACV;;;;CAID,MAAM;EACJ,MAAM;EACN,SAAS,KAAA;EACV;;;;CAID,eAAe;EACb,MAAM;EACN,SAAS;EACV;CACD,SAAS,EACP,MAAM,eAA8B,MAAM,EAC3C;CACD,OAAO;EACL,MAAM,eAAgC,OAAO;EAC7C,eAAe;EAChB;CACD,MAAM;EACJ,MAAM;EACN,QAAQ,CAAC,SAAS,SAAS;EAC3B,SAAS;EACV;CACD,GAAG,aAAa,CAAC,YAAY,CAAC;CAC/B,CAAU;AASX,MAAa,kBAAkB;;;;AAO/B,MAAa,0BAA0B;CACrC,IAAI,KAAA;CACJ,UAAU,KAAA;CACV,YAAY,KAAA;CACZ,MAAM;CACN,WAAW;CACX,MAAM,KAAA;CACN,eAAe;CACf,aAAa;CACb,MAAM;CACP"}
|
||||
+34
@@ -0,0 +1,34 @@
|
||||
import { RadioGroupProps, radioOptionProp } from "./radio-group.js";
|
||||
import * as _$vue from "vue";
|
||||
|
||||
//#region ../../packages/components/radio/src/radio-group.vue.d.ts
|
||||
declare var __VLS_1: {};
|
||||
type __VLS_Slots = {} & {
|
||||
default?: (props: typeof __VLS_1) => any;
|
||||
};
|
||||
declare const __VLS_base: _$vue.DefineComponent<RadioGroupProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
|
||||
"update:modelValue": (val: string | number | boolean | undefined) => void;
|
||||
change: (val: string | number | boolean | undefined) => void;
|
||||
}, string, _$vue.PublicProps, Readonly<RadioGroupProps> & Readonly<{
|
||||
onChange?: ((val: string | number | boolean | undefined) => any) | undefined;
|
||||
"onUpdate:modelValue"?: ((val: string | number | boolean | undefined) => any) | undefined;
|
||||
}>, {
|
||||
type: "radio" | "button";
|
||||
disabled: boolean;
|
||||
props: radioOptionProp;
|
||||
name: string;
|
||||
fill: string;
|
||||
id: string;
|
||||
modelValue: string | number | boolean;
|
||||
validateEvent: boolean;
|
||||
textColor: string;
|
||||
}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
|
||||
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
||||
declare const _default: typeof __VLS_export;
|
||||
type __VLS_WithSlots<T, S> = T & {
|
||||
new (): {
|
||||
$slots: S;
|
||||
};
|
||||
};
|
||||
//#endregion
|
||||
export { _default as default };
|
||||
Generated
Vendored
+90
@@ -0,0 +1,90 @@
|
||||
import { CHANGE_EVENT, UPDATE_MODEL_EVENT } from "../../../constants/event.mjs";
|
||||
import { NOOP } from "../../../utils/functions.mjs";
|
||||
import { useNamespace } from "../../../hooks/use-namespace/index.mjs";
|
||||
import { useId } from "../../../hooks/use-id/index.mjs";
|
||||
import { useFormItem, useFormItemInputId } from "../../form/src/hooks/use-form-item.mjs";
|
||||
import { radioGroupKey } from "./constants.mjs";
|
||||
import radio_default from "./radio2.mjs";
|
||||
import radio_button_default from "./radio-button2.mjs";
|
||||
import { radioDefaultProps, radioGroupEmits, radioGroupProps } from "./radio-group.mjs";
|
||||
import { isEqual, omit } from "lodash-unified";
|
||||
import { Fragment, computed, createBlock, createElementBlock, defineComponent, mergeProps, nextTick, normalizeClass, onMounted, openBlock, provide, reactive, ref, renderList, renderSlot, resolveDynamicComponent, toRefs, unref, watch } from "vue";
|
||||
//#region ../../packages/components/radio/src/radio-group.vue?vue&type=script&setup=true&lang.ts
|
||||
const _hoisted_1 = [
|
||||
"id",
|
||||
"aria-label",
|
||||
"aria-labelledby"
|
||||
];
|
||||
var radio_group_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
|
||||
name: "ElRadioGroup",
|
||||
__name: "radio-group",
|
||||
props: radioGroupProps,
|
||||
emits: radioGroupEmits,
|
||||
setup(__props, { emit: __emit }) {
|
||||
const props = __props;
|
||||
const emit = __emit;
|
||||
const ns = useNamespace("radio");
|
||||
const radioId = useId();
|
||||
const radioGroupRef = ref();
|
||||
const { formItem } = useFormItem();
|
||||
const { inputId: groupId, isLabeledByFormItem } = useFormItemInputId(props, { formItemContext: formItem });
|
||||
const changeEvent = (value) => {
|
||||
emit(UPDATE_MODEL_EVENT, value);
|
||||
nextTick(() => emit(CHANGE_EVENT, value));
|
||||
};
|
||||
onMounted(() => {
|
||||
const radios = radioGroupRef.value.querySelectorAll("[type=radio]");
|
||||
const firstLabel = radios[0];
|
||||
if (!Array.from(radios).some((radio) => radio.checked) && firstLabel) firstLabel.tabIndex = 0;
|
||||
});
|
||||
const name = computed(() => {
|
||||
return props.name || radioId.value;
|
||||
});
|
||||
const aliasProps = computed(() => ({
|
||||
...radioDefaultProps,
|
||||
...props.props
|
||||
}));
|
||||
const getOptionProps = (option) => {
|
||||
const { label, value, disabled } = aliasProps.value;
|
||||
const base = {
|
||||
label: option[label],
|
||||
value: option[value],
|
||||
disabled: option[disabled]
|
||||
};
|
||||
return {
|
||||
...omit(option, [
|
||||
label,
|
||||
value,
|
||||
disabled
|
||||
]),
|
||||
...base
|
||||
};
|
||||
};
|
||||
const optionComponent = computed(() => props.type === "button" ? radio_button_default : radio_default);
|
||||
provide(radioGroupKey, reactive({
|
||||
...toRefs(props),
|
||||
changeEvent,
|
||||
name
|
||||
}));
|
||||
watch(() => props.modelValue, (newVal, oldValue) => {
|
||||
if (props.validateEvent && !isEqual(newVal, oldValue)) formItem?.validate("change").catch(NOOP);
|
||||
});
|
||||
return (_ctx, _cache) => {
|
||||
return openBlock(), createElementBlock("div", {
|
||||
id: unref(groupId),
|
||||
ref_key: "radioGroupRef",
|
||||
ref: radioGroupRef,
|
||||
class: normalizeClass(unref(ns).b("group")),
|
||||
role: "radiogroup",
|
||||
"aria-label": !unref(isLabeledByFormItem) ? __props.ariaLabel || "radio-group" : void 0,
|
||||
"aria-labelledby": unref(isLabeledByFormItem) ? unref(formItem).labelId : void 0
|
||||
}, [renderSlot(_ctx.$slots, "default", {}, () => [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (item, index) => {
|
||||
return openBlock(), createBlock(resolveDynamicComponent(optionComponent.value), mergeProps({ key: index }, { ref_for: true }, getOptionProps(item)), null, 16);
|
||||
}), 128))])], 10, _hoisted_1);
|
||||
};
|
||||
}
|
||||
});
|
||||
//#endregion
|
||||
export { radio_group_vue_vue_type_script_setup_true_lang_default as default };
|
||||
|
||||
//# sourceMappingURL=radio-group.vue_vue_type_script_setup_true_lang.mjs.map
|
||||
Generated
Vendored
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"radio-group.vue_vue_type_script_setup_true_lang.mjs","names":[],"sources":["../../../../../../packages/components/radio/src/radio-group.vue"],"sourcesContent":["<template>\n <div\n :id=\"groupId\"\n ref=\"radioGroupRef\"\n :class=\"ns.b('group')\"\n role=\"radiogroup\"\n :aria-label=\"!isLabeledByFormItem ? ariaLabel || 'radio-group' : undefined\"\n :aria-labelledby=\"isLabeledByFormItem ? formItem!.labelId : undefined\"\n >\n <slot>\n <component\n :is=\"optionComponent\"\n v-for=\"(item, index) in options\"\n :key=\"index\"\n v-bind=\"getOptionProps(item)\"\n />\n </slot>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n computed,\n nextTick,\n onMounted,\n provide,\n reactive,\n ref,\n toRefs,\n watch,\n} from 'vue'\nimport { useFormItem, useFormItemInputId } from '@element-plus/components/form'\nimport { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '@element-plus/constants'\nimport { useId, useNamespace } from '@element-plus/hooks'\nimport { NOOP } from '@element-plus/utils'\nimport {\n type RadioGroupProps,\n radioDefaultProps,\n radioGroupEmits,\n radioGroupPropsDefaults,\n} from './radio-group'\nimport { radioGroupKey } from './constants'\nimport { isEqual, omit } from 'lodash-unified'\nimport ElRadio from './radio.vue'\nimport ElRadioButton from './radio-button.vue'\n\ndefineOptions({\n name: 'ElRadioGroup',\n})\n\nconst props = withDefaults(\n defineProps<RadioGroupProps>(),\n radioGroupPropsDefaults\n)\nconst emit = defineEmits(radioGroupEmits)\n\nconst ns = useNamespace('radio')\nconst radioId = useId()\nconst radioGroupRef = ref<HTMLDivElement>()\nconst { formItem } = useFormItem()\nconst { inputId: groupId, isLabeledByFormItem } = useFormItemInputId(props, {\n formItemContext: formItem,\n})\n\nconst changeEvent = (value: RadioGroupProps['modelValue']) => {\n emit(UPDATE_MODEL_EVENT, value)\n nextTick(() => emit(CHANGE_EVENT, value))\n}\n\nonMounted(() => {\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\nconst name = computed(() => {\n return props.name || radioId.value\n})\n\nconst aliasProps = computed(() => ({\n ...radioDefaultProps,\n ...props.props,\n}))\nconst getOptionProps = (option: Record<string, any>) => {\n const { label, value, disabled } = aliasProps.value\n const base = {\n label: option[label],\n value: option[value],\n disabled: option[disabled],\n }\n return { ...omit(option, [label, value, disabled]), ...base }\n}\n\nconst optionComponent = computed(() =>\n props.type === 'button' ? ElRadioButton : ElRadio\n)\n\nprovide(\n radioGroupKey,\n reactive({\n ...toRefs(props),\n changeEvent,\n name,\n })\n)\n\nwatch(\n () => props.modelValue,\n (newVal, oldValue) => {\n if (props.validateEvent && !isEqual(newVal, oldValue)) {\n formItem?.validate('change').catch(NOOP)\n }\n }\n)\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EAkDA,MAAM,QAAQ;EAId,MAAM,OAAO;EAEb,MAAM,KAAK,aAAa,QAAO;EAC/B,MAAM,UAAU,OAAM;EACtB,MAAM,gBAAgB,KAAoB;EAC1C,MAAM,EAAE,aAAa,aAAY;EACjC,MAAM,EAAE,SAAS,SAAS,wBAAwB,mBAAmB,OAAO,EAC1E,iBAAiB,UAClB,CAAA;EAED,MAAM,eAAe,UAAyC;GAC5D,KAAK,oBAAoB,MAAK;GAC9B,eAAe,KAAK,cAAc,MAAM,CAAA;;EAG1C,gBAAgB;GACd,MAAM,SACJ,cAAc,MAAO,iBAAmC,eAAc;GACxE,MAAM,aAAa,OAAO;GAC1B,IAAI,CAAC,MAAM,KAAK,OAAO,CAAC,MAAM,UAAU,MAAM,QAAQ,IAAI,YACxD,WAAW,WAAW;IAEzB;EAED,MAAM,OAAO,eAAe;GAC1B,OAAO,MAAM,QAAQ,QAAQ;IAC9B;EAED,MAAM,aAAa,gBAAgB;GACjC,GAAG;GACH,GAAG,MAAM;GACV,EAAC;EACF,MAAM,kBAAkB,WAAgC;GACtD,MAAM,EAAE,OAAO,OAAO,aAAa,WAAW;GAC9C,MAAM,OAAO;IACX,OAAO,OAAO;IACd,OAAO,OAAO;IACd,UAAU,OAAO;IACnB;GACA,OAAO;IAAE,GAAG,KAAK,QAAQ;KAAC;KAAO;KAAO;KAAS,CAAC;IAAE,GAAG;IAAK;;EAG9D,MAAM,kBAAkB,eACtB,MAAM,SAAS,WAAW,uBAAgB,cAC5C;EAEA,QACE,eACA,SAAS;GACP,GAAG,OAAO,MAAM;GAChB;GACA;GACD,CAAA,CACH;EAEA,YACQ,MAAM,aACX,QAAQ,aAAa;GACpB,IAAI,MAAM,iBAAiB,CAAC,QAAQ,QAAQ,SAAS,EACnD,UAAU,SAAS,SAAS,CAAC,MAAM,KAAI;IAG7C;;uBAnHE,mBAgBM,OAAA;IAfH,IAAI,MAAA,QAAO;aACR;IAAJ,KAAI;IACH,OAAK,eAAE,MAAA,GAAE,CAAC,EAAC,QAAA,CAAA;IACZ,MAAK;IACJ,cAAU,CAAG,MAAA,oBAAmB,GAAG,QAAA,aAAS,gBAAoB,KAAA;IAChE,mBAAiB,MAAA,oBAAmB,GAAG,MAAA,SAAQ,CAAE,UAAU,KAAA;OAE5D,WAOO,KAAA,QAAA,WAAA,EAAA,QAAA,EAAA,UAAA,KAAA,EANL,mBAKE,UAAA,MAAA,WAHwB,QAAA,UAAhB,MAAM,UAAK;wBAFrB,YAKE,wBAJK,gBAAA,MAAe,EADtB,WAKE,EAFC,KAAK,OAAK,EAAA,EAAA,SAAA,MAAA,EACH,eAAe,KAAI,CAAA,EAAA,MAAA,GAAA"}
|
||||
+7
@@ -0,0 +1,7 @@
|
||||
import radio_group_vue_vue_type_script_setup_true_lang_default from "./radio-group.vue_vue_type_script_setup_true_lang.mjs";
|
||||
//#region ../../packages/components/radio/src/radio-group.vue
|
||||
var radio_group_default = radio_group_vue_vue_type_script_setup_true_lang_default;
|
||||
//#endregion
|
||||
export { radio_group_default as default };
|
||||
|
||||
//# sourceMappingURL=radio-group2.mjs.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"radio-group2.mjs","names":[],"sources":["../../../../../../packages/components/radio/src/radio-group.vue"],"sourcesContent":["<template>\n <div\n :id=\"groupId\"\n ref=\"radioGroupRef\"\n :class=\"ns.b('group')\"\n role=\"radiogroup\"\n :aria-label=\"!isLabeledByFormItem ? ariaLabel || 'radio-group' : undefined\"\n :aria-labelledby=\"isLabeledByFormItem ? formItem!.labelId : undefined\"\n >\n <slot>\n <component\n :is=\"optionComponent\"\n v-for=\"(item, index) in options\"\n :key=\"index\"\n v-bind=\"getOptionProps(item)\"\n />\n </slot>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n computed,\n nextTick,\n onMounted,\n provide,\n reactive,\n ref,\n toRefs,\n watch,\n} from 'vue'\nimport { useFormItem, useFormItemInputId } from '@element-plus/components/form'\nimport { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '@element-plus/constants'\nimport { useId, useNamespace } from '@element-plus/hooks'\nimport { NOOP } from '@element-plus/utils'\nimport {\n type RadioGroupProps,\n radioDefaultProps,\n radioGroupEmits,\n radioGroupPropsDefaults,\n} from './radio-group'\nimport { radioGroupKey } from './constants'\nimport { isEqual, omit } from 'lodash-unified'\nimport ElRadio from './radio.vue'\nimport ElRadioButton from './radio-button.vue'\n\ndefineOptions({\n name: 'ElRadioGroup',\n})\n\nconst props = withDefaults(\n defineProps<RadioGroupProps>(),\n radioGroupPropsDefaults\n)\nconst emit = defineEmits(radioGroupEmits)\n\nconst ns = useNamespace('radio')\nconst radioId = useId()\nconst radioGroupRef = ref<HTMLDivElement>()\nconst { formItem } = useFormItem()\nconst { inputId: groupId, isLabeledByFormItem } = useFormItemInputId(props, {\n formItemContext: formItem,\n})\n\nconst changeEvent = (value: RadioGroupProps['modelValue']) => {\n emit(UPDATE_MODEL_EVENT, value)\n nextTick(() => emit(CHANGE_EVENT, value))\n}\n\nonMounted(() => {\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\nconst name = computed(() => {\n return props.name || radioId.value\n})\n\nconst aliasProps = computed(() => ({\n ...radioDefaultProps,\n ...props.props,\n}))\nconst getOptionProps = (option: Record<string, any>) => {\n const { label, value, disabled } = aliasProps.value\n const base = {\n label: option[label],\n value: option[value],\n disabled: option[disabled],\n }\n return { ...omit(option, [label, value, disabled]), ...base }\n}\n\nconst optionComponent = computed(() =>\n props.type === 'button' ? ElRadioButton : ElRadio\n)\n\nprovide(\n radioGroupKey,\n reactive({\n ...toRefs(props),\n changeEvent,\n name,\n })\n)\n\nwatch(\n () => props.modelValue,\n (newVal, oldValue) => {\n if (props.validateEvent && !isEqual(newVal, oldValue)) {\n formItem?.validate('change').catch(NOOP)\n }\n }\n)\n</script>\n"],"mappings":""}
|
||||
+95
@@ -0,0 +1,95 @@
|
||||
import { EpPropFinalized, EpPropMergeType } from "../../../utils/vue/props/types.js";
|
||||
import { ComponentSize } from "../../../constants/size.js";
|
||||
import _default from "./radio.vue.js";
|
||||
import * as _$vue from "vue";
|
||||
import { ExtractPublicPropTypes } from "vue";
|
||||
|
||||
//#region ../../packages/components/radio/src/radio.d.ts
|
||||
interface RadioPropsBase {
|
||||
/**
|
||||
* @description binding value
|
||||
*/
|
||||
modelValue?: string | number | boolean;
|
||||
/**
|
||||
* @description size of the Radio
|
||||
*/
|
||||
size?: ComponentSize;
|
||||
/**
|
||||
* @description whether Radio is disabled
|
||||
*/
|
||||
disabled?: boolean;
|
||||
/**
|
||||
* @description the label of Radio
|
||||
*/
|
||||
label?: string | number | boolean;
|
||||
/**
|
||||
* @description the value of Radio
|
||||
*/
|
||||
value?: string | number | boolean;
|
||||
/**
|
||||
* @description native `name` attribute
|
||||
*/
|
||||
name?: string;
|
||||
}
|
||||
interface RadioProps extends RadioPropsBase {
|
||||
/**
|
||||
* @description whether to add a border around Radio
|
||||
*/
|
||||
border?: boolean;
|
||||
}
|
||||
/**
|
||||
* @deprecated Removed after 3.0.0, Use `RadioPropsBase` instead.
|
||||
*/
|
||||
declare const radioPropsBase: {
|
||||
modelValue: EpPropFinalized<(StringConstructor | NumberConstructor | BooleanConstructor)[], unknown, unknown, undefined, boolean>;
|
||||
size: {
|
||||
readonly type: _$vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
disabled: EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
|
||||
label: EpPropFinalized<(StringConstructor | NumberConstructor | BooleanConstructor)[], unknown, unknown, undefined, boolean>;
|
||||
value: EpPropFinalized<(StringConstructor | NumberConstructor | BooleanConstructor)[], unknown, unknown, undefined, boolean>;
|
||||
name: EpPropFinalized<StringConstructor, unknown, unknown, undefined, boolean>;
|
||||
};
|
||||
/**
|
||||
* @deprecated Removed after 3.0.0, Use `RadioProps` instead.
|
||||
*/
|
||||
declare const radioProps: {
|
||||
readonly border: BooleanConstructor;
|
||||
readonly modelValue: EpPropFinalized<(StringConstructor | NumberConstructor | BooleanConstructor)[], unknown, unknown, undefined, boolean>;
|
||||
readonly size: {
|
||||
readonly type: _$vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
|
||||
readonly required: false;
|
||||
readonly validator: ((val: unknown) => boolean) | undefined;
|
||||
__epPropKey: true;
|
||||
};
|
||||
readonly disabled: EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
|
||||
readonly label: EpPropFinalized<(StringConstructor | NumberConstructor | BooleanConstructor)[], unknown, unknown, undefined, boolean>;
|
||||
readonly value: EpPropFinalized<(StringConstructor | NumberConstructor | BooleanConstructor)[], unknown, unknown, undefined, boolean>;
|
||||
readonly name: EpPropFinalized<StringConstructor, unknown, unknown, undefined, boolean>;
|
||||
};
|
||||
declare const radioEmits: {
|
||||
"update:modelValue": (val: string | number | boolean | undefined) => val is string | number | boolean;
|
||||
change: (val: string | number | boolean | undefined) => val is string | number | boolean;
|
||||
};
|
||||
/**
|
||||
* @deprecated Removed after 3.0.0, Use `RadioProps` instead.
|
||||
*/
|
||||
type RadioPropsPublic = ExtractPublicPropTypes<typeof radioProps>;
|
||||
type RadioEmits = typeof radioEmits;
|
||||
type RadioInstance = InstanceType<typeof _default> & unknown;
|
||||
/**
|
||||
* @description default values for RadioProps
|
||||
*/
|
||||
declare const radioPropsDefaults: {
|
||||
readonly modelValue: undefined;
|
||||
readonly disabled: undefined;
|
||||
readonly label: undefined;
|
||||
readonly value: undefined;
|
||||
readonly name: undefined;
|
||||
readonly border: false;
|
||||
};
|
||||
//#endregion
|
||||
export { RadioEmits, RadioInstance, RadioProps, RadioPropsBase, RadioPropsPublic, radioEmits, radioProps, radioPropsBase, radioPropsDefaults };
|
||||
+90
@@ -0,0 +1,90 @@
|
||||
import { CHANGE_EVENT, UPDATE_MODEL_EVENT } from "../../../constants/event.mjs";
|
||||
import { isBoolean, isNumber, isString } from "../../../utils/types.mjs";
|
||||
import { buildProps } from "../../../utils/vue/props/runtime.mjs";
|
||||
import { useSizeProp } from "../../../hooks/use-size/index.mjs";
|
||||
//#region ../../packages/components/radio/src/radio.ts
|
||||
/**
|
||||
* @deprecated Removed after 3.0.0, Use `RadioPropsBase` instead.
|
||||
*/
|
||||
const radioPropsBase = buildProps({
|
||||
/**
|
||||
* @description binding value
|
||||
*/
|
||||
modelValue: {
|
||||
type: [
|
||||
String,
|
||||
Number,
|
||||
Boolean
|
||||
],
|
||||
default: void 0
|
||||
},
|
||||
/**
|
||||
* @description size of the Radio
|
||||
*/
|
||||
size: useSizeProp,
|
||||
/**
|
||||
* @description whether Radio is disabled
|
||||
*/
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: void 0
|
||||
},
|
||||
/**
|
||||
* @description the label of Radio
|
||||
*/
|
||||
label: {
|
||||
type: [
|
||||
String,
|
||||
Number,
|
||||
Boolean
|
||||
],
|
||||
default: void 0
|
||||
},
|
||||
/**
|
||||
* @description the value of Radio
|
||||
*/
|
||||
value: {
|
||||
type: [
|
||||
String,
|
||||
Number,
|
||||
Boolean
|
||||
],
|
||||
default: void 0
|
||||
},
|
||||
/**
|
||||
* @description native `name` attribute
|
||||
*/
|
||||
name: {
|
||||
type: String,
|
||||
default: void 0
|
||||
}
|
||||
});
|
||||
/**
|
||||
* @deprecated Removed after 3.0.0, Use `RadioProps` instead.
|
||||
*/
|
||||
const radioProps = buildProps({
|
||||
...radioPropsBase,
|
||||
/**
|
||||
* @description whether to add a border around Radio
|
||||
*/
|
||||
border: Boolean
|
||||
});
|
||||
const radioEmits = {
|
||||
[UPDATE_MODEL_EVENT]: (val) => isString(val) || isNumber(val) || isBoolean(val),
|
||||
[CHANGE_EVENT]: (val) => isString(val) || isNumber(val) || isBoolean(val)
|
||||
};
|
||||
/**
|
||||
* @description default values for RadioProps
|
||||
*/
|
||||
const radioPropsDefaults = {
|
||||
modelValue: void 0,
|
||||
disabled: void 0,
|
||||
label: void 0,
|
||||
value: void 0,
|
||||
name: void 0,
|
||||
border: false
|
||||
};
|
||||
//#endregion
|
||||
export { radioEmits, radioProps, radioPropsBase, radioPropsDefaults };
|
||||
|
||||
//# sourceMappingURL=radio.mjs.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"radio.mjs","names":[],"sources":["../../../../../../packages/components/radio/src/radio.ts"],"sourcesContent":["import { buildProps, isBoolean, isNumber, isString } from '@element-plus/utils'\nimport { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '@element-plus/constants'\nimport { useSizeProp } from '@element-plus/hooks'\n\nimport type { ExtractPublicPropTypes } from 'vue'\nimport type { ComponentSize } from '@element-plus/constants'\nimport type Radio from './radio.vue'\n\nexport interface RadioPropsBase {\n /**\n * @description binding value\n */\n modelValue?: string | number | boolean\n /**\n * @description size of the Radio\n */\n size?: ComponentSize\n /**\n * @description whether Radio is disabled\n */\n disabled?: boolean\n /**\n * @description the label of Radio\n */\n label?: string | number | boolean\n /**\n * @description the value of Radio\n */\n value?: string | number | boolean\n /**\n * @description native `name` attribute\n */\n name?: string\n}\n\nexport interface RadioProps extends RadioPropsBase {\n /**\n * @description whether to add a border around Radio\n */\n border?: boolean\n}\n\n/**\n * @deprecated Removed after 3.0.0, Use `RadioPropsBase` instead.\n */\nexport const radioPropsBase = buildProps({\n /**\n * @description binding value\n */\n modelValue: {\n type: [String, Number, Boolean],\n default: undefined,\n },\n /**\n * @description size of the Radio\n */\n size: useSizeProp,\n /**\n * @description whether Radio is disabled\n */\n disabled: {\n type: Boolean,\n default: undefined,\n },\n /**\n * @description the label of Radio\n */\n label: {\n type: [String, Number, Boolean],\n default: undefined,\n },\n /**\n * @description the value of Radio\n */\n value: {\n type: [String, Number, Boolean],\n default: undefined,\n },\n /**\n * @description native `name` attribute\n */\n name: {\n type: String,\n default: undefined,\n },\n})\n\n/**\n * @deprecated Removed after 3.0.0, Use `RadioProps` instead.\n */\nexport const radioProps = buildProps({\n ...radioPropsBase,\n /**\n * @description whether to add a border around Radio\n */\n border: Boolean,\n} as const)\n\nexport const radioEmits = {\n [UPDATE_MODEL_EVENT]: (val: string | number | boolean | undefined) =>\n isString(val) || isNumber(val) || isBoolean(val),\n [CHANGE_EVENT]: (val: string | number | boolean | undefined) =>\n isString(val) || isNumber(val) || isBoolean(val),\n}\n\n/**\n * @deprecated Removed after 3.0.0, Use `RadioProps` instead.\n */\nexport type RadioPropsPublic = ExtractPublicPropTypes<typeof radioProps>\nexport type RadioEmits = typeof radioEmits\nexport type RadioInstance = InstanceType<typeof Radio> & unknown\n\n/**\n * @description default values for RadioProps\n */\nexport const radioPropsDefaults = {\n modelValue: undefined,\n disabled: undefined,\n label: undefined,\n value: undefined,\n name: undefined,\n border: false,\n} as const\n"],"mappings":";;;;;;;;AA6CA,MAAa,iBAAiB,WAAW;;;;CAIvC,YAAY;EACV,MAAM;GAAC;GAAQ;GAAQ;GAAQ;EAC/B,SAAS,KAAA;EACV;;;;CAID,MAAM;;;;CAIN,UAAU;EACR,MAAM;EACN,SAAS,KAAA;EACV;;;;CAID,OAAO;EACL,MAAM;GAAC;GAAQ;GAAQ;GAAQ;EAC/B,SAAS,KAAA;EACV;;;;CAID,OAAO;EACL,MAAM;GAAC;GAAQ;GAAQ;GAAQ;EAC/B,SAAS,KAAA;EACV;;;;CAID,MAAM;EACJ,MAAM;EACN,SAAS,KAAA;EACV;CACF,CAAC;;;;AAKF,MAAa,aAAa,WAAW;CACnC,GAAG;;;;CAIH,QAAQ;CACT,CAAU;AAEX,MAAa,aAAa;EACvB,sBAAsB,QACrB,SAAS,IAAI,IAAI,SAAS,IAAI,IAAI,UAAU,IAAI;EACjD,gBAAgB,QACf,SAAS,IAAI,IAAI,SAAS,IAAI,IAAI,UAAU,IAAI;CACnD;;;;AAYD,MAAa,qBAAqB;CAChC,YAAY,KAAA;CACZ,UAAU,KAAA;CACV,OAAO,KAAA;CACP,OAAO,KAAA;CACP,MAAM,KAAA;CACN,QAAQ;CACT"}
|
||||
+31
@@ -0,0 +1,31 @@
|
||||
import { RadioProps } from "./radio.js";
|
||||
import * as _$vue from "vue";
|
||||
|
||||
//#region ../../packages/components/radio/src/radio.vue.d.ts
|
||||
declare var __VLS_1: {};
|
||||
type __VLS_Slots = {} & {
|
||||
default?: (props: typeof __VLS_1) => any;
|
||||
};
|
||||
declare const __VLS_base: _$vue.DefineComponent<RadioProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
|
||||
"update:modelValue": (val: string | number | boolean | undefined) => void;
|
||||
change: (val: string | number | boolean | undefined) => void;
|
||||
}, string, _$vue.PublicProps, Readonly<RadioProps> & Readonly<{
|
||||
onChange?: ((val: string | number | boolean | undefined) => any) | undefined;
|
||||
"onUpdate:modelValue"?: ((val: string | number | boolean | undefined) => any) | undefined;
|
||||
}>, {
|
||||
value: string | number | boolean;
|
||||
label: string | number | boolean;
|
||||
disabled: boolean;
|
||||
name: string;
|
||||
modelValue: string | number | boolean;
|
||||
border: boolean;
|
||||
}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
|
||||
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
||||
declare const _default: typeof __VLS_export;
|
||||
type __VLS_WithSlots<T, S> = T & {
|
||||
new (): {
|
||||
$slots: S;
|
||||
};
|
||||
};
|
||||
//#endregion
|
||||
export { _default as default };
|
||||
Generated
Vendored
+62
@@ -0,0 +1,62 @@
|
||||
import { CHANGE_EVENT } from "../../../constants/event.mjs";
|
||||
import { useNamespace } from "../../../hooks/use-namespace/index.mjs";
|
||||
import { radioEmits, radioProps } from "./radio.mjs";
|
||||
import { useRadio } from "./use-radio.mjs";
|
||||
import { createElementBlock, createElementVNode, createTextVNode, defineComponent, isRef, nextTick, normalizeClass, openBlock, renderSlot, toDisplayString, unref, vModelRadio, withDirectives, withModifiers } from "vue";
|
||||
//#region ../../packages/components/radio/src/radio.vue?vue&type=script&setup=true&lang.ts
|
||||
const _hoisted_1 = [
|
||||
"value",
|
||||
"name",
|
||||
"disabled",
|
||||
"checked"
|
||||
];
|
||||
var radio_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
|
||||
name: "ElRadio",
|
||||
__name: "radio",
|
||||
props: radioProps,
|
||||
emits: radioEmits,
|
||||
setup(__props, { emit: __emit }) {
|
||||
const props = __props;
|
||||
const emit = __emit;
|
||||
const ns = useNamespace("radio");
|
||||
const { radioRef, radioGroup, focus, size, disabled, modelValue, actualValue } = useRadio(props, emit);
|
||||
function handleChange() {
|
||||
nextTick(() => emit(CHANGE_EVENT, modelValue.value));
|
||||
}
|
||||
return (_ctx, _cache) => {
|
||||
return openBlock(), createElementBlock("label", { class: normalizeClass([
|
||||
unref(ns).b(),
|
||||
unref(ns).is("disabled", unref(disabled)),
|
||||
unref(ns).is("focus", unref(focus)),
|
||||
unref(ns).is("bordered", __props.border),
|
||||
unref(ns).is("checked", unref(modelValue) === unref(actualValue)),
|
||||
unref(ns).m(unref(size))
|
||||
]) }, [createElementVNode("span", { class: normalizeClass([
|
||||
unref(ns).e("input"),
|
||||
unref(ns).is("disabled", unref(disabled)),
|
||||
unref(ns).is("checked", unref(modelValue) === unref(actualValue))
|
||||
]) }, [withDirectives(createElementVNode("input", {
|
||||
ref_key: "radioRef",
|
||||
ref: radioRef,
|
||||
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(modelValue) ? modelValue.value = $event : null),
|
||||
class: normalizeClass(unref(ns).e("original")),
|
||||
value: unref(actualValue),
|
||||
name: __props.name || unref(radioGroup)?.name,
|
||||
disabled: unref(disabled),
|
||||
checked: unref(modelValue) === unref(actualValue),
|
||||
type: "radio",
|
||||
onFocus: _cache[1] || (_cache[1] = ($event) => focus.value = true),
|
||||
onBlur: _cache[2] || (_cache[2] = ($event) => focus.value = false),
|
||||
onChange: handleChange,
|
||||
onClick: _cache[3] || (_cache[3] = withModifiers(() => {}, ["stop"]))
|
||||
}, null, 42, _hoisted_1), [[vModelRadio, unref(modelValue)]]), createElementVNode("span", { class: normalizeClass(unref(ns).e("inner")) }, null, 2)], 2), createElementVNode("span", {
|
||||
class: normalizeClass(unref(ns).e("label")),
|
||||
onKeydown: _cache[4] || (_cache[4] = withModifiers(() => {}, ["stop"]))
|
||||
}, [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(__props.label), 1)])], 34)], 2);
|
||||
};
|
||||
}
|
||||
});
|
||||
//#endregion
|
||||
export { radio_vue_vue_type_script_setup_true_lang_default as default };
|
||||
|
||||
//# sourceMappingURL=radio.vue_vue_type_script_setup_true_lang.mjs.map
|
||||
Generated
Vendored
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"radio.vue_vue_type_script_setup_true_lang.mjs","names":[],"sources":["../../../../../../packages/components/radio/src/radio.vue"],"sourcesContent":["<template>\n <label\n :class=\"[\n ns.b(),\n ns.is('disabled', disabled),\n ns.is('focus', focus),\n ns.is('bordered', border),\n ns.is('checked', modelValue === actualValue),\n ns.m(size),\n ]\"\n >\n <span\n :class=\"[\n ns.e('input'),\n ns.is('disabled', disabled),\n ns.is('checked', modelValue === actualValue),\n ]\"\n >\n <input\n ref=\"radioRef\"\n v-model=\"modelValue\"\n :class=\"ns.e('original')\"\n :value=\"actualValue\"\n :name=\"name || radioGroup?.name\"\n :disabled=\"disabled\"\n :checked=\"modelValue === actualValue\"\n type=\"radio\"\n @focus=\"focus = true\"\n @blur=\"focus = false\"\n @change=\"handleChange\"\n @click.stop\n />\n <span :class=\"ns.e('inner')\" />\n </span>\n <span :class=\"ns.e('label')\" @keydown.stop>\n <slot>\n {{ label }}\n </slot>\n </span>\n </label>\n</template>\n\n<script lang=\"ts\" setup>\nimport { nextTick } from 'vue'\nimport { useNamespace } from '@element-plus/hooks'\nimport { CHANGE_EVENT } from '@element-plus/constants'\nimport { type RadioProps, radioEmits, radioPropsDefaults } from './radio'\nimport { useRadio } from './use-radio'\n\ndefineOptions({\n name: 'ElRadio',\n})\n\nconst props = withDefaults(defineProps<RadioProps>(), radioPropsDefaults)\nconst emit = defineEmits(radioEmits)\n\nconst ns = useNamespace('radio')\nconst { radioRef, radioGroup, focus, size, disabled, modelValue, actualValue } =\n useRadio(props, emit)\n\nfunction handleChange() {\n nextTick(() => emit(CHANGE_EVENT, modelValue.value))\n}\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAqDA,MAAM,QAAQ;EACd,MAAM,OAAO;EAEb,MAAM,KAAK,aAAa,QAAO;EAC/B,MAAM,EAAE,UAAU,YAAY,OAAO,MAAM,UAAU,YAAY,gBAC/D,SAAS,OAAO,KAAI;EAEtB,SAAS,eAAe;GACtB,eAAe,KAAK,cAAc,WAAW,MAAM,CAAA;;;uBA5DnD,mBAsCQ,SAAA,EArCL,OAAK,eAAA;IAAU,MAAA,GAAE,CAAC,GAAC;IAAU,MAAA,GAAE,CAAC,GAAE,YAAa,MAAA,SAAQ,CAAA;IAAS,MAAA,GAAE,CAAC,GAAE,SAAU,MAAA,MAAK,CAAA;IAAS,MAAA,GAAE,CAAC,GAAE,YAAa,QAAA,OAAM;IAAS,MAAA,GAAE,CAAC,GAAE,WAAY,MAAA,WAAU,KAAK,MAAA,YAAW,CAAA;IAAS,MAAA,GAAE,CAAC,EAAE,MAAA,KAAI,CAAA;UAS5L,mBAsBO,QAAA,EArBJ,OAAK,eAAA;IAAY,MAAA,GAAE,CAAC,EAAC,QAAA;IAAmB,MAAA,GAAE,CAAC,GAAE,YAAa,MAAA,SAAQ,CAAA;IAAW,MAAA,GAAE,CAAC,GAAE,WAAY,MAAA,WAAU,KAAK,MAAA,YAAW,CAAA;yBAMzH,mBAaE,SAAA;aAZI;IAAJ,KAAI;qFACK,WAAU,QAAA,SAAA;IAClB,OAAK,eAAE,MAAA,GAAE,CAAC,EAAC,WAAA,CAAA;IACX,OAAO,MAAA,YAAW;IAClB,MAAM,QAAA,QAAQ,MAAA,WAAU,EAAE;IAC1B,UAAU,MAAA,SAAQ;IAClB,SAAS,MAAA,WAAU,KAAK,MAAA,YAAW;IACpC,MAAK;IACJ,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,QAAK;IACZ,QAAI,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,QAAK;IACX,UAAQ;IACR,SAAK,OAAA,OAAA,OAAA,KAAA,oBAAN,IAAW,CAAA,OAAA,CAAA;4CAVF,MAAA,WAAU,CAAA,CAAA,CAAA,EAYrB,mBAA+B,QAAA,EAAxB,OAAK,eAAE,MAAA,GAAE,CAAC,EAAC,QAAA,CAAA,EAAA,EAAA,MAAA,EAAA,CAAA,EAAA,EAAA,EAEpB,mBAIO,QAAA;IAJA,OAAK,eAAE,MAAA,GAAE,CAAC,EAAC,QAAA,CAAA;IAAY,WAAO,OAAA,OAAA,OAAA,KAAA,oBAAR,IAAa,CAAA,OAAA,CAAA;OACxC,WAEO,KAAA,QAAA,WAAA,EAAA,QAAA,CAAA,gBAAA,gBADF,QAAA,MAAK,EAAA,EAAA,CAAA,CAAA,CAAA,EAAA,GAAA,CAAA,EAAA,EAAA"}
|
||||
+7
@@ -0,0 +1,7 @@
|
||||
import radio_vue_vue_type_script_setup_true_lang_default from "./radio.vue_vue_type_script_setup_true_lang.mjs";
|
||||
//#region ../../packages/components/radio/src/radio.vue
|
||||
var radio_default = radio_vue_vue_type_script_setup_true_lang_default;
|
||||
//#endregion
|
||||
export { radio_default as default };
|
||||
|
||||
//# sourceMappingURL=radio2.mjs.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"radio2.mjs","names":[],"sources":["../../../../../../packages/components/radio/src/radio.vue"],"sourcesContent":["<template>\n <label\n :class=\"[\n ns.b(),\n ns.is('disabled', disabled),\n ns.is('focus', focus),\n ns.is('bordered', border),\n ns.is('checked', modelValue === actualValue),\n ns.m(size),\n ]\"\n >\n <span\n :class=\"[\n ns.e('input'),\n ns.is('disabled', disabled),\n ns.is('checked', modelValue === actualValue),\n ]\"\n >\n <input\n ref=\"radioRef\"\n v-model=\"modelValue\"\n :class=\"ns.e('original')\"\n :value=\"actualValue\"\n :name=\"name || radioGroup?.name\"\n :disabled=\"disabled\"\n :checked=\"modelValue === actualValue\"\n type=\"radio\"\n @focus=\"focus = true\"\n @blur=\"focus = false\"\n @change=\"handleChange\"\n @click.stop\n />\n <span :class=\"ns.e('inner')\" />\n </span>\n <span :class=\"ns.e('label')\" @keydown.stop>\n <slot>\n {{ label }}\n </slot>\n </span>\n </label>\n</template>\n\n<script lang=\"ts\" setup>\nimport { nextTick } from 'vue'\nimport { useNamespace } from '@element-plus/hooks'\nimport { CHANGE_EVENT } from '@element-plus/constants'\nimport { type RadioProps, radioEmits, radioPropsDefaults } from './radio'\nimport { useRadio } from './use-radio'\n\ndefineOptions({\n name: 'ElRadio',\n})\n\nconst props = withDefaults(defineProps<RadioProps>(), radioPropsDefaults)\nconst emit = defineEmits(radioEmits)\n\nconst ns = useNamespace('radio')\nconst { radioRef, radioGroup, focus, size, disabled, modelValue, actualValue } =\n useRadio(props, emit)\n\nfunction handleChange() {\n nextTick(() => emit(CHANGE_EVENT, modelValue.value))\n}\n</script>\n"],"mappings":""}
|
||||
+20
@@ -0,0 +1,20 @@
|
||||
import { RadioEmits, RadioProps } from "./radio.js";
|
||||
import { RadioButtonProps } from "./radio-button.js";
|
||||
import { RadioGroupContext } from "./constants.js";
|
||||
import * as _$vue from "vue";
|
||||
import { SetupContext } from "vue";
|
||||
|
||||
//#region ../../packages/components/radio/src/use-radio.d.ts
|
||||
declare const useRadio: (props: RadioProps | RadioButtonProps, emit?: SetupContext<RadioEmits>["emit"]) => {
|
||||
radioRef: _$vue.Ref<HTMLInputElement | undefined, HTMLInputElement | undefined>;
|
||||
isGroup: _$vue.ComputedRef<boolean>;
|
||||
radioGroup: RadioGroupContext | undefined;
|
||||
focus: _$vue.Ref<boolean, boolean>;
|
||||
size: _$vue.ComputedRef<"" | "default" | "small" | "large">;
|
||||
disabled: _$vue.ComputedRef<boolean>;
|
||||
tabIndex: _$vue.ComputedRef<0 | -1>;
|
||||
modelValue: _$vue.WritableComputedRef<string | number | boolean | undefined, string | number | boolean | undefined>;
|
||||
actualValue: _$vue.ComputedRef<string | number | boolean | undefined>;
|
||||
};
|
||||
//#endregion
|
||||
export { useRadio };
|
||||
+54
@@ -0,0 +1,54 @@
|
||||
import "../../../constants/event.mjs";
|
||||
import { isPropAbsent } from "../../../utils/types.mjs";
|
||||
import { useDeprecated } from "../../../hooks/use-deprecated/index.mjs";
|
||||
import { useFormDisabled, useFormSize } from "../../form/src/hooks/use-form-common-props.mjs";
|
||||
import { radioGroupKey } from "./constants.mjs";
|
||||
import { computed, inject, ref } from "vue";
|
||||
//#region ../../packages/components/radio/src/use-radio.ts
|
||||
const useRadio = (props, emit) => {
|
||||
const radioRef = ref();
|
||||
const radioGroup = inject(radioGroupKey, void 0);
|
||||
const isGroup = computed(() => !!radioGroup);
|
||||
const actualValue = computed(() => {
|
||||
if (!isPropAbsent(props.value)) return props.value;
|
||||
return props.label;
|
||||
});
|
||||
const modelValue = computed({
|
||||
get() {
|
||||
return isGroup.value ? radioGroup.modelValue : props.modelValue;
|
||||
},
|
||||
set(val) {
|
||||
if (isGroup.value) radioGroup.changeEvent(val);
|
||||
else emit && emit("update:modelValue", val);
|
||||
radioRef.value.checked = props.modelValue === actualValue.value;
|
||||
}
|
||||
});
|
||||
const size = useFormSize(computed(() => radioGroup?.size));
|
||||
const disabled = useFormDisabled(computed(() => radioGroup?.disabled));
|
||||
const focus = ref(false);
|
||||
const tabIndex = computed(() => {
|
||||
return disabled.value || isGroup.value && modelValue.value !== actualValue.value ? -1 : 0;
|
||||
});
|
||||
useDeprecated({
|
||||
from: "label act as value",
|
||||
replacement: "value",
|
||||
version: "3.0.0",
|
||||
scope: "el-radio",
|
||||
ref: "https://element-plus.org/en-US/component/radio.html"
|
||||
}, computed(() => isGroup.value && isPropAbsent(props.value)));
|
||||
return {
|
||||
radioRef,
|
||||
isGroup,
|
||||
radioGroup,
|
||||
focus,
|
||||
size,
|
||||
disabled,
|
||||
tabIndex,
|
||||
modelValue,
|
||||
actualValue
|
||||
};
|
||||
};
|
||||
//#endregion
|
||||
export { useRadio };
|
||||
|
||||
//# sourceMappingURL=use-radio.mjs.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"use-radio.mjs","names":[],"sources":["../../../../../../packages/components/radio/src/use-radio.ts"],"sourcesContent":["import { computed, inject, ref } from 'vue'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/constants'\nimport { useFormDisabled, useFormSize } from '@element-plus/components/form'\nimport { useDeprecated } from '@element-plus/hooks'\nimport { isPropAbsent } from '@element-plus/utils'\nimport { radioGroupKey } from './constants'\n\nimport type { RadioButtonProps } from './radio-button'\nimport type { SetupContext } from 'vue'\nimport type { RadioEmits, RadioProps } from './radio'\n\nexport const useRadio = (\n props: RadioProps | RadioButtonProps,\n emit?: SetupContext<RadioEmits>['emit']\n) => {\n const radioRef = ref<HTMLInputElement>()\n const radioGroup = inject(radioGroupKey, undefined)\n const isGroup = computed(() => !!radioGroup)\n const actualValue = computed(() => {\n // In version 2.x, if there's no props.value, props.label will act as props.value\n // In version 3.x, remove this computed value, use props.value instead.\n if (!isPropAbsent(props.value)) {\n return props.value\n }\n return props.label\n })\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 && emit(UPDATE_MODEL_EVENT, val)\n }\n radioRef.value!.checked = props.modelValue === actualValue.value\n },\n })\n\n const size = useFormSize(computed(() => radioGroup?.size))\n const disabled = useFormDisabled(computed(() => radioGroup?.disabled))\n const focus = ref(false)\n const tabIndex = computed(() => {\n return disabled.value ||\n (isGroup.value && modelValue.value !== actualValue.value)\n ? -1\n : 0\n })\n\n useDeprecated(\n {\n from: 'label act as value',\n replacement: 'value',\n version: '3.0.0',\n scope: 'el-radio',\n ref: 'https://element-plus.org/en-US/component/radio.html',\n },\n computed(() => isGroup.value && isPropAbsent(props.value))\n )\n\n return {\n radioRef,\n isGroup,\n radioGroup,\n focus,\n size,\n disabled,\n tabIndex,\n modelValue,\n actualValue,\n }\n}\n"],"mappings":";;;;;;;AAWA,MAAa,YACX,OACA,SACG;CACH,MAAM,WAAW,KAAuB;CACxC,MAAM,aAAa,OAAO,eAAe,KAAA,EAAU;CACnD,MAAM,UAAU,eAAe,CAAC,CAAC,WAAW;CAC5C,MAAM,cAAc,eAAe;EAGjC,IAAI,CAAC,aAAa,MAAM,MAAM,EAC5B,OAAO,MAAM;EAEf,OAAO,MAAM;GACb;CACF,MAAM,aAAa,SAAmC;EACpD,MAAM;GACJ,OAAO,QAAQ,QAAQ,WAAY,aAAa,MAAM;;EAExD,IAAI,KAAK;GACP,IAAI,QAAQ,OACV,WAAY,YAAY,IAAI;QAE5B,QAAQ,KAAA,qBAAyB,IAAI;GAEvC,SAAS,MAAO,UAAU,MAAM,eAAe,YAAY;;EAE9D,CAAC;CAEF,MAAM,OAAO,YAAY,eAAe,YAAY,KAAK,CAAC;CAC1D,MAAM,WAAW,gBAAgB,eAAe,YAAY,SAAS,CAAC;CACtE,MAAM,QAAQ,IAAI,MAAM;CACxB,MAAM,WAAW,eAAe;EAC9B,OAAO,SAAS,SACb,QAAQ,SAAS,WAAW,UAAU,YAAY,QACjD,KACA;GACJ;CAEF,cACE;EACE,MAAM;EACN,aAAa;EACb,SAAS;EACT,OAAO;EACP,KAAK;EACN,EACD,eAAe,QAAQ,SAAS,aAAa,MAAM,MAAM,CAAC,CAC3D;CAED,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD"}
|
||||
Reference in New Issue
Block a user