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

Taro UI Rewritten in Vue 3.0

import {h, defineComponent, mergeProps} from "vue";
import {Text, View} from "@tarojs/components";
import {useModelValue} from "../composables/model";
const AtCheckbox = defineComponent({
  name: "AtCheckbox",
  props: {
    options: {
      type: Array,
      default: () => []
    },
    selectedList: {
      type: Array,
      default: () => []
    },
    onChange: Function
  },
  setup(props, {attrs, emit}) {
    const selectedList = useModelValue(props, emit, "selectedList");
    const genOptionClasses = (option) => ({
      "at-checkbox__option": true,
      "at-checkbox__option--disabled": option.disabled,
      "at-checkbox__option--selected": props.selectedList.includes(option.value)
    });
    function handleClick(idx) {
      var _a;
      const option = props.options[idx];
      const {disabled, value} = option;
      if (disabled)
        return;
      const selectedSet = new Set(props.selectedList);
      if (!selectedSet.has(value)) {
        selectedSet.add(value);
      } else {
        selectedSet.delete(value);
      }
      if (attrs["onUpdate:selected-list"] || attrs["onUpdate:selectedList"]) {
        selectedList.value = [...selectedSet];
      } else {
        (_a = props.onChange) == null ? void 0 : _a.call(props, [...selectedSet]);
      }
    }
    return () => h(View, mergeProps(attrs, {
      class: "at-checkbox"
    }), {
      default: () => props.options.map((option, idx) => h(View, {
        class: genOptionClasses(option),
        key: option.value,
        onTap: handleClick.bind(this, idx)
      }, {
        default: () => [
          h(View, {
            class: "at-checkbox__option-wrap"
          }, {
            default: () => [
              h(View, {
                class: "at-checkbox__option-cnt"
              }, {
                default: () => [
                  h(View, {
                    class: "at-checkbox__icon-cnt"
                  }, {
                    default: () => [
                      h(Text, {class: "at-icon at-icon-check"})
                    ]
                  }),
                  h(View, {
                    class: "at-checkbox__title"
                  }, {default: () => option.label})
                ]
              }),
              option.desc && h(View, {
                class: "at-checkbox__desc"
              }, {default: () => option.desc})
            ]
          })
        ]
      }))
    });
  }
});
var checkbox_default = AtCheckbox;
export {
  checkbox_default as default
};