admins-components 9.0.51 → 9.0.53
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-components60.js +1 -1
- package/dist/admins-components60.js.map +1 -1
- package/dist/admins-components80.js +41 -47
- package/dist/admins-components80.js.map +1 -1
- package/dist/admins-components82.js.map +1 -1
- package/dist/src/components/data-table/DataSort.vue.d.ts +0 -1
- package/dist/src/styles/components/data-table/data-table.scss_vue_type_style_index_0_src_true_lang.css +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"admins-components60.js","names":[],"sources":["../src/utils/dataListConverters.ts"],"sourcesContent":["import { castToDate, formatDate } from '@/utils/date'\n\ntype Converter = (value: unknown, item?: unknown) => unknown\n
|
|
1
|
+
{"version":3,"file":"admins-components60.js","names":[],"sources":["../src/utils/dataListConverters.ts"],"sourcesContent":["import { castToDate, formatDate } from '@/utils/date'\n\ntype Converter = (value: unknown, item?: unknown) => unknown\n\nexport function utcToLocalString(time = false, format?: string): Converter {\n return (value) => {\n const d = castToDate(value)\n if (!d) return ''\n if (format) return formatDate(d, format)\n if (time) return formatDate(d, 'YYYY-MM-DD HH:mm')\n return formatDate(d, 'YYYY-MM-DD');\n }\n}\nexport function shortUuid(length = 3): Converter {\n return (value) => {\n if (!value) return ''\n const s = typeof value === 'string' ? value : String(value)\n return `${s.slice(0, length)}...${s.slice(-length)}`\n }\n}\n\nexport function localToLocalString(format = 'YYYY-MM-DD'): Converter {\n return (value) => {\n const d = castToDate(value)\n return d ? formatDate(d, format) : ''\n }\n}\n\nexport function textEllipse(max = 60, suffix = '…'): Converter {\n return (value) => {\n const s = typeof value === 'string' ? value : value == null ? '' : String(value)\n if (s.length <= max) return s\n return s.slice(0, max).trimEnd() + suffix\n }\n}\n\nexport function booleanToString(trueLabel = 'Igen', falseLabel = 'Nem', fallback = ''): Converter {\n return (value) => {\n if (value === true) return trueLabel\n if (value === false) return falseLabel\n return fallback\n }\n}\n\nexport function enumMap<T = unknown>(map: Record<string, T>, fallback?: T): Converter {\n return (value) => {\n if (value == null) return fallback ?? ''\n const key = String(value)\n return key in map ? map[key] : (fallback ?? value)\n }\n}\n\nexport function formatNumber(decimals = 0, locale = 'hu-HU'): Converter {\n return (value) => {\n const n = typeof value === 'number' ? value : Number(value)\n if (!Number.isFinite(n)) return value\n return n.toLocaleString(locale, {\n minimumFractionDigits: decimals,\n maximumFractionDigits: decimals,\n })\n }\n}\n\nexport function formatCurrency(currencyCode = 'HUF', locale = 'hu-HU', decimals = 0): Converter {\n return (value) => {\n const n = typeof value === 'number' ? value : Number(value)\n if (!Number.isFinite(n)) return value\n return n.toLocaleString(locale, {\n style: 'currency',\n currency: currencyCode,\n minimumFractionDigits: decimals,\n maximumFractionDigits: decimals,\n })\n }\n}\n\nexport function listToString(separator = ', '): Converter {\n return (value) => {\n if (Array.isArray(value)) return value.map(String).join(separator)\n if (value == null) return ''\n return String(value)\n }\n}\n\nexport const identity: Converter = (value) => value\n\nexport const dataListConverters = {\n utcToLocalString,\n localToLocalString,\n shortUuid,\n textEllipse,\n booleanToString,\n enumMap,\n formatNumber,\n formatCurrency,\n listToString,\n identity,\n} as const\n"],"mappings":";;AAIA,SAAgB,EAAiB,IAAO,IAAO,GAA4B;CACzE,QAAQ,MAAU;EAChB,IAAM,IAAI,EAAW,CAAK;EAI1B,OAHK,IACD,IAAe,EAAW,GAAG,CAAM,IACnC,IAAa,EAAW,GAAG,kBAAkB,IAC1C,EAAW,GAAG,YAAY,IAHlB;CAIjB;AACF;AACA,SAAgB,EAAU,IAAS,GAAc;CAC/C,QAAQ,MAAU;EAChB,IAAI,CAAC,GAAO,OAAO;EACnB,IAAM,IAAI,OAAO,KAAU,WAAW,IAAQ,OAAO,CAAK;EAC1D,OAAO,GAAG,EAAE,MAAM,GAAG,CAAM,EAAE,KAAK,EAAE,MAAM,CAAC,CAAM;CACnD;AACF;AAEA,SAAgB,EAAmB,IAAS,cAAyB;CACnE,QAAQ,MAAU;EAChB,IAAM,IAAI,EAAW,CAAK;EAC1B,OAAO,IAAI,EAAW,GAAG,CAAM,IAAI;CACrC;AACF;AAEA,SAAgB,EAAY,IAAM,IAAI,IAAS,KAAgB;CAC7D,QAAQ,MAAU;EAChB,IAAM,IAAI,OAAO,KAAU,WAAW,IAAQ,KAAS,OAAO,KAAK,OAAO,CAAK;EAE/E,OADI,EAAE,UAAU,IAAY,IACrB,EAAE,MAAM,GAAG,CAAG,EAAE,QAAQ,IAAI;CACrC;AACF;AAEA,SAAgB,EAAgB,IAAY,QAAQ,IAAa,OAAO,IAAW,IAAe;CAChG,QAAQ,MACF,MAAU,KAAa,IACvB,MAAU,KAAc,IACrB;AAEX;AAEA,SAAgB,EAAqB,GAAwB,GAAyB;CACpF,QAAQ,MAAU;EAChB,IAAI,KAAS,MAAM,OAAO,KAAY;EACtC,IAAM,IAAM,OAAO,CAAK;EACxB,OAAO,KAAO,IAAM,EAAI,KAAQ,KAAY;CAC9C;AACF;AAEA,SAAgB,EAAa,IAAW,GAAG,IAAS,SAAoB;CACtE,QAAQ,MAAU;EAChB,IAAM,IAAI,OAAO,KAAU,WAAW,IAAQ,OAAO,CAAK;EAE1D,OADK,OAAO,SAAS,CAAC,IACf,EAAE,eAAe,GAAQ;GAC9B,uBAAuB;GACvB,uBAAuB;EACzB,CAAC,IAJ+B;CAKlC;AACF;AAEA,SAAgB,EAAe,IAAe,OAAO,IAAS,SAAS,IAAW,GAAc;CAC9F,QAAQ,MAAU;EAChB,IAAM,IAAI,OAAO,KAAU,WAAW,IAAQ,OAAO,CAAK;EAE1D,OADK,OAAO,SAAS,CAAC,IACf,EAAE,eAAe,GAAQ;GAC9B,OAAO;GACP,UAAU;GACV,uBAAuB;GACvB,uBAAuB;EACzB,CAAC,IAN+B;CAOlC;AACF;AAEA,SAAgB,EAAa,IAAY,MAAiB;CACxD,QAAQ,MACF,MAAM,QAAQ,CAAK,IAAU,EAAM,IAAI,MAAM,EAAE,KAAK,CAAS,IAC7D,KAAS,OAAa,KACnB,OAAO,CAAK;AAEvB;AAEA,IAAa,KAAuB,MAAU,GAEjC,IAAqB;CAChC;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF"}
|
|
@@ -17,17 +17,11 @@ function A() {
|
|
|
17
17
|
direction: n
|
|
18
18
|
} : null;
|
|
19
19
|
}
|
|
20
|
-
var j =
|
|
21
|
-
value: "foo",
|
|
22
|
-
label: "foo"
|
|
23
|
-
}, {
|
|
24
|
-
value: "foo2",
|
|
25
|
-
label: "foo2"
|
|
26
|
-
}], M = /* @__PURE__ */ d({
|
|
20
|
+
var j = /* @__PURE__ */ d({
|
|
27
21
|
__name: "DataSort",
|
|
28
22
|
props: {
|
|
29
23
|
modelValue: {},
|
|
30
|
-
options: {
|
|
24
|
+
options: {},
|
|
31
25
|
placeholder: { default: "Rendezés..." },
|
|
32
26
|
handleUrl: {
|
|
33
27
|
type: Boolean,
|
|
@@ -39,25 +33,25 @@ var j = [{
|
|
|
39
33
|
}
|
|
40
34
|
},
|
|
41
35
|
emits: ["update:modelValue", "sort-change"],
|
|
42
|
-
setup(d, { emit:
|
|
43
|
-
let
|
|
36
|
+
setup(d, { emit: j }) {
|
|
37
|
+
let M = d, N = j, P = h(null), F = h(null), { isOpen: I, dropdownStyle: L } = t(P, F, {
|
|
44
38
|
extraStyle: (e) => ({ minWidth: `${Math.max(e.width, 240)}px` }),
|
|
45
39
|
closeOnScroll: !0
|
|
46
|
-
}),
|
|
47
|
-
get: () =>
|
|
40
|
+
}), R = a({
|
|
41
|
+
get: () => M.modelValue?.key ?? null,
|
|
48
42
|
set: (e) => {
|
|
49
|
-
Array.isArray(e) ||
|
|
43
|
+
Array.isArray(e) || V(e, M.modelValue?.direction ?? "asc");
|
|
50
44
|
}
|
|
51
|
-
}),
|
|
52
|
-
get: () =>
|
|
53
|
-
set: (e) =>
|
|
54
|
-
}),
|
|
55
|
-
function
|
|
45
|
+
}), z = a({
|
|
46
|
+
get: () => M.modelValue?.direction ?? "asc",
|
|
47
|
+
set: (e) => V(M.modelValue?.key ?? null, e)
|
|
48
|
+
}), B = a(() => M.modelValue ? `${M.options.find((e) => e.value === M.modelValue.key)?.label ?? M.modelValue.key} (${M.modelValue.direction === "asc" ? "növekvő" : "csökkenő"})` : M.placeholder);
|
|
49
|
+
function V(e, t) {
|
|
56
50
|
if (e == null) {
|
|
57
|
-
|
|
51
|
+
M.handleUrl && (r("sortBy", null, { handleUrl: !0 }), r("sortDir", null, { handleUrl: !0 })), N("update:modelValue", null), N("sort-change", null);
|
|
58
52
|
return;
|
|
59
53
|
}
|
|
60
|
-
|
|
54
|
+
M.handleUrl && (r("sortBy", e, { handleUrl: !0 }), r("sortDir", t, {
|
|
61
55
|
handleUrl: !0,
|
|
62
56
|
default: "asc"
|
|
63
57
|
}));
|
|
@@ -65,79 +59,79 @@ var j = [{
|
|
|
65
59
|
key: e,
|
|
66
60
|
direction: t
|
|
67
61
|
};
|
|
68
|
-
|
|
62
|
+
N("update:modelValue", n), N("sort-change", n);
|
|
69
63
|
}
|
|
70
|
-
function
|
|
71
|
-
|
|
64
|
+
function H() {
|
|
65
|
+
V(null, "asc"), I.value = !1;
|
|
72
66
|
}
|
|
73
|
-
return v(
|
|
74
|
-
if (!e || !
|
|
67
|
+
return v(I, (e) => {
|
|
68
|
+
if (!e || !M.handleUrl || M.modelValue) return;
|
|
75
69
|
let t = A();
|
|
76
|
-
t &&
|
|
70
|
+
t && V(t.key, t.direction);
|
|
77
71
|
}, { immediate: !0 }), (t, r) => (m(), c("div", b, [l("div", {
|
|
78
72
|
ref_key: "wrapperRef",
|
|
79
|
-
ref:
|
|
73
|
+
ref: P,
|
|
80
74
|
class: "ds-sort-wrapper"
|
|
81
75
|
}, [l("button", {
|
|
82
76
|
type: "button",
|
|
83
77
|
class: f(["c-btn ds-sort-trigger lh-1", [
|
|
84
78
|
d.modelValue && "is-active",
|
|
85
79
|
d.disabled && "is-disabled",
|
|
86
|
-
_(
|
|
80
|
+
_(I) && "is-open"
|
|
87
81
|
]]),
|
|
88
82
|
disabled: d.disabled,
|
|
89
|
-
"aria-label": `Rendezés: ${
|
|
90
|
-
onClick: r[0] ||= (e) =>
|
|
83
|
+
"aria-label": `Rendezés: ${B.value}`,
|
|
84
|
+
onClick: r[0] ||= (e) => I.value = !_(I)
|
|
91
85
|
}, [
|
|
92
86
|
l("i", { class: f(["fa-solid fa-fw", !d.modelValue || d.modelValue.direction === "asc" ? "fa-arrow-up-wide-short" : "fa-arrow-down-wide-short"]) }, null, 2),
|
|
93
|
-
l("span", S, g(
|
|
87
|
+
l("span", S, g(B.value), 1),
|
|
94
88
|
d.modelValue ? (m(), c("button", {
|
|
95
89
|
key: 0,
|
|
96
90
|
type: "button",
|
|
97
91
|
class: "c-icon-btn c-icon-btn--clear ds-sort-clear",
|
|
98
92
|
"aria-label": "Rendezés törlése",
|
|
99
93
|
title: "Rendezés törlése",
|
|
100
|
-
onClick: y(
|
|
94
|
+
onClick: y(H, ["stop"])
|
|
101
95
|
}, [...r[5] ||= [l("i", { class: "fa-solid fa-fw fa-xmark" }, null, -1)]])) : s("", !0),
|
|
102
|
-
l("span", { class: f(["c-icon-btn c-icon-btn--chevron", { "c-icon-btn--chevron-open": _(
|
|
103
|
-
], 10, x), (m(), o(i, { to: "body" }, [l("div", C, [_(
|
|
96
|
+
l("span", { class: f(["c-icon-btn c-icon-btn--chevron", { "c-icon-btn--chevron-open": _(I) }]) }, [...r[6] ||= [l("i", { class: "fa-solid fa-fw fa-chevron-down" }, null, -1)]], 2)
|
|
97
|
+
], 10, x), (m(), o(i, { to: "body" }, [l("div", C, [_(I) ? (m(), c("div", {
|
|
104
98
|
key: 0,
|
|
105
99
|
ref_key: "dropdownRef",
|
|
106
|
-
ref:
|
|
100
|
+
ref: F,
|
|
107
101
|
class: "ds-sort-panel",
|
|
108
|
-
style: p(_(
|
|
102
|
+
style: p(_(L))
|
|
109
103
|
}, [
|
|
110
104
|
l("div", w, [r[7] ||= l("label", { class: "ds-sort-panel__label" }, "Oszlop", -1), u(n, {
|
|
111
|
-
"model-value":
|
|
112
|
-
options:
|
|
105
|
+
"model-value": R.value,
|
|
106
|
+
options: d.options,
|
|
113
107
|
config: {
|
|
114
108
|
clearable: !1,
|
|
115
109
|
placeholder: "Válassz oszlopot...",
|
|
116
110
|
filterable: !1
|
|
117
111
|
},
|
|
118
|
-
"onUpdate:modelValue": r[1] ||= (e) =>
|
|
112
|
+
"onUpdate:modelValue": r[1] ||= (e) => R.value = e
|
|
119
113
|
}, null, 8, ["model-value", "options"])]),
|
|
120
114
|
l("div", T, [r[10] ||= l("span", { class: "ds-sort-panel__label" }, "Irány", -1), l("div", E, [l("button", {
|
|
121
115
|
type: "button",
|
|
122
|
-
class: f(["ds-sort-direction__btn", { "is-active":
|
|
123
|
-
"aria-pressed":
|
|
116
|
+
class: f(["ds-sort-direction__btn", { "is-active": z.value === "asc" }]),
|
|
117
|
+
"aria-pressed": z.value === "asc",
|
|
124
118
|
"aria-label": "Növekvő",
|
|
125
|
-
onClick: r[2] ||= (e) =>
|
|
119
|
+
onClick: r[2] ||= (e) => z.value = "asc"
|
|
126
120
|
}, [...r[8] ||= [l("i", { class: "fa-solid fa-fw fa-arrow-up-wide-short" }, null, -1), l("span", null, "Növekvő", -1)]], 10, D), l("button", {
|
|
127
121
|
type: "button",
|
|
128
|
-
class: f(["ds-sort-direction__btn dir-desc", { "is-active":
|
|
129
|
-
"aria-pressed":
|
|
122
|
+
class: f(["ds-sort-direction__btn dir-desc", { "is-active": z.value === "desc" }]),
|
|
123
|
+
"aria-pressed": z.value === "desc",
|
|
130
124
|
"aria-label": "Csökkenő",
|
|
131
|
-
onClick: r[3] ||= (e) =>
|
|
125
|
+
onClick: r[3] ||= (e) => z.value = "desc"
|
|
132
126
|
}, [...r[9] ||= [l("i", { class: "fa-solid fa-fw fa-arrow-down-wide-short" }, null, -1), l("span", null, "Csökkenő", -1)]], 10, O)])]),
|
|
133
127
|
l("div", k, [u(e, {
|
|
134
128
|
label: "Rendben",
|
|
135
129
|
outline: "",
|
|
136
130
|
size: "small",
|
|
137
|
-
onClick: r[4] ||= (e) =>
|
|
131
|
+
onClick: r[4] ||= (e) => I.value = !1
|
|
138
132
|
})])
|
|
139
133
|
], 4)) : s("", !0)])]))], 512)]));
|
|
140
134
|
}
|
|
141
135
|
});
|
|
142
136
|
//#endregion
|
|
143
|
-
export {
|
|
137
|
+
export { j as default, A as getDefaultSort };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"admins-components80.js","names":[],"sources":["../src/components/data-table/DataSort.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type SortDirection = 'asc' | 'desc'\n\nexport interface DataSortOption {\n value: string\n label: string\n icon?: string\n}\n\nexport interface DataSortProps {\n modelValue: { key: string; direction: SortDirection } | null\n options: DataSortOption[]\n placeholder?: string\n handleUrl?: boolean\n disabled?: boolean\n}\n\n/**\n * Resolve the initial sort state from the URL.\n * URL is the only source — there is no localStorage fallback for sort.\n * Returns `null` if no valid `sortBy` + `sortDir` pair is present in the URL.\n */\nexport function getDefaultSort(): { key: string; direction: SortDirection } | null {\n if (typeof window === 'undefined') return null\n const params = new URLSearchParams(window.location.search)\n const key = params.get('sortBy')\n const dir = params.get('sortDir')\n if (key && (dir === 'asc' || dir === 'desc')) {\n return { key, direction: dir }\n }\n return null\n}\n\nconst dummyItems: DataSortOption[] = [\n { value: 'foo', label: 'foo' },\n { value: 'foo2', label: 'foo2' },\n]\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref, watch } from 'vue'\nimport DropdownSelect from '@/components/DropdownSelect.vue'\nimport { useDropdownAnchor } from '@/composables/useDropdownAnchor'\nimport { writeUrlOrRemove } from '@/utils/url'\nimport Button from '../Button.vue'\n\nconst props = withDefaults(defineProps<DataSortProps>(), {\n placeholder: 'Rendezés...',\n handleUrl: false,\n disabled: false,\n options: () => dummyItems,\n})\n\nconst emit = defineEmits<{\n 'update:modelValue': [sort: { key: string; direction: SortDirection } | null]\n 'sort-change': [sort: { key: string; direction: SortDirection } | null]\n}>()\n\nconst sortOptions = computed(() => (props.options.length ? props.options : dummyItems))\n\nconst wrapperRef = ref<HTMLElement | null>(null)\nconst dropdownRef = ref<HTMLElement | null>(null)\nconst { isOpen, dropdownStyle } = useDropdownAnchor(wrapperRef, dropdownRef, {\n extraStyle: (rect) => ({ minWidth: `${Math.max(rect.width, 240)}px` }),\n closeOnScroll: true,\n})\n\nconst sortBy = computed<string | string[] | null>({\n get: () => props.modelValue?.key ?? null,\n set: (v) => {\n if (Array.isArray(v)) return\n emitChange(v, props.modelValue?.direction ?? 'asc')\n },\n})\n\nconst direction = computed<SortDirection>({\n get: () => props.modelValue?.direction ?? 'asc',\n set: (d) => emitChange(props.modelValue?.key ?? null, d),\n})\n\nconst activeLabel = computed(() => {\n if (!props.modelValue) return props.placeholder\n const opt = sortOptions.value.find((o) => o.value === props.modelValue!.key)\n const label = opt?.label ?? props.modelValue.key\n return `${label} (${props.modelValue.direction === 'asc' ? 'növekvő' : 'csökkenő'})`\n})\n\nfunction emitChange(key: string | null, dir: SortDirection) {\n if (key == null) {\n if (props.handleUrl) {\n writeUrlOrRemove('sortBy', null, { handleUrl: true })\n writeUrlOrRemove('sortDir', null, { handleUrl: true })\n }\n emit('update:modelValue', null)\n emit('sort-change', null)\n return\n }\n if (props.handleUrl) {\n writeUrlOrRemove('sortBy', key, { handleUrl: true })\n writeUrlOrRemove('sortDir', dir, { handleUrl: true, default: 'asc' })\n }\n const next = { key, direction: dir }\n emit('update:modelValue', next)\n emit('sort-change', next)\n}\n\nfunction clear() {\n emitChange(null, 'asc')\n isOpen.value = false\n}\n\n// Read initial state from URL on mount when handleUrl is true and modelValue is empty.\nwatch(\n isOpen,\n (open) => {\n if (!open || !props.handleUrl || props.modelValue) return\n const sort = getDefaultSort()\n if (sort) emitChange(sort.key, sort.direction)\n },\n { immediate: true },\n)\n</script>\n\n<template>\n <div class=\"ac-component\">\n <div ref=\"wrapperRef\" class=\"ds-sort-wrapper\">\n <button\n type=\"button\"\n class=\"c-btn ds-sort-trigger lh-1\"\n :class=\"[modelValue && 'is-active', disabled && 'is-disabled', isOpen && 'is-open']\"\n :disabled=\"disabled\"\n :aria-label=\"`Rendezés: ${activeLabel}`\"\n @click=\"isOpen = !isOpen\"\n >\n <i\n class=\"fa-solid fa-fw\"\n :class=\"\n !modelValue || modelValue.direction === 'asc'\n ? 'fa-arrow-up-wide-short'\n : 'fa-arrow-down-wide-short'\n \"\n ></i>\n <span class=\"ds-sort-label c-truncate\">{{ activeLabel }}</span>\n <button\n v-if=\"modelValue\"\n type=\"button\"\n class=\"c-icon-btn c-icon-btn--clear ds-sort-clear\"\n aria-label=\"Rendezés törlése\"\n title=\"Rendezés törlése\"\n @click.stop=\"clear\"\n >\n <i class=\"fa-solid fa-fw fa-xmark\"></i>\n </button>\n <span\n class=\"c-icon-btn c-icon-btn--chevron\"\n :class=\"{ 'c-icon-btn--chevron-open': isOpen }\"\n >\n <i class=\"fa-solid fa-fw fa-chevron-down\"></i>\n </span>\n </button>\n\n <Teleport to=\"body\">\n <div class=\"ac-component\">\n <div v-if=\"isOpen\" ref=\"dropdownRef\" class=\"ds-sort-panel\" :style=\"dropdownStyle\">\n\n <div class=\"ds-sort-panel__row\">\n <label class=\"ds-sort-panel__label\">Oszlop</label>\n <DropdownSelect\n :model-value=\"sortBy\"\n :options=\"sortOptions\"\n :config=\"{\n clearable: false,\n placeholder: 'Válassz oszlopot...',\n filterable: false,\n }\"\n @update:model-value=\"(v) => (sortBy = v)\"\n />\n </div>\n\n <div class=\"ds-sort-panel__row\">\n <span class=\"ds-sort-panel__label\">Irány</span>\n <div class=\"ds-sort-direction\" role=\"group\" aria-label=\"Rendezés iránya\">\n <button\n type=\"button\"\n class=\"ds-sort-direction__btn\"\n :class=\"{ 'is-active': direction === 'asc' }\"\n :aria-pressed=\"direction === 'asc'\"\n aria-label=\"Növekvő\"\n @click=\"direction = 'asc'\"\n >\n <i class=\"fa-solid fa-fw fa-arrow-up-wide-short\"></i>\n <span>Növekvő</span>\n </button>\n <button\n type=\"button\"\n class=\"ds-sort-direction__btn dir-desc\"\n :class=\"{ 'is-active': direction === 'desc' }\"\n :aria-pressed=\"direction === 'desc'\"\n aria-label=\"Csökkenő\"\n @click=\"direction = 'desc'\"\n >\n <i class=\"fa-solid fa-fw fa-arrow-down-wide-short\"></i>\n <span>Csökkenő</span>\n </button>\n </div>\n </div>\n\n <div class=\"ds-sort-panel__footer\">\n <Button label=\"Rendben\" outline size=\"small\" @click=\"isOpen = false\" />\n </div>\n </div>\n </div>\n </Teleport>\n </div>\n </div>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/data-table/data-sort.scss\"></style>\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"admins-components80.js","names":[],"sources":["../src/components/data-table/DataSort.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type SortDirection = 'asc' | 'desc'\n\nexport interface DataSortOption {\n value: string\n label: string\n icon?: string\n}\n\nexport interface DataSortProps {\n modelValue: { key: string; direction: SortDirection } | null\n options: DataSortOption[]\n placeholder?: string\n handleUrl?: boolean\n disabled?: boolean\n}\n\n/**\n * Resolve the initial sort state from the URL.\n * URL is the only source — there is no localStorage fallback for sort.\n * Returns `null` if no valid `sortBy` + `sortDir` pair is present in the URL.\n */\nexport function getDefaultSort(): { key: string; direction: SortDirection } | null {\n if (typeof window === 'undefined') return null\n const params = new URLSearchParams(window.location.search)\n const key = params.get('sortBy')\n const dir = params.get('sortDir')\n if (key && (dir === 'asc' || dir === 'desc')) {\n return { key, direction: dir }\n }\n return null\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref, watch } from 'vue'\nimport DropdownSelect from '@/components/DropdownSelect.vue'\nimport { useDropdownAnchor } from '@/composables/useDropdownAnchor'\nimport { writeUrlOrRemove } from '@/utils/url'\nimport Button from '../Button.vue'\n\nconst props = withDefaults(defineProps<DataSortProps>(), {\n placeholder: 'Rendezés...',\n handleUrl: false,\n disabled: false\n})\n\nconst emit = defineEmits<{\n 'update:modelValue': [sort: { key: string; direction: SortDirection } | null]\n 'sort-change': [sort: { key: string; direction: SortDirection } | null]\n}>()\n\nconst wrapperRef = ref<HTMLElement | null>(null)\nconst dropdownRef = ref<HTMLElement | null>(null)\nconst { isOpen, dropdownStyle } = useDropdownAnchor(wrapperRef, dropdownRef, {\n extraStyle: (rect) => ({ minWidth: `${Math.max(rect.width, 240)}px` }),\n closeOnScroll: true,\n})\n\nconst sortBy = computed<string | string[] | null>({\n get: () => props.modelValue?.key ?? null,\n set: (v) => {\n if (Array.isArray(v)) return\n emitChange(v, props.modelValue?.direction ?? 'asc')\n },\n})\n\nconst direction = computed<SortDirection>({\n get: () => props.modelValue?.direction ?? 'asc',\n set: (d) => emitChange(props.modelValue?.key ?? null, d),\n})\n\nconst activeLabel = computed(() => {\n if (!props.modelValue) return props.placeholder\n const opt = props.options.find((o) => o.value === props.modelValue!.key)\n const label = opt?.label ?? props.modelValue.key\n return `${label} (${props.modelValue.direction === 'asc' ? 'növekvő' : 'csökkenő'})`\n})\n\nfunction emitChange(key: string | null, dir: SortDirection) {\n if (key == null) {\n if (props.handleUrl) {\n writeUrlOrRemove('sortBy', null, { handleUrl: true })\n writeUrlOrRemove('sortDir', null, { handleUrl: true })\n }\n emit('update:modelValue', null)\n emit('sort-change', null)\n return\n }\n if (props.handleUrl) {\n writeUrlOrRemove('sortBy', key, { handleUrl: true })\n writeUrlOrRemove('sortDir', dir, { handleUrl: true, default: 'asc' })\n }\n const next = { key, direction: dir }\n emit('update:modelValue', next)\n emit('sort-change', next)\n}\n\nfunction clear() {\n emitChange(null, 'asc')\n isOpen.value = false\n}\n\n// Read initial state from URL on mount when handleUrl is true and modelValue is empty.\nwatch(\n isOpen,\n (open) => {\n if (!open || !props.handleUrl || props.modelValue) return\n const sort = getDefaultSort()\n if (sort) emitChange(sort.key, sort.direction)\n },\n { immediate: true },\n)\n</script>\n\n<template>\n <div class=\"ac-component\">\n <div ref=\"wrapperRef\" class=\"ds-sort-wrapper\">\n <button\n type=\"button\"\n class=\"c-btn ds-sort-trigger lh-1\"\n :class=\"[modelValue && 'is-active', disabled && 'is-disabled', isOpen && 'is-open']\"\n :disabled=\"disabled\"\n :aria-label=\"`Rendezés: ${activeLabel}`\"\n @click=\"isOpen = !isOpen\"\n >\n <i\n class=\"fa-solid fa-fw\"\n :class=\"\n !modelValue || modelValue.direction === 'asc'\n ? 'fa-arrow-up-wide-short'\n : 'fa-arrow-down-wide-short'\n \"\n ></i>\n <span class=\"ds-sort-label c-truncate\">{{ activeLabel }}</span>\n <button\n v-if=\"modelValue\"\n type=\"button\"\n class=\"c-icon-btn c-icon-btn--clear ds-sort-clear\"\n aria-label=\"Rendezés törlése\"\n title=\"Rendezés törlése\"\n @click.stop=\"clear\"\n >\n <i class=\"fa-solid fa-fw fa-xmark\"></i>\n </button>\n <span\n class=\"c-icon-btn c-icon-btn--chevron\"\n :class=\"{ 'c-icon-btn--chevron-open': isOpen }\"\n >\n <i class=\"fa-solid fa-fw fa-chevron-down\"></i>\n </span>\n </button>\n\n <Teleport to=\"body\">\n <div class=\"ac-component\">\n <div v-if=\"isOpen\" ref=\"dropdownRef\" class=\"ds-sort-panel\" :style=\"dropdownStyle\">\n\n <div class=\"ds-sort-panel__row\">\n <label class=\"ds-sort-panel__label\">Oszlop</label>\n <DropdownSelect\n :model-value=\"sortBy\"\n :options=\"options\"\n :config=\"{\n clearable: false,\n placeholder: 'Válassz oszlopot...',\n filterable: false,\n }\"\n @update:model-value=\"(v) => (sortBy = v)\"\n />\n </div>\n\n <div class=\"ds-sort-panel__row\">\n <span class=\"ds-sort-panel__label\">Irány</span>\n <div class=\"ds-sort-direction\" role=\"group\" aria-label=\"Rendezés iránya\">\n <button\n type=\"button\"\n class=\"ds-sort-direction__btn\"\n :class=\"{ 'is-active': direction === 'asc' }\"\n :aria-pressed=\"direction === 'asc'\"\n aria-label=\"Növekvő\"\n @click=\"direction = 'asc'\"\n >\n <i class=\"fa-solid fa-fw fa-arrow-up-wide-short\"></i>\n <span>Növekvő</span>\n </button>\n <button\n type=\"button\"\n class=\"ds-sort-direction__btn dir-desc\"\n :class=\"{ 'is-active': direction === 'desc' }\"\n :aria-pressed=\"direction === 'desc'\"\n aria-label=\"Csökkenő\"\n @click=\"direction = 'desc'\"\n >\n <i class=\"fa-solid fa-fw fa-arrow-down-wide-short\"></i>\n <span>Csökkenő</span>\n </button>\n </div>\n </div>\n\n <div class=\"ds-sort-panel__footer\">\n <Button label=\"Rendben\" outline size=\"small\" @click=\"isOpen = false\" />\n </div>\n </div>\n </div>\n </Teleport>\n </div>\n </div>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/data-table/data-sort.scss\"></style>\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"admins-components82.js","names":[],"sources":["../src/components/data-table/DataSort.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type SortDirection = 'asc' | 'desc'\n\nexport interface DataSortOption {\n value: string\n label: string\n icon?: string\n}\n\nexport interface DataSortProps {\n modelValue: { key: string; direction: SortDirection } | null\n options: DataSortOption[]\n placeholder?: string\n handleUrl?: boolean\n disabled?: boolean\n}\n\n/**\n * Resolve the initial sort state from the URL.\n * URL is the only source — there is no localStorage fallback for sort.\n * Returns `null` if no valid `sortBy` + `sortDir` pair is present in the URL.\n */\nexport function getDefaultSort(): { key: string; direction: SortDirection } | null {\n if (typeof window === 'undefined') return null\n const params = new URLSearchParams(window.location.search)\n const key = params.get('sortBy')\n const dir = params.get('sortDir')\n if (key && (dir === 'asc' || dir === 'desc')) {\n return { key, direction: dir }\n }\n return null\n}\n
|
|
1
|
+
{"version":3,"file":"admins-components82.js","names":[],"sources":["../src/components/data-table/DataSort.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type SortDirection = 'asc' | 'desc'\n\nexport interface DataSortOption {\n value: string\n label: string\n icon?: string\n}\n\nexport interface DataSortProps {\n modelValue: { key: string; direction: SortDirection } | null\n options: DataSortOption[]\n placeholder?: string\n handleUrl?: boolean\n disabled?: boolean\n}\n\n/**\n * Resolve the initial sort state from the URL.\n * URL is the only source — there is no localStorage fallback for sort.\n * Returns `null` if no valid `sortBy` + `sortDir` pair is present in the URL.\n */\nexport function getDefaultSort(): { key: string; direction: SortDirection } | null {\n if (typeof window === 'undefined') return null\n const params = new URLSearchParams(window.location.search)\n const key = params.get('sortBy')\n const dir = params.get('sortDir')\n if (key && (dir === 'asc' || dir === 'desc')) {\n return { key, direction: dir }\n }\n return null\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref, watch } from 'vue'\nimport DropdownSelect from '@/components/DropdownSelect.vue'\nimport { useDropdownAnchor } from '@/composables/useDropdownAnchor'\nimport { writeUrlOrRemove } from '@/utils/url'\nimport Button from '../Button.vue'\n\nconst props = withDefaults(defineProps<DataSortProps>(), {\n placeholder: 'Rendezés...',\n handleUrl: false,\n disabled: false\n})\n\nconst emit = defineEmits<{\n 'update:modelValue': [sort: { key: string; direction: SortDirection } | null]\n 'sort-change': [sort: { key: string; direction: SortDirection } | null]\n}>()\n\nconst wrapperRef = ref<HTMLElement | null>(null)\nconst dropdownRef = ref<HTMLElement | null>(null)\nconst { isOpen, dropdownStyle } = useDropdownAnchor(wrapperRef, dropdownRef, {\n extraStyle: (rect) => ({ minWidth: `${Math.max(rect.width, 240)}px` }),\n closeOnScroll: true,\n})\n\nconst sortBy = computed<string | string[] | null>({\n get: () => props.modelValue?.key ?? null,\n set: (v) => {\n if (Array.isArray(v)) return\n emitChange(v, props.modelValue?.direction ?? 'asc')\n },\n})\n\nconst direction = computed<SortDirection>({\n get: () => props.modelValue?.direction ?? 'asc',\n set: (d) => emitChange(props.modelValue?.key ?? null, d),\n})\n\nconst activeLabel = computed(() => {\n if (!props.modelValue) return props.placeholder\n const opt = props.options.find((o) => o.value === props.modelValue!.key)\n const label = opt?.label ?? props.modelValue.key\n return `${label} (${props.modelValue.direction === 'asc' ? 'növekvő' : 'csökkenő'})`\n})\n\nfunction emitChange(key: string | null, dir: SortDirection) {\n if (key == null) {\n if (props.handleUrl) {\n writeUrlOrRemove('sortBy', null, { handleUrl: true })\n writeUrlOrRemove('sortDir', null, { handleUrl: true })\n }\n emit('update:modelValue', null)\n emit('sort-change', null)\n return\n }\n if (props.handleUrl) {\n writeUrlOrRemove('sortBy', key, { handleUrl: true })\n writeUrlOrRemove('sortDir', dir, { handleUrl: true, default: 'asc' })\n }\n const next = { key, direction: dir }\n emit('update:modelValue', next)\n emit('sort-change', next)\n}\n\nfunction clear() {\n emitChange(null, 'asc')\n isOpen.value = false\n}\n\n// Read initial state from URL on mount when handleUrl is true and modelValue is empty.\nwatch(\n isOpen,\n (open) => {\n if (!open || !props.handleUrl || props.modelValue) return\n const sort = getDefaultSort()\n if (sort) emitChange(sort.key, sort.direction)\n },\n { immediate: true },\n)\n</script>\n\n<template>\n <div class=\"ac-component\">\n <div ref=\"wrapperRef\" class=\"ds-sort-wrapper\">\n <button\n type=\"button\"\n class=\"c-btn ds-sort-trigger lh-1\"\n :class=\"[modelValue && 'is-active', disabled && 'is-disabled', isOpen && 'is-open']\"\n :disabled=\"disabled\"\n :aria-label=\"`Rendezés: ${activeLabel}`\"\n @click=\"isOpen = !isOpen\"\n >\n <i\n class=\"fa-solid fa-fw\"\n :class=\"\n !modelValue || modelValue.direction === 'asc'\n ? 'fa-arrow-up-wide-short'\n : 'fa-arrow-down-wide-short'\n \"\n ></i>\n <span class=\"ds-sort-label c-truncate\">{{ activeLabel }}</span>\n <button\n v-if=\"modelValue\"\n type=\"button\"\n class=\"c-icon-btn c-icon-btn--clear ds-sort-clear\"\n aria-label=\"Rendezés törlése\"\n title=\"Rendezés törlése\"\n @click.stop=\"clear\"\n >\n <i class=\"fa-solid fa-fw fa-xmark\"></i>\n </button>\n <span\n class=\"c-icon-btn c-icon-btn--chevron\"\n :class=\"{ 'c-icon-btn--chevron-open': isOpen }\"\n >\n <i class=\"fa-solid fa-fw fa-chevron-down\"></i>\n </span>\n </button>\n\n <Teleport to=\"body\">\n <div class=\"ac-component\">\n <div v-if=\"isOpen\" ref=\"dropdownRef\" class=\"ds-sort-panel\" :style=\"dropdownStyle\">\n\n <div class=\"ds-sort-panel__row\">\n <label class=\"ds-sort-panel__label\">Oszlop</label>\n <DropdownSelect\n :model-value=\"sortBy\"\n :options=\"options\"\n :config=\"{\n clearable: false,\n placeholder: 'Válassz oszlopot...',\n filterable: false,\n }\"\n @update:model-value=\"(v) => (sortBy = v)\"\n />\n </div>\n\n <div class=\"ds-sort-panel__row\">\n <span class=\"ds-sort-panel__label\">Irány</span>\n <div class=\"ds-sort-direction\" role=\"group\" aria-label=\"Rendezés iránya\">\n <button\n type=\"button\"\n class=\"ds-sort-direction__btn\"\n :class=\"{ 'is-active': direction === 'asc' }\"\n :aria-pressed=\"direction === 'asc'\"\n aria-label=\"Növekvő\"\n @click=\"direction = 'asc'\"\n >\n <i class=\"fa-solid fa-fw fa-arrow-up-wide-short\"></i>\n <span>Növekvő</span>\n </button>\n <button\n type=\"button\"\n class=\"ds-sort-direction__btn dir-desc\"\n :class=\"{ 'is-active': direction === 'desc' }\"\n :aria-pressed=\"direction === 'desc'\"\n aria-label=\"Csökkenő\"\n @click=\"direction = 'desc'\"\n >\n <i class=\"fa-solid fa-fw fa-arrow-down-wide-short\"></i>\n <span>Csökkenő</span>\n </button>\n </div>\n </div>\n\n <div class=\"ds-sort-panel__footer\">\n <Button label=\"Rendben\" outline size=\"small\" @click=\"isOpen = false\" />\n </div>\n </div>\n </div>\n </Teleport>\n </div>\n </div>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/data-table/data-sort.scss\"></style>\n"],"mappings":""}
|
|
@@ -46,6 +46,5 @@ declare const __VLS_export: import('vue').DefineComponent<DataSortProps, {}, {},
|
|
|
46
46
|
}>, {
|
|
47
47
|
disabled: boolean;
|
|
48
48
|
placeholder: string;
|
|
49
|
-
options: DataSortOption[];
|
|
50
49
|
handleUrl: boolean;
|
|
51
50
|
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.c-table-wrapper{--table-col-max-width:
|
|
1
|
+
.c-table-wrapper{--table-col-max-width:clamp(12rem, 10vw, 22rem);--table-primary-col-min-width:clamp(14rem, 33vw, 20rem);--table-primary-col-max-width:clamp(14rem, 28vw, 28rem);max-height:var(--data-list-max-height,75dvh);-webkit-overflow-scrolling:touch;position:relative;overflow:auto}.c-table-wrapper .c-table{--cell-padding:.375rem;--action-count:0;border-collapse:collapse;width:100%;min-width:48rem;font-size:.875rem}.c-table-wrapper .c-table thead{z-index:2;background-color:var(--neutral-150);position:sticky;top:0;box-shadow:0 2px 5px -1px #32325d40,0 1px 3px -1px #0000004d}.c-table-wrapper .c-table th,.c-table-wrapper .c-table td{padding:var(--cell-padding);text-align:left;border-bottom:1px solid var(--neutral-200);overflow-wrap:break-word}.c-table-wrapper .c-table .primary-col{min-width:var(--table-primary-col-min-width);max-width:var(--table-primary-col-max-width);overflow-wrap:anywhere;word-break:break-word}.c-table-wrapper .c-table th.c-sortable{cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap}.c-table-wrapper .c-table th.c-sortable--sorted{color:var(--premium-500)}.c-table-wrapper .c-table th.c-sortable:hover{color:#1e2627}.c-table-wrapper .c-table th .c-sort-icon{color:var(--neutral-400);margin-left:.25rem;transition:color .15s}.c-table-wrapper .c-table th .c-sort-icon--active{color:var(--premium-500)}.c-table-wrapper .c-table td{max-width:var(--table-col-max-width)}.c-table-wrapper .c-table td.is-nowrap{white-space:nowrap}.c-table-wrapper .c-table.is-compact th{padding-top:.5rem;padding-bottom:.5rem}.c-table-wrapper .c-table.is-compact td{padding-top:.1875rem;padding-bottom:.1875rem}.c-table-wrapper .c-table tbody tr.is-striped{background-color:var(--neutral-50)}.c-table-wrapper .c-table tbody tr.is-selected,.c-table-wrapper .c-table tbody tr.is-striped.is-selected{background-color:var(--premium-200)}.c-table-wrapper .c-table tbody .c-table__loading-row,.c-table-wrapper .c-table tbody .c-table__loading-row:hover{background-color:#0000}.c-table-wrapper .c-table tbody .c-table__loading-cell{text-align:center;border-bottom:1px solid var(--neutral-200);padding:2rem}.c-table-wrapper .c-table tbody .c-table__loading-wrap{justify-content:center;align-items:center;width:100%;display:flex}@media (hover:hover) and (pointer:fine){.c-table-wrapper .c-table th.c-sortable:hover .c-sort-icon{color:var(--neutral-700)}.c-table-wrapper .c-table tbody tr:hover,.c-table-wrapper .c-table tbody tr.is-striped:hover{background-color:var(--premium-100)}.c-table-wrapper .c-table tbody tr:hover td,.c-table-wrapper .c-table tbody tr.is-striped:hover td{border-color:var(--premium-400)}.c-table-wrapper .c-table tbody tr.is-selected:hover,.c-table-wrapper .c-table tbody tr.is-striped.is-selected:hover{background-color:var(--premium-300)}}.c-table-wrapper .c-table .c-actions-header{text-align:center}.c-table-wrapper .c-table .c-actions-cell .c-actions-wrap{flex-wrap:wrap;justify-content:center;align-items:baseline;gap:.25rem;display:flex}.c-table-wrapper .c-table__cell{position:relative}@media (hover:none),(pointer:coarse){.c-table-wrapper .c-table__cell{transition:background-color .15s}.c-table-wrapper .c-table__cell:focus-within,.c-table-wrapper .c-table__cell:hover{background-color:#dfefef80}}.c-table-wrapper .c-table__cell .c-copy-btn{opacity:0;position:absolute;top:0;right:0}.c-table-wrapper .c-table__cell:hover .c-copy-btn,.c-table-wrapper .c-table__cell:focus-within .c-copy-btn{opacity:1}.c-table-wrapper .c-table__backdrop{z-index:1;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);pointer-events:none;background:#fff9;justify-content:center;align-items:center;padding-top:3rem;animation:.15s ease-out c-table-backdrop-in;display:flex;position:absolute;inset:0}.c-table-wrapper.is-loading .c-table tbody{opacity:.45;transition:opacity .15s ease-out}@keyframes c-table-backdrop-in{0%{opacity:0}to{opacity:1}}
|