data-table-list 0.0.0

package/README.md

@@ -0,0 +1,42 @@
+# neuto
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VS Code](https://code.visualstudio.com/) + [Vue (Official)](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
+
+## Recommended Browser Setup
+
+- Chromium-based browsers (Chrome, Edge, Brave, etc.):
+  - [Vue.js devtools](https://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)
+  - [Turn on Custom Object Formatter in Chrome DevTools](http://bit.ly/object-formatters)
+- Firefox:
+  - [Vue.js devtools](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/)
+  - [Turn on Custom Object Formatter in Firefox DevTools](https://fxdx.dev/firefox-devtools-custom-object-formatters/)
+
+## Type Support for `.vue` Imports in TS
+
+TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vite.dev/config/).
+
+## Project Setup
+
+```sh
+npm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+npm run dev
+```
+
+### Type-Check, Compile and Minify for Production
+
+```sh
+npm run build
+```

package/dist/data-table-list.css

@@ -0,0 +1,2 @@
+section[data-v-347ab0dc]{float:right;box-sizing:border-box;display:contents}.row[data-v-347ab0dc]{box-sizing:border-box;flex-wrap:wrap;width:100%;margin-left:-15px;margin-right:-15px;display:flex}.col[data-v-347ab0dc]{box-sizing:border-box;flex-grow:1;flex-basis:0;max-width:100%;padding-left:15px;padding-right:15px}.col-md-12[data-v-347ab0dc]{box-sizing:border-box;flex:0 0 100%;max-width:100%;padding-left:15px;padding-right:15px}.mb-3[data-v-347ab0dc]{margin-bottom:1rem!important}.mb-5[data-v-347ab0dc]{margin-bottom:3rem!important}.shadow-none[data-v-347ab0dc]{box-shadow:none!important;border:none!important}.iconNav[data-v-347ab0dc]{width:30px;height:30px;fill:#06c!important}.iconNav[data-v-347ab0dc]:hover{width:30px;height:30px;fill:#21374d!important}.iconView[data-v-347ab0dc],.iconUpdate[data-v-347ab0dc]{border:none;width:22px;height:22px;fill:#06c!important}.iconDelete[data-v-347ab0dc]{color:#dc3545;background:#e3e2e2;border-radius:35px 35px 10px 10px;width:20px;height:24px}.iconOrder[data-v-347ab0dc]{vertical-align:bottom;fill:#a1a1a1;width:22px;height:22px}.icon-primaryOrder[data-v-347ab0dc]{fill:#06c!important}.tablerow[data-v-347ab0dc]{margin-top:0}.navBtn[data-v-347ab0dc]{clip-path:fill-box}.mr10[data-v-347ab0dc]{margin-right:15px}.center[data-v-347ab0dc]{flex-wrap:nowrap;place-content:center;align-self:center;align-items:center;display:flex}.left[data-v-347ab0dc]{flex-wrap:nowrap;place-content:center flex-start;align-self:center;align-items:center;display:flex}.right[data-v-347ab0dc]{flex-wrap:nowrap;place-content:center flex-end;align-self:center;align-items:center;display:flex}.right-box[data-v-347ab0dc]{margin-right:unset;justify-content:flex-end;padding-bottom:40px;padding-right:60px;display:flex}.box-action[data-v-347ab0dc]{float:right;justify-content:flex-end;align-items:center;gap:10px;display:inline-flex}.box-action button[data-v-347ab0dc]{cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;padding:4px;transition:opacity .2s;display:flex}.box-action button[data-v-347ab0dc]:hover{opacity:.8}.table[data-v-347ab0dc]{color:#212529;vertical-align:middle;border-collapse:collapse;box-sizing:border-box;border-color:#dee2e6;width:100%;margin-bottom:1rem;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.table th[data-v-347ab0dc],.table td[data-v-347ab0dc]{vertical-align:middle;text-align:left;box-sizing:border-box;border-bottom:1px solid #dee2e6;padding:.75rem .3rem}.table-hover tbody tr[data-v-347ab0dc]:hover{background-color:#0000000a}.table thead th[data-v-347ab0dc]{vertical-align:bottom;background-color:#f8f9fa;border-bottom:2px solid #dee2e6}.checkbox-header[data-v-347ab0dc]{width:40px}.action-header[data-v-347ab0dc]{width:120px}.headerTitle[data-v-347ab0dc]{color:#06c;letter-spacing:.05em;font-size:small;font-weight:600}.header-container[data-v-347ab0dc]{justify-content:space-between;align-items:center;width:100%;min-height:24px;display:flex}.header-text[data-v-347ab0dc]{color:#06c;font-size:small;font-weight:600}.sort-arrows[data-v-347ab0dc]{flex-direction:column;justify-content:center;height:32px;margin-left:8px;display:flex}.sort-arrow-up[data-v-347ab0dc],.sort-arrow-down[data-v-347ab0dc]{cursor:pointer;align-items:center;height:16px;display:flex}.sort-arrow-down[data-v-347ab0dc]{margin-top:-4px}.btn[data-v-347ab0dc]{color:#212529;text-align:center;vertical-align:middle;cursor:pointer;-webkit-user-select:none;user-select:none;box-sizing:border-box;background-color:#0000;border:1px solid #0000;border-radius:.25rem;justify-content:center;align-items:center;padding:.375rem .75rem;font-size:1rem;font-weight:400;line-height:1.5;text-decoration:none;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;display:inline-flex}.btn-outline-default[data-v-347ab0dc]{color:#06c;background-color:#fff;border:1px solid #06c;border-radius:4px;padding:4px 8px}.btn-default[data-v-347ab0dc]{color:#495057;pointer-events:none;background-color:#f8f9fa;border:1px solid #dee2e6;padding:4px 12px;font-weight:600}.navBtn[data-v-347ab0dc]{min-width:38px;height:38px;margin:0 4px}.btn-group[data-v-347ab0dc]{vertical-align:middle;display:inline-flex;position:relative}.form-check[data-v-347ab0dc]{box-sizing:border-box;min-height:1.5rem;margin-bottom:.125rem;padding-left:1.5em;display:block;position:relative}.dtlchek[data-v-347ab0dc]{cursor:pointer;box-sizing:border-box;width:1rem;height:1rem;margin-top:.3rem;margin-left:-1.5rem;position:absolute}.icon[data-v-347ab0dc],.iconNav[data-v-347ab0dc],.iconView[data-v-347ab0dc],.iconUpdate[data-v-347ab0dc],.iconDelete[data-v-347ab0dc],.iconOrder[data-v-347ab0dc]{vertical-align:middle;fill:currentColor;display:inline-block}.iconNav[data-v-347ab0dc]{color:#06c;width:30px;height:30px}.iconView[data-v-347ab0dc],.iconUpdate[data-v-347ab0dc]{color:#06c;width:22px;height:22px}.iconDelete[data-v-347ab0dc]{color:#dc3545;width:22px;height:22px}.iconOrder[data-v-347ab0dc]{color:#a1a1a1}.icon-primaryOrder[data-v-347ab0dc]{color:#06c!important}.avatar[data-v-0ae6bfc5]{color:#333;text-align:center;vertical-align:middle;-webkit-user-select:none;user-select:none;box-sizing:border-box;background-color:#e9ecef;border-radius:50%;justify-content:center;align-items:center;font-weight:600;display:inline-flex;overflow:hidden}.size-xs[data-v-0ae6bfc5]{width:24px;height:24px;font-size:.65rem}.size-sm[data-v-0ae6bfc5]{width:32px;height:32px;font-size:.8rem}.size-lg[data-v-0ae6bfc5]{width:48px;height:48px;font-size:1.1rem}.size-xl[data-v-0ae6bfc5]{width:64px;height:64px;font-size:1.5rem}.size-xxl[data-v-0ae6bfc5]{width:96px;height:96px;font-size:2.2rem}
+/*$vite$:1*/

package/dist/data-table-list.js

@@ -0,0 +1,310 @@
+import { Fragment as e, computed as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, createVNode as o, defineComponent as s, normalizeClass as c, normalizeStyle as l, onMounted as u, openBlock as d, ref as f, renderList as p, renderSlot as m, resolveComponent as h, toDisplayString as g, watch as _, withCtx as v } from "vue";
+//#region src/component/commons/DataTableList.vue?vue&type=script&setup=true&lang.ts
+var y = {
+	key: 0,
+	class: "col-md-12 right-box"
+}, b = { key: 1 }, x = {
+	key: 0,
+	class: "row"
+}, S = {
+	class: "btn btn-default navBtn",
+	type: "button"
+}, C = { class: "col" }, w = { class: "table table-hover" }, ee = {
+	key: 0,
+	class: "checkbox-header"
+}, te = { class: "headerTitle" }, T = { class: "header-container" }, ne = { class: "header-text" }, re = {
+	key: 0,
+	class: "sort-arrows"
+}, ie = ["onClick"], ae = ["onClick"], E = {
+	key: 1,
+	class: "headerTitle action-header"
+}, D = { key: 0 }, O = { class: "form-check" }, oe = [
+	"onChange",
+	"id",
+	"checked"
+], se = ["for"], ce = { key: 1 }, k = {
+	class: "btn-group box-action",
+	role: "group",
+	"aria-label": "Actions"
+}, A = ["onClick"], j = ["onClick"], M = ["onClick"], N = {
+	key: 0,
+	class: "col-md-12 center"
+}, P = {
+	key: 0,
+	class: "row mb-5"
+}, F = {
+	class: "btn btn-default navBtn",
+	type: "button"
+}, I = /* @__PURE__ */ s({
+	__name: "DataTableList",
+	props: {
+		filter: {},
+		dataTableConf: {},
+		dataItems: {},
+		showCheckbox: { type: Boolean }
+	},
+	emits: [
+		"onview",
+		"onupdate",
+		"ondelete",
+		"onavanti",
+		"onindietro",
+		"ondownload",
+		"onchecked"
+	],
+	setup(s, { emit: I }) {
+		let L = f([]), R = f([]), z = f([]), B = s, V = I, H = f(0), U = f(B.dataTableConf.dimensionePagina), W = t(() => (B.dataTableConf.isserver ? L.value = B.dataItems : B.filter ? (H.value = 0, z.value = B.dataItems.filter((e) => {
+			let t = !1;
+			return B.dataTableConf.columns.forEach((n) => {
+				String(e[n.property]).toUpperCase().indexOf(String(B.filter).toUpperCase()) != -1 && (t = !0);
+			}), t;
+		}), H.value = 0, L.value = z.value.slice(0, U.value)) : (H.value = 0, L.value = B.dataItems.slice(0, U.value)), L)), G = t(() => (H.value < 0 && (H.value = 0), B.dataTableConf.isserver ? B.dataTableConf.serverPaging && H.value >= B.dataTableConf.serverPaging.serverTotalePagine && --H.value : B.filter ? H.value * U.value > z.value.length && --H.value : H.value * U.value > B.dataItems.length && --H.value, H)), K = t(() => {
+			if (B.dataTableConf.isserver) return B.dataTableConf.serverPaging?.serverTotalePagine;
+			if (B.filter) return Math.ceil(z.value.length / U.value);
+			if (B.dataItems.length) return Math.ceil(B.dataItems.length / U.value);
+		}), q = () => {
+			V("ondownload", W.value.value);
+		};
+		function le(e, t) {
+			J(), t.target.classList.add("icon-primaryOrder"), W.value.value.sort((t, n) => {
+				let r = t[e], i = n[e];
+				return r < i ? -1 : +(r > i);
+			});
+		}
+		function ue(e, t) {
+			J(), t.target.classList.add("icon-primaryOrder"), W.value.value.sort((t, n) => {
+				let r = t[e], i = n[e];
+				return r > i ? -1 : +(r < i);
+			});
+		}
+		let J = () => {
+			Array.from(document.getElementsByClassName("icon-primaryOrder")).forEach((e) => {
+				e.classList.remove("icon-primaryOrder");
+			});
+		};
+		_(H, async () => {
+			B.dataTableConf.isserver ? L.value = B.dataItems : H.value > 0 ? B.filter ? L.value = z.value.slice(U.value * H.value, U.value * H.value + U.value) : L.value = B.dataItems.slice(U.value * H.value, U.value * H.value + U.value) : (H.value = 0, B.filter ? L.value = z.value.slice(0, U.value) : L.value = B.dataItems.slice(0, U.value));
+		}), _(B.dataTableConf, async () => K), _(B.dataItems, async () => {
+			B.dataItems.length && B.showCheckbox && B.dataItems.forEach((e, t) => {
+				e.checkId = t;
+			});
+		});
+		let Y = () => {
+			H.value += 1, B.dataTableConf.isserver && (B.dataTableConf.serverPaging && H.value >= B.dataTableConf.serverPaging.serverTotalePagine && --H.value, V("onavanti", H.value, U.value)), Q && J(), B.showCheckbox && $();
+		}, X = () => {
+			Q && J(), H.value > 0 && (--H.value, B.showCheckbox && $()), B.dataTableConf.isserver && V("onindietro", H.value, U.value);
+		}, Z = f([]), Q = f(!1);
+		u(() => {
+			Z.value = B.dataTableConf.columns.filter((e) => !e.hidden), B.showCheckbox && B.dataItems.forEach((e, t) => {
+				e.checkId = t;
+			}), B.dataTableConf.columns.forEach((e) => {
+				e.order && (Q.value = !0);
+			}), console.log(B.dataItems), V("onchecked", R.value);
+		}), _(B.dataItems, async () => {
+			B.dataItems.length && B.showCheckbox && B.dataItems.forEach((e, t) => {
+				e.checked && (R.value.push(e), console.log("obj:checked:", e), V("onchecked", R.value));
+			});
+		});
+		let de = (e) => {
+			if (R.value.length) {
+				let t = R.value.findIndex((t) => t.checkId == e.checkId);
+				t == -1 ? R.value.push(e) : R.value.splice(t, 1);
+			} else R.value.push(e);
+			console.log(R.value), V("onchecked", R.value);
+		}, $ = () => {
+			R.value = [], Array.from(document.querySelectorAll(".dtlchek")).forEach((e) => {
+				e.checked = !1;
+			}), V("onchecked", R.value);
+		};
+		return (t, u) => {
+			let f = h("slolt");
+			return d(), r(e, null, [
+				B.dataTableConf.viewDownload ? (d(), r("div", y, [m(t.$slots, "download", { ondownload: { oncall: q } }, () => [i("button", {
+					type: "button",
+					class: "btn btn p-0 shadow-none",
+					onClick: q,
+					title: "Download"
+				}, [...u[0] ||= [i("span", null, [i("svg", {
+					class: "icon",
+					viewBox: "0 0 24 24"
+				}, [i("path", { d: "M12 16l4-5h-3V4h-2v7H8l4 5zm-7 2v2h14v-2H5z" })])], -1)]])], !0)])) : n("", !0),
+				B.dataTableConf.paginator ? (d(), r("section", b, [B.dataItems.length && (G.value.value >= 1 || W.value.value.length >= U.value) && B.dataItems.length > B.dataTableConf.dimensionePagina || B.dataItems.length && B.dataTableConf.isserver && B.dataTableConf.serverPaging && B.dataTableConf.serverPaging.serverTotaleElementi > B.dataTableConf.dimensionePagina ? (d(), r("div", x, [B.dataTableConf.paginator && B.dataTableConf.paginatorPosition?.top === !0 ? (d(), r("div", {
+					key: 0,
+					class: c(B.dataTableConf.paginatorPosition.class + " col-md-12 mb-3")
+				}, [
+					i("button", {
+						class: "btn btn-outline-default navBtn",
+						type: "button",
+						onClick: X
+					}, [o(f, { name: "iconIndietroTop" }, {
+						default: v(() => [...u[1] ||= [i("span", null, [i("svg", {
+							class: "iconNav",
+							viewBox: "0 0 24 24"
+						}, [i("path", { d: "M15 18l-6-6 6-6" })])], -1)]]),
+						_: 1
+					})]),
+					i("button", S, g(G.value.value + 1) + " / " + g(K.value), 1),
+					i("button", {
+						class: "btn btn-outline-default navBtn",
+						type: "button",
+						onClick: Y
+					}, [o(f, { name: "iconAvantiTop" }, {
+						default: v(() => [...u[2] ||= [i("span", null, [i("svg", {
+							class: "iconNav",
+							viewBox: "0 0 24 24"
+						}, [i("path", { d: "M9 6l6 6-6 6" })])], -1)]]),
+						_: 1
+					})])
+				], 2)) : n("", !0)])) : n("", !0)])) : n("", !0),
+				i("div", { class: c(B.dataTableConf.paginator ? "row tablerow" : "row") }, [i("div", C, [i("table", w, [i("thead", null, [i("tr", null, [
+					s.showCheckbox ? (d(), r("th", ee)) : n("", !0),
+					(d(!0), r(e, null, p(Z.value, (e) => (d(), r("th", te, [i("div", T, [i("span", ne, g(e.title), 1), e.order ? (d(), r("div", re, [i("span", {
+						class: "sort-arrow-up",
+						onClick: (t) => le(e.property, t)
+					}, [...u[3] ||= [i("svg", {
+						class: "iconOrder",
+						viewBox: "0 0 24 24"
+					}, [i("path", { d: "M7 14l5-5 5 5H7z" })], -1)]], 8, ie), i("span", {
+						class: "sort-arrow-down",
+						onClick: (t) => ue(e.property, t)
+					}, [...u[4] ||= [i("svg", {
+						class: "iconOrder",
+						viewBox: "0 0 24 24"
+					}, [i("path", { d: "M7 10l5 5 5-5H7z" })], -1)]], 8, ae)])) : n("", !0)])]))), 256)),
+					B.dataTableConf.viewActions ? (d(), r("th", E)) : n("", !0)
+				])]), i("tbody", null, [(d(!0), r(e, null, p(W.value.value, (o, c) => (d(), r("tr", { key: c }, [
+					s.showCheckbox ? (d(), r("td", D, [m(t.$slots, "checkbox", { row: o }, () => [i("div", O, [i("input", {
+						class: "dtlchek",
+						onChange: (e) => de(o),
+						id: "chek" + c,
+						checked: o.checked,
+						type: "checkbox",
+						"data-focus-mouse": "false"
+					}, null, 40, oe), i("label", {
+						style: { color: "aliceblue" },
+						for: "chek" + c
+					}, "\xA0\xA0", 8, se)])], !0)])) : n("", !0),
+					(d(!0), r(e, null, p(Z.value, (e) => (d(), r("td", { style: l(e.style) }, [m(t.$slots, "iconTd", {
+						row: o,
+						column: e
+					}, void 0, !0), m(t.$slots, "columnTd", {
+						row: o,
+						column: e
+					}, () => [a(g(e.callFormatt ? e.callFormatt(o[e.property], o) : o[e.property]), 1)], !0)], 4))), 256)),
+					B.dataTableConf.viewActions ? (d(), r("td", ce, [i("div", k, [m(t.$slots, "actions", { row: o }, () => [
+						B.dataTableConf.actionsRow?.view ? (d(), r("button", {
+							key: 0,
+							type: "button",
+							class: "btn btn p-0 shadow-none",
+							onClick: (e) => V("onview", o)
+						}, [m(t.$slots, "iconView", {}, () => [u[5] ||= i("span", null, [i("svg", {
+							class: "iconView",
+							viewBox: "0 0 24 24"
+						}, [i("path", { d: "M12 5c-7 0-10 7-10 7s3 7 10 7 10-7 10-7-3-7-10-7zm0 12a5 5 0 1 1 0-10 5 5 0 0 1 0 10z" })])], -1)], !0)], 8, A)) : n("", !0),
+						B.dataTableConf.actionsRow?.update ? (d(), r("button", {
+							key: 1,
+							type: "button",
+							class: "btn btn p-0 shadow-none",
+							onClick: (e) => V("onupdate", o)
+						}, [m(t.$slots, "iconUpdate", {}, () => [u[6] ||= i("span", null, [i("svg", {
+							class: "iconUpdate",
+							viewBox: "0 0 24 24"
+						}, [i("path", { d: "M3 17.25V21h3.75L20.81 6.94l-3.75-3.75L3 17.25z" })])], -1)], !0)], 8, j)) : n("", !0),
+						B.dataTableConf.actionsRow?.delete ? (d(), r("button", {
+							key: 2,
+							type: "button",
+							class: "btn btn p-0 shadow-none",
+							onClick: (e) => V("ondelete", o)
+						}, [m(t.$slots, "iconDelete", {}, () => [u[7] ||= i("span", null, [i("svg", {
+							class: "iconDelete",
+							viewBox: "0 0 24 24"
+						}, [i("path", { d: "M6 7h12M9 7v12m6-12v12M10 3h4l1 1h5v2H4V4h5l1-1z" })])], -1)], !0)], 8, M)) : n("", !0)
+					], !0)])])) : n("", !0)
+				]))), 128))])]), B.dataItems.length ? n("", !0) : (d(), r("div", N, [i("span", null, [u[8] ||= i("svg", {
+					class: "icon",
+					viewBox: "0 0 24 24"
+				}, [i("path", { d: "M12 2L2 22h20L12 2zm0 14h-1v-6h2v6zm0 4h-1v-2h2v2z" })], -1), a(" " + g(s.dataTableConf.messageNotRecords), 1)])]))])], 2),
+				i("section", null, [B.dataItems.length && (G.value.value >= 1 || W.value.value.length >= U.value) && B.dataItems.length > B.dataTableConf.dimensionePagina || B.dataItems.length && B.dataTableConf.isserver && B.dataTableConf.serverPaging && B.dataTableConf.serverPaging.serverTotaleElementi > B.dataTableConf.dimensionePagina ? (d(), r("div", P, [B.dataTableConf.paginator && B.dataTableConf.paginatorPosition?.bottom === !0 ? (d(), r("div", {
+					key: 0,
+					class: c(B.dataTableConf.paginatorPosition.class + " col-md-12")
+				}, [
+					i("button", {
+						class: "btn btn-outline-default navBtn",
+						type: "button",
+						onClick: X
+					}, [o(f, { name: "iconIndietroBottom" }, {
+						default: v(() => [...u[9] ||= [i("span", null, [i("svg", {
+							class: "iconNav",
+							viewBox: "0 0 24 24"
+						}, [i("path", { d: "M15 18l-6-6 6-6" })])], -1)]]),
+						_: 1
+					})]),
+					i("button", F, g(G.value.value + 1) + " / " + g(K.value), 1),
+					i("button", {
+						class: "btn btn-outline-default navBtn",
+						type: "button",
+						onClick: Y
+					}, [o(f, { name: "iconAvantiBottom" }, {
+						default: v(() => [...u[10] ||= [i("span", null, [i("svg", {
+							class: "iconNav",
+							viewBox: "0 0 24 24"
+						}, [i("path", { d: "M9 6l6 6-6 6" })])], -1)]]),
+						_: 1
+					})])
+				], 2)) : n("", !0)])) : n("", !0)])
+			], 64);
+		};
+	}
+}), L = (e, t) => {
+	let n = e.__vccOpts || e;
+	for (let [e, r] of t) n[e] = r;
+	return n;
+}, R = /* @__PURE__ */ L(I, [["__scopeId", "data-v-347ab0dc"]]), z = /* @__PURE__ */ L(/* @__PURE__ */ s({
+	__name: "Avatar",
+	props: {
+		label: {},
+		class: {},
+		backgroundDynamics: { type: Boolean },
+		background: {},
+		color: {}
+	},
+	setup(e) {
+		let n = e, i = [
+			"#f4cccc",
+			"#d9ead3",
+			"#ffe599",
+			"#cfe2f3",
+			"#f9cb9c",
+			"#d5a6bd",
+			"#9fc5e8",
+			"#b6d7a8",
+			"#ffe6cc",
+			"#f6c1a6",
+			"#e6ccff",
+			"#ffd9b3",
+			"#c2f0f7",
+			"#ffebd7",
+			"#d0e0e3",
+			"#f7d9c4",
+			"#e0f7e9",
+			"#f2f9f9",
+			"#fde2e2",
+			"#f2f2f2"
+		], a = t(() => {
+			let e = [];
+			return n.background && (e.push("background-color:"), e.push(n.background), e.push("!important;")), n.backgroundDynamics && (e = [], e.push("background-color:"), e.push(o(n.label)), e.push("!important;")), n.color && (e.push("color:"), e.push(n.color), e.push("!important;")), e.join("");
+		});
+		function o(e) {
+			if (e && e.length > 1) {
+				let t = e.charCodeAt(0), n = e.charCodeAt(1), r = ((t - 65) * 26 + (n - 65)) % i.length;
+				return i[r >= 0 && r < i.length ? r : 0];
+			} else return "#d0fbc8";
+		}
+		return (e, t) => (d(), r("div", {
+			style: l(a.value),
+			class: c(n.class ? "avatar size-lg " + n.class : "avatar size-lg")
+		}, g(n.label), 7));
+	}
+}), [["__scopeId", "data-v-0ae6bfc5"]]);
+//#endregion
+export { z as Avatar, R as DataTableList };

package/dist/data-table-list.umd.cjs

@@ -0,0 +1 @@
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`vue`)):typeof define==`function`&&define.amd?define([`exports`,`vue`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.DataTableList={},e.Vue))})(this,function(e,t){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var n={key:0,class:`col-md-12 right-box`},r={key:1},i={key:0,class:`row`},a={class:`btn btn-default navBtn`,type:`button`},o={class:`col`},s={class:`table table-hover`},c={key:0,class:`checkbox-header`},l={class:`headerTitle`},u={class:`header-container`},d={class:`header-text`},f={key:0,class:`sort-arrows`},p=[`onClick`],m=[`onClick`],h={key:1,class:`headerTitle action-header`},g={key:0},_={class:`form-check`},v=[`onChange`,`id`,`checked`],y=[`for`],b={key:1},x={class:`btn-group box-action`,role:`group`,"aria-label":`Actions`},S=[`onClick`],C=[`onClick`],w=[`onClick`],T={key:0,class:`col-md-12 center`},E={key:0,class:`row mb-5`},D={class:`btn btn-default navBtn`,type:`button`},O=(0,t.defineComponent)({__name:`DataTableList`,props:{filter:{},dataTableConf:{},dataItems:{},showCheckbox:{type:Boolean}},emits:[`onview`,`onupdate`,`ondelete`,`onavanti`,`onindietro`,`ondownload`,`onchecked`],setup(e,{emit:O}){let k=(0,t.ref)([]),A=(0,t.ref)([]),j=(0,t.ref)([]),M=e,N=O,P=(0,t.ref)(0),F=(0,t.ref)(M.dataTableConf.dimensionePagina),I=(0,t.computed)(()=>(M.dataTableConf.isserver?k.value=M.dataItems:M.filter?(P.value=0,j.value=M.dataItems.filter(e=>{let t=!1;return M.dataTableConf.columns.forEach(n=>{String(e[n.property]).toUpperCase().indexOf(String(M.filter).toUpperCase())!=-1&&(t=!0)}),t}),P.value=0,k.value=j.value.slice(0,F.value)):(P.value=0,k.value=M.dataItems.slice(0,F.value)),k)),L=(0,t.computed)(()=>(P.value<0&&(P.value=0),M.dataTableConf.isserver?M.dataTableConf.serverPaging&&P.value>=M.dataTableConf.serverPaging.serverTotalePagine&&--P.value:M.filter?P.value*F.value>j.value.length&&--P.value:P.value*F.value>M.dataItems.length&&--P.value,P)),R=(0,t.computed)(()=>{if(M.dataTableConf.isserver)return M.dataTableConf.serverPaging?.serverTotalePagine;if(M.filter)return Math.ceil(j.value.length/F.value);if(M.dataItems.length)return Math.ceil(M.dataItems.length/F.value)}),z=()=>{N(`ondownload`,I.value.value)};function B(e,t){H(),t.target.classList.add(`icon-primaryOrder`),I.value.value.sort((t,n)=>{let r=t[e],i=n[e];return r<i?-1:+(r>i)})}function V(e,t){H(),t.target.classList.add(`icon-primaryOrder`),I.value.value.sort((t,n)=>{let r=t[e],i=n[e];return r>i?-1:+(r<i)})}let H=()=>{Array.from(document.getElementsByClassName(`icon-primaryOrder`)).forEach(e=>{e.classList.remove(`icon-primaryOrder`)})};(0,t.watch)(P,async()=>{M.dataTableConf.isserver?k.value=M.dataItems:P.value>0?M.filter?k.value=j.value.slice(F.value*P.value,F.value*P.value+F.value):k.value=M.dataItems.slice(F.value*P.value,F.value*P.value+F.value):(P.value=0,M.filter?k.value=j.value.slice(0,F.value):k.value=M.dataItems.slice(0,F.value))}),(0,t.watch)(M.dataTableConf,async()=>R),(0,t.watch)(M.dataItems,async()=>{M.dataItems.length&&M.showCheckbox&&M.dataItems.forEach((e,t)=>{e.checkId=t})});let U=()=>{P.value+=1,M.dataTableConf.isserver&&(M.dataTableConf.serverPaging&&P.value>=M.dataTableConf.serverPaging.serverTotalePagine&&--P.value,N(`onavanti`,P.value,F.value)),K&&H(),M.showCheckbox&&J()},W=()=>{K&&H(),P.value>0&&(--P.value,M.showCheckbox&&J()),M.dataTableConf.isserver&&N(`onindietro`,P.value,F.value)},G=(0,t.ref)([]),K=(0,t.ref)(!1);(0,t.onMounted)(()=>{G.value=M.dataTableConf.columns.filter(e=>!e.hidden),M.showCheckbox&&M.dataItems.forEach((e,t)=>{e.checkId=t}),M.dataTableConf.columns.forEach(e=>{e.order&&(K.value=!0)}),console.log(M.dataItems),N(`onchecked`,A.value)}),(0,t.watch)(M.dataItems,async()=>{M.dataItems.length&&M.showCheckbox&&M.dataItems.forEach((e,t)=>{e.checked&&(A.value.push(e),console.log(`obj:checked:`,e),N(`onchecked`,A.value))})});let q=e=>{if(A.value.length){let t=A.value.findIndex(t=>t.checkId==e.checkId);t==-1?A.value.push(e):A.value.splice(t,1)}else A.value.push(e);console.log(A.value),N(`onchecked`,A.value)},J=()=>{A.value=[],Array.from(document.querySelectorAll(`.dtlchek`)).forEach(e=>{e.checked=!1}),N(`onchecked`,A.value)};return(O,k)=>{let A=(0,t.resolveComponent)(`slolt`);return(0,t.openBlock)(),(0,t.createElementBlock)(t.Fragment,null,[M.dataTableConf.viewDownload?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,n,[(0,t.renderSlot)(O.$slots,`download`,{ondownload:{oncall:z}},()=>[(0,t.createElementVNode)(`button`,{type:`button`,class:`btn btn p-0 shadow-none`,onClick:z,title:`Download`},[...k[0]||=[(0,t.createElementVNode)(`span`,null,[(0,t.createElementVNode)(`svg`,{class:`icon`,viewBox:`0 0 24 24`},[(0,t.createElementVNode)(`path`,{d:`M12 16l4-5h-3V4h-2v7H8l4 5zm-7 2v2h14v-2H5z`})])],-1)]])],!0)])):(0,t.createCommentVNode)(``,!0),M.dataTableConf.paginator?((0,t.openBlock)(),(0,t.createElementBlock)(`section`,r,[M.dataItems.length&&(L.value.value>=1||I.value.value.length>=F.value)&&M.dataItems.length>M.dataTableConf.dimensionePagina||M.dataItems.length&&M.dataTableConf.isserver&&M.dataTableConf.serverPaging&&M.dataTableConf.serverPaging.serverTotaleElementi>M.dataTableConf.dimensionePagina?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,i,[M.dataTableConf.paginator&&M.dataTableConf.paginatorPosition?.top===!0?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:0,class:(0,t.normalizeClass)(M.dataTableConf.paginatorPosition.class+` col-md-12 mb-3`)},[(0,t.createElementVNode)(`button`,{class:`btn btn-outline-default navBtn`,type:`button`,onClick:W},[(0,t.createVNode)(A,{name:`iconIndietroTop`},{default:(0,t.withCtx)(()=>[...k[1]||=[(0,t.createElementVNode)(`span`,null,[(0,t.createElementVNode)(`svg`,{class:`iconNav`,viewBox:`0 0 24 24`},[(0,t.createElementVNode)(`path`,{d:`M15 18l-6-6 6-6`})])],-1)]]),_:1})]),(0,t.createElementVNode)(`button`,a,(0,t.toDisplayString)(L.value.value+1)+` / `+(0,t.toDisplayString)(R.value),1),(0,t.createElementVNode)(`button`,{class:`btn btn-outline-default navBtn`,type:`button`,onClick:U},[(0,t.createVNode)(A,{name:`iconAvantiTop`},{default:(0,t.withCtx)(()=>[...k[2]||=[(0,t.createElementVNode)(`span`,null,[(0,t.createElementVNode)(`svg`,{class:`iconNav`,viewBox:`0 0 24 24`},[(0,t.createElementVNode)(`path`,{d:`M9 6l6 6-6 6`})])],-1)]]),_:1})])],2)):(0,t.createCommentVNode)(``,!0)])):(0,t.createCommentVNode)(``,!0)])):(0,t.createCommentVNode)(``,!0),(0,t.createElementVNode)(`div`,{class:(0,t.normalizeClass)(M.dataTableConf.paginator?`row tablerow`:`row`)},[(0,t.createElementVNode)(`div`,o,[(0,t.createElementVNode)(`table`,s,[(0,t.createElementVNode)(`thead`,null,[(0,t.createElementVNode)(`tr`,null,[e.showCheckbox?((0,t.openBlock)(),(0,t.createElementBlock)(`th`,c)):(0,t.createCommentVNode)(``,!0),((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(G.value,e=>((0,t.openBlock)(),(0,t.createElementBlock)(`th`,l,[(0,t.createElementVNode)(`div`,u,[(0,t.createElementVNode)(`span`,d,(0,t.toDisplayString)(e.title),1),e.order?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,f,[(0,t.createElementVNode)(`span`,{class:`sort-arrow-up`,onClick:t=>B(e.property,t)},[...k[3]||=[(0,t.createElementVNode)(`svg`,{class:`iconOrder`,viewBox:`0 0 24 24`},[(0,t.createElementVNode)(`path`,{d:`M7 14l5-5 5 5H7z`})],-1)]],8,p),(0,t.createElementVNode)(`span`,{class:`sort-arrow-down`,onClick:t=>V(e.property,t)},[...k[4]||=[(0,t.createElementVNode)(`svg`,{class:`iconOrder`,viewBox:`0 0 24 24`},[(0,t.createElementVNode)(`path`,{d:`M7 10l5 5 5-5H7z`})],-1)]],8,m)])):(0,t.createCommentVNode)(``,!0)])]))),256)),M.dataTableConf.viewActions?((0,t.openBlock)(),(0,t.createElementBlock)(`th`,h)):(0,t.createCommentVNode)(``,!0)])]),(0,t.createElementVNode)(`tbody`,null,[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(I.value.value,(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`tr`,{key:r},[e.showCheckbox?((0,t.openBlock)(),(0,t.createElementBlock)(`td`,g,[(0,t.renderSlot)(O.$slots,`checkbox`,{row:n},()=>[(0,t.createElementVNode)(`div`,_,[(0,t.createElementVNode)(`input`,{class:`dtlchek`,onChange:e=>q(n),id:`chek`+r,checked:n.checked,type:`checkbox`,"data-focus-mouse":`false`},null,40,v),(0,t.createElementVNode)(`label`,{style:{color:`aliceblue`},for:`chek`+r},`\xA0\xA0`,8,y)])],!0)])):(0,t.createCommentVNode)(``,!0),((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(G.value,e=>((0,t.openBlock)(),(0,t.createElementBlock)(`td`,{style:(0,t.normalizeStyle)(e.style)},[(0,t.renderSlot)(O.$slots,`iconTd`,{row:n,column:e},void 0,!0),(0,t.renderSlot)(O.$slots,`columnTd`,{row:n,column:e},()=>[(0,t.createTextVNode)((0,t.toDisplayString)(e.callFormatt?e.callFormatt(n[e.property],n):n[e.property]),1)],!0)],4))),256)),M.dataTableConf.viewActions?((0,t.openBlock)(),(0,t.createElementBlock)(`td`,b,[(0,t.createElementVNode)(`div`,x,[(0,t.renderSlot)(O.$slots,`actions`,{row:n},()=>[M.dataTableConf.actionsRow?.view?((0,t.openBlock)(),(0,t.createElementBlock)(`button`,{key:0,type:`button`,class:`btn btn p-0 shadow-none`,onClick:e=>N(`onview`,n)},[(0,t.renderSlot)(O.$slots,`iconView`,{},()=>[k[5]||=(0,t.createElementVNode)(`span`,null,[(0,t.createElementVNode)(`svg`,{class:`iconView`,viewBox:`0 0 24 24`},[(0,t.createElementVNode)(`path`,{d:`M12 5c-7 0-10 7-10 7s3 7 10 7 10-7 10-7-3-7-10-7zm0 12a5 5 0 1 1 0-10 5 5 0 0 1 0 10z`})])],-1)],!0)],8,S)):(0,t.createCommentVNode)(``,!0),M.dataTableConf.actionsRow?.update?((0,t.openBlock)(),(0,t.createElementBlock)(`button`,{key:1,type:`button`,class:`btn btn p-0 shadow-none`,onClick:e=>N(`onupdate`,n)},[(0,t.renderSlot)(O.$slots,`iconUpdate`,{},()=>[k[6]||=(0,t.createElementVNode)(`span`,null,[(0,t.createElementVNode)(`svg`,{class:`iconUpdate`,viewBox:`0 0 24 24`},[(0,t.createElementVNode)(`path`,{d:`M3 17.25V21h3.75L20.81 6.94l-3.75-3.75L3 17.25z`})])],-1)],!0)],8,C)):(0,t.createCommentVNode)(``,!0),M.dataTableConf.actionsRow?.delete?((0,t.openBlock)(),(0,t.createElementBlock)(`button`,{key:2,type:`button`,class:`btn btn p-0 shadow-none`,onClick:e=>N(`ondelete`,n)},[(0,t.renderSlot)(O.$slots,`iconDelete`,{},()=>[k[7]||=(0,t.createElementVNode)(`span`,null,[(0,t.createElementVNode)(`svg`,{class:`iconDelete`,viewBox:`0 0 24 24`},[(0,t.createElementVNode)(`path`,{d:`M6 7h12M9 7v12m6-12v12M10 3h4l1 1h5v2H4V4h5l1-1z`})])],-1)],!0)],8,w)):(0,t.createCommentVNode)(``,!0)],!0)])])):(0,t.createCommentVNode)(``,!0)]))),128))])]),M.dataItems.length?(0,t.createCommentVNode)(``,!0):((0,t.openBlock)(),(0,t.createElementBlock)(`div`,T,[(0,t.createElementVNode)(`span`,null,[k[8]||=(0,t.createElementVNode)(`svg`,{class:`icon`,viewBox:`0 0 24 24`},[(0,t.createElementVNode)(`path`,{d:`M12 2L2 22h20L12 2zm0 14h-1v-6h2v6zm0 4h-1v-2h2v2z`})],-1),(0,t.createTextVNode)(` `+(0,t.toDisplayString)(e.dataTableConf.messageNotRecords),1)])]))])],2),(0,t.createElementVNode)(`section`,null,[M.dataItems.length&&(L.value.value>=1||I.value.value.length>=F.value)&&M.dataItems.length>M.dataTableConf.dimensionePagina||M.dataItems.length&&M.dataTableConf.isserver&&M.dataTableConf.serverPaging&&M.dataTableConf.serverPaging.serverTotaleElementi>M.dataTableConf.dimensionePagina?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,E,[M.dataTableConf.paginator&&M.dataTableConf.paginatorPosition?.bottom===!0?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:0,class:(0,t.normalizeClass)(M.dataTableConf.paginatorPosition.class+` col-md-12`)},[(0,t.createElementVNode)(`button`,{class:`btn btn-outline-default navBtn`,type:`button`,onClick:W},[(0,t.createVNode)(A,{name:`iconIndietroBottom`},{default:(0,t.withCtx)(()=>[...k[9]||=[(0,t.createElementVNode)(`span`,null,[(0,t.createElementVNode)(`svg`,{class:`iconNav`,viewBox:`0 0 24 24`},[(0,t.createElementVNode)(`path`,{d:`M15 18l-6-6 6-6`})])],-1)]]),_:1})]),(0,t.createElementVNode)(`button`,D,(0,t.toDisplayString)(L.value.value+1)+` / `+(0,t.toDisplayString)(R.value),1),(0,t.createElementVNode)(`button`,{class:`btn btn-outline-default navBtn`,type:`button`,onClick:U},[(0,t.createVNode)(A,{name:`iconAvantiBottom`},{default:(0,t.withCtx)(()=>[...k[10]||=[(0,t.createElementVNode)(`span`,null,[(0,t.createElementVNode)(`svg`,{class:`iconNav`,viewBox:`0 0 24 24`},[(0,t.createElementVNode)(`path`,{d:`M9 6l6 6-6 6`})])],-1)]]),_:1})])],2)):(0,t.createCommentVNode)(``,!0)])):(0,t.createCommentVNode)(``,!0)])],64)}}}),k=(e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n},A=k(O,[[`__scopeId`,`data-v-347ab0dc`]]);e.Avatar=k((0,t.defineComponent)({__name:`Avatar`,props:{label:{},class:{},backgroundDynamics:{type:Boolean},background:{},color:{}},setup(e){let n=e,r=[`#f4cccc`,`#d9ead3`,`#ffe599`,`#cfe2f3`,`#f9cb9c`,`#d5a6bd`,`#9fc5e8`,`#b6d7a8`,`#ffe6cc`,`#f6c1a6`,`#e6ccff`,`#ffd9b3`,`#c2f0f7`,`#ffebd7`,`#d0e0e3`,`#f7d9c4`,`#e0f7e9`,`#f2f9f9`,`#fde2e2`,`#f2f2f2`],i=(0,t.computed)(()=>{let e=[];return n.background&&(e.push(`background-color:`),e.push(n.background),e.push(`!important;`)),n.backgroundDynamics&&(e=[],e.push(`background-color:`),e.push(a(n.label)),e.push(`!important;`)),n.color&&(e.push(`color:`),e.push(n.color),e.push(`!important;`)),e.join(``)});function a(e){if(e&&e.length>1){let t=e.charCodeAt(0),n=e.charCodeAt(1),i=((t-65)*26+(n-65))%r.length;return r[i>=0&&i<r.length?i:0]}else return`#d0fbc8`}return(e,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{style:(0,t.normalizeStyle)(i.value),class:(0,t.normalizeClass)(n.class?`avatar size-lg `+n.class:`avatar size-lg`)},(0,t.toDisplayString)(n.label),7))}}),[[`__scopeId`,`data-v-0ae6bfc5`]]),e.DataTableList=A});

package/dist/src/component/commons/Avatar.vue.d.ts

@@ -0,0 +1,10 @@
+type __VLS_Props = {
+    label: string;
+    class?: string | 'size-xs' | 'size-sm' | 'size-lg' | 'size-xl' | 'size-xxl';
+    backgroundDynamics?: boolean;
+    background?: string;
+    color?: string;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/src/component/commons/DataTableList.vue.d.ts

@@ -0,0 +1,64 @@
+import { DataTableConf } from '../../../model/Models';
+type __VLS_Props = {
+    filter?: string;
+    dataTableConf: DataTableConf;
+    dataItems: any[];
+    showCheckbox?: boolean;
+};
+declare var __VLS_1: {
+    ondownload: {
+        oncall: any;
+    };
+}, __VLS_15: {
+    row: any;
+}, __VLS_17: {
+    row: any;
+    column: any;
+}, __VLS_19: {
+    row: any;
+    column: any;
+}, __VLS_21: {
+    row: any;
+}, __VLS_23: {}, __VLS_25: {}, __VLS_27: {};
+type __VLS_Slots = {} & {
+    download?: (props: typeof __VLS_1) => any;
+} & {
+    checkbox?: (props: typeof __VLS_15) => any;
+} & {
+    iconTd?: (props: typeof __VLS_17) => any;
+} & {
+    columnTd?: (props: typeof __VLS_19) => any;
+} & {
+    actions?: (props: typeof __VLS_21) => any;
+} & {
+    iconView?: (props: typeof __VLS_23) => any;
+} & {
+    iconUpdate?: (props: typeof __VLS_25) => any;
+} & {
+    iconDelete?: (props: typeof __VLS_27) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    onview: (obj: object) => any;
+    onupdate: (obj: object) => any;
+    ondelete: (obj: object) => any;
+    onavanti: (current: number, size: number) => any;
+    onindietro: (current: number, size: number) => any;
+    ondownload: (call: any[]) => any;
+    onchecked: (obj: any[]) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onOnview?: ((obj: object) => any) | undefined;
+    onOnupdate?: ((obj: object) => any) | undefined;
+    onOndelete?: ((obj: object) => any) | undefined;
+    onOnavanti?: ((current: number, size: number) => any) | undefined;
+    onOnindietro?: ((current: number, size: number) => any) | undefined;
+    onOndownload?: ((call: any[]) => any) | undefined;
+    onOnchecked?: ((obj: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/src/index.d.ts

@@ -0,0 +1,3 @@
+export type { DataTableConf, ColumnTable, ActionRow, PaginatorPosition, ServerPaging, DataItems } from './model/Models';
+export { default as DataTableList } from './component/commons/DataTableList.vue';
+export { default as Avatar } from './component/commons/Avatar.vue';

package/dist/src/model/Models.d.ts

@@ -0,0 +1,41 @@
+export interface BreadcrumbConf {
+    label: string;
+    actionRouter: any;
+}
+export interface DataTableConf {
+    columns: ColumnTable[];
+    actionsRow?: ActionRow;
+    viewActions: boolean;
+    viewDownload?: boolean;
+    paginator?: boolean;
+    paginatorPosition?: PaginatorPosition;
+    isserver?: boolean;
+    serverPaging?: ServerPaging;
+    dimensionePagina: number;
+    messageNotRecords?: string;
+}
+export interface DataItems<T = any> {
+    rows: T[];
+}
+export interface ServerPaging {
+    serverTotaleElementi: number;
+    serverTotalePagine: number;
+}
+export interface PaginatorPosition {
+    top: boolean;
+    bottom: boolean;
+    class: string | 'center' | 'left' | 'right';
+}
+export interface ColumnTable {
+    title: string;
+    property: string;
+    style?: string | null;
+    callFormatt?: Function | null;
+    hidden?: boolean;
+    order?: boolean;
+}
+export interface ActionRow {
+    view: boolean;
+    update: boolean;
+    delete: boolean;
+}

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "data-table-list",
+  "version": "0.0.0",
+  "private": false,
+  "type": "module",
+  "main": "./dist/data-table-list.umd.cjs",
+  "module": "./dist/data-table-list.js",
+  "types": "./dist/src/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/src/index.d.ts",
+      "import": "./dist/data-table-list.js",
+      "require": "./dist/data-table-list.umd.cjs"
+    },
+    "./dist/data-table-list.css": "./dist/data-table-list.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "run-p type-check \"build-only {@}\" --",
+    "preview": "vite preview",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --build",
+    "prepare": "npm run build"
+  },
+  "dependencies": {
+    "bootstrap-italia": "^2.18.1",
+    "vue": "^3.5.32",
+    "vue-router": "^4.6.4"
+  },
+  "peerDependencies": {
+    "bootstrap-italia": "^2.18.1",
+    "vue": "^3.5.32",
+    "vue-router": "^4.6.4"
+  },
+  "devDependencies": {
+    "@microsoft/api-extractor": "^7.58.7",
+    "@tsconfig/node24": "^24.0.4",
+    "@types/node": "^24.12.2",
+    "@vitejs/plugin-vue": "^6.0.6",
+    "@vue/tsconfig": "^0.9.1",
+    "npm-run-all2": "^8.0.4",
+    "typescript": "~6.0.0",
+    "vite": "^8.0.8",
+    "vite-plugin-dts": "^5.0.2",
+    "vite-plugin-vue-devtools": "^8.1.1",
+    "vue-tsc": "^3.2.6"
+  },
+  "engines": {
+    "node": "^20.19.0 || >=22.12.0"
+  }
+}