t-fighting-design
Version:
Fighting design can quickly build interactive interfaces in vue3 applications, which looks good.
35 lines (34 loc) • 938 B
JavaScript
import { defineComponent as a, computed as i, openBlock as p, createElementBlock as m, normalizeClass as f, unref as s, createVNode as u } from "vue";
import { Props as d, Emits as _ } from "./index3.js";
import { FSvgIcon as w } from "../../svg-icon/index.js";
const V = a({
name: "FSwap"
}), z = /* @__PURE__ */ a({
...V,
props: d,
emits: _,
setup(t, { emit: l }) {
const o = t, c = () => {
l("update:modelValue", !o.modelValue), o.onChange && o.onChange(!o.modelValue);
}, r = i(() => {
const { modelValue: e, type: n } = o;
return [
"f-swap",
e ? `f-swap__${n}-on` : `f-swap__${n}-off`
];
});
return (e, n) => (p(), m("div", {
role: "switch",
class: f(s(r)),
onClick: c
}, [
u(s(w), {
icon: e.modelValue ? e.iconOn : e.iconOff,
size: e.size
}, null, 8, ["icon", "size"])
], 2));
}
});
export {
z as default
};