contract-front/uni_modules/lime-radio/components/l-radio/l-radio.vue

<template>
	<view class="l-radio" :class="{'l-radio--disabled': isDisabled}" :style="[styles]" @click="onClick">
		<slot name="radio" :checked="radioChecked" :disabled="isDisabled">
			<slot name="icon" :checked="radioChecked" :disabled="isDisabled">
				<view class="l-radio__icon" ref="iconRef" 
				:class="['l-radio__icon--' + innerIcon, {
					'l-radio__icon--checked': radioChecked,
					'l-radio__icon--disabled': isDisabled
				}]" :style="[iconStyle]"></view>
			</slot>
			<view class="l-radio__label" :class="{'l-radio__label--disabled': isDisabled}" v-if="label || $slots['default']">
				<slot>{{label}}</slot>
			</view>
		</slot>
	</view>
</template>
<script lang="ts">
	// @ts-nocheck
	import { defineComponent, computed, inject, Ref , ref} from '@/uni_modules/lime-shared/vue';
	import { RadioValue, LRadioProps } from './type'
	import radioProps from './props'

	const name = 'l-radio'
	export default defineComponent({
		name,
		props: radioProps,
		emits: ['update:checked', 'update:modelValue', 'change', 'input'],
		setup(props, { emit }) {
			const radioGroupProps = inject<LRadioGroupComponentPublicInstance|null>('limeRadioGroupProps', null);
			const radioGroupValue = inject<ComputedRefImpl<any>|null>('limeRadioGroupValue', null);
			const radioGroupChange = inject<((value: any|null) => void)|null>('limeRadioGroupChange', null);
			const modelValue = ref(props.checked || props.modelValue)
			const innerChecked = computed({
				set(value: boolean){
					modelValue.value = value;
					emit('update:modelValue', value)
					emit('change', value)
					// #ifdef VUE2
					emit('input', value)
					// #endif
				},
				get(): boolean{
					return props.checked || props.modelValue || modelValue.value
				},
			} as WritableComputedOptions<boolean>)
			
			const isDisabled = computed(():boolean => (props.disabled || (radioGroupProps?.disabled)))
			const radioChecked = computed(():boolean => innerChecked.value || (props.name && props.name == radioGroupValue?.value) || (props.value && props.value == radioGroupValue?.value));
			const finalAllowUncheck = computed(():boolean => props.allowUncheck || (radioGroupProps?.allowUncheck));
			
			const innerIcon = computed(():string => radioGroupProps?.icon || props.icon)
			const innerSize = computed(():string => radioGroupProps?.size || props.size)
			const innerIconSize = computed(():string|null => radioGroupProps?.iconSize || props.iconSize)
			const innerFontSize = computed(():string|null => radioGroupProps?.fontSize || props.fontSize)
			const innerCheckedColor = computed(():string|null => radioGroupProps?.checkedColor || props.checkedColor)
			const innerIconBgColor = computed(():string => props.iconBgColor || radioGroupProps?.iconBgColor)
			const innerIconBorderColor = computed(():string => props.iconBorderColor || radioGroupProps?.iconBorderColor )
			const innerIconDisabledColor = computed(():string => props.iconDisabledColor || radioGroupProps?.iconDisabledColor)
			const innerIconDisabledBgColor = computed(():string => props.iconDisabledBgColor || radioGroupProps?.iconDisabledBgColor)
			
			
			const styles = computed(()=>{
				const style:Record<string, any> = {};
				if(radioGroupProps&& radioGroupProps.gap) {
					style[radioGroupProps.direction == 'horizontal' ? 'margin-right' : 'margin-bottom'] = radioGroupProps.gap!
				}
				
				if(innerCheckedColor.value) {
					style['--l-radio-icon-checked-color'] = innerCheckedColor.value!
				}
				if(innerIconBorderColor.value) {
					style['--l-radio-icon-border-color'] = innerIconBorderColor.value!
				}
				if(innerIconDisabledColor.value) {
					style['--l-radio-icon-disabled-color'] = innerIconDisabledColor.value!
				}
				if(innerIconDisabledBgColor.value) {
					style['--l-radio-icon-disabled-bg-color'] = innerIconDisabledBgColor.value!
				}
				if(innerFontSize.value) {
					style['--l-radio-font-size'] = innerFontSize.value!
				}
				if(innerIconBgColor.value) {
					style['--l-radio-icon-bg-color'] = innerIconBgColor.value!
				}
				return style
			})
			
			const iconStyle = computed(()=>{
				const style:Record<string, any> = {}
				if(innerIconSize.valuel) {
					style['width'] = innerIconSize.value!
					style['height'] = innerIconSize.value!
					style['--l-radio-icon-size'] = innerIconSize.value!
				}
				return style
			})
			
			
			
			const onClick = (e: UniPointerEvent) => {
				if(isDisabled.value) return;
				const _name = props.value || props.name
				if(radioGroupChange && _name) {
					const value = finalAllowUncheck.value && radioChecked.value ? null : _name;
					radioGroupChange(value);
				} else {
					const value = finalAllowUncheck.value ? !radioChecked.value : true;
					innerChecked.value = value
				}
			}
			
			return {
				styles,
				innerChecked,
				iconStyle,
				innerIcon,
				radioChecked,
				isDisabled,
				onClick,
				
			}
		}
	});
</script>
<style lang="scss">
	@import './index-u';
</style>