admins-components 9.0.87 → 9.0.90
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-components100.js +9 -9
- package/dist/admins-components100.js.map +1 -1
- package/dist/admins-components102.js.map +1 -1
- package/dist/admins-components103.js +15 -6
- package/dist/admins-components103.js.map +1 -1
- package/dist/admins-components105.js.map +1 -1
- package/dist/admins-components38.js +24 -27
- package/dist/admins-components38.js.map +1 -1
- package/dist/admins-components40.js.map +1 -1
- package/dist/admins-components80.js.map +1 -1
- package/dist/admins-components82.js.map +1 -1
- package/dist/admins-components83.js +54 -53
- package/dist/admins-components83.js.map +1 -1
- package/dist/admins-components85.js.map +1 -1
- package/dist/admins-components87.js +14 -14
- package/dist/admins-components87.js.map +1 -1
- package/dist/admins-components91.js +3 -2
- package/dist/admins-components91.js.map +1 -1
- package/dist/admins-components93.js.map +1 -1
- package/dist/main.css +1 -1
- package/dist/src/components/data-table/DataFilters.vue.d.ts +2 -0
- package/dist/src/components/data-table/DataList.vue.d.ts +2 -0
- package/dist/src/components/data-table/DataPaginator.vue.d.ts +4 -3
- package/dist/src/components/data-table/DataSearch.vue.d.ts +4 -0
- package/dist/src/components/data-table/DataSort.vue.d.ts +3 -0
- package/dist/src/index.d.ts +1 -1
- package/dist/src/types/types.d.ts +1 -0
- package/dist/src/utils/dataFilters.d.ts +2 -2
- package/dist/styles/components/data-table/data-cards.scss_vue_type_style_index_0_src_true_lang.css +1 -1
- package/dist/styles/components/data-table/data-list.scss_vue_type_style_index_0_src_true_lang.css +1 -1
- package/dist/styles/components/data-table/data-paginator.scss_vue_type_style_index_0_src_true_lang.css +1 -1
- package/dist/styles/components/data-table/data-search.scss_vue_type_style_index_0_src_true_lang.css +1 -1
- package/dist/styles/components/data-table/data-sort.scss_vue_type_style_index_0_src_true_lang.css +1 -1
- package/dist/styles/components/data-table/data-table.scss_vue_type_style_index_0_src_true_lang.css +1 -1
- package/dist/styles/components/data-table/filter-tags.scss_vue_type_style_index_0_src_true_lang.css +1 -1
- package/dist/styles/components/modal.scss_vue_type_style_index_0_src_true_lang.css +1 -1
- package/dist/widget/dist/search-posts-widget.css +1 -1
- package/dist/widget/dist/search-posts-widget.es.js +669 -641
- package/dist/widget/dist/search-posts-widget.umd.js +2 -2
- package/dist/widget.css +1 -1
- package/package.json +1 -1
|
@@ -3,9 +3,8 @@ import t from "./admins-components17.js";
|
|
|
3
3
|
import n from "./admins-components19.js";
|
|
4
4
|
import { writeUrlOrRemove as r } from "./admins-components79.js";
|
|
5
5
|
import { filterEmptyValues as i } from "./admins-components87.js";
|
|
6
|
-
import { createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, defineComponent as u,
|
|
6
|
+
import { createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, defineComponent as u, normalizeClass as d, onMounted as f, openBlock as p, ref as m, withCtx as h } from "vue";
|
|
7
7
|
//#region src/components/data-table/DataSearch.vue?vue&type=script&setup=true&lang.ts
|
|
8
|
-
var h = { class: "data-search-wrapper" };
|
|
9
8
|
function g(e = "search", t = "exactMatch") {
|
|
10
9
|
let n = new URLSearchParams(typeof window > "u" ? "" : window.location.search), r = n.get(e) ?? "", a = n.get(t);
|
|
11
10
|
return i({
|
|
@@ -30,11 +29,12 @@ var _ = /*@__PURE__*/ u({
|
|
|
30
29
|
default: !1
|
|
31
30
|
},
|
|
32
31
|
searchKey: { default: "search" },
|
|
33
|
-
exactMatchKey: { default: "exactMatch" }
|
|
32
|
+
exactMatchKey: { default: "exactMatch" },
|
|
33
|
+
fontSize: { default: "normal" }
|
|
34
34
|
},
|
|
35
35
|
emits: ["search-change"],
|
|
36
36
|
setup(i, { emit: u }) {
|
|
37
|
-
let _ = i, v = g(_.searchKey, _.exactMatchKey), y =
|
|
37
|
+
let _ = i, v = g(_.searchKey, _.exactMatchKey), y = m(v.exactMatch), b = m(v.search ?? ""), x = u;
|
|
38
38
|
function S() {
|
|
39
39
|
let e = {};
|
|
40
40
|
_.showSearch && (e[_.searchKey] = b.value), _.showExactMatch && (e[_.exactMatchKey] = y.value ?? !1), x("search-change", e);
|
|
@@ -52,21 +52,21 @@ var _ = /*@__PURE__*/ u({
|
|
|
52
52
|
function E(e) {
|
|
53
53
|
b.value = e == null ? "" : String(e).trim(), S(), w();
|
|
54
54
|
}
|
|
55
|
-
return
|
|
55
|
+
return f(() => {
|
|
56
56
|
_.handleUrl && (b.value || (y.value ?? !1)) && S();
|
|
57
|
-
}), (e, r) => (
|
|
57
|
+
}), (e, r) => (p(), s("div", { class: d(["ac-component data-search-wrapper", [`is-font-${i.fontSize}`]]) }, [i.showExactMatch ? (p(), a(n, {
|
|
58
58
|
key: 0,
|
|
59
59
|
"model-value": y.value,
|
|
60
60
|
class: "gap-1",
|
|
61
61
|
"onUpdate:modelValue": T
|
|
62
62
|
}, {
|
|
63
|
-
label:
|
|
63
|
+
label: h(() => [...r[0] ||= [c("span", { class: "data-search-label" }, [
|
|
64
64
|
l("Pontos"),
|
|
65
65
|
c("br"),
|
|
66
66
|
l("egyezés ")
|
|
67
67
|
], -1)]]),
|
|
68
68
|
_: 1
|
|
69
|
-
}, 8, ["model-value"])) : o("", !0), i.showSearch ? (
|
|
69
|
+
}, 8, ["model-value"])) : o("", !0), i.showSearch ? (p(), a(t, {
|
|
70
70
|
key: 1,
|
|
71
71
|
type: "text",
|
|
72
72
|
clearable: "",
|
|
@@ -76,7 +76,7 @@ var _ = /*@__PURE__*/ u({
|
|
|
76
76
|
placeholder: i.placeholder,
|
|
77
77
|
autocomplete: !1,
|
|
78
78
|
"onUpdate:modelValue": E
|
|
79
|
-
}, null, 8, ["model-value", "placeholder"])) : o("", !0)]));
|
|
79
|
+
}, null, 8, ["model-value", "placeholder"])) : o("", !0)], 2));
|
|
80
80
|
}
|
|
81
81
|
});
|
|
82
82
|
//#endregion
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"admins-components100.js","names":[],"sources":["../src/components/data-table/DataSearch.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface DataSearchProps {\n showExactMatch?: boolean\n showSearch?: boolean\n placeholder?: string\n handleUrl?: boolean\n searchKey?: string\n exactMatchKey?: string\n}\n\nexport interface DefaultSearch {\n search?: string\n exactMatch?: boolean | undefined\n}\n\nexport function getDefaultSearch(\n searchKey = 'search',\n exactMatchKey = 'exactMatch',\n): DefaultSearch {\n const params = new URLSearchParams(
|
|
1
|
+
{"version":3,"file":"admins-components100.js","names":[],"sources":["../src/components/data-table/DataSearch.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface DataSearchProps {\n showExactMatch?: boolean\n showSearch?: boolean\n placeholder?: string\n handleUrl?: boolean\n searchKey?: string\n exactMatchKey?: string\n /** Font-size modifier driven by DataListSettings.fontSize. */\n fontSize?: FontSize\n}\n\nexport interface DefaultSearch {\n search?: string\n exactMatch?: boolean | undefined\n}\n\nexport function getDefaultSearch(\n searchKey = 'search',\n exactMatchKey = 'exactMatch',\n): DefaultSearch {\n const params = new URLSearchParams(typeof window === 'undefined' ? '' : window.location.search)\n const search = params.get(searchKey) ?? ''\n const exactRaw = params.get(exactMatchKey)\n const exactMatch =\n exactRaw === 'true' || exactRaw === '1'\n ? true\n : exactRaw === 'false' || exactRaw === '0'\n ? false\n : undefined\n return filterEmptyValues({ search, exactMatch })\n}\n</script>\n\n<script setup lang=\"ts\">\nimport type { FontSize } from '@/types/types'\nimport Checkbox from '@/components/Checkbox.vue'\nimport TextInput from '@/components/TextInput.vue'\nimport { writeUrlOrRemove } from '@/utils/url'\nimport { debounce } from '@/utils/debounce'\nimport { onMounted, ref } from 'vue'\nimport { filterEmptyValues } from '@/utils/dataFilters'\n\nconst props = withDefaults(defineProps<DataSearchProps>(), {\n showExactMatch: true,\n showSearch: true,\n placeholder: 'Keresés...',\n handleUrl: false,\n searchKey: 'search',\n exactMatchKey: 'exactMatch',\n fontSize: 'normal',\n})\n\ntype SearchFilterPayload = { [k: string]: string | boolean }\n\nconst initial = getDefaultSearch(props.searchKey, props.exactMatchKey)\nconst exactMatch = ref<boolean | undefined>(initial.exactMatch)\nconst search = ref<string>(initial.search ?? '')\n\nconst emit = defineEmits<{\n 'search-change': [filters: SearchFilterPayload]\n}>()\n\nfunction emitChange() {\n const filters: SearchFilterPayload = {}\n if (props.showSearch) filters[props.searchKey] = search.value\n if (props.showExactMatch) filters[props.exactMatchKey] = exactMatch.value ?? false\n emit('search-change', filters)\n}\n\nfunction syncToUrl() {\n writeUrlOrRemove(props.searchKey, search.value, { handleUrl: props.handleUrl })\n writeUrlOrRemove(props.exactMatchKey, exactMatch.value ?? false, {\n handleUrl: props.handleUrl,\n default: false,\n })\n}\n\nconst debouncedSyncToUrl = debounce(syncToUrl, 300)\n\nfunction onCheckboxChange(value: boolean | undefined) {\n exactMatch.value = value\n emitChange()\n debouncedSyncToUrl()\n}\n\nfunction onSearchChange(value: string | number | null) {\n search.value = value == null ? '' : String(value).trim()\n emitChange()\n debouncedSyncToUrl()\n}\n\nonMounted(() => {\n if (!props.handleUrl) return\n\n if (search.value || (exactMatch.value ?? false)) emitChange()\n})\n</script>\n<template>\n <div class=\"ac-component data-search-wrapper\" :class=\"[`is-font-${fontSize}`]\">\n <Checkbox\n v-if=\"showExactMatch\"\n :model-value=\"exactMatch\"\n class=\"gap-1\"\n @update:model-value=\"onCheckboxChange\"\n >\n <template #label>\n <span class=\"data-search-label\">Pontos<br />egyezés </span>\n </template>\n </Checkbox>\n <TextInput\n v-if=\"showSearch\"\n type=\"text\"\n clearable\n :model-value=\"search\"\n inputClass=\"data-search-input\"\n label-on-border=\"Keresés\"\n :placeholder=\"placeholder\"\n :autocomplete=\"false\"\n @update:model-value=\"onSearchChange\"\n />\n </div>\n</template>\n<style lang=\"scss\" src=\"@/styles/components/data-table/data-search.scss\"></style>\n"],"mappings":";;;;;;;AAiBA,SAAgB,EACd,IAAY,UACZ,IAAgB,cACD;CACf,IAAM,IAAS,IAAI,gBAAgB,OAAO,SAAW,MAAc,KAAK,OAAO,SAAS,MAAM,GACxF,IAAS,EAAO,IAAI,CAAS,KAAK,IAClC,IAAW,EAAO,IAAI,CAAa;CAOzC,OAAO,EAAkB;EAAE;EAAQ,YALjC,MAAa,UAAU,MAAa,MAChC,KACA,MAAa,WAAW,MAAa,MACnC,KACA,KAAA;CACsC,CAAC;AACjD;;;;;;;;;;;;;;;;;;;;;;;EAYA,IAAM,IAAQ,GAYR,IAAU,EAAiB,EAAM,WAAW,EAAM,aAAa,GAC/D,IAAa,EAAyB,EAAQ,UAAU,GACxD,IAAS,EAAY,EAAQ,UAAU,EAAE,GAEzC,IAAO;EAIb,SAAS,IAAa;GACpB,IAAM,IAA+B,CAAC;GAGtC,AAFI,EAAM,eAAY,EAAQ,EAAM,aAAa,EAAO,QACpD,EAAM,mBAAgB,EAAQ,EAAM,iBAAiB,EAAW,SAAS,KAC7E,EAAK,iBAAiB,CAAO;EAC/B;EAEA,SAAS,IAAY;GAEnB,AADA,EAAiB,EAAM,WAAW,EAAO,OAAO,EAAE,WAAW,EAAM,UAAU,CAAC,GAC9E,EAAiB,EAAM,eAAe,EAAW,SAAS,IAAO;IAC/D,WAAW,EAAM;IACjB,SAAS;GACX,CAAC;EACH;EAEA,IAAM,IAAqB,EAAS,GAAW,GAAG;EAElD,SAAS,EAAiB,GAA4B;GAGpD,AAFA,EAAW,QAAQ,GACnB,EAAW,GACX,EAAmB;EACrB;EAEA,SAAS,EAAe,GAA+B;GAGrD,AAFA,EAAO,QAAQ,KAAS,OAAO,KAAK,OAAO,CAAK,CAAC,CAAC,KAAK,GACvD,EAAW,GACX,EAAmB;EACrB;SAEA,QAAgB;GACT,EAAM,cAEP,EAAO,UAAU,EAAW,SAAS,QAAQ,EAAW;EAC9D,CAAC,cAGC,EAAA,GAAA,EAsBM,OAAA,EAtBD,OAAK,EAAA,CAAC,oCAAkC,CAAA,WAAqB,EAAA,UAAQ,CAAA,CAAA,EAAA,GAAA,CAEhE,EAAA,kBADR,EAAA,GAAA,EASW,GAAA;;GAPR,eAAa,EAAA;GACd,OAAM;GACL,uBAAoB;;GAEV,OAAK,QAC6C,CAAA,GAAA,AAAA,EAAA,OAAA,CAA3D,EAA2D,QAAA,EAArD,OAAM,oBAAmB,GAAA;IAAC,EAAA,QAAM;IAAA,EAAM,IAAA;IAAA,EAAA,UAAQ;;;EAIhD,GAAA,GAAA,CAAA,aAAA,CAAA,KAAA,EAAA,IAAA,EAAA,GAAA,EAAA,cADR,EAAA,GAAA,EAUE,GAAA;;GARA,MAAK;GACL,WAAA;GACC,eAAa,EAAA;GACd,YAAW;GACX,mBAAgB;GACf,aAAa,EAAA;GACb,cAAc;GACd,uBAAoB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"admins-components102.js","names":[],"sources":["../src/components/data-table/DataSearch.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface DataSearchProps {\n showExactMatch?: boolean\n showSearch?: boolean\n placeholder?: string\n handleUrl?: boolean\n searchKey?: string\n exactMatchKey?: string\n}\n\nexport interface DefaultSearch {\n search?: string\n exactMatch?: boolean | undefined\n}\n\nexport function getDefaultSearch(\n searchKey = 'search',\n exactMatchKey = 'exactMatch',\n): DefaultSearch {\n const params = new URLSearchParams(
|
|
1
|
+
{"version":3,"file":"admins-components102.js","names":[],"sources":["../src/components/data-table/DataSearch.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface DataSearchProps {\n showExactMatch?: boolean\n showSearch?: boolean\n placeholder?: string\n handleUrl?: boolean\n searchKey?: string\n exactMatchKey?: string\n /** Font-size modifier driven by DataListSettings.fontSize. */\n fontSize?: FontSize\n}\n\nexport interface DefaultSearch {\n search?: string\n exactMatch?: boolean | undefined\n}\n\nexport function getDefaultSearch(\n searchKey = 'search',\n exactMatchKey = 'exactMatch',\n): DefaultSearch {\n const params = new URLSearchParams(typeof window === 'undefined' ? '' : window.location.search)\n const search = params.get(searchKey) ?? ''\n const exactRaw = params.get(exactMatchKey)\n const exactMatch =\n exactRaw === 'true' || exactRaw === '1'\n ? true\n : exactRaw === 'false' || exactRaw === '0'\n ? false\n : undefined\n return filterEmptyValues({ search, exactMatch })\n}\n</script>\n\n<script setup lang=\"ts\">\nimport type { FontSize } from '@/types/types'\nimport Checkbox from '@/components/Checkbox.vue'\nimport TextInput from '@/components/TextInput.vue'\nimport { writeUrlOrRemove } from '@/utils/url'\nimport { debounce } from '@/utils/debounce'\nimport { onMounted, ref } from 'vue'\nimport { filterEmptyValues } from '@/utils/dataFilters'\n\nconst props = withDefaults(defineProps<DataSearchProps>(), {\n showExactMatch: true,\n showSearch: true,\n placeholder: 'Keresés...',\n handleUrl: false,\n searchKey: 'search',\n exactMatchKey: 'exactMatch',\n fontSize: 'normal',\n})\n\ntype SearchFilterPayload = { [k: string]: string | boolean }\n\nconst initial = getDefaultSearch(props.searchKey, props.exactMatchKey)\nconst exactMatch = ref<boolean | undefined>(initial.exactMatch)\nconst search = ref<string>(initial.search ?? '')\n\nconst emit = defineEmits<{\n 'search-change': [filters: SearchFilterPayload]\n}>()\n\nfunction emitChange() {\n const filters: SearchFilterPayload = {}\n if (props.showSearch) filters[props.searchKey] = search.value\n if (props.showExactMatch) filters[props.exactMatchKey] = exactMatch.value ?? false\n emit('search-change', filters)\n}\n\nfunction syncToUrl() {\n writeUrlOrRemove(props.searchKey, search.value, { handleUrl: props.handleUrl })\n writeUrlOrRemove(props.exactMatchKey, exactMatch.value ?? false, {\n handleUrl: props.handleUrl,\n default: false,\n })\n}\n\nconst debouncedSyncToUrl = debounce(syncToUrl, 300)\n\nfunction onCheckboxChange(value: boolean | undefined) {\n exactMatch.value = value\n emitChange()\n debouncedSyncToUrl()\n}\n\nfunction onSearchChange(value: string | number | null) {\n search.value = value == null ? '' : String(value).trim()\n emitChange()\n debouncedSyncToUrl()\n}\n\nonMounted(() => {\n if (!props.handleUrl) return\n\n if (search.value || (exactMatch.value ?? false)) emitChange()\n})\n</script>\n<template>\n <div class=\"ac-component data-search-wrapper\" :class=\"[`is-font-${fontSize}`]\">\n <Checkbox\n v-if=\"showExactMatch\"\n :model-value=\"exactMatch\"\n class=\"gap-1\"\n @update:model-value=\"onCheckboxChange\"\n >\n <template #label>\n <span class=\"data-search-label\">Pontos<br />egyezés </span>\n </template>\n </Checkbox>\n <TextInput\n v-if=\"showSearch\"\n type=\"text\"\n clearable\n :model-value=\"search\"\n inputClass=\"data-search-input\"\n label-on-border=\"Keresés\"\n :placeholder=\"placeholder\"\n :autocomplete=\"false\"\n @update:model-value=\"onSearchChange\"\n />\n </div>\n</template>\n<style lang=\"scss\" src=\"@/styles/components/data-table/data-search.scss\"></style>\n"],"mappings":""}
|
|
@@ -52,7 +52,8 @@ var I = /*@__PURE__*/ b({
|
|
|
52
52
|
searchConfig: {},
|
|
53
53
|
filterConfig: {},
|
|
54
54
|
fillHeight: { type: Boolean },
|
|
55
|
-
defaultSort: {}
|
|
55
|
+
defaultSort: {},
|
|
56
|
+
defaultFilters: {}
|
|
56
57
|
}, {
|
|
57
58
|
...P,
|
|
58
59
|
searchConfig: void 0,
|
|
@@ -74,12 +75,17 @@ var I = /*@__PURE__*/ b({
|
|
|
74
75
|
}
|
|
75
76
|
let L = p(() => ({
|
|
76
77
|
...F.searchConfig,
|
|
77
|
-
handleUrl: I("searchConfig")
|
|
78
|
+
handleUrl: I("searchConfig"),
|
|
79
|
+
fontSize: H.value?.fontSize ?? F.searchConfig?.fontSize ?? "normal"
|
|
78
80
|
})), R = p(() => ({
|
|
79
81
|
...F.filterConfig,
|
|
80
82
|
handleUrl: I("filterConfig"),
|
|
81
|
-
lazy: H.value == null ? F.filterConfig?.lazy ?? !0 : !H.value.filtersEager
|
|
82
|
-
|
|
83
|
+
lazy: H.value == null ? F.filterConfig?.lazy ?? !0 : !H.value.filtersEager,
|
|
84
|
+
ignoreSavedDefault: !!F.config.selectableAttr
|
|
85
|
+
})), z = f, B = E(!1), V = E(!1), H = E(null), U = E(!1), W = E(null), G = E(!1), K = E({
|
|
86
|
+
...F.filterConfig?.items ? ee(F.filterConfig.items, F.id, !1, !!F.config.selectableAttr) : {},
|
|
87
|
+
...F.defaultFilters
|
|
88
|
+
}), q = null;
|
|
83
89
|
ie(() => {
|
|
84
90
|
q = new ResizeObserver((e) => {
|
|
85
91
|
U.value = (e[0]?.contentRect.width ?? 0) < F.layoutBreakpoint;
|
|
@@ -130,7 +136,7 @@ var I = /*@__PURE__*/ b({
|
|
|
130
136
|
return (o, c) => (T(), g("div", {
|
|
131
137
|
ref_key: "root",
|
|
132
138
|
ref: W,
|
|
133
|
-
class: ne(["ac-component c-data-list", { "c-data-list--fill-height": i.fillHeight }])
|
|
139
|
+
class: ne(["ac-component c-data-list", [{ "c-data-list--fill-height": i.fillHeight }, `is-font-${H.value?.fontSize ?? "normal"}`]])
|
|
134
140
|
}, [
|
|
135
141
|
_("div", j, [
|
|
136
142
|
i.useSearch ? (T(), m(te, C({ key: 0 }, L.value, { onSearchChange: ue }), null, 16)) : h("", !0),
|
|
@@ -140,6 +146,7 @@ var I = /*@__PURE__*/ b({
|
|
|
140
146
|
icon: "fa-solid fa-filter",
|
|
141
147
|
onClick: c[0] ||= (e) => G.value = !0,
|
|
142
148
|
style: { "flex-shrink": "0" },
|
|
149
|
+
class: "filter-btn",
|
|
143
150
|
type: Y.value > 0 ? "primary" : "normal",
|
|
144
151
|
indicator: Y.value > 0 ? Y.value : void 0
|
|
145
152
|
}, null, 8, ["type", "indicator"])) : h("", !0),
|
|
@@ -157,11 +164,13 @@ var I = /*@__PURE__*/ b({
|
|
|
157
164
|
"onUpdate:modelValue": c[2] ||= (e) => Q.value = e,
|
|
158
165
|
options: X.value,
|
|
159
166
|
"handle-url": i.handleUrl,
|
|
167
|
+
"font-size": H.value?.fontSize ?? "normal",
|
|
160
168
|
onSortChange: $
|
|
161
169
|
}, null, 8, [
|
|
162
170
|
"modelValue",
|
|
163
171
|
"options",
|
|
164
|
-
"handle-url"
|
|
172
|
+
"handle-url",
|
|
173
|
+
"font-size"
|
|
165
174
|
])) : h("", !0),
|
|
166
175
|
Z.value ? h("", !0) : (T(), m(e, {
|
|
167
176
|
key: 1,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"admins-components103.js","names":[],"sources":["../src/components/data-table/DataList.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type { PaginatorSettings } from '@/types/data-list'\nexport type { DataSearchProps } from './DataSearch.vue'\nexport type { DataFiltersProps } from './DataFilters.vue'\n\nexport interface DataListProps {\n config: DataListConfig\n items: Record<string, unknown>[]\n settings?: Partial<DataListSettings>\n id: string\n layoutBreakpoint?: number\n orderable?: boolean\n pagination?: PaginatorSettings\n loading?: boolean\n handleUrl?: boolean\n useSearch?: boolean\n useFilters?: boolean\n searchConfig?: DataSearchProps\n filterConfig?: DataFiltersProps\n fillHeight?: boolean\n defaultSort?: { key: string; direction: 'asc' | 'desc' } | null\n}\n\nexport const dataListDefaults = {\n layoutBreakpoint: 768,\n orderable: true,\n loading: false,\n useSearch: true,\n useFilters: true,\n handleUrl: false,\n fillHeight: false,\n}\n\nexport function getDefaultFetchData(filters: FilterItem[], storageKey: string) {\n const defaultPaginator = getDefaultPaginator(storageKey)\n const defaultSort = getDefaultSort()\n const defaultSearch = getDefaultSearch()\n const defaultFilters = getDefaultFilterValues(filters, storageKey, true)\n\n return {\n ...defaultPaginator,\n ...defaultSort,\n ...defaultSearch,\n ...defaultFilters,\n }\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { ref, computed, onMounted, onBeforeUnmount, useSlots } from 'vue'\nimport DataTable from '@/components/data-table/DataTable.vue'\nimport DataCards from '@/components/data-table/DataCards.vue'\nimport DataListOptions from '@/components/data-table/DataListOptions.vue'\nimport DataPaginator, { getDefaultPaginator } from '@/components/data-table/DataPaginator.vue'\nimport Button from '@/components/Button.vue'\nimport DataSort, { getDefaultSort, type DataSortOption } from '@/components/data-table/DataSort.vue'\nimport type {\n DataListConfig,\n DataListSettings,\n PageSettings,\n PaginatorSettings,\n} from '@/types/data-list'\nimport type { FilterValue } from '@/types/data-list'\nimport DataFilters, {\n type FilterResponse,\n type DataFiltersProps,\n type FilterItem,\n} from '@/components/data-table/DataFilters.vue'\nimport FilterTags from '@/components/data-table/FilterTags.vue'\nimport DataListGuide from '@/components/data-table/DataListGuide.vue'\nimport DataSearch, { getDefaultSearch, type DataSearchProps } from './DataSearch.vue'\nimport { getDefaultFilters, getDefaultFilterValues } from '@/utils/dataFilters.ts'\n\nconst dataFiltersRef = ref<InstanceType<typeof DataFilters> | null>(null)\nconst slots = useSlots()\nconst hasActionsSlot = computed(() => !!slots.actions)\n\nconst props = withDefaults(defineProps<DataListProps>(), {\n ...dataListDefaults,\n searchConfig: undefined,\n filterConfig: undefined,\n})\n\nfunction resolvedHandleUrl(side: 'searchConfig' | 'filterConfig'): boolean | undefined {\n const sideConfig = props[side]\n if (sideConfig && Object.hasOwn(sideConfig as object, 'handleUrl')) {\n return (sideConfig as { handleUrl?: boolean }).handleUrl\n }\n return props.handleUrl\n}\n\nconst mergedSearchConfig = computed<DataSearchProps>(() => ({\n ...props.searchConfig,\n handleUrl: resolvedHandleUrl('searchConfig'),\n}))\n\nconst mergedFilterConfig = computed<DataFiltersProps>(() => ({\n ...(props.filterConfig as DataFiltersProps),\n handleUrl: resolvedHandleUrl('filterConfig'),\n lazy:\n resolvedSettings.value != null\n ? !resolvedSettings.value.filtersEager\n : (props.filterConfig?.lazy ?? true),\n}))\n\nconst emit = defineEmits<{\n 'filter-change': [filters: Record<string, FilterValue>]\n 'selection-change': [selected: unknown[]]\n 'settings-change': [settings: DataListSettings]\n 'pagination-change': [pagination: PageSettings]\n 'sort-change': [sort: { key: string; direction: 'asc' | 'desc' } | null]\n 'search-change': [filters: Record<string, string | boolean>]\n}>()\n\nconst showOptions = ref(false)\nconst showGuide = ref(false)\nconst resolvedSettings = ref<DataListSettings | null>(null)\nconst isMobile = ref(false)\nconst root = ref<HTMLElement | null>(null)\nconst showFilters = ref(false)\n\nconst activeFilters = ref<Record<string, unknown>>(\n props.filterConfig?.items ? getDefaultFilters(props.filterConfig.items, props.id, false) : {},\n)\nlet resizeObserver: ResizeObserver | null = null\n\nonMounted(() => {\n resizeObserver = new ResizeObserver((entries) => {\n isMobile.value = (entries[0]?.contentRect.width ?? 0) < props.layoutBreakpoint\n })\n if (root.value) resizeObserver.observe(root.value)\n})\n\nonBeforeUnmount(() => resizeObserver?.disconnect())\n\nconst effectiveLayout = computed<'table' | 'cards'>(() => {\n const layout = resolvedSettings.value?.layout\n if (layout === 'table' || layout === 'cards') return layout\n return isMobile.value ? 'cards' : 'table'\n})\n\nconst internalConfig = computed<DataListConfig>(() => {\n if (!resolvedSettings.value) return props.config\n const order = resolvedSettings.value.columnOrder\n const mapped = props.config.columns.map((c) => ({\n ...c,\n visible: resolvedSettings.value!.columns[c.property] ?? c.visible !== false,\n }))\n if (order?.length) {\n mapped.sort((a, b) => {\n const ai = order.indexOf(a.property)\n const bi = order.indexOf(b.property)\n return (ai === -1 ? 999 : ai) - (bi === -1 ? 999 : bi)\n })\n }\n return { ...props.config, columns: mapped }\n})\n\nfunction onSettingsChange(s: DataListSettings) {\n resolvedSettings.value = s\n emit('settings-change', s)\n}\n\ndefineExpose({\n openOptions: () => (showOptions.value = true),\n closeOptions: () => (showOptions.value = false),\n openFilters: () => (showFilters.value = true),\n closeFilters: () => (showFilters.value = false),\n})\n\nasync function openFilter(key: string) {\n showFilters.value = true\n setTimeout(() => {\n dataFiltersRef.value?.focusFilter(key)\n }, 300)\n}\n\nfunction onFilterChange(response: FilterResponse) {\n activeFilters.value = response.values\n emit('filter-change', response.transformed)\n}\n\nconst activeFiltersCount = computed(\n () => Object.values(activeFilters.value).filter((v) => v != null && v !== '').length,\n)\n\nconst showPaginator = computed(\n () => !!props.pagination && (props.items.length > 0 || !props.loading),\n)\n\nconst searchChange = (value: Record<string, string | boolean>) => {\n emit('search-change', value)\n}\n\nconst sortableColumns = computed<DataSortOption[]>(() =>\n props.config.columns.filter((c) => c.sort).map((c) => ({ value: c.property, label: c.label })),\n)\n\nconst isSelectable = computed<boolean>(() => !!props.config.selectableAttr)\n\nconst currentSort = ref<{ key: string; direction: 'asc' | 'desc' } | null>(\n (props.handleUrl ? getDefaultSort() : null) ?? props.defaultSort ?? null,\n)\n\nconst onSortChange = (sort: { key: string; direction: 'asc' | 'desc' } | null) => {\n currentSort.value = sort\n emit('sort-change', sort)\n}\n</script>\n\n<template>\n <div\n ref=\"root\"\n class=\"ac-component c-data-list\"\n :class=\"{ 'c-data-list--fill-height': fillHeight }\"\n >\n <div class=\"c-data-list__toolbar\">\n <DataSearch v-if=\"useSearch\" v-bind=\"mergedSearchConfig\" @search-change=\"searchChange\" />\n <Button\n v-if=\"useFilters && filterConfig?.items && filterConfig.items.length > 0\"\n label=\"Szűrők\"\n icon=\"fa-solid fa-filter\"\n @click=\"showFilters = true\"\n style=\"flex-shrink: 0\"\n :type=\"activeFiltersCount > 0 ? 'primary' : 'normal'\"\n :indicator=\"activeFiltersCount > 0 ? activeFiltersCount : undefined\"\n />\n <div\n class=\"flex-center gap-1 flex-center-wrap-on-mobile\"\n v-if=\"useFilters && filterConfig?.items && filterConfig.items.length > 0\"\n >\n <FilterTags\n :filters=\"activeFilters\"\n :items=\"filterConfig.items\"\n compact\n @remove=\"(key: string) => dataFiltersRef?.clearFilter(key)\"\n @openFilter=\"openFilter\"\n />\n </div>\n <div class=\"c-data-list__toolbar__right\">\n <DataSort\n v-if=\"sortableColumns.length > 0\"\n v-model=\"currentSort\"\n :options=\"sortableColumns\"\n :handle-url=\"handleUrl\"\n @sort-change=\"onSortChange\"\n />\n\n <Button\n v-if=\"!isSelectable\"\n icon=\"fa-solid fa-gear\"\n class=\"lh-normal settings-btn\"\n ariaLabel=\"Beállítások\"\n @click=\"showOptions = true\"\n />\n <Button\n v-if=\"!isSelectable\"\n icon=\"fa-solid fa-question\"\n class=\"lh-normal\"\n @click=\"showGuide = true\"\n ariaLabel=\"Súgó\"\n />\n </div>\n </div>\n <DataFilters\n ref=\"dataFiltersRef\"\n v-if=\"useFilters && filterConfig?.items && filterConfig.items.length > 0\"\n v-bind=\"mergedFilterConfig\"\n :storage-key=\"id\"\n :open=\"showFilters\"\n @close=\"showFilters = false\"\n @change=\"onFilterChange\"\n />\n <DataListGuide :open=\"showGuide\" @close=\"showGuide = false\" />\n <DataTable\n v-if=\"effectiveLayout === 'table'\"\n :config=\"internalConfig\"\n :loading=\"loading\"\n :items=\"items\"\n :settings=\"resolvedSettings ?? undefined\"\n :initial-sort=\"currentSort\"\n @filter-change=\"emit('filter-change', $event)\"\n @selection-change=\"emit('selection-change', $event)\"\n @sort-change=\"onSortChange\"\n >\n <template\n v-for=\"col in internalConfig.columns\"\n :key=\"col.property\"\n #[`cell:${col.property}`]=\"slotProps\"\n >\n <slot :name=\"`cell:${col.property}`\" v-bind=\"slotProps\" />\n </template>\n <template v-if=\"hasActionsSlot && !isSelectable\" #actions=\"slotProps\">\n <slot name=\"actions\" v-bind=\"slotProps\" />\n </template>\n </DataTable>\n\n <DataCards\n v-else\n :config=\"internalConfig\"\n :loading=\"loading\"\n :items=\"items\"\n :settings=\"resolvedSettings ?? undefined\"\n @selection-change=\"emit('selection-change', $event)\"\n >\n <template\n v-for=\"col in internalConfig.columns\"\n :key=\"col.property\"\n #[`cell:${col.property}`]=\"slotProps\"\n >\n <slot :name=\"`cell:${col.property}`\" v-bind=\"slotProps\" />\n </template>\n <template v-if=\"hasActionsSlot && !isSelectable\" #actions=\"slotProps\">\n <slot name=\"actions\" v-bind=\"slotProps\" />\n </template>\n </DataCards>\n\n <DataPaginator\n v-if=\"pagination && showPaginator\"\n :settings=\"pagination\"\n :storage-key=\"id\"\n :handle-url=\"handleUrl\"\n :font-size=\"resolvedSettings?.fontSize ?? 'normal'\"\n @update:pagination=\"emit('pagination-change', $event)\"\n />\n\n <DataListOptions\n :open=\"showOptions\"\n :columns=\"config.columns\"\n :settings=\"settings ?? {}\"\n :storage-key=\"id\"\n :orderable=\"orderable\"\n @close=\"showOptions = false\"\n @change=\"onSettingsChange\"\n />\n </div>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/data-table/data-list.scss\"></style>\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"admins-components103.js","names":[],"sources":["../src/components/data-table/DataList.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type { PaginatorSettings } from '@/types/data-list'\nexport type { DataSearchProps } from './DataSearch.vue'\nexport type { DataFiltersProps } from './DataFilters.vue'\n\nexport interface DataListProps {\n config: DataListConfig\n items: Record<string, unknown>[]\n settings?: Partial<DataListSettings>\n id: string\n layoutBreakpoint?: number\n orderable?: boolean\n pagination?: PaginatorSettings\n loading?: boolean\n handleUrl?: boolean\n useSearch?: boolean\n useFilters?: boolean\n searchConfig?: DataSearchProps\n filterConfig?: DataFiltersProps\n fillHeight?: boolean\n defaultSort?: { key: string; direction: 'asc' | 'desc' } | null\n /** Initial filter values applied on mount, merged over the auto-detected defaults */\n defaultFilters?: Record<string, unknown>\n}\n\nexport const dataListDefaults = {\n layoutBreakpoint: 768,\n orderable: true,\n loading: false,\n useSearch: true,\n useFilters: true,\n handleUrl: false,\n fillHeight: false,\n}\n\nexport function getDefaultFetchData(filters: FilterItem[], storageKey: string) {\n const defaultPaginator = getDefaultPaginator(storageKey)\n const defaultSort = getDefaultSort()\n const defaultSearch = getDefaultSearch()\n const defaultFilters = getDefaultFilterValues(filters, storageKey, true)\n\n return {\n ...defaultPaginator,\n ...defaultSort,\n ...defaultSearch,\n ...defaultFilters,\n }\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { ref, computed, onMounted, onBeforeUnmount, useSlots } from 'vue'\nimport DataTable from '@/components/data-table/DataTable.vue'\nimport DataCards from '@/components/data-table/DataCards.vue'\nimport DataListOptions from '@/components/data-table/DataListOptions.vue'\nimport DataPaginator, { getDefaultPaginator } from '@/components/data-table/DataPaginator.vue'\nimport Button from '@/components/Button.vue'\nimport DataSort, { getDefaultSort, type DataSortOption } from '@/components/data-table/DataSort.vue'\nimport type {\n DataListConfig,\n DataListSettings,\n PageSettings,\n PaginatorSettings,\n} from '@/types/data-list'\nimport type { FilterValue } from '@/types/data-list'\nimport DataFilters, {\n type FilterResponse,\n type DataFiltersProps,\n type FilterItem,\n} from '@/components/data-table/DataFilters.vue'\nimport FilterTags from '@/components/data-table/FilterTags.vue'\nimport DataListGuide from '@/components/data-table/DataListGuide.vue'\nimport DataSearch, { getDefaultSearch, type DataSearchProps } from './DataSearch.vue'\nimport { getDefaultFilters, getDefaultFilterValues } from '@/utils/dataFilters.ts'\n\nconst dataFiltersRef = ref<InstanceType<typeof DataFilters> | null>(null)\nconst slots = useSlots()\nconst hasActionsSlot = computed(() => !!slots.actions)\n\nconst props = withDefaults(defineProps<DataListProps>(), {\n ...dataListDefaults,\n searchConfig: undefined,\n filterConfig: undefined,\n})\n\nfunction resolvedHandleUrl(side: 'searchConfig' | 'filterConfig'): boolean | undefined {\n const sideConfig = props[side]\n if (sideConfig && Object.hasOwn(sideConfig as object, 'handleUrl')) {\n return (sideConfig as { handleUrl?: boolean }).handleUrl\n }\n return props.handleUrl\n}\n\nconst mergedSearchConfig = computed<DataSearchProps>(() => ({\n ...props.searchConfig,\n handleUrl: resolvedHandleUrl('searchConfig'),\n fontSize: resolvedSettings.value?.fontSize ?? props.searchConfig?.fontSize ?? 'normal',\n}))\n\nconst mergedFilterConfig = computed<DataFiltersProps>(() => ({\n ...(props.filterConfig as DataFiltersProps),\n handleUrl: resolvedHandleUrl('filterConfig'),\n lazy:\n resolvedSettings.value != null\n ? !resolvedSettings.value.filtersEager\n : (props.filterConfig?.lazy ?? true),\n ignoreSavedDefault: !!props.config.selectableAttr,\n}))\n\nconst emit = defineEmits<{\n 'filter-change': [filters: Record<string, FilterValue>]\n 'selection-change': [selected: unknown[]]\n 'settings-change': [settings: DataListSettings]\n 'pagination-change': [pagination: PageSettings]\n 'sort-change': [sort: { key: string; direction: 'asc' | 'desc' } | null]\n 'search-change': [filters: Record<string, string | boolean>]\n}>()\n\nconst showOptions = ref(false)\nconst showGuide = ref(false)\nconst resolvedSettings = ref<DataListSettings | null>(null)\nconst isMobile = ref(false)\nconst root = ref<HTMLElement | null>(null)\nconst showFilters = ref(false)\n\nconst activeFilters = ref<Record<string, unknown>>({\n ...(props.filterConfig?.items\n ? getDefaultFilters(props.filterConfig.items, props.id, false, !!props.config.selectableAttr)\n : {}),\n ...props.defaultFilters,\n})\nlet resizeObserver: ResizeObserver | null = null\n\nonMounted(() => {\n resizeObserver = new ResizeObserver((entries) => {\n isMobile.value = (entries[0]?.contentRect.width ?? 0) < props.layoutBreakpoint\n })\n if (root.value) resizeObserver.observe(root.value)\n})\n\nonBeforeUnmount(() => resizeObserver?.disconnect())\n\nconst effectiveLayout = computed<'table' | 'cards'>(() => {\n const layout = resolvedSettings.value?.layout\n if (layout === 'table' || layout === 'cards') return layout\n return isMobile.value ? 'cards' : 'table'\n})\n\nconst internalConfig = computed<DataListConfig>(() => {\n if (!resolvedSettings.value) return props.config\n const order = resolvedSettings.value.columnOrder\n const mapped = props.config.columns.map((c) => ({\n ...c,\n visible: resolvedSettings.value!.columns[c.property] ?? c.visible !== false,\n }))\n if (order?.length) {\n mapped.sort((a, b) => {\n const ai = order.indexOf(a.property)\n const bi = order.indexOf(b.property)\n return (ai === -1 ? 999 : ai) - (bi === -1 ? 999 : bi)\n })\n }\n return { ...props.config, columns: mapped }\n})\n\nfunction onSettingsChange(s: DataListSettings) {\n resolvedSettings.value = s\n emit('settings-change', s)\n}\n\ndefineExpose({\n openOptions: () => (showOptions.value = true),\n closeOptions: () => (showOptions.value = false),\n openFilters: () => (showFilters.value = true),\n closeFilters: () => (showFilters.value = false),\n})\n\nasync function openFilter(key: string) {\n showFilters.value = true\n setTimeout(() => {\n dataFiltersRef.value?.focusFilter(key)\n }, 300)\n}\n\nfunction onFilterChange(response: FilterResponse) {\n activeFilters.value = response.values\n emit('filter-change', response.transformed)\n}\n\nconst activeFiltersCount = computed(\n () => Object.values(activeFilters.value).filter((v) => v != null && v !== '').length,\n)\n\nconst showPaginator = computed(\n () => !!props.pagination && (props.items.length > 0 || !props.loading),\n)\n\nconst searchChange = (value: Record<string, string | boolean>) => {\n emit('search-change', value)\n}\n\nconst sortableColumns = computed<DataSortOption[]>(() =>\n props.config.columns.filter((c) => c.sort).map((c) => ({ value: c.property, label: c.label })),\n)\n\nconst isSelectable = computed<boolean>(() => !!props.config.selectableAttr)\n\nconst currentSort = ref<{ key: string; direction: 'asc' | 'desc' } | null>(\n (props.handleUrl ? getDefaultSort() : null) ?? props.defaultSort ?? null,\n)\n\nconst onSortChange = (sort: { key: string; direction: 'asc' | 'desc' } | null) => {\n currentSort.value = sort\n emit('sort-change', sort)\n}\n</script>\n\n<template>\n <div\n ref=\"root\"\n class=\"ac-component c-data-list\"\n :class=\"[\n { 'c-data-list--fill-height': fillHeight },\n `is-font-${resolvedSettings?.fontSize ?? 'normal'}`,\n ]\"\n >\n <div class=\"c-data-list__toolbar\">\n <DataSearch v-if=\"useSearch\" v-bind=\"mergedSearchConfig\" @search-change=\"searchChange\" />\n <Button\n v-if=\"useFilters && filterConfig?.items && filterConfig.items.length > 0\"\n label=\"Szűrők\"\n icon=\"fa-solid fa-filter\"\n @click=\"showFilters = true\"\n style=\"flex-shrink: 0\"\n class=\"filter-btn\"\n :type=\"activeFiltersCount > 0 ? 'primary' : 'normal'\"\n :indicator=\"activeFiltersCount > 0 ? activeFiltersCount : undefined\"\n />\n <div\n class=\"flex-center gap-1 flex-center-wrap-on-mobile\"\n v-if=\"useFilters && filterConfig?.items && filterConfig.items.length > 0\"\n >\n <FilterTags\n :filters=\"activeFilters\"\n :items=\"filterConfig.items\"\n compact\n @remove=\"(key: string) => dataFiltersRef?.clearFilter(key)\"\n @openFilter=\"openFilter\"\n />\n </div>\n <div class=\"c-data-list__toolbar__right\">\n <DataSort\n v-if=\"sortableColumns.length > 0\"\n v-model=\"currentSort\"\n :options=\"sortableColumns\"\n :handle-url=\"handleUrl\"\n :font-size=\"resolvedSettings?.fontSize ?? 'normal'\"\n @sort-change=\"onSortChange\"\n />\n\n <Button\n v-if=\"!isSelectable\"\n icon=\"fa-solid fa-gear\"\n class=\"lh-normal settings-btn\"\n ariaLabel=\"Beállítások\"\n @click=\"showOptions = true\"\n />\n <Button\n v-if=\"!isSelectable\"\n icon=\"fa-solid fa-question\"\n class=\"lh-normal\"\n @click=\"showGuide = true\"\n ariaLabel=\"Súgó\"\n />\n </div>\n </div>\n <DataFilters\n ref=\"dataFiltersRef\"\n v-if=\"useFilters && filterConfig?.items && filterConfig.items.length > 0\"\n v-bind=\"mergedFilterConfig\"\n :storage-key=\"id\"\n :open=\"showFilters\"\n @close=\"showFilters = false\"\n @change=\"onFilterChange\"\n />\n <DataListGuide :open=\"showGuide\" @close=\"showGuide = false\" />\n <DataTable\n v-if=\"effectiveLayout === 'table'\"\n :config=\"internalConfig\"\n :loading=\"loading\"\n :items=\"items\"\n :settings=\"resolvedSettings ?? undefined\"\n :initial-sort=\"currentSort\"\n @filter-change=\"emit('filter-change', $event)\"\n @selection-change=\"emit('selection-change', $event)\"\n @sort-change=\"onSortChange\"\n >\n <template\n v-for=\"col in internalConfig.columns\"\n :key=\"col.property\"\n #[`cell:${col.property}`]=\"slotProps\"\n >\n <slot :name=\"`cell:${col.property}`\" v-bind=\"slotProps\" />\n </template>\n <template v-if=\"hasActionsSlot && !isSelectable\" #actions=\"slotProps\">\n <slot name=\"actions\" v-bind=\"slotProps\" />\n </template>\n </DataTable>\n\n <DataCards\n v-else\n :config=\"internalConfig\"\n :loading=\"loading\"\n :items=\"items\"\n :settings=\"resolvedSettings ?? undefined\"\n @selection-change=\"emit('selection-change', $event)\"\n >\n <template\n v-for=\"col in internalConfig.columns\"\n :key=\"col.property\"\n #[`cell:${col.property}`]=\"slotProps\"\n >\n <slot :name=\"`cell:${col.property}`\" v-bind=\"slotProps\" />\n </template>\n <template v-if=\"hasActionsSlot && !isSelectable\" #actions=\"slotProps\">\n <slot name=\"actions\" v-bind=\"slotProps\" />\n </template>\n </DataCards>\n\n <DataPaginator\n v-if=\"pagination && showPaginator\"\n :settings=\"pagination\"\n :storage-key=\"id\"\n :handle-url=\"handleUrl\"\n :font-size=\"resolvedSettings?.fontSize ?? 'normal'\"\n @update:pagination=\"emit('pagination-change', $event)\"\n />\n\n <DataListOptions\n :open=\"showOptions\"\n :columns=\"config.columns\"\n :settings=\"settings ?? {}\"\n :storage-key=\"id\"\n :orderable=\"orderable\"\n @close=\"showOptions = false\"\n @change=\"onSettingsChange\"\n />\n </div>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/data-table/data-list.scss\"></style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;iDAyBa,IAAmB;CAC9B,kBAAkB;CAClB,WAAW;CACX,SAAS;CACT,WAAW;CACX,YAAY;CACZ,WAAW;CACX,YAAY;AACd;AAEA,SAAgB,EAAoB,GAAuB,GAAoB;CAC7E,IAAM,IAAmB,EAAoB,CAAU,GACjD,IAAc,EAAe,GAC7B,IAAgB,EAAiB,GACjC,IAAiB,EAAuB,GAAS,GAAY,EAAI;CAEvE,OAAO;EACL,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;CACL;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4BA,IAAM,IAAiB,EAA6C,IAAI,GAClE,IAAQ,EAAS,GACjB,IAAiB,QAAe,CAAC,CAAC,EAAM,OAAO,GAE/C,IAAQ;EAMd,SAAS,EAAkB,GAA4D;GACrF,IAAM,IAAa,EAAM;GAIzB,OAHI,KAAc,OAAO,OAAO,GAAsB,WAAW,IACvD,EAAuC,YAE1C,EAAM;EACf;EAEA,IAAM,IAAqB,SAAiC;GAC1D,GAAG,EAAM;GACT,WAAW,EAAkB,cAAc;GAC3C,UAAU,EAAiB,OAAO,YAAY,EAAM,cAAc,YAAY;EAChF,EAAE,GAEI,IAAqB,SAAkC;GAC3D,GAAI,EAAM;GACV,WAAW,EAAkB,cAAc;GAC3C,MACE,EAAiB,SAAS,OAErB,EAAM,cAAc,QAAQ,KAD7B,CAAC,EAAiB,MAAM;GAE9B,oBAAoB,CAAC,CAAC,EAAM,OAAO;EACrC,EAAE,GAEI,IAAO,GASP,IAAc,EAAI,EAAK,GACvB,IAAY,EAAI,EAAK,GACrB,IAAmB,EAA6B,IAAI,GACpD,IAAW,EAAI,EAAK,GACpB,IAAO,EAAwB,IAAI,GACnC,IAAc,EAAI,EAAK,GAEvB,IAAgB,EAA6B;GACjD,GAAI,EAAM,cAAc,QACpB,GAAkB,EAAM,aAAa,OAAO,EAAM,IAAI,IAAO,CAAC,CAAC,EAAM,OAAO,cAAc,IAC1F,CAAC;GACL,GAAG,EAAM;EACX,CAAC,GACG,IAAwC;EAS5C,AAPA,SAAgB;GAId,AAHA,IAAiB,IAAI,gBAAgB,MAAY;IAC/C,EAAS,SAAS,EAAQ,EAAE,EAAE,YAAY,SAAS,KAAK,EAAM;GAChE,CAAC,GACG,EAAK,SAAO,EAAe,QAAQ,EAAK,KAAK;EACnD,CAAC,GAED,SAAsB,GAAgB,WAAW,CAAC;EAElD,IAAM,KAAkB,QAAkC;GACxD,IAAM,IAAS,EAAiB,OAAO;GAEvC,OADI,MAAW,WAAW,MAAW,UAAgB,IAC9C,EAAS,QAAQ,UAAU;EACpC,CAAC,GAEK,IAAiB,QAA+B;GACpD,IAAI,CAAC,EAAiB,OAAO,OAAO,EAAM;GAC1C,IAAM,IAAQ,EAAiB,MAAM,aAC/B,IAAS,EAAM,OAAO,QAAQ,KAAK,OAAO;IAC9C,GAAG;IACH,SAAS,EAAiB,MAAO,QAAQ,EAAE,aAAa,EAAE,YAAY;GACxE,EAAE;GAQF,OAPI,GAAO,UACT,EAAO,MAAM,GAAG,MAAM;IACpB,IAAM,IAAK,EAAM,QAAQ,EAAE,QAAQ,GAC7B,IAAK,EAAM,QAAQ,EAAE,QAAQ;IACnC,QAAQ,MAAO,KAAK,MAAM,MAAO,MAAO,KAAK,MAAM;GACrD,CAAC,GAEI;IAAE,GAAG,EAAM;IAAQ,SAAS;GAAO;EAC5C,CAAC;EAED,SAAS,GAAiB,GAAqB;GAE7C,AADA,EAAiB,QAAQ,GACzB,EAAK,mBAAmB,CAAC;EAC3B;EAEA,EAAa;GACX,mBAAoB,EAAY,QAAQ;GACxC,oBAAqB,EAAY,QAAQ;GACzC,mBAAoB,EAAY,QAAQ;GACxC,oBAAqB,EAAY,QAAQ;EAC3C,CAAC;EAED,eAAe,GAAW,GAAa;GAErC,AADA,EAAY,QAAQ,IACpB,iBAAiB;IACf,EAAe,OAAO,YAAY,CAAG;GACvC,GAAG,GAAG;EACR;EAEA,SAAS,GAAe,GAA0B;GAEhD,AADA,EAAc,QAAQ,EAAS,QAC/B,EAAK,iBAAiB,EAAS,WAAW;EAC5C;EAEA,IAAM,IAAqB,QACnB,OAAO,OAAO,EAAc,KAAK,CAAC,CAAC,QAAQ,MAAM,KAAK,QAAQ,MAAM,EAAE,CAAC,CAAC,MAChF,GAEM,KAAgB,QACd,CAAC,CAAC,EAAM,eAAe,EAAM,MAAM,SAAS,KAAK,CAAC,EAAM,QAChE,GAEM,MAAgB,MAA4C;GAChE,EAAK,iBAAiB,CAAK;EAC7B,GAEM,IAAkB,QACtB,EAAM,OAAO,QAAQ,QAAQ,MAAM,EAAE,IAAI,CAAC,CAAC,KAAK,OAAO;GAAE,OAAO,EAAE;GAAU,OAAO,EAAE;EAAM,EAAE,CAC/F,GAEM,IAAe,QAAwB,CAAC,CAAC,EAAM,OAAO,cAAc,GAEpE,IAAc,GACjB,EAAM,YAAY,EAAe,IAAI,SAAS,EAAM,eAAe,IACtE,GAEM,KAAgB,MAA4D;GAEhF,AADA,EAAY,QAAQ,GACpB,EAAK,eAAe,CAAI;EAC1B;oBAIE,EAAA,GAAA,EAiIM,OAAA;GAhIA,SAAA;GAAJ,KAAI;GACJ,OAAK,GAAA,CAAC,4BAA0B,CACc,EAAA,4BAAA,EAAA,WAAU,GAAqB,WAAA,EAAA,OAAkB,YAAQ,UAAA,CAAA,CAAA;;GAKvG,EAiDM,OAjDN,GAiDM;IAhDc,EAAA,aAAlB,EAAA,GAAA,EAAyF,IAAzF,EAAyF,EAAA,KAAA,EAAA,GAApD,EAAA,OAAkB,EAAG,gBAAe,GAAY,CAAA,GAAA,MAAA,EAAA,KAAA,EAAA,IAAA,EAAA;IAE7E,EAAA,cAAc,EAAA,cAAc,SAAS,EAAA,aAAa,MAAM,SAAM,KADtE,EAAA,GAAA,EASE,GAAA;;KAPA,OAAM;KACN,MAAK;KACJ,SAAK,AAAA,EAAA,QAAA,MAAE,EAAA,QAAW;KACnB,OAAA,EAAA,eAAA,IAAA;KACA,OAAM;KACL,MAAM,EAAA,QAAkB,IAAA,YAAA;KACxB,WAAW,EAAA,QAAkB,IAAO,EAAA,QAAqB,KAAA;;IAIpD,EAAA,cAAc,EAAA,cAAc,SAAS,EAAA,aAAa,MAAM,SAAM,KAFtE,EAAA,GAAA,EAWM,OAXN,GAWM,CAPJ,EAME,GAAA;KALC,SAAS,EAAA;KACT,OAAO,EAAA,aAAa;KACrB,SAAA;KACC,UAAM,AAAA,EAAA,QAAG,MAAgB,EAAA,OAAgB,YAAY,CAAG;KACxD,cAAY;;IAGjB,EAwBM,OAxBN,GAwBM;KAtBI,EAAA,MAAgB,SAAM,KAD9B,EAAA,GAAA,EAOE,GAAA;;MALS,YAAA,EAAA;MAAA,uBAAA,AAAA,EAAA,QAAA,MAAA,EAAW,QAAA;MACnB,SAAS,EAAA;MACT,cAAY,EAAA;MACZ,aAAW,EAAA,OAAkB,YAAQ;MACxB;;;;;;;KAIP,EAAA,qBADT,EAAA,GAAA,EAME,GAAA;;MAJA,MAAK;MACL,OAAM;MACN,WAAU;MACT,SAAK,AAAA,EAAA,QAAA,MAAE,EAAA,QAAW;;KAGZ,EAAA,qBADT,EAAA,GAAA,EAME,GAAA;;MAJA,MAAK;MACL,OAAM;MACL,SAAK,AAAA,EAAA,QAAA,MAAE,EAAA,QAAS;MACjB,WAAU;;;;GAMR,EAAA,cAAc,EAAA,cAAc,SAAS,EAAA,aAAa,MAAM,SAAM,KAFtE,EAAA,GAAA,EAQE,GARF,EAQE;;IAPI,SAAA;IAAJ,KAAI;GAEI,GAAA,EAAA,OAAkB;IACzB,eAAa,EAAA;IACb,MAAM,EAAA;IACN,SAAK,AAAA,EAAA,QAAA,MAAE,EAAA,QAAW;IAClB,UAAQ;;GAEX,EAA8D,GAAA;IAA9C,MAAM,EAAA;IAAY,SAAK,AAAA,EAAA,QAAA,MAAE,EAAA,QAAS;;GAE1C,GAAA,UAAe,WADvB,EAAA,GAAA,EAqBY,GAAA;;IAnBT,QAAQ,EAAA;IACR,SAAS,EAAA;IACT,OAAO,EAAA;IACP,UAAU,EAAA,SAAoB,KAAA;IAC9B,gBAAc,EAAA;IACd,gBAAa,AAAA,EAAA,QAAA,MAAE,EAAI,iBAAkB,CAAM;IAC3C,mBAAgB,AAAA,EAAA,QAAA,MAAE,EAAI,oBAAqB,CAAM;IACpC;GAGE,GAAA,EAAA,EAAA,GAAA,EAAA,GAAA,CAAA,EAAA,EAAA,MAAe,UAAtB;IAEE,MAAA,QAAA,EAAI;IAEb,IAAA,GAF2B,MAAS,CAEpC,EAA0D,EAAA,QAAA,QAArC,EAAI,YAAQ,EAAA,EAAY,CAAS,CAAA,CAAA,CAAA,CAAA;KAExC,GAAA,EAAA,SAAc,CAAK,EAAA,QAAA;IAAe,MAAA;IAChD,IAAA,GADyD,MAAS,CAClE,EAA0C,EAAA,QAAA,WAAA,EAAA,EAAb,CAAS,CAAA,CAAA,CAAA,CAAA;;;;;;;;GAI1C,CAAA,MAAA,EAAA,GAAA,EAkBY,GAAA;;IAhBT,QAAQ,EAAA;IACR,SAAS,EAAA;IACT,OAAO,EAAA;IACP,UAAU,EAAA,SAAoB,KAAA;IAC9B,mBAAgB,AAAA,EAAA,QAAA,MAAE,EAAI,oBAAqB,CAAM;GAGlC,GAAA,EAAA,EAAA,GAAA,EAAA,GAAA,CAAA,EAAA,EAAA,MAAe,UAAtB;IAEE,MAAA,QAAA,EAAI;IAEb,IAAA,GAF2B,MAAS,CAEpC,EAA0D,EAAA,QAAA,QAArC,EAAI,YAAQ,EAAA,EAAY,CAAS,CAAA,CAAA,CAAA,CAAA;KAExC,GAAA,EAAA,SAAc,CAAK,EAAA,QAAA;IAAe,MAAA;IAChD,IAAA,GADyD,MAAS,CAClE,EAA0C,EAAA,QAAA,WAAA,EAAA,EAAb,CAAS,CAAA,CAAA,CAAA,CAAA;;;;;;;;GAKlC,EAAA,cAAc,GAAA,SADtB,EAAA,GAAA,EAOE,GAAA;;IALC,UAAU,EAAA;IACV,eAAa,EAAA;IACb,cAAY,EAAA;IACZ,aAAW,EAAA,OAAkB,YAAQ;IACrC,uBAAiB,AAAA,EAAA,SAAA,MAAE,EAAI,qBAAsB,CAAM;;;;;;;GAGtD,EAQE,GAAA;IAPC,MAAM,EAAA;IACN,SAAS,EAAA,OAAO;IAChB,UAAU,EAAA,YAAQ,CAAA;IAClB,eAAa,EAAA;IACb,WAAW,EAAA;IACX,SAAK,AAAA,EAAA,SAAA,MAAE,EAAA,QAAW;IAClB,UAAQ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"admins-components105.js","names":[],"sources":["../src/components/data-table/DataList.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type { PaginatorSettings } from '@/types/data-list'\nexport type { DataSearchProps } from './DataSearch.vue'\nexport type { DataFiltersProps } from './DataFilters.vue'\n\nexport interface DataListProps {\n config: DataListConfig\n items: Record<string, unknown>[]\n settings?: Partial<DataListSettings>\n id: string\n layoutBreakpoint?: number\n orderable?: boolean\n pagination?: PaginatorSettings\n loading?: boolean\n handleUrl?: boolean\n useSearch?: boolean\n useFilters?: boolean\n searchConfig?: DataSearchProps\n filterConfig?: DataFiltersProps\n fillHeight?: boolean\n defaultSort?: { key: string; direction: 'asc' | 'desc' } | null\n}\n\nexport const dataListDefaults = {\n layoutBreakpoint: 768,\n orderable: true,\n loading: false,\n useSearch: true,\n useFilters: true,\n handleUrl: false,\n fillHeight: false,\n}\n\nexport function getDefaultFetchData(filters: FilterItem[], storageKey: string) {\n const defaultPaginator = getDefaultPaginator(storageKey)\n const defaultSort = getDefaultSort()\n const defaultSearch = getDefaultSearch()\n const defaultFilters = getDefaultFilterValues(filters, storageKey, true)\n\n return {\n ...defaultPaginator,\n ...defaultSort,\n ...defaultSearch,\n ...defaultFilters,\n }\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { ref, computed, onMounted, onBeforeUnmount, useSlots } from 'vue'\nimport DataTable from '@/components/data-table/DataTable.vue'\nimport DataCards from '@/components/data-table/DataCards.vue'\nimport DataListOptions from '@/components/data-table/DataListOptions.vue'\nimport DataPaginator, { getDefaultPaginator } from '@/components/data-table/DataPaginator.vue'\nimport Button from '@/components/Button.vue'\nimport DataSort, { getDefaultSort, type DataSortOption } from '@/components/data-table/DataSort.vue'\nimport type {\n DataListConfig,\n DataListSettings,\n PageSettings,\n PaginatorSettings,\n} from '@/types/data-list'\nimport type { FilterValue } from '@/types/data-list'\nimport DataFilters, {\n type FilterResponse,\n type DataFiltersProps,\n type FilterItem,\n} from '@/components/data-table/DataFilters.vue'\nimport FilterTags from '@/components/data-table/FilterTags.vue'\nimport DataListGuide from '@/components/data-table/DataListGuide.vue'\nimport DataSearch, { getDefaultSearch, type DataSearchProps } from './DataSearch.vue'\nimport { getDefaultFilters, getDefaultFilterValues } from '@/utils/dataFilters.ts'\n\nconst dataFiltersRef = ref<InstanceType<typeof DataFilters> | null>(null)\nconst slots = useSlots()\nconst hasActionsSlot = computed(() => !!slots.actions)\n\nconst props = withDefaults(defineProps<DataListProps>(), {\n ...dataListDefaults,\n searchConfig: undefined,\n filterConfig: undefined,\n})\n\nfunction resolvedHandleUrl(side: 'searchConfig' | 'filterConfig'): boolean | undefined {\n const sideConfig = props[side]\n if (sideConfig && Object.hasOwn(sideConfig as object, 'handleUrl')) {\n return (sideConfig as { handleUrl?: boolean }).handleUrl\n }\n return props.handleUrl\n}\n\nconst mergedSearchConfig = computed<DataSearchProps>(() => ({\n ...props.searchConfig,\n handleUrl: resolvedHandleUrl('searchConfig'),\n}))\n\nconst mergedFilterConfig = computed<DataFiltersProps>(() => ({\n ...(props.filterConfig as DataFiltersProps),\n handleUrl: resolvedHandleUrl('filterConfig'),\n lazy:\n resolvedSettings.value != null\n ? !resolvedSettings.value.filtersEager\n : (props.filterConfig?.lazy ?? true),\n}))\n\nconst emit = defineEmits<{\n 'filter-change': [filters: Record<string, FilterValue>]\n 'selection-change': [selected: unknown[]]\n 'settings-change': [settings: DataListSettings]\n 'pagination-change': [pagination: PageSettings]\n 'sort-change': [sort: { key: string; direction: 'asc' | 'desc' } | null]\n 'search-change': [filters: Record<string, string | boolean>]\n}>()\n\nconst showOptions = ref(false)\nconst showGuide = ref(false)\nconst resolvedSettings = ref<DataListSettings | null>(null)\nconst isMobile = ref(false)\nconst root = ref<HTMLElement | null>(null)\nconst showFilters = ref(false)\n\nconst activeFilters = ref<Record<string, unknown>>(\n props.filterConfig?.items ? getDefaultFilters(props.filterConfig.items, props.id, false) : {},\n)\nlet resizeObserver: ResizeObserver | null = null\n\nonMounted(() => {\n resizeObserver = new ResizeObserver((entries) => {\n isMobile.value = (entries[0]?.contentRect.width ?? 0) < props.layoutBreakpoint\n })\n if (root.value) resizeObserver.observe(root.value)\n})\n\nonBeforeUnmount(() => resizeObserver?.disconnect())\n\nconst effectiveLayout = computed<'table' | 'cards'>(() => {\n const layout = resolvedSettings.value?.layout\n if (layout === 'table' || layout === 'cards') return layout\n return isMobile.value ? 'cards' : 'table'\n})\n\nconst internalConfig = computed<DataListConfig>(() => {\n if (!resolvedSettings.value) return props.config\n const order = resolvedSettings.value.columnOrder\n const mapped = props.config.columns.map((c) => ({\n ...c,\n visible: resolvedSettings.value!.columns[c.property] ?? c.visible !== false,\n }))\n if (order?.length) {\n mapped.sort((a, b) => {\n const ai = order.indexOf(a.property)\n const bi = order.indexOf(b.property)\n return (ai === -1 ? 999 : ai) - (bi === -1 ? 999 : bi)\n })\n }\n return { ...props.config, columns: mapped }\n})\n\nfunction onSettingsChange(s: DataListSettings) {\n resolvedSettings.value = s\n emit('settings-change', s)\n}\n\ndefineExpose({\n openOptions: () => (showOptions.value = true),\n closeOptions: () => (showOptions.value = false),\n openFilters: () => (showFilters.value = true),\n closeFilters: () => (showFilters.value = false),\n})\n\nasync function openFilter(key: string) {\n showFilters.value = true\n setTimeout(() => {\n dataFiltersRef.value?.focusFilter(key)\n }, 300)\n}\n\nfunction onFilterChange(response: FilterResponse) {\n activeFilters.value = response.values\n emit('filter-change', response.transformed)\n}\n\nconst activeFiltersCount = computed(\n () => Object.values(activeFilters.value).filter((v) => v != null && v !== '').length,\n)\n\nconst showPaginator = computed(\n () => !!props.pagination && (props.items.length > 0 || !props.loading),\n)\n\nconst searchChange = (value: Record<string, string | boolean>) => {\n emit('search-change', value)\n}\n\nconst sortableColumns = computed<DataSortOption[]>(() =>\n props.config.columns.filter((c) => c.sort).map((c) => ({ value: c.property, label: c.label })),\n)\n\nconst isSelectable = computed<boolean>(() => !!props.config.selectableAttr)\n\nconst currentSort = ref<{ key: string; direction: 'asc' | 'desc' } | null>(\n (props.handleUrl ? getDefaultSort() : null) ?? props.defaultSort ?? null,\n)\n\nconst onSortChange = (sort: { key: string; direction: 'asc' | 'desc' } | null) => {\n currentSort.value = sort\n emit('sort-change', sort)\n}\n</script>\n\n<template>\n <div\n ref=\"root\"\n class=\"ac-component c-data-list\"\n :class=\"{ 'c-data-list--fill-height': fillHeight }\"\n >\n <div class=\"c-data-list__toolbar\">\n <DataSearch v-if=\"useSearch\" v-bind=\"mergedSearchConfig\" @search-change=\"searchChange\" />\n <Button\n v-if=\"useFilters && filterConfig?.items && filterConfig.items.length > 0\"\n label=\"Szűrők\"\n icon=\"fa-solid fa-filter\"\n @click=\"showFilters = true\"\n style=\"flex-shrink: 0\"\n :type=\"activeFiltersCount > 0 ? 'primary' : 'normal'\"\n :indicator=\"activeFiltersCount > 0 ? activeFiltersCount : undefined\"\n />\n <div\n class=\"flex-center gap-1 flex-center-wrap-on-mobile\"\n v-if=\"useFilters && filterConfig?.items && filterConfig.items.length > 0\"\n >\n <FilterTags\n :filters=\"activeFilters\"\n :items=\"filterConfig.items\"\n compact\n @remove=\"(key: string) => dataFiltersRef?.clearFilter(key)\"\n @openFilter=\"openFilter\"\n />\n </div>\n <div class=\"c-data-list__toolbar__right\">\n <DataSort\n v-if=\"sortableColumns.length > 0\"\n v-model=\"currentSort\"\n :options=\"sortableColumns\"\n :handle-url=\"handleUrl\"\n @sort-change=\"onSortChange\"\n />\n\n <Button\n v-if=\"!isSelectable\"\n icon=\"fa-solid fa-gear\"\n class=\"lh-normal settings-btn\"\n ariaLabel=\"Beállítások\"\n @click=\"showOptions = true\"\n />\n <Button\n v-if=\"!isSelectable\"\n icon=\"fa-solid fa-question\"\n class=\"lh-normal\"\n @click=\"showGuide = true\"\n ariaLabel=\"Súgó\"\n />\n </div>\n </div>\n <DataFilters\n ref=\"dataFiltersRef\"\n v-if=\"useFilters && filterConfig?.items && filterConfig.items.length > 0\"\n v-bind=\"mergedFilterConfig\"\n :storage-key=\"id\"\n :open=\"showFilters\"\n @close=\"showFilters = false\"\n @change=\"onFilterChange\"\n />\n <DataListGuide :open=\"showGuide\" @close=\"showGuide = false\" />\n <DataTable\n v-if=\"effectiveLayout === 'table'\"\n :config=\"internalConfig\"\n :loading=\"loading\"\n :items=\"items\"\n :settings=\"resolvedSettings ?? undefined\"\n :initial-sort=\"currentSort\"\n @filter-change=\"emit('filter-change', $event)\"\n @selection-change=\"emit('selection-change', $event)\"\n @sort-change=\"onSortChange\"\n >\n <template\n v-for=\"col in internalConfig.columns\"\n :key=\"col.property\"\n #[`cell:${col.property}`]=\"slotProps\"\n >\n <slot :name=\"`cell:${col.property}`\" v-bind=\"slotProps\" />\n </template>\n <template v-if=\"hasActionsSlot && !isSelectable\" #actions=\"slotProps\">\n <slot name=\"actions\" v-bind=\"slotProps\" />\n </template>\n </DataTable>\n\n <DataCards\n v-else\n :config=\"internalConfig\"\n :loading=\"loading\"\n :items=\"items\"\n :settings=\"resolvedSettings ?? undefined\"\n @selection-change=\"emit('selection-change', $event)\"\n >\n <template\n v-for=\"col in internalConfig.columns\"\n :key=\"col.property\"\n #[`cell:${col.property}`]=\"slotProps\"\n >\n <slot :name=\"`cell:${col.property}`\" v-bind=\"slotProps\" />\n </template>\n <template v-if=\"hasActionsSlot && !isSelectable\" #actions=\"slotProps\">\n <slot name=\"actions\" v-bind=\"slotProps\" />\n </template>\n </DataCards>\n\n <DataPaginator\n v-if=\"pagination && showPaginator\"\n :settings=\"pagination\"\n :storage-key=\"id\"\n :handle-url=\"handleUrl\"\n :font-size=\"resolvedSettings?.fontSize ?? 'normal'\"\n @update:pagination=\"emit('pagination-change', $event)\"\n />\n\n <DataListOptions\n :open=\"showOptions\"\n :columns=\"config.columns\"\n :settings=\"settings ?? {}\"\n :storage-key=\"id\"\n :orderable=\"orderable\"\n @close=\"showOptions = false\"\n @change=\"onSettingsChange\"\n />\n </div>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/data-table/data-list.scss\"></style>\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"admins-components105.js","names":[],"sources":["../src/components/data-table/DataList.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type { PaginatorSettings } from '@/types/data-list'\nexport type { DataSearchProps } from './DataSearch.vue'\nexport type { DataFiltersProps } from './DataFilters.vue'\n\nexport interface DataListProps {\n config: DataListConfig\n items: Record<string, unknown>[]\n settings?: Partial<DataListSettings>\n id: string\n layoutBreakpoint?: number\n orderable?: boolean\n pagination?: PaginatorSettings\n loading?: boolean\n handleUrl?: boolean\n useSearch?: boolean\n useFilters?: boolean\n searchConfig?: DataSearchProps\n filterConfig?: DataFiltersProps\n fillHeight?: boolean\n defaultSort?: { key: string; direction: 'asc' | 'desc' } | null\n /** Initial filter values applied on mount, merged over the auto-detected defaults */\n defaultFilters?: Record<string, unknown>\n}\n\nexport const dataListDefaults = {\n layoutBreakpoint: 768,\n orderable: true,\n loading: false,\n useSearch: true,\n useFilters: true,\n handleUrl: false,\n fillHeight: false,\n}\n\nexport function getDefaultFetchData(filters: FilterItem[], storageKey: string) {\n const defaultPaginator = getDefaultPaginator(storageKey)\n const defaultSort = getDefaultSort()\n const defaultSearch = getDefaultSearch()\n const defaultFilters = getDefaultFilterValues(filters, storageKey, true)\n\n return {\n ...defaultPaginator,\n ...defaultSort,\n ...defaultSearch,\n ...defaultFilters,\n }\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { ref, computed, onMounted, onBeforeUnmount, useSlots } from 'vue'\nimport DataTable from '@/components/data-table/DataTable.vue'\nimport DataCards from '@/components/data-table/DataCards.vue'\nimport DataListOptions from '@/components/data-table/DataListOptions.vue'\nimport DataPaginator, { getDefaultPaginator } from '@/components/data-table/DataPaginator.vue'\nimport Button from '@/components/Button.vue'\nimport DataSort, { getDefaultSort, type DataSortOption } from '@/components/data-table/DataSort.vue'\nimport type {\n DataListConfig,\n DataListSettings,\n PageSettings,\n PaginatorSettings,\n} from '@/types/data-list'\nimport type { FilterValue } from '@/types/data-list'\nimport DataFilters, {\n type FilterResponse,\n type DataFiltersProps,\n type FilterItem,\n} from '@/components/data-table/DataFilters.vue'\nimport FilterTags from '@/components/data-table/FilterTags.vue'\nimport DataListGuide from '@/components/data-table/DataListGuide.vue'\nimport DataSearch, { getDefaultSearch, type DataSearchProps } from './DataSearch.vue'\nimport { getDefaultFilters, getDefaultFilterValues } from '@/utils/dataFilters.ts'\n\nconst dataFiltersRef = ref<InstanceType<typeof DataFilters> | null>(null)\nconst slots = useSlots()\nconst hasActionsSlot = computed(() => !!slots.actions)\n\nconst props = withDefaults(defineProps<DataListProps>(), {\n ...dataListDefaults,\n searchConfig: undefined,\n filterConfig: undefined,\n})\n\nfunction resolvedHandleUrl(side: 'searchConfig' | 'filterConfig'): boolean | undefined {\n const sideConfig = props[side]\n if (sideConfig && Object.hasOwn(sideConfig as object, 'handleUrl')) {\n return (sideConfig as { handleUrl?: boolean }).handleUrl\n }\n return props.handleUrl\n}\n\nconst mergedSearchConfig = computed<DataSearchProps>(() => ({\n ...props.searchConfig,\n handleUrl: resolvedHandleUrl('searchConfig'),\n fontSize: resolvedSettings.value?.fontSize ?? props.searchConfig?.fontSize ?? 'normal',\n}))\n\nconst mergedFilterConfig = computed<DataFiltersProps>(() => ({\n ...(props.filterConfig as DataFiltersProps),\n handleUrl: resolvedHandleUrl('filterConfig'),\n lazy:\n resolvedSettings.value != null\n ? !resolvedSettings.value.filtersEager\n : (props.filterConfig?.lazy ?? true),\n ignoreSavedDefault: !!props.config.selectableAttr,\n}))\n\nconst emit = defineEmits<{\n 'filter-change': [filters: Record<string, FilterValue>]\n 'selection-change': [selected: unknown[]]\n 'settings-change': [settings: DataListSettings]\n 'pagination-change': [pagination: PageSettings]\n 'sort-change': [sort: { key: string; direction: 'asc' | 'desc' } | null]\n 'search-change': [filters: Record<string, string | boolean>]\n}>()\n\nconst showOptions = ref(false)\nconst showGuide = ref(false)\nconst resolvedSettings = ref<DataListSettings | null>(null)\nconst isMobile = ref(false)\nconst root = ref<HTMLElement | null>(null)\nconst showFilters = ref(false)\n\nconst activeFilters = ref<Record<string, unknown>>({\n ...(props.filterConfig?.items\n ? getDefaultFilters(props.filterConfig.items, props.id, false, !!props.config.selectableAttr)\n : {}),\n ...props.defaultFilters,\n})\nlet resizeObserver: ResizeObserver | null = null\n\nonMounted(() => {\n resizeObserver = new ResizeObserver((entries) => {\n isMobile.value = (entries[0]?.contentRect.width ?? 0) < props.layoutBreakpoint\n })\n if (root.value) resizeObserver.observe(root.value)\n})\n\nonBeforeUnmount(() => resizeObserver?.disconnect())\n\nconst effectiveLayout = computed<'table' | 'cards'>(() => {\n const layout = resolvedSettings.value?.layout\n if (layout === 'table' || layout === 'cards') return layout\n return isMobile.value ? 'cards' : 'table'\n})\n\nconst internalConfig = computed<DataListConfig>(() => {\n if (!resolvedSettings.value) return props.config\n const order = resolvedSettings.value.columnOrder\n const mapped = props.config.columns.map((c) => ({\n ...c,\n visible: resolvedSettings.value!.columns[c.property] ?? c.visible !== false,\n }))\n if (order?.length) {\n mapped.sort((a, b) => {\n const ai = order.indexOf(a.property)\n const bi = order.indexOf(b.property)\n return (ai === -1 ? 999 : ai) - (bi === -1 ? 999 : bi)\n })\n }\n return { ...props.config, columns: mapped }\n})\n\nfunction onSettingsChange(s: DataListSettings) {\n resolvedSettings.value = s\n emit('settings-change', s)\n}\n\ndefineExpose({\n openOptions: () => (showOptions.value = true),\n closeOptions: () => (showOptions.value = false),\n openFilters: () => (showFilters.value = true),\n closeFilters: () => (showFilters.value = false),\n})\n\nasync function openFilter(key: string) {\n showFilters.value = true\n setTimeout(() => {\n dataFiltersRef.value?.focusFilter(key)\n }, 300)\n}\n\nfunction onFilterChange(response: FilterResponse) {\n activeFilters.value = response.values\n emit('filter-change', response.transformed)\n}\n\nconst activeFiltersCount = computed(\n () => Object.values(activeFilters.value).filter((v) => v != null && v !== '').length,\n)\n\nconst showPaginator = computed(\n () => !!props.pagination && (props.items.length > 0 || !props.loading),\n)\n\nconst searchChange = (value: Record<string, string | boolean>) => {\n emit('search-change', value)\n}\n\nconst sortableColumns = computed<DataSortOption[]>(() =>\n props.config.columns.filter((c) => c.sort).map((c) => ({ value: c.property, label: c.label })),\n)\n\nconst isSelectable = computed<boolean>(() => !!props.config.selectableAttr)\n\nconst currentSort = ref<{ key: string; direction: 'asc' | 'desc' } | null>(\n (props.handleUrl ? getDefaultSort() : null) ?? props.defaultSort ?? null,\n)\n\nconst onSortChange = (sort: { key: string; direction: 'asc' | 'desc' } | null) => {\n currentSort.value = sort\n emit('sort-change', sort)\n}\n</script>\n\n<template>\n <div\n ref=\"root\"\n class=\"ac-component c-data-list\"\n :class=\"[\n { 'c-data-list--fill-height': fillHeight },\n `is-font-${resolvedSettings?.fontSize ?? 'normal'}`,\n ]\"\n >\n <div class=\"c-data-list__toolbar\">\n <DataSearch v-if=\"useSearch\" v-bind=\"mergedSearchConfig\" @search-change=\"searchChange\" />\n <Button\n v-if=\"useFilters && filterConfig?.items && filterConfig.items.length > 0\"\n label=\"Szűrők\"\n icon=\"fa-solid fa-filter\"\n @click=\"showFilters = true\"\n style=\"flex-shrink: 0\"\n class=\"filter-btn\"\n :type=\"activeFiltersCount > 0 ? 'primary' : 'normal'\"\n :indicator=\"activeFiltersCount > 0 ? activeFiltersCount : undefined\"\n />\n <div\n class=\"flex-center gap-1 flex-center-wrap-on-mobile\"\n v-if=\"useFilters && filterConfig?.items && filterConfig.items.length > 0\"\n >\n <FilterTags\n :filters=\"activeFilters\"\n :items=\"filterConfig.items\"\n compact\n @remove=\"(key: string) => dataFiltersRef?.clearFilter(key)\"\n @openFilter=\"openFilter\"\n />\n </div>\n <div class=\"c-data-list__toolbar__right\">\n <DataSort\n v-if=\"sortableColumns.length > 0\"\n v-model=\"currentSort\"\n :options=\"sortableColumns\"\n :handle-url=\"handleUrl\"\n :font-size=\"resolvedSettings?.fontSize ?? 'normal'\"\n @sort-change=\"onSortChange\"\n />\n\n <Button\n v-if=\"!isSelectable\"\n icon=\"fa-solid fa-gear\"\n class=\"lh-normal settings-btn\"\n ariaLabel=\"Beállítások\"\n @click=\"showOptions = true\"\n />\n <Button\n v-if=\"!isSelectable\"\n icon=\"fa-solid fa-question\"\n class=\"lh-normal\"\n @click=\"showGuide = true\"\n ariaLabel=\"Súgó\"\n />\n </div>\n </div>\n <DataFilters\n ref=\"dataFiltersRef\"\n v-if=\"useFilters && filterConfig?.items && filterConfig.items.length > 0\"\n v-bind=\"mergedFilterConfig\"\n :storage-key=\"id\"\n :open=\"showFilters\"\n @close=\"showFilters = false\"\n @change=\"onFilterChange\"\n />\n <DataListGuide :open=\"showGuide\" @close=\"showGuide = false\" />\n <DataTable\n v-if=\"effectiveLayout === 'table'\"\n :config=\"internalConfig\"\n :loading=\"loading\"\n :items=\"items\"\n :settings=\"resolvedSettings ?? undefined\"\n :initial-sort=\"currentSort\"\n @filter-change=\"emit('filter-change', $event)\"\n @selection-change=\"emit('selection-change', $event)\"\n @sort-change=\"onSortChange\"\n >\n <template\n v-for=\"col in internalConfig.columns\"\n :key=\"col.property\"\n #[`cell:${col.property}`]=\"slotProps\"\n >\n <slot :name=\"`cell:${col.property}`\" v-bind=\"slotProps\" />\n </template>\n <template v-if=\"hasActionsSlot && !isSelectable\" #actions=\"slotProps\">\n <slot name=\"actions\" v-bind=\"slotProps\" />\n </template>\n </DataTable>\n\n <DataCards\n v-else\n :config=\"internalConfig\"\n :loading=\"loading\"\n :items=\"items\"\n :settings=\"resolvedSettings ?? undefined\"\n @selection-change=\"emit('selection-change', $event)\"\n >\n <template\n v-for=\"col in internalConfig.columns\"\n :key=\"col.property\"\n #[`cell:${col.property}`]=\"slotProps\"\n >\n <slot :name=\"`cell:${col.property}`\" v-bind=\"slotProps\" />\n </template>\n <template v-if=\"hasActionsSlot && !isSelectable\" #actions=\"slotProps\">\n <slot name=\"actions\" v-bind=\"slotProps\" />\n </template>\n </DataCards>\n\n <DataPaginator\n v-if=\"pagination && showPaginator\"\n :settings=\"pagination\"\n :storage-key=\"id\"\n :handle-url=\"handleUrl\"\n :font-size=\"resolvedSettings?.fontSize ?? 'normal'\"\n @update:pagination=\"emit('pagination-change', $event)\"\n />\n\n <DataListOptions\n :open=\"showOptions\"\n :columns=\"config.columns\"\n :settings=\"settings ?? {}\"\n :storage-key=\"id\"\n :orderable=\"orderable\"\n @close=\"showOptions = false\"\n @change=\"onSettingsChange\"\n />\n </div>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/data-table/data-list.scss\"></style>\n"],"mappings":""}
|
|
@@ -1,52 +1,49 @@
|
|
|
1
|
-
import { Teleport as e, createBlock as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, defineComponent as a, normalizeClass as o, onMounted as s, onUnmounted as c, openBlock as l,
|
|
1
|
+
import { Teleport as e, createBlock as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, defineComponent as a, normalizeClass as o, onMounted as s, onUnmounted as c, openBlock as l, renderSlot as u, toDisplayString as d } from "vue";
|
|
2
2
|
//#region src/components/Modal.vue?vue&type=script&setup=true&lang.ts
|
|
3
|
-
var
|
|
3
|
+
var f = { class: "ac-component" }, p = ["aria-label"], m = {
|
|
4
4
|
key: 0,
|
|
5
5
|
class: "c-modal-header"
|
|
6
|
-
},
|
|
6
|
+
}, h = { class: "c-modal-title" }, g = { class: "c-modal-body c-scroll" }, _ = {
|
|
7
7
|
key: 1,
|
|
8
8
|
class: "c-modal-footer"
|
|
9
|
-
},
|
|
9
|
+
}, v = /*@__PURE__*/ a({
|
|
10
10
|
__name: "Modal",
|
|
11
11
|
props: {
|
|
12
12
|
title: {},
|
|
13
13
|
modalClass: {}
|
|
14
14
|
},
|
|
15
15
|
emits: ["close"],
|
|
16
|
-
setup(a, { emit:
|
|
17
|
-
let
|
|
18
|
-
function
|
|
19
|
-
e.target ===
|
|
16
|
+
setup(a, { emit: v }) {
|
|
17
|
+
let y = v;
|
|
18
|
+
function b(e) {
|
|
19
|
+
e.target === e.currentTarget && y("close");
|
|
20
20
|
}
|
|
21
|
-
function
|
|
22
|
-
e.
|
|
23
|
-
}
|
|
24
|
-
function T(e) {
|
|
25
|
-
e.preventDefault(), x("close");
|
|
21
|
+
function x(e) {
|
|
22
|
+
e.key === "Escape" && y("close");
|
|
26
23
|
}
|
|
27
24
|
return s(() => {
|
|
28
|
-
|
|
25
|
+
document.addEventListener("keydown", x);
|
|
29
26
|
}), c(() => {
|
|
30
|
-
document.removeEventListener("
|
|
31
|
-
}), (s, c) => (l(), t(e, { to: "body" }, [i("div",
|
|
32
|
-
|
|
33
|
-
|
|
27
|
+
document.removeEventListener("keydown", x);
|
|
28
|
+
}), (s, c) => (l(), t(e, { to: "body" }, [i("div", f, [i("div", {
|
|
29
|
+
class: "c-modal-backdrop",
|
|
30
|
+
onMousedown: b
|
|
31
|
+
}, [i("div", {
|
|
34
32
|
class: o(["c-modal", a.modalClass]),
|
|
33
|
+
role: "dialog",
|
|
35
34
|
"aria-modal": "true",
|
|
36
|
-
"aria-label": a.title
|
|
37
|
-
onMousedown: C,
|
|
38
|
-
onCancel: T
|
|
35
|
+
"aria-label": a.title
|
|
39
36
|
}, [
|
|
40
|
-
s.$slots.header || a.title ? (l(), r("
|
|
37
|
+
s.$slots.header || a.title ? (l(), r("div", m, [u(s.$slots, "header", {}, () => [i("h3", h, d(a.title), 1)]), i("button", {
|
|
41
38
|
type: "button",
|
|
42
39
|
class: "c-modal-close",
|
|
43
40
|
"aria-label": "Bezárás",
|
|
44
|
-
onClick: c[0] ||= (e) =>
|
|
41
|
+
onClick: c[0] ||= (e) => y("close")
|
|
45
42
|
}, [...c[1] ||= [i("i", { class: "fa-solid fa-xmark" }, null, -1)]])])) : n("", !0),
|
|
46
|
-
i("div",
|
|
47
|
-
s.$slots.footer ? (l(), r("
|
|
48
|
-
],
|
|
43
|
+
i("div", g, [u(s.$slots, "default")]),
|
|
44
|
+
s.$slots.footer ? (l(), r("div", _, [u(s.$slots, "footer")])) : n("", !0)
|
|
45
|
+
], 10, p)], 32)])]));
|
|
49
46
|
}
|
|
50
47
|
});
|
|
51
48
|
//#endregion
|
|
52
|
-
export {
|
|
49
|
+
export { v as default };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"admins-components38.js","names":["$slots"],"sources":["../src/components/Modal.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface ModalProps {\n title?: string\n modalClass?: string\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { onMounted, onUnmounted
|
|
1
|
+
{"version":3,"file":"admins-components38.js","names":["$slots"],"sources":["../src/components/Modal.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface ModalProps {\n title?: string\n modalClass?: string\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { onMounted, onUnmounted } from 'vue'\n\ndefineProps<ModalProps>()\n\nconst emit = defineEmits<{\n close: []\n}>()\n\nfunction onBackdropClick(e: MouseEvent) {\n if (e.target === e.currentTarget) {\n emit('close')\n }\n}\n\nfunction onKeydown(e: KeyboardEvent) {\n if (e.key === 'Escape') {\n emit('close')\n }\n}\n\nonMounted(() => {\n document.addEventListener('keydown', onKeydown)\n})\n\nonUnmounted(() => {\n document.removeEventListener('keydown', onKeydown)\n})\n</script>\n\n<template>\n <Teleport to=\"body\">\n <div class=\"ac-component\">\n <div class=\"c-modal-backdrop\" @mousedown=\"onBackdropClick\">\n <div\n class=\"c-modal\"\n :class=\"modalClass\"\n role=\"dialog\"\n aria-modal=\"true\"\n :aria-label=\"title\"\n >\n <div v-if=\"$slots.header || title\" class=\"c-modal-header\">\n <slot name=\"header\">\n <h3 class=\"c-modal-title\">{{ title }}</h3>\n </slot>\n <button type=\"button\" class=\"c-modal-close\" aria-label=\"Bezárás\" @click=\"emit('close')\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n </div>\n <div class=\"c-modal-body c-scroll\">\n <slot />\n </div>\n <div v-if=\"$slots.footer\" class=\"c-modal-footer\">\n <slot name=\"footer\" />\n </div>\n </div>\n </div>\n </div>\n </Teleport>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/modal.scss\"></style>\n"],"mappings":";;;;;;;;;;;;;;;;EAYA,IAAM,IAAO;EAIb,SAAS,EAAgB,GAAe;GACtC,AAAI,EAAE,WAAW,EAAE,iBACjB,EAAK,OAAO;EAEhB;EAEA,SAAS,EAAU,GAAkB;GACnC,AAAI,EAAE,QAAQ,YACZ,EAAK,OAAO;EAEhB;SAEA,QAAgB;GACd,SAAS,iBAAiB,WAAW,CAAS;EAChD,CAAC,GAED,QAAkB;GAChB,SAAS,oBAAoB,WAAW,CAAS;EACnD,CAAC,cAIC,EAAA,GAAA,EA2BW,GAAA,EA3BD,IAAG,OAAM,GAAA,CACjB,EAyBM,OAzBN,GAyBM,CAxBJ,EAuBM,OAAA;GAvBD,OAAM;GAAoB,aAAW;EACxC,GAAA,CAAA,EAqBM,OAAA;GApBJ,OAAK,EAAA,CAAC,WACE,EAAA,UAAU,CAAA;GAClB,MAAK;GACL,cAAW;GACV,cAAY,EAAA;;GAEFA,EAAAA,OAAO,UAAU,EAAA,SAA5B,EAAA,GAAA,EAOM,OAPN,GAOM,CANJ,EAEO,EAAA,QAAA,UAAA,CAAA,SAAA,CADL,EAA0C,MAA1C,GAA0C,EAAb,EAAA,KAAK,GAAA,CAAA,CAAA,CAAA,GAEpC,EAES,UAAA;IAFD,MAAK;IAAS,OAAM;IAAgB,cAAW;IAAW,SAAK,AAAA,EAAA,QAAA,MAAE,EAAI,OAAA;GAC3E,GAAA,CAAA,GAAA,AAAA,EAAA,OAAA,CAAA,EAAiC,KAAA,EAA9B,OAAM,oBAAmB,GAAA,MAAA,EAAA,CAAA,CAAA,CAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA;GAGhC,EAEM,OAFN,GAEM,CADJ,EAAQ,EAAA,QAAA,SAAA,CAAA,CAAA;GAECA,EAAAA,OAAO,UAAlB,EAAA,GAAA,EAEM,OAFN,GAEM,CADJ,EAAsB,EAAA,QAAA,QAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"admins-components40.js","names":[],"sources":["../src/components/Modal.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface ModalProps {\n title?: string\n modalClass?: string\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { onMounted, onUnmounted
|
|
1
|
+
{"version":3,"file":"admins-components40.js","names":[],"sources":["../src/components/Modal.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface ModalProps {\n title?: string\n modalClass?: string\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { onMounted, onUnmounted } from 'vue'\n\ndefineProps<ModalProps>()\n\nconst emit = defineEmits<{\n close: []\n}>()\n\nfunction onBackdropClick(e: MouseEvent) {\n if (e.target === e.currentTarget) {\n emit('close')\n }\n}\n\nfunction onKeydown(e: KeyboardEvent) {\n if (e.key === 'Escape') {\n emit('close')\n }\n}\n\nonMounted(() => {\n document.addEventListener('keydown', onKeydown)\n})\n\nonUnmounted(() => {\n document.removeEventListener('keydown', onKeydown)\n})\n</script>\n\n<template>\n <Teleport to=\"body\">\n <div class=\"ac-component\">\n <div class=\"c-modal-backdrop\" @mousedown=\"onBackdropClick\">\n <div\n class=\"c-modal\"\n :class=\"modalClass\"\n role=\"dialog\"\n aria-modal=\"true\"\n :aria-label=\"title\"\n >\n <div v-if=\"$slots.header || title\" class=\"c-modal-header\">\n <slot name=\"header\">\n <h3 class=\"c-modal-title\">{{ title }}</h3>\n </slot>\n <button type=\"button\" class=\"c-modal-close\" aria-label=\"Bezárás\" @click=\"emit('close')\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n </div>\n <div class=\"c-modal-body c-scroll\">\n <slot />\n </div>\n <div v-if=\"$slots.footer\" class=\"c-modal-footer\">\n <slot name=\"footer\" />\n </div>\n </div>\n </div>\n </div>\n </Teleport>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/modal.scss\"></style>\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"admins-components80.js","names":[],"sources":["../src/components/data-table/DataPaginator.vue"],"sourcesContent":["<script lang=\"ts\">\nconst SIZE_OPTIONS = [10, 25, 50, 100]\nconst DEFAULT_PAGE_SIZE = 25\n\nexport function getPageSize(storageKey: string): number {\n // URL > localStorage > default\n const urlSize = readUrlNumber('pageSize')\n if (urlSize != null) return urlSize\n try {\n const fullStorageKey = getFullStorageKey('pagination', storageKey)\n const raw = localStorage.getItem(fullStorageKey)\n if (raw) {\n const size = Number(raw)\n if (size > 0) return size\n }\n } catch {\n console.warn('Failed to read page size from localStorage')\n }\n return DEFAULT_PAGE_SIZE\n}\n\nexport function getDefaultPaginator(storageKey: string) {\n return {\n total: 0,\n page: readUrlNumber('page') ?? 1,\n pageSize: getPageSize(storageKey),\n } as PaginatorSettings\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, onMounted } from 'vue'\nimport Button from '@/components/Button.vue'\nimport type { PaginatorSettings, PageSettings } from '@/types/data-list'\nimport { getFullStorageKey } from '@/utils/storageKey'\nimport { readUrlNumber, writeUrlOrRemove } from '@/utils/url'\n\nconst props = withDefaults(\n defineProps<{\n settings: PaginatorSettings\n storageKey: string\n handleUrl?: boolean\n fontSize?: 'small' | 'normal' | 'large'\n }>(),\n { handleUrl: false, fontSize: 'normal' },\n)\n\nconst emit = defineEmits<{\n 'update:pagination': [pagination: PageSettings]\n}>()\n\nfunction savePageSize(size: number) {\n try {\n localStorage.setItem(getFullStorageKey('pagination', props.storageKey), String(size))\n } catch {\n console.warn('Failed to save page size to localStorage')\n }\n}\n\nconst totalPages = computed(() =>\n Math.max(1, Math.ceil(props.settings.total / props.settings.pageSize)),\n)\n\nconst rangeStart = computed(() =>\n props.settings.total === 0 ? 0 : (props.settings.page - 1) * props.settings.pageSize + 1,\n)\nconst rangeEnd = computed(() =>\n Math.min(props.settings.page * props.settings.pageSize, props.settings.total),\n)\n\nconst visiblePages = computed<(number | '...')[]>(() => {\n const total = totalPages.value\n const current = props.settings.page\n\n if (total <= SLOT_COUNT) {\n const pages: number[] = []\n for (let i = 1; i <= total; i++) pages.push(i)\n return pages\n }\n\n const inner = SLOT_COUNT - 2\n let winStart = current - 1\n let winEnd = current + 1\n if (winStart < 2) {\n winEnd = Math.min(total - 1, winEnd + (2 - winStart))\n winStart = 2\n }\n if (winEnd > total - 1) {\n winStart = Math.max(2, winStart - (winEnd - (total - 1)))\n winEnd = total - 1\n }\n\n while (winEnd - winStart + 1 < inner) {\n const canExtendLeft = winStart > 2\n const canExtendRight = winEnd < total - 1\n if (!canExtendLeft && !canExtendRight) break\n\n const roomLeft = winStart - 2\n const roomRight = total - 1 - winEnd\n\n const ellipsisIfExtendLeft =\n ((canExtendLeft ? winStart - 1 : 0) > 2 ? 1 : 0) + (winEnd < total - 1 ? 1 : 0)\n const ellipsisIfExtendRight =\n (winStart > 2 ? 1 : 0) + ((canExtendRight ? winEnd + 1 : 0) < total - 1 ? 1 : 0)\n\n const newSize = winEnd - winStart + 2\n\n let extended = false\n if (\n canExtendLeft &&\n (roomLeft >= roomRight || !canExtendRight) &&\n newSize + ellipsisIfExtendLeft <= inner\n ) {\n winStart--\n extended = true\n } else if (canExtendRight && newSize + ellipsisIfExtendRight <= inner) {\n winEnd++\n extended = true\n }\n if (!extended) break\n }\n const showLeftEllipsis = winStart > 2\n const showRightEllipsis = winEnd < total - 1\n\n const pages: (number | '...')[] = []\n pages.push(1)\n if (showLeftEllipsis) pages.push('...')\n for (let p = winStart; p <= winEnd; p++) pages.push(p)\n if (showRightEllipsis) pages.push('...')\n pages.push(total)\n\n return pages\n})\n\nconst SLOT_COUNT = 7\n\nfunction shouldHideOnSmall(page: number) {\n const current = props.settings.page\n const total = totalPages.value\n\n const isEdge = page === 1 || page === total\n const isCurrent = page === current\n\n const isMiddleRange = current > 3 && current < total - 2\n\n return isMiddleRange && !isEdge && !isCurrent\n}\n\nfunction goToPage(page: number) {\n if (page < 1 || page > totalPages.value || page === props.settings.page) return\n writeUrlOrRemove('page', page, { handleUrl: props.handleUrl, default: 1 })\n writeUrlOrRemove('pageSize', props.settings.pageSize, { handleUrl: props.handleUrl })\n emit('update:pagination', { page, pageSize: props.settings.pageSize })\n}\n\nfunction changePageSize(event: Event) {\n const size = Number((event.target as HTMLSelectElement).value)\n savePageSize(size)\n writeUrlOrRemove('pageSize', size, { handleUrl: props.handleUrl })\n writeUrlOrRemove('page', 1, { handleUrl: props.handleUrl, default: 1 })\n emit('update:pagination', { page: 1, pageSize: size })\n}\n\nonMounted(() => {\n if (!props.handleUrl) return\n\n const urlSize = readUrlNumber('pageSize')\n const urlPage = readUrlNumber('page')\n if (urlSize == null || urlPage == null) return\n if (urlSize === props.settings.pageSize && urlPage === props.settings.page) return\n emit('update:pagination', { page: urlPage, pageSize: urlSize })\n})\n</script>\n\n<template>\n <div class=\"ac-component c-paginator-wrapper\" :class=\"[`is-font-${fontSize}`]\">\n <div class=\"c-paginator\">\n <div class=\"c-paginator__info\">\n <span class=\"c-paginator__range\">{{ rangeStart }}–{{ rangeEnd }}</span>\n <span class=\"c-paginator__total\"> / {{ settings.total }}</span>\n </div>\n\n <nav class=\"c-paginator__nav\" aria-label=\"Pagination\">\n <Button\n icon=\"fa-solid fa-chevron-left\"\n rel=\"prev\"\n :disabled=\"settings.page <= 1\"\n :callback=\"() => goToPage(settings.page - 1)\"\n />\n\n <template v-for=\"(p, i) in visiblePages\" :key=\"i\">\n <span v-if=\"p === '...'\" class=\"c-paginator__ellipsis\">…</span>\n <button\n v-else\n type=\"button\"\n class=\"c-paginator__page\"\n :class=\"{\n 'is-active': p === settings.page,\n 'is-hidden-sm': shouldHideOnSmall(p),\n }\"\n @click=\"goToPage(p)\"\n >\n {{ p }}\n </button>\n </template>\n\n <Button\n icon=\"fa-solid fa-chevron-right\"\n rel=\"next\"\n :disabled=\"settings.page >= totalPages\"\n :callback=\"() => goToPage(settings.page + 1)\"\n />\n </nav>\n\n <div class=\"c-paginator__size\">\n <select\n class=\"c-paginator__select\"\n id=\"page-size-select\"\n :value=\"settings.pageSize\"\n @change=\"changePageSize\"\n >\n <option v-for=\"s in SIZE_OPTIONS\" :key=\"s\" :value=\"s\">{{ s }} elem / oldal</option>\n </select>\n </div>\n </div>\n </div>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/data-table/data-paginator.scss\"></style>\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"admins-components80.js","names":[],"sources":["../src/components/data-table/DataPaginator.vue"],"sourcesContent":["<script lang=\"ts\">\nconst SIZE_OPTIONS = [10, 25, 50, 100]\nconst DEFAULT_PAGE_SIZE = 25\n\nexport function getPageSize(storageKey: string): number {\n // URL > localStorage > default\n const urlSize = readUrlNumber('pageSize')\n if (urlSize != null) return urlSize\n try {\n const fullStorageKey = getFullStorageKey('pagination', storageKey)\n const raw = localStorage.getItem(fullStorageKey)\n if (raw) {\n const size = Number(raw)\n if (size > 0) return size\n }\n } catch {\n console.warn('Failed to read page size from localStorage')\n }\n return DEFAULT_PAGE_SIZE\n}\n\nexport function getDefaultPaginator(storageKey: string) {\n return {\n total: 0,\n page: readUrlNumber('page') ?? 1,\n pageSize: getPageSize(storageKey),\n } as PaginatorSettings\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, onMounted } from 'vue'\nimport Button from '@/components/Button.vue'\nimport type { PaginatorSettings, PageSettings } from '@/types/data-list'\nimport { getFullStorageKey } from '@/utils/storageKey'\nimport { readUrlNumber, writeUrlOrRemove } from '@/utils/url'\nimport type { FontSize } from '@/types/types'\n\nconst props = withDefaults(\n defineProps<{\n settings: PaginatorSettings\n storageKey: string\n handleUrl?: boolean\n fontSize?: FontSize\n }>(),\n { handleUrl: false, fontSize: 'normal' },\n)\n\nconst emit = defineEmits<{\n 'update:pagination': [pagination: PageSettings]\n}>()\n\nfunction savePageSize(size: number) {\n try {\n localStorage.setItem(getFullStorageKey('pagination', props.storageKey), String(size))\n } catch {\n console.warn('Failed to save page size to localStorage')\n }\n}\n\nconst totalPages = computed(() =>\n Math.max(1, Math.ceil(props.settings.total / props.settings.pageSize)),\n)\n\nconst rangeStart = computed(() =>\n props.settings.total === 0 ? 0 : (props.settings.page - 1) * props.settings.pageSize + 1,\n)\nconst rangeEnd = computed(() =>\n Math.min(props.settings.page * props.settings.pageSize, props.settings.total),\n)\n\nconst visiblePages = computed<(number | '...')[]>(() => {\n const total = totalPages.value\n const current = props.settings.page\n\n if (total <= SLOT_COUNT) {\n const pages: number[] = []\n for (let i = 1; i <= total; i++) pages.push(i)\n return pages\n }\n\n const inner = SLOT_COUNT - 2\n let winStart = current - 1\n let winEnd = current + 1\n if (winStart < 2) {\n winEnd = Math.min(total - 1, winEnd + (2 - winStart))\n winStart = 2\n }\n if (winEnd > total - 1) {\n winStart = Math.max(2, winStart - (winEnd - (total - 1)))\n winEnd = total - 1\n }\n\n while (winEnd - winStart + 1 < inner) {\n const canExtendLeft = winStart > 2\n const canExtendRight = winEnd < total - 1\n if (!canExtendLeft && !canExtendRight) break\n\n const roomLeft = winStart - 2\n const roomRight = total - 1 - winEnd\n\n const ellipsisIfExtendLeft =\n ((canExtendLeft ? winStart - 1 : 0) > 2 ? 1 : 0) + (winEnd < total - 1 ? 1 : 0)\n const ellipsisIfExtendRight =\n (winStart > 2 ? 1 : 0) + ((canExtendRight ? winEnd + 1 : 0) < total - 1 ? 1 : 0)\n\n const newSize = winEnd - winStart + 2\n\n let extended = false\n if (\n canExtendLeft &&\n (roomLeft >= roomRight || !canExtendRight) &&\n newSize + ellipsisIfExtendLeft <= inner\n ) {\n winStart--\n extended = true\n } else if (canExtendRight && newSize + ellipsisIfExtendRight <= inner) {\n winEnd++\n extended = true\n }\n if (!extended) break\n }\n const showLeftEllipsis = winStart > 2\n const showRightEllipsis = winEnd < total - 1\n\n const pages: (number | '...')[] = []\n pages.push(1)\n if (showLeftEllipsis) pages.push('...')\n for (let p = winStart; p <= winEnd; p++) pages.push(p)\n if (showRightEllipsis) pages.push('...')\n pages.push(total)\n\n return pages\n})\n\nconst SLOT_COUNT = 7\n\nfunction shouldHideOnSmall(page: number) {\n const current = props.settings.page\n const total = totalPages.value\n\n const isEdge = page === 1 || page === total\n const isCurrent = page === current\n\n const isMiddleRange = current > 3 && current < total - 2\n\n return isMiddleRange && !isEdge && !isCurrent\n}\n\nfunction goToPage(page: number) {\n if (page < 1 || page > totalPages.value || page === props.settings.page) return\n writeUrlOrRemove('page', page, { handleUrl: props.handleUrl, default: 1 })\n writeUrlOrRemove('pageSize', props.settings.pageSize, { handleUrl: props.handleUrl })\n emit('update:pagination', { page, pageSize: props.settings.pageSize })\n}\n\nfunction changePageSize(event: Event) {\n const size = Number((event.target as HTMLSelectElement).value)\n savePageSize(size)\n writeUrlOrRemove('pageSize', size, { handleUrl: props.handleUrl })\n writeUrlOrRemove('page', 1, { handleUrl: props.handleUrl, default: 1 })\n emit('update:pagination', { page: 1, pageSize: size })\n}\n\nonMounted(() => {\n if (!props.handleUrl) return\n\n const urlSize = readUrlNumber('pageSize')\n const urlPage = readUrlNumber('page')\n if (urlSize == null || urlPage == null) return\n if (urlSize === props.settings.pageSize && urlPage === props.settings.page) return\n emit('update:pagination', { page: urlPage, pageSize: urlSize })\n})\n</script>\n\n<template>\n <div class=\"ac-component c-paginator-wrapper\" :class=\"[`is-font-${fontSize}`]\">\n <div class=\"c-paginator\">\n <div class=\"c-paginator__info\">\n <span class=\"c-paginator__range\">{{ rangeStart }}–{{ rangeEnd }}</span>\n <span class=\"c-paginator__total\"> / {{ settings.total }}</span>\n </div>\n\n <nav class=\"c-paginator__nav\" aria-label=\"Pagination\">\n <Button\n icon=\"fa-solid fa-chevron-left\"\n rel=\"prev\"\n :disabled=\"settings.page <= 1\"\n :callback=\"() => goToPage(settings.page - 1)\"\n />\n\n <template v-for=\"(p, i) in visiblePages\" :key=\"i\">\n <span v-if=\"p === '...'\" class=\"c-paginator__ellipsis\">…</span>\n <button\n v-else\n type=\"button\"\n class=\"c-paginator__page\"\n :class=\"{\n 'is-active': p === settings.page,\n 'is-hidden-sm': shouldHideOnSmall(p),\n }\"\n @click=\"goToPage(p)\"\n >\n {{ p }}\n </button>\n </template>\n\n <Button\n icon=\"fa-solid fa-chevron-right\"\n rel=\"next\"\n :disabled=\"settings.page >= totalPages\"\n :callback=\"() => goToPage(settings.page + 1)\"\n />\n </nav>\n\n <div class=\"c-paginator__size\">\n <select\n class=\"c-paginator__select\"\n id=\"page-size-select\"\n :value=\"settings.pageSize\"\n @change=\"changePageSize\"\n >\n <option v-for=\"s in SIZE_OPTIONS\" :key=\"s\" :value=\"s\">{{ s }} elem / oldal</option>\n </select>\n </div>\n </div>\n </div>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/data-table/data-paginator.scss\"></style>\n"],"mappings":";;;;;;;;;;;sFACM,IAAe;CAAC;CAAI;CAAI;CAAI;AAAG,GAC/B,IAAoB;AAE1B,SAAgB,EAAY,GAA4B;CAEtD,IAAM,IAAU,EAAc,UAAU;CACxC,IAAI,KAAW,MAAM,OAAO;CAC5B,IAAI;EACF,IAAM,IAAiB,EAAkB,cAAc,CAAU,GAC3D,IAAM,aAAa,QAAQ,CAAc;EAC/C,IAAI,GAAK;GACP,IAAM,IAAO,OAAO,CAAG;GACvB,IAAI,IAAO,GAAG,OAAO;EACvB;CACF,QAAQ;EACN,QAAQ,KAAK,4CAA4C;CAC3D;CACA,OAAO;AACT;AAEA,SAAgB,EAAoB,GAAoB;CACtD,OAAO;EACL,OAAO;EACP,MAAM,EAAc,MAAM,KAAK;EAC/B,UAAU,EAAY,CAAU;CAClC;AACF;;;;;;;;;;;;;;EAWA,IAAM,IAAQ,GAUR,IAAO;EAIb,SAAS,EAAa,GAAc;GAClC,IAAI;IACF,aAAa,QAAQ,EAAkB,cAAc,EAAM,UAAU,GAAG,OAAO,CAAI,CAAC;GACtF,QAAQ;IACN,QAAQ,KAAK,0CAA0C;GACzD;EACF;EAEA,IAAM,IAAa,QACjB,KAAK,IAAI,GAAG,KAAK,KAAK,EAAM,SAAS,QAAQ,EAAM,SAAS,QAAQ,CAAC,CACvE,GAEM,IAAa,QACjB,EAAM,SAAS,UAAU,IAAI,KAAK,EAAM,SAAS,OAAO,KAAK,EAAM,SAAS,WAAW,CACzF,GACM,IAAW,QACf,KAAK,IAAI,EAAM,SAAS,OAAO,EAAM,SAAS,UAAU,EAAM,SAAS,KAAK,CAC9E,GAEM,IAAe,QAAmC;GACtD,IAAM,IAAQ,EAAW,OACnB,IAAU,EAAM,SAAS;GAE/B,IAAI,KAAS,GAAY;IACvB,IAAM,IAAkB,CAAC;IACzB,KAAK,IAAI,IAAI,GAAG,KAAK,GAAO,KAAK,EAAM,KAAK,CAAC;IAC7C,OAAO;GACT;GAEA,IAAM,IAAQ,IAAa,GACvB,IAAW,IAAU,GACrB,IAAS,IAAU;GAUvB,KATI,IAAW,MACb,IAAS,KAAK,IAAI,IAAQ,GAAG,KAAU,IAAI,EAAS,GACpD,IAAW,IAET,IAAS,IAAQ,MACnB,IAAW,KAAK,IAAI,GAAG,KAAY,KAAU,IAAQ,GAAG,GACxD,IAAS,IAAQ,IAGZ,IAAS,IAAW,IAAI,IAAO;IACpC,IAAM,IAAgB,IAAW,GAC3B,IAAiB,IAAS,IAAQ;IACxC,IAAI,CAAC,KAAiB,CAAC,GAAgB;IAEvC,IAAM,IAAW,IAAW,GACtB,IAAY,IAAQ,IAAI,GAExB,IAAA,GACF,IAAgB,IAAW,IAAI,KAAK,KAAc,MAAS,IAAQ,IACjE,IACH,MAAW,KAAQ,GAAO,IAAiB,IAAS,IAAI,KAAK,IAAQ,IAElE,IAAU,IAAS,IAAW,GAEhC,IAAW;IAYf,IAVE,MACC,KAAY,KAAa,CAAC,MAC3B,IAAU,KAAwB,KAElC,KACA,IAAW,MACF,KAAkB,IAAU,KAAyB,MAC9D,KACA,IAAW,KAET,CAAC,GAAU;GACjB;GACA,IAAM,IAAmB,IAAW,GAC9B,IAAoB,IAAS,IAAQ,GAErC,IAA4B,CAAC;GAEnC,AADA,EAAM,KAAK,CAAC,GACR,KAAkB,EAAM,KAAK,KAAK;GACtC,KAAK,IAAI,IAAI,GAAU,KAAK,GAAQ,KAAK,EAAM,KAAK,CAAC;GAIrD,OAHI,KAAmB,EAAM,KAAK,KAAK,GACvC,EAAM,KAAK,CAAK,GAET;EACT,CAAC,GAEK,IAAa;EAEnB,SAAS,EAAkB,GAAc;GACvC,IAAM,IAAU,EAAM,SAAS,MACzB,IAAQ,EAAW,OAEnB,IAAS,MAAS,KAAK,MAAS,GAChC,IAAY,MAAS;GAI3B,OAFsB,IAAU,KAAK,IAAU,IAAQ,KAE/B,CAAC,KAAU,CAAC;EACtC;EAEA,SAAS,EAAS,GAAc;GAC1B,IAAO,KAAK,IAAO,EAAW,SAAS,MAAS,EAAM,SAAS,SACnE,EAAiB,QAAQ,GAAM;IAAE,WAAW,EAAM;IAAW,SAAS;GAAE,CAAC,GACzE,EAAiB,YAAY,EAAM,SAAS,UAAU,EAAE,WAAW,EAAM,UAAU,CAAC,GACpF,EAAK,qBAAqB;IAAE;IAAM,UAAU,EAAM,SAAS;GAAS,CAAC;EACvE;EAEA,SAAS,EAAe,GAAc;GACpC,IAAM,IAAO,OAAQ,EAAM,OAA6B,KAAK;GAI7D,AAHA,EAAa,CAAI,GACjB,EAAiB,YAAY,GAAM,EAAE,WAAW,EAAM,UAAU,CAAC,GACjE,EAAiB,QAAQ,GAAG;IAAE,WAAW,EAAM;IAAW,SAAS;GAAE,CAAC,GACtE,EAAK,qBAAqB;IAAE,MAAM;IAAG,UAAU;GAAK,CAAC;EACvD;SAEA,QAAgB;GACd,IAAI,CAAC,EAAM,WAAW;GAEtB,IAAM,IAAU,EAAc,UAAU,GAClC,IAAU,EAAc,MAAM;GAChC,KAAW,QAAQ,KAAW,SAC9B,MAAY,EAAM,SAAS,YAAY,MAAY,EAAM,SAAS,SACtE,EAAK,qBAAqB;IAAE,MAAM;IAAS,UAAU;GAAQ,CAAC;EAChE,CAAC,cAIC,EAAA,GAAA,EAkDM,OAAA,EAlDD,OAAK,EAAA,CAAC,oCAAkC,CAAA,WAAqB,EAAA,UAAQ,CAAA,CAAA,EAAA,GAAA,CACxE,EAgDM,OAhDN,GAgDM;GA/CJ,EAGM,OAHN,GAGM,CAFJ,EAA6E,QAA7E,GAA6E,EAAzC,EAAA,KAAU,IAAG,MAAO,EAAG,EAAA,KAAQ,GAAA,CAAA,GACnE,EAA+D,QAA/D,GAAiC,QAAG,EAAG,EAAA,SAAS,KAAK,GAAA,CAAA,CAAA,CAAA;GAGvD,EA8BM,OA9BN,GA8BM;IA7BJ,EAKE,GAAA;KAJA,MAAK;KACL,KAAI;KACH,UAAU,EAAA,SAAS,QAAI;KACvB,gBAAgB,EAAS,EAAA,SAAS,OAAI,CAAA;;KAGzC,EAAA,EAAA,GAAA,EAcW,GAAA,MAAA,EAdgB,EAAA,QAAT,GAAG,OAA0B,EAAA,GAAA,EAAA,GAAA,EAAA,KAAA,EAAC,GAAA,CAClC,MAAC,SAAb,EAAA,GAAA,EAAsE,QAAtE,GAAuD,GAAQ,MAC/D,EAAA,GAAA,EAWS,UAAA;;KATP,MAAK;KACL,OAAK,EAAA,CAAC,qBAAmB;MACY,aAAA,MAAM,EAAA,SAAS;MAAoC,gBAAA,EAAkB,CAAC;;KAI1G,UAAK,MAAE,EAAS,CAAC;IAEf,GAAA,EAAA,CAAC,GAAA,IAAA,CAAA,EAAA,GAAA,EAAA;IAIR,EAKE,GAAA;KAJA,MAAK;KACL,KAAI;KACH,UAAU,EAAA,SAAS,QAAQ,EAAA;KAC3B,gBAAgB,EAAS,EAAA,SAAS,OAAI,CAAA;;;GAI3C,EASM,OATN,GASM,CARJ,EAOS,UAAA;IANP,OAAM;IACN,IAAG;IACF,OAAO,EAAA,SAAS;IAChB,UAAQ;GAET,GAAA,EAAA,EAAA,GAAA,EAAmF,GAAA,MAAA,EAA/D,IAAL,MAAf,EAAmF,UAAA;IAAhD,KAAK;IAAI,OAAO;GAAM,GAAA,EAAA,CAAC,IAAG,iBAAa,GAAA,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"admins-components82.js","names":[],"sources":["../src/components/data-table/DataPaginator.vue"],"sourcesContent":["<script lang=\"ts\">\nconst SIZE_OPTIONS = [10, 25, 50, 100]\nconst DEFAULT_PAGE_SIZE = 25\n\nexport function getPageSize(storageKey: string): number {\n // URL > localStorage > default\n const urlSize = readUrlNumber('pageSize')\n if (urlSize != null) return urlSize\n try {\n const fullStorageKey = getFullStorageKey('pagination', storageKey)\n const raw = localStorage.getItem(fullStorageKey)\n if (raw) {\n const size = Number(raw)\n if (size > 0) return size\n }\n } catch {\n console.warn('Failed to read page size from localStorage')\n }\n return DEFAULT_PAGE_SIZE\n}\n\nexport function getDefaultPaginator(storageKey: string) {\n return {\n total: 0,\n page: readUrlNumber('page') ?? 1,\n pageSize: getPageSize(storageKey),\n } as PaginatorSettings\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, onMounted } from 'vue'\nimport Button from '@/components/Button.vue'\nimport type { PaginatorSettings, PageSettings } from '@/types/data-list'\nimport { getFullStorageKey } from '@/utils/storageKey'\nimport { readUrlNumber, writeUrlOrRemove } from '@/utils/url'\n\nconst props = withDefaults(\n defineProps<{\n settings: PaginatorSettings\n storageKey: string\n handleUrl?: boolean\n fontSize?:
|
|
1
|
+
{"version":3,"file":"admins-components82.js","names":[],"sources":["../src/components/data-table/DataPaginator.vue"],"sourcesContent":["<script lang=\"ts\">\nconst SIZE_OPTIONS = [10, 25, 50, 100]\nconst DEFAULT_PAGE_SIZE = 25\n\nexport function getPageSize(storageKey: string): number {\n // URL > localStorage > default\n const urlSize = readUrlNumber('pageSize')\n if (urlSize != null) return urlSize\n try {\n const fullStorageKey = getFullStorageKey('pagination', storageKey)\n const raw = localStorage.getItem(fullStorageKey)\n if (raw) {\n const size = Number(raw)\n if (size > 0) return size\n }\n } catch {\n console.warn('Failed to read page size from localStorage')\n }\n return DEFAULT_PAGE_SIZE\n}\n\nexport function getDefaultPaginator(storageKey: string) {\n return {\n total: 0,\n page: readUrlNumber('page') ?? 1,\n pageSize: getPageSize(storageKey),\n } as PaginatorSettings\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, onMounted } from 'vue'\nimport Button from '@/components/Button.vue'\nimport type { PaginatorSettings, PageSettings } from '@/types/data-list'\nimport { getFullStorageKey } from '@/utils/storageKey'\nimport { readUrlNumber, writeUrlOrRemove } from '@/utils/url'\nimport type { FontSize } from '@/types/types'\n\nconst props = withDefaults(\n defineProps<{\n settings: PaginatorSettings\n storageKey: string\n handleUrl?: boolean\n fontSize?: FontSize\n }>(),\n { handleUrl: false, fontSize: 'normal' },\n)\n\nconst emit = defineEmits<{\n 'update:pagination': [pagination: PageSettings]\n}>()\n\nfunction savePageSize(size: number) {\n try {\n localStorage.setItem(getFullStorageKey('pagination', props.storageKey), String(size))\n } catch {\n console.warn('Failed to save page size to localStorage')\n }\n}\n\nconst totalPages = computed(() =>\n Math.max(1, Math.ceil(props.settings.total / props.settings.pageSize)),\n)\n\nconst rangeStart = computed(() =>\n props.settings.total === 0 ? 0 : (props.settings.page - 1) * props.settings.pageSize + 1,\n)\nconst rangeEnd = computed(() =>\n Math.min(props.settings.page * props.settings.pageSize, props.settings.total),\n)\n\nconst visiblePages = computed<(number | '...')[]>(() => {\n const total = totalPages.value\n const current = props.settings.page\n\n if (total <= SLOT_COUNT) {\n const pages: number[] = []\n for (let i = 1; i <= total; i++) pages.push(i)\n return pages\n }\n\n const inner = SLOT_COUNT - 2\n let winStart = current - 1\n let winEnd = current + 1\n if (winStart < 2) {\n winEnd = Math.min(total - 1, winEnd + (2 - winStart))\n winStart = 2\n }\n if (winEnd > total - 1) {\n winStart = Math.max(2, winStart - (winEnd - (total - 1)))\n winEnd = total - 1\n }\n\n while (winEnd - winStart + 1 < inner) {\n const canExtendLeft = winStart > 2\n const canExtendRight = winEnd < total - 1\n if (!canExtendLeft && !canExtendRight) break\n\n const roomLeft = winStart - 2\n const roomRight = total - 1 - winEnd\n\n const ellipsisIfExtendLeft =\n ((canExtendLeft ? winStart - 1 : 0) > 2 ? 1 : 0) + (winEnd < total - 1 ? 1 : 0)\n const ellipsisIfExtendRight =\n (winStart > 2 ? 1 : 0) + ((canExtendRight ? winEnd + 1 : 0) < total - 1 ? 1 : 0)\n\n const newSize = winEnd - winStart + 2\n\n let extended = false\n if (\n canExtendLeft &&\n (roomLeft >= roomRight || !canExtendRight) &&\n newSize + ellipsisIfExtendLeft <= inner\n ) {\n winStart--\n extended = true\n } else if (canExtendRight && newSize + ellipsisIfExtendRight <= inner) {\n winEnd++\n extended = true\n }\n if (!extended) break\n }\n const showLeftEllipsis = winStart > 2\n const showRightEllipsis = winEnd < total - 1\n\n const pages: (number | '...')[] = []\n pages.push(1)\n if (showLeftEllipsis) pages.push('...')\n for (let p = winStart; p <= winEnd; p++) pages.push(p)\n if (showRightEllipsis) pages.push('...')\n pages.push(total)\n\n return pages\n})\n\nconst SLOT_COUNT = 7\n\nfunction shouldHideOnSmall(page: number) {\n const current = props.settings.page\n const total = totalPages.value\n\n const isEdge = page === 1 || page === total\n const isCurrent = page === current\n\n const isMiddleRange = current > 3 && current < total - 2\n\n return isMiddleRange && !isEdge && !isCurrent\n}\n\nfunction goToPage(page: number) {\n if (page < 1 || page > totalPages.value || page === props.settings.page) return\n writeUrlOrRemove('page', page, { handleUrl: props.handleUrl, default: 1 })\n writeUrlOrRemove('pageSize', props.settings.pageSize, { handleUrl: props.handleUrl })\n emit('update:pagination', { page, pageSize: props.settings.pageSize })\n}\n\nfunction changePageSize(event: Event) {\n const size = Number((event.target as HTMLSelectElement).value)\n savePageSize(size)\n writeUrlOrRemove('pageSize', size, { handleUrl: props.handleUrl })\n writeUrlOrRemove('page', 1, { handleUrl: props.handleUrl, default: 1 })\n emit('update:pagination', { page: 1, pageSize: size })\n}\n\nonMounted(() => {\n if (!props.handleUrl) return\n\n const urlSize = readUrlNumber('pageSize')\n const urlPage = readUrlNumber('page')\n if (urlSize == null || urlPage == null) return\n if (urlSize === props.settings.pageSize && urlPage === props.settings.page) return\n emit('update:pagination', { page: urlPage, pageSize: urlSize })\n})\n</script>\n\n<template>\n <div class=\"ac-component c-paginator-wrapper\" :class=\"[`is-font-${fontSize}`]\">\n <div class=\"c-paginator\">\n <div class=\"c-paginator__info\">\n <span class=\"c-paginator__range\">{{ rangeStart }}–{{ rangeEnd }}</span>\n <span class=\"c-paginator__total\"> / {{ settings.total }}</span>\n </div>\n\n <nav class=\"c-paginator__nav\" aria-label=\"Pagination\">\n <Button\n icon=\"fa-solid fa-chevron-left\"\n rel=\"prev\"\n :disabled=\"settings.page <= 1\"\n :callback=\"() => goToPage(settings.page - 1)\"\n />\n\n <template v-for=\"(p, i) in visiblePages\" :key=\"i\">\n <span v-if=\"p === '...'\" class=\"c-paginator__ellipsis\">…</span>\n <button\n v-else\n type=\"button\"\n class=\"c-paginator__page\"\n :class=\"{\n 'is-active': p === settings.page,\n 'is-hidden-sm': shouldHideOnSmall(p),\n }\"\n @click=\"goToPage(p)\"\n >\n {{ p }}\n </button>\n </template>\n\n <Button\n icon=\"fa-solid fa-chevron-right\"\n rel=\"next\"\n :disabled=\"settings.page >= totalPages\"\n :callback=\"() => goToPage(settings.page + 1)\"\n />\n </nav>\n\n <div class=\"c-paginator__size\">\n <select\n class=\"c-paginator__select\"\n id=\"page-size-select\"\n :value=\"settings.pageSize\"\n @change=\"changePageSize\"\n >\n <option v-for=\"s in SIZE_OPTIONS\" :key=\"s\" :value=\"s\">{{ s }} elem / oldal</option>\n </select>\n </div>\n </div>\n </div>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/data-table/data-paginator.scss\"></style>\n"],"mappings":""}
|