@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
211 lines (210 loc) • 6.8 kB
JavaScript
import { defineComponent as I, useSlots as z, ref as L, computed as b, watch as D, createElementBlock as i, createBlock as R, unref as e, openBlock as a, normalizeClass as s, renderSlot as c, createVNode as o, Transition as E, withCtx as l, createCommentVNode as m, normalizeStyle as S, createElementVNode as A, mergeProps as $, createTextVNode as T, toDisplayString as M } from "vue";
import "../icon/index.mjs";
import "../renderer/index.mjs";
import { useNameHelper as j, useProps as q, createIconProp as F, useIcons as G, emitEvent as h } from "@vexip-ui/config";
import { toNumber as w } from "@vexip-ui/utils";
import { spinProps as J } from "./props.mjs";
import d from "../renderer/renderer.mjs";
import P from "../icon/icon.mjs";
const K = ["aria-busy"], te = /* @__PURE__ */ I({
name: "Spin",
__name: "spin",
props: J,
setup(V, { expose: B }) {
const r = j("spin"), t = q("spin", V, {
active: {
default: !1,
static: !0
},
icon: F(),
inner: !1,
delay: !1,
tip: "",
hideMask: !1,
maskColor: "",
maskClass: null,
transitionName: () => r.ns("fade"),
iconEffect: null,
slots: () => ({})
}), H = z(), u = G(), f = L(t.active), p = b(() => !!(t.tip || H.tip)), C = b(() => {
const n = {};
return t.maskColor && (n[r.cv("mask-bg-color")] = t.maskColor), n;
}), g = b(() => {
if (t.delay) {
if (t.delay === !0)
return { enter: 500, leave: 500 };
if (typeof t.delay == "number")
return { enter: t.delay, leave: t.delay };
if (Array.isArray(t.delay))
return { enter: w(t.delay[0]), leave: w(t.delay[1]) };
}
return { enter: 0, leave: 0 };
});
let _;
D(
() => t.active,
(n) => {
clearTimeout(_);
const y = n ? g.value.enter : g.value.leave;
y ? _ = setTimeout(() => {
f.value = n;
}, y) : f.value = n;
}
), B({
currentActive: f,
hasTip: p,
handleShow: v,
handleHide: k
});
function N(n) {
h(t.onMaskClick, n);
}
function v() {
h(t.onShow);
}
function k() {
h(t.onHide);
}
return (n, y) => e(t).inner ? (a(), R(E, {
key: 1,
appear: "",
name: e(t).transitionName,
onAfterEnter: v,
onAfterLeave: k
}, {
default: l(() => [
f.value ? (a(), i("div", {
key: 0,
class: s([e(r).b(), e(r).bs("vars"), e(r).bm("inner")])
}, [
e(t).hideMask ? m("", !0) : (a(), i("div", {
key: 0,
class: s([e(r).be("mask"), e(t).maskClass]),
style: S(C.value),
onClick: N
}, null, 6)),
c(n.$slots, "content", {}, () => [
o(e(d), {
renderer: e(t).slots.content
}, {
default: l(() => [
A("div", {
class: s(e(r).be("icon"))
}, [
c(n.$slots, "icon", {}, () => [
o(e(d), {
renderer: e(t).slots.icon
}, {
default: l(() => [
o(e(P), $(e(u).loading, {
icon: e(t).icon || e(u).loading.icon,
effect: e(t).iconEffect || e(u).loading.effect,
label: "loading"
}), null, 16, ["icon", "effect"])
]),
_: 1
}, 8, ["renderer"])
])
], 2),
p.value ? (a(), i("div", {
key: 0,
class: s(e(r).be("tip"))
}, [
c(n.$slots, "tip", {}, () => [
o(e(d), {
renderer: e(t).slots.tip
}, {
default: l(() => [
T(M(e(t).tip), 1)
]),
_: 1
}, 8, ["renderer"])
])
], 2)) : m("", !0)
]),
_: 3
}, 8, ["renderer"])
])
], 2)) : m("", !0)
]),
_: 3
}, 8, ["name"])) : (a(), i("div", {
key: 0,
class: s([e(r).b(), e(r).bs("vars"), e(t).inherit && e(r).bm("inherit")]),
"aria-busy": f.value ? "true" : void 0
}, [
c(n.$slots, "default", {}, () => [
o(e(d), {
renderer: e(t).slots.default
}, null, 8, ["renderer"])
]),
o(E, {
appear: "",
name: e(t).transitionName,
onAfterEnter: v,
onAfterLeave: k
}, {
default: l(() => [
f.value ? (a(), i("div", {
key: 0,
class: s(e(r).be("loading"))
}, [
e(t).hideMask ? m("", !0) : (a(), i("div", {
key: 0,
class: s([e(r).be("mask"), e(t).maskClass]),
style: S(C.value),
onClick: N
}, null, 6)),
c(n.$slots, "content", {}, () => [
o(e(d), {
renderer: e(t).slots.content
}, {
default: l(() => [
A("div", {
class: s(e(r).be("icon"))
}, [
c(n.$slots, "icon", {}, () => [
o(e(d), {
renderer: e(t).slots.icon
}, {
default: l(() => [
o(e(P), $(e(u).loading, {
icon: e(t).icon || e(u).loading.icon,
effect: e(t).iconEffect || e(u).loading.effect,
label: "loading"
}), null, 16, ["icon", "effect"])
]),
_: 1
}, 8, ["renderer"])
])
], 2),
p.value ? (a(), i("div", {
key: 0,
class: s(e(r).be("tip"))
}, [
c(n.$slots, "tip", {}, () => [
o(e(d), {
renderer: e(t).slots.tip
}, {
default: l(() => [
T(M(e(t).tip), 1)
]),
_: 1
}, 8, ["renderer"])
])
], 2)) : m("", !0)
]),
_: 3
}, 8, ["renderer"])
])
], 2)) : m("", !0)
]),
_: 3
}, 8, ["name"])
], 10, K));
}
});
export {
te as default
};
//# sourceMappingURL=spin.vue2.mjs.map