t-fighting-design
Version:
Fighting design can quickly build interactive interfaces in vue3 applications, which looks good.
71 lines (70 loc) • 2.11 kB
JavaScript
import { defineComponent as u, computed as c, openBlock as s, createElementBlock as r, normalizeClass as t, toDisplayString as d, createCommentVNode as n, createElementVNode as m, unref as a, normalizeStyle as p, createBlock as k } from "vue";
import { Props as g, Emits as y } from "./index3.js";
import { FSvgIcon as z } from "../../svg-icon/index.js";
const S = u({
name: "FSwitch"
}), E = /* @__PURE__ */ u({
...S,
props: g,
emits: y,
setup(f, { emit: h }) {
const o = f, _ = () => {
o.disabled || (h("update:modelValue", !o.modelValue), o.change && o.change(!o.modelValue));
}, w = c(() => {
const { modelValue: e, closeColor: l, openColor: i, size: V } = o;
return {
right: e ? "0px" : {
large: "24px",
middle: "20px",
small: "16px"
}[V],
borderColor: e ? i : l
};
}), C = c(() => {
const { size: e, modelValue: l, square: i } = o;
return [
"f-switch__input",
{
[`f-switch__${e}`]: e,
"f-switch__close": !l,
"f-switch__square": i
}
];
});
return (e, l) => (s(), r("div", {
role: "switch",
class: t(["f-switch", { "f-switch__disabled": e.disabled }])
}, [
e.closeText ? (s(), r("span", {
key: 0,
class: t([
"f-switch__right-text",
{ "f-switch__text-active": !e.modelValue }
])
}, d(e.closeText), 3)) : n("", !0),
m("div", {
class: t(a(C)),
style: p({ background: e.modelValue ? e.openColor : e.closeColor }),
onClick: _
}, [
m("span", {
class: "f-switch__roll",
style: p(a(w))
}, [
e.icon ? (s(), k(a(z), {
key: 0,
icon: e.icon,
size: 14
}, null, 8, ["icon"])) : n("", !0)
], 4)
], 6),
e.openText ? (s(), r("span", {
key: 1,
class: t(["f-switch__left-text", { "f-switch__text-active": e.modelValue }])
}, d(e.openText), 3)) : n("", !0)
], 2));
}
});
export {
E as default
};