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