@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
232 lines (231 loc) • 6.85 kB
JavaScript
import { defineComponent as G, ref as x, computed as m, watch as J, createElementBlock as h, openBlock as f, normalizeStyle as S, unref as e, normalizeClass as s, createElementVNode as i, withModifiers as z, renderSlot as d, createVNode as r, withCtx as u, createTextVNode as b, toDisplayString as v, mergeProps as K, createBlock as P, createCommentVNode as L } from "vue";
import "../icon/index.mjs";
import "../renderer/index.mjs";
import "../form/index.mjs";
import { useProps as O, createIconProp as y, createStateProp as Q, createSizeProp as U, useNameHelper as W, useIcons as X, emitEvent as Y } from "@vexip-ui/config";
import { isPromise as Z } from "@vexip-ui/utils";
import { switchProps as ee } from "./props.mjs";
import { useFieldStore as oe } from "../form/helper.mjs";
import c from "../renderer/renderer.mjs";
import C from "../icon/icon.mjs";
const le = ["id", "aria-checked", "aria-disabled", "aria-labelledby"], ae = ["checked", "disabled", "name"], ve = /* @__PURE__ */ G({
name: "Switch",
__name: "switch",
props: ee,
emits: ["update:value"],
setup(T, { expose: V, emit: _ }) {
const {
idFor: k,
labelId: I,
state: $,
disabled: B,
loading: F,
size: N,
validateField: E,
getFieldValue: D,
setFieldValue: H
} = oe(() => {
var l;
return (l = p.value) == null ? void 0 : l.focus();
}), o = O("switch", T, {
size: U(N),
state: Q($),
value: {
default: () => D(),
static: !0
},
disabled: () => B.value,
openColor: "",
closeColor: "",
loading: () => F.value,
loadingIcon: y(),
loadingEffect: null,
openIcon: y(),
closeIcon: y(),
openText: "",
closeText: "",
onBeforeChange: {
default: null,
isFunc: !0
},
rectangle: !1,
name: {
default: "",
static: !0
},
slots: () => ({})
}), M = _, a = W("switch"), g = X(), t = x(o.value), p = x(), R = m(() => [
a.b(),
a.bs("vars"),
{
[a.bm("inherit")]: o.inherit,
[a.bm("open")]: t.value,
[a.bm(o.size)]: o.size !== "default",
[a.bm(o.state)]: o.state !== "default",
[a.bm("disabled")]: o.disabled,
[a.bm("loading")]: o.loading,
[a.bm("rectangle")]: o.rectangle
}
]), j = m(() => ({
backgroundColor: t.value ? o.openColor : o.closeColor
})), q = m(() => ({
color: t.value ? o.openColor : o.closeColor
})), w = m(() => o.disabled || o.loading);
J(
() => o.value,
(l) => {
t.value = l;
}
), V({
idFor: k,
labelId: I,
currentValue: t,
input: p,
focus: (l) => {
var n;
return (n = p.value) == null ? void 0 : n.focus(l);
},
blur: () => {
var l;
return (l = p.value) == null ? void 0 : l.blur();
}
});
async function A(l = !t.value) {
if (l === t.value) return;
let n = !0;
typeof o.onBeforeChange == "function" && (n = o.onBeforeChange(l), Z(n) && (n = await n)), n !== !1 && (t.value = l, M("update:value", l), H(l), Y(o.onChange, l), E());
}
return (l, n) => (f(), h("label", {
id: e(k),
class: s(R.value),
role: "switch",
"aria-checked": t.value,
"aria-disabled": w.value,
"aria-labelledby": e(I),
style: S(j.value)
}, [
i("input", {
ref_key: "input",
ref: p,
type: "checkbox",
class: s(e(a).be("input")),
checked: t.value,
disabled: w.value,
name: e(o).name,
onSubmit: n[0] || (n[0] = z(() => {
}, ["prevent"])),
onChange: n[1] || (n[1] = (ne) => A()),
onClick: n[2] || (n[2] = z(() => {
}, ["stop"]))
}, null, 42, ae),
i("span", {
class: s(e(a).be("placeholder")),
"aria-hidden": ""
}, [
i("span", {
class: s(e(a).be("open-text"))
}, [
d(l.$slots, "open", {}, () => [
r(e(c), {
renderer: e(o).slots.open
}, {
default: u(() => [
b(v(e(o).openText), 1)
]),
_: 1
}, 8, ["renderer"])
])
], 2),
i("span", {
class: s(e(a).be("close-text"))
}, [
d(l.$slots, "close", {}, () => [
r(e(c), {
renderer: e(o).slots.open
}, {
default: u(() => [
b(v(e(o).closeText), 1)
]),
_: 1
}, 8, ["renderer"])
])
], 2)
], 2),
i("span", {
class: s(e(a).be("signal")),
style: S(q.value)
}, [
e(o).loading ? d(l.$slots, "loading", { key: 0 }, () => [
r(e(c), {
renderer: e(o).slots.loading
}, {
default: u(() => [
r(e(C), K(e(g).loading, {
effect: e(o).loadingEffect || e(g).loading.effect,
icon: e(o).loadingIcon || e(g).loading.icon,
label: "loading"
}), null, 16, ["effect", "icon"])
]),
_: 1
}, 8, ["renderer"])
]) : d(l.$slots, "icon", {
key: 1,
value: t.value
}, () => [
r(e(c), {
renderer: e(o).slots.icon,
data: { value: t.value }
}, {
default: u(() => [
t.value && e(o).openIcon ? (f(), P(e(C), {
key: 0,
icon: e(o).openIcon
}, null, 8, ["icon"])) : !t.value && e(o).closeIcon ? (f(), P(e(C), {
key: 1,
icon: e(o).closeIcon
}, null, 8, ["icon"])) : L("", !0)
]),
_: 1
}, 8, ["renderer", "data"])
])
], 6),
i("span", {
class: s(e(a).be("label"))
}, [
t.value ? (f(), h("span", {
key: 0,
class: s(e(a).be("open-text"))
}, [
d(l.$slots, "open", {}, () => [
r(e(c), {
renderer: e(o).slots.open
}, {
default: u(() => [
b(v(e(o).openText), 1)
]),
_: 1
}, 8, ["renderer"])
])
], 2)) : (f(), h("span", {
key: 1,
class: s(e(a).be("close-text"))
}, [
d(l.$slots, "close", {}, () => [
r(e(c), {
renderer: e(o).slots.open
}, {
default: u(() => [
b(v(e(o).closeText), 1)
]),
_: 1
}, 8, ["renderer"])
])
], 2))
], 2)
], 14, le));
}
});
export {
ve as default
};
//# sourceMappingURL=switch.vue2.mjs.map