admins-components 9.0.85 → 9.0.87
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-components103.js +123 -118
- package/dist/admins-components103.js.map +1 -1
- package/dist/admins-components105.js.map +1 -1
- package/dist/admins-components60.js +1 -0
- package/dist/admins-components60.js.map +1 -1
- package/dist/admins-components68.js +7 -4
- package/dist/admins-components68.js.map +1 -1
- package/dist/admins-components70.js.map +1 -1
- package/dist/admins-components71.js +5 -2
- package/dist/admins-components71.js.map +1 -1
- package/dist/admins-components73.js.map +1 -1
- package/dist/admins-components75.js +103 -77
- package/dist/admins-components75.js.map +1 -1
- package/dist/admins-components77.js.map +1 -1
- package/dist/admins-components80.js +49 -48
- package/dist/admins-components80.js.map +1 -1
- package/dist/admins-components82.js.map +1 -1
- package/dist/src/components/data-table/DataCards.vue.d.ts +4 -4
- package/dist/src/components/data-table/DataList.vue.d.ts +4 -0
- package/dist/src/components/data-table/DataPaginator.vue.d.ts +3 -0
- package/dist/src/components/data-table/DataTable.vue.d.ts +4 -4
- package/dist/src/types/data-list.d.ts +2 -1
- 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-options.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-table.scss_vue_type_style_index_0_src_true_lang.css +1 -1
- package/dist/test.html +162 -162
- package/dist/test81.html +160 -160
- package/dist/widget.css +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"admins-components75.js","names":[],"sources":["../src/components/data-table/DataListOptions.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Column, DataListSettings } from '@/types/data-list'\nimport {\n dataTableSettingsDefaults,\n dataCardsSettingsDefaults,\n dataListSettingsDefaults,\n} from '@/types/data-list'\nimport { deepMerge } from '@/utils/objects'\nimport Button from '@/components/Button.vue'\n\nexport interface DataListOptionsProps {\n open?: boolean\n columns: Column[]\n settings: Partial<DataListSettings>\n position?: SidebarPosition\n storageKey: string\n orderable?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { ref, computed, onMounted, watch } from 'vue'\nimport Sidebar, { type SidebarPosition } from '@/components/Sidebar.vue'\n\nconst props = withDefaults(defineProps<DataListOptionsProps>(), {\n orderable: false,\n})\n\nconst emit = defineEmits<{\n close: []\n change: [settings: DataListSettings]\n}>()\n\nconst local = ref<DataListSettings>(getDefaults())\n\nconst storageKey = computed(() => `data-list-${props.storageKey}`)\n\nconst hasCustomSettings = computed(\n () => JSON.stringify(local.value) !== JSON.stringify(getDefaults()),\n)\n\nfunction isColumnLocked(col: Column): boolean {\n return col.primary === true || col.hideable === false\n}\n\nfunction applyLockedOverrides(s: DataListSettings) {\n for (const col of props.columns) {\n if (isColumnLocked(col)) {\n s.columns[col.property] = true\n s.cardHeaderColumns[col.property] = true\n }\n }\n}\n\nfunction getDefaults(): DataListSettings {\n return {\n ...dataCardsSettingsDefaults,\n ...dataTableSettingsDefaults,\n ...dataListSettingsDefaults,\n ...props.settings,\n columns: Object.fromEntries(\n props.columns.map((c) => [\n c.property,\n props.settings.columns?.[c.property] ?? c.visible !== false,\n ]),\n ),\n cardHeaderColumns: Object.fromEntries(\n props.columns.map((c) => [\n c.property,\n props.settings.cardHeaderColumns?.[c.property] ??\n (c.primary === true || c.hideable === false || c.defaultCardHeader === true),\n ]),\n ),\n columnOrder: props.settings.columnOrder ?? props.columns.map((c) => c.property),\n cardHeaderOrder: props.settings.cardHeaderOrder ?? props.columns.map((c) => c.property),\n } as DataListSettings\n}\n\nfunction load() {\n try {\n const raw = localStorage.getItem(storageKey.value)\n const defaults = getDefaults()\n if (raw) {\n const data = JSON.parse(raw)\n local.value = data.settings\n ? reconcileOrders(deepMerge(defaults, data.settings) as DataListSettings, props.columns)\n : defaults\n } else {\n local.value = defaults\n }\n } catch {\n local.value = getDefaults()\n }\n applyLockedOverrides(local.value)\n emit('change', local.value)\n}\n\nfunction reconcileOrders(settings: DataListSettings, columns: Column[]): DataListSettings {\n const sourceOrder = columns.map((c) => c.property)\n const reconcile = (order: string[] | undefined): string[] => {\n const saved = (order ?? []).filter((p) => sourceOrder.includes(p))\n const savedSet = new Set(saved)\n const merged: string[] = []\n let savedIdx = 0\n for (const property of sourceOrder) {\n if (savedSet.has(property)) {\n merged.push(saved[savedIdx++]!)\n } else {\n merged.push(property)\n }\n }\n return merged\n }\n return {\n ...settings,\n columnOrder: reconcile(settings.columnOrder),\n cardHeaderOrder: reconcile(settings.cardHeaderOrder),\n }\n}\n\nfunction save() {\n try {\n const key = storageKey.value\n const raw = localStorage.getItem(key)\n const data = raw ? JSON.parse(raw) : {}\n data.settings = local.value\n localStorage.setItem(key, JSON.stringify(data))\n } catch (e) {\n console.error(e)\n }\n emit('change', local.value)\n}\n\nfunction update<K extends keyof DataListSettings>(key: K, value: DataListSettings[K]) {\n local.value = { ...local.value, [key]: value }\n save()\n}\n\nfunction toggleColumn(property: string) {\n update('columns', { ...local.value.columns, [property]: !local.value.columns[property] })\n}\n\nfunction toggleCardHeaderColumn(property: string) {\n update('cardHeaderColumns', {\n ...local.value.cardHeaderColumns,\n [property]: !local.value.cardHeaderColumns[property],\n })\n}\n\nfunction toggle(key: 'striped' | 'compact' | 'filtersEager') {\n update(key, !local.value[key])\n}\n\nfunction sortByOrder(cols: Column[], order: string[]) {\n return [...cols].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\nconst orderedColumns = computed(() => sortByOrder(props.columns, local.value.columnOrder))\n\nconst orderedCardHeaderColumns = computed(() =>\n sortByOrder(props.columns, local.value.cardHeaderOrder),\n)\n\nconst dragIndex = ref<number | null>(null)\nconst selectedReorderIndex = ref<number | null>(null)\n\nconst cardHeaderDragIndex = ref<number | null>(null)\nconst selectedCardHeaderIndex = ref<number | null>(null)\n\nfunction onDragStart(index: number) {\n dragIndex.value = index\n}\n\nfunction onDragOver(e: DragEvent, index: number) {\n e.preventDefault()\n if (dragIndex.value === null || dragIndex.value === index) return\n const order = [...local.value.columnOrder]\n const moved = order.splice(dragIndex.value, 1)[0]\n if (!moved) return\n order.splice(index, 0, moved)\n dragIndex.value = index\n update('columnOrder', order)\n}\n\nfunction onDragEnd() {\n dragIndex.value = null\n}\n\nfunction selectForReorder(index: number) {\n selectedReorderIndex.value = selectedReorderIndex.value === index ? null : index\n}\n\nfunction moveSelected(direction: -1 | 1) {\n if (selectedReorderIndex.value === null) return\n const target = selectedReorderIndex.value + direction\n if (target < 0 || target >= local.value.columnOrder.length) return\n const order = [...local.value.columnOrder]\n const tmp = order[selectedReorderIndex.value]!\n order[selectedReorderIndex.value] = order[target]!\n order[target] = tmp\n update('columnOrder', order)\n selectedReorderIndex.value = target\n}\n\nfunction onCardHeaderDragStart(index: number) {\n cardHeaderDragIndex.value = index\n}\n\nfunction onCardHeaderDragOver(e: DragEvent, index: number) {\n e.preventDefault()\n if (cardHeaderDragIndex.value === null || cardHeaderDragIndex.value === index) return\n const order = [...local.value.cardHeaderOrder]\n const moved = order.splice(cardHeaderDragIndex.value, 1)[0]\n if (!moved) return\n order.splice(index, 0, moved)\n cardHeaderDragIndex.value = index\n update('cardHeaderOrder', order)\n}\n\nfunction onCardHeaderDragEnd() {\n cardHeaderDragIndex.value = null\n}\n\nfunction selectCardHeader(index: number) {\n selectedCardHeaderIndex.value = selectedCardHeaderIndex.value === index ? null : index\n}\n\nfunction moveCardHeader(direction: -1 | 1) {\n if (selectedCardHeaderIndex.value === null) return\n const target = selectedCardHeaderIndex.value + direction\n if (target < 0 || target >= local.value.cardHeaderOrder.length) return\n const order = [...local.value.cardHeaderOrder]\n const tmp = order[selectedCardHeaderIndex.value]!\n order[selectedCardHeaderIndex.value] = order[target]!\n order[target] = tmp\n update('cardHeaderOrder', order)\n selectedCardHeaderIndex.value = target\n}\n\nfunction reset() {\n localStorage.removeItem(storageKey.value)\n local.value = getDefaults()\n emit('change', local.value)\n}\n\nonMounted(load)\n\nwatch(\n () => props.columns,\n () => {\n local.value = reconcileOrders(local.value, props.columns)\n applyLockedOverrides(local.value)\n },\n)\n</script>\n\n<template>\n <Sidebar :open=\"open\" title=\"Lista beállítások\" :position=\"props.position\" @close=\"emit('close')\">\n <div class=\"list-options basic\">\n <div class=\"list-options__col\">\n <h4 class=\"list-options__title\">\n Elrendezés\n <span class=\"list-options__title-value\"\n >—\n {{\n local.layout === 'screen' ? 'Auto' : local.layout === 'table' ? 'Táblázat' : 'Kártyák'\n }}</span\n >\n </h4>\n <div class=\"layout-switch\">\n <button\n class=\"layout-switch__btn\"\n :class=\"{ 'layout-switch__btn--active': local.layout === 'screen' }\"\n title=\"Kijelző méretéhez igazodó elrendezés\"\n @click=\"update('layout', 'screen')\"\n >\n <i class=\"fa-solid fa-display\"></i>\n </button>\n <button\n class=\"layout-switch__btn\"\n :class=\"{ 'layout-switch__btn--active': local.layout === 'table' }\"\n title=\"Táblázat nézet\"\n @click=\"update('layout', 'table')\"\n >\n <i class=\"fa-solid fa-table-list\"></i>\n </button>\n <button\n class=\"layout-switch__btn\"\n :class=\"{ 'layout-switch__btn--active': local.layout === 'cards' }\"\n title=\"Kártya nézet\"\n @click=\"update('layout', 'cards')\"\n >\n <i class=\"fa-solid fa-list\"></i>\n </button>\n </div>\n </div>\n <div class=\"list-options__col\">\n <h4\n class=\"list-options__title\"\n v-tooltip.html=\"\n '<b>Kompakt</b>: A sorok közötti térköz csökkentése<br><br><b>Sávos</b> (csak táblázat nézetben): A páros sorok háttere kicsit sötétebb '\n \"\n >\n Megjelenés <i class=\"fa-regular fa-question-circle\"></i>\n </h4>\n <ul class=\"list-options__list\">\n <li\n class=\"list-options__item\"\n @click=\"toggle('compact')\"\n title=\"A sorok közötti térköz csökkentése\"\n >\n <span\n class=\"c-checkbox\"\n :class=\"{ 'c-checkbox--checked': local.compact }\"\n @click.stop=\"toggle('compact')\"\n ></span>\n <span>Kompakt</span>\n </li>\n <li\n class=\"list-options__item\"\n @click=\"toggle('striped')\"\n title=\"A páros sorok háttere kicsit sötétebb (csak táblázat nézetben)\"\n >\n <span\n class=\"c-checkbox\"\n :class=\"{ 'c-checkbox--checked': local.striped }\"\n @click.stop=\"toggle('striped')\"\n ></span>\n <span>Sávos (striped)</span>\n </li>\n </ul>\n </div>\n <div class=\"list-options__col\">\n <h4 class=\"list-options__title\" v-tooltip=\"'Táblázat nézetben megjelenő oszlopok'\">\n Táblázat oszlopok <i class=\"fa-regular fa-question-circle\"></i>\n </h4>\n <ul class=\"list-options__list\">\n <li\n v-for=\"(col, index) in orderedColumns\"\n :key=\"col.property\"\n class=\"list-options__item\"\n :class=\"{\n 'list-options__item--disabled': isColumnLocked(col),\n 'list-options__item--selected': orderable && selectedReorderIndex === index,\n 'list-options__item--dragging': orderable && dragIndex === index,\n }\"\n :draggable=\"orderable\"\n @dragstart.stop=\"orderable && onDragStart(index)\"\n @dragover.prevent=\"orderable && onDragOver($event, index)\"\n @drop.prevent\n @dragend=\"orderable && onDragEnd()\"\n @click.prevent=\"\n orderable\n ? selectForReorder(index)\n : !isColumnLocked(col) && toggleColumn(col.property)\n \"\n >\n <i v-if=\"orderable\" class=\"fa-solid fa-grip-vertical list-options__drag-handle\"></i>\n <span\n class=\"list-options__toggle\"\n @click.stop=\"!isColumnLocked(col) && toggleColumn(col.property)\"\n >\n <span\n class=\"c-checkbox\"\n :class=\"{ 'c-checkbox--checked': local.columns[col.property] }\"\n ></span>\n <span>{{ col.label }}</span>\n </span>\n </li>\n </ul>\n <div v-if=\"orderable && selectedReorderIndex !== null\" class=\"list-options__move-actions\">\n <button\n class=\"list-options__move-btn\"\n :disabled=\"selectedReorderIndex === 0\"\n @click=\"moveSelected(-1)\"\n >\n <i class=\"fa-solid fa-arrow-up\"></i>\n </button>\n <button\n class=\"list-options__move-btn\"\n :disabled=\"selectedReorderIndex === orderedColumns.length - 1\"\n @click=\"moveSelected(1)\"\n >\n <i class=\"fa-solid fa-arrow-down\"></i>\n </button>\n </div>\n </div>\n <div class=\"list-options__col\">\n <h4\n class=\"list-options__title flex-center gap-1\"\n v-tooltip=\"'Kártya nézetben, a sorok fejlécén megjelenő oszlopok'\"\n >\n Kártya fejléc <i class=\"fa-regular fa-question-circle\"></i>\n </h4>\n <ul class=\"list-options__list\">\n <li\n v-for=\"(col, index) in orderedCardHeaderColumns\"\n :key=\"'ch-' + col.property\"\n class=\"list-options__item\"\n :class=\"{\n 'list-options__item--disabled': isColumnLocked(col),\n 'list-options__item--selected': orderable && selectedCardHeaderIndex === index,\n 'list-options__item--dragging': orderable && cardHeaderDragIndex === index,\n }\"\n :draggable=\"orderable\"\n @dragstart.stop=\"orderable && onCardHeaderDragStart(index)\"\n @dragover.prevent=\"orderable && onCardHeaderDragOver($event, index)\"\n @drop.prevent\n @dragend=\"orderable && onCardHeaderDragEnd()\"\n @click.prevent=\"\n orderable\n ? selectCardHeader(index)\n : !isColumnLocked(col) && toggleCardHeaderColumn(col.property)\n \"\n >\n <i v-if=\"orderable\" class=\"fa-solid fa-grip-vertical list-options__drag-handle\"></i>\n <span\n class=\"list-options__toggle\"\n @click.stop=\"!isColumnLocked(col) && toggleCardHeaderColumn(col.property)\"\n >\n <span\n class=\"c-checkbox\"\n :class=\"{ 'c-checkbox--checked': local.cardHeaderColumns[col.property] }\"\n ></span>\n <span>{{ col.label }}</span>\n </span>\n </li>\n </ul>\n <div\n v-if=\"orderable && selectedCardHeaderIndex !== null\"\n class=\"list-options__move-actions\"\n >\n <button\n class=\"list-options__move-btn\"\n :disabled=\"selectedCardHeaderIndex === 0\"\n @click=\"moveCardHeader(-1)\"\n >\n <i class=\"fa-solid fa-arrow-up\"></i>\n </button>\n <button\n class=\"list-options__move-btn\"\n :disabled=\"selectedCardHeaderIndex === orderedCardHeaderColumns.length - 1\"\n @click=\"moveCardHeader(1)\"\n >\n <i class=\"fa-solid fa-arrow-down\"></i>\n </button>\n </div>\n </div>\n </div>\n <hr class=\"separator my-3\" />\n <div class=\"list-options-footer\">\n <Button\n icon=\"fa-solid fa-triangle-exclamation\"\n :disabled=\"!hasCustomSettings\"\n label=\"Alapértelmezés visszaállítása\"\n size=\"small\"\n @click=\"reset\"\n />\n <Button label=\"OK\" @click=\"emit('close')\" />\n </div>\n <hr class=\"separator my-3\" />\n <div class=\"list-options advanced\">\n <div class=\"list-options__col\">\n <h4\n class=\"list-options__title\"\n v-tooltip.html=\"\n '<b>Azonnali szűrés</b>: Bekapcsolt állapotban a szűrő mezők módosítása azonnal érvénybe lép, míg kikapcsolva csak a „Szűrés” gombra kattintva kerülnek alkalmazásra.'\n \"\n >\n Haladó beállítások <i class=\"fa-regular fa-question-circle\"></i>\n </h4>\n <ul class=\"list-options__list\">\n <li\n class=\"list-options__item\"\n @click=\"toggle('filtersEager')\"\n title=\"Bekapcsolt állapotban a szűrő mezők módosítása azonnal érvénybe lép\"\n >\n <span\n class=\"c-checkbox\"\n :class=\"{ 'c-checkbox--checked': local.filtersEager }\"\n @click.stop=\"toggle('filtersEager')\"\n ></span>\n <span>Azonnali szűrés</span>\n </li>\n </ul>\n </div>\n </div>\n </Sidebar>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/data-table/data-list-options.scss\"></style>\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"admins-components75.js","names":[],"sources":["../src/components/data-table/DataListOptions.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Column, DataListSettings } from '@/types/data-list'\nimport {\n dataTableSettingsDefaults,\n dataCardsSettingsDefaults,\n dataListSettingsDefaults,\n} from '@/types/data-list'\nimport { deepMerge } from '@/utils/objects'\nimport Button from '@/components/Button.vue'\n\nexport interface DataListOptionsProps {\n open?: boolean\n columns: Column[]\n settings: Partial<DataListSettings>\n position?: SidebarPosition\n storageKey: string\n orderable?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { ref, computed, onMounted, watch } from 'vue'\nimport Sidebar, { type SidebarPosition } from '@/components/Sidebar.vue'\n\nconst props = withDefaults(defineProps<DataListOptionsProps>(), {\n orderable: false,\n})\n\nconst emit = defineEmits<{\n close: []\n change: [settings: DataListSettings]\n}>()\n\nconst local = ref<DataListSettings>(getDefaults())\n\nconst storageKey = computed(() => `data-list-${props.storageKey}`)\n\nconst hasCustomSettings = computed(\n () => JSON.stringify(local.value) !== JSON.stringify(getDefaults()),\n)\n\nfunction isColumnLocked(col: Column): boolean {\n return col.primary === true || col.hideable === false\n}\n\nfunction applyLockedOverrides(s: DataListSettings) {\n for (const col of props.columns) {\n if (isColumnLocked(col)) {\n s.columns[col.property] = true\n s.cardHeaderColumns[col.property] = true\n }\n }\n}\n\nfunction getDefaults(): DataListSettings {\n return {\n ...dataCardsSettingsDefaults,\n ...dataTableSettingsDefaults,\n ...dataListSettingsDefaults,\n ...props.settings,\n columns: Object.fromEntries(\n props.columns.map((c) => [\n c.property,\n props.settings.columns?.[c.property] ?? c.visible !== false,\n ]),\n ),\n cardHeaderColumns: Object.fromEntries(\n props.columns.map((c) => [\n c.property,\n props.settings.cardHeaderColumns?.[c.property] ??\n (c.primary === true || c.hideable === false || c.defaultCardHeader === true),\n ]),\n ),\n columnOrder: props.settings.columnOrder ?? props.columns.map((c) => c.property),\n cardHeaderOrder: props.settings.cardHeaderOrder ?? props.columns.map((c) => c.property),\n } as DataListSettings\n}\n\nfunction load() {\n try {\n const raw = localStorage.getItem(storageKey.value)\n const defaults = getDefaults()\n if (raw) {\n const data = JSON.parse(raw)\n local.value = data.settings\n ? reconcileOrders(deepMerge(defaults, data.settings) as DataListSettings, props.columns)\n : defaults\n } else {\n local.value = defaults\n }\n } catch {\n local.value = getDefaults()\n }\n applyLockedOverrides(local.value)\n emit('change', local.value)\n}\n\nfunction reconcileOrders(settings: DataListSettings, columns: Column[]): DataListSettings {\n const sourceOrder = columns.map((c) => c.property)\n const reconcile = (order: string[] | undefined): string[] => {\n const saved = (order ?? []).filter((p) => sourceOrder.includes(p))\n const savedSet = new Set(saved)\n const merged: string[] = []\n let savedIdx = 0\n for (const property of sourceOrder) {\n if (savedSet.has(property)) {\n merged.push(saved[savedIdx++]!)\n } else {\n merged.push(property)\n }\n }\n return merged\n }\n return {\n ...settings,\n columnOrder: reconcile(settings.columnOrder),\n cardHeaderOrder: reconcile(settings.cardHeaderOrder),\n }\n}\n\nfunction save() {\n try {\n const key = storageKey.value\n const raw = localStorage.getItem(key)\n const data = raw ? JSON.parse(raw) : {}\n data.settings = local.value\n localStorage.setItem(key, JSON.stringify(data))\n } catch (e) {\n console.error(e)\n }\n emit('change', local.value)\n}\n\nfunction update<K extends keyof DataListSettings>(key: K, value: DataListSettings[K]) {\n local.value = { ...local.value, [key]: value }\n save()\n}\n\nfunction toggleColumn(property: string) {\n update('columns', { ...local.value.columns, [property]: !local.value.columns[property] })\n}\n\nfunction toggleCardHeaderColumn(property: string) {\n update('cardHeaderColumns', {\n ...local.value.cardHeaderColumns,\n [property]: !local.value.cardHeaderColumns[property],\n })\n}\n\nfunction toggle(key: 'striped' | 'compact' | 'filtersEager') {\n update(key, !local.value[key])\n}\n\nfunction sortByOrder(cols: Column[], order: string[]) {\n return [...cols].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\nconst orderedColumns = computed(() => sortByOrder(props.columns, local.value.columnOrder))\n\nconst orderedCardHeaderColumns = computed(() =>\n sortByOrder(props.columns, local.value.cardHeaderOrder),\n)\n\nconst dragIndex = ref<number | null>(null)\nconst selectedReorderIndex = ref<number | null>(null)\n\nconst cardHeaderDragIndex = ref<number | null>(null)\nconst selectedCardHeaderIndex = ref<number | null>(null)\n\nfunction onDragStart(index: number) {\n dragIndex.value = index\n}\n\nfunction onDragOver(e: DragEvent, index: number) {\n e.preventDefault()\n if (dragIndex.value === null || dragIndex.value === index) return\n const order = [...local.value.columnOrder]\n const moved = order.splice(dragIndex.value, 1)[0]\n if (!moved) return\n order.splice(index, 0, moved)\n dragIndex.value = index\n update('columnOrder', order)\n}\n\nfunction onDragEnd() {\n dragIndex.value = null\n}\n\nfunction selectForReorder(index: number) {\n selectedReorderIndex.value = selectedReorderIndex.value === index ? null : index\n}\n\nfunction moveSelected(direction: -1 | 1) {\n if (selectedReorderIndex.value === null) return\n const target = selectedReorderIndex.value + direction\n if (target < 0 || target >= local.value.columnOrder.length) return\n const order = [...local.value.columnOrder]\n const tmp = order[selectedReorderIndex.value]!\n order[selectedReorderIndex.value] = order[target]!\n order[target] = tmp\n update('columnOrder', order)\n selectedReorderIndex.value = target\n}\n\nfunction onCardHeaderDragStart(index: number) {\n cardHeaderDragIndex.value = index\n}\n\nfunction onCardHeaderDragOver(e: DragEvent, index: number) {\n e.preventDefault()\n if (cardHeaderDragIndex.value === null || cardHeaderDragIndex.value === index) return\n const order = [...local.value.cardHeaderOrder]\n const moved = order.splice(cardHeaderDragIndex.value, 1)[0]\n if (!moved) return\n order.splice(index, 0, moved)\n cardHeaderDragIndex.value = index\n update('cardHeaderOrder', order)\n}\n\nfunction onCardHeaderDragEnd() {\n cardHeaderDragIndex.value = null\n}\n\nfunction selectCardHeader(index: number) {\n selectedCardHeaderIndex.value = selectedCardHeaderIndex.value === index ? null : index\n}\n\nfunction moveCardHeader(direction: -1 | 1) {\n if (selectedCardHeaderIndex.value === null) return\n const target = selectedCardHeaderIndex.value + direction\n if (target < 0 || target >= local.value.cardHeaderOrder.length) return\n const order = [...local.value.cardHeaderOrder]\n const tmp = order[selectedCardHeaderIndex.value]!\n order[selectedCardHeaderIndex.value] = order[target]!\n order[target] = tmp\n update('cardHeaderOrder', order)\n selectedCardHeaderIndex.value = target\n}\n\nfunction reset() {\n localStorage.removeItem(storageKey.value)\n local.value = getDefaults()\n emit('change', local.value)\n}\n\nonMounted(load)\n\nwatch(\n () => props.columns,\n () => {\n local.value = reconcileOrders(local.value, props.columns)\n applyLockedOverrides(local.value)\n },\n)\n</script>\n\n<template>\n <Sidebar :open=\"open\" title=\"Lista beállítások\" :position=\"props.position\" @close=\"emit('close')\">\n <div class=\"list-options basic\">\n <div class=\"list-options__col\">\n <h4 class=\"list-options__title\">\n Elrendezés\n <span class=\"list-options__title-value\"\n >—\n {{\n local.layout === 'screen' ? 'Auto' : local.layout === 'table' ? 'Táblázat' : 'Kártyák'\n }}</span\n >\n </h4>\n <div class=\"layout-switch\">\n <button\n class=\"layout-switch__btn\"\n :class=\"{ 'layout-switch__btn--active': local.layout === 'screen' }\"\n title=\"Kijelző méretéhez igazodó elrendezés\"\n @click=\"update('layout', 'screen')\"\n >\n <i class=\"fa-solid fa-display\"></i>\n </button>\n <button\n class=\"layout-switch__btn\"\n :class=\"{ 'layout-switch__btn--active': local.layout === 'table' }\"\n title=\"Táblázat nézet\"\n @click=\"update('layout', 'table')\"\n >\n <i class=\"fa-solid fa-table-list\"></i>\n </button>\n <button\n class=\"layout-switch__btn\"\n :class=\"{ 'layout-switch__btn--active': local.layout === 'cards' }\"\n title=\"Kártya nézet\"\n @click=\"update('layout', 'cards')\"\n >\n <i class=\"fa-solid fa-list\"></i>\n </button>\n </div>\n </div>\n\n <div class=\"list-options__col\">\n <h4\n class=\"list-options__title\"\n v-tooltip.html=\"\n '<b>Kompakt</b>: A sorok közötti térköz csökkentése<br><br><b>Sávos</b> (csak táblázat nézetben): A páros sorok háttere kicsit sötétebb '\n \"\n >\n Megjelenés <i class=\"fa-regular fa-question-circle\"></i>\n </h4>\n <ul class=\"list-options__list\">\n <li\n class=\"list-options__item\"\n @click=\"toggle('compact')\"\n title=\"A sorok közötti térköz csökkentése\"\n >\n <span\n class=\"c-checkbox\"\n :class=\"{ 'c-checkbox--checked': local.compact }\"\n @click.stop=\"toggle('compact')\"\n ></span>\n <span>Kompakt</span>\n </li>\n <li\n class=\"list-options__item\"\n @click=\"toggle('striped')\"\n title=\"A páros sorok háttere kicsit sötétebb (csak táblázat nézetben)\"\n >\n <span\n class=\"c-checkbox\"\n :class=\"{ 'c-checkbox--checked': local.striped }\"\n @click.stop=\"toggle('striped')\"\n ></span>\n <span>Sávos (striped)</span>\n </li>\n </ul>\n </div>\n <div class=\"list-options__col list-options__col--full\">\n <h4\n class=\"list-options__title\"\n v-tooltip=\"'Betűméret: a lista összes szövegének alap mérete'\"\n >\n Betűméret\n <span class=\"list-options__title-value\"\n >—\n {{\n local.fontSize === 'small' ? 'Kicsi' : local.fontSize === 'normal' ? 'Normál' : 'Nagy'\n }}</span\n >\n </h4>\n <div class=\"layout-switch\">\n <button\n class=\"layout-switch__btn\"\n :class=\"{ 'layout-switch__btn--active': local.fontSize === 'small' }\"\n title=\"Kis betűméret\"\n @click=\"update('fontSize', 'small')\"\n >\n <i class=\"fa-solid fa-a\" style=\"font-size: 0.725em\"></i>\n </button>\n <button\n class=\"layout-switch__btn\"\n :class=\"{ 'layout-switch__btn--active': local.fontSize === 'normal' }\"\n title=\"Normál betűméret\"\n @click=\"update('fontSize', 'normal')\"\n >\n <i class=\"fa-solid fa-a\" style=\"font-size: 0.825rem\"></i>\n </button>\n <button\n class=\"layout-switch__btn\"\n :class=\"{ 'layout-switch__btn--active': local.fontSize === 'large' }\"\n title=\"Nagy betűméret\"\n @click=\"update('fontSize', 'large')\"\n >\n <i class=\"fa-solid fa-a\" style=\"font-size: 1.25em\"></i>\n </button>\n </div>\n </div>\n <div class=\"list-options__col\">\n <h4 class=\"list-options__title\" v-tooltip=\"'Táblázat nézetben megjelenő oszlopok'\">\n Táblázat oszlopok <i class=\"fa-regular fa-question-circle\"></i>\n </h4>\n <ul class=\"list-options__list\">\n <li\n v-for=\"(col, index) in orderedColumns\"\n :key=\"col.property\"\n class=\"list-options__item\"\n :class=\"{\n 'list-options__item--disabled': isColumnLocked(col),\n 'list-options__item--selected': orderable && selectedReorderIndex === index,\n 'list-options__item--dragging': orderable && dragIndex === index,\n }\"\n :draggable=\"orderable\"\n @dragstart.stop=\"orderable && onDragStart(index)\"\n @dragover.prevent=\"orderable && onDragOver($event, index)\"\n @drop.prevent\n @dragend=\"orderable && onDragEnd()\"\n @click.prevent=\"\n orderable\n ? selectForReorder(index)\n : !isColumnLocked(col) && toggleColumn(col.property)\n \"\n >\n <i v-if=\"orderable\" class=\"fa-solid fa-grip-vertical list-options__drag-handle\"></i>\n <span\n class=\"list-options__toggle\"\n @click.stop=\"!isColumnLocked(col) && toggleColumn(col.property)\"\n >\n <span\n class=\"c-checkbox\"\n :class=\"{ 'c-checkbox--checked': local.columns[col.property] }\"\n ></span>\n <span>{{ col.label }}</span>\n </span>\n </li>\n </ul>\n <div v-if=\"orderable && selectedReorderIndex !== null\" class=\"list-options__move-actions\">\n <button\n class=\"list-options__move-btn\"\n :disabled=\"selectedReorderIndex === 0\"\n @click=\"moveSelected(-1)\"\n >\n <i class=\"fa-solid fa-arrow-up\"></i>\n </button>\n <button\n class=\"list-options__move-btn\"\n :disabled=\"selectedReorderIndex === orderedColumns.length - 1\"\n @click=\"moveSelected(1)\"\n >\n <i class=\"fa-solid fa-arrow-down\"></i>\n </button>\n </div>\n </div>\n <div class=\"list-options__col\">\n <h4\n class=\"list-options__title flex-center gap-1\"\n v-tooltip=\"'Kártya nézetben, a sorok fejlécén megjelenő oszlopok'\"\n >\n Kártya fejléc <i class=\"fa-regular fa-question-circle\"></i>\n </h4>\n <ul class=\"list-options__list\">\n <li\n v-for=\"(col, index) in orderedCardHeaderColumns\"\n :key=\"'ch-' + col.property\"\n class=\"list-options__item\"\n :class=\"{\n 'list-options__item--disabled': isColumnLocked(col),\n 'list-options__item--selected': orderable && selectedCardHeaderIndex === index,\n 'list-options__item--dragging': orderable && cardHeaderDragIndex === index,\n }\"\n :draggable=\"orderable\"\n @dragstart.stop=\"orderable && onCardHeaderDragStart(index)\"\n @dragover.prevent=\"orderable && onCardHeaderDragOver($event, index)\"\n @drop.prevent\n @dragend=\"orderable && onCardHeaderDragEnd()\"\n @click.prevent=\"\n orderable\n ? selectCardHeader(index)\n : !isColumnLocked(col) && toggleCardHeaderColumn(col.property)\n \"\n >\n <i v-if=\"orderable\" class=\"fa-solid fa-grip-vertical list-options__drag-handle\"></i>\n <span\n class=\"list-options__toggle\"\n @click.stop=\"!isColumnLocked(col) && toggleCardHeaderColumn(col.property)\"\n >\n <span\n class=\"c-checkbox\"\n :class=\"{ 'c-checkbox--checked': local.cardHeaderColumns[col.property] }\"\n ></span>\n <span>{{ col.label }}</span>\n </span>\n </li>\n </ul>\n <div\n v-if=\"orderable && selectedCardHeaderIndex !== null\"\n class=\"list-options__move-actions\"\n >\n <button\n class=\"list-options__move-btn\"\n :disabled=\"selectedCardHeaderIndex === 0\"\n @click=\"moveCardHeader(-1)\"\n >\n <i class=\"fa-solid fa-arrow-up\"></i>\n </button>\n <button\n class=\"list-options__move-btn\"\n :disabled=\"selectedCardHeaderIndex === orderedCardHeaderColumns.length - 1\"\n @click=\"moveCardHeader(1)\"\n >\n <i class=\"fa-solid fa-arrow-down\"></i>\n </button>\n </div>\n </div>\n </div>\n <hr class=\"separator my-3\" />\n <div class=\"list-options-footer\">\n <Button\n icon=\"fa-solid fa-triangle-exclamation\"\n :disabled=\"!hasCustomSettings\"\n label=\"Alapértelmezés visszaállítása\"\n size=\"small\"\n @click=\"reset\"\n />\n <Button label=\"OK\" @click=\"emit('close')\" />\n </div>\n <hr class=\"separator my-3\" />\n <div class=\"list-options advanced\">\n <div class=\"list-options__col\">\n <h4\n class=\"list-options__title\"\n v-tooltip.html=\"\n '<b>Azonnali szűrés</b>: Bekapcsolt állapotban a szűrő mezők módosítása azonnal érvénybe lép, míg kikapcsolva csak a „Szűrés” gombra kattintva kerülnek alkalmazásra.'\n \"\n >\n Haladó beállítások <i class=\"fa-regular fa-question-circle\"></i>\n </h4>\n <ul class=\"list-options__list\">\n <li\n class=\"list-options__item\"\n @click=\"toggle('filtersEager')\"\n title=\"Bekapcsolt állapotban a szűrő mezők módosítása azonnal érvénybe lép\"\n >\n <span\n class=\"c-checkbox\"\n :class=\"{ 'c-checkbox--checked': local.filtersEager }\"\n @click.stop=\"toggle('filtersEager')\"\n ></span>\n <span>Azonnali szűrés</span>\n </li>\n </ul>\n </div>\n </div>\n </Sidebar>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/data-table/data-list-options.scss\"></style>\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"admins-components77.js","names":[],"sources":["../src/components/data-table/DataListOptions.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Column, DataListSettings } from '@/types/data-list'\nimport {\n dataTableSettingsDefaults,\n dataCardsSettingsDefaults,\n dataListSettingsDefaults,\n} from '@/types/data-list'\nimport { deepMerge } from '@/utils/objects'\nimport Button from '@/components/Button.vue'\n\nexport interface DataListOptionsProps {\n open?: boolean\n columns: Column[]\n settings: Partial<DataListSettings>\n position?: SidebarPosition\n storageKey: string\n orderable?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { ref, computed, onMounted, watch } from 'vue'\nimport Sidebar, { type SidebarPosition } from '@/components/Sidebar.vue'\n\nconst props = withDefaults(defineProps<DataListOptionsProps>(), {\n orderable: false,\n})\n\nconst emit = defineEmits<{\n close: []\n change: [settings: DataListSettings]\n}>()\n\nconst local = ref<DataListSettings>(getDefaults())\n\nconst storageKey = computed(() => `data-list-${props.storageKey}`)\n\nconst hasCustomSettings = computed(\n () => JSON.stringify(local.value) !== JSON.stringify(getDefaults()),\n)\n\nfunction isColumnLocked(col: Column): boolean {\n return col.primary === true || col.hideable === false\n}\n\nfunction applyLockedOverrides(s: DataListSettings) {\n for (const col of props.columns) {\n if (isColumnLocked(col)) {\n s.columns[col.property] = true\n s.cardHeaderColumns[col.property] = true\n }\n }\n}\n\nfunction getDefaults(): DataListSettings {\n return {\n ...dataCardsSettingsDefaults,\n ...dataTableSettingsDefaults,\n ...dataListSettingsDefaults,\n ...props.settings,\n columns: Object.fromEntries(\n props.columns.map((c) => [\n c.property,\n props.settings.columns?.[c.property] ?? c.visible !== false,\n ]),\n ),\n cardHeaderColumns: Object.fromEntries(\n props.columns.map((c) => [\n c.property,\n props.settings.cardHeaderColumns?.[c.property] ??\n (c.primary === true || c.hideable === false || c.defaultCardHeader === true),\n ]),\n ),\n columnOrder: props.settings.columnOrder ?? props.columns.map((c) => c.property),\n cardHeaderOrder: props.settings.cardHeaderOrder ?? props.columns.map((c) => c.property),\n } as DataListSettings\n}\n\nfunction load() {\n try {\n const raw = localStorage.getItem(storageKey.value)\n const defaults = getDefaults()\n if (raw) {\n const data = JSON.parse(raw)\n local.value = data.settings\n ? reconcileOrders(deepMerge(defaults, data.settings) as DataListSettings, props.columns)\n : defaults\n } else {\n local.value = defaults\n }\n } catch {\n local.value = getDefaults()\n }\n applyLockedOverrides(local.value)\n emit('change', local.value)\n}\n\nfunction reconcileOrders(settings: DataListSettings, columns: Column[]): DataListSettings {\n const sourceOrder = columns.map((c) => c.property)\n const reconcile = (order: string[] | undefined): string[] => {\n const saved = (order ?? []).filter((p) => sourceOrder.includes(p))\n const savedSet = new Set(saved)\n const merged: string[] = []\n let savedIdx = 0\n for (const property of sourceOrder) {\n if (savedSet.has(property)) {\n merged.push(saved[savedIdx++]!)\n } else {\n merged.push(property)\n }\n }\n return merged\n }\n return {\n ...settings,\n columnOrder: reconcile(settings.columnOrder),\n cardHeaderOrder: reconcile(settings.cardHeaderOrder),\n }\n}\n\nfunction save() {\n try {\n const key = storageKey.value\n const raw = localStorage.getItem(key)\n const data = raw ? JSON.parse(raw) : {}\n data.settings = local.value\n localStorage.setItem(key, JSON.stringify(data))\n } catch (e) {\n console.error(e)\n }\n emit('change', local.value)\n}\n\nfunction update<K extends keyof DataListSettings>(key: K, value: DataListSettings[K]) {\n local.value = { ...local.value, [key]: value }\n save()\n}\n\nfunction toggleColumn(property: string) {\n update('columns', { ...local.value.columns, [property]: !local.value.columns[property] })\n}\n\nfunction toggleCardHeaderColumn(property: string) {\n update('cardHeaderColumns', {\n ...local.value.cardHeaderColumns,\n [property]: !local.value.cardHeaderColumns[property],\n })\n}\n\nfunction toggle(key: 'striped' | 'compact' | 'filtersEager') {\n update(key, !local.value[key])\n}\n\nfunction sortByOrder(cols: Column[], order: string[]) {\n return [...cols].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\nconst orderedColumns = computed(() => sortByOrder(props.columns, local.value.columnOrder))\n\nconst orderedCardHeaderColumns = computed(() =>\n sortByOrder(props.columns, local.value.cardHeaderOrder),\n)\n\nconst dragIndex = ref<number | null>(null)\nconst selectedReorderIndex = ref<number | null>(null)\n\nconst cardHeaderDragIndex = ref<number | null>(null)\nconst selectedCardHeaderIndex = ref<number | null>(null)\n\nfunction onDragStart(index: number) {\n dragIndex.value = index\n}\n\nfunction onDragOver(e: DragEvent, index: number) {\n e.preventDefault()\n if (dragIndex.value === null || dragIndex.value === index) return\n const order = [...local.value.columnOrder]\n const moved = order.splice(dragIndex.value, 1)[0]\n if (!moved) return\n order.splice(index, 0, moved)\n dragIndex.value = index\n update('columnOrder', order)\n}\n\nfunction onDragEnd() {\n dragIndex.value = null\n}\n\nfunction selectForReorder(index: number) {\n selectedReorderIndex.value = selectedReorderIndex.value === index ? null : index\n}\n\nfunction moveSelected(direction: -1 | 1) {\n if (selectedReorderIndex.value === null) return\n const target = selectedReorderIndex.value + direction\n if (target < 0 || target >= local.value.columnOrder.length) return\n const order = [...local.value.columnOrder]\n const tmp = order[selectedReorderIndex.value]!\n order[selectedReorderIndex.value] = order[target]!\n order[target] = tmp\n update('columnOrder', order)\n selectedReorderIndex.value = target\n}\n\nfunction onCardHeaderDragStart(index: number) {\n cardHeaderDragIndex.value = index\n}\n\nfunction onCardHeaderDragOver(e: DragEvent, index: number) {\n e.preventDefault()\n if (cardHeaderDragIndex.value === null || cardHeaderDragIndex.value === index) return\n const order = [...local.value.cardHeaderOrder]\n const moved = order.splice(cardHeaderDragIndex.value, 1)[0]\n if (!moved) return\n order.splice(index, 0, moved)\n cardHeaderDragIndex.value = index\n update('cardHeaderOrder', order)\n}\n\nfunction onCardHeaderDragEnd() {\n cardHeaderDragIndex.value = null\n}\n\nfunction selectCardHeader(index: number) {\n selectedCardHeaderIndex.value = selectedCardHeaderIndex.value === index ? null : index\n}\n\nfunction moveCardHeader(direction: -1 | 1) {\n if (selectedCardHeaderIndex.value === null) return\n const target = selectedCardHeaderIndex.value + direction\n if (target < 0 || target >= local.value.cardHeaderOrder.length) return\n const order = [...local.value.cardHeaderOrder]\n const tmp = order[selectedCardHeaderIndex.value]!\n order[selectedCardHeaderIndex.value] = order[target]!\n order[target] = tmp\n update('cardHeaderOrder', order)\n selectedCardHeaderIndex.value = target\n}\n\nfunction reset() {\n localStorage.removeItem(storageKey.value)\n local.value = getDefaults()\n emit('change', local.value)\n}\n\nonMounted(load)\n\nwatch(\n () => props.columns,\n () => {\n local.value = reconcileOrders(local.value, props.columns)\n applyLockedOverrides(local.value)\n },\n)\n</script>\n\n<template>\n <Sidebar :open=\"open\" title=\"Lista beállítások\" :position=\"props.position\" @close=\"emit('close')\">\n <div class=\"list-options basic\">\n <div class=\"list-options__col\">\n <h4 class=\"list-options__title\">\n Elrendezés\n <span class=\"list-options__title-value\"\n >—\n {{\n local.layout === 'screen' ? 'Auto' : local.layout === 'table' ? 'Táblázat' : 'Kártyák'\n }}</span\n >\n </h4>\n <div class=\"layout-switch\">\n <button\n class=\"layout-switch__btn\"\n :class=\"{ 'layout-switch__btn--active': local.layout === 'screen' }\"\n title=\"Kijelző méretéhez igazodó elrendezés\"\n @click=\"update('layout', 'screen')\"\n >\n <i class=\"fa-solid fa-display\"></i>\n </button>\n <button\n class=\"layout-switch__btn\"\n :class=\"{ 'layout-switch__btn--active': local.layout === 'table' }\"\n title=\"Táblázat nézet\"\n @click=\"update('layout', 'table')\"\n >\n <i class=\"fa-solid fa-table-list\"></i>\n </button>\n <button\n class=\"layout-switch__btn\"\n :class=\"{ 'layout-switch__btn--active': local.layout === 'cards' }\"\n title=\"Kártya nézet\"\n @click=\"update('layout', 'cards')\"\n >\n <i class=\"fa-solid fa-list\"></i>\n </button>\n </div>\n </div>\n <div class=\"list-options__col\">\n <h4\n class=\"list-options__title\"\n v-tooltip.html=\"\n '<b>Kompakt</b>: A sorok közötti térköz csökkentése<br><br><b>Sávos</b> (csak táblázat nézetben): A páros sorok háttere kicsit sötétebb '\n \"\n >\n Megjelenés <i class=\"fa-regular fa-question-circle\"></i>\n </h4>\n <ul class=\"list-options__list\">\n <li\n class=\"list-options__item\"\n @click=\"toggle('compact')\"\n title=\"A sorok közötti térköz csökkentése\"\n >\n <span\n class=\"c-checkbox\"\n :class=\"{ 'c-checkbox--checked': local.compact }\"\n @click.stop=\"toggle('compact')\"\n ></span>\n <span>Kompakt</span>\n </li>\n <li\n class=\"list-options__item\"\n @click=\"toggle('striped')\"\n title=\"A páros sorok háttere kicsit sötétebb (csak táblázat nézetben)\"\n >\n <span\n class=\"c-checkbox\"\n :class=\"{ 'c-checkbox--checked': local.striped }\"\n @click.stop=\"toggle('striped')\"\n ></span>\n <span>Sávos (striped)</span>\n </li>\n </ul>\n </div>\n <div class=\"list-options__col\">\n <h4 class=\"list-options__title\" v-tooltip=\"'Táblázat nézetben megjelenő oszlopok'\">\n Táblázat oszlopok <i class=\"fa-regular fa-question-circle\"></i>\n </h4>\n <ul class=\"list-options__list\">\n <li\n v-for=\"(col, index) in orderedColumns\"\n :key=\"col.property\"\n class=\"list-options__item\"\n :class=\"{\n 'list-options__item--disabled': isColumnLocked(col),\n 'list-options__item--selected': orderable && selectedReorderIndex === index,\n 'list-options__item--dragging': orderable && dragIndex === index,\n }\"\n :draggable=\"orderable\"\n @dragstart.stop=\"orderable && onDragStart(index)\"\n @dragover.prevent=\"orderable && onDragOver($event, index)\"\n @drop.prevent\n @dragend=\"orderable && onDragEnd()\"\n @click.prevent=\"\n orderable\n ? selectForReorder(index)\n : !isColumnLocked(col) && toggleColumn(col.property)\n \"\n >\n <i v-if=\"orderable\" class=\"fa-solid fa-grip-vertical list-options__drag-handle\"></i>\n <span\n class=\"list-options__toggle\"\n @click.stop=\"!isColumnLocked(col) && toggleColumn(col.property)\"\n >\n <span\n class=\"c-checkbox\"\n :class=\"{ 'c-checkbox--checked': local.columns[col.property] }\"\n ></span>\n <span>{{ col.label }}</span>\n </span>\n </li>\n </ul>\n <div v-if=\"orderable && selectedReorderIndex !== null\" class=\"list-options__move-actions\">\n <button\n class=\"list-options__move-btn\"\n :disabled=\"selectedReorderIndex === 0\"\n @click=\"moveSelected(-1)\"\n >\n <i class=\"fa-solid fa-arrow-up\"></i>\n </button>\n <button\n class=\"list-options__move-btn\"\n :disabled=\"selectedReorderIndex === orderedColumns.length - 1\"\n @click=\"moveSelected(1)\"\n >\n <i class=\"fa-solid fa-arrow-down\"></i>\n </button>\n </div>\n </div>\n <div class=\"list-options__col\">\n <h4\n class=\"list-options__title flex-center gap-1\"\n v-tooltip=\"'Kártya nézetben, a sorok fejlécén megjelenő oszlopok'\"\n >\n Kártya fejléc <i class=\"fa-regular fa-question-circle\"></i>\n </h4>\n <ul class=\"list-options__list\">\n <li\n v-for=\"(col, index) in orderedCardHeaderColumns\"\n :key=\"'ch-' + col.property\"\n class=\"list-options__item\"\n :class=\"{\n 'list-options__item--disabled': isColumnLocked(col),\n 'list-options__item--selected': orderable && selectedCardHeaderIndex === index,\n 'list-options__item--dragging': orderable && cardHeaderDragIndex === index,\n }\"\n :draggable=\"orderable\"\n @dragstart.stop=\"orderable && onCardHeaderDragStart(index)\"\n @dragover.prevent=\"orderable && onCardHeaderDragOver($event, index)\"\n @drop.prevent\n @dragend=\"orderable && onCardHeaderDragEnd()\"\n @click.prevent=\"\n orderable\n ? selectCardHeader(index)\n : !isColumnLocked(col) && toggleCardHeaderColumn(col.property)\n \"\n >\n <i v-if=\"orderable\" class=\"fa-solid fa-grip-vertical list-options__drag-handle\"></i>\n <span\n class=\"list-options__toggle\"\n @click.stop=\"!isColumnLocked(col) && toggleCardHeaderColumn(col.property)\"\n >\n <span\n class=\"c-checkbox\"\n :class=\"{ 'c-checkbox--checked': local.cardHeaderColumns[col.property] }\"\n ></span>\n <span>{{ col.label }}</span>\n </span>\n </li>\n </ul>\n <div\n v-if=\"orderable && selectedCardHeaderIndex !== null\"\n class=\"list-options__move-actions\"\n >\n <button\n class=\"list-options__move-btn\"\n :disabled=\"selectedCardHeaderIndex === 0\"\n @click=\"moveCardHeader(-1)\"\n >\n <i class=\"fa-solid fa-arrow-up\"></i>\n </button>\n <button\n class=\"list-options__move-btn\"\n :disabled=\"selectedCardHeaderIndex === orderedCardHeaderColumns.length - 1\"\n @click=\"moveCardHeader(1)\"\n >\n <i class=\"fa-solid fa-arrow-down\"></i>\n </button>\n </div>\n </div>\n </div>\n <hr class=\"separator my-3\" />\n <div class=\"list-options-footer\">\n <Button\n icon=\"fa-solid fa-triangle-exclamation\"\n :disabled=\"!hasCustomSettings\"\n label=\"Alapértelmezés visszaállítása\"\n size=\"small\"\n @click=\"reset\"\n />\n <Button label=\"OK\" @click=\"emit('close')\" />\n </div>\n <hr class=\"separator my-3\" />\n <div class=\"list-options advanced\">\n <div class=\"list-options__col\">\n <h4\n class=\"list-options__title\"\n v-tooltip.html=\"\n '<b>Azonnali szűrés</b>: Bekapcsolt állapotban a szűrő mezők módosítása azonnal érvénybe lép, míg kikapcsolva csak a „Szűrés” gombra kattintva kerülnek alkalmazásra.'\n \"\n >\n Haladó beállítások <i class=\"fa-regular fa-question-circle\"></i>\n </h4>\n <ul class=\"list-options__list\">\n <li\n class=\"list-options__item\"\n @click=\"toggle('filtersEager')\"\n title=\"Bekapcsolt állapotban a szűrő mezők módosítása azonnal érvénybe lép\"\n >\n <span\n class=\"c-checkbox\"\n :class=\"{ 'c-checkbox--checked': local.filtersEager }\"\n @click.stop=\"toggle('filtersEager')\"\n ></span>\n <span>Azonnali szűrés</span>\n </li>\n </ul>\n </div>\n </div>\n </Sidebar>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/data-table/data-list-options.scss\"></style>\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"admins-components77.js","names":[],"sources":["../src/components/data-table/DataListOptions.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Column, DataListSettings } from '@/types/data-list'\nimport {\n dataTableSettingsDefaults,\n dataCardsSettingsDefaults,\n dataListSettingsDefaults,\n} from '@/types/data-list'\nimport { deepMerge } from '@/utils/objects'\nimport Button from '@/components/Button.vue'\n\nexport interface DataListOptionsProps {\n open?: boolean\n columns: Column[]\n settings: Partial<DataListSettings>\n position?: SidebarPosition\n storageKey: string\n orderable?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { ref, computed, onMounted, watch } from 'vue'\nimport Sidebar, { type SidebarPosition } from '@/components/Sidebar.vue'\n\nconst props = withDefaults(defineProps<DataListOptionsProps>(), {\n orderable: false,\n})\n\nconst emit = defineEmits<{\n close: []\n change: [settings: DataListSettings]\n}>()\n\nconst local = ref<DataListSettings>(getDefaults())\n\nconst storageKey = computed(() => `data-list-${props.storageKey}`)\n\nconst hasCustomSettings = computed(\n () => JSON.stringify(local.value) !== JSON.stringify(getDefaults()),\n)\n\nfunction isColumnLocked(col: Column): boolean {\n return col.primary === true || col.hideable === false\n}\n\nfunction applyLockedOverrides(s: DataListSettings) {\n for (const col of props.columns) {\n if (isColumnLocked(col)) {\n s.columns[col.property] = true\n s.cardHeaderColumns[col.property] = true\n }\n }\n}\n\nfunction getDefaults(): DataListSettings {\n return {\n ...dataCardsSettingsDefaults,\n ...dataTableSettingsDefaults,\n ...dataListSettingsDefaults,\n ...props.settings,\n columns: Object.fromEntries(\n props.columns.map((c) => [\n c.property,\n props.settings.columns?.[c.property] ?? c.visible !== false,\n ]),\n ),\n cardHeaderColumns: Object.fromEntries(\n props.columns.map((c) => [\n c.property,\n props.settings.cardHeaderColumns?.[c.property] ??\n (c.primary === true || c.hideable === false || c.defaultCardHeader === true),\n ]),\n ),\n columnOrder: props.settings.columnOrder ?? props.columns.map((c) => c.property),\n cardHeaderOrder: props.settings.cardHeaderOrder ?? props.columns.map((c) => c.property),\n } as DataListSettings\n}\n\nfunction load() {\n try {\n const raw = localStorage.getItem(storageKey.value)\n const defaults = getDefaults()\n if (raw) {\n const data = JSON.parse(raw)\n local.value = data.settings\n ? reconcileOrders(deepMerge(defaults, data.settings) as DataListSettings, props.columns)\n : defaults\n } else {\n local.value = defaults\n }\n } catch {\n local.value = getDefaults()\n }\n applyLockedOverrides(local.value)\n emit('change', local.value)\n}\n\nfunction reconcileOrders(settings: DataListSettings, columns: Column[]): DataListSettings {\n const sourceOrder = columns.map((c) => c.property)\n const reconcile = (order: string[] | undefined): string[] => {\n const saved = (order ?? []).filter((p) => sourceOrder.includes(p))\n const savedSet = new Set(saved)\n const merged: string[] = []\n let savedIdx = 0\n for (const property of sourceOrder) {\n if (savedSet.has(property)) {\n merged.push(saved[savedIdx++]!)\n } else {\n merged.push(property)\n }\n }\n return merged\n }\n return {\n ...settings,\n columnOrder: reconcile(settings.columnOrder),\n cardHeaderOrder: reconcile(settings.cardHeaderOrder),\n }\n}\n\nfunction save() {\n try {\n const key = storageKey.value\n const raw = localStorage.getItem(key)\n const data = raw ? JSON.parse(raw) : {}\n data.settings = local.value\n localStorage.setItem(key, JSON.stringify(data))\n } catch (e) {\n console.error(e)\n }\n emit('change', local.value)\n}\n\nfunction update<K extends keyof DataListSettings>(key: K, value: DataListSettings[K]) {\n local.value = { ...local.value, [key]: value }\n save()\n}\n\nfunction toggleColumn(property: string) {\n update('columns', { ...local.value.columns, [property]: !local.value.columns[property] })\n}\n\nfunction toggleCardHeaderColumn(property: string) {\n update('cardHeaderColumns', {\n ...local.value.cardHeaderColumns,\n [property]: !local.value.cardHeaderColumns[property],\n })\n}\n\nfunction toggle(key: 'striped' | 'compact' | 'filtersEager') {\n update(key, !local.value[key])\n}\n\nfunction sortByOrder(cols: Column[], order: string[]) {\n return [...cols].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\nconst orderedColumns = computed(() => sortByOrder(props.columns, local.value.columnOrder))\n\nconst orderedCardHeaderColumns = computed(() =>\n sortByOrder(props.columns, local.value.cardHeaderOrder),\n)\n\nconst dragIndex = ref<number | null>(null)\nconst selectedReorderIndex = ref<number | null>(null)\n\nconst cardHeaderDragIndex = ref<number | null>(null)\nconst selectedCardHeaderIndex = ref<number | null>(null)\n\nfunction onDragStart(index: number) {\n dragIndex.value = index\n}\n\nfunction onDragOver(e: DragEvent, index: number) {\n e.preventDefault()\n if (dragIndex.value === null || dragIndex.value === index) return\n const order = [...local.value.columnOrder]\n const moved = order.splice(dragIndex.value, 1)[0]\n if (!moved) return\n order.splice(index, 0, moved)\n dragIndex.value = index\n update('columnOrder', order)\n}\n\nfunction onDragEnd() {\n dragIndex.value = null\n}\n\nfunction selectForReorder(index: number) {\n selectedReorderIndex.value = selectedReorderIndex.value === index ? null : index\n}\n\nfunction moveSelected(direction: -1 | 1) {\n if (selectedReorderIndex.value === null) return\n const target = selectedReorderIndex.value + direction\n if (target < 0 || target >= local.value.columnOrder.length) return\n const order = [...local.value.columnOrder]\n const tmp = order[selectedReorderIndex.value]!\n order[selectedReorderIndex.value] = order[target]!\n order[target] = tmp\n update('columnOrder', order)\n selectedReorderIndex.value = target\n}\n\nfunction onCardHeaderDragStart(index: number) {\n cardHeaderDragIndex.value = index\n}\n\nfunction onCardHeaderDragOver(e: DragEvent, index: number) {\n e.preventDefault()\n if (cardHeaderDragIndex.value === null || cardHeaderDragIndex.value === index) return\n const order = [...local.value.cardHeaderOrder]\n const moved = order.splice(cardHeaderDragIndex.value, 1)[0]\n if (!moved) return\n order.splice(index, 0, moved)\n cardHeaderDragIndex.value = index\n update('cardHeaderOrder', order)\n}\n\nfunction onCardHeaderDragEnd() {\n cardHeaderDragIndex.value = null\n}\n\nfunction selectCardHeader(index: number) {\n selectedCardHeaderIndex.value = selectedCardHeaderIndex.value === index ? null : index\n}\n\nfunction moveCardHeader(direction: -1 | 1) {\n if (selectedCardHeaderIndex.value === null) return\n const target = selectedCardHeaderIndex.value + direction\n if (target < 0 || target >= local.value.cardHeaderOrder.length) return\n const order = [...local.value.cardHeaderOrder]\n const tmp = order[selectedCardHeaderIndex.value]!\n order[selectedCardHeaderIndex.value] = order[target]!\n order[target] = tmp\n update('cardHeaderOrder', order)\n selectedCardHeaderIndex.value = target\n}\n\nfunction reset() {\n localStorage.removeItem(storageKey.value)\n local.value = getDefaults()\n emit('change', local.value)\n}\n\nonMounted(load)\n\nwatch(\n () => props.columns,\n () => {\n local.value = reconcileOrders(local.value, props.columns)\n applyLockedOverrides(local.value)\n },\n)\n</script>\n\n<template>\n <Sidebar :open=\"open\" title=\"Lista beállítások\" :position=\"props.position\" @close=\"emit('close')\">\n <div class=\"list-options basic\">\n <div class=\"list-options__col\">\n <h4 class=\"list-options__title\">\n Elrendezés\n <span class=\"list-options__title-value\"\n >—\n {{\n local.layout === 'screen' ? 'Auto' : local.layout === 'table' ? 'Táblázat' : 'Kártyák'\n }}</span\n >\n </h4>\n <div class=\"layout-switch\">\n <button\n class=\"layout-switch__btn\"\n :class=\"{ 'layout-switch__btn--active': local.layout === 'screen' }\"\n title=\"Kijelző méretéhez igazodó elrendezés\"\n @click=\"update('layout', 'screen')\"\n >\n <i class=\"fa-solid fa-display\"></i>\n </button>\n <button\n class=\"layout-switch__btn\"\n :class=\"{ 'layout-switch__btn--active': local.layout === 'table' }\"\n title=\"Táblázat nézet\"\n @click=\"update('layout', 'table')\"\n >\n <i class=\"fa-solid fa-table-list\"></i>\n </button>\n <button\n class=\"layout-switch__btn\"\n :class=\"{ 'layout-switch__btn--active': local.layout === 'cards' }\"\n title=\"Kártya nézet\"\n @click=\"update('layout', 'cards')\"\n >\n <i class=\"fa-solid fa-list\"></i>\n </button>\n </div>\n </div>\n\n <div class=\"list-options__col\">\n <h4\n class=\"list-options__title\"\n v-tooltip.html=\"\n '<b>Kompakt</b>: A sorok közötti térköz csökkentése<br><br><b>Sávos</b> (csak táblázat nézetben): A páros sorok háttere kicsit sötétebb '\n \"\n >\n Megjelenés <i class=\"fa-regular fa-question-circle\"></i>\n </h4>\n <ul class=\"list-options__list\">\n <li\n class=\"list-options__item\"\n @click=\"toggle('compact')\"\n title=\"A sorok közötti térköz csökkentése\"\n >\n <span\n class=\"c-checkbox\"\n :class=\"{ 'c-checkbox--checked': local.compact }\"\n @click.stop=\"toggle('compact')\"\n ></span>\n <span>Kompakt</span>\n </li>\n <li\n class=\"list-options__item\"\n @click=\"toggle('striped')\"\n title=\"A páros sorok háttere kicsit sötétebb (csak táblázat nézetben)\"\n >\n <span\n class=\"c-checkbox\"\n :class=\"{ 'c-checkbox--checked': local.striped }\"\n @click.stop=\"toggle('striped')\"\n ></span>\n <span>Sávos (striped)</span>\n </li>\n </ul>\n </div>\n <div class=\"list-options__col list-options__col--full\">\n <h4\n class=\"list-options__title\"\n v-tooltip=\"'Betűméret: a lista összes szövegének alap mérete'\"\n >\n Betűméret\n <span class=\"list-options__title-value\"\n >—\n {{\n local.fontSize === 'small' ? 'Kicsi' : local.fontSize === 'normal' ? 'Normál' : 'Nagy'\n }}</span\n >\n </h4>\n <div class=\"layout-switch\">\n <button\n class=\"layout-switch__btn\"\n :class=\"{ 'layout-switch__btn--active': local.fontSize === 'small' }\"\n title=\"Kis betűméret\"\n @click=\"update('fontSize', 'small')\"\n >\n <i class=\"fa-solid fa-a\" style=\"font-size: 0.725em\"></i>\n </button>\n <button\n class=\"layout-switch__btn\"\n :class=\"{ 'layout-switch__btn--active': local.fontSize === 'normal' }\"\n title=\"Normál betűméret\"\n @click=\"update('fontSize', 'normal')\"\n >\n <i class=\"fa-solid fa-a\" style=\"font-size: 0.825rem\"></i>\n </button>\n <button\n class=\"layout-switch__btn\"\n :class=\"{ 'layout-switch__btn--active': local.fontSize === 'large' }\"\n title=\"Nagy betűméret\"\n @click=\"update('fontSize', 'large')\"\n >\n <i class=\"fa-solid fa-a\" style=\"font-size: 1.25em\"></i>\n </button>\n </div>\n </div>\n <div class=\"list-options__col\">\n <h4 class=\"list-options__title\" v-tooltip=\"'Táblázat nézetben megjelenő oszlopok'\">\n Táblázat oszlopok <i class=\"fa-regular fa-question-circle\"></i>\n </h4>\n <ul class=\"list-options__list\">\n <li\n v-for=\"(col, index) in orderedColumns\"\n :key=\"col.property\"\n class=\"list-options__item\"\n :class=\"{\n 'list-options__item--disabled': isColumnLocked(col),\n 'list-options__item--selected': orderable && selectedReorderIndex === index,\n 'list-options__item--dragging': orderable && dragIndex === index,\n }\"\n :draggable=\"orderable\"\n @dragstart.stop=\"orderable && onDragStart(index)\"\n @dragover.prevent=\"orderable && onDragOver($event, index)\"\n @drop.prevent\n @dragend=\"orderable && onDragEnd()\"\n @click.prevent=\"\n orderable\n ? selectForReorder(index)\n : !isColumnLocked(col) && toggleColumn(col.property)\n \"\n >\n <i v-if=\"orderable\" class=\"fa-solid fa-grip-vertical list-options__drag-handle\"></i>\n <span\n class=\"list-options__toggle\"\n @click.stop=\"!isColumnLocked(col) && toggleColumn(col.property)\"\n >\n <span\n class=\"c-checkbox\"\n :class=\"{ 'c-checkbox--checked': local.columns[col.property] }\"\n ></span>\n <span>{{ col.label }}</span>\n </span>\n </li>\n </ul>\n <div v-if=\"orderable && selectedReorderIndex !== null\" class=\"list-options__move-actions\">\n <button\n class=\"list-options__move-btn\"\n :disabled=\"selectedReorderIndex === 0\"\n @click=\"moveSelected(-1)\"\n >\n <i class=\"fa-solid fa-arrow-up\"></i>\n </button>\n <button\n class=\"list-options__move-btn\"\n :disabled=\"selectedReorderIndex === orderedColumns.length - 1\"\n @click=\"moveSelected(1)\"\n >\n <i class=\"fa-solid fa-arrow-down\"></i>\n </button>\n </div>\n </div>\n <div class=\"list-options__col\">\n <h4\n class=\"list-options__title flex-center gap-1\"\n v-tooltip=\"'Kártya nézetben, a sorok fejlécén megjelenő oszlopok'\"\n >\n Kártya fejléc <i class=\"fa-regular fa-question-circle\"></i>\n </h4>\n <ul class=\"list-options__list\">\n <li\n v-for=\"(col, index) in orderedCardHeaderColumns\"\n :key=\"'ch-' + col.property\"\n class=\"list-options__item\"\n :class=\"{\n 'list-options__item--disabled': isColumnLocked(col),\n 'list-options__item--selected': orderable && selectedCardHeaderIndex === index,\n 'list-options__item--dragging': orderable && cardHeaderDragIndex === index,\n }\"\n :draggable=\"orderable\"\n @dragstart.stop=\"orderable && onCardHeaderDragStart(index)\"\n @dragover.prevent=\"orderable && onCardHeaderDragOver($event, index)\"\n @drop.prevent\n @dragend=\"orderable && onCardHeaderDragEnd()\"\n @click.prevent=\"\n orderable\n ? selectCardHeader(index)\n : !isColumnLocked(col) && toggleCardHeaderColumn(col.property)\n \"\n >\n <i v-if=\"orderable\" class=\"fa-solid fa-grip-vertical list-options__drag-handle\"></i>\n <span\n class=\"list-options__toggle\"\n @click.stop=\"!isColumnLocked(col) && toggleCardHeaderColumn(col.property)\"\n >\n <span\n class=\"c-checkbox\"\n :class=\"{ 'c-checkbox--checked': local.cardHeaderColumns[col.property] }\"\n ></span>\n <span>{{ col.label }}</span>\n </span>\n </li>\n </ul>\n <div\n v-if=\"orderable && selectedCardHeaderIndex !== null\"\n class=\"list-options__move-actions\"\n >\n <button\n class=\"list-options__move-btn\"\n :disabled=\"selectedCardHeaderIndex === 0\"\n @click=\"moveCardHeader(-1)\"\n >\n <i class=\"fa-solid fa-arrow-up\"></i>\n </button>\n <button\n class=\"list-options__move-btn\"\n :disabled=\"selectedCardHeaderIndex === orderedCardHeaderColumns.length - 1\"\n @click=\"moveCardHeader(1)\"\n >\n <i class=\"fa-solid fa-arrow-down\"></i>\n </button>\n </div>\n </div>\n </div>\n <hr class=\"separator my-3\" />\n <div class=\"list-options-footer\">\n <Button\n icon=\"fa-solid fa-triangle-exclamation\"\n :disabled=\"!hasCustomSettings\"\n label=\"Alapértelmezés visszaállítása\"\n size=\"small\"\n @click=\"reset\"\n />\n <Button label=\"OK\" @click=\"emit('close')\" />\n </div>\n <hr class=\"separator my-3\" />\n <div class=\"list-options advanced\">\n <div class=\"list-options__col\">\n <h4\n class=\"list-options__title\"\n v-tooltip.html=\"\n '<b>Azonnali szűrés</b>: Bekapcsolt állapotban a szűrő mezők módosítása azonnal érvénybe lép, míg kikapcsolva csak a „Szűrés” gombra kattintva kerülnek alkalmazásra.'\n \"\n >\n Haladó beállítások <i class=\"fa-regular fa-question-circle\"></i>\n </h4>\n <ul class=\"list-options__list\">\n <li\n class=\"list-options__item\"\n @click=\"toggle('filtersEager')\"\n title=\"Bekapcsolt állapotban a szűrő mezők módosítása azonnal érvénybe lép\"\n >\n <span\n class=\"c-checkbox\"\n :class=\"{ 'c-checkbox--checked': local.filtersEager }\"\n @click.stop=\"toggle('filtersEager')\"\n ></span>\n <span>Azonnali szűrés</span>\n </li>\n </ul>\n </div>\n </div>\n </Sidebar>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/data-table/data-list-options.scss\"></style>\n"],"mappings":""}
|
|
@@ -3,19 +3,19 @@ import { getFullStorageKey as t } from "./admins-components78.js";
|
|
|
3
3
|
import { readUrlNumber as n, writeUrlOrRemove as r } from "./admins-components79.js";
|
|
4
4
|
import { Fragment as i, computed as a, createElementBlock as o, createElementVNode as s, createVNode as c, defineComponent as l, normalizeClass as u, onMounted as d, openBlock as f, renderList as p, toDisplayString as m } from "vue";
|
|
5
5
|
//#region src/components/data-table/DataPaginator.vue?vue&type=script&setup=true&lang.ts
|
|
6
|
-
var h = { class: "
|
|
6
|
+
var h = { class: "c-paginator" }, g = { class: "c-paginator__info" }, _ = { class: "c-paginator__range" }, v = { class: "c-paginator__total" }, y = {
|
|
7
7
|
class: "c-paginator__nav",
|
|
8
8
|
"aria-label": "Pagination"
|
|
9
|
-
},
|
|
9
|
+
}, b = {
|
|
10
10
|
key: 0,
|
|
11
11
|
class: "c-paginator__ellipsis"
|
|
12
|
-
},
|
|
12
|
+
}, x = ["onClick"], S = { class: "c-paginator__size" }, C = ["value"], w = ["value"], T = [
|
|
13
13
|
10,
|
|
14
14
|
25,
|
|
15
15
|
50,
|
|
16
16
|
100
|
|
17
|
-
],
|
|
18
|
-
function
|
|
17
|
+
], E = 25;
|
|
18
|
+
function D(e) {
|
|
19
19
|
let r = n("pageSize");
|
|
20
20
|
if (r != null) return r;
|
|
21
21
|
try {
|
|
@@ -27,16 +27,16 @@ function O(e) {
|
|
|
27
27
|
} catch {
|
|
28
28
|
console.warn("Failed to read page size from localStorage");
|
|
29
29
|
}
|
|
30
|
-
return
|
|
30
|
+
return E;
|
|
31
31
|
}
|
|
32
|
-
function
|
|
32
|
+
function O(e) {
|
|
33
33
|
return {
|
|
34
34
|
total: 0,
|
|
35
35
|
page: n("page") ?? 1,
|
|
36
|
-
pageSize:
|
|
36
|
+
pageSize: D(e)
|
|
37
37
|
};
|
|
38
38
|
}
|
|
39
|
-
var
|
|
39
|
+
var k = /*@__PURE__*/ l({
|
|
40
40
|
__name: "DataPaginator",
|
|
41
41
|
props: {
|
|
42
42
|
settings: {},
|
|
@@ -44,26 +44,27 @@ var A = /*@__PURE__*/ l({
|
|
|
44
44
|
handleUrl: {
|
|
45
45
|
type: Boolean,
|
|
46
46
|
default: !1
|
|
47
|
-
}
|
|
47
|
+
},
|
|
48
|
+
fontSize: { default: "normal" }
|
|
48
49
|
},
|
|
49
50
|
emits: ["update:pagination"],
|
|
50
|
-
setup(l, { emit:
|
|
51
|
-
let
|
|
52
|
-
function
|
|
51
|
+
setup(l, { emit: E }) {
|
|
52
|
+
let D = l, O = E;
|
|
53
|
+
function k(e) {
|
|
53
54
|
try {
|
|
54
|
-
localStorage.setItem(t("pagination",
|
|
55
|
+
localStorage.setItem(t("pagination", D.storageKey), String(e));
|
|
55
56
|
} catch {
|
|
56
57
|
console.warn("Failed to save page size to localStorage");
|
|
57
58
|
}
|
|
58
59
|
}
|
|
59
|
-
let
|
|
60
|
-
let e =
|
|
61
|
-
if (e <=
|
|
60
|
+
let A = a(() => Math.max(1, Math.ceil(D.settings.total / D.settings.pageSize))), j = a(() => D.settings.total === 0 ? 0 : (D.settings.page - 1) * D.settings.pageSize + 1), M = a(() => Math.min(D.settings.page * D.settings.pageSize, D.settings.total)), N = a(() => {
|
|
61
|
+
let e = A.value, t = D.settings.page;
|
|
62
|
+
if (e <= P) {
|
|
62
63
|
let t = [];
|
|
63
64
|
for (let n = 1; n <= e; n++) t.push(n);
|
|
64
65
|
return t;
|
|
65
66
|
}
|
|
66
|
-
let n =
|
|
67
|
+
let n = P - 2, r = t - 1, i = t + 1;
|
|
67
68
|
for (r < 2 && (i = Math.min(e - 1, i + (2 - r)), r = 2), i > e - 1 && (r = Math.max(2, r - (i - (e - 1))), i = e - 1); i - r + 1 < n;) {
|
|
68
69
|
let t = r > 2, a = i < e - 1;
|
|
69
70
|
if (!t && !a) break;
|
|
@@ -74,73 +75,73 @@ var A = /*@__PURE__*/ l({
|
|
|
74
75
|
s.push(1), a && s.push("...");
|
|
75
76
|
for (let e = r; e <= i; e++) s.push(e);
|
|
76
77
|
return o && s.push("..."), s.push(e), s;
|
|
77
|
-
}),
|
|
78
|
-
function
|
|
79
|
-
let t =
|
|
78
|
+
}), P = 7;
|
|
79
|
+
function F(e) {
|
|
80
|
+
let t = D.settings.page, n = A.value, r = e === 1 || e === n, i = e === t;
|
|
80
81
|
return t > 3 && t < n - 2 && !r && !i;
|
|
81
82
|
}
|
|
82
|
-
function
|
|
83
|
-
e < 1 || e >
|
|
84
|
-
handleUrl:
|
|
83
|
+
function I(e) {
|
|
84
|
+
e < 1 || e > A.value || e === D.settings.page || (r("page", e, {
|
|
85
|
+
handleUrl: D.handleUrl,
|
|
85
86
|
default: 1
|
|
86
|
-
}), r("pageSize",
|
|
87
|
+
}), r("pageSize", D.settings.pageSize, { handleUrl: D.handleUrl }), O("update:pagination", {
|
|
87
88
|
page: e,
|
|
88
|
-
pageSize:
|
|
89
|
+
pageSize: D.settings.pageSize
|
|
89
90
|
}));
|
|
90
91
|
}
|
|
91
|
-
function
|
|
92
|
+
function L(e) {
|
|
92
93
|
let t = Number(e.target.value);
|
|
93
|
-
|
|
94
|
-
handleUrl:
|
|
94
|
+
k(t), r("pageSize", t, { handleUrl: D.handleUrl }), r("page", 1, {
|
|
95
|
+
handleUrl: D.handleUrl,
|
|
95
96
|
default: 1
|
|
96
|
-
}),
|
|
97
|
+
}), O("update:pagination", {
|
|
97
98
|
page: 1,
|
|
98
99
|
pageSize: t
|
|
99
100
|
});
|
|
100
101
|
}
|
|
101
102
|
return d(() => {
|
|
102
|
-
if (!
|
|
103
|
+
if (!D.handleUrl) return;
|
|
103
104
|
let e = n("pageSize"), t = n("page");
|
|
104
|
-
e != null && t != null && (e !==
|
|
105
|
+
e != null && t != null && (e !== D.settings.pageSize || t !== D.settings.page) && O("update:pagination", {
|
|
105
106
|
page: t,
|
|
106
107
|
pageSize: e
|
|
107
108
|
});
|
|
108
|
-
}), (t, n) => (f(), o("div",
|
|
109
|
-
s("div",
|
|
110
|
-
s("nav",
|
|
109
|
+
}), (t, n) => (f(), o("div", { class: u(["ac-component c-paginator-wrapper", [`is-font-${l.fontSize}`]]) }, [s("div", h, [
|
|
110
|
+
s("div", g, [s("span", _, m(j.value) + "–" + m(M.value), 1), s("span", v, " / " + m(l.settings.total), 1)]),
|
|
111
|
+
s("nav", y, [
|
|
111
112
|
c(e, {
|
|
112
113
|
icon: "fa-solid fa-chevron-left",
|
|
113
114
|
rel: "prev",
|
|
114
115
|
disabled: l.settings.page <= 1,
|
|
115
|
-
callback: () =>
|
|
116
|
+
callback: () => I(l.settings.page - 1)
|
|
116
117
|
}, null, 8, ["disabled", "callback"]),
|
|
117
|
-
(f(!0), o(i, null, p(
|
|
118
|
+
(f(!0), o(i, null, p(N.value, (e, t) => (f(), o(i, { key: t }, [e === "..." ? (f(), o("span", b, "…")) : (f(), o("button", {
|
|
118
119
|
key: 1,
|
|
119
120
|
type: "button",
|
|
120
121
|
class: u(["c-paginator__page", {
|
|
121
122
|
"is-active": e === l.settings.page,
|
|
122
|
-
"is-hidden-sm":
|
|
123
|
+
"is-hidden-sm": F(e)
|
|
123
124
|
}]),
|
|
124
|
-
onClick: (t) =>
|
|
125
|
-
}, m(e), 11,
|
|
125
|
+
onClick: (t) => I(e)
|
|
126
|
+
}, m(e), 11, x))], 64))), 128)),
|
|
126
127
|
c(e, {
|
|
127
128
|
icon: "fa-solid fa-chevron-right",
|
|
128
129
|
rel: "next",
|
|
129
|
-
disabled: l.settings.page >=
|
|
130
|
-
callback: () =>
|
|
130
|
+
disabled: l.settings.page >= A.value,
|
|
131
|
+
callback: () => I(l.settings.page + 1)
|
|
131
132
|
}, null, 8, ["disabled", "callback"])
|
|
132
133
|
]),
|
|
133
|
-
s("div",
|
|
134
|
+
s("div", S, [s("select", {
|
|
134
135
|
class: "c-paginator__select",
|
|
135
136
|
id: "page-size-select",
|
|
136
137
|
value: l.settings.pageSize,
|
|
137
|
-
onChange:
|
|
138
|
-
}, [(f(), o(i, null, p(
|
|
138
|
+
onChange: L
|
|
139
|
+
}, [(f(), o(i, null, p(T, (e) => s("option", {
|
|
139
140
|
key: e,
|
|
140
141
|
value: e
|
|
141
|
-
}, m(e) + " elem / oldal", 9,
|
|
142
|
-
])]));
|
|
142
|
+
}, m(e) + " elem / oldal", 9, w)), 64))], 40, C)])
|
|
143
|
+
])], 2));
|
|
143
144
|
}
|
|
144
145
|
});
|
|
145
146
|
//#endregion
|
|
146
|
-
export {
|
|
147
|
+
export { k as default, O as getDefaultPaginator, D as getPageSize };
|
|
@@ -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<{ settings: PaginatorSettings; storageKey: string; handleUrl?: boolean }>(),\n { handleUrl: false },\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\">\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'\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 +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<{
|
|
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?: '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":""}
|
|
@@ -1,24 +1,24 @@
|
|
|
1
|
-
import { DataListConfig,
|
|
1
|
+
import { DataListConfig, DataListSettings } from '../../types/data-list';
|
|
2
2
|
export { dataCardsSettingsDefaults } from '../../types/data-list';
|
|
3
3
|
declare const _default: typeof __VLS_export;
|
|
4
4
|
export default _default;
|
|
5
5
|
declare const __VLS_export: __VLS_WithSlots<import('vue').DefineComponent<{
|
|
6
6
|
config: DataListConfig;
|
|
7
7
|
items: Record<string, unknown>[];
|
|
8
|
-
settings?:
|
|
8
|
+
settings?: Partial<DataListSettings>;
|
|
9
9
|
loading?: boolean;
|
|
10
10
|
}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
|
|
11
11
|
"selection-change": (selected: unknown[]) => any;
|
|
12
12
|
}, string, import('vue').PublicProps, Readonly<{
|
|
13
13
|
config: DataListConfig;
|
|
14
14
|
items: Record<string, unknown>[];
|
|
15
|
-
settings?:
|
|
15
|
+
settings?: Partial<DataListSettings>;
|
|
16
16
|
loading?: boolean;
|
|
17
17
|
}> & Readonly<{
|
|
18
18
|
"onSelection-change"?: ((selected: unknown[]) => any) | undefined;
|
|
19
19
|
}>, {
|
|
20
20
|
loading: boolean;
|
|
21
|
-
settings:
|
|
21
|
+
settings: Partial<DataListSettings>;
|
|
22
22
|
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>, {
|
|
23
23
|
[x: string]: ((props: {
|
|
24
24
|
item: any;
|
|
@@ -19,6 +19,10 @@ export interface DataListProps {
|
|
|
19
19
|
searchConfig?: DataSearchProps;
|
|
20
20
|
filterConfig?: DataFiltersProps;
|
|
21
21
|
fillHeight?: boolean;
|
|
22
|
+
defaultSort?: {
|
|
23
|
+
key: string;
|
|
24
|
+
direction: 'asc' | 'desc';
|
|
25
|
+
} | null;
|
|
22
26
|
}
|
|
23
27
|
export declare const dataListDefaults: {
|
|
24
28
|
layoutBreakpoint: number;
|
|
@@ -7,14 +7,17 @@ declare const __VLS_export: import('vue').DefineComponent<{
|
|
|
7
7
|
settings: PaginatorSettings;
|
|
8
8
|
storageKey: string;
|
|
9
9
|
handleUrl?: boolean;
|
|
10
|
+
fontSize?: "small" | "normal" | "large";
|
|
10
11
|
}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
|
|
11
12
|
"update:pagination": (pagination: PageSettings) => any;
|
|
12
13
|
}, string, import('vue').PublicProps, Readonly<{
|
|
13
14
|
settings: PaginatorSettings;
|
|
14
15
|
storageKey: string;
|
|
15
16
|
handleUrl?: boolean;
|
|
17
|
+
fontSize?: "small" | "normal" | "large";
|
|
16
18
|
}> & Readonly<{
|
|
17
19
|
"onUpdate:pagination"?: ((pagination: PageSettings) => any) | undefined;
|
|
18
20
|
}>, {
|
|
21
|
+
fontSize: "small" | "normal" | "large";
|
|
19
22
|
handleUrl: boolean;
|
|
20
23
|
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
|