@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, openBlock as f, createElementBlock as h, unref as e, normalizeClass as s, normalizeStyle 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, createSizeProp as Q, createStateProp as U, createIconProp as y, 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: Q(N),
state: U($),
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