vue-amazing-ui
Version:
An Amazing Vue3 UI Components Library, Using TypeScript.
85 lines (84 loc) • 3.01 kB
JavaScript
import { defineComponent as y, ref as g, createElementBlock as c, openBlock as d, normalizeStyle as u, normalizeClass as h, unref as n, createElementVNode as o, createCommentVNode as m, renderSlot as r, createTextVNode as p, toDisplayString as f, nextTick as S } from "vue";
import { useInject as b } from "../utils/index.js";
const B = { class: "switch-inner" }, $ = { class: "inner-checked" }, C = { class: "inner-unchecked" }, N = {
key: 0,
class: "circular",
viewBox: "0 0 50 50"
}, j = /* @__PURE__ */ y({
__name: "Switch",
props: {
checked: { default: void 0 },
checkedValue: { type: [Boolean, String, Number], default: !0 },
unchecked: { default: void 0 },
uncheckedValue: { type: [Boolean, String, Number], default: !1 },
loading: { type: Boolean, default: !1 },
disabled: { type: Boolean, default: !1 },
size: { default: "middle" },
rippleColor: { default: void 0 },
circleStyle: { default: () => ({}) },
modelValue: { type: [Boolean, String, Number], default: !1 }
},
emits: ["update:modelValue", "change"],
setup(k, { emit: v }) {
const l = k, a = g(!1), { colorPalettes: i } = b("Switch"), s = v;
function w() {
l.modelValue === l.checkedValue ? (s("update:modelValue", l.uncheckedValue), s("change", l.uncheckedValue)) : (s("update:modelValue", l.checkedValue), s("change", l.checkedValue)), a.value ? (a.value = !1, S(() => {
a.value = !0;
})) : a.value = !0;
}
function V() {
a.value = !1;
}
return (e, t) => (d(), c("div", {
class: h(["switch-wrap", {
"switch-loading": e.loading,
"switch-small": e.size === "small",
"switch-large": e.size === "large",
"switch-checked": e.modelValue === e.checkedValue,
"switch-disabled": e.disabled
}]),
style: u(`
--switch-primary-color: ${n(i)[5]};
--switch-primary-color-hover: ${n(i)[4]};
--switch-ripple-color: ${e.rippleColor || n(i)[5]};
`),
onClick: t[0] || (t[0] = (z) => e.disabled || e.loading ? () => !1 : w())
}, [
o("div", B, [
o("span", $, [
r(e.$slots, "checked", {}, () => [
p(f(e.checked), 1)
], !0)
]),
o("span", C, [
r(e.$slots, "unchecked", {}, () => [
p(f(e.unchecked), 1)
], !0)
])
]),
o("div", {
class: "switch-circle",
style: u(e.circleStyle)
}, [
e.loading ? (d(), c("svg", N, [...t[1] || (t[1] = [
o("circle", {
class: "path",
cx: "25",
cy: "25",
r: "20",
fill: "none"
}, null, -1)
])])) : m("", !0),
r(e.$slots, "node", { checked: e.modelValue }, void 0, !0)
], 4),
e.disabled ? m("", !0) : (d(), c("div", {
key: 0,
class: h(["switch-wave", { "wave-active": a.value }]),
onAnimationend: V
}, null, 34))
], 6));
}
});
export {
j as default
};