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

Taro UI Rewritten in Vue 3.0

import { defineComponent, toRef, renderList, Fragment, openBlock, createElementBlock, createCommentVNode, resolveComponent, createVNode, withCtx, toDisplayString, createTextVNode, createBlock, normalizeClass, mergeProps } from 'vue';
import { useModelValue } from '../composables';

const AtCheckbox = defineComponent({
  name: "AtCheckbox",
  emits: {
    "update:selectedList"(selectedList) {
      return !!(selectedList && Array.isArray(selectedList));
    }
  },
  props: {
    options: {
      type: Array,
      required: true
    },
    selectedList: {
      type: Array,
      default: () => []
    }
  },
  setup(props, { 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) {
      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);
      }
      selectedList.value = Array.from(selectedSet);
    }
    return {
      options: toRef(props, "options"),
      genOptionClasses,
      handleClick
    };
  }
});

// Binding optimization for webpack code-split
const _renderList = renderList, _Fragment = Fragment, _openBlock = openBlock, _createElementBlock = createElementBlock, _createCommentVNode = createCommentVNode, _resolveComponent = resolveComponent, _createVNode = createVNode, _withCtx = withCtx, _toDisplayString = toDisplayString, _createTextVNode = createTextVNode, _createBlock = createBlock, _normalizeClass = normalizeClass, _mergeProps = mergeProps;

function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_taro_text = process.env.TARO_ENV === "h5" ? _resolveComponent("taro-text") : "text";
  const _component_taro_view = process.env.TARO_ENV === "h5" ? _resolveComponent("taro-view") : "view";

  return (_openBlock(), _createBlock(_component_taro_view, _mergeProps(_ctx.$attrs, { class: "at-checkbox" }), {
    default: _withCtx(() => [
      (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.options, (option, idx) => {
        return (_openBlock(), _createBlock(_component_taro_view, {
          key: option.value,
          class: _normalizeClass(_ctx.genOptionClasses(option)),
          onTap: $event => (_ctx.handleClick(idx))
        }, {
          default: _withCtx(() => [
            _createVNode(_component_taro_view, { class: "at-checkbox__option-wrap" }, {
              default: _withCtx(() => [
                _createCommentVNode(" option container "),
                _createVNode(_component_taro_view, { class: "at-checkbox__option-cnt" }, {
                  default: _withCtx(() => [
                    _createCommentVNode(" checkbox option icon "),
                    _createVNode(_component_taro_view, { class: "at-checkbox__icon-cnt" }, {
                      default: _withCtx(() => [
                        _createVNode(_component_taro_text, { class: "at-icon at-icon-check" })
                      ]),
                      _: 1 /* STABLE */
                    }),
                    _createCommentVNode(" checkbox title "),
                    _createVNode(_component_taro_view, { class: "at-checkbox__title" }, {
                      default: _withCtx(() => [
                        _createTextVNode(_toDisplayString(option.label), 1 /* TEXT */)
                      ]),
                      _: 2 /* DYNAMIC */
                    }, 1024 /* DYNAMIC_SLOTS */)
                  ]),
                  _: 2 /* DYNAMIC */
                }, 1024 /* DYNAMIC_SLOTS */),
                _createCommentVNode(" option description "),
                (option.desc)
                  ? (_openBlock(), _createBlock(_component_taro_view, {
                      key: 0,
                      class: "at-checkbox__desc"
                    }, {
                      default: _withCtx(() => [
                        _createTextVNode(_toDisplayString(option.desc), 1 /* TEXT */)
                      ]),
                      _: 2 /* DYNAMIC */
                    }, 1024 /* DYNAMIC_SLOTS */))
                  : _createCommentVNode("v-if", true)
              ]),
              _: 2 /* DYNAMIC */
            }, 1024 /* DYNAMIC_SLOTS */)
          ]),
          _: 2 /* DYNAMIC */
        }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["class", "onTap"]))
      }), 128 /* KEYED_FRAGMENT */))
    ]),
    _: 1 /* STABLE */
  }, 16 /* FULL_PROPS */))
}


AtCheckbox.render = _sfc_render;

export default AtCheckbox;