You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
128 lines
4.8 KiB
128 lines
4.8 KiB
<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>
|