admins-components 9.0.56 → 9.0.57
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/admins-components35.js +2 -1
- package/dist/admins-components35.js.map +1 -1
- package/dist/admins-components37.js.map +1 -1
- package/dist/admins-components65.js +58 -61
- package/dist/admins-components65.js.map +1 -1
- package/dist/admins-components67.js.map +1 -1
- package/dist/src/components/HeaderComponent.vue.d.ts +1 -0
- package/dist/src/styles/components/data-table/data-table.scss_vue_type_style_index_0_src_true_lang.css +1 -1
- package/package.json +1 -1
|
@@ -23,6 +23,7 @@ var h = { class: "ac-component" }, g = { class: "hc-header" }, _ = { class: "hc-
|
|
|
23
23
|
props: /* @__PURE__ */ c({
|
|
24
24
|
title: {},
|
|
25
25
|
icon: {},
|
|
26
|
+
showBackButton: { type: Boolean },
|
|
26
27
|
backButton: {},
|
|
27
28
|
toolbars: {}
|
|
28
29
|
}, { ...C }),
|
|
@@ -42,7 +43,7 @@ var h = { class: "ac-component" }, g = { class: "hc-header" }, _ = { class: "hc-
|
|
|
42
43
|
});
|
|
43
44
|
return (n, c) => (d(), a("div", h, [o("header", g, [
|
|
44
45
|
o("div", _, [
|
|
45
|
-
w.value ? (d(), r(e, l({
|
|
46
|
+
s.showBackButton && w.value ? (d(), r(e, l({
|
|
46
47
|
key: 0,
|
|
47
48
|
class: "hc-back-btn"
|
|
48
49
|
}, w.value), null, 16)) : i("", !0),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"admins-components35.js","names":["$slots"],"sources":["../src/components/HeaderComponent.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ButtonProps } from '@/components/Button.vue'\nimport type { HorizontalAlignment } from '@/types/types'\n\nexport interface HeaderToolbar {\n align: HorizontalAlignment\n buttons: ButtonProps[]\n}\n\nexport interface HeaderComponentProps {\n title: string\n icon?: string\n\n backButton?: ButtonProps\n toolbars?: HeaderToolbar[]\n}\n\nexport const headerComponentDefaults = {\n icon: undefined,\n backButton: () => ({\n icon: 'fa-solid fa-chevron-left',\n ariaLabel: 'Vissza',\n callback: () => {},\n }),\n toolbars: () => [],\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport Button from '@/components/Button.vue'\n\nconst props = withDefaults(defineProps<HeaderComponentProps>(), {\n ...headerComponentDefaults,\n})\n\nconst mergedBackButton = computed<ButtonProps | undefined>(() => {\n if (!props.backButton) return undefined\n return { ...headerComponentDefaults.backButton(), ...props.backButton }\n})\n\nconst sortedToolbars = computed(() => {\n const order: Record<HorizontalAlignment, number> = { left: 0, center: 1, right: 2 }\n return [...props.toolbars].sort((a, b) => order[a.align] - order[b.align])\n})\n</script>\n\n<template>\n <div class=\"ac-component\">\n <header class=\"hc-header\">\n <div class=\"hc-left\">\n <Button\n v-if=\"mergedBackButton\"\n class=\"hc-back-btn\"\n v-bind=\"mergedBackButton\"\n />\n\n <div class=\"hc-title-group\">\n <i v-if=\"icon\" :class=\"icon\" class=\"hc-title-icon\"></i>\n <h1 class=\"hc-title\">{{ title }}</h1>\n </div>\n\n <div v-if=\"$slots.left\" class=\"hc-slot hc-slot--left\">\n <slot name=\"left\" />\n </div>\n\n <div\n v-for=\"(toolbar, ti) in sortedToolbars.filter((t) => t.align === 'left')\"\n :key=\"`l-${ti}`\"\n class=\"hc-buttons hc-buttons--left\"\n >\n <Button v-for=\"(btn, i) in toolbar.buttons\" :key=\"i\" v-bind=\"btn\" />\n </div>\n </div>\n\n <div\n v-if=\"$slots.center || sortedToolbars.some((t) => t.align === 'center')\"\n class=\"hc-slot hc-slot--center\"\n >\n <slot name=\"center\" />\n <div\n v-for=\"(toolbar, ti) in sortedToolbars.filter((t) => t.align === 'center')\"\n :key=\"`c-${ti}`\"\n class=\"hc-buttons\"\n >\n <Button v-for=\"(btn, i) in toolbar.buttons\" :key=\"i\" v-bind=\"btn\" />\n </div>\n </div>\n\n <div\n v-if=\"$slots.right || sortedToolbars.some((t) => t.align === 'right')\"\n class=\"hc-slot hc-slot--right\"\n >\n <slot name=\"right\" />\n <div\n v-for=\"(toolbar, ti) in sortedToolbars.filter((t) => t.align === 'right')\"\n :key=\"`r-${ti}`\"\n class=\"hc-buttons\"\n >\n <Button v-for=\"(btn, i) in toolbar.buttons\" :key=\"i\" v-bind=\"btn\" />\n </div>\n </div>\n </header>\n </div>\n</template>\n<style lang=\"scss\" src=\"@/styles/components/header.scss\"></style>\n"],"mappings":";;;;;;;;;;;;GAiBa,IAA0B;CACrC,MAAM,KAAA;CACN,mBAAmB;EACjB,MAAM;EACN,WAAW;EACX,gBAAgB,CAAC;CACnB;CACA,gBAAgB,CAAC;AACnB
|
|
1
|
+
{"version":3,"file":"admins-components35.js","names":["$slots"],"sources":["../src/components/HeaderComponent.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ButtonProps } from '@/components/Button.vue'\nimport type { HorizontalAlignment } from '@/types/types'\n\nexport interface HeaderToolbar {\n align: HorizontalAlignment\n buttons: ButtonProps[]\n}\n\nexport interface HeaderComponentProps {\n title: string\n icon?: string\n showBackButton?: boolean\n backButton?: ButtonProps\n toolbars?: HeaderToolbar[]\n}\n\nexport const headerComponentDefaults = {\n icon: undefined,\n backButton: () => ({\n icon: 'fa-solid fa-chevron-left',\n ariaLabel: 'Vissza',\n callback: () => {},\n }),\n toolbars: () => [],\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport Button from '@/components/Button.vue'\n\nconst props = withDefaults(defineProps<HeaderComponentProps>(), {\n ...headerComponentDefaults,\n})\n\nconst mergedBackButton = computed<ButtonProps | undefined>(() => {\n if (!props.backButton) return undefined\n return { ...headerComponentDefaults.backButton(), ...props.backButton }\n})\n\nconst sortedToolbars = computed(() => {\n const order: Record<HorizontalAlignment, number> = { left: 0, center: 1, right: 2 }\n return [...props.toolbars].sort((a, b) => order[a.align] - order[b.align])\n})\n</script>\n\n<template>\n <div class=\"ac-component\">\n <header class=\"hc-header\">\n <div class=\"hc-left\">\n <Button\n v-if=\"showBackButton && mergedBackButton\"\n class=\"hc-back-btn\"\n v-bind=\"mergedBackButton\"\n />\n\n <div class=\"hc-title-group\">\n <i v-if=\"icon\" :class=\"icon\" class=\"hc-title-icon\"></i>\n <h1 class=\"hc-title\">{{ title }}</h1>\n </div>\n\n <div v-if=\"$slots.left\" class=\"hc-slot hc-slot--left\">\n <slot name=\"left\" />\n </div>\n\n <div\n v-for=\"(toolbar, ti) in sortedToolbars.filter((t) => t.align === 'left')\"\n :key=\"`l-${ti}`\"\n class=\"hc-buttons hc-buttons--left\"\n >\n <Button v-for=\"(btn, i) in toolbar.buttons\" :key=\"i\" v-bind=\"btn\" />\n </div>\n </div>\n\n <div\n v-if=\"$slots.center || sortedToolbars.some((t) => t.align === 'center')\"\n class=\"hc-slot hc-slot--center\"\n >\n <slot name=\"center\" />\n <div\n v-for=\"(toolbar, ti) in sortedToolbars.filter((t) => t.align === 'center')\"\n :key=\"`c-${ti}`\"\n class=\"hc-buttons\"\n >\n <Button v-for=\"(btn, i) in toolbar.buttons\" :key=\"i\" v-bind=\"btn\" />\n </div>\n </div>\n\n <div\n v-if=\"$slots.right || sortedToolbars.some((t) => t.align === 'right')\"\n class=\"hc-slot hc-slot--right\"\n >\n <slot name=\"right\" />\n <div\n v-for=\"(toolbar, ti) in sortedToolbars.filter((t) => t.align === 'right')\"\n :key=\"`r-${ti}`\"\n class=\"hc-buttons\"\n >\n <Button v-for=\"(btn, i) in toolbar.buttons\" :key=\"i\" v-bind=\"btn\" />\n </div>\n </div>\n </header>\n </div>\n</template>\n<style lang=\"scss\" src=\"@/styles/components/header.scss\"></style>\n"],"mappings":";;;;;;;;;;;;GAiBa,IAA0B;CACrC,MAAM,KAAA;CACN,mBAAmB;EACjB,MAAM;EACN,WAAW;EACX,gBAAgB,CAAC;CACnB;CACA,gBAAgB,CAAC;AACnB;;;;;;;;;;EAOA,IAAM,IAAQ,GAIR,IAAmB,QAAwC;GAC1D,MAAM,YACX,OAAO;IAAE,GAAG,EAAwB,WAAW;IAAG,GAAG,EAAM;GAAW;EACxE,CAAC,GAEK,IAAiB,QAAe;GACpC,IAAM,IAA6C;IAAE,MAAM;IAAG,QAAQ;IAAG,OAAO;GAAE;GAClF,OAAO,CAAC,GAAG,EAAM,QAAQ,EAAE,MAAM,GAAG,MAAM,EAAM,EAAE,SAAS,EAAM,EAAE,MAAM;EAC3E,CAAC;yBAIC,EAuDM,OAvDN,GAuDM,CAtDJ,EAqDS,UArDT,GAqDS;GApDP,EAuBM,OAvBN,GAuBM;IArBI,EAAA,kBAAkB,EAAA,SAAA,EAAA,GAD1B,EAIE,GAJF,EAIE;;KAFA,OAAM;OACE,EAAA,KAAgB,GAAA,MAAA,EAAA,KAAA,EAAA,IAAA,EAAA;IAG1B,EAGM,OAHN,GAGM,CAFK,EAAA,QAAA,EAAA,GAAT,EAAuD,KAAA;;KAAvC,OAAK,EAAA,CAAE,EAAA,MAAY,eAAe,CAAA;8BAClD,EAAqC,MAArC,GAAqC,EAAb,EAAA,KAAK,GAAA,CAAA,CAAA,CAAA;IAGpBA,EAAAA,OAAO,QAAA,EAAA,GAAlB,EAEM,OAFN,GAEM,CADJ,EAAoB,EAAA,QAAA,MAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA;YAGtB,EAMM,GAAA,MAAA,EALoB,EAAA,MAAe,QAAQ,MAAM,EAAE,UAAK,MAAA,IAApD,GAAS,YADnB,EAMM,OAAA;KAJH,KAAG,KAAO;KACX,OAAM;gBAEN,EAAoE,GAAA,MAAA,EAAzC,EAAQ,UAAnB,GAAK,YAArB,EAAoE,GAApE,EAAoE,EAAvB,KAAK,EAAC,GAAA,EAAA,SAAA,GAAA,GAAU,CAAG,GAAA,MAAA,EAAA;;GAK5DA,EAAAA,OAAO,UAAU,EAAA,MAAe,MAAM,MAAM,EAAE,UAAK,QAAA,KAAA,EAAA,GAD3D,EAYM,OAZN,GAYM,CARJ,EAAsB,EAAA,QAAA,QAAA,IAAA,EAAA,EAAA,GACtB,EAMM,GAAA,MAAA,EALoB,EAAA,MAAe,QAAQ,MAAM,EAAE,UAAK,QAAA,IAApD,GAAS,YADnB,EAMM,OAAA;IAJH,KAAG,KAAO;IACX,OAAM;eAEN,EAAoE,GAAA,MAAA,EAAzC,EAAQ,UAAnB,GAAK,YAArB,EAAoE,GAApE,EAAoE,EAAvB,KAAK,EAAC,GAAA,EAAA,SAAA,GAAA,GAAU,CAAG,GAAA,MAAA,EAAA;GAK5DA,EAAAA,OAAO,SAAS,EAAA,MAAe,MAAM,MAAM,EAAE,UAAK,OAAA,KAAA,EAAA,GAD1D,EAYM,OAZN,GAYM,CARJ,EAAqB,EAAA,QAAA,OAAA,IAAA,EAAA,EAAA,GACrB,EAMM,GAAA,MAAA,EALoB,EAAA,MAAe,QAAQ,MAAM,EAAE,UAAK,OAAA,IAApD,GAAS,YADnB,EAMM,OAAA;IAJH,KAAG,KAAO;IACX,OAAM;eAEN,EAAoE,GAAA,MAAA,EAAzC,EAAQ,UAAnB,GAAK,YAArB,EAAoE,GAApE,EAAoE,EAAvB,KAAK,EAAC,GAAA,EAAA,SAAA,GAAA,GAAU,CAAG,GAAA,MAAA,EAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"admins-components37.js","names":[],"sources":["../src/components/HeaderComponent.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ButtonProps } from '@/components/Button.vue'\nimport type { HorizontalAlignment } from '@/types/types'\n\nexport interface HeaderToolbar {\n align: HorizontalAlignment\n buttons: ButtonProps[]\n}\n\nexport interface HeaderComponentProps {\n title: string\n icon?: string\n\n backButton?: ButtonProps\n toolbars?: HeaderToolbar[]\n}\n\nexport const headerComponentDefaults = {\n icon: undefined,\n backButton: () => ({\n icon: 'fa-solid fa-chevron-left',\n ariaLabel: 'Vissza',\n callback: () => {},\n }),\n toolbars: () => [],\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport Button from '@/components/Button.vue'\n\nconst props = withDefaults(defineProps<HeaderComponentProps>(), {\n ...headerComponentDefaults,\n})\n\nconst mergedBackButton = computed<ButtonProps | undefined>(() => {\n if (!props.backButton) return undefined\n return { ...headerComponentDefaults.backButton(), ...props.backButton }\n})\n\nconst sortedToolbars = computed(() => {\n const order: Record<HorizontalAlignment, number> = { left: 0, center: 1, right: 2 }\n return [...props.toolbars].sort((a, b) => order[a.align] - order[b.align])\n})\n</script>\n\n<template>\n <div class=\"ac-component\">\n <header class=\"hc-header\">\n <div class=\"hc-left\">\n <Button\n v-if=\"mergedBackButton\"\n class=\"hc-back-btn\"\n v-bind=\"mergedBackButton\"\n />\n\n <div class=\"hc-title-group\">\n <i v-if=\"icon\" :class=\"icon\" class=\"hc-title-icon\"></i>\n <h1 class=\"hc-title\">{{ title }}</h1>\n </div>\n\n <div v-if=\"$slots.left\" class=\"hc-slot hc-slot--left\">\n <slot name=\"left\" />\n </div>\n\n <div\n v-for=\"(toolbar, ti) in sortedToolbars.filter((t) => t.align === 'left')\"\n :key=\"`l-${ti}`\"\n class=\"hc-buttons hc-buttons--left\"\n >\n <Button v-for=\"(btn, i) in toolbar.buttons\" :key=\"i\" v-bind=\"btn\" />\n </div>\n </div>\n\n <div\n v-if=\"$slots.center || sortedToolbars.some((t) => t.align === 'center')\"\n class=\"hc-slot hc-slot--center\"\n >\n <slot name=\"center\" />\n <div\n v-for=\"(toolbar, ti) in sortedToolbars.filter((t) => t.align === 'center')\"\n :key=\"`c-${ti}`\"\n class=\"hc-buttons\"\n >\n <Button v-for=\"(btn, i) in toolbar.buttons\" :key=\"i\" v-bind=\"btn\" />\n </div>\n </div>\n\n <div\n v-if=\"$slots.right || sortedToolbars.some((t) => t.align === 'right')\"\n class=\"hc-slot hc-slot--right\"\n >\n <slot name=\"right\" />\n <div\n v-for=\"(toolbar, ti) in sortedToolbars.filter((t) => t.align === 'right')\"\n :key=\"`r-${ti}`\"\n class=\"hc-buttons\"\n >\n <Button v-for=\"(btn, i) in toolbar.buttons\" :key=\"i\" v-bind=\"btn\" />\n </div>\n </div>\n </header>\n </div>\n</template>\n<style lang=\"scss\" src=\"@/styles/components/header.scss\"></style>\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"admins-components37.js","names":[],"sources":["../src/components/HeaderComponent.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ButtonProps } from '@/components/Button.vue'\nimport type { HorizontalAlignment } from '@/types/types'\n\nexport interface HeaderToolbar {\n align: HorizontalAlignment\n buttons: ButtonProps[]\n}\n\nexport interface HeaderComponentProps {\n title: string\n icon?: string\n showBackButton?: boolean\n backButton?: ButtonProps\n toolbars?: HeaderToolbar[]\n}\n\nexport const headerComponentDefaults = {\n icon: undefined,\n backButton: () => ({\n icon: 'fa-solid fa-chevron-left',\n ariaLabel: 'Vissza',\n callback: () => {},\n }),\n toolbars: () => [],\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport Button from '@/components/Button.vue'\n\nconst props = withDefaults(defineProps<HeaderComponentProps>(), {\n ...headerComponentDefaults,\n})\n\nconst mergedBackButton = computed<ButtonProps | undefined>(() => {\n if (!props.backButton) return undefined\n return { ...headerComponentDefaults.backButton(), ...props.backButton }\n})\n\nconst sortedToolbars = computed(() => {\n const order: Record<HorizontalAlignment, number> = { left: 0, center: 1, right: 2 }\n return [...props.toolbars].sort((a, b) => order[a.align] - order[b.align])\n})\n</script>\n\n<template>\n <div class=\"ac-component\">\n <header class=\"hc-header\">\n <div class=\"hc-left\">\n <Button\n v-if=\"showBackButton && mergedBackButton\"\n class=\"hc-back-btn\"\n v-bind=\"mergedBackButton\"\n />\n\n <div class=\"hc-title-group\">\n <i v-if=\"icon\" :class=\"icon\" class=\"hc-title-icon\"></i>\n <h1 class=\"hc-title\">{{ title }}</h1>\n </div>\n\n <div v-if=\"$slots.left\" class=\"hc-slot hc-slot--left\">\n <slot name=\"left\" />\n </div>\n\n <div\n v-for=\"(toolbar, ti) in sortedToolbars.filter((t) => t.align === 'left')\"\n :key=\"`l-${ti}`\"\n class=\"hc-buttons hc-buttons--left\"\n >\n <Button v-for=\"(btn, i) in toolbar.buttons\" :key=\"i\" v-bind=\"btn\" />\n </div>\n </div>\n\n <div\n v-if=\"$slots.center || sortedToolbars.some((t) => t.align === 'center')\"\n class=\"hc-slot hc-slot--center\"\n >\n <slot name=\"center\" />\n <div\n v-for=\"(toolbar, ti) in sortedToolbars.filter((t) => t.align === 'center')\"\n :key=\"`c-${ti}`\"\n class=\"hc-buttons\"\n >\n <Button v-for=\"(btn, i) in toolbar.buttons\" :key=\"i\" v-bind=\"btn\" />\n </div>\n </div>\n\n <div\n v-if=\"$slots.right || sortedToolbars.some((t) => t.align === 'right')\"\n class=\"hc-slot hc-slot--right\"\n >\n <slot name=\"right\" />\n <div\n v-for=\"(toolbar, ti) in sortedToolbars.filter((t) => t.align === 'right')\"\n :key=\"`r-${ti}`\"\n class=\"hc-buttons\"\n >\n <Button v-for=\"(btn, i) in toolbar.buttons\" :key=\"i\" v-bind=\"btn\" />\n </div>\n </div>\n </header>\n </div>\n</template>\n<style lang=\"scss\" src=\"@/styles/components/header.scss\"></style>\n"],"mappings":""}
|
|
@@ -4,19 +4,19 @@ import { useSelection as n } from "./admins-components57.js";
|
|
|
4
4
|
import { dataTableSettingsDefaults as r } from "./admins-components58.js";
|
|
5
5
|
import i from "./admins-components62.js";
|
|
6
6
|
import a from "./admins-components64.js";
|
|
7
|
-
import { Fragment as o, computed as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createTextVNode as d, createVNode as f, defineComponent as p, nextTick as m, normalizeClass as h,
|
|
7
|
+
import { Fragment as o, computed as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createTextVNode as d, createVNode as f, defineComponent as p, nextTick as m, normalizeClass as h, onMounted as g, openBlock as _, ref as v, renderList as y, toDisplayString as b, unref as x, watch as S, withModifiers as C } from "vue";
|
|
8
8
|
//#region src/components/data-table/DataTable.vue?vue&type=script&setup=true&lang.ts
|
|
9
|
-
var
|
|
9
|
+
var w = { class: "ac-component" }, T = { key: 0 }, E = ["title", "onClick"], D = {
|
|
10
10
|
key: 1,
|
|
11
11
|
class: "c-actions-header"
|
|
12
|
-
},
|
|
12
|
+
}, O = { key: 0 }, k = ["onClick"], A = {
|
|
13
13
|
key: 1,
|
|
14
14
|
class: "c-actions-cell"
|
|
15
|
-
},
|
|
15
|
+
}, j = { class: "c-actions-wrap" }, M = { key: 1 }, N = { class: "c-table__loading-row" }, P = ["colspan"], F = { class: "c-table__loading-wrap" }, I = {
|
|
16
16
|
key: 0,
|
|
17
17
|
class: "c-table__backdrop",
|
|
18
18
|
"aria-hidden": "true"
|
|
19
|
-
},
|
|
19
|
+
}, L = /* @__PURE__ */ p({
|
|
20
20
|
__name: "DataTable",
|
|
21
21
|
props: {
|
|
22
22
|
config: {},
|
|
@@ -30,103 +30,100 @@ var T = { class: "ac-component" }, E = { key: 0 }, D = ["title", "onClick"], O =
|
|
|
30
30
|
},
|
|
31
31
|
emits: ["selection-change", "sort-change"],
|
|
32
32
|
setup(r, { emit: p }) {
|
|
33
|
-
let
|
|
34
|
-
|
|
35
|
-
e && (await m(),
|
|
33
|
+
let L = r, R = p, z = v(null), B = v(null);
|
|
34
|
+
S(() => L.loading, async (e) => {
|
|
35
|
+
e && (await m(), B.value?.scrollTo({
|
|
36
36
|
top: 0,
|
|
37
37
|
behavior: "smooth"
|
|
38
38
|
}));
|
|
39
39
|
});
|
|
40
|
-
let { selectedKeys:
|
|
41
|
-
function
|
|
40
|
+
let { selectedKeys: V, allSelected: H, toggle: U, toggleAll: W } = n(() => L.items, () => L.config.selectableAttr, (e) => R("selection-change", e)), G = s(() => L.config.columns.filter((e) => e.visible !== !1));
|
|
41
|
+
function K(e) {
|
|
42
42
|
return e.sort ? typeof e.sort == "boolean" ? null : e.sort : null;
|
|
43
43
|
}
|
|
44
|
-
function
|
|
44
|
+
function q(e) {
|
|
45
45
|
return !!e.sort;
|
|
46
46
|
}
|
|
47
|
-
function
|
|
48
|
-
let t = e.property, n =
|
|
49
|
-
|
|
47
|
+
function J(e) {
|
|
48
|
+
let t = e.property, n = z.value?.key === t && z.value.direction === "asc" ? "desc" : "asc";
|
|
49
|
+
z.value = {
|
|
50
50
|
key: t,
|
|
51
51
|
direction: n
|
|
52
|
-
},
|
|
52
|
+
}, K(e)?.callback?.(t, n), R("sort-change", {
|
|
53
53
|
key: t,
|
|
54
54
|
direction: n
|
|
55
55
|
});
|
|
56
56
|
}
|
|
57
|
-
function
|
|
57
|
+
function Y(e) {
|
|
58
58
|
if (!e) {
|
|
59
|
-
|
|
59
|
+
z.value !== null && (z.value = null);
|
|
60
60
|
return;
|
|
61
61
|
}
|
|
62
|
-
let t =
|
|
63
|
-
t && (
|
|
62
|
+
let t = L.config.columns.find((t) => t.property === e.key);
|
|
63
|
+
t && (z.value?.key === e.key && z.value.direction === e.direction || (z.value = {
|
|
64
64
|
key: e.key,
|
|
65
65
|
direction: e.direction
|
|
66
|
-
},
|
|
66
|
+
}, K(t)?.callback?.(e.key, e.direction), R("sort-change", {
|
|
67
67
|
key: e.key,
|
|
68
68
|
direction: e.direction
|
|
69
69
|
})));
|
|
70
70
|
}
|
|
71
|
-
return
|
|
71
|
+
return g(() => Y(L.initialSort)), S(() => L.initialSort, (e) => {
|
|
72
72
|
if (!e) {
|
|
73
|
-
|
|
73
|
+
z.value !== null && (z.value = null);
|
|
74
74
|
return;
|
|
75
75
|
}
|
|
76
|
-
|
|
76
|
+
L.config.columns.find((t) => t.property === e.key) && (z.value?.key === e.key && z.value.direction === e.direction || (z.value = {
|
|
77
77
|
key: e.key,
|
|
78
78
|
direction: e.direction
|
|
79
79
|
}));
|
|
80
|
-
}), (n, s) => (
|
|
80
|
+
}), (n, s) => (_(), l("div", w, [u("div", {
|
|
81
81
|
ref_key: "tableWrapperRef",
|
|
82
|
-
ref:
|
|
82
|
+
ref: B,
|
|
83
83
|
class: h(["c-table-wrapper list-table-view", { "is-loading": r.loading }])
|
|
84
|
-
}, [u("table", {
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
r.config.selectableAttr ? (v(), l("th", E, [f(e, {
|
|
89
|
-
"model-value": S(U),
|
|
90
|
-
"onUpdate:modelValue": S(G)
|
|
84
|
+
}, [u("table", { class: h(["c-table", { "is-compact": r.settings.compact }]) }, [u("thead", null, [u("tr", null, [
|
|
85
|
+
r.config.selectableAttr ? (_(), l("th", T, [f(e, {
|
|
86
|
+
"model-value": x(H),
|
|
87
|
+
"onUpdate:modelValue": x(W)
|
|
91
88
|
}, null, 8, ["model-value", "onUpdate:modelValue"])])) : c("", !0),
|
|
92
|
-
(
|
|
89
|
+
(_(!0), l(o, null, y(G.value, (e) => (_(), l("th", {
|
|
93
90
|
key: e.property,
|
|
94
91
|
class: h([{
|
|
95
|
-
"c-sortable":
|
|
96
|
-
"c-sortable--sorted":
|
|
92
|
+
"c-sortable": q(e),
|
|
93
|
+
"c-sortable--sorted": z.value?.key === e.property,
|
|
97
94
|
"primary-col": e.primary
|
|
98
95
|
}, e.headerClass]),
|
|
99
|
-
title:
|
|
100
|
-
onClick: (t) =>
|
|
101
|
-
}, [d(
|
|
96
|
+
title: q(e) ? `Sorrendezés ${e.label} alapján` : void 0,
|
|
97
|
+
onClick: (t) => q(e) ? J(e) : void 0
|
|
98
|
+
}, [d(b(e.hideHeader ? "" : e.label) + " ", 1), q(e) ? (_(), l("span", {
|
|
102
99
|
key: 0,
|
|
103
100
|
class: h(["c-sort-icon fa-solid", {
|
|
104
|
-
"fa-sort":
|
|
105
|
-
"fa-sort-down":
|
|
106
|
-
"fa-sort-up":
|
|
107
|
-
"c-sort-icon--active":
|
|
108
|
-
"is-asc":
|
|
109
|
-
"is-desc":
|
|
101
|
+
"fa-sort": z.value?.key !== e.property,
|
|
102
|
+
"fa-sort-down": z.value?.key === e.property && z.value.direction === "desc",
|
|
103
|
+
"fa-sort-up": z.value?.key === e.property && z.value.direction === "asc",
|
|
104
|
+
"c-sort-icon--active": z.value?.key === e.property,
|
|
105
|
+
"is-asc": z.value?.key === e.property && z.value.direction === "asc",
|
|
106
|
+
"is-desc": z.value?.key === e.property && z.value.direction === "desc"
|
|
110
107
|
}])
|
|
111
|
-
}, null, 2)) : c("", !0)], 10,
|
|
112
|
-
r.config.actions ? (
|
|
113
|
-
])]), !r.loading || r.items.length > 0 ? (
|
|
108
|
+
}, null, 2)) : c("", !0)], 10, E))), 128)),
|
|
109
|
+
r.config.actions ? (_(), l("th", D, b(r.config.actionHeader ?? ""), 1)) : c("", !0)
|
|
110
|
+
])]), !r.loading || r.items.length > 0 ? (_(), l("tbody", O, [(_(!0), l(o, null, y(r.items, (t, n) => (_(), l("tr", {
|
|
114
111
|
key: n,
|
|
115
112
|
class: h({
|
|
116
|
-
"is-selected": r.config.selectableAttr &&
|
|
113
|
+
"is-selected": r.config.selectableAttr && x(V).has(t[r.config.selectableAttr]),
|
|
117
114
|
"is-striped": r.settings.striped && n % 2 == 1
|
|
118
115
|
})
|
|
119
116
|
}, [
|
|
120
|
-
r.config.selectableAttr ? (
|
|
117
|
+
r.config.selectableAttr ? (_(), l("td", {
|
|
121
118
|
key: 0,
|
|
122
119
|
class: "pointer",
|
|
123
|
-
onClick:
|
|
120
|
+
onClick: C((e) => x(U)(t), ["stop"])
|
|
124
121
|
}, [f(e, {
|
|
125
|
-
"model-value": !!
|
|
126
|
-
"onUpdate:modelValue": (e) =>
|
|
127
|
-
onClick: s[0] ||=
|
|
128
|
-
}, null, 8, ["model-value", "onUpdate:modelValue"])], 8,
|
|
129
|
-
(
|
|
122
|
+
"model-value": !!x(V).has(t[r.config.selectableAttr]),
|
|
123
|
+
"onUpdate:modelValue": (e) => x(U)(t),
|
|
124
|
+
onClick: s[0] ||= C(() => {}, ["stop"])
|
|
125
|
+
}, null, 8, ["model-value", "onUpdate:modelValue"])], 8, k)) : c("", !0),
|
|
126
|
+
(_(!0), l(o, null, y(G.value, (e) => (_(), l("td", {
|
|
130
127
|
key: e.property,
|
|
131
128
|
class: h(["c-table__cell", [e.class, { "primary-col": e.primary }]])
|
|
132
129
|
}, [f(i, {
|
|
@@ -138,21 +135,21 @@ var T = { class: "ac-component" }, E = { key: 0 }, D = ["title", "onClick"], O =
|
|
|
138
135
|
"col",
|
|
139
136
|
"copy"
|
|
140
137
|
])], 2))), 128)),
|
|
141
|
-
r.config.actions ? (
|
|
138
|
+
r.config.actions ? (_(), l("td", A, [u("div", j, [f(a, {
|
|
142
139
|
actions: r.config.actions,
|
|
143
140
|
item: t
|
|
144
141
|
}, null, 8, ["actions", "item"])])])) : c("", !0)
|
|
145
|
-
], 2))), 128))])) : (
|
|
146
|
-
colspan:
|
|
142
|
+
], 2))), 128))])) : (_(), l("tbody", M, [u("tr", N, [u("td", {
|
|
143
|
+
colspan: G.value.length + +!!r.config.selectableAttr + +!!r.config.actions,
|
|
147
144
|
class: "c-table__loading-cell"
|
|
148
|
-
}, [u("div",
|
|
145
|
+
}, [u("div", F, [f(t, {
|
|
149
146
|
loading: !0,
|
|
150
147
|
size: "2.5rem"
|
|
151
|
-
})])], 8,
|
|
148
|
+
})])], 8, P)])]))], 2), r.loading && r.items.length > 0 ? (_(), l("div", I, [f(t, {
|
|
152
149
|
loading: !0,
|
|
153
150
|
size: "2.5rem"
|
|
154
151
|
})])) : c("", !0)], 2)]));
|
|
155
152
|
}
|
|
156
153
|
});
|
|
157
154
|
//#endregion
|
|
158
|
-
export {
|
|
155
|
+
export { L as default };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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, onMounted, watch, nextTick } from 'vue'\nimport Checkbox from '@/components/Checkbox.vue'\nimport { useSelection } from '@/composables/useSelection'\nimport { dataTableSettingsDefaults } from '@/types/data-list'\nimport type { Column, DataListConfig, DataTableSettings, Sort } from '@/types/data-list'\nimport Loader from '@/components/Loader.vue'\nimport DataCell from './DataCell.vue'\nimport DataListActions from './DataListActions.vue'\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 initialSort?: { key: string; direction: SortDirection } | null\n }>(),\n {\n settings: () => ({ ...dataTableSettingsDefaults }),\n loading: false,\n initialSort: null,\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 tableWrapperRef = ref<HTMLElement | null>(null)\n\nwatch(\n () => props.loading,\n async (isLoading) => {\n if (isLoading) {\n await nextTick()\n tableWrapperRef.value?.scrollTo({ top: 0, behavior: 'smooth' })\n }\n },\n)\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 getSortConfig(col: Column): Sort | null {\n if (!col.sort) return null\n return typeof col.sort === 'boolean' ? null : col.sort\n}\n\nfunction isSortable(col: Column): boolean {\n return !!col.sort\n}\n\nfunction handleSort(col: Column) {\n const key = col.property\n const direction: SortDirection =\n activeSort.value?.key === key && activeSort.value.direction === 'asc' ? 'desc' : 'asc'\n\n activeSort.value = { key, direction }\n getSortConfig(col)?.callback?.(key, direction)\n\n emit('sort-change', { key, direction })\n}\n\nfunction applyInitialSort(sort: { key: string; direction: SortDirection } | null | undefined) {\n if (!sort) {\n if (activeSort.value !== null) activeSort.value = null\n return\n }\n const col = props.config.columns.find((c) => c.property === sort.key)\n if (!col) return\n if (activeSort.value?.key === sort.key && activeSort.value.direction === sort.direction) return\n activeSort.value = { key: sort.key, direction: sort.direction }\n getSortConfig(col)?.callback?.(sort.key, sort.direction)\n emit('sort-change', { key: sort.key, direction: sort.direction })\n}\n\nonMounted(() => applyInitialSort(props.initialSort))\nwatch(\n () => props.initialSort,\n (s) => {\n // When initialSort changes, sync the visual indicator only.\n // Don't re-emit sort-change — that would cause an infinite loop with\n // parents that re-assign the prop from the emitted value.\n if (!s) {\n if (activeSort.value !== null) activeSort.value = null\n return\n }\n const col = props.config.columns.find((c) => c.property === s.key)\n if (!col) return\n if (activeSort.value?.key === s.key && activeSort.value.direction === s.direction) return\n activeSort.value = { key: s.key, direction: s.direction }\n },\n)\n</script>\n\n<template>\n <div class=\"ac-component\">\n <div\n ref=\"tableWrapperRef\"\n class=\"c-table-wrapper list-table-view\"\n :class=\"{ 'is-loading': loading }\"\n >\n <table\n class=\"c-table\"\n :class=\"{ 'is-compact': settings.compact }\"\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 {\n 'c-sortable': isSortable(col),\n 'c-sortable--sorted': activeSort?.key === col.property,\n 'primary-col': col.primary,\n },\n col.headerClass,\n ]\"\n :title=\"isSortable(col) ? `Sorrendezés ${col.label} alapján` : undefined\"\n @click=\"isSortable(col) ? handleSort(col) : undefined\"\n >\n {{ !col.hideHeader ? col.label : '' }}\n\n <span\n v-if=\"isSortable(col)\"\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\" :copy=\"!col.hideCopyToClipboard\" />\n </td>\n\n <td v-if=\"config.actions\" class=\"c-actions-cell\">\n <div class=\"c-actions-wrap\">\n <DataListActions :actions=\"config.actions\" :item=\"item\" />\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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"}
|
|
1
|
+
{"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, onMounted, watch, nextTick } from 'vue'\nimport Checkbox from '@/components/Checkbox.vue'\nimport { useSelection } from '@/composables/useSelection'\nimport { dataTableSettingsDefaults } from '@/types/data-list'\nimport type { Column, DataListConfig, DataTableSettings, Sort } from '@/types/data-list'\nimport Loader from '@/components/Loader.vue'\nimport DataCell from './DataCell.vue'\nimport DataListActions from './DataListActions.vue'\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 initialSort?: { key: string; direction: SortDirection } | null\n }>(),\n {\n settings: () => ({ ...dataTableSettingsDefaults }),\n loading: false,\n initialSort: null,\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 tableWrapperRef = ref<HTMLElement | null>(null)\n\nwatch(\n () => props.loading,\n async (isLoading) => {\n if (isLoading) {\n await nextTick()\n tableWrapperRef.value?.scrollTo({ top: 0, behavior: 'smooth' })\n }\n },\n)\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 getSortConfig(col: Column): Sort | null {\n if (!col.sort) return null\n return typeof col.sort === 'boolean' ? null : col.sort\n}\n\nfunction isSortable(col: Column): boolean {\n return !!col.sort\n}\n\nfunction handleSort(col: Column) {\n const key = col.property\n const direction: SortDirection =\n activeSort.value?.key === key && activeSort.value.direction === 'asc' ? 'desc' : 'asc'\n\n activeSort.value = { key, direction }\n getSortConfig(col)?.callback?.(key, direction)\n\n emit('sort-change', { key, direction })\n}\n\nfunction applyInitialSort(sort: { key: string; direction: SortDirection } | null | undefined) {\n if (!sort) {\n if (activeSort.value !== null) activeSort.value = null\n return\n }\n const col = props.config.columns.find((c) => c.property === sort.key)\n if (!col) return\n if (activeSort.value?.key === sort.key && activeSort.value.direction === sort.direction) return\n activeSort.value = { key: sort.key, direction: sort.direction }\n getSortConfig(col)?.callback?.(sort.key, sort.direction)\n emit('sort-change', { key: sort.key, direction: sort.direction })\n}\n\nonMounted(() => applyInitialSort(props.initialSort))\nwatch(\n () => props.initialSort,\n (s) => {\n // When initialSort changes, sync the visual indicator only.\n // Don't re-emit sort-change — that would cause an infinite loop with\n // parents that re-assign the prop from the emitted value.\n if (!s) {\n if (activeSort.value !== null) activeSort.value = null\n return\n }\n const col = props.config.columns.find((c) => c.property === s.key)\n if (!col) return\n if (activeSort.value?.key === s.key && activeSort.value.direction === s.direction) return\n activeSort.value = { key: s.key, direction: s.direction }\n },\n)\n</script>\n\n<template>\n <div class=\"ac-component\">\n <div\n ref=\"tableWrapperRef\"\n class=\"c-table-wrapper list-table-view\"\n :class=\"{ 'is-loading': loading }\"\n >\n <!-- :style=\"{ '--action-count': config.actions?.length ?? 0 }\" -->\n <table class=\"c-table\" :class=\"{ 'is-compact': settings.compact }\">\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 {\n 'c-sortable': isSortable(col),\n 'c-sortable--sorted': activeSort?.key === col.property,\n 'primary-col': col.primary,\n },\n col.headerClass,\n ]\"\n :title=\"isSortable(col) ? `Sorrendezés ${col.label} alapján` : undefined\"\n @click=\"isSortable(col) ? handleSort(col) : undefined\"\n >\n {{ !col.hideHeader ? col.label : '' }}\n\n <span\n v-if=\"isSortable(col)\"\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\" :copy=\"!col.hideCopyToClipboard\" />\n </td>\n\n <td v-if=\"config.actions\" class=\"c-actions-cell\">\n <div class=\"c-actions-wrap\">\n <DataListActions :actions=\"config.actions\" :item=\"item\" />\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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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"admins-components67.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, onMounted, watch, nextTick } from 'vue'\nimport Checkbox from '@/components/Checkbox.vue'\nimport { useSelection } from '@/composables/useSelection'\nimport { dataTableSettingsDefaults } from '@/types/data-list'\nimport type { Column, DataListConfig, DataTableSettings, Sort } from '@/types/data-list'\nimport Loader from '@/components/Loader.vue'\nimport DataCell from './DataCell.vue'\nimport DataListActions from './DataListActions.vue'\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 initialSort?: { key: string; direction: SortDirection } | null\n }>(),\n {\n settings: () => ({ ...dataTableSettingsDefaults }),\n loading: false,\n initialSort: null,\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 tableWrapperRef = ref<HTMLElement | null>(null)\n\nwatch(\n () => props.loading,\n async (isLoading) => {\n if (isLoading) {\n await nextTick()\n tableWrapperRef.value?.scrollTo({ top: 0, behavior: 'smooth' })\n }\n },\n)\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 getSortConfig(col: Column): Sort | null {\n if (!col.sort) return null\n return typeof col.sort === 'boolean' ? null : col.sort\n}\n\nfunction isSortable(col: Column): boolean {\n return !!col.sort\n}\n\nfunction handleSort(col: Column) {\n const key = col.property\n const direction: SortDirection =\n activeSort.value?.key === key && activeSort.value.direction === 'asc' ? 'desc' : 'asc'\n\n activeSort.value = { key, direction }\n getSortConfig(col)?.callback?.(key, direction)\n\n emit('sort-change', { key, direction })\n}\n\nfunction applyInitialSort(sort: { key: string; direction: SortDirection } | null | undefined) {\n if (!sort) {\n if (activeSort.value !== null) activeSort.value = null\n return\n }\n const col = props.config.columns.find((c) => c.property === sort.key)\n if (!col) return\n if (activeSort.value?.key === sort.key && activeSort.value.direction === sort.direction) return\n activeSort.value = { key: sort.key, direction: sort.direction }\n getSortConfig(col)?.callback?.(sort.key, sort.direction)\n emit('sort-change', { key: sort.key, direction: sort.direction })\n}\n\nonMounted(() => applyInitialSort(props.initialSort))\nwatch(\n () => props.initialSort,\n (s) => {\n // When initialSort changes, sync the visual indicator only.\n // Don't re-emit sort-change — that would cause an infinite loop with\n // parents that re-assign the prop from the emitted value.\n if (!s) {\n if (activeSort.value !== null) activeSort.value = null\n return\n }\n const col = props.config.columns.find((c) => c.property === s.key)\n if (!col) return\n if (activeSort.value?.key === s.key && activeSort.value.direction === s.direction) return\n activeSort.value = { key: s.key, direction: s.direction }\n },\n)\n</script>\n\n<template>\n <div class=\"ac-component\">\n <div\n ref=\"tableWrapperRef\"\n class=\"c-table-wrapper list-table-view\"\n :class=\"{ 'is-loading': loading }\"\n >\n
|
|
1
|
+
{"version":3,"file":"admins-components67.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, onMounted, watch, nextTick } from 'vue'\nimport Checkbox from '@/components/Checkbox.vue'\nimport { useSelection } from '@/composables/useSelection'\nimport { dataTableSettingsDefaults } from '@/types/data-list'\nimport type { Column, DataListConfig, DataTableSettings, Sort } from '@/types/data-list'\nimport Loader from '@/components/Loader.vue'\nimport DataCell from './DataCell.vue'\nimport DataListActions from './DataListActions.vue'\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 initialSort?: { key: string; direction: SortDirection } | null\n }>(),\n {\n settings: () => ({ ...dataTableSettingsDefaults }),\n loading: false,\n initialSort: null,\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 tableWrapperRef = ref<HTMLElement | null>(null)\n\nwatch(\n () => props.loading,\n async (isLoading) => {\n if (isLoading) {\n await nextTick()\n tableWrapperRef.value?.scrollTo({ top: 0, behavior: 'smooth' })\n }\n },\n)\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 getSortConfig(col: Column): Sort | null {\n if (!col.sort) return null\n return typeof col.sort === 'boolean' ? null : col.sort\n}\n\nfunction isSortable(col: Column): boolean {\n return !!col.sort\n}\n\nfunction handleSort(col: Column) {\n const key = col.property\n const direction: SortDirection =\n activeSort.value?.key === key && activeSort.value.direction === 'asc' ? 'desc' : 'asc'\n\n activeSort.value = { key, direction }\n getSortConfig(col)?.callback?.(key, direction)\n\n emit('sort-change', { key, direction })\n}\n\nfunction applyInitialSort(sort: { key: string; direction: SortDirection } | null | undefined) {\n if (!sort) {\n if (activeSort.value !== null) activeSort.value = null\n return\n }\n const col = props.config.columns.find((c) => c.property === sort.key)\n if (!col) return\n if (activeSort.value?.key === sort.key && activeSort.value.direction === sort.direction) return\n activeSort.value = { key: sort.key, direction: sort.direction }\n getSortConfig(col)?.callback?.(sort.key, sort.direction)\n emit('sort-change', { key: sort.key, direction: sort.direction })\n}\n\nonMounted(() => applyInitialSort(props.initialSort))\nwatch(\n () => props.initialSort,\n (s) => {\n // When initialSort changes, sync the visual indicator only.\n // Don't re-emit sort-change — that would cause an infinite loop with\n // parents that re-assign the prop from the emitted value.\n if (!s) {\n if (activeSort.value !== null) activeSort.value = null\n return\n }\n const col = props.config.columns.find((c) => c.property === s.key)\n if (!col) return\n if (activeSort.value?.key === s.key && activeSort.value.direction === s.direction) return\n activeSort.value = { key: s.key, direction: s.direction }\n },\n)\n</script>\n\n<template>\n <div class=\"ac-component\">\n <div\n ref=\"tableWrapperRef\"\n class=\"c-table-wrapper list-table-view\"\n :class=\"{ 'is-loading': loading }\"\n >\n <!-- :style=\"{ '--action-count': config.actions?.length ?? 0 }\" -->\n <table class=\"c-table\" :class=\"{ 'is-compact': settings.compact }\">\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 {\n 'c-sortable': isSortable(col),\n 'c-sortable--sorted': activeSort?.key === col.property,\n 'primary-col': col.primary,\n },\n col.headerClass,\n ]\"\n :title=\"isSortable(col) ? `Sorrendezés ${col.label} alapján` : undefined\"\n @click=\"isSortable(col) ? handleSort(col) : undefined\"\n >\n {{ !col.hideHeader ? col.label : '' }}\n\n <span\n v-if=\"isSortable(col)\"\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\" :copy=\"!col.hideCopyToClipboard\" />\n </td>\n\n <td v-if=\"config.actions\" class=\"c-actions-cell\">\n <div class=\"c-actions-wrap\">\n <DataListActions :actions=\"config.actions\" :item=\"item\" />\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":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.c-table-wrapper{--table-col-max-width:clamp(12rem, 10vw, 22rem);--table-primary-col-min-width:clamp(14rem, 33vw, 20rem);--table-primary-col-max-width:clamp(14rem, 28vw, 28rem);max-height:var(--data-list-max-height,75dvh);-webkit-overflow-scrolling:touch;position:relative;overflow:auto}.c-table-wrapper .c-table{--cell-padding:.375rem
|
|
1
|
+
.c-table-wrapper{--table-col-max-width:clamp(12rem, 10vw, 22rem);--table-primary-col-min-width:clamp(14rem, 33vw, 20rem);--table-primary-col-max-width:clamp(14rem, 28vw, 28rem);max-height:var(--data-list-max-height,75dvh);-webkit-overflow-scrolling:touch;position:relative;overflow:auto}.c-table-wrapper .c-table{--cell-padding:.375rem;border-collapse:collapse;width:100%;min-width:48rem;font-size:.875rem}.c-table-wrapper .c-table thead{z-index:2;background-color:var(--neutral-150);position:sticky;top:0;box-shadow:0 2px 5px -1px #32325d40,0 1px 3px -1px #0000004d}.c-table-wrapper .c-table th,.c-table-wrapper .c-table td{padding:var(--cell-padding);text-align:left;border-bottom:1px solid var(--neutral-200);overflow-wrap:break-word}.c-table-wrapper .c-table .primary-col{min-width:var(--table-primary-col-min-width);max-width:var(--table-primary-col-max-width);overflow-wrap:anywhere;word-break:break-word}.c-table-wrapper .c-table th.c-sortable{cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap}.c-table-wrapper .c-table th.c-sortable--sorted{color:var(--premium-500)}.c-table-wrapper .c-table th.c-sortable:hover{color:#1e2627}.c-table-wrapper .c-table th .c-sort-icon{color:var(--neutral-400);margin-left:.25rem;transition:color .15s}.c-table-wrapper .c-table th .c-sort-icon--active{color:var(--premium-500)}.c-table-wrapper .c-table td{max-width:var(--table-col-max-width)}.c-table-wrapper .c-table td.is-nowrap{white-space:nowrap}.c-table-wrapper .c-table.is-compact th{padding-top:.5rem;padding-bottom:.5rem}.c-table-wrapper .c-table.is-compact td{padding-top:.1875rem;padding-bottom:.1875rem}.c-table-wrapper .c-table tbody tr.is-striped{background-color:var(--neutral-50)}.c-table-wrapper .c-table tbody tr.is-selected,.c-table-wrapper .c-table tbody tr.is-striped.is-selected{background-color:var(--premium-200)}.c-table-wrapper .c-table tbody .c-table__loading-row,.c-table-wrapper .c-table tbody .c-table__loading-row:hover{background-color:#0000}.c-table-wrapper .c-table tbody .c-table__loading-cell{text-align:center;border-bottom:1px solid var(--neutral-200);padding:2rem}.c-table-wrapper .c-table tbody .c-table__loading-wrap{justify-content:center;align-items:center;width:100%;display:flex}@media (hover:hover) and (pointer:fine){.c-table-wrapper .c-table th.c-sortable:hover .c-sort-icon{color:var(--neutral-700)}.c-table-wrapper .c-table tbody tr:hover,.c-table-wrapper .c-table tbody tr.is-striped:hover{background-color:var(--premium-100)}.c-table-wrapper .c-table tbody tr:hover td,.c-table-wrapper .c-table tbody tr.is-striped:hover td{border-color:var(--premium-400)}.c-table-wrapper .c-table tbody tr.is-selected:hover,.c-table-wrapper .c-table tbody tr.is-striped.is-selected:hover{background-color:var(--premium-300)}}.c-table-wrapper .c-table .c-actions-header{text-align:center}.c-table-wrapper .c-table .c-actions-cell .c-actions-wrap{flex-wrap:wrap;justify-content:center;align-items:baseline;gap:.25rem;display:flex}.c-table-wrapper .c-table__cell{position:relative}@media (hover:none),(pointer:coarse){.c-table-wrapper .c-table__cell{transition:background-color .15s}.c-table-wrapper .c-table__cell:focus-within,.c-table-wrapper .c-table__cell:hover{background-color:#dfefef80}}.c-table-wrapper .c-table__cell .c-copy-btn{opacity:0;position:absolute;top:0;right:0}.c-table-wrapper .c-table__cell:hover .c-copy-btn,.c-table-wrapper .c-table__cell:focus-within .c-copy-btn{opacity:1}.c-table-wrapper .c-table__backdrop{z-index:1;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);pointer-events:none;background:#fff9;justify-content:center;align-items:center;padding-top:3rem;animation:.15s ease-out c-table-backdrop-in;display:flex;position:absolute;inset:0}.c-table-wrapper.is-loading{touch-action:none;overflow:hidden}.c-table-wrapper.is-loading .c-table tbody{opacity:.45;transition:opacity .15s ease-out}@keyframes c-table-backdrop-in{0%{opacity:0}to{opacity:1}}
|