admins-components 9.0.27 → 9.0.29

package/dist/admins-components63.js

@@ -0,0 +1,140 @@
+import e from "./admins-components6.js";
+import t from "./admins-components19.js";
+import n from "./admins-components27.js";
+import r from "./admins-components52.js";
+import { useSelection as i } from "./admins-components57.js";
+import { dataTableSettingsDefaults as a } from "./admins-components58.js";
+import { buildActionGroupMenuItems as o, isActionGroup as s } from "./admins-components59.js";
+import c from "./admins-components62.js";
+import { Fragment as l, computed as u, createBlock as d, createCommentVNode as f, createElementBlock as p, createElementVNode as m, createTextVNode as h, createVNode as g, defineComponent as _, mergeProps as v, normalizeClass as y, normalizeStyle as b, openBlock as x, ref as S, renderList as C, toDisplayString as w, unref as T, withModifiers as E } from "vue";
+//#region src/components/data-table/DataTable.vue?vue&type=script&setup=true&lang.ts
+var D = { class: "ac-component" }, O = { class: "c-table-wrapper" }, k = { key: 0 }, A = ["onClick"], j = {
+	key: 1,
+	class: "c-actions-header"
+}, M = { key: 0 }, N = ["onClick"], P = {
+	key: 1,
+	class: "c-actions-cell"
+}, F = { class: "c-actions-wrap" }, I = { key: 1 }, L = { class: "c-table__loading-row" }, R = ["colspan"], z = { class: "c-table__loading-wrap" }, B = {
+	key: 0,
+	class: "c-table__backdrop",
+	"aria-hidden": "true"
+}, V = /* @__PURE__ */ _({
+	__name: "DataTable",
+	props: {
+		config: {},
+		items: {},
+		settings: { default: () => ({ ...a }) },
+		loading: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	emits: ["selection-change", "sort-change"],
+	setup(a, { emit: _ }) {
+		let V = a, H = _, U = S(null), { selectedKeys: W, allSelected: G, toggle: K, toggleAll: q } = i(() => V.items, () => V.config.selectableAttr, (e) => H("selection-change", e)), J = u(() => V.config.columns.filter((e) => e.visible !== !1));
+		function Y(e) {
+			let t = U.value?.key === e && U.value.direction === "asc" ? "desc" : "asc";
+			U.value = {
+				key: e,
+				direction: t
+			}, H("sort-change", {
+				key: e,
+				direction: t
+			});
+		}
+		return (i, u) => (x(), p("div", D, [m("div", O, [m("table", {
+			class: y(["c-table", {
+				"is-compact": a.settings.compact,
+				"is-loading": a.loading
+			}]),
+			style: b({ "--action-count": a.config.actions?.length ?? 0 })
+		}, [m("thead", null, [m("tr", null, [
+			a.config.selectableAttr ? (x(), p("th", k, [g(t, {
+				"model-value": T(G),
+				"onUpdate:modelValue": T(q)
+			}, null, 8, ["model-value", "onUpdate:modelValue"])])) : f("", !0),
+			(x(!0), p(l, null, C(J.value, (e) => (x(), p("th", {
+				key: e.property,
+				class: y({
+					"c-sortable": e.sort,
+					"c-sortable--sorted": U.value?.key === e.property,
+					"primary-col": e.primary
+				}),
+				onClick: (t) => e.sort ? Y(e.property) : void 0
+			}, [h(w(e.label) + " ", 1), e.sort ? (x(), p("span", {
+				key: 0,
+				class: y(["c-sort-icon fa-solid", {
+					"fa-sort": U.value?.key !== e.property,
+					"fa-sort-down": U.value?.key === e.property && U.value.direction === "desc",
+					"fa-sort-up": U.value?.key === e.property && U.value.direction === "asc",
+					"c-sort-icon--active": U.value?.key === e.property,
+					"is-asc": U.value?.key === e.property && U.value.direction === "asc",
+					"is-desc": U.value?.key === e.property && U.value.direction === "desc"
+				}])
+			}, null, 2)) : f("", !0)], 10, A))), 128)),
+			a.config.actions ? (x(), p("th", j, w(a.config.actionHeader ?? ""), 1)) : f("", !0)
+		])]), !a.loading || a.items.length > 0 ? (x(), p("tbody", M, [(x(!0), p(l, null, C(a.items, (r, i) => (x(), p("tr", {
+			key: i,
+			class: y({
+				"is-selected": a.config.selectableAttr && T(W).has(r[a.config.selectableAttr]),
+				"is-striped": a.settings.striped && i % 2 == 1
+			})
+		}, [
+			a.config.selectableAttr ? (x(), p("td", {
+				key: 0,
+				class: "pointer",
+				onClick: E((e) => T(K)(r), ["stop"])
+			}, [g(t, {
+				"model-value": !!T(W).has(r[a.config.selectableAttr]),
+				"onUpdate:modelValue": (e) => T(K)(r),
+				onClick: u[0] ||= E(() => {}, ["stop"])
+			}, null, 8, ["model-value", "onUpdate:modelValue"])], 8, N)) : f("", !0),
+			(x(!0), p(l, null, C(J.value, (e) => (x(), p("td", {
+				key: e.property,
+				class: y(["c-table__cell", [e.class, { "primary-col": e.primary }]])
+			}, [g(c, {
+				item: r,
+				col: e
+			}, null, 8, ["item", "col"])], 2))), 128)),
+			a.config.actions ? (x(), p("td", P, [m("div", F, [(x(!0), p(l, null, C(a.config.actions, (t, i) => (x(), p(l, { key: i }, [T(s)(t) ? (x(), d(n, v({
+				key: 0,
+				icon: t.icon,
+				label: t.label,
+				items: T(o)(t, r)
+			}, { ref_for: !0 }, t.config), null, 16, [
+				"icon",
+				"label",
+				"items"
+			])) : (x(), d(e, v({
+				key: 1,
+				icon: t.icon,
+				label: t.label,
+				type: t.type,
+				disabled: t.disabled ? t.disabled(r) : !1,
+				size: t.label ? "small" : "normal",
+				ariaLabel: t.ariaLabel,
+				outline: "",
+				callback: () => t.callback(r)
+			}, { ref_for: !0 }, t.config), null, 16, [
+				"icon",
+				"label",
+				"type",
+				"disabled",
+				"size",
+				"ariaLabel",
+				"callback"
+			]))], 64))), 128))])])) : f("", !0)
+		], 2))), 128))])) : (x(), p("tbody", I, [m("tr", L, [m("td", {
+			colspan: J.value.length + +!!a.config.selectableAttr + +!!a.config.actions,
+			class: "c-table__loading-cell"
+		}, [m("div", z, [g(r, {
+			loading: !0,
+			size: "2.5rem"
+		})])], 8, R)])]))], 6), a.loading && a.items.length > 0 ? (x(), p("div", B, [g(r, {
+			loading: !0,
+			size: "2.5rem"
+		})])) : f("", !0)])]));
+	}
+});
+//#endregion
+export { V as default };

package/dist/admins-components63.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"admins-components63.js","names":[],"sources":["../src/components/data-table/DataTable.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type {\n  LayoutMode,\n  DataListConfig,\n  DataListSettings,\n  DataTableSettings,\n  DataCardsSettings,\n  Column,\n  Sort,\n  Action,\n  ActionGroup,\n  FilterConfig,\n  FilterValue,\n} from '@/types/data-list'\n\nexport {\n  dataTableSettingsDefaults,\n  dataCardsSettingsDefaults,\n  dataListSettingsDefaults,\n} from '@/types/data-list'\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport Button from '@/components/Button.vue'\nimport Checkbox from '@/components/Checkbox.vue'\nimport { useSelection } from '@/composables/useSelection'\nimport { dataTableSettingsDefaults } from '@/types/data-list'\nimport type { DataListConfig, DataTableSettings } from '@/types/data-list'\nimport Loader from '@/components/Loader.vue'\nimport DataCell from './DataCell.vue'\nimport DropdownMenu from '../DropdownMenu.vue'\nimport { buildActionGroupMenuItems, isActionGroup } from '@/utils/dataList'\n\ntype SortDirection = 'asc' | 'desc'\n\nconst props = withDefaults(\n  defineProps<{\n    config: DataListConfig\n    items: Record<string, unknown>[]\n    settings?: DataTableSettings\n    loading?: boolean\n  }>(),\n  {\n    settings: () => ({ ...dataTableSettingsDefaults }),\n    loading: false,\n  },\n)\n\nconst emit = defineEmits<{\n  'selection-change': [selected: unknown[]]\n  'sort-change': [sort: { key: string; direction: SortDirection }]\n}>()\n\n//const CHARACTER_BREAKPOINT = 20\n\nconst activeSort = ref<{\n  key: string\n  direction: SortDirection\n} | null>(null)\n\nconst {\n  selectedKeys,\n  allSelected,\n  toggle: toggleRow,\n  toggleAll,\n} = useSelection(\n  () => props.items,\n  () => props.config.selectableAttr,\n  (s) => emit('selection-change', s),\n)\n\nconst visibleColumns = computed(() => props.config.columns.filter((c) => c.visible !== false))\n\nfunction handleSort(key: string) {\n  const direction: SortDirection =\n    activeSort.value?.key === key && activeSort.value.direction === 'asc' ? 'desc' : 'asc'\n\n  activeSort.value = { key, direction }\n\n  emit('sort-change', { key, direction })\n}\n</script>\n\n<template>\n  <div class=\"ac-component\">\n    <div class=\"c-table-wrapper\">\n      <table\n        class=\"c-table\"\n        :class=\"{ 'is-compact': settings.compact, 'is-loading': loading }\"\n        :style=\"{ '--action-count': config.actions?.length ?? 0 }\"\n      >\n        <thead>\n          <tr>\n            <th v-if=\"config.selectableAttr\">\n              <Checkbox :model-value=\"allSelected\" @update:model-value=\"toggleAll\" />\n            </th>\n\n            <th\n              v-for=\"col in visibleColumns\"\n              :key=\"col.property\"\n              :class=\"{\n                'c-sortable': col.sort,\n                'c-sortable--sorted': activeSort?.key === col.property,\n                'primary-col': col.primary,\n              }\"\n              @click=\"col.sort ? handleSort(col.property) : undefined\"\n            >\n              {{ col.label }}\n\n              <span\n                v-if=\"col.sort\"\n                class=\"c-sort-icon fa-solid\"\n                :class=\"{\n                  'fa-sort': activeSort?.key !== col.property,\n                  'fa-sort-down':\n                    activeSort?.key === col.property && activeSort.direction === 'desc',\n                  'fa-sort-up': activeSort?.key === col.property && activeSort.direction === 'asc',\n                  'c-sort-icon--active': activeSort?.key === col.property,\n                  'is-asc': activeSort?.key === col.property && activeSort.direction === 'asc',\n                  'is-desc': activeSort?.key === col.property && activeSort.direction === 'desc',\n                }\"\n              ></span>\n            </th>\n\n            <th v-if=\"config.actions\" class=\"c-actions-header\">\n              {{ config.actionHeader ?? '' }}\n            </th>\n          </tr>\n        </thead>\n\n        <tbody v-if=\"!loading || items.length > 0\">\n          <tr\n            v-for=\"(item, index) in items\"\n            :key=\"index\"\n            :class=\"{\n              'is-selected': config.selectableAttr && selectedKeys.has(item[config.selectableAttr]),\n              'is-striped': settings.striped && index % 2 === 1,\n            }\"\n          >\n            <td v-if=\"config.selectableAttr\" class=\"pointer\" @click.stop=\"toggleRow(item)\">\n              <Checkbox\n                :model-value=\"!!selectedKeys.has(item[config.selectableAttr])\"\n                @update:model-value=\"toggleRow(item)\"\n                @click.stop\n              />\n            </td>\n\n            <td\n              v-for=\"col in visibleColumns\"\n              :key=\"col.property\"\n              class=\"c-table__cell\"\n              :class=\"[\n                col.class,\n                { 'primary-col': col.primary },\n                /* { 'is-nowrap': String(getColumnValue(item, col) ?? '').length < CHARACTER_BREAKPOINT}, */\n              ]\"\n            >\n              <DataCell :item=\"item\" :col=\"col\" />\n            </td>\n\n            <td v-if=\"config.actions\" class=\"c-actions-cell\">\n              <div class=\"c-actions-wrap\">\n                <template v-for=\"(action, ai) in config.actions\" :key=\"ai\">\n                  <DropdownMenu\n                    v-if=\"isActionGroup(action)\"\n                    :icon=\"action.icon\"\n                    :label=\"action.label\"\n                    :items=\"buildActionGroupMenuItems(action, item)\"\n                    v-bind=\"action.config\"\n                  />\n\n                  <Button\n                    v-else\n                    :icon=\"action.icon\"\n                    :label=\"action.label\"\n                    :type=\"action.type\"\n                    :disabled=\"action.disabled ? action.disabled(item) : false\"\n                    :size=\"action.label ? 'small' : 'normal'\"\n                    :ariaLabel=\"action.ariaLabel\"\n                    outline\n                    :callback=\"() => action.callback(item)\"\n                    v-bind=\"action.config\"\n                  />\n                </template>\n              </div>\n            </td>\n          </tr>\n        </tbody>\n        <tbody v-else>\n          <tr class=\"c-table__loading-row\">\n            <td\n              :colspan=\"\n                visibleColumns.length + (config.selectableAttr ? 1 : 0) + (config.actions ? 1 : 0)\n              \"\n              class=\"c-table__loading-cell\"\n            >\n              <div class=\"c-table__loading-wrap\">\n                <Loader :loading=\"true\" size=\"2.5rem\" />\n              </div>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n      <div v-if=\"loading && items.length > 0\" class=\"c-table__backdrop\" aria-hidden=\"true\">\n        <Loader :loading=\"true\" size=\"2.5rem\" />\n      </div>\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/data-table/data-table.scss\"></style>\n"],"mappings":"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"}

package/dist/admins-components65.js

@@ -1,8 +1,8 @@
-//#region src/utils/objects.ts
-function e(t, n) {
-	let r = { ...t };
-	for (let i in n) n[i] && typeof n[i] == "object" && !Array.isArray(n[i]) && i in t && typeof t[i] == "object" ? r[i] = e(t[i], n[i]) : r[i] = n[i];
-	return r;
-}
+import './src/styles/components/data-table/data-table.scss_vue_type_style_index_0_src_true_lang.css';
+import "./admins-components58.js";
+import e from "./admins-components63.js";
+/* empty css                    */
+//#region src/components/data-table/DataTable.vue
+var t = e;
 //#endregion
-export { e as deepMerge };
+export { t as default };

package/dist/admins-components65.js.map

@@ -1 +1 @@
-{"version":3,"file":"admins-components65.js","names":[],"sources":["../src/utils/objects.ts"],"sourcesContent":["export function deepMerge(target: Record<string, any>, source: Record<string, any>) {\n  const result = { ...target };\n\n  for (const key in source) {\n    if (\n      source[key] &&\n      typeof source[key] === 'object' &&\n      !Array.isArray(source[key]) &&\n      key in target &&\n      typeof target[key] === 'object'\n    ) {\n      result[key] = deepMerge(target[key], source[key]);\n    } else {\n      result[key] = source[key];\n    }\n  }\n\n  return result;\n}\n"],"mappings":";AAAA,SAAgB,EAAU,GAA6B,GAA6B;CAClF,IAAM,IAAS,EAAE,GAAG,EAAO;CAE3B,KAAK,IAAM,KAAO,GAChB,AACE,EAAO,MACP,OAAO,EAAO,MAAS,YACvB,CAAC,MAAM,QAAQ,EAAO,EAAI,KAC1B,KAAO,KACP,OAAO,EAAO,MAAS,WAEvB,EAAO,KAAO,EAAU,EAAO,IAAM,EAAO,EAAI,IAEhD,EAAO,KAAO,EAAO;CAIzB,OAAO;AACT"}
+{"version":3,"file":"admins-components65.js","names":[],"sources":["../src/components/data-table/DataTable.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type {\n  LayoutMode,\n  DataListConfig,\n  DataListSettings,\n  DataTableSettings,\n  DataCardsSettings,\n  Column,\n  Sort,\n  Action,\n  ActionGroup,\n  FilterConfig,\n  FilterValue,\n} from '@/types/data-list'\n\nexport {\n  dataTableSettingsDefaults,\n  dataCardsSettingsDefaults,\n  dataListSettingsDefaults,\n} from '@/types/data-list'\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport Button from '@/components/Button.vue'\nimport Checkbox from '@/components/Checkbox.vue'\nimport { useSelection } from '@/composables/useSelection'\nimport { dataTableSettingsDefaults } from '@/types/data-list'\nimport type { DataListConfig, DataTableSettings } from '@/types/data-list'\nimport Loader from '@/components/Loader.vue'\nimport DataCell from './DataCell.vue'\nimport DropdownMenu from '../DropdownMenu.vue'\nimport { buildActionGroupMenuItems, isActionGroup } from '@/utils/dataList'\n\ntype SortDirection = 'asc' | 'desc'\n\nconst props = withDefaults(\n  defineProps<{\n    config: DataListConfig\n    items: Record<string, unknown>[]\n    settings?: DataTableSettings\n    loading?: boolean\n  }>(),\n  {\n    settings: () => ({ ...dataTableSettingsDefaults }),\n    loading: false,\n  },\n)\n\nconst emit = defineEmits<{\n  'selection-change': [selected: unknown[]]\n  'sort-change': [sort: { key: string; direction: SortDirection }]\n}>()\n\n//const CHARACTER_BREAKPOINT = 20\n\nconst activeSort = ref<{\n  key: string\n  direction: SortDirection\n} | null>(null)\n\nconst {\n  selectedKeys,\n  allSelected,\n  toggle: toggleRow,\n  toggleAll,\n} = useSelection(\n  () => props.items,\n  () => props.config.selectableAttr,\n  (s) => emit('selection-change', s),\n)\n\nconst visibleColumns = computed(() => props.config.columns.filter((c) => c.visible !== false))\n\nfunction handleSort(key: string) {\n  const direction: SortDirection =\n    activeSort.value?.key === key && activeSort.value.direction === 'asc' ? 'desc' : 'asc'\n\n  activeSort.value = { key, direction }\n\n  emit('sort-change', { key, direction })\n}\n</script>\n\n<template>\n  <div class=\"ac-component\">\n    <div class=\"c-table-wrapper\">\n      <table\n        class=\"c-table\"\n        :class=\"{ 'is-compact': settings.compact, 'is-loading': loading }\"\n        :style=\"{ '--action-count': config.actions?.length ?? 0 }\"\n      >\n        <thead>\n          <tr>\n            <th v-if=\"config.selectableAttr\">\n              <Checkbox :model-value=\"allSelected\" @update:model-value=\"toggleAll\" />\n            </th>\n\n            <th\n              v-for=\"col in visibleColumns\"\n              :key=\"col.property\"\n              :class=\"{\n                'c-sortable': col.sort,\n                'c-sortable--sorted': activeSort?.key === col.property,\n                'primary-col': col.primary,\n              }\"\n              @click=\"col.sort ? handleSort(col.property) : undefined\"\n            >\n              {{ col.label }}\n\n              <span\n                v-if=\"col.sort\"\n                class=\"c-sort-icon fa-solid\"\n                :class=\"{\n                  'fa-sort': activeSort?.key !== col.property,\n                  'fa-sort-down':\n                    activeSort?.key === col.property && activeSort.direction === 'desc',\n                  'fa-sort-up': activeSort?.key === col.property && activeSort.direction === 'asc',\n                  'c-sort-icon--active': activeSort?.key === col.property,\n                  'is-asc': activeSort?.key === col.property && activeSort.direction === 'asc',\n                  'is-desc': activeSort?.key === col.property && activeSort.direction === 'desc',\n                }\"\n              ></span>\n            </th>\n\n            <th v-if=\"config.actions\" class=\"c-actions-header\">\n              {{ config.actionHeader ?? '' }}\n            </th>\n          </tr>\n        </thead>\n\n        <tbody v-if=\"!loading || items.length > 0\">\n          <tr\n            v-for=\"(item, index) in items\"\n            :key=\"index\"\n            :class=\"{\n              'is-selected': config.selectableAttr && selectedKeys.has(item[config.selectableAttr]),\n              'is-striped': settings.striped && index % 2 === 1,\n            }\"\n          >\n            <td v-if=\"config.selectableAttr\" class=\"pointer\" @click.stop=\"toggleRow(item)\">\n              <Checkbox\n                :model-value=\"!!selectedKeys.has(item[config.selectableAttr])\"\n                @update:model-value=\"toggleRow(item)\"\n                @click.stop\n              />\n            </td>\n\n            <td\n              v-for=\"col in visibleColumns\"\n              :key=\"col.property\"\n              class=\"c-table__cell\"\n              :class=\"[\n                col.class,\n                { 'primary-col': col.primary },\n                /* { 'is-nowrap': String(getColumnValue(item, col) ?? '').length < CHARACTER_BREAKPOINT}, */\n              ]\"\n            >\n              <DataCell :item=\"item\" :col=\"col\" />\n            </td>\n\n            <td v-if=\"config.actions\" class=\"c-actions-cell\">\n              <div class=\"c-actions-wrap\">\n                <template v-for=\"(action, ai) in config.actions\" :key=\"ai\">\n                  <DropdownMenu\n                    v-if=\"isActionGroup(action)\"\n                    :icon=\"action.icon\"\n                    :label=\"action.label\"\n                    :items=\"buildActionGroupMenuItems(action, item)\"\n                    v-bind=\"action.config\"\n                  />\n\n                  <Button\n                    v-else\n                    :icon=\"action.icon\"\n                    :label=\"action.label\"\n                    :type=\"action.type\"\n                    :disabled=\"action.disabled ? action.disabled(item) : false\"\n                    :size=\"action.label ? 'small' : 'normal'\"\n                    :ariaLabel=\"action.ariaLabel\"\n                    outline\n                    :callback=\"() => action.callback(item)\"\n                    v-bind=\"action.config\"\n                  />\n                </template>\n              </div>\n            </td>\n          </tr>\n        </tbody>\n        <tbody v-else>\n          <tr class=\"c-table__loading-row\">\n            <td\n              :colspan=\"\n                visibleColumns.length + (config.selectableAttr ? 1 : 0) + (config.actions ? 1 : 0)\n              \"\n              class=\"c-table__loading-cell\"\n            >\n              <div class=\"c-table__loading-wrap\">\n                <Loader :loading=\"true\" size=\"2.5rem\" />\n              </div>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n      <div v-if=\"loading && items.length > 0\" class=\"c-table__backdrop\" aria-hidden=\"true\">\n        <Loader :loading=\"true\" size=\"2.5rem\" />\n      </div>\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/data-table/data-table.scss\"></style>\n"],"mappings":""}