maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
658 lines (657 loc) • 25.1 kB
JavaScript
import { defineComponent as Me, useCssVars as Ne, defineAsyncComponent as f, computed as d, toRefs as Te, provide as we, ref as k, watch as R, useSlots as Le, onBeforeMount as Oe, openBlock as s, createElementBlock as v, normalizeClass as g, renderSlot as p, createElementVNode as h, toDisplayString as y, createCommentVNode as r, createBlock as S, unref as o, createVNode as i, normalizeStyle as oe, createTextVNode as M, withCtx as c, Fragment as G, renderList as J } from "vue";
import '../assets/MazTable.zJ2YXDrE.css';const Ee = {
key: 0,
class: "m-table-header"
}, Re = {
key: 0,
class: "m-table-spacer"
}, Ke = { class: "m-table-header-title" }, De = {
key: 1,
class: "m-table-header-search"
}, Fe = { key: 0 }, He = { key: 1 }, Ue = {
key: 0,
class: "m-table-sort-icon-wrapper"
}, Qe = { class: "maz-text-center maz-text-muted" }, qe = {
key: 1,
class: "m-table-footer"
}, Ye = {
key: 0,
class: "m-table-footer-pagination"
}, je = { class: "m-table-footer-pagination-items-per-page" }, Ge = { class: "maz-hidden maz-text-sm tab-s:maz-block" }, Je = {
key: 0,
class: "maz-whitespace-nowrap maz-text-sm"
}, We = { class: "m-table-footer-pagination-buttons" }, Xe = "maz-table", Ze = /* @__PURE__ */ Me({
__name: "MazTable",
props: {
tableClass: { default: void 0 },
tableStyle: { type: [Boolean, null, String, Object, Array], default: void 0 },
modelValue: { default: void 0 },
size: { default: "md" },
inputSize: {},
title: { default: void 0 },
headers: { default: void 0 },
sortable: { type: Boolean },
headersAlign: { default: "left" },
rows: { default: void 0 },
hoverable: { type: Boolean },
search: { type: Boolean },
noSearchInRow: { type: Boolean },
searchPlaceholder: { default: "Search" },
noSearchBy: { type: Boolean },
searchByPlaceholder: { default: "Search by" },
searchByAllLabel: { default: "All" },
searchQuery: { default: void 0 },
backgroundOdd: { type: Boolean },
backgroundEven: { type: Boolean },
elevation: { type: Boolean },
divider: { type: Boolean },
caption: { default: void 0 },
captionSide: { default: "bottom" },
pagination: { type: Boolean },
page: { default: 1 },
pageSize: { default: 20 },
totalPages: { default: void 0 },
paginationAllLabel: { default: "All" },
noPaginateRows: { type: Boolean },
totalItems: { default: void 0 },
loading: { type: Boolean },
selectable: { type: Boolean },
selectedKey: { default: void 0 },
tableLayout: { default: void 0 },
color: { default: "primary" },
translations: {},
roundedSize: { default: "lg" },
scrollable: { type: Boolean, default: !1 }
},
emits: ["update:model-value", "update:search-query", "update:page", "update:page-size"],
setup(N, { emit: K }) {
Ne((e) => ({
"08a80db6": e.tableLayout,
df8ff50a: e.captionSide
}));
const a = N, $ = K, D = f(() => import("./arrow-up.DjSlktWl.mjs")), W = f(() => import("./chevron-double-left.D4-NpyrF.mjs")), X = f(() => import("./chevron-left.BqVOLRdC.mjs")), se = f(() => import("./magnifying-glass.-nBiyXot.mjs")), T = f(() => import("./MazBtn.B6UiTgcv.mjs")), Z = f(() => import("./MazCheckbox.CYeDQcMp.mjs")), ne = f(() => import("./MazInput.CwPPyy_i.mjs")), ue = f(() => import("./MazLoadingBar.LkmX0AHd.mjs")), _ = f(() => import("./MazSelect.CZ8-FJbx.mjs")), w = f(() => import("./MazTableCell.CN6g3CD7.mjs")), F = f(() => import("./MazTableRow.BjoUmiPj.mjs")), H = f(() => import("./MazTableTitle.Dh-2buat.mjs")), re = {
noResults: "No results",
actionHeader: "Actions",
searchByAllLabel: "All",
searchByPlaceholder: "Search by",
searchPlaceholder: "Search",
paginationAllLabel: "All",
paginationRowsPerPage: "Rows per page",
paginationOf: "of"
}, C = d(() => {
const { translations: e, searchByAllLabel: t, searchByPlaceholder: l, searchPlaceholder: n, paginationAllLabel: u } = a;
return {
...re,
...e,
searchByAllLabel: t,
searchByPlaceholder: l,
searchPlaceholder: n,
paginationAllLabel: u
};
}), ie = d(
() => a.divider && !a.backgroundEven && !a.backgroundOdd
), { size: m, hoverable: de, backgroundEven: ce, backgroundOdd: ve } = Te(a);
we(Xe, {
size: m,
hoverable: de,
backgroundEven: ce,
backgroundOdd: ve
});
const U = k(le()), Q = d(() => a.selectable || !!a.selectedKey), L = k(a.page);
R(
() => a.page,
(e) => {
L.value = e;
}
);
const b = d({
get: () => L.value,
set: (e) => {
L.value = e, $("update:page", e);
}
}), pe = d(() => [
{ label: C.value.paginationAllLabel, value: Number.POSITIVE_INFINITY },
{ label: 5, value: 5 },
{ label: 10, value: 10 },
{ label: 20, value: 20 },
{ label: 50, value: 50 },
{ label: 100, value: 100 },
{ label: 200, value: 200 }
]), q = k(a.pageSize);
R(
() => a.pageSize,
(e) => {
q.value = e;
}
);
const B = d({
get: () => q.value,
set: (e) => {
q.value = e, $("update:page-size", e);
}
}), I = d(() => {
var e;
return a.totalPages ?? (B.value === Number.POSITIVE_INFINITY || !((e = a.rows) != null && e.length)) ? 1 : Math.ceil(a.rows.length / B.value);
});
function fe() {
b.value = 1;
}
function me() {
b.value = I.value;
}
function be() {
b.value = b.value - 1;
}
function ge() {
b.value = b.value + 1;
}
const x = d(() => {
if (!a.pagination || a.noPaginateRows || B.value === Number.POSITIVE_INFINITY)
return U.value;
const e = (L.value - 1) * B.value, t = e + B.value;
return U.value.slice(e, t);
});
R(
() => [a.rows, a.modelValue],
() => {
U.value = le();
}
);
const A = k(), z = k(), V = k(Ce()), O = k(), ye = d(() => [
{ label: a.searchByAllLabel, value: null },
...V.value.map((e) => ({
label: e.label,
value: e.key
}))
]), Y = k(a.searchQuery);
R(
() => a.searchQuery,
(e) => {
Y.value = e;
}
);
const E = d({
get: () => Y.value,
set: (e) => {
Y.value = e, $("update:search-query", e);
}
});
function ze(e) {
return [...e].sort((t, l) => {
if (A.value === void 0 || z.value === void 0)
return 0;
const n = t[V.value[A.value].key], u = l[V.value[A.value].key];
return typeof n == "string" && typeof u == "string" ? z.value === "ASC" ? n.localeCompare(u) : u.localeCompare(n) : z.value === "ASC" ? n - u : u - n;
});
}
function he(e) {
if (a.noSearchInRow || typeof E.value != "string")
return x.value;
const t = E.value.toLowerCase();
return [...e].filter((l) => O.value ? String(l[O.value]).toLowerCase().includes(t) : Object.values(l).some((n) => typeof n == "string" || typeof n == "number" || typeof n == "boolean" ? String(n).toLowerCase().includes(t) : !1));
}
const P = d(() => {
const e = he(x.value);
return ze(e);
}), Se = Le(), ee = d(() => a.search || !!a.title || !!Se.title), ke = d(() => a.pagination);
function Ce() {
var e;
return ((e = a.headers) == null ? void 0 : e.map(
(t) => typeof t == "string" ? { label: t, align: a.headersAlign } : { align: a.headersAlign, thHeaders: t.headers, ...t }
)) ?? [];
}
function le() {
var e;
return ((e = a.rows) == null ? void 0 : e.map((t) => {
var l;
return {
selected: (l = a.modelValue) == null ? void 0 : l.includes(a.selectedKey ? t[a.selectedKey] : t),
...t
};
})) ?? [];
}
function Be(e) {
if (e === A.value) {
const t = z.value === "DESC" ? "ASC" : void 0;
z.value = z.value === void 0 ? "DESC" : t;
} else
z.value = "DESC";
A.value = z.value === void 0 ? void 0 : e;
}
const ae = d({
get: () => P.value.every((e) => e.selected) ?? !1,
set: Ve
});
function Ve(e) {
for (const t of P.value)
t.selected = e;
j();
}
function Pe(e, t) {
P.value[t].selected = e, j();
}
function j(e) {
e = e ?? te();
const t = e != null && e.length ? e : void 0;
$("update:model-value", t);
}
function te() {
return P.value.filter((e) => e.selected).map((e) => a.selectedKey ? e[a.selectedKey] : e);
}
return Oe(() => {
const e = te();
e != null && e.length && j(e);
}), (e, t) => (s(), v(
"div",
{
class: g(["m-table m-reset-css", { "--has-header": ee.value }])
},
[
ee.value ? (s(), v("div", Ee, [
e.title || e.$slots.title ? (s(), v("div", Re, [
p(e.$slots, "title", {}, () => [
h(
"span",
Ke,
y(e.title),
1
/* TEXT */
)
], !0)
])) : r("v-if", !0),
e.search ? (s(), v("div", De, [
e.noSearchBy ? r("v-if", !0) : (s(), S(o(_), {
key: 0,
modelValue: O.value,
"onUpdate:modelValue": t[0] || (t[0] = (l) => O.value = l),
"rounded-size": e.roundedSize,
color: e.color,
style: { width: "8rem" },
placeholder: C.value.searchByPlaceholder,
size: e.inputSize ?? o(m),
options: ye.value
}, null, 8, ["modelValue", "rounded-size", "color", "placeholder", "size", "options"])),
i(o(ne), {
modelValue: E.value,
"onUpdate:modelValue": t[1] || (t[1] = (l) => E.value = l),
size: e.inputSize ?? o(m),
"rounded-size": e.roundedSize,
color: e.color,
debounce: 300,
placeholder: C.value.searchPlaceholder,
"left-icon": o(se)
}, null, 8, ["modelValue", "size", "rounded-size", "color", "placeholder", "left-icon"])
])) : r("v-if", !0)
])) : r("v-if", !0),
h(
"div",
{
class: g(["m-table-wrapper", [`--rounded-${e.roundedSize}`, {
"--scrollable": e.scrollable
}]])
},
[
h(
"table",
{
class: g([{ "--elevation": e.elevation, "--has-layout": e.tableLayout }, e.tableClass]),
style: oe(e.tableStyle)
},
[
e.caption || e.$slots.caption ? (s(), v("caption", Fe, [
p(e.$slots, "caption", {}, () => [
M(
y(e.caption),
1
/* TEXT */
)
], !0)
])) : r("v-if", !0),
V.value ? (s(), v("thead", He, [
p(e.$slots, "thead", {}, () => [
i(o(F), { "no-hoverable": "" }, {
default: c(() => [
Q.value ? (s(), S(o(H), {
key: 0,
align: "left",
class: g([`--${o(m)}`, "m-table-select-column"])
}, {
default: c(() => [
i(o(Z), {
modelValue: ae.value,
"onUpdate:modelValue": t[2] || (t[2] = (l) => ae.value = l),
size: "sm"
}, null, 8, ["modelValue"])
]),
_: 1
/* STABLE */
}, 8, ["class"])) : r("v-if", !0),
(s(!0), v(
G,
null,
J(V.value, (l, n) => (s(), S(o(H), {
key: n,
scope: l.scope,
align: l.align,
rowspan: l.rowspan,
colspan: l.colspan,
headers: l.thHeaders,
style: oe({ width: l.width, textAlign: l.align }),
class: g(["maz-group", [
{ "--hidden": l.hidden, "--sortable": l.sortable ?? e.sortable },
l.classes,
`--${o(m)}`
]]),
onClick: (u) => (l.sortable ?? e.sortable) && Be(n)
}, {
default: c(() => [
h(
"span",
{
class: g({ "maz-sr-only": l.srOnly })
},
[
p(e.$slots, "header", {
header: l,
label: l.label
}, () => [
p(e.$slots, `header-label-${l.key}`, {
header: l,
label: l.label
}, () => [
M(
y(l.label),
1
/* TEXT */
)
], !0),
l.sortable ?? e.sortable ? (s(), v("div", Ue, [
i(o(D), {
class: g(["m-table-sort-icon maz-hidden group-hover:maz-block", {
"--sorted": n === A.value,
"--up": z.value === "DESC",
"--down": z.value === "ASC"
}])
}, null, 8, ["class"])
])) : r("v-if", !0)
], !0)
],
2
/* CLASS */
)
]),
_: 2
/* DYNAMIC */
}, 1032, ["scope", "align", "rowspan", "colspan", "headers", "style", "class", "onClick"]))),
128
/* KEYED_FRAGMENT */
)),
e.$slots.actions ? (s(), S(o(H), {
key: 1,
align: "left",
class: g(`--${o(m)}`)
}, {
default: c(() => [
p(e.$slots, "actions-header", {}, () => [
M(
y(C.value.actionHeader),
1
/* TEXT */
)
], !0)
]),
_: 3
/* FORWARDED */
}, 8, ["class"])) : r("v-if", !0)
]),
_: 3
/* FORWARDED */
})
], !0)
])) : r("v-if", !0),
e.loading ? (s(), S(o(ue), {
key: 2,
color: e.color,
class: "!maz-absolute"
}, null, 8, ["color"])) : r("v-if", !0),
h(
"tbody",
{
class: g({ "--divider": ie.value })
},
[
p(e.$slots, "default", {}, () => [
P.value.length > 0 ? (s(!0), v(
G,
{ key: 0 },
J(P.value, (l, n) => (s(), S(o(F), {
key: n,
class: g(l.classes),
onClick: (u) => l.action && l.action(l)
}, {
default: c(() => [
Q.value ? (s(), S(
o(w),
{
key: 0,
class: "m-table-select-column"
},
{
default: c(() => [
p(e.$slots, "select", {
row: l,
selected: l.selected
}, () => [
i(o(Z), {
size: "sm",
"model-value": l.selected,
"onUpdate:modelValue": (u) => Pe(u, n)
}, null, 8, ["model-value", "onUpdate:modelValue"])
], !0)
]),
_: 2
/* DYNAMIC */
},
1024
/* DYNAMIC_SLOTS */
)) : r("v-if", !0),
(s(!0), v(
G,
null,
J(V.value, ({ key: u, align: $e, classes: Ae }, Ie) => (s(), S(o(w), {
key: Ie,
align: $e,
class: g(Ae)
}, {
default: c(() => [
u ? p(e.$slots, "cell", {
key: 0,
row: l,
value: l[u]
}, () => [
p(e.$slots, `cell-${u}`, {
row: l,
value: l[u]
}, () => [
M(
y(l[u]),
1
/* TEXT */
)
], !0)
], !0) : r("v-if", !0)
]),
_: 2
/* DYNAMIC */
}, 1032, ["align", "class"]))),
128
/* KEYED_FRAGMENT */
)),
e.$slots.actions ? (s(), S(
o(w),
{ key: 1 },
{
default: c(() => [
p(e.$slots, "actions", { row: l }, void 0, !0)
]),
_: 2
/* DYNAMIC */
},
1024
/* DYNAMIC_SLOTS */
)) : r("v-if", !0)
]),
_: 2
/* DYNAMIC */
}, 1032, ["class", "onClick"]))),
128
/* KEYED_FRAGMENT */
)) : (s(), S(o(F), { key: 1 }, {
default: c(() => [
i(o(w), {
colspan: V.value.length + (Q.value ? 1 : 0) + (e.$slots.actions ? 1 : 0)
}, {
default: c(() => [
p(e.$slots, "no-results", {}, () => [
h("p", Qe, [
p(e.$slots, "no-results-text", {}, () => [
M(
y(C.value.noResults),
1
/* TEXT */
)
], !0)
])
], !0)
]),
_: 3
/* FORWARDED */
}, 8, ["colspan"])
]),
_: 3
/* FORWARDED */
}))
], !0)
],
2
/* CLASS */
)
],
6
/* CLASS, STYLE */
)
],
2
/* CLASS */
),
ke.value ? (s(), v("div", qe, [
t[4] || (t[4] = h(
"div",
{ class: "m-table-spacer" },
null,
-1
/* HOISTED */
)),
e.pagination ? (s(), v("div", Ye, [
h("div", je, [
h(
"span",
Ge,
y(C.value.paginationRowsPerPage),
1
/* TEXT */
),
i(o(_), {
modelValue: B.value,
"onUpdate:modelValue": t[3] || (t[3] = (l) => B.value = l),
options: pe.value,
"rounded-size": e.roundedSize,
size: e.inputSize ?? o(m),
color: e.color,
"list-position": "top",
style: { width: "5rem" }
}, null, 8, ["modelValue", "options", "rounded-size", "size", "color"])
]),
I.value ? (s(), v(
"span",
Je,
y(b.value) + " - " + y(P.value.length) + " " + y(C.value.paginationOf) + " " + y(I.value),
1
/* TEXT */
)) : r("v-if", !0),
h("div", We, [
i(o(T), {
disabled: b.value === 1,
size: e.inputSize ?? o(m),
color: "transparent",
"rounded-size": e.roundedSize,
"no-elevation": "",
onClick: fe
}, {
default: c(() => [
i(o(W), { class: "maz-text-base" })
]),
_: 1
/* STABLE */
}, 8, ["disabled", "size", "rounded-size"]),
i(o(T), {
disabled: b.value === 1,
size: e.inputSize ?? o(m),
color: "transparent",
"rounded-size": e.roundedSize,
"no-elevation": "",
onClick: be
}, {
default: c(() => [
i(o(X), { class: "maz-text-base" })
]),
_: 1
/* STABLE */
}, 8, ["disabled", "size", "rounded-size"]),
i(o(T), {
disabled: b.value === I.value,
size: e.inputSize ?? o(m),
color: "transparent",
"rounded-size": e.roundedSize,
"no-elevation": "",
onClick: ge
}, {
default: c(() => [
i(o(X), { class: "maz-rotate-180 maz-text-base" })
]),
_: 1
/* STABLE */
}, 8, ["disabled", "size", "rounded-size"]),
i(o(T), {
disabled: b.value === I.value,
size: e.inputSize ?? o(m),
color: "transparent",
"rounded-size": e.roundedSize,
"no-elevation": "",
onClick: me
}, {
default: c(() => [
i(o(W), { class: "maz-rotate-180 maz-text-base" })
]),
_: 1
/* STABLE */
}, 8, ["disabled", "size", "rounded-size"])
])
])) : r("v-if", !0)
])) : r("v-if", !0)
],
2
/* CLASS */
));
}
}), _e = (N, K) => {
const a = N.__vccOpts || N;
for (const [$, D] of K)
a[$] = D;
return a;
}, el = /* @__PURE__ */ _e(Ze, [["__scopeId", "data-v-fc9c2ba6"]]);
export {
el as M,
_e as _,
Xe as m
};