@indielayer/ui
Version:
Indielayer UI Components with Tailwind CSS build for Vue 3
242 lines (241 loc) • 6.58 kB
JavaScript
import { defineComponent as G, ref as D, computed as y, watch as F, openBlock as c, createBlock as N, resolveDynamicComponent as X, normalizeClass as j, normalizeStyle as m, withCtx as q, createElementBlock as p, Fragment as z, renderList as R, renderSlot as T, createElementVNode as J, unref as b } from "vue";
import { useIsRtl as K } from "../../core/useIsRtl.js";
import { useVirtualizer as O } from "../../core/useVirtualizer.js";
const M = ["aria-rowindex"], Q = {
name: "XVirtualGrid"
}, ee = /* @__PURE__ */ G({
...Q,
props: {
cellProps: {},
class: {},
columnCount: {},
columnWidth: {},
defaultHeight: { default: 0 },
defaultWidth: { default: 0 },
dir: {},
onCellsRendered: {},
onResize: {},
overscanCount: { default: 3 },
rowCount: {},
rowHeight: {},
style: {},
tag: { default: "div" }
},
setup(V, { expose: k }) {
const o = V, r = D(null), f = y(() => o.cellProps || {}), u = K(r, o.dir), {
getCellBounds: B,
getEstimatedSize: $,
startIndexOverscan: x,
startIndexVisible: E,
scrollToIndex: v,
stopIndexOverscan: I,
stopIndexVisible: H
} = O({
containerElement: r,
containerStyle: o.style,
defaultContainerSize: o.defaultWidth,
direction: "horizontal",
isRtl: u.value,
itemCount: o.columnCount,
itemProps: f.value,
itemSize: o.columnWidth,
onResize: o.onResize,
overscanCount: o.overscanCount
}), {
getCellBounds: W,
getEstimatedSize: P,
startIndexOverscan: w,
startIndexVisible: _,
scrollToIndex: C,
stopIndexOverscan: h,
stopIndexVisible: A
} = O({
containerElement: r,
containerStyle: o.style,
defaultContainerSize: o.defaultHeight,
direction: "vertical",
itemCount: o.rowCount,
itemProps: f.value,
itemSize: o.rowHeight,
onResize: o.onResize,
overscanCount: o.overscanCount
});
k({
get element() {
return r.value;
},
scrollToCell({
behavior: e = "auto",
columnAlign: n = "auto",
columnIndex: s,
rowAlign: t = "auto",
rowIndex: l
}) {
var d, S, g;
const i = v({
align: n,
containerScrollOffset: ((d = r.value) == null ? void 0 : d.scrollLeft) ?? 0,
index: s
}), a = C({
align: t,
containerScrollOffset: ((S = r.value) == null ? void 0 : S.scrollTop) ?? 0,
index: l
});
typeof ((g = r.value) == null ? void 0 : g.scrollTo) == "function" && i !== void 0 && a !== void 0 && r.value.scrollTo({
behavior: e,
left: i,
top: a
});
},
scrollToColumn({
align: e = "auto",
behavior: n = "auto",
index: s
}) {
var l, i;
const t = v({
align: e,
containerScrollOffset: ((l = r.value) == null ? void 0 : l.scrollLeft) ?? 0,
index: s
});
typeof ((i = r.value) == null ? void 0 : i.scrollTo) == "function" && t !== void 0 && r.value.scrollTo({
behavior: n,
left: t
});
},
scrollToRow({
align: e = "auto",
behavior: n = "auto",
index: s
}) {
var l, i;
const t = C({
align: e,
containerScrollOffset: ((l = r.value) == null ? void 0 : l.scrollTop) ?? 0,
index: s
});
typeof ((i = r.value) == null ? void 0 : i.scrollTo) == "function" && t !== void 0 && r.value.scrollTo({
behavior: n,
top: t
});
}
}), F(
[
x,
E,
I,
H,
w,
_,
h,
A
],
([
e,
n,
s,
t,
l,
i,
a,
d
]) => {
e >= 0 && s >= 0 && l >= 0 && a >= 0 && o.onCellsRendered && o.onCellsRendered(
{
columnStartIndex: n,
columnStopIndex: t,
rowStartIndex: i,
rowStopIndex: d
},
{
columnStartIndex: e,
columnStopIndex: s,
rowStartIndex: l,
rowStopIndex: a
}
);
}
);
const L = y(() => {
const e = [];
if (o.columnCount > 0 && o.rowCount > 0)
for (let n = w.value; n <= h.value; n++) {
const s = W(n), t = [];
for (let l = x.value; l <= I.value; l++) {
const i = B(l), a = {
position: "absolute",
left: u.value ? void 0 : 0,
right: u.value ? 0 : void 0,
transform: `translate(${u.value ? -i.scrollOffset : i.scrollOffset}px, ${s.scrollOffset}px)`,
height: `${s.size}px`,
width: `${i.size}px`
};
t.push({
key: l,
columnIndex: l,
rowIndex: n,
style: a,
ariaAttributes: {
"aria-colindex": l + 1,
role: "gridcell"
}
});
}
e.push({
key: n,
rowIndex: n,
columns: t,
ariaRowIndex: n + 1
});
}
return e;
});
return (e, n) => (c(), N(X(e.tag), {
ref_key: "element",
ref: r,
class: j(e.$props.class),
style: m({
position: "relative",
maxHeight: "100%",
maxWidth: "100%",
flexGrow: 1,
overflow: "auto",
...e.style
}),
dir: e.dir,
role: "grid",
"aria-colcount": e.columnCount,
"aria-rowcount": e.rowCount
}, {
default: q(() => [
(c(!0), p(z, null, R(L.value, (s) => (c(), p("div", {
key: s.key,
role: "row",
"aria-rowindex": s.ariaRowIndex
}, [
(c(!0), p(z, null, R(s.columns, (t) => T(e.$slots, "cell", {
key: t.key,
columnIndex: t.columnIndex,
rowIndex: t.rowIndex,
style: m(t.style),
ariaAttributes: t.ariaAttributes,
props: f.value
})), 128))
], 8, M))), 128)),
T(e.$slots, "default"),
J("div", {
"aria-hidden": "",
style: m({
height: `${b(P)}px`,
width: `${b($)}px`,
zIndex: -1
})
}, null, 4)
]),
_: 3
}, 8, ["class", "style", "dir", "aria-colcount", "aria-rowcount"]));
}
});
export {
ee as default
};