taro-ui-vue3/lib/radio/index.js

Taro UI Rewritten in Vue 3.0

import {h, defineComponent, computed, mergeProps} from "vue";
import {Text, View} from "@tarojs/components";
import {useModelValue} from "../composables/model";
const AtRadio = defineComponent({
  name: "AtRadio",
  props: {
    value: {
      type: String,
      default: ""
    },
    options: {
      type: Array,
      default: []
    },
    onClick: Function
  },
  setup(props, {attrs, emit}) {
    const radioModelValue = useModelValue(props, emit, "value");
    const genOptionClasses = computed(() => (option) => ({
      "at-radio__option": true,
      "at-radio__option--disabled": option.disabled
    }));
    const genIconClasses = computed(() => (option) => ({
      "at-radio__icon": true,
      "at-radio__icon--checked": props.value === option.value
    }));
    function handleClick(option, event) {
      var _a;
      if (option.disabled)
        return;
      if (attrs["onUpdate:value"]) {
        radioModelValue.value = option.value;
      } else {
        (_a = props.onClick) == null ? void 0 : _a.call(props, option.value, event);
      }
    }
    return () => h(View, mergeProps(attrs, {
      class: "at-radio"
    }), {
      default: () => props.options.map((option) => h(View, {
        key: option.value,
        class: genOptionClasses.value(option),
        onTap: handleClick.bind(this, option)
      }, {
        default: () => [
          h(View, {
            class: "at-radio__option-wrap"
          }, {
            default: () => [
              h(View, {
                class: "at-radio__option-container"
              }, {
                default: () => [
                  h(View, {
                    class: "at-radio__title"
                  }, {default: () => option.label}),
                  h(View, {
                    class: genIconClasses.value(option)
                  }, {
                    default: () => [
                      h(Text, {class: "at-icon at-icon-check"})
                    ]
                  })
                ]
              }),
              option.desc && h(View, {class: "at-radio__desc"}, {default: () => option.desc})
            ]
          })
        ]
      }))
    });
  }
});
var radio_default = AtRadio;
export {
  radio_default as default
};