vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
69 lines (68 loc) • 2.36 kB
JavaScript
import { defineComponent as b, inject as g, provide as h, computed as r, h as y } from "vue";
import { useProps as $, useNameHelper as F } from "@vexip-ui/config";
import { columnProps as v } from "./props.mjs";
import { ROW_STATE as m, breakPoints as E } from "./symbol.mjs";
const p = ["span", "offset", "pull", "push", "order"], C = b({
name: "Column",
props: v,
setup(c, { slots: a }) {
const s = $("column", c, {
tag: "div",
span: 24,
offset: null,
push: null,
pull: null,
order: null,
xs: null,
sm: null,
md: null,
lg: null,
xl: null,
xxl: null,
flex: null,
useFlex: null
}), n = g(m, null), u = F("column");
h(m, null);
const d = r(() => {
const l = (s.useFlex || (n == null ? void 0 : n.columnFlex)) && {
...(n == null ? void 0 : n.columnFlex) || {},
...s.useFlex ? s.useFlex === !0 ? { justify: "start", align: "top" } : s.useFlex : {}
}, e = [
u.b(),
u.bs("vars"),
{
[u.bm("flex")]: l,
[u.bm("inherit")]: n || s.inherit
}
];
return l && (l.justify && e.push(u.bm(l.justify)), l.align && e.push(u.bm(l.align))), p.forEach((t) => {
typeof s[t] == "number" && e.push(
t === "span" ? u.bm(`${s[t]}`) : u.bm(`${t}-${s[t]}`)
);
}), E.forEach((t) => {
const o = s[t];
!o && o !== 0 || (typeof o == "number" ? e.push(u.bm(`${t}-${o}`)) : typeof o == "object" && p.forEach((i) => {
const f = o[i];
!f && f !== 0 || e.push(i === "span" ? u.bm(`${f}`) : u.bm(`${i}-${f}`));
}));
}), e;
}), x = r(() => {
const l = s.flex, e = {};
return n && (typeof n.gap == "number" ? e.paddingInlineStart = e.paddingInlineEnd = `${n.gap / 2}px` : Array.isArray(n.gap) && (e.paddingInlineStart = e.paddingInlineEnd = `${n.gap[0] / 2}px`)), l && (typeof l == "number" ? e.flex = `${l} ${l} auto` : typeof l == "string" && (/^\d+\s\d+\s\d+(\w+)?$/.test(l) ? e.flex = l : e.flex = l === "auto" ? "1 1 auto" : `0 0 ${l}`)), e;
});
return () => y(
s.tag || "div",
{
class: d.value,
style: x.value
},
{
default: () => a.default && a.default()
}
);
}
});
export {
C as default
};
//# sourceMappingURL=column.mjs.map