@uzum-tech/ui 0.1.0 → 0.1.2

package/lib/radio/src/RadioGroup.js

@@ -0,0 +1,174 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.radioGroupProps = void 0;
+const vue_1 = require("vue");
+const vooks_1 = require("vooks");
+const _mixins_1 = require("../../_mixins");
+const _utils_1 = require("../../_utils");
+const styles_1 = require("../styles");
+const use_radio_1 = require("./use-radio");
+const radio_group_cssr_1 = __importDefault(require("./styles/radio-group.cssr"));
+const use_rtl_1 = require("../../_mixins/use-rtl");
+function mapSlot(defaultSlot, value, clsPrefix) {
+    var _a;
+    const children = [];
+    let isButtonGroup = false;
+    for (let i = 0; i < defaultSlot.length; ++i) {
+        const wrappedInstance = defaultSlot[i];
+        const name = (_a = wrappedInstance.type) === null || _a === void 0 ? void 0 : _a.name;
+        if (name === 'RadioButton') {
+            isButtonGroup = true;
+        }
+        if (process.env.NODE_ENV !== 'production' && isButtonGroup && name !== 'RadioButton') {
+            (0, _utils_1.warn)('radio-group', '`u-radio-group` in button mode only takes `u-radio-button` as children.');
+            continue;
+        }
+        const instanceProps = wrappedInstance.props;
+        if (name !== 'RadioButton') {
+            children.push(wrappedInstance);
+            continue;
+        }
+        if (i === 0) {
+            children.push(wrappedInstance);
+        }
+        else {
+            const lastInstanceProps = children[children.length - 1]
+                .props;
+            const lastInstanceChecked = value === lastInstanceProps.value;
+            const lastInstanceDisabled = lastInstanceProps.disabled;
+            const currentInstanceChecked = value === instanceProps.value;
+            const currentInstanceDisabled = instanceProps.disabled;
+            /**
+             * Priority of button splitor:
+             * !disabled  checked >
+             *  disabled  checked >
+             * !disabled !checked >
+             *  disabled !checked
+             */
+            const lastInstancePriority = (lastInstanceChecked ? 2 : 0) + (!lastInstanceDisabled ? 1 : 0);
+            const currentInstancePriority = (currentInstanceChecked ? 2 : 0) + (!currentInstanceDisabled ? 1 : 0);
+            const lastInstanceClass = {
+                [`${clsPrefix}-radio-group__splitor--disabled`]: lastInstanceDisabled,
+                [`${clsPrefix}-radio-group__splitor--checked`]: lastInstanceChecked
+            };
+            const currentInstanceClass = {
+                [`${clsPrefix}-radio-group__splitor--disabled`]: currentInstanceDisabled,
+                [`${clsPrefix}-radio-group__splitor--checked`]: currentInstanceChecked
+            };
+            const splitorClass = lastInstancePriority < currentInstancePriority
+                ? currentInstanceClass
+                : lastInstanceClass;
+            children.push((0, vue_1.h)("div", { class: [`${clsPrefix}-radio-group__splitor`, splitorClass] }), wrappedInstance);
+        }
+    }
+    return {
+        children,
+        isButtonGroup
+    };
+}
+exports.radioGroupProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { name: String, value: [String, Number, Boolean], defaultValue: {
+        type: [String, Number, Boolean],
+        default: null
+    }, size: String, disabled: {
+        type: Boolean,
+        default: undefined
+    }, 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array] });
+exports.default = (0, vue_1.defineComponent)({
+    name: 'RadioGroup',
+    props: exports.radioGroupProps,
+    setup(props) {
+        const selfElRef = (0, vue_1.ref)(null);
+        const { mergedSizeRef, mergedDisabledRef, nTriggerFormChange, nTriggerFormInput, nTriggerFormBlur, nTriggerFormFocus } = (0, _mixins_1.useFormItem)(props);
+        const { mergedClsPrefixRef, inlineThemeDisabled, mergedRtlRef } = (0, _mixins_1.useConfig)(props);
+        const themeRef = (0, _mixins_1.useTheme)('Radio', '-radio-group', radio_group_cssr_1.default, styles_1.radioLight, props, mergedClsPrefixRef);
+        const uncontrolledValueRef = (0, vue_1.ref)(props.defaultValue);
+        const controlledValueRef = (0, vue_1.toRef)(props, 'value');
+        const mergedValueRef = (0, vooks_1.useMergedState)(controlledValueRef, uncontrolledValueRef);
+        function doUpdateValue(value) {
+            const { onUpdateValue, 'onUpdate:value': _onUpdateValue } = props;
+            if (onUpdateValue) {
+                (0, _utils_1.call)(onUpdateValue, value);
+            }
+            if (_onUpdateValue) {
+                (0, _utils_1.call)(_onUpdateValue, value);
+            }
+            uncontrolledValueRef.value = value;
+            nTriggerFormChange();
+            nTriggerFormInput();
+        }
+        function handleFocusin(e) {
+            const { value: selfEl } = selfElRef;
+            if (!selfEl)
+                return;
+            if (selfEl.contains(e.relatedTarget))
+                return;
+            nTriggerFormFocus();
+        }
+        function handleFocusout(e) {
+            const { value: selfEl } = selfElRef;
+            if (!selfEl)
+                return;
+            if (selfEl.contains(e.relatedTarget))
+                return;
+            nTriggerFormBlur();
+        }
+        (0, vue_1.provide)(use_radio_1.radioGroupInjectionKey, {
+            mergedClsPrefixRef,
+            nameRef: (0, vue_1.toRef)(props, 'name'),
+            valueRef: mergedValueRef,
+            disabledRef: mergedDisabledRef,
+            mergedSizeRef,
+            doUpdateValue
+        });
+        const rtlEnabledRef = (0, use_rtl_1.useRtl)('Radio', mergedRtlRef, mergedClsPrefixRef);
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            const { value: size } = mergedSizeRef;
+            const { common: { cubicBezierEaseInOut }, self: { buttonBorderColor, buttonBorderColorActive, buttonBorderRadius, buttonBoxShadow, buttonBoxShadowFocus, buttonBoxShadowHover, buttonColorActive, buttonTextColor, buttonTextColorActive, buttonTextColorHover, opacityDisabled, [(0, _utils_1.createKey)('buttonHeight', size)]: height, [(0, _utils_1.createKey)('fontSize', size)]: fontSize } } = themeRef.value;
+            return {
+                '--u-font-size': fontSize,
+                '--u-bezier': cubicBezierEaseInOut,
+                '--u-button-border-color': buttonBorderColor,
+                '--u-button-border-color-active': buttonBorderColorActive,
+                '--u-button-border-radius': buttonBorderRadius,
+                '--u-button-box-shadow': buttonBoxShadow,
+                '--u-button-box-shadow-focus': buttonBoxShadowFocus,
+                '--u-button-box-shadow-hover': buttonBoxShadowHover,
+                '--u-button-color-active': buttonColorActive,
+                '--u-button-text-color': buttonTextColor,
+                '--u-button-text-color-hover': buttonTextColorHover,
+                '--u-button-text-color-active': buttonTextColorActive,
+                '--u-height': height,
+                '--u-opacity-disabled': opacityDisabled
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? (0, _mixins_1.useThemeClass)('radio-group', (0, vue_1.computed)(() => mergedSizeRef.value[0]), cssVarsRef, props)
+            : undefined;
+        return {
+            selfElRef,
+            rtlEnabled: rtlEnabledRef,
+            mergedClsPrefix: mergedClsPrefixRef,
+            mergedValue: mergedValueRef,
+            handleFocusout,
+            handleFocusin,
+            cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
+            themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
+            onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender
+        };
+    },
+    render() {
+        var _a;
+        const { mergedValue, mergedClsPrefix, handleFocusin, handleFocusout } = this;
+        const { children, isButtonGroup } = mapSlot((0, _utils_1.flatten)((0, _utils_1.getSlot)(this)), mergedValue, mergedClsPrefix);
+        (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
+        return ((0, vue_1.h)("div", { onFocusin: handleFocusin, onFocusout: handleFocusout, ref: "selfElRef", class: [
+                `${mergedClsPrefix}-radio-group`,
+                this.rtlEnabled && `${mergedClsPrefix}-radio-group--rtl`,
+                this.themeClass,
+                isButtonGroup && `${mergedClsPrefix}-radio-group--button-group`
+            ], style: this.cssVars }, children));
+    }
+});

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

@@ -0,0 +1,2 @@
+export type OnUpdateValue = (value: string & number & boolean) => void;
+export type OnUpdateValueImpl = (value: string | number | boolean) => void;

package/lib/radio/src/interface.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/radio/src/styles/radio-group.cssr.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("css-render").CNode;
+export default _default;

package/lib/radio/src/styles/radio-group.cssr.js

@@ -0,0 +1,108 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+const cssr_1 = require("../../../_utils/cssr");
+// vars:
+// --u-bezier
+// --u-button-border-color
+// --u-button-border-color-active
+// --u-height
+// --u-opacity-disabled
+// --u-font-size
+exports.default = (0, cssr_1.cB)('radio-group', `
+ display: inline-block;
+ font-size: var(--u-font-size);
+`, [(0, cssr_1.cE)('splitor', `
+ display: inline-block;
+ vertical-align: bottom;
+ width: 1px;
+ transition:
+ background-color .3s var(--u-bezier),
+ opacity .3s var(--u-bezier);
+ background: var(--u-button-border-color);
+ `, [(0, cssr_1.cM)('checked', {
+  backgroundColor: 'var(--u-button-border-color-active)'
+}), (0, cssr_1.cM)('disabled', {
+  opacity: 'var(--u-opacity-disabled)'
+})]), (0, cssr_1.cM)('button-group', `
+ white-space: nowrap;
+ height: var(--u-height);
+ line-height: var(--u-height);
+ `, [(0, cssr_1.cB)('radio-button', {
+  height: 'var(--u-height)',
+  lineHeight: 'var(--u-height)'
+}), (0, cssr_1.cE)('splitor', {
+  height: 'var(--u-height)'
+})]), (0, cssr_1.cB)('radio-button', `
+ vertical-align: bottom;
+ outline: none;
+ position: relative;
+ user-select: none;
+ -webkit-user-select: none;
+ display: inline-block;
+ box-sizing: border-box;
+ padding-left: 14px;
+ padding-right: 14px;
+ white-space: nowrap;
+ transition:
+ background-color .3s var(--u-bezier),
+ opacity .3s var(--u-bezier),
+ border-color .3s var(--u-bezier),
+ color .3s var(--u-bezier);
+ color: var(--u-button-text-color);
+ border-top: 1px solid var(--u-button-border-color);
+ border-bottom: 1px solid var(--u-button-border-color);
+ `, [(0, cssr_1.cB)('radio-input', `
+ pointer-events: none;
+ position: absolute;
+ border: 0;
+ border-radius: inherit;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ opacity: 0;
+ z-index: 1;
+ `), (0, cssr_1.cE)('state-border', `
+ z-index: 1;
+ pointer-events: none;
+ position: absolute;
+ box-shadow: var(--u-button-box-shadow);
+ transition: box-shadow .3s var(--u-bezier);
+ left: -1px;
+ bottom: -1px;
+ right: -1px;
+ top: -1px;
+ `), (0, cssr_1.c)('&:first-child', `
+ border-top-left-radius: var(--u-button-border-radius);
+ border-bottom-left-radius: var(--u-button-border-radius);
+ border-left: 1px solid var(--u-button-border-color);
+ `, [(0, cssr_1.cE)('state-border', `
+ border-top-left-radius: var(--u-button-border-radius);
+ border-bottom-left-radius: var(--u-button-border-radius);
+ `)]), (0, cssr_1.c)('&:last-child', `
+ border-top-right-radius: var(--u-button-border-radius);
+ border-bottom-right-radius: var(--u-button-border-radius);
+ border-right: 1px solid var(--u-button-border-color);
+ `, [(0, cssr_1.cE)('state-border', `
+ border-top-right-radius: var(--u-button-border-radius);
+ border-bottom-right-radius: var(--u-button-border-radius);
+ `)]), (0, cssr_1.cNotM)('disabled', `
+ cursor: pointer;
+ `, [(0, cssr_1.c)('&:hover', [(0, cssr_1.cE)('state-border', `
+ transition: box-shadow .3s var(--u-bezier);
+ box-shadow: var(--u-button-box-shadow-hover);
+ `), (0, cssr_1.cNotM)('checked', {
+  color: 'var(--u-button-text-color-hover)'
+})]), (0, cssr_1.cM)('focus', [(0, cssr_1.c)('&:not(:active)', [(0, cssr_1.cE)('state-border', {
+  boxShadow: 'var(--u-button-box-shadow-focus)'
+})])])]), (0, cssr_1.cM)('checked', `
+ background: var(--u-button-color-active);
+ color: var(--u-button-text-color-active);
+ border-color: var(--u-button-border-color-active);
+ `), (0, cssr_1.cM)('disabled', `
+ cursor: not-allowed;
+ opacity: var(--u-opacity-disabled);
+ `)])]);

package/lib/radio/src/styles/radio.cssr.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("css-render").CNode;
+export default _default;

package/lib/radio/src/styles/radio.cssr.js

@@ -0,0 +1,149 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+const cssr_1 = require("../../../_utils/cssr");
+// vars:
+// --u-bezier
+// --u-box-shadow
+// --u-box-shadow-active
+// --u-box-shadow-disabled
+// --u-box-shadow-focus
+// --u-box-shadow-hover
+// --u-color
+// --u-color-disabled
+// --u-dot-color-active
+// --u-dot-color-disabled
+// --u-font-size
+// --u-radio-size
+// --u-text-color
+// --u-text-color-disabled
+// --u-label-padding
+// --u-label-line-height
+// --u-color-active
+exports.default = (0, cssr_1.cB)('radio', `
+ line-height: var(--u-label-line-height);
+ outline: none;
+ position: relative;
+ user-select: none;
+ -webkit-user-select: none;
+ display: var(--u-radio-position-block);
+ justify-content: var(--u-radio-position-content);
+ align-items: flex-start;
+ flex-wrap: nowrap;
+ font-size: var(--u-font-size);
+ word-break: break-word;
+`, [(0, cssr_1.cM)('checked', [(0, cssr_1.cE)('dot', `
+ background-color: var(--u-color-active);
+ `), (0, cssr_1.c)('&:hover', [(0, cssr_1.cE)('dot', {
+  boxShadow: 'var(--u-box-shadow-hover-checked)'
+})]), (0, cssr_1.c)('&:focus', [(0, cssr_1.cE)('dot', {
+  boxShadow: 'var(--u-box-shadow-focus-checked)'
+})])]), (0, cssr_1.cE)('dot-wrapper', `
+ position: relative;
+ width: var(--u-radio-size);
+ flex-shrink: 0;
+ flex-grow: 0;
+ user-select: none;
+ -webkit-user-select: none;
+ order: var(--u-radio-position);
+ `), (0, cssr_1.cB)('radio-input', `
+ position: absolute;
+ border: 0;
+ border-radius: inherit;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ opacity: 0;
+ z-index: 1;
+ cursor: pointer;
+ `), (0, cssr_1.cE)('dot', `
+ position: absolute;
+ top: 50%;
+ left: 0;
+ transform: translateY(-50%);
+ height: var(--u-radio-size);
+ width: var(--u-radio-size);
+ background: var(--u-color);
+ box-shadow: var(--u-box-shadow);
+ border-radius: 50%;
+ transition:
+ background-color .3s var(--u-bezier),
+ box-shadow .3s var(--u-bezier);
+ `, [(0, cssr_1.cM)('checked', {
+  boxShadow: 'var(--u-box-shadow-active)'
+}, [(0, cssr_1.c)('&::before', `
+ opacity: 1;
+ transform: scale(1);
+ `)])]),
+// cE('label', `
+//   color: var(--u-text-color);
+//   padding: var(--u-label-padding);
+//   font-weight: var(--u-label-font-weight);
+//   display: inline-block;
+//   transition: color .3s var(--u-bezier);
+// `),
+(0, cssr_1.cE)('label_box', `
+ transition: color .3s var(--u-bezier);
+ user-select: none;
+ -webkit-user-select: none;
+ padding: var(--u-label-padding);
+ display: flex;
+ flex-direction: column;
+ `, [(0, cssr_1.c)('&:empty', {
+  display: 'none'
+})]), (0, cssr_1.cE)('label', `
+ color: var(--u-text-color);
+ transition: color .3s var(--u-bezier);
+ user-select: none;
+ -webkit-user-select: none;
+ font-weight: var(--u-label-font-weight);
+ line-height: var(--u-size);
+ `, [(0, cssr_1.c)('&:empty', {
+  display: 'none'
+})]), (0, cssr_1.cE)('description', `
+ transition: color .3s var(--u-bezier);
+ user-select: none;
+ -webkit-user-select: none;
+ font-size: 14px;
+ color: var(--u-text-description-color);;
+ font-weight: var(--u-label-font-weight);
+ line-height: 20px;
+ margin-top: 4px;
+ `, [(0, cssr_1.c)('&:empty', {
+  display: 'none'
+})]), (0, cssr_1.c)('&:hover', [(0, cssr_1.cE)('dot', {
+  boxShadow: 'var(--u-box-shadow-hover)'
+})]), (0, cssr_1.c)('&:focus', [(0, cssr_1.cE)('dot', {
+  boxShadow: 'var(--u-box-shadow-focus)'
+})]),
+// cM('focus', [
+//   c('&:not(:active)', [
+//     cE('dot', {
+//       boxShadow: 'var(--u-box-shadow-focus)'
+//     })
+//   ])
+// ]),
+(0, cssr_1.cM)('disabled', `
+ cursor: not-allowed;
+ `, [(0, cssr_1.c)('&:hover', [(0, cssr_1.cE)('dot', {
+  boxShadow: 'var(--u-box-shadow-disabled)'
+})]), (0, cssr_1.cE)('label', {
+  color: 'var(--u-text-color-disabled)'
+}), (0, cssr_1.cE)('description', `
+ color: 'var(--u-text-color-disabled)'
+ `), (0, cssr_1.cB)('radio-input', `
+ cursor: not-allowed;
+ `)]), (0, cssr_1.cM)('checkedDisabled', `
+ cursor: not-allowed;
+ `, [(0, cssr_1.c)('&:hover', [(0, cssr_1.cE)('dot', {
+  boxShadow: 'var(--u-box-shadow-disabled-checked)'
+})]), (0, cssr_1.cE)('dot', {
+  boxShadow: 'var(--u-box-shadow-disabled-checked)'
+}), (0, cssr_1.cE)('label', {
+  color: 'var(--u-text-color-disabled)'
+}), (0, cssr_1.cB)('radio-input', `
+ cursor: not-allowed;
+ `)])]);

package/lib/radio/src/styles/rtl.cssr.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("css-render").CNode;
+export default _default;

package/lib/radio/src/styles/rtl.cssr.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+const cssr_1 = require("../../../_utils/cssr");
+exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('radio', [(0, cssr_1.cM)('rtl', `
+ direction: rtl;
+ `)]), (0, cssr_1.cB)('radio-group', [(0, cssr_1.cM)('rtl', `
+ direction: rtl;
+ `, [(0, cssr_1.cB)('radio-button', [(0, cssr_1.c)('&:first-child', `
+ border-radius: 0 var(--u-button-border-radius) var(--u-button-border-radius) 0;
+ border-right: 1px solid var(--u-button-border-color);
+ border-left: 0;
+ `, [(0, cssr_1.cE)('state-border', `
+ border-radius: 0 var(--u-button-border-radius) var(--u-button-border-radius) 0;
+ `)]), (0, cssr_1.c)('&:last-child', `
+ border-radius: var(--u-button-border-radius) 0 0 var(--u-button-border-radius);
+ border-left: 1px solid var(--u-button-border-color);
+ border-right: 0;
+ `, [(0, cssr_1.cE)('state-border', `
+ border-radius: var(--u-button-border-radius) 0 0 var(--u-button-border-radius);
+ `)]), (0, cssr_1.cM)('checked', `
+ border-color: var(--u-button-border-color-active);
+ `)])])])]);

package/lib/radio/src/use-radio.d.ts

@@ -0,0 +1,53 @@
+import { type ExtractPropTypes, type PropType, type Ref, type ComputedRef } from 'vue';
+import type { MaybeArray } from '../../_utils';
+import { type OnUpdateValue } from './interface';
+export declare const radioBaseProps: {
+    readonly name: StringConstructor;
+    readonly value: {
+        readonly type: PropType<string | number | boolean>;
+        readonly default: "on";
+    };
+    readonly checked: {
+        readonly type: PropType<boolean | undefined>;
+        readonly default: undefined;
+    };
+    readonly defaultChecked: BooleanConstructor;
+    readonly disabled: {
+        readonly type: PropType<boolean | undefined>;
+        readonly default: undefined;
+    };
+    readonly label: StringConstructor;
+    readonly size: PropType<"small" | "medium" | "large">;
+    readonly onUpdateChecked: PropType<MaybeArray<(value: boolean) => void> | undefined>;
+    readonly 'onUpdate:checked': PropType<MaybeArray<(value: boolean) => void> | undefined>;
+    readonly checkedValue: {
+        readonly type: PropType<boolean | undefined>;
+        readonly default: undefined;
+    };
+};
+export interface RadioGroupInjection {
+    mergedClsPrefixRef: Ref<string>;
+    nameRef: Ref<string | undefined>;
+    valueRef: Ref<string | number | boolean | null>;
+    mergedSizeRef: Ref<'small' | 'medium' | 'large'>;
+    disabledRef: Ref<boolean>;
+    doUpdateValue: OnUpdateValue;
+}
+export declare const radioGroupInjectionKey: import("vue").InjectionKey<RadioGroupInjection>;
+export interface UseRadio {
+    mergedClsPrefix: Ref<string>;
+    inputRef: Ref<HTMLElement | null>;
+    labelRef: Ref<HTMLElement | null>;
+    mergedName: Ref<string | undefined>;
+    mergedDisabled: Ref<boolean>;
+    uncontrolledChecked: Ref<boolean>;
+    renderSafeChecked: Ref<boolean>;
+    focus: Ref<boolean>;
+    mergedSize: ComputedRef<'small' | 'medium' | 'large'>;
+    handleRadioInputChange: () => void;
+    handleRadioInputBlur: () => void;
+    handleRadioInputFocus: () => void;
+}
+declare function setup(props: ExtractPropTypes<typeof radioBaseProps>): UseRadio;
+export type RadioBaseProps = ExtractPropTypes<typeof radioBaseProps>;
+export { setup };

package/lib/radio/src/use-radio.js

@@ -0,0 +1,139 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setup = exports.radioGroupInjectionKey = exports.radioBaseProps = void 0;
+const vue_1 = require("vue");
+const vooks_1 = require("vooks");
+const _mixins_1 = require("../../_mixins");
+const _utils_1 = require("../../_utils");
+exports.radioBaseProps = {
+    name: String,
+    value: {
+        type: [String, Number, Boolean],
+        default: 'on'
+    },
+    checked: {
+        type: Boolean,
+        default: undefined
+    },
+    defaultChecked: Boolean,
+    disabled: {
+        type: Boolean,
+        default: undefined
+    },
+    label: String,
+    size: String,
+    onUpdateChecked: [Function, Array],
+    'onUpdate:checked': [Function, Array],
+    // deprecated
+    checkedValue: {
+        type: Boolean,
+        default: undefined
+    }
+};
+exports.radioGroupInjectionKey = (0, _utils_1.createInjectionKey)('u-radio-group');
+function setup(props) {
+    if (process.env.NODE_ENV !== 'production') {
+        (0, vue_1.watchEffect)(() => {
+            if (props.checkedValue !== undefined) {
+                (0, _utils_1.warnOnce)('radio', '`checked-value` is deprecated, please use `checked` instead.');
+            }
+        });
+    }
+    const formItem = (0, _mixins_1.useFormItem)(props, {
+        mergedSize(UFormItem) {
+            const { size } = props;
+            if (size !== undefined)
+                return size;
+            if (URadioGroup) {
+                const { mergedSizeRef: { value: mergedSize } } = URadioGroup;
+                if (mergedSize !== undefined) {
+                    return mergedSize;
+                }
+            }
+            if (UFormItem) {
+                return UFormItem.mergedSize.value;
+            }
+            return 'medium';
+        },
+        mergedDisabled(UFormItem) {
+            if (props.disabled)
+                return true;
+            if (URadioGroup === null || URadioGroup === void 0 ? void 0 : URadioGroup.disabledRef.value)
+                return true;
+            if (UFormItem === null || UFormItem === void 0 ? void 0 : UFormItem.disabled.value)
+                return true;
+            return false;
+        }
+    });
+    const { mergedSizeRef, mergedDisabledRef } = formItem;
+    const inputRef = (0, vue_1.ref)(null);
+    const labelRef = (0, vue_1.ref)(null);
+    const URadioGroup = (0, vue_1.inject)(exports.radioGroupInjectionKey, null);
+    const uncontrolledCheckedRef = (0, vue_1.ref)(props.defaultChecked);
+    const controlledCheckedRef = (0, vue_1.toRef)(props, 'checked');
+    const mergedCheckedRef = (0, vooks_1.useMergedState)(controlledCheckedRef, uncontrolledCheckedRef);
+    const renderSafeCheckedRef = (0, vooks_1.useMemo)(() => {
+        if (URadioGroup)
+            return URadioGroup.valueRef.value === props.value;
+        return mergedCheckedRef.value;
+    });
+    const mergedNameRef = (0, vooks_1.useMemo)(() => {
+        const { name } = props;
+        if (name !== undefined)
+            return name;
+        if (URadioGroup)
+            return URadioGroup.nameRef.value;
+    });
+    const focusRef = (0, vue_1.ref)(false);
+    function doUpdateChecked() {
+        if (URadioGroup) {
+            const { doUpdateValue } = URadioGroup;
+            const { value } = props;
+            (0, _utils_1.call)(doUpdateValue, value);
+        }
+        else {
+            const { onUpdateChecked, 'onUpdate:checked': _onUpdateChecked } = props;
+            const { nTriggerFormInput, nTriggerFormChange } = formItem;
+            if (onUpdateChecked)
+                (0, _utils_1.call)(onUpdateChecked, true);
+            if (_onUpdateChecked)
+                (0, _utils_1.call)(_onUpdateChecked, true);
+            nTriggerFormInput();
+            nTriggerFormChange();
+            uncontrolledCheckedRef.value = true;
+        }
+    }
+    function toggle() {
+        if (mergedDisabledRef.value)
+            return;
+        if (!renderSafeCheckedRef.value) {
+            doUpdateChecked();
+        }
+    }
+    function handleRadioInputChange() {
+        toggle();
+    }
+    function handleRadioInputBlur() {
+        focusRef.value = false;
+    }
+    function handleRadioInputFocus() {
+        focusRef.value = true;
+    }
+    return {
+        mergedClsPrefix: URadioGroup
+            ? URadioGroup.mergedClsPrefixRef
+            : (0, _mixins_1.useConfig)(props).mergedClsPrefixRef,
+        inputRef,
+        labelRef,
+        mergedName: mergedNameRef,
+        mergedDisabled: mergedDisabledRef,
+        uncontrolledChecked: uncontrolledCheckedRef,
+        renderSafeChecked: renderSafeCheckedRef,
+        focus: focusRef,
+        mergedSize: mergedSizeRef,
+        handleRadioInputChange,
+        handleRadioInputBlur,
+        handleRadioInputFocus
+    };
+}
+exports.setup = setup;

package/lib/radio/styles/_common.d.ts

@@ -0,0 +1,8 @@
+declare const _default: {
+    radioSizeSmall: string;
+    radioSizeMedium: string;
+    radioSizeLarge: string;
+    labelPadding: string;
+    labelFontWeight: string;
+};
+export default _default;