vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
98 lines (97 loc) • 3.25 kB
JavaScript
import { defineComponent as S, inject as y, provide as F, reactive as R, computed as a, watch as P, h as $ } from "vue";
import { useProps as j, useNameHelper as v } from "@vexip-ui/config";
import { isDefined as g, has as N } from "@vexip-ui/utils";
import { cellProps as B } from "./props.mjs";
import { currentBreakPoint as D, breakPoints as d } from "./helper.mjs";
import { GRID_STATE as w } from "./symbol.mjs";
const G = S({
name: "Cell",
props: B,
setup(b, { slots: f }) {
const o = j("cell", b, {
tag: "div",
top: "auto",
left: "auto",
width: null,
height: 1,
right: "",
bottom: "",
xs: null,
sm: null,
md: null,
lg: null,
xl: null,
xxl: null,
useFlex: null
}), l = y(w, null), s = v("cell");
F(w, null);
const e = R({
top: o.top,
right: o.right,
bottom: o.bottom,
left: o.left,
width: o.width,
height: o.height
}), m = Object.keys(e), c = a(() => g(o.width) ? o.width : l != null && l.columns && typeof l.columns == "number" ? l.columns : 1);
P(
D,
(t) => {
const i = C(t);
i ? typeof i == "number" ? (m.forEach((n) => {
e[n] = o[n];
}), e.width = i) : (m.forEach((n) => {
e[n] = N(i, n) ? i[n] : o[n];
}), e.width = e.width ?? c.value) : (m.forEach((n) => {
e[n] = o[n];
}), e.width = c.value);
},
{ immediate: !0 }
);
const x = a(() => {
const t = o.useFlex !== !1 && (o.useFlex || (l == null ? void 0 : l.cellFlex)) && {
...(l == null ? void 0 : l.cellFlex) || {},
...o.useFlex ? o.useFlex === !0 ? { justify: "start", align: "top" } : o.useFlex : {}
}, i = {
[s.b()]: !0,
[s.bm("inherit")]: l || o.inherit,
[s.bm("flex")]: t
};
return t && (t.justify && (i[s.bm(t.justify)] = !0), t.align && (i[s.bm(t.align)] = !0)), i;
}), E = a(() => {
const t = {}, i = u(e.top), n = u(e.right), h = u(e.bottom), p = u(e.left);
return i && h ? (t.gridRowStart = r(e.top), t.gridRowEnd = r(e.bottom)) : i ? (t.gridRowStart = r(e.top), t.gridRowEnd = `span ${e.height}`) : h ? (t.gridRowStart = `span ${e.height}`, t.gridRowEnd = r(e.bottom)) : t.gridRowEnd = `span ${e.height}`, p && n ? (t.gridColumnStart = r(e.left), t.gridColumnEnd = r(e.right)) : p ? (t.gridColumnStart = r(e.left), t.gridColumnEnd = `span ${e.width}`) : n ? (t.gridColumnStart = `span ${e.width}`, t.gridColumnEnd = r(e.right)) : t.gridColumnStart = `span ${e.width}`, t;
});
function u(t) {
return t === 0 || t && t !== "auto";
}
function r(t) {
return typeof t == "number" ? t + 1 : t;
}
function C(t) {
const i = d.findIndex((n) => n === t);
if (~i) {
for (let n = i; n >= 0; --n)
if (g(o[d[n]]))
return o[d[n]];
}
return null;
}
return () => $(
o.tag || "div",
{
class: x.value,
style: E.value
},
{
default: () => {
var t;
return (t = f.default) == null ? void 0 : t.call(f);
}
}
);
}
});
export {
G as default
};
//# sourceMappingURL=cell.mjs.map