vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
102 lines (101 loc) • 3.26 kB
JavaScript
import { isVNode as j, defineComponent as S, computed as g, renderSlot as z, createVNode as p } from "vue";
import { useProps as $, useNameHelper as N } from "@vexip-ui/config";
import { flatVNodes as w } from "@vexip-ui/hooks";
import { supportFlexGap as x } from "@vexip-ui/utils";
import { spaceProps as B } from "./props.mjs";
function D(s) {
return typeof s == "function" || Object.prototype.toString.call(s) === "[object Object]" && !j(s);
}
const O = Object.freeze(["start", "end", "center", "space-around", "space-between", "space-evenly"]), C = Object.freeze(["start", "end", "center", "baseline", "stretch"]), F = x();
function h(s) {
return s === "start" || s === "end" ? `flex-${s}` : s;
}
const G = /* @__PURE__ */ S({
name: "Space",
props: B,
setup(s, {
slots: y
}) {
const e = $("space", s, {
vertical: !1,
inline: !1,
tag: "div",
align: {
default: "stretch",
validator: (a) => C.includes(a)
},
justify: {
default: "start",
validator: (a) => O.includes(a)
},
noWrap: !1,
size: "default",
itemStyle: null,
gapDisabled: !F
}), t = N("space"), r = {
h: `var(${t.cv("h-gap")})`,
hh: `calc(var(${t.cv("h-gap")}) * 0.5)`,
mhh: `calc(var(${t.cv("h-gap")}) * -0.5)`,
v: `var(${t.cv("v-gap")})`,
hv: `calc(var(${t.cv("v-gap")}) * 0.5)`,
mhv: `calc(var(${t.cv("v-gap")}) * -0.5)`
}, u = g(() => {
const a = {
[t.b()]: !0,
[t.bs("vars")]: !0,
[t.bm("inherit")]: e.inherit,
[t.bm("inline")]: e.inline,
[t.bm("vertical")]: e.vertical,
[t.bm("no-wrap")]: e.vertical || e.noWrap,
[t.bm("no-gap")]: e.gapDisabled
};
return typeof e.size == "string" && e.size !== "default" && (a[t.bm(e.size)] = !0), a;
}), f = g(() => {
const {
justify: a,
align: l,
size: n
} = e, i = {
alignItems: h(l),
justifyContent: h(a)
};
if (typeof n != "string") {
const o = Array.isArray(n) ? n : [n, n];
i[t.cv("h-gap")] = `${o[0]}px`, i[t.cv("v-gap")] = `${o[1]}px`;
}
return e.gapDisabled && !e.vertical && (i.marginTop = r.mhv, i.marginBottom = r.mhv), i;
});
return () => {
let a;
const l = e.tag || "div", n = z(y, "default").children;
if (!(n != null && n.length))
return p(l, {
class: u.value,
style: f.value
}, null);
const i = w(n), o = i.length - 1, v = e.justify, d = v.startsWith("space"), m = v !== "space-between";
return p(l, {
class: u.value,
style: f.value
}, D(a = i.map((b, c) => p("div", {
key: c,
class: t.be("item"),
role: "none",
style: [e.itemStyle, e.gapDisabled ? e.vertical ? {
marginBottom: c !== o ? r.v : void 0
} : {
paddingTop: r.hv,
paddingBottom: r.hv,
marginRight: d ? m || c !== o ? r.hh : void 0 : c !== o ? r.h : void 0,
marginLeft: d && (m || c !== 0) ? r.hh : void 0
} : ""]
}, [b]))) ? a : {
default: () => [a]
});
};
}
});
export {
G as default
};
//# sourceMappingURL=space.mjs.map