@opensig/opendesign/lib/switch/OSwitch.vue.js

"use strict";
const vue = require("vue");
const types = require("./types.js");
const styleClass = require("../_utils/style-class.js");
const icons = require("../_utils/icons.js");
const is = require("../_utils/is.js");
const log = require("../_utils/log.js");
const vueUtils = require("../_utils/vue-utils.js");
const _hoisted_1 = { class: "o-switch-wrap" };
const _hoisted_2 = { class: "o-switch-handler" };
const _hoisted_3 = {
  key: 0,
  class: "o-switch-icon-loading o-rotating"
};
const _hoisted_4 = {
  key: 1,
  class: "o-switch-icon-wrap"
};
const _hoisted_5 = {
  key: 0,
  class: "o-switch-label"
};
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  __name: "OSwitch",
  props: types.switchProps,
  emits: ["update:modelValue", "change"],
  setup(__props, { emit: __emit }) {
    const props = __props;
    const slots = vue.useSlots();
    const emits = __emit;
    const round = styleClass.getRoundClass(props, "switch");
    const _checked = vue.ref(props.defaultChecked);
    const isChecked = vue.computed(() => {
      if (!is.isUndefined(props.modelValue)) {
        return props.checkedValue === props.modelValue;
      }
      return _checked.value;
    });
    const isCustomIcon = vue.computed(() => {
      return !vueUtils.isEmptySlot(slots.active) || !vueUtils.isEmptySlot(slots.inactive);
    });
    vue.watch(
      isChecked,
      (val) => {
        _checked.value = val;
      },
      { immediate: true }
    );
    const isChangeable = () => {
      if (props.loading || props.disabled) {
        return Promise.resolve(false);
      }
      if (!props.beforeChange) {
        return Promise.resolve(true);
      }
      const res = props.beforeChange(!isChecked.value);
      if (!(is.isPromise(res) || is.isBoolean(res))) {
        return Promise.reject("beforeChange should return  type `Promise<boolean>` or `boolean`");
      }
      return is.isBoolean(res) ? Promise.resolve(res) : res;
    };
    const onClick = (ev) => {
      isChangeable().then((flag) => {
        if (flag) {
          const checked = !isChecked.value;
          _checked.value = checked;
          const val = checked ? props.checkedValue : props.uncheckedValue;
          emits("update:modelValue", val);
          emits("change", val, ev);
        }
      }).catch((err) => {
        log.log.warn(`${err}`);
      });
    };
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createElementBlock(
        "div",
        {
          class: vue.normalizeClass(["o-switch", [
            `o-switch-${props.size}`,
            vue.unref(round).class.value,
            { "o-switch-checked": isChecked.value },
            { "o-switch-disabled": props.disabled },
            { "o-switch-loading": props.loading },
            { "o-switch-custom": isCustomIcon.value }
          ]]),
          style: vue.normalizeStyle(vue.unref(round).style.value),
          onClick
        },
        [
          vue.createElementVNode("div", _hoisted_1, [
            vue.createElementVNode("div", _hoisted_2, [
              props.loading ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3, [
                vue.createVNode(vue.unref(icons.IconLoading))
              ])) : vue.createCommentVNode("v-if", true),
              (_ctx.$slots.active || _ctx.$slots.inactive) && !props.loading ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
                isChecked.value ? vue.renderSlot(_ctx.$slots, "active", { key: 0 }) : vue.renderSlot(_ctx.$slots, "inactive", { key: 1 })
              ])) : vue.createCommentVNode("v-if", true)
            ]),
            _ctx.$slots.on || _ctx.$slots.off ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [
              isChecked.value ? vue.renderSlot(_ctx.$slots, "on", { key: 0 }) : vue.renderSlot(_ctx.$slots, "off", { key: 1 })
            ])) : vue.createCommentVNode("v-if", true)
          ])
        ],
        6
        /* CLASS, STYLE */
      );
    };
  }
});
module.exports = _sfc_main;