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

Taro UI Rewritten in Vue 3.0

import { defineComponent, computed, toRefs, toDisplayString, createTextVNode, resolveComponent, withCtx, createVNode, normalizeClass, mergeProps, openBlock, createBlock } from 'vue';
import { useModelValue } from '../composables';

const AtSwitch = defineComponent({
  name: "AtSwitch",
  emits: {
    "update:checked": (value) => !!(typeof value === "boolean")
  },
  props: {
    title: {
      type: String,
      default: ""
    },
    color: {
      type: String,
      default: "#6190e8"
    },
    border: Boolean,
    checked: Boolean,
    disabled: Boolean
  },
  setup(props, { emit }) {
    const modelChecked = useModelValue(props, emit, "checked");
    const rootClasses = computed(() => ({
      "at-switch": true,
      "at-switch--without-border": !props.border
    }));
    const containerClasses = computed(() => ({
      "at-switch__container": true,
      "at-switch--disabled": props.disabled
    }));
    function handleChange(event) {
      const { value, checked } = event.detail;
      const state = typeof value === "undefined" ? checked : value;
      modelChecked.value = state;
    }
    return {
      ...toRefs(props),
      modelChecked,
      rootClasses,
      containerClasses,
      handleChange
    };
  }
});

// Binding optimization for webpack code-split
const _toDisplayString = toDisplayString, _createTextVNode = createTextVNode, _resolveComponent = resolveComponent, _withCtx = withCtx, _createVNode = createVNode, _normalizeClass = normalizeClass, _mergeProps = mergeProps, _openBlock = openBlock, _createBlock = createBlock;

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

  return (_openBlock(), _createBlock(_component_taro_view, _mergeProps(_ctx.$attrs, { class: _ctx.rootClasses }), {
    default: _withCtx(() => [
      _createVNode(_component_taro_view, { class: "at-switch__title" }, {
        default: _withCtx(() => [
          _createTextVNode(_toDisplayString(_ctx.title), 1 /* TEXT */)
        ]),
        _: 1 /* STABLE */
      }),
      _createVNode(_component_taro_view, {
        class: _normalizeClass(_ctx.containerClasses)
      }, {
        default: _withCtx(() => [
          _createVNode(_component_taro_view, { class: "at-switch__mask" }),
          _createVNode(_component_taro_switch, {
            class: "at-switch__switch",
            color: _ctx.color,
            checked: _ctx.modelChecked,
            onChange: _ctx.handleChange
          }, null, 8 /* PROPS */, ["color", "checked", "onChange"])
        ]),
        _: 1 /* STABLE */
      }, 8 /* PROPS */, ["class"])
    ]),
    _: 1 /* STABLE */
  }, 16 /* FULL_PROPS */, ["class"]))
}


AtSwitch.render = _sfc_render;

export default AtSwitch;