@indielayer/ui
Version:
Indielayer UI Components with Tailwind CSS build for Vue 3
353 lines (352 loc) • 13.6 kB
JavaScript
import { defineComponent as te, mergeModels as R, useModel as le, computed as B, ref as ae, watch as re, openBlock as s, createElementBlock as u, mergeProps as V, unref as d, renderSlot as f, createElementVNode as g, normalizeStyle as M, normalizeClass as k, createVNode as v, withCtx as c, createBlock as m, withModifiers as N, createCommentVNode as h, Fragment as S, renderList as $, createTextVNode as X, toDisplayString as D } from "vue";
import { useTheme as se } from "../../composables/useTheme.js";
import { useVirtualList as ie } from "../../composables/useVirtualList.js";
import oe from "./TableHead.vue.js";
import _ from "./TableHeader.vue.js";
import ne from "./TableBody.js";
import E from "./TableRow.vue.js";
import C from "./TableCell.vue.js";
import ue from "../spinner/Spinner.vue.js";
import de from "../skeleton/Skeleton.vue.js";
import ce from "../icon/Icon.vue.js";
import J from "../checkbox/Checkbox.vue.js";
import { chevronDownIcon as pe } from "../../common/icons.js";
const fe = { key: 1 }, ve = { colspan: "999" }, me = { key: 2 }, ye = { colspan: "999" }, ge = ["onClick"], ke = { colspan: "999" }, be = {
headers: {
type: Array,
default: () => []
},
items: {
type: Array,
default: () => []
},
sort: {
type: Array,
default: () => []
},
loading: Boolean,
loadingSkeleton: Boolean,
loadingLines: {
type: [Number, String],
default: 3
},
error: Boolean,
dense: Boolean,
fixed: Boolean,
striped: Boolean,
pointer: Boolean,
scrollable: {
type: Boolean,
default: !0
},
stickyHeader: {
type: Boolean,
default: !0
},
expandable: Boolean,
virtualList: Boolean,
virtualListOffsetTop: Number,
virtualListOffsetBottom: Number,
virtualListItemHeight: {
type: Number,
default: 54
},
virtualListOverscan: {
type: Number,
default: 5
},
keyProp: String,
selectable: Boolean,
singleSelect: Boolean,
autoClearSelected: {
type: Boolean,
default: !0
}
}, he = { name: "XTable" }, xe = /* @__PURE__ */ te({
...he,
props: /* @__PURE__ */ R({
...be,
items: {
type: Array,
default: () => []
}
}, {
selected: {},
selectedModifiers: {}
}),
emits: /* @__PURE__ */ R(["update:sort", "click-row"], ["update:selected"]),
setup(H, { emit: F }) {
const l = H, a = le(H, "selected");
function W(e) {
try {
return JSON.parse(JSON.stringify(e));
} catch {
return [];
}
}
const w = B(() => l.items), { list: q, containerProps: G, wrapperProps: Q } = ie(
w,
{
disabled: !l.virtualList,
itemHeight: l.virtualListItemHeight || 54,
topOffset: l.virtualListOffsetTop || 0,
bottomOffset: l.virtualListOffsetBottom || 0,
overscan: l.virtualListOverscan
}
), b = ae([]), O = F;
function U(e, r) {
if (e)
for (let t = 0; t < r.length; t++) {
const { 0: o, 1: i } = r[t].split(",");
if (e === o)
return parseInt(i) > 0 ? 1 : -1;
}
}
function Y(e) {
const r = l.sort.slice(0);
let t = !1;
for (let o = 0; o < r.length; o++) {
const { 0: i, 1: p } = r[o].split(",");
if (i === e.value) {
if (t = !0, p === "-1") {
r.splice(o, 1, `${e.value},1`);
break;
} else if (p === "1") {
r.splice(o, 1);
break;
}
}
}
t || r.push(`${e.value},-1`), O("update:sort", r);
}
function Z(e, r) {
if (!r)
return "";
const t = Array.isArray(r) ? r : r.match(/([^[.\]])+/g);
return (t == null ? void 0 : t.reduce((i, p) => i && i[p], e)) ?? "";
}
const y = B(() => l.selectable ? w.value.map((e, r) => l.keyProp ? e[l.keyProp] : r) : []), T = B(() => !l.selectable || l.singleSelect ? !1 : Array.isArray(a.value) && a.value.length > 0 && y.value.length > 0 && a.value.length === y.value.length), P = B(() => !l.selectable || l.singleSelect ? !1 : Array.isArray(a.value) && a.value.length > 0 && y.value.length > 0 && a.value.length !== y.value.length);
function x(e) {
return l.selectable ? l.singleSelect ? a.value === e : Array.isArray(a.value) && a.value.includes(e) : !1;
}
function L(e) {
l.selectable && (l.singleSelect ? a.value = a.value === e ? void 0 : e : (Array.isArray(a.value) || (a.value = []), a.value.includes(e) ? a.value = a.value.filter((r) => r !== e) : a.value = [...a.value, e]));
}
function I() {
!l.selectable || l.singleSelect || (T.value || P.value ? a.value = [] : a.value = y.value);
}
function j(e, r) {
l.selectable && l.singleSelect && L(l.keyProp ? e[l.keyProp] : r), O("click-row", e, r);
}
re(w, (e) => {
l.expandable && (b.value = W(e)), l.selectable && l.autoClearSelected && (l.singleSelect ? y.value.includes(a.value) || (a.value = void 0) : Array.isArray(a.value) && (a.value = a.value.filter((r) => y.value.includes(r))));
}, { immediate: !0 });
const { styles: K, classes: A, className: ee } = se("Table", {}, l);
return (e, r) => (s(), u("div", V({
class: [d(ee), d(A).wrapper]
}, d(G)), [
f(e.$slots, "title"),
f(e.$slots, "actions"),
g("div", V(d(Q), {
class: ["relative", {
"!h-auto": l.loading
}]
}), [
g("table", {
style: M(d(K)),
class: k(d(A).table)
}, [
v(oe, { "sticky-header": e.stickyHeader }, {
default: c(() => [
l.selectable && !l.singleSelect ? (s(), m(_, {
key: 0,
width: "40",
class: "!pl-3.5 !pr-0.5 !py-2.5 cursor-pointer",
onClick: I
}, {
default: c(() => [
v(J, {
"model-value": T.value || P.value,
indeterminate: P.value,
"hide-footer": "",
"aria-label": "Select all rows",
"skip-form-registry": "",
onClick: N(I, ["prevent", "stop"])
}, null, 8, ["model-value", "indeterminate"])
]),
_: 1
})) : h("", !0),
e.expandable ? (s(), m(_, {
key: 1,
width: "48",
class: "!p-0"
})) : h("", !0),
(s(!0), u(S, null, $(e.headers, (t, o) => (s(), m(_, {
key: o,
"text-align": t.align,
sort: U(t.value, e.sort),
sortable: t.sortable,
width: t.width,
tooltip: t.tooltip,
onClick: (i) => t.sortable ? Y(t) : null
}, {
default: c(() => [
f(e.$slots, `header-${t.value}`, { header: t }, () => [
X(D(t.text), 1)
])
]),
_: 2
}, 1032, ["text-align", "sort", "sortable", "width", "tooltip", "onClick"]))), 128))
]),
_: 3
}, 8, ["sticky-header"]),
v(d(ne), null, {
default: c(() => [
e.loading ? (s(!0), u(S, { key: 0 }, $(Number(e.loadingLines), (t, o) => (s(), m(E, {
key: o,
striped: e.striped
}, {
default: c(() => [
(s(!0), u(S, null, $(e.headers, (i, p) => (s(), m(C, {
key: p,
"text-align": i.align,
width: i.width,
dense: e.dense,
fixed: e.fixed
}, {
default: c(() => [
f(e.$slots, `loading-${i.value}`, { item: t }, () => [
v(de, {
class: k(["max-w-[60%]", {
"mx-auto": i.align === "center",
"ml-auto": i.align === "right"
}]),
shape: i.skeletonShape || "line"
}, null, 8, ["shape", "class"])
])
]),
_: 2
}, 1032, ["text-align", "width", "dense", "fixed"]))), 128))
]),
_: 2
}, 1032, ["striped"]))), 128)) : e.error ? (s(), u("tr", fe, [
g("td", ve, [
f(e.$slots, "error")
])
])) : !w.value || w.value.length === 0 ? (s(), u("tr", me, [
g("td", ye, [
f(e.$slots, "empty")
])
])) : (s(!0), u(S, { key: 3 }, $(d(q), (t, o) => {
var i, p;
return s(), u(S, {
key: e.keyProp ? t.data[e.keyProp] : t.index
}, [
v(E, {
pointer: e.pointer,
striped: e.striped,
selected: x(e.keyProp ? t.data[e.keyProp] : t.index),
"single-select": e.singleSelect,
onClick: (n) => j(t.data, t.index)
}, {
default: c(() => [
l.selectable && !e.singleSelect ? (s(), m(C, {
key: 0,
width: "40",
class: "!pl-3.5 !pr-0.5 cursor-pointer",
onClick: N((n) => L(e.keyProp ? t.data[e.keyProp] : t.index), ["stop"])
}, {
default: c(() => [
v(J, {
"model-value": x(e.keyProp ? t.data[e.keyProp] : t.index),
"hide-footer": "",
"aria-label": `Select row ${o + 1}`,
"skip-form-registry": "",
onClick: N((n) => L(e.keyProp ? t.data[e.keyProp] : t.index), ["prevent", "stop"])
}, null, 8, ["model-value", "aria-label", "onClick"])
]),
_: 2
}, 1032, ["onClick"])) : h("", !0),
e.expandable ? (s(), m(C, {
key: 1,
width: "48",
class: "!p-1"
}, {
default: c(() => {
var n;
return [
g("button", {
type: "button",
class: k(["px-3 p-2", [e.dense ? "p-0.5" : "px-3 py-2"]]),
onClick: (z) => b.value[t.index].__expanded = !b.value[t.index].__expanded
}, [
v(ce, {
icon: d(pe),
size: e.dense ? "xs" : "md",
class: k(["transition-transform", {
"rotate-180": (n = b.value[t.index]) == null ? void 0 : n.__expanded
}])
}, null, 8, ["icon", "size", "class"])
], 10, ge)
];
}),
_: 2
}, 1024)) : h("", !0),
(s(!0), u(S, null, $(e.headers, (n, z) => (s(), m(C, {
key: z,
"text-align": n.align,
truncate: n.truncate,
width: n.width,
dense: e.dense,
style: M([l.virtualList ? {
height: `${l.virtualListItemHeight}px`,
maxHeight: `${l.virtualListItemHeight}px`,
overflow: "hidden",
whiteSpace: "nowrap"
} : {}])
}, {
default: c(() => [
f(e.$slots, `item-${n.value}`, {
item: t.data
}, () => [
X(D(Z(t.data, n.value)), 1)
])
]),
_: 2
}, 1032, ["text-align", "truncate", "width", "dense", "style"]))), 128))
]),
_: 2
}, 1032, ["pointer", "striped", "selected", "single-select", "onClick"]),
e.expandable ? (s(), u("tr", {
key: 0,
class: k({ hidden: !((i = b.value[t.index]) != null && i.__expanded) })
}, [
g("td", ke, [
g("div", {
class: k(["overflow-hidden transition-opacity", [(p = b.value[t.index]) != null && p.__expanded ? "" : "opacity-0 max-h-0"]])
}, [
f(e.$slots, "expanded-row", {
item: t.data
})
], 2)
])
], 2)) : h("", !0)
], 64);
}), 128))
]),
_: 3
})
], 6),
e.loading ? (s(), u("div", {
key: 0,
class: k(d(A).loadingWrapper)
}, [
v(ue, { size: "lg" })
], 2)) : h("", !0)
], 16)
], 16));
}
});
export {
xe as default
};