morya-ui 0.3.8 → 0.4.1

package/dist/list/index.js

@@ -0,0 +1,281 @@
+import { a as e } from "../useComponentAttrs-e-5QAjdw.js";
+import { t } from "../Loading-BPpR-jGa.js";
+import { t as n } from "../Pagination-DLphD6LC.js";
+import { t as r } from "../Empty-iNcc0G-q.js";
+import { o as i } from "../config-COgrsSV2.js";
+import "./style.js";
+import { Fragment as a, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createTextVNode as d, createVNode as f, defineComponent as p, inject as m, mergeProps as h, normalizeClass as g, openBlock as _, provide as v, ref as y, renderList as b, renderSlot as x, resolveDynamicComponent as S, toDisplayString as C, toRef as w, unref as T, useAttrs as E, useSlots as D, watch as O, withCtx as k } from "vue";
+//#region src/components/List/types.ts
+var A = Symbol("mList"), j = {
+	key: 0,
+	class: "m-list__header"
+}, M = {
+	key: 0,
+	class: "m-list__empty"
+}, N = {
+	key: 2,
+	class: "m-list__load-more"
+}, P = {
+	key: 4,
+	class: "m-list__footer"
+}, F = /* @__PURE__ */ p({
+	inheritAttrs: !1,
+	name: "MList",
+	__name: "List",
+	props: {
+		pt: {},
+		items: {},
+		dataSource: {},
+		data: {},
+		bordered: {
+			type: Boolean,
+			default: !1
+		},
+		split: {
+			type: Boolean,
+			default: !0
+		},
+		loading: {
+			type: Boolean,
+			default: !1
+		},
+		size: {},
+		itemLayout: { default: "horizontal" },
+		header: {},
+		footer: {},
+		pagination: {
+			type: [Object, Boolean],
+			default: !1
+		},
+		grid: {},
+		rowKey: {}
+	},
+	setup(u) {
+		let p = u, m = E(), F = D(), { rootAttrs: I } = e(m, () => p.pt), L = i("List", () => p.size), R = o(() => {
+			let e = p.items ?? p.dataSource ?? p.data;
+			return Array.isArray(e) ? e : [];
+		}), z = o(() => R.value.length > 0), B = o(() => {
+			let e = p.pagination;
+			return e === !1 || e == null ? null : e;
+		}), V = o(() => B.value != null), H = y(B.value?.page ?? 1), U = y(B.value?.pageSize ?? 10);
+		O(() => B.value?.page, (e) => {
+			e != null && (H.value = e);
+		}), O(() => B.value?.pageSize, (e) => {
+			e != null && (U.value = e);
+		});
+		let W = o(() => V.value ? B.value?.total ?? R.value.length : 0), G = o(() => Math.max(1, Math.ceil(W.value / Math.max(1, U.value))));
+		O(G, (e) => {
+			H.value > e && (H.value = e);
+		});
+		let K = o(() => {
+			if (!z.value) return [];
+			if (!V.value) return R.value;
+			let e = W.value, t = R.value;
+			if (e > t.length) return t;
+			let n = (H.value - 1) * U.value;
+			return t.slice(n, n + U.value);
+		});
+		function q(e, t) {
+			let n = p.rowKey;
+			if (typeof n == "function") return n(e, t);
+			if (typeof n == "string" && typeof e == "object" && e) {
+				let t = e[n];
+				if (t != null) return String(t);
+			}
+			if (typeof e == "object" && e && "key" in e) {
+				let t = e.key;
+				if (t != null) return String(t);
+			}
+			return `list-item-${t}`;
+		}
+		let J = o(() => !!(F.header || p.header)), Y = o(() => !!(F.footer || p.footer)), X = o(() => !!F.loadMore), Z = o(() => z.value && !p.loading && K.value.length === 0), ee = o(() => !z.value && !p.loading && !F.default), Q = o(() => B.value?.position ?? "bottom"), te = o(() => B.value?.align ?? "end"), ne = o(() => V.value && z.value && (Q.value === "top" || Q.value === "both")), re = o(() => V.value && z.value && (Q.value === "bottom" || Q.value === "both"));
+		v(A, {
+			bordered: w(p, "bordered"),
+			split: w(p, "split"),
+			itemLayout: w(p, "itemLayout"),
+			sizeClass: L,
+			grid: w(p, "grid")
+		});
+		let ie = o(() => [
+			"m-list",
+			`m-list--${L.value}`,
+			`m-list--${p.itemLayout}`,
+			{
+				"m-list--bordered": p.bordered,
+				"m-list--split": p.split,
+				"m-list--grid": !!p.grid,
+				"m-list--loading": p.loading
+			}
+		]);
+		function ae(e) {
+			let t = e?.gutter;
+			return t == null ? "var(--m-list-grid-gutter)" : typeof t == "number" ? `${t}px` : t;
+		}
+		let oe = o(() => {
+			let e = p.grid;
+			if (!e) return;
+			let t = {
+				"--m-list-grid-gutter": ae(e),
+				"--m-list-grid-column": String(e.column ?? 1)
+			};
+			return e.xs != null && (t["--m-list-grid-column-xs"] = String(e.xs)), e.sm != null && (t["--m-list-grid-column-sm"] = String(e.sm)), e.md != null && (t["--m-list-grid-column-md"] = String(e.md)), e.lg != null && (t["--m-list-grid-column-lg"] = String(e.lg)), e.xl != null && (t["--m-list-grid-column-xl"] = String(e.xl)), t;
+		}), se = o(() => ({
+			"data-grid-xs": p.grid?.xs == null ? void 0 : "",
+			"data-grid-sm": p.grid?.sm == null ? void 0 : "",
+			"data-grid-md": p.grid?.md == null ? void 0 : "",
+			"data-grid-lg": p.grid?.lg == null ? void 0 : "",
+			"data-grid-xl": p.grid?.xl == null ? void 0 : ""
+		})), ce = o(() => p.grid ? "div" : "ul"), le = o(() => ["m-list__items", { "m-list__items--grid": !!p.grid }]), $ = o(() => ["m-list__pagination", `m-list__pagination--${te.value}`]);
+		return (e, i) => (_(), l("div", h(T(I), { class: ie.value }), [
+			J.value ? (_(), l("div", j, [x(e.$slots, "header", {}, () => [d(C(u.header), 1)])])) : c("", !0),
+			ne.value ? (_(), l("div", {
+				key: 1,
+				class: g($.value)
+			}, [f(n, {
+				modelValue: H.value,
+				"onUpdate:modelValue": i[0] ||= (e) => H.value = e,
+				"total-records": W.value,
+				rows: U.value,
+				size: "small"
+			}, null, 8, [
+				"modelValue",
+				"total-records",
+				"rows"
+			])], 2)) : c("", !0),
+			f(t, {
+				loading: u.loading,
+				size: "sm"
+			}, {
+				default: k(() => [(_(), s(S(ce.value), h({
+					class: le.value,
+					style: oe.value
+				}, se.value), {
+					default: k(() => [z.value ? (_(!0), l(a, { key: 0 }, b(K.value, (t, n) => x(e.$slots, "item", {
+						item: t,
+						index: n
+					}, () => [x(e.$slots, "default", {
+						item: t,
+						index: n
+					})], void 0, q(t, n))), 128)) : x(e.$slots, "default", {}, void 0, void 0, 1)]),
+					_: 3
+				}, 16, ["class", "style"])), Z.value || ee.value ? (_(), l("div", M, [f(r)])) : c("", !0)]),
+				_: 3
+			}, 8, ["loading"]),
+			X.value ? (_(), l("div", N, [x(e.$slots, "loadMore")])) : c("", !0),
+			re.value ? (_(), l("div", {
+				key: 3,
+				class: g($.value)
+			}, [f(n, {
+				modelValue: H.value,
+				"onUpdate:modelValue": i[1] ||= (e) => H.value = e,
+				"total-records": W.value,
+				rows: U.value,
+				size: "small"
+			}, null, 8, [
+				"modelValue",
+				"total-records",
+				"rows"
+			])], 2)) : c("", !0),
+			Y.value ? (_(), l("div", P, [x(e.$slots, "footer", {}, () => [d(C(u.footer), 1)])])) : c("", !0)
+		], 16));
+	}
+}), I = { class: "m-list-item__main" }, L = {
+	key: 0,
+	class: "m-list-item__actions"
+}, R = {
+	key: 0,
+	class: "m-list-item__extra"
+}, z = { class: "m-list-item__main" }, B = {
+	key: 0,
+	class: "m-list-item__actions"
+}, V = {
+	key: 1,
+	class: "m-list-item__extra"
+}, H = /* @__PURE__ */ p({
+	name: "MListItem",
+	__name: "ListItem",
+	props: {
+		actions: {},
+		extra: { type: [
+			Object,
+			String,
+			Number,
+			Boolean,
+			null,
+			Array
+		] }
+	},
+	setup(e) {
+		let t = e, n = D(), r = m(A, null), i = o(() => r?.grid.value ? "div" : "li"), f = o(() => ["m-list-item", {
+			"m-list-item--split": r?.split.value,
+			"m-list-item--bordered": r?.bordered.value,
+			"m-list-item--vertical": r?.itemLayout.value === "vertical",
+			"m-list-item--grid": !!r?.grid.value
+		}]), p = o(() => !!(n.actions || t.actions && t.actions.length)), h = o(() => !!(n.extra || t.extra)), v = o(() => r?.itemLayout.value === "vertical" && h.value);
+		return (t, n) => (_(), s(S(i.value), { class: g(f.value) }, {
+			default: k(() => [v.value ? (_(), l(a, { key: 0 }, [u("div", I, [x(t.$slots, "default"), p.value ? (_(), l("ul", L, [x(t.$slots, "actions", {}, () => [(_(!0), l(a, null, b(e.actions, (e, t) => (_(), l("li", {
+				key: t,
+				class: "m-list-item__action"
+			}, [typeof e == "string" || typeof e == "number" ? (_(), l(a, { key: 0 }, [d(C(e), 1)], 64)) : (_(), s(S(e), { key: 1 }))]))), 128))])])) : c("", !0)]), h.value ? (_(), l("div", R, [x(t.$slots, "extra", {}, () => [d(C(e.extra), 1)])])) : c("", !0)], 64)) : (_(), l(a, { key: 1 }, [
+				u("div", z, [x(t.$slots, "default")]),
+				p.value ? (_(), l("ul", B, [x(t.$slots, "actions", {}, () => [(_(!0), l(a, null, b(e.actions, (e, t) => (_(), l("li", {
+					key: t,
+					class: "m-list-item__action"
+				}, [typeof e == "string" || typeof e == "number" ? (_(), l(a, { key: 0 }, [d(C(e), 1)], 64)) : (_(), s(S(e), { key: 1 }))]))), 128))])])) : c("", !0),
+				h.value ? (_(), l("div", V, [x(t.$slots, "extra", {}, () => [d(C(e.extra), 1)])])) : c("", !0)
+			], 64))]),
+			_: 3
+		}, 8, ["class"]));
+	}
+}), U = { class: "m-list-item-meta" }, W = {
+	key: 0,
+	class: "m-list-item-meta__avatar"
+}, G = {
+	key: 1,
+	class: "m-list-item-meta__content"
+}, K = {
+	key: 0,
+	class: "m-list-item-meta__title"
+}, q = {
+	key: 1,
+	class: "m-list-item-meta__description"
+}, J = /* @__PURE__ */ p({
+	name: "MListItemMeta",
+	__name: "ListItemMeta",
+	props: {
+		avatar: { type: [
+			Object,
+			String,
+			Number,
+			Boolean,
+			null,
+			Array
+		] },
+		title: { type: [
+			Object,
+			String,
+			Number,
+			Boolean,
+			null,
+			Array
+		] },
+		description: { type: [
+			Object,
+			String,
+			Number,
+			Boolean,
+			null,
+			Array
+		] }
+	},
+	setup(e) {
+		let t = D();
+		return (n, r) => (_(), l("div", U, [T(t).avatar || e.avatar ? (_(), l("div", W, [x(n.$slots, "avatar", {}, () => [d(C(e.avatar), 1)])])) : c("", !0), T(t).title || e.title || T(t).description || e.description || T(t).default ? (_(), l("div", G, [
+			T(t).title || e.title ? (_(), l("div", K, [x(n.$slots, "title", {}, () => [d(C(e.title), 1)])])) : c("", !0),
+			T(t).description || e.description ? (_(), l("div", q, [x(n.$slots, "description", {}, () => [d(C(e.description), 1)])])) : c("", !0),
+			x(n.$slots, "default")
+		])) : c("", !0)]));
+	}
+});
+//#endregion
+export { F as MList, H as MListItem, J as MListItemMeta };