admins-components 9.0.86 → 9.0.88
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 +13 -7
- 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 +85 -84
- 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 +4 -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.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":""}
|
|
@@ -51,7 +51,8 @@ var I = /*@__PURE__*/ b({
|
|
|
51
51
|
useFilters: { type: Boolean },
|
|
52
52
|
searchConfig: {},
|
|
53
53
|
filterConfig: {},
|
|
54
|
-
fillHeight: { type: Boolean }
|
|
54
|
+
fillHeight: { type: Boolean },
|
|
55
|
+
defaultSort: {}
|
|
55
56
|
}, {
|
|
56
57
|
...P,
|
|
57
58
|
searchConfig: void 0,
|
|
@@ -73,12 +74,14 @@ var I = /*@__PURE__*/ b({
|
|
|
73
74
|
}
|
|
74
75
|
let L = p(() => ({
|
|
75
76
|
...F.searchConfig,
|
|
76
|
-
handleUrl: I("searchConfig")
|
|
77
|
+
handleUrl: I("searchConfig"),
|
|
78
|
+
fontSize: H.value?.fontSize ?? F.searchConfig?.fontSize ?? "normal"
|
|
77
79
|
})), R = p(() => ({
|
|
78
80
|
...F.filterConfig,
|
|
79
81
|
handleUrl: I("filterConfig"),
|
|
80
|
-
lazy: H.value == null ? F.filterConfig?.lazy ?? !0 : !H.value.filtersEager
|
|
81
|
-
|
|
82
|
+
lazy: H.value == null ? F.filterConfig?.lazy ?? !0 : !H.value.filtersEager,
|
|
83
|
+
ignoreSavedDefault: !!F.config.selectableAttr
|
|
84
|
+
})), z = f, B = E(!1), V = E(!1), H = E(null), U = E(!1), W = E(null), G = E(!1), K = E(F.filterConfig?.items ? ee(F.filterConfig.items, F.id, !1, !!F.config.selectableAttr) : {}), q = null;
|
|
82
85
|
ie(() => {
|
|
83
86
|
q = new ResizeObserver((e) => {
|
|
84
87
|
U.value = (e[0]?.contentRect.width ?? 0) < F.layoutBreakpoint;
|
|
@@ -123,13 +126,13 @@ var I = /*@__PURE__*/ b({
|
|
|
123
126
|
}, X = p(() => F.config.columns.filter((e) => e.sort).map((e) => ({
|
|
124
127
|
value: e.property,
|
|
125
128
|
label: e.label
|
|
126
|
-
}))), Z = p(() => !!F.config.selectableAttr), Q = E(F.handleUrl ? o() : null), $ = (e) => {
|
|
129
|
+
}))), Z = p(() => !!F.config.selectableAttr), Q = E((F.handleUrl ? o() : null) ?? F.defaultSort ?? null), $ = (e) => {
|
|
127
130
|
Q.value = e, z("sort-change", e);
|
|
128
131
|
};
|
|
129
132
|
return (o, c) => (T(), g("div", {
|
|
130
133
|
ref_key: "root",
|
|
131
134
|
ref: W,
|
|
132
|
-
class: ne(["ac-component c-data-list", { "c-data-list--fill-height": i.fillHeight }])
|
|
135
|
+
class: ne(["ac-component c-data-list", [{ "c-data-list--fill-height": i.fillHeight }, `is-font-${H.value?.fontSize ?? "normal"}`]])
|
|
133
136
|
}, [
|
|
134
137
|
_("div", j, [
|
|
135
138
|
i.useSearch ? (T(), m(te, C({ key: 0 }, L.value, { onSearchChange: ue }), null, 16)) : h("", !0),
|
|
@@ -139,6 +142,7 @@ var I = /*@__PURE__*/ b({
|
|
|
139
142
|
icon: "fa-solid fa-filter",
|
|
140
143
|
onClick: c[0] ||= (e) => G.value = !0,
|
|
141
144
|
style: { "flex-shrink": "0" },
|
|
145
|
+
class: "filter-btn",
|
|
142
146
|
type: Y.value > 0 ? "primary" : "normal",
|
|
143
147
|
indicator: Y.value > 0 ? Y.value : void 0
|
|
144
148
|
}, null, 8, ["type", "indicator"])) : h("", !0),
|
|
@@ -156,11 +160,13 @@ var I = /*@__PURE__*/ b({
|
|
|
156
160
|
"onUpdate:modelValue": c[2] ||= (e) => Q.value = e,
|
|
157
161
|
options: X.value,
|
|
158
162
|
"handle-url": i.handleUrl,
|
|
163
|
+
"font-size": H.value?.fontSize ?? "normal",
|
|
159
164
|
onSortChange: $
|
|
160
165
|
}, null, 8, [
|
|
161
166
|
"modelValue",
|
|
162
167
|
"options",
|
|
163
|
-
"handle-url"
|
|
168
|
+
"handle-url",
|
|
169
|
+
"font-size"
|
|
164
170
|
])) : h("", !0),
|
|
165
171
|
Z.value ? h("", !0) : (T(), m(e, {
|
|
166
172
|
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}\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,\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}\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)\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":"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"}
|
|
@@ -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}\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,\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}\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)\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":"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"}
|
|
@@ -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":""}
|