dm-vue3-ui/es/switch/index.vue.js

This Components Library will help get you started developing in Vue 3.

import { defineComponent, computed, openBlock, createElementBlock, normalizeClass, unref, normalizeStyle, createElementVNode, renderSlot, createTextVNode, toDisplayString, createCommentVNode } from "vue";
import { useVModel } from "@vueuse/core";
const _hoisted_1 = { class: "label" };
const _sfc_main = /* @__PURE__ */ defineComponent({
  ...{
    name: "dm-switch"
  },
  __name: "index",
  props: {
    modelValue: { type: Boolean, default: false },
    disabled: { type: Boolean, default: false },
    loading: { type: Boolean, default: false },
    size: { default: "medium" },
    checkedText: { default: "" },
    unCheckedText: { default: "" },
    colorOn: { default: "#7857fc" },
    colorOff: { default: "#00000040" },
    sliderColor: { default: "#fff" },
    loadingParams: { default: () => ({
      type: "solid",
      style: "2px",
      styleColor: "#ccc",
      borderTopColor: "#4caf50"
    }) }
  },
  emits: ["update:modelValue"],
  setup(__props, { emit: __emit }) {
    const props = __props;
    const emits = __emit;
    const checkedValue = useVModel(props, "modelValue", emits);
    const sizeClass = computed(() => {
      return `switch-${props.size}`;
    });
    const currentStyle = computed(() => {
      return {
        backgroundColor: checkedValue.value ? props.colorOn : props.colorOff
      };
    });
    const sliderStyle = computed(() => {
      return {
        backgroundColor: props.sliderColor
      };
    });
    const loadingStyle = computed(() => {
      return {
        border: `${props.loadingParams.style} ${props.loadingParams.type} ${props.loadingParams.styleColor}`,
        borderTopColor: `${props.loadingParams.borderTopColor}`
      };
    });
    const setCheckedValue = () => {
      if (!props.disabled && !props.loading) {
        checkedValue.value = !checkedValue.value;
      }
    };
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("button", {
        class: normalizeClass([
          "dm-switch",
          sizeClass.value,
          { "switch-on": unref(checkedValue) },
          { "switch-off": !unref(checkedValue) },
          { "switch-disabled": _ctx.disabled }
        ]),
        style: normalizeStyle(currentStyle.value),
        onClick: setCheckedValue
      }, [
        createElementVNode("div", {
          class: "slider",
          style: normalizeStyle(sliderStyle.value)
        }, null, 4),
        createElementVNode("span", _hoisted_1, [
          unref(checkedValue) && (_ctx.checkedText || _ctx.$slots.checkedText) ? renderSlot(_ctx.$slots, "checkedText", { key: 0 }, () => [
            createTextVNode(toDisplayString(_ctx.checkedText), 1)
          ]) : createCommentVNode("", true),
          !unref(checkedValue) && (_ctx.unCheckedText || _ctx.$slots.unCheckedText) ? renderSlot(_ctx.$slots, "unCheckedText", { key: 1 }, () => [
            createTextVNode(toDisplayString(_ctx.unCheckedText), 1)
          ]) : createCommentVNode("", true),
          renderSlot(_ctx.$slots, "default")
        ]),
        _ctx.loading ? (openBlock(), createElementBlock("div", {
          key: 0,
          class: "loading",
          style: normalizeStyle(loadingStyle.value)
        }, null, 4)) : createCommentVNode("", true)
      ], 6);
    };
  }
});
const index_vue_vue_type_style_index_0_lang = "";
export {
  _sfc_main as default
};