@farris/ui-vue/components/switch/index.esm.js

Farris Vue, a Farris Design based Vue3 component library.

import { defineComponent as T, toRefs as x, ref as v, computed as o, watch as p, onMounted as F, createVNode as s, nextTick as O } from "vue";
import { withInstall as z } from "../common/index.esm.js";
const I = {
  modelValue: { type: [String, Number, Boolean], default: !1 },
  /** 禁用 */
  disabled: { type: Boolean, default: !1 },
  /**
   * 同disabled 
   */
  readonly: { type: Boolean, default: !1 },
  onBackground: { type: String },
  offBackground: { type: String },
  onColor: { type: String },
  offColor: { type: String },
  onLabel: { type: String },
  offLabel: { type: String },
  /** 尺寸大小 */
  size: { type: String, default: "medium" },
  /** 开关值变化事件 */
  onModelValueChanged: { type: Function, default: () => {
  } },
  focusOnCreated: { type: Boolean, default: !1 },
  trueValue: { type: [String, Number, Boolean], default: !0 },
  falseValue: { type: [String, Number, Boolean], default: !1 }
}, M = /* @__PURE__ */ T({
  name: "FSwitch",
  props: I,
  emits: ["update:modelValue", "modelValueChanged"],
  setup(a, c) {
    const {
      disabled: h,
      size: d,
      onLabel: l,
      offLabel: t,
      onBackground: w,
      offBackground: k,
      onColor: C,
      offColor: S,
      readonly: m
    } = x(a), u = v(a.modelValue), i = v(), f = v(""), r = o(() => a.trueValue != null ? u.value === a.trueValue : !!u.value), V = o(() => ({
      switch: !0,
      "f-cmp-switch": !0,
      checked: r.value,
      disabled: m.value || h.value,
      "switch-large": d.value === "large",
      "switch-medium": d.value === "medium",
      "switch-small": d.value === "small"
    })), B = o(() => r.value ? {
      outline: "none",
      background: w.value
    } : {
      outline: "none",
      backgroundColor: k.value
    }), b = o(() => r.value ? {
      background: C.value
    } : {
      backgroundColor: S.value
    }), g = o(() => (l == null ? void 0 : l.value) || (t == null ? void 0 : t.value));
    function y() {
      !g.value || i.value || O(() => {
        const e = u.value, n = i.value.querySelector(e ? ".switch-label-checked" : ".switch-label-unchecked");
        n && n.scrollWidth > n.clientWidth ? f.value = e ? l == null ? void 0 : l.value : t == null ? void 0 : t.value : f.value = "";
      });
    }
    function N() {
      m.value || h.value || (u.value = r.value ? a.falseValue : a.trueValue, c.emit("update:modelValue", u.value), y());
    }
    return p(u, (e, n) => {
      e !== n && c.emit("modelValueChanged", e);
    }), p(() => a.modelValue, (e, n) => {
      e !== n && (u.value = e);
    }), F(() => {
      var e;
      a.focusOnCreated && ((e = i.value) == null || e.focus()), y();
    }), () => s("span", {
      ref: i,
      tabindex: "0",
      role: "button",
      class: V.value,
      style: B.value,
      onClick: N,
      title: f.value
    }, [g.value && s("span", {
      class: "switch-pane"
    }, [s("span", {
      class: "switch-label-checked"
    }, [l == null ? void 0 : l.value]), s("span", {
      class: "switch-label-unchecked"
    }, [t == null ? void 0 : t.value])]), s("small", {
      style: b.value
    }, [c.slots.default && c.slots.default()])]);
  }
}), q = z(M);
export {
  M as FSwitch,
  q as default,
  I as switchProps
};