tass-ui/es/packages/components/switch/src/switch.vue.mjs

A high quality UI Toolkit built on Vue.js3+.

import { defineComponent, computed, openBlock, createElementBlock, withModifiers, createElementVNode, normalizeClass, unref, normalizeStyle, toDisplayString, createCommentVNode, Fragment, renderSlot } from "vue";
import "../../../theme-chalk/src/switch.scss.mjs";
const _hoisted_1 = ["onClick", "size"];
const _hoisted_2 = ["name", "value"];
const _hoisted_3 = { key: 0 };
const __default__ = {
  name: "tasSwitch"
};
const _sfc_main = /* @__PURE__ */ defineComponent({
  ...__default__,
  props: {
    name: null,
    disabled: { type: Boolean, default: false },
    modelValue: { type: [String, Number, Boolean] },
    onswitchText: null,
    unswitchText: null,
    onswitchColor: null,
    unswitchColor: null,
    onswitchValue: { type: [String, Number, Boolean], default: true },
    unswitchValue: { type: [String, Number, Boolean], default: false },
    size: { default: "md" },
    loadingIcon: { default: "tas-icon-loading-one" },
    loading: { type: Boolean }
  },
  emits: ["update:modelValue", "change"],
  setup(__props, { emit }) {
    const props = __props;
    const isActive = computed({
      get() {
        return props.modelValue === props.onswitchValue;
      },
      set(val) {
        if (val) {
          emit("change", props.onswitchValue);
          emit("update:modelValue", props.onswitchValue);
        } else {
          emit("change", props.unswitchValue);
          emit("update:modelValue", props.unswitchValue);
        }
      }
    });
    const handleClick = () => {
      if (!props.disabled) {
        isActive.value = !isActive.value;
      }
    };
    const styles = computed(() => {
      return {
        "background-color": isActive.value ? props.onswitchColor : props.unswitchColor
      };
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("span", {
        onClick: withModifiers(handleClick, ["stop"]),
        class: "tas-switch-container",
        size: __props.size
      }, [
        createElementVNode("input", {
          class: "tas-switch-input",
          name: __props.name,
          value: __props.modelValue
        }, null, 8, _hoisted_2),
        createElementVNode("div", {
          class: normalizeClass(["tas-unselect tas-form-switch", {
            "tas-form-onswitch": unref(isActive),
            "tas-switch-disabled": __props.disabled
          }]),
          style: normalizeStyle(unref(styles))
        }, [
          __props.onswitchText || __props.unswitchText ? (openBlock(), createElementBlock("em", _hoisted_3, toDisplayString(unref(isActive) == true ? __props.onswitchText : __props.unswitchText), 1)) : createCommentVNode("", true),
          createElementVNode("span", null, [
            createElementVNode("div", null, [
              __props.loading ? (openBlock(), createElementBlock("i", {
                key: 0,
                class: normalizeClass(["tas-icon tas-anim tas-anim-rotate tas-anim-loop", __props.loadingIcon])
              }, null, 2)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
                unref(isActive) ? renderSlot(_ctx.$slots, "onswitch-icon", { key: 0 }) : renderSlot(_ctx.$slots, "unswitch-icon", { key: 1 })
              ], 64))
            ])
          ])
        ], 6)
      ], 8, _hoisted_1);
    };
  }
});
export {
  _sfc_main as default
};