minnan/src/components/form/Radio.vue

<template>
  <Touchable
    :touchable="!disabled"
    :activeOpacity="activeOpacity"
    :innerStyle="{ 
      ...(block ? themeStyles.checkBoxFull.value : themeStyles.checkBox.value), 
      ...innerStyle 
    }"
    innerClass="nana-check"
    center
    direction="row"
    @click.stop="switchOn"
  >
    <slot v-if="checkPosition === 'left'" icon="check" :on="value" :disabled="disabled" :shape="shape">
      <CheckBoxDefaultButton 
        :on="value"
        :disabled="disabled"
        :shape="shape"
        :size="checkSize"
        :checkedBackgroundColor="themeContext.resolveThemeColor(color)"
        :checkedBorderColor="themeContext.resolveThemeColor(color)"
        :borderColor="themeContext.resolveThemeColor(borderColor)"
        :checkColor="themeContext.resolveThemeColor(checkColor)"
        :icon="props.icon"
        :iconSize="checkSize - 15"
        :type="props.icon != 'check-mark' ? 'icon' : 'radio'"
      />
    </slot>
    <slot>
      <Text :innerStyle="{
        ...themeStyles.checkText.value,
        ...textStyle,
        color: themeContext.resolveThemeColor(props.disabled === true ? disabledTextColor : textColor),
        display: StringUtils.isNullOrEmpty(text) ? 'none' : 'flex',
      }"
      :text="text" 
    />
    </slot>
    <slot v-if="checkPosition === 'right'" icon="check" :on="value" :disabled="disabled" :shape="shape">
      <CheckBoxDefaultButton 
        :on="value"
        :disabled="disabled"
        :shape="shape"
        :size="checkSize"
        :checkedBackgroundColor="themeContext.resolveThemeColor(color)"
        :checkedBorderColor="themeContext.resolveThemeColor(color)"
        :borderColor="themeContext.resolveThemeColor(borderColor)"
        :checkColor="themeContext.resolveThemeColor(checkColor)"
        :icon="props.icon"
        :iconSize="checkSize - 15"
        :type="props.icon != 'check-mark' ? 'icon' : 'radio'"
      />
    </slot>
  </Touchable>
</template>

<script setup lang="ts">
import { computed, inject, onMounted } from 'vue';
import { propGetThemeVar, useTheme, type TextStyle, type ViewStyle } from '../theme/ThemeDefine';
import { StringUtils } from '@imengyu/imengyu-utils';
import { DynamicSize } from '../theme/ThemeTools';
import CheckBoxDefaultButton from './CheckBoxDefaultButton.vue';
import Text from '../basic/Text.vue';
import type { RadioBoxGroupContextInfo } from './RadioGroup.vue';
import { useCellContext } from '../basic/CellContext';
import Touchable from '../feedback/Touchable.vue';

export interface RadioBoxProps {
  /**
   * 当前复选框在复选框组中的value，不能与其他重复
   */
  name: string|number|boolean;
  /**
   * 复选框的文字
   */
  text?: string;
  /**
   * 复选框的形状
   * @default 'round'
   */
  shape?: "square"|"round";
  /**
   * 复选框占满整个父元素，默认否
   * @default false
   */
  block?: boolean,
  /**
   * 复选框按钮位置，默认在左
   * @default 'left'
   */
  checkPosition?: "left"|"right";
  /**
   * 复选框未选择时的边框颜色
   * @default border.input
   */
  borderColor?: string|undefined;
  /**
   * 复选框选中时勾的颜色
   * @default white
   */
  checkColor?: string|undefined;
  /**
   * 复选框按钮大小，默认是 36
   * @default 36
   */
  checkSize?: number|undefined;
  /**
   * 按下时透明度
   * @default 0.75
   */
  activeOpacity?: number,
  /**
   * 复选框的颜色，默认是 primary
   * @default primary
   */
  color?: string;
  /**
   * 是否禁用复选框
   * @default false
   */
  disabled?: boolean;
  /**
   * 选择勾的图标
   * @default 'check-mark'
   */
  icon?: string;
  /**
   * 文字颜色
   * @default text.content
   */
  textColor?: string;
  /**
   * 禁用状态下文字颜色
   * @default text.second
   */
  disabledTextColor?: string;
  /**
   * 自定义文字样式
   */
  textStyle?: TextStyle;
  /**
   * 自定义样式
   */
  innerStyle?: ViewStyle;
}

const props = withDefaults(defineProps<RadioBoxProps>(), {
  modelValue: false,
  shape: () => propGetThemeVar('RadioBoxShape', 'round'),
  block: false,
  checkPosition: () => propGetThemeVar('RadioBoxCheckPosition', 'left'),
  borderColor: () => propGetThemeVar('RadioBoxBorderColor', 'border.input'),
  checkColor: () => propGetThemeVar('RadioBoxCheckColor', 'white'),
  textColor: () => propGetThemeVar('RadioBoxTextColor', 'text.content'),
  disabledTextColor: () => propGetThemeVar('RadioBoxDisabledTextColor', 'text.second'),
  color: () => propGetThemeVar('RadioBoxColor', 'primary'),
  checkSize: () => propGetThemeVar('RadioBoxCheckSize', 36),
  activeOpacity: () => propGetThemeVar('RadioBoxActiveOpacity', 0.75),
  disabled: false,
  icon: 'check-mark',
});

const disabled = computed(() => props.disabled || groupContext?.topDisabled.value);

const themeContext = useTheme();
const themeStyles = themeContext.useThemeStyles({
  checkBox: {
    alignSelf: 'flex-start',
    marginHorizontal: DynamicSize('RadioBoxMarginHorizontal', 4),
  },
  checkBoxFull: {
    alignSelf: 'stretch',
    width: '100%',
    justifyContent: 'space-between',
    marginHorizontal: DynamicSize('RadioBoxMarginHorizontal', 4),
  },
  check: {
    alignSelf: 'flex-start',
    alignItems: 'center',
    justifyContent: 'center',
  },
  checkText: {
    fontSize: DynamicSize('RadioBoxTextFontSize', 28),
  },
});

const groupContext = inject<RadioBoxGroupContextInfo>('RadioBoxGroupContext', null as any);
const cellContext = useCellContext();;
const value = computed(() => {
  if (!groupContext)
    return false;
  return groupContext.value.value === props.name;
});

function switchOn() {
  if (disabled.value)
    return;
  groupContext!.onValueChange(props.name, true);
}
onMounted(() => {
  if (cellContext)
    cellContext.setOnClickListener(() => switchOn());
})
defineOptions({
  options: {
    styleIsolation: "shared",
    virtualHost: true,
  }
})
</script>