vue-amazing-ui
Version:
An Amazing Vue3 UI Components Library, Using TypeScript.
37 lines (36 loc) • 1.79 kB
JavaScript
import { defineComponent as d, ref as p, computed as o, createElementBlock as v, openBlock as m, normalizeStyle as c, normalizeClass as w, renderSlot as g } from "vue";
import { useEventListener as y } from "../../utils/index.js";
const b = /* @__PURE__ */ d({
__name: "Row",
props: {
width: { default: "auto" },
gutter: { default: 0 },
wrap: { type: Boolean, default: !1 },
align: { default: "top" },
justify: { default: "start" }
},
setup(u) {
const t = u, a = {
top: "flex-start",
middle: "center",
bottom: "flex-end",
stretch: "stretch"
}, r = p(window.innerWidth), i = o(() => typeof t.gutter == "number" ? t.gutter : Array.isArray(t.gutter) ? typeof t.gutter[0] == "object" ? n(t.gutter[0]) : t.gutter[0] : typeof t.gutter == "object" ? n(t.gutter) : 0), l = o(() => Array.isArray(t.gutter) ? typeof t.gutter[1] == "object" ? n(t.gutter[1]) : t.gutter[1] : 0), f = o(() => typeof t.width == "number" ? `${t.width}px` : t.width);
y(window, "resize", s);
function s() {
r.value = window.innerWidth;
}
function n(e) {
return r.value >= 1600 && e.xxl !== void 0 ? e.xxl : r.value >= 1200 && e.xl !== void 0 ? e.xl : r.value >= 992 && e.lg !== void 0 ? e.lg : r.value >= 768 && e.md !== void 0 ? e.md : r.value >= 576 && e.sm !== void 0 ? e.sm : r.value < 576 && e.xs !== void 0 ? e.xs : 0;
}
return (e, x) => (m(), v("div", {
class: w(["grid-row-wrap", { "gutter-row": e.gutter }]),
style: c(`--xGap: ${i.value / 2}px; --justify: ${e.justify}; --align: ${a[e.align]}; width: ${f.value}; margin-left: -${i.value / 2}px; margin-right: -${i.value / 2}px; row-gap: ${l.value}px;`)
}, [
g(e.$slots, "default", {}, void 0, !0)
], 6));
}
});
export {
b as default
};