hongluan-ui
Version:
Hongluan Component Library for Vue 3
72 lines (69 loc) • 2.46 kB
JavaScript
import { ref, inject, computed } from 'vue';
import '../../../tokens/index.mjs';
import '../../../constants/index.mjs';
import '../../../hooks/index.mjs';
import '../../../utils/index.mjs';
import { radioGroupKey } from '../../../tokens/radio.mjs';
import { isPropAbsent } from '../../../utils/types.mjs';
import { UPDATE_MODEL_EVENT } from '../../../constants/event.mjs';
import { useConsistentProp } from '../../../hooks/use-consistent-prop/index.mjs';
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 == null ? void 0 : radioGroup.changeEvent(val);
} else {
emit && emit(UPDATE_MODEL_EVENT, val);
}
radioRef.value.checked = props.modelValue === actualValue.value;
}
});
const { size: tempRadioSize, disabled: tempRadioDisabled, fill: tempFill } = useConsistentProp();
const radioSize = computed(() => {
return isGroup.value ? (radioGroup == null ? void 0 : radioGroup.size) || tempRadioSize.value : tempRadioSize.value;
});
const radioFill = computed(() => {
return isGroup.value ? (radioGroup == null ? void 0 : radioGroup.fill) || tempFill.value : tempFill.value;
});
const isDisabled = computed(() => {
return isGroup.value ? (radioGroup == null ? void 0 : radioGroup.disabled) || tempRadioDisabled.value : tempRadioDisabled.value;
});
const radioType = computed(() => {
return isGroup.value ? (radioGroup == null ? void 0 : radioGroup.type) || props.type : props.type;
});
const radioCustom = computed(() => {
return isGroup.value ? (radioGroup == null ? void 0 : radioGroup.custom) || props.custom : props.custom;
});
const focus = ref(false);
const tabIndex = computed(() => {
return isDisabled.value || isGroup.value && modelValue.value !== actualValue.value ? -1 : 0;
});
return {
radioRef,
isGroup,
radioGroup,
focus,
radioSize,
radioFill,
isDisabled,
radioType,
radioCustom,
tabIndex,
modelValue,
actualValue
};
};
export { useRadio };
//# sourceMappingURL=use-radio.mjs.map