tyh-ui2/es/switch/src/index.js

The next generation ui component library of tyh-ui is based on vue3 Version, fully embrace vue3.

import { defineComponent as m, ref as a, computed as s, openBlock as n, createElementBlock as c, Fragment as x, normalizeStyle as o, toDisplayString as i, createCommentVNode as h, createElementVNode as p, normalizeClass as V, unref as d } from "vue";
import { Props as C } from "./index2.js";
const $ = m({
  name: "TyhSwitch"
}), S = /* @__PURE__ */ m({
  ...$,
  props: C,
  emits: ["update:modelValue", "change"],
  setup(w, { emit: r }) {
    const l = w, t = a(l.modelValue), f = () => {
      l.disabled || (t.value = !t.value, r("update:modelValue", t.value), r("change", t.value));
    }, u = s(() => l.modelValue ? l.openColor : l.closeColor), v = s(() => {
      const e = a(l.width);
      return e.value < 20 && (e.value = 20), {
        width: `${e.value}px`,
        height: `${e.value / 2}px`,
        backgroundColor: u.value
      };
    }), y = s(() => {
      const e = a(l.width);
      return e.value < 20 && (e.value = 20), {
        width: `${e.value / 2}px`,
        height: `${e.value / 2}px`,
        left: l.modelValue ? `${e.value / 2}px` : "0px",
        border: `2px solid  ${u.value}`
      };
    });
    return (e, g) => (n(), c(x, null, [
      e.closeText ? (n(), c("span", {
        key: 0,
        class: "tyh-switch-closeText",
        style: o([`color:${t.value ? "#333" : "#3a6ff4"}`])
      }, i(e.closeText), 5)) : h("", !0),
      p("span", {
        class: V(["tyh-switch", { "tyh-switch-disabled": e.disabled }]),
        style: o(d(v)),
        onClick: f
      }, [
        p("span", {
          class: "tyh-switch-roll",
          style: o(d(y))
        }, null, 4)
      ], 6),
      e.openText ? (n(), c("span", {
        key: 1,
        class: "tyh-switch-openText",
        style: o([`color:${e.modelValue ? "#3a6ff4" : "#333"}`])
      }, i(e.openText), 5)) : h("", !0)
    ], 64));
  }
});
export {
  S as default
};