@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, unref as e, openBlock as a, createElementBlock as i, normalizeClass as s, renderSlot as c, createVNode as o, Transition as E, withCtx as l, normalizeStyle as S, createCommentVNode as m, createElementVNode as A, mergeProps as $, createTextVNode as T, toDisplayString as M, createBlock as R } 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