@ithinkdt/naive/src/components/Radios.jsx

iThinkDT Naive UI

import { computed, defineComponent } from 'vue'
import { NRadioGroup, NRadio, NRadioButton, NTooltip, NFlex } from 'ithinkdt-ui'
import { useI18n, useTheme } from '@ithinkdt/core'

export const NRadios = defineComponent({
    name: 'NRadios',
    props: {
        options: {
            type: Array,
            default: () => [],
        },
        vertical: {
            type: Boolean,
            default: false,
        },
        type: {
            type: String,
            default: 'radio',
        },
        default: {
            type: [Boolean, String, Object],
            default: false,
        },
        padding: {
            type: String,
            default: undefined,
        },
        labelField: {
            type: String,
            default: 'label',
        },
        valueField: {
            type: String,
            default: 'value',
        },
        disabledField: {
            type: String,
            default: 'disabled',
        },
    },

    setup(props) {
        const { t } = useI18n()
        const { vars } = useTheme()
        const defaultLabel = computed(() => {
            if (props.default === false) return ''
            if (props.default === true) return t('form.all')
            if (typeof props.default === 'string') return props.default
            return props.default?.[props.labelField] ?? t('form.all')
        })

        const groupStyle = {
            '--n-button-color-active': vars.primaryColor,
            '--n-button-text-color-active': vars.baseColor,
        }
        return () => {
            const Comp = props.type === 'button' ? NRadioButton : NRadio

            const content = (
                <>
                    {props.default ? (
                        // eslint-disable-next-line unicorn/no-null
                        <Comp value={typeof props.default === 'object' ? props.default?.[props.valueField] : null}>
                            {defaultLabel.value}
                        </Comp>
                    ) : undefined}
                    {props.options?.map((op) => {
                        const label =
                            typeof op[props.labelField] === 'string' ? op[props.labelField] : op[props.labelField]?.()
                        return (
                            <Comp
                                value={op[props.valueField]}
                                disabled={op[props.disabledField]}
                                style={
                                    props.padding
                                        ? {
                                              paddingLeft: props.padding,
                                              paddingRight: props.padding,
                                          }
                                        : {}
                                }
                            >
                                {op.tip ? (
                                    <NTooltip>
                                        {{
                                            default: () => op.tip,
                                            trigger: () => label,
                                        }}
                                    </NTooltip>
                                ) : (
                                    label
                                )}
                            </Comp>
                        )
                    })}
                </>
            )
            return (
                <NRadioGroup style={props.vertical ? { ...groupStyle, padding: '6px 0 0' } : groupStyle}>
                    {props.type === 'button' ? (
                        content
                    ) : (
                        <NFlex size={props.vertical ? undefined : 'small'} vertical={props.vertical}>
                            {content}
                        </NFlex>
                    )}
                </NRadioGroup>
            )
        }
    },
})