admins-components 9.0.76 → 9.0.78
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/admins-components100.js.map +1 -1
- package/dist/admins-components102.js.map +1 -1
- package/dist/admins-components103.js.map +1 -1
- package/dist/admins-components105.js.map +1 -1
- package/dist/admins-components109.js.map +1 -1
- package/dist/admins-components11.js.map +1 -1
- package/dist/admins-components112.js.map +1 -1
- package/dist/admins-components12.js +44 -29
- package/dist/admins-components12.js.map +1 -1
- package/dist/admins-components13.js.map +1 -1
- package/dist/admins-components14.js.map +1 -1
- package/dist/admins-components169.js.map +1 -1
- package/dist/admins-components173.js +2 -2
- package/dist/admins-components173.js.map +1 -1
- package/dist/admins-components174.js.map +1 -1
- package/dist/admins-components179.js.map +1 -1
- package/dist/admins-components21.js.map +1 -1
- package/dist/admins-components22.js.map +1 -1
- package/dist/admins-components26.js +88 -82
- package/dist/admins-components26.js.map +1 -1
- package/dist/admins-components28.js.map +1 -1
- package/dist/admins-components31.js.map +1 -1
- package/dist/admins-components35.js +25 -23
- package/dist/admins-components35.js.map +1 -1
- package/dist/admins-components37.js.map +1 -1
- package/dist/admins-components46.js.map +1 -1
- package/dist/admins-components48.js.map +1 -1
- package/dist/admins-components54.js.map +1 -1
- package/dist/admins-components56.js.map +1 -1
- package/dist/admins-components65.js.map +1 -1
- package/dist/admins-components68.js.map +1 -1
- package/dist/admins-components70.js.map +1 -1
- package/dist/admins-components75.js.map +1 -1
- package/dist/admins-components77.js.map +1 -1
- package/dist/admins-components79.js.map +1 -1
- package/dist/admins-components8.js.map +1 -1
- package/dist/admins-components80.js.map +1 -1
- package/dist/admins-components82.js.map +1 -1
- package/dist/admins-components83.js.map +1 -1
- package/dist/admins-components85.js.map +1 -1
- package/dist/admins-components86.js.map +1 -1
- package/dist/admins-components87.js.map +1 -1
- package/dist/admins-components91.js.map +1 -1
- package/dist/admins-components93.js.map +1 -1
- package/dist/main.css +1 -1
- package/dist/main.css.map +1 -1
- package/dist/src/components/HeaderComponent.vue.d.ts +3 -0
- package/dist/src/composables/useDropdownAnchor.d.ts +2 -0
- package/dist/src/composables/useSwipeToClose.d.ts +0 -31
- package/dist/src/utils/dataFilters.d.ts +0 -8
- package/dist/src/utils/dataListConverters.d.ts +0 -10
- package/dist/src/utils/url.d.ts +0 -11
- package/dist/styles/components/dropdown-select.scss_vue_type_style_index_0_src_true_lang.css +1 -1
- package/dist/styles/components/header.scss_vue_type_style_index_0_src_true_lang.css +1 -1
- package/dist/vueformelements/ArticlePickerElement.vue_vue_type_style_index_0_scoped_54217a66_lang.css +1 -0
- package/package.json +1 -1
- package/dist/vueformelements/ArticlePickerElement.vue_vue_type_style_index_0_scoped_43c54caa_lang.css +0 -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\n// Force locked columns to true in both column maps, regardless of saved state.\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 // Saved order, restricted to columns that still exist in the source config.\n const saved = (order ?? []).filter((p) => sourceOrder.includes(p))\n const savedSet = new Set(saved)\n // Walk the source-code order. For each property:\n // - if it was saved, pull it from the saved sequence in saved order\n // - if it's new, insert it at its source-code position\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 /* ignore */\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') {\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\n// If the columns prop changes at runtime, re-reconcile the orders so new\n// columns appear at their source-code position, and re-apply locked overrides.\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=\"table-options\">\n <div class=\"table-options__col\">\n <h4 class=\"table-options__title\">\n Elrendezés\n <span class=\"table-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=\"table-options__col\">\n <h4\n class=\"table-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=\"table-options__list\">\n <li\n class=\"table-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=\"table-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=\"table-options__col\">\n <h4 class=\"table-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=\"table-options__list\">\n <li\n v-for=\"(col, index) in orderedColumns\"\n :key=\"col.property\"\n class=\"table-options__item\"\n :class=\"{\n 'table-options__item--disabled': isColumnLocked(col),\n 'table-options__item--selected': orderable && selectedReorderIndex === index,\n 'table-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 table-options__drag-handle\"></i>\n <span\n class=\"table-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=\"table-options__move-actions\">\n <button\n class=\"table-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=\"table-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=\"table-options__col\">\n <h4\n class=\"table-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=\"table-options__list\">\n <li\n v-for=\"(col, index) in orderedCardHeaderColumns\"\n :key=\"'ch-' + col.property\"\n class=\"table-options__item\"\n :class=\"{\n 'table-options__item--disabled': isColumnLocked(col),\n 'table-options__item--selected': orderable && selectedCardHeaderIndex === index,\n 'table-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 table-options__drag-handle\"></i>\n <span\n class=\"table-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=\"table-options__move-actions\"\n >\n <button\n class=\"table-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=\"table-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 <div class=\"table-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 </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 /* ignore */\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') {\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=\"table-options\">\n <div class=\"table-options__col\">\n <h4 class=\"table-options__title\">\n Elrendezés\n <span class=\"table-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=\"table-options__col\">\n <h4\n class=\"table-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=\"table-options__list\">\n <li\n class=\"table-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=\"table-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=\"table-options__col\">\n <h4 class=\"table-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=\"table-options__list\">\n <li\n v-for=\"(col, index) in orderedColumns\"\n :key=\"col.property\"\n class=\"table-options__item\"\n :class=\"{\n 'table-options__item--disabled': isColumnLocked(col),\n 'table-options__item--selected': orderable && selectedReorderIndex === index,\n 'table-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 table-options__drag-handle\"></i>\n <span\n class=\"table-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=\"table-options__move-actions\">\n <button\n class=\"table-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=\"table-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=\"table-options__col\">\n <h4\n class=\"table-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=\"table-options__list\">\n <li\n v-for=\"(col, index) in orderedCardHeaderColumns\"\n :key=\"'ch-' + col.property\"\n class=\"table-options__item\"\n :class=\"{\n 'table-options__item--disabled': isColumnLocked(col),\n 'table-options__item--selected': orderable && selectedCardHeaderIndex === index,\n 'table-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 table-options__drag-handle\"></i>\n <span\n class=\"table-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=\"table-options__move-actions\"\n >\n <button\n class=\"table-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=\"table-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 <div class=\"table-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 </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\n// Force locked columns to true in both column maps, regardless of saved state.\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 // Saved order, restricted to columns that still exist in the source config.\n const saved = (order ?? []).filter((p) => sourceOrder.includes(p))\n const savedSet = new Set(saved)\n // Walk the source-code order. For each property:\n // - if it was saved, pull it from the saved sequence in saved order\n // - if it's new, insert it at its source-code position\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 /* ignore */\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') {\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\n// If the columns prop changes at runtime, re-reconcile the orders so new\n// columns appear at their source-code position, and re-apply locked overrides.\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=\"table-options\">\n <div class=\"table-options__col\">\n <h4 class=\"table-options__title\">\n Elrendezés\n <span class=\"table-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=\"table-options__col\">\n <h4\n class=\"table-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=\"table-options__list\">\n <li\n class=\"table-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=\"table-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=\"table-options__col\">\n <h4 class=\"table-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=\"table-options__list\">\n <li\n v-for=\"(col, index) in orderedColumns\"\n :key=\"col.property\"\n class=\"table-options__item\"\n :class=\"{\n 'table-options__item--disabled': isColumnLocked(col),\n 'table-options__item--selected': orderable && selectedReorderIndex === index,\n 'table-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 table-options__drag-handle\"></i>\n <span\n class=\"table-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=\"table-options__move-actions\">\n <button\n class=\"table-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=\"table-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=\"table-options__col\">\n <h4\n class=\"table-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=\"table-options__list\">\n <li\n v-for=\"(col, index) in orderedCardHeaderColumns\"\n :key=\"'ch-' + col.property\"\n class=\"table-options__item\"\n :class=\"{\n 'table-options__item--disabled': isColumnLocked(col),\n 'table-options__item--selected': orderable && selectedCardHeaderIndex === index,\n 'table-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 table-options__drag-handle\"></i>\n <span\n class=\"table-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=\"table-options__move-actions\"\n >\n <button\n class=\"table-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=\"table-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 <div class=\"table-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 </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 /* ignore */\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') {\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=\"table-options\">\n <div class=\"table-options__col\">\n <h4 class=\"table-options__title\">\n Elrendezés\n <span class=\"table-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=\"table-options__col\">\n <h4\n class=\"table-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=\"table-options__list\">\n <li\n class=\"table-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=\"table-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=\"table-options__col\">\n <h4 class=\"table-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=\"table-options__list\">\n <li\n v-for=\"(col, index) in orderedColumns\"\n :key=\"col.property\"\n class=\"table-options__item\"\n :class=\"{\n 'table-options__item--disabled': isColumnLocked(col),\n 'table-options__item--selected': orderable && selectedReorderIndex === index,\n 'table-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 table-options__drag-handle\"></i>\n <span\n class=\"table-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=\"table-options__move-actions\">\n <button\n class=\"table-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=\"table-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=\"table-options__col\">\n <h4\n class=\"table-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=\"table-options__list\">\n <li\n v-for=\"(col, index) in orderedCardHeaderColumns\"\n :key=\"'ch-' + col.property\"\n class=\"table-options__item\"\n :class=\"{\n 'table-options__item--disabled': isColumnLocked(col),\n 'table-options__item--selected': orderable && selectedCardHeaderIndex === index,\n 'table-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 table-options__drag-handle\"></i>\n <span\n class=\"table-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=\"table-options__move-actions\"\n >\n <button\n class=\"table-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=\"table-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 <div class=\"table-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 </Sidebar>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/data-table/data-list-options.scss\"></style>\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"admins-components79.js","names":[],"sources":["../src/utils/url.ts"],"sourcesContent":["export function getUrlParam(key: string): string | null {\n return new URLSearchParams(window.location.search).get(key)\n}\n\nfunction paginationAtEnd(url: URL) {\n const params = new URLSearchParams(url.search)\n const page = params.get('page')\n const pageSize = params.get('pageSize')\n if (page == null && pageSize == null) return\n params.delete('page')\n params.delete('pageSize')\n if (pageSize != null) params.append('pageSize', pageSize)\n if (page != null) params.append('page', page)\n url.search = params.toString()\n}\n\nexport function setUrlParam(key: string, value: string | number): void {\n const url = new URL(window.location.href)\n url.searchParams.set(key, String(value))\n paginationAtEnd(url)\n window.history.replaceState({}, '', url.toString())\n}\n\nexport function removeUrlParam(key?: string): void {\n const url = new URL(window.location.href)\n if (key) {\n url.searchParams.delete(key)\n } else {\n url.search = ''\n }\n paginationAtEnd(url)\n window.history.replaceState({}, '', url.toString())\n}\n\
|
|
1
|
+
{"version":3,"file":"admins-components79.js","names":[],"sources":["../src/utils/url.ts"],"sourcesContent":["export function getUrlParam(key: string): string | null {\n return new URLSearchParams(window.location.search).get(key)\n}\n\nfunction paginationAtEnd(url: URL) {\n const params = new URLSearchParams(url.search)\n const page = params.get('page')\n const pageSize = params.get('pageSize')\n if (page == null && pageSize == null) return\n params.delete('page')\n params.delete('pageSize')\n if (pageSize != null) params.append('pageSize', pageSize)\n if (page != null) params.append('page', page)\n url.search = params.toString()\n}\n\nexport function setUrlParam(key: string, value: string | number): void {\n const url = new URL(window.location.href)\n url.searchParams.set(key, String(value))\n paginationAtEnd(url)\n window.history.replaceState({}, '', url.toString())\n}\n\nexport function removeUrlParam(key?: string): void {\n const url = new URL(window.location.href)\n if (key) {\n url.searchParams.delete(key)\n } else {\n url.search = ''\n }\n paginationAtEnd(url)\n window.history.replaceState({}, '', url.toString())\n}\n\nexport function readUrlNumber(key: string): number | null {\n const raw = getUrlParam(key)\n if (raw == null) return null\n const n = Number(raw)\n return Number.isFinite(n) && n > 0 ? n : null\n}\n\nexport function readUrlBool(key: string): boolean | null {\n const raw = getUrlParam(key)\n if (raw === 'true' || raw === '1') return true\n if (raw === 'false' || raw === '0') return false\n return null\n}\n\nexport function readUrlString(key: string): string | null {\n const raw = getUrlParam(key)\n return raw ? raw : null\n}\n\ninterface WriteUrlOptions {\n handleUrl: boolean\n removeWhenDefault?: boolean\n default?: unknown\n}\n\nexport function writeUrlOrRemove(\n key: string,\n value: string | number | boolean | null | undefined,\n options: WriteUrlOptions,\n): void {\n const { handleUrl, removeWhenDefault = true, default: defaultValue } = options\n if (!handleUrl) return\n const isEmpty = value == null || value === ''\n const isDefault = defaultValue !== undefined && value === defaultValue\n if ((isEmpty || isDefault) && removeWhenDefault) {\n removeUrlParam(key)\n return\n }\n setUrlParam(key, String(value))\n}\n\nexport function joinUrl(...parts: string[]): string {\n return parts\n .map((part, i) => {\n if (i === 0) return part.replace(/\\/+$/, '')\n return part.replace(/^\\/+|\\/+$/g, '')\n })\n .filter(Boolean)\n .join('/')\n}\n\nexport function navigateIframe(url: string, target?: string): void {\n if (target === '_blank') {\n window.open(url, '_blank')\n return\n }\n\n const isIframe = window.self !== window.top\n\n if (isIframe) {\n window.top!.location.href = url\n } else {\n window.location.href = url\n }\n}\n"],"mappings":";AAAA,SAAgB,EAAY,GAA4B;CACtD,OAAO,IAAI,gBAAgB,OAAO,SAAS,MAAM,CAAC,CAAC,IAAI,CAAG;AAC5D;AAEA,SAAS,EAAgB,GAAU;CACjC,IAAM,IAAS,IAAI,gBAAgB,EAAI,MAAM,GACvC,IAAO,EAAO,IAAI,MAAM,GACxB,IAAW,EAAO,IAAI,UAAU;CAClC,MAAQ,QAAQ,KAAY,UAChC,EAAO,OAAO,MAAM,GACpB,EAAO,OAAO,UAAU,GACpB,KAAY,QAAM,EAAO,OAAO,YAAY,CAAQ,GACpD,KAAQ,QAAM,EAAO,OAAO,QAAQ,CAAI,GAC5C,EAAI,SAAS,EAAO,SAAS;AAC/B;AAEA,SAAgB,EAAY,GAAa,GAA8B;CACrE,IAAM,IAAM,IAAI,IAAI,OAAO,SAAS,IAAI;CAGxC,AAFA,EAAI,aAAa,IAAI,GAAK,OAAO,CAAK,CAAC,GACvC,EAAgB,CAAG,GACnB,OAAO,QAAQ,aAAa,CAAC,GAAG,IAAI,EAAI,SAAS,CAAC;AACpD;AAEA,SAAgB,EAAe,GAAoB;CACjD,IAAM,IAAM,IAAI,IAAI,OAAO,SAAS,IAAI;CAOxC,AANI,IACF,EAAI,aAAa,OAAO,CAAG,IAE3B,EAAI,SAAS,IAEf,EAAgB,CAAG,GACnB,OAAO,QAAQ,aAAa,CAAC,GAAG,IAAI,EAAI,SAAS,CAAC;AACpD;AAEA,SAAgB,EAAc,GAA4B;CACxD,IAAM,IAAM,EAAY,CAAG;CAC3B,IAAI,KAAO,MAAM,OAAO;CACxB,IAAM,IAAI,OAAO,CAAG;CACpB,OAAO,OAAO,SAAS,CAAC,KAAK,IAAI,IAAI,IAAI;AAC3C;AAoBA,SAAgB,EACd,GACA,GACA,GACM;CACN,IAAM,EAAE,cAAW,uBAAoB,IAAM,SAAS,MAAiB;CAClE,OAGL;OAFgB,KAAS,QAAQ,MAAU,MACzB,MAAiB,KAAA,KAAa,MAAU,MAC5B,GAAmB;GAC/C,EAAe,CAAG;GAClB;EACF;EACA,EAAY,GAAK,OAAO,CAAK,CAAC;CAD9B;AAEF;AAEA,SAAgB,EAAQ,GAAG,GAAyB;CAClD,OAAO,EACJ,KAAK,GAAM,MACN,MAAM,IAAU,EAAK,QAAQ,QAAQ,EAAE,IACpC,EAAK,QAAQ,cAAc,EAAE,CACrC,CAAC,CACD,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;AACb;AAEA,SAAgB,EAAe,GAAa,GAAuB;CACjE,IAAI,MAAW,UAAU;EACvB,OAAO,KAAK,GAAK,QAAQ;EACzB;CACF;CAIA,AAFiB,OAAO,SAAS,OAAO,MAKtC,OAAO,SAAS,OAAO,IAFvB,OAAO,IAAK,SAAS,OAAO;AAIhC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"admins-components8.js","names":[],"sources":["../src/components/Calendar.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { calendarConfigDefaults, type CalendarConfig } from '@/types/datepickers'\n\nexport { calendarConfigDefaults }\nexport type { CalendarConfig }\n</script>\n\n<script setup lang=\"ts\">\nimport { ref, computed, watch, useTemplateRef, nextTick } from 'vue'\nimport { formatDate, parseDate } from '@/utils/date'\nimport Button from '@/components/Button.vue'\n\nconst props = withDefaults(defineProps<{ modelValue: string | null; config?: CalendarConfig }>(), {\n config: () => ({ ...calendarConfigDefaults }),\n})\n\nconst emit = defineEmits<{\n 'update:modelValue': [value: string | null]\n confirm: [value: string | null]\n}>()\n\nconst cfg = computed(() => ({ ...calendarConfigDefaults, ...props.config }))\n\nconst DAYS_PER_PAGE = 5 * 7\n\nconst outputFormat = computed(\n () => cfg.value.format ?? (cfg.value.showTime ? 'YYYY-MM-DD HH:mm' : 'YYYY-MM-DD'),\n)\n\nfunction parseModelValue(val: string | null): Date | null {\n return val ? parseDate(val, outputFormat.value) : null\n}\n\nconst initial = parseModelValue(props.modelValue)\nconst currentMonth = ref(initial?.getMonth() ?? new Date().getMonth())\nconst currentYear = ref(initial?.getFullYear() ?? new Date().getFullYear())\nconst selectedDate = ref<Date | null>(initial)\nconst hours = ref(initial?.getHours() ?? 0)\nconst minutes = ref(initial?.getMinutes() ?? 0)\nconst activePicker = ref<'year' | 'month' | null>(null)\n\nwatch(\n () => props.modelValue,\n (val) => {\n const parsed = parseModelValue(val ?? null)\n if (parsed) {\n selectedDate.value = parsed\n currentMonth.value = parsed.getMonth()\n currentYear.value = parsed.getFullYear()\n hours.value = parsed.getHours()\n minutes.value = parsed.getMinutes()\n } else {\n selectedDate.value = null\n }\n },\n)\n\n// Locale\nconst weekDays = computed(() =>\n Array.from({ length: 7 }, (_, i) =>\n new Date(2024, 0, i + 1).toLocaleDateString(cfg.value.locale, { weekday: 'narrow' }),\n ),\n)\nconst monthName = computed(() =>\n new Date(currentYear.value, currentMonth.value).toLocaleDateString(cfg.value.locale, {\n month: 'long',\n }),\n)\nconst monthNames = computed(() =>\n Array.from({ length: 12 }, (_, i) =>\n new Date(2024, i).toLocaleDateString(cfg.value.locale, { month: 'long' }),\n ),\n)\n\n// Days grid\nconst calendarDays = computed(() => {\n const first = new Date(currentYear.value, currentMonth.value, 1)\n const last = new Date(currentYear.value, currentMonth.value + 1, 0)\n const offset = (first.getDay() + 6) % 7\n const days: { date: Date; currentMonth: boolean; disabled: boolean }[] = []\n\n for (let i = offset - 1; i >= 0; i--)\n days.push({\n date: new Date(currentYear.value, currentMonth.value, -i),\n currentMonth: false,\n disabled: isDisabled(new Date(currentYear.value, currentMonth.value, -i)),\n })\n for (let i = 1; i <= last.getDate(); i++)\n days.push({\n date: new Date(currentYear.value, currentMonth.value, i),\n currentMonth: true,\n disabled: isDisabled(new Date(currentYear.value, currentMonth.value, i)),\n })\n for (let i = 1; days.length < DAYS_PER_PAGE; i++)\n days.push({\n date: new Date(currentYear.value, currentMonth.value + 1, i),\n currentMonth: false,\n disabled: isDisabled(new Date(currentYear.value, currentMonth.value + 1, i)),\n })\n\n return days\n})\n\n// ISO 8601 week number\nfunction getIsoWeekNumber(d: Date) {\n const target = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()))\n const dayNum = (target.getUTCDay() + 6) % 7\n target.setUTCDate(target.getUTCDate() - dayNum + 3)\n const firstThursday = new Date(Date.UTC(target.getUTCFullYear(), 0, 4))\n const diff = (target.getTime() - firstThursday.getTime()) / 86400000\n return 1 + Math.round((diff - 3 + ((firstThursday.getUTCDay() + 6) % 7)) / 7)\n}\n\nconst weekNumbers = computed(() => {\n const weeks: number[] = []\n for (let row = 0; row < 6; row++) {\n const firstDayOfRow = calendarDays.value[row * 7]?.date\n weeks.push(firstDayOfRow ? getIsoWeekNumber(firstDayOfRow) : 0)\n }\n return weeks\n})\n\n// Helpers\nfunction stripTime(d: Date) {\n return new Date(d.getFullYear(), d.getMonth(), d.getDate())\n}\nfunction isDisabled(d: Date) {\n return (\n (cfg.value.minDate && d < stripTime(cfg.value.minDate)) ||\n (cfg.value.maxDate && d > stripTime(cfg.value.maxDate)) ||\n false\n )\n}\nfunction isWeekend(d: Date) {\n return d.getDay() === 0 || d.getDay() === 6\n}\nfunction isSameDay(a: Date, b: Date | null) {\n return (\n !!b &&\n a.getFullYear() === b.getFullYear() &&\n a.getMonth() === b.getMonth() &&\n a.getDate() === b.getDate()\n )\n}\nfunction isToday(d: Date) {\n return isSameDay(d, new Date())\n}\n\n// Navigation\nfunction navigate(delta: number) {\n const d = new Date(currentYear.value, currentMonth.value + delta, 1)\n currentYear.value = d.getFullYear()\n currentMonth.value = d.getMonth()\n}\n\nfunction backToDayPicker() {\n activePicker.value = null\n}\n\nfunction onPrev() {\n if (activePicker.value) backToDayPicker()\n else navigate(-1)\n}\n\nfunction onNext() {\n if (activePicker.value) backToDayPicker()\n else navigate(1)\n}\n\n// Pickers\nconst yearList = computed(() =>\n Array.from({ length: new Date().getFullYear() + 3 - 2000 + 1 }, (_, i) => 2000 + i),\n)\nconst yearPickerRef = useTemplateRef<HTMLElement>('yearPickerRef')\n\nfunction togglePicker(picker: 'year' | 'month') {\n activePicker.value = activePicker.value === picker ? null : picker\n if (activePicker.value === 'year') {\n nextTick(() => {\n const container = yearPickerRef.value\n const el = container?.querySelector('.dp-picker-item--selected') as HTMLElement | null\n if (el && container) {\n container.scrollTop = el.offsetTop - container.offsetHeight / 2 + el.offsetHeight / 2\n } else if (container) {\n container.scrollTop = container.scrollHeight\n }\n })\n }\n}\n\nfunction selectYear(year: number) {\n currentYear.value = year\n activePicker.value = null\n}\nfunction selectMonth(month: number) {\n currentMonth.value = month\n activePicker.value = null\n}\n\n// Selection & emit\nfunction selectDay(day: { date: Date; disabled: boolean }) {\n if (day.disabled) return\n selectedDate.value = new Date(day.date)\n emitValue()\n if (cfg.value.showTime) {\n nextTick(() => hoursInput.value?.focus())\n }\n}\n\nfunction emitValue() {\n if (!selectedDate.value) {\n emit('update:modelValue', null)\n return\n }\n const result = new Date(selectedDate.value)\n if (cfg.value.showTime) result.setHours(hours.value, minutes.value, 0, 0)\n else result.setHours(0, 0, 0, 0)\n emit('update:modelValue', formatDate(result, outputFormat.value))\n}\n\nfunction onClear() {\n selectedDate.value = null\n hours.value = 0\n minutes.value = 0\n emit('update:modelValue', null)\n}\n\n// Time input\nfunction createTimeField(max: number, valueRef: { value: number }) {\n return computed({\n get: () => String(valueRef.value).padStart(2, '0'),\n set: (val: string) => {\n valueRef.value = Math.min(max, Math.max(0, parseInt(val) || 0))\n },\n })\n}\n\nconst formattedHours = createTimeField(23, hours)\nconst formattedMinutes = createTimeField(59, minutes)\nconst hoursInput = useTemplateRef<HTMLInputElement>('hoursInput')\nconst minutesInput = useTemplateRef<HTMLInputElement>('minutesInput')\n\nfunction onTimeInput(field: 'hours' | 'minutes', event: Event) {\n const el = event.target as HTMLInputElement\n if (field === 'hours') {\n formattedHours.value = el.value\n if (el.value.length >= 2) {\n minutesInput.value?.focus()\n minutesInput.value?.select()\n }\n } else {\n formattedMinutes.value = el.value\n if (el.value.length >= 2) el.blur()\n }\n emitValue()\n}\n</script>\n\n<template>\n <div class=\"ac-component\">\n <div class=\"dp-calendar\">\n <div class=\"dp-header\">\n <button\n class=\"dp-nav-btn\"\n type=\"button\"\n :aria-label=\"activePicker ? 'Back to days' : 'Previous'\"\n @click=\"onPrev\"\n >\n <i class=\"fa-solid fa-chevron-left\"></i>\n </button>\n <div class=\"dp-header-labels\">\n <span class=\"dp-header-labels--item\" @click=\"togglePicker('year')\">{{\n currentYear\n }}</span>\n <span class=\"dp-header-labels--item\" @click=\"togglePicker('month')\">{{ monthName }}</span>\n </div>\n <button\n class=\"dp-nav-btn\"\n type=\"button\"\n :aria-label=\"activePicker ? 'Back to days' : 'Next'\"\n :class=\"{ 'dp-nav-btn--spacer': activePicker !== null }\"\n :aria-hidden=\"activePicker ? 'true' : 'false'\"\n @click=\"onNext\"\n >\n <i class=\"fa-solid fa-chevron-right\"></i>\n </button>\n </div>\n\n <div\n class=\"dp-body\"\n :class=\"{ 'dp-body--has-footer': cfg.showTime || cfg.showOkButton || cfg.showClearButton }\"\n >\n <!-- Year picker -->\n <div\n v-if=\"activePicker === 'year'\"\n ref=\"yearPickerRef\"\n class=\"dp-picker-grid dp-picker-grid--4col dp-picker-grid--scrollable c-scroll\"\n >\n <button\n v-for=\"y in yearList\"\n :key=\"y\"\n type=\"button\"\n class=\"dp-picker-item\"\n :class=\"{\n 'dp-picker-item--selected': y === currentYear,\n 'dp-picker-item--today': y === new Date().getFullYear(),\n }\"\n @click=\"selectYear(y)\"\n >\n {{ y }}\n </button>\n </div>\n\n <!-- Month picker -->\n <div\n v-else-if=\"activePicker === 'month'\"\n class=\"dp-picker-grid dp-month-picker dp-picker-grid--3col\"\n >\n <button\n v-for=\"(name, idx) in monthNames\"\n :key=\"idx\"\n type=\"button\"\n class=\"dp-picker-item\"\n :class=\"{\n 'dp-picker-item--selected': idx === currentMonth,\n 'dp-picker-item--today':\n idx === new Date().getMonth() && currentYear === new Date().getFullYear(),\n }\"\n @click=\"selectMonth(idx)\"\n >\n {{ name }}\n </button>\n </div>\n\n <!-- Day picker -->\n <template v-else>\n <div class=\"dp-weekdays\" :class=\"{ 'dp-weekdays--has-week': cfg.showWeekNumber }\">\n <span v-if=\"cfg.showWeekNumber\" class=\"dp-weekday dp-weekday--week\"></span>\n <span v-for=\"d in weekDays\" :key=\"d\" class=\"dp-weekday\">{{ d }}</span>\n </div>\n <div\n class=\"dp-picker-grid\"\n :class=\"cfg.showWeekNumber ? 'dp-picker-grid--8col' : 'dp-picker-grid--7col'\"\n >\n <template v-for=\"(day, i) in calendarDays\" :key=\"i\">\n <span\n v-if=\"cfg.showWeekNumber && Number(i) % 7 === 0\"\n class=\"dp-week-number\"\n :class=\"{\n 'dp-week-number--other':\n !day.currentMonth && !calendarDays[Number(i) + 7]?.currentMonth,\n }\"\n v-tooltip=\"`${weekNumbers[Math.floor(Number(i) / 7)]}. hét`\"\n >\n {{ weekNumbers[Math.floor(Number(i) / 7)] }}.\n </span>\n <button\n type=\"button\"\n class=\"dp-picker-item dp-picker-item--circle\"\n :class=\"{\n 'dp-picker-item--other': !day.currentMonth,\n 'dp-picker-item--selected': isSameDay(day.date, selectedDate),\n 'dp-picker-item--today': isToday(day.date),\n 'dp-picker-item--disabled': day.disabled,\n 'dp-picker-item--weekend': cfg.highlightWeekends && isWeekend(day.date),\n }\"\n :disabled=\"day.disabled\"\n @click=\"selectDay(day)\"\n >\n {{ day.date.getDate() }}\n </button>\n </template>\n </div>\n\n <div v-if=\"cfg.showTime || cfg.showOkButton || cfg.showClearButton\" class=\"c-footer\">\n <template v-if=\"cfg.showTime\">\n <label class=\"dp-time-label\" for=\"dp-hours\">Idő</label>\n <div class=\"dp-time-inputs\">\n <input\n id=\"dp-hours\"\n ref=\"hoursInput\"\n type=\"number\"\n class=\"c-focus dp-time-input\"\n :value=\"formattedHours\"\n :disabled=\"!selectedDate\"\n min=\"0\"\n max=\"23\"\n @input=\"onTimeInput('hours', $event)\"\n @focus=\"($event.target as HTMLInputElement).select()\"\n />\n <span class=\"dp-time-sep\">:</span>\n <input\n id=\"dp-minutes\"\n ref=\"minutesInput\"\n type=\"number\"\n class=\"c-focus dp-time-input\"\n :value=\"formattedMinutes\"\n :disabled=\"!selectedDate\"\n min=\"0\"\n max=\"59\"\n @input=\"onTimeInput('minutes', $event)\"\n @focus=\"($event.target as HTMLInputElement).select()\"\n />\n </div>\n </template>\n <Button\n v-if=\"cfg.showClearButton\"\n label=\"Törlés\"\n @click=\"onClear\"\n outline\n :disabled=\"!selectedDate\"\n />\n <Button\n v-if=\"cfg.showOkButton\"\n label=\"OK\"\n type=\"success\"\n @click=\"emit('confirm', modelValue)\"\n :disabled=\"!selectedDate\"\n />\n </div>\n </template>\n </div>\n </div>\n </div>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/calendar.scss\"></style>\n<style lang=\"scss\" src=\"@/styles/components/datepickers.scss\"></style>\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"admins-components8.js","names":[],"sources":["../src/components/Calendar.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { calendarConfigDefaults, type CalendarConfig } from '@/types/datepickers'\n\nexport { calendarConfigDefaults }\nexport type { CalendarConfig }\n</script>\n\n<script setup lang=\"ts\">\nimport { ref, computed, watch, useTemplateRef, nextTick } from 'vue'\nimport { formatDate, parseDate } from '@/utils/date'\nimport Button from '@/components/Button.vue'\n\nconst props = withDefaults(defineProps<{ modelValue: string | null; config?: CalendarConfig }>(), {\n config: () => ({ ...calendarConfigDefaults }),\n})\n\nconst emit = defineEmits<{\n 'update:modelValue': [value: string | null]\n confirm: [value: string | null]\n}>()\n\nconst cfg = computed(() => ({ ...calendarConfigDefaults, ...props.config }))\n\nconst DAYS_PER_PAGE = 5 * 7\n\nconst outputFormat = computed(\n () => cfg.value.format ?? (cfg.value.showTime ? 'YYYY-MM-DD HH:mm' : 'YYYY-MM-DD'),\n)\n\nfunction parseModelValue(val: string | null): Date | null {\n return val ? parseDate(val, outputFormat.value) : null\n}\n\nconst initial = parseModelValue(props.modelValue)\nconst currentMonth = ref(initial?.getMonth() ?? new Date().getMonth())\nconst currentYear = ref(initial?.getFullYear() ?? new Date().getFullYear())\nconst selectedDate = ref<Date | null>(initial)\nconst hours = ref(initial?.getHours() ?? 0)\nconst minutes = ref(initial?.getMinutes() ?? 0)\nconst activePicker = ref<'year' | 'month' | null>(null)\n\nwatch(\n () => props.modelValue,\n (val) => {\n const parsed = parseModelValue(val ?? null)\n if (parsed) {\n selectedDate.value = parsed\n currentMonth.value = parsed.getMonth()\n currentYear.value = parsed.getFullYear()\n hours.value = parsed.getHours()\n minutes.value = parsed.getMinutes()\n } else {\n selectedDate.value = null\n }\n },\n)\n\nconst weekDays = computed(() =>\n Array.from({ length: 7 }, (_, i) =>\n new Date(2024, 0, i + 1).toLocaleDateString(cfg.value.locale, { weekday: 'narrow' }),\n ),\n)\nconst monthName = computed(() =>\n new Date(currentYear.value, currentMonth.value).toLocaleDateString(cfg.value.locale, {\n month: 'long',\n }),\n)\nconst monthNames = computed(() =>\n Array.from({ length: 12 }, (_, i) =>\n new Date(2024, i).toLocaleDateString(cfg.value.locale, { month: 'long' }),\n ),\n)\n\nconst calendarDays = computed(() => {\n const first = new Date(currentYear.value, currentMonth.value, 1)\n const last = new Date(currentYear.value, currentMonth.value + 1, 0)\n const offset = (first.getDay() + 6) % 7\n const days: { date: Date; currentMonth: boolean; disabled: boolean }[] = []\n\n for (let i = offset - 1; i >= 0; i--)\n days.push({\n date: new Date(currentYear.value, currentMonth.value, -i),\n currentMonth: false,\n disabled: isDisabled(new Date(currentYear.value, currentMonth.value, -i)),\n })\n for (let i = 1; i <= last.getDate(); i++)\n days.push({\n date: new Date(currentYear.value, currentMonth.value, i),\n currentMonth: true,\n disabled: isDisabled(new Date(currentYear.value, currentMonth.value, i)),\n })\n for (let i = 1; days.length < DAYS_PER_PAGE; i++)\n days.push({\n date: new Date(currentYear.value, currentMonth.value + 1, i),\n currentMonth: false,\n disabled: isDisabled(new Date(currentYear.value, currentMonth.value + 1, i)),\n })\n\n return days\n})\n\nfunction getIsoWeekNumber(d: Date) {\n const target = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()))\n const dayNum = (target.getUTCDay() + 6) % 7\n target.setUTCDate(target.getUTCDate() - dayNum + 3)\n const firstThursday = new Date(Date.UTC(target.getUTCFullYear(), 0, 4))\n const diff = (target.getTime() - firstThursday.getTime()) / 86400000\n return 1 + Math.round((diff - 3 + ((firstThursday.getUTCDay() + 6) % 7)) / 7)\n}\n\nconst weekNumbers = computed(() => {\n const weeks: number[] = []\n for (let row = 0; row < 6; row++) {\n const firstDayOfRow = calendarDays.value[row * 7]?.date\n weeks.push(firstDayOfRow ? getIsoWeekNumber(firstDayOfRow) : 0)\n }\n return weeks\n})\n\nfunction stripTime(d: Date) {\n return new Date(d.getFullYear(), d.getMonth(), d.getDate())\n}\nfunction isDisabled(d: Date) {\n return (\n (cfg.value.minDate && d < stripTime(cfg.value.minDate)) ||\n (cfg.value.maxDate && d > stripTime(cfg.value.maxDate)) ||\n false\n )\n}\nfunction isWeekend(d: Date) {\n return d.getDay() === 0 || d.getDay() === 6\n}\nfunction isSameDay(a: Date, b: Date | null) {\n return (\n !!b &&\n a.getFullYear() === b.getFullYear() &&\n a.getMonth() === b.getMonth() &&\n a.getDate() === b.getDate()\n )\n}\nfunction isToday(d: Date) {\n return isSameDay(d, new Date())\n}\n\nfunction navigate(delta: number) {\n const d = new Date(currentYear.value, currentMonth.value + delta, 1)\n currentYear.value = d.getFullYear()\n currentMonth.value = d.getMonth()\n}\n\nfunction backToDayPicker() {\n activePicker.value = null\n}\n\nfunction onPrev() {\n if (activePicker.value) backToDayPicker()\n else navigate(-1)\n}\n\nfunction onNext() {\n if (activePicker.value) backToDayPicker()\n else navigate(1)\n}\n\nconst yearList = computed(() =>\n Array.from({ length: new Date().getFullYear() + 3 - 2000 + 1 }, (_, i) => 2000 + i),\n)\nconst yearPickerRef = useTemplateRef<HTMLElement>('yearPickerRef')\n\nfunction togglePicker(picker: 'year' | 'month') {\n activePicker.value = activePicker.value === picker ? null : picker\n if (activePicker.value === 'year') {\n nextTick(() => {\n const container = yearPickerRef.value\n const el = container?.querySelector('.dp-picker-item--selected') as HTMLElement | null\n if (el && container) {\n container.scrollTop = el.offsetTop - container.offsetHeight / 2 + el.offsetHeight / 2\n } else if (container) {\n container.scrollTop = container.scrollHeight\n }\n })\n }\n}\n\nfunction selectYear(year: number) {\n currentYear.value = year\n activePicker.value = null\n}\nfunction selectMonth(month: number) {\n currentMonth.value = month\n activePicker.value = null\n}\n\nfunction selectDay(day: { date: Date; disabled: boolean }) {\n if (day.disabled) return\n selectedDate.value = new Date(day.date)\n emitValue()\n if (cfg.value.showTime) {\n nextTick(() => hoursInput.value?.focus())\n }\n}\n\nfunction emitValue() {\n if (!selectedDate.value) {\n emit('update:modelValue', null)\n return\n }\n const result = new Date(selectedDate.value)\n if (cfg.value.showTime) result.setHours(hours.value, minutes.value, 0, 0)\n else result.setHours(0, 0, 0, 0)\n emit('update:modelValue', formatDate(result, outputFormat.value))\n}\n\nfunction onClear() {\n selectedDate.value = null\n hours.value = 0\n minutes.value = 0\n emit('update:modelValue', null)\n}\n\nfunction createTimeField(max: number, valueRef: { value: number }) {\n return computed({\n get: () => String(valueRef.value).padStart(2, '0'),\n set: (val: string) => {\n valueRef.value = Math.min(max, Math.max(0, parseInt(val) || 0))\n },\n })\n}\n\nconst formattedHours = createTimeField(23, hours)\nconst formattedMinutes = createTimeField(59, minutes)\nconst hoursInput = useTemplateRef<HTMLInputElement>('hoursInput')\nconst minutesInput = useTemplateRef<HTMLInputElement>('minutesInput')\n\nfunction onTimeInput(field: 'hours' | 'minutes', event: Event) {\n const el = event.target as HTMLInputElement\n if (field === 'hours') {\n formattedHours.value = el.value\n if (el.value.length >= 2) {\n minutesInput.value?.focus()\n minutesInput.value?.select()\n }\n } else {\n formattedMinutes.value = el.value\n if (el.value.length >= 2) el.blur()\n }\n emitValue()\n}\n</script>\n\n<template>\n <div class=\"ac-component\">\n <div class=\"dp-calendar\">\n <div class=\"dp-header\">\n <button\n class=\"dp-nav-btn\"\n type=\"button\"\n :aria-label=\"activePicker ? 'Back to days' : 'Previous'\"\n @click=\"onPrev\"\n >\n <i class=\"fa-solid fa-chevron-left\"></i>\n </button>\n <div class=\"dp-header-labels\">\n <span class=\"dp-header-labels--item\" @click=\"togglePicker('year')\">{{\n currentYear\n }}</span>\n <span class=\"dp-header-labels--item\" @click=\"togglePicker('month')\">{{ monthName }}</span>\n </div>\n <button\n class=\"dp-nav-btn\"\n type=\"button\"\n :aria-label=\"activePicker ? 'Back to days' : 'Next'\"\n :class=\"{ 'dp-nav-btn--spacer': activePicker !== null }\"\n :aria-hidden=\"activePicker ? 'true' : 'false'\"\n @click=\"onNext\"\n >\n <i class=\"fa-solid fa-chevron-right\"></i>\n </button>\n </div>\n\n <div\n class=\"dp-body\"\n :class=\"{ 'dp-body--has-footer': cfg.showTime || cfg.showOkButton || cfg.showClearButton }\"\n >\n <!-- Year picker -->\n <div\n v-if=\"activePicker === 'year'\"\n ref=\"yearPickerRef\"\n class=\"dp-picker-grid dp-picker-grid--4col dp-picker-grid--scrollable c-scroll\"\n >\n <button\n v-for=\"y in yearList\"\n :key=\"y\"\n type=\"button\"\n class=\"dp-picker-item\"\n :class=\"{\n 'dp-picker-item--selected': y === currentYear,\n 'dp-picker-item--today': y === new Date().getFullYear(),\n }\"\n @click=\"selectYear(y)\"\n >\n {{ y }}\n </button>\n </div>\n\n <!-- Month picker -->\n <div\n v-else-if=\"activePicker === 'month'\"\n class=\"dp-picker-grid dp-month-picker dp-picker-grid--3col\"\n >\n <button\n v-for=\"(name, idx) in monthNames\"\n :key=\"idx\"\n type=\"button\"\n class=\"dp-picker-item\"\n :class=\"{\n 'dp-picker-item--selected': idx === currentMonth,\n 'dp-picker-item--today':\n idx === new Date().getMonth() && currentYear === new Date().getFullYear(),\n }\"\n @click=\"selectMonth(idx)\"\n >\n {{ name }}\n </button>\n </div>\n\n <!-- Day picker -->\n <template v-else>\n <div class=\"dp-weekdays\" :class=\"{ 'dp-weekdays--has-week': cfg.showWeekNumber }\">\n <span v-if=\"cfg.showWeekNumber\" class=\"dp-weekday dp-weekday--week\"></span>\n <span v-for=\"d in weekDays\" :key=\"d\" class=\"dp-weekday\">{{ d }}</span>\n </div>\n <div\n class=\"dp-picker-grid\"\n :class=\"cfg.showWeekNumber ? 'dp-picker-grid--8col' : 'dp-picker-grid--7col'\"\n >\n <template v-for=\"(day, i) in calendarDays\" :key=\"i\">\n <span\n v-if=\"cfg.showWeekNumber && Number(i) % 7 === 0\"\n class=\"dp-week-number\"\n :class=\"{\n 'dp-week-number--other':\n !day.currentMonth && !calendarDays[Number(i) + 7]?.currentMonth,\n }\"\n v-tooltip=\"`${weekNumbers[Math.floor(Number(i) / 7)]}. hét`\"\n >\n {{ weekNumbers[Math.floor(Number(i) / 7)] }}.\n </span>\n <button\n type=\"button\"\n class=\"dp-picker-item dp-picker-item--circle\"\n :class=\"{\n 'dp-picker-item--other': !day.currentMonth,\n 'dp-picker-item--selected': isSameDay(day.date, selectedDate),\n 'dp-picker-item--today': isToday(day.date),\n 'dp-picker-item--disabled': day.disabled,\n 'dp-picker-item--weekend': cfg.highlightWeekends && isWeekend(day.date),\n }\"\n :disabled=\"day.disabled\"\n @click=\"selectDay(day)\"\n >\n {{ day.date.getDate() }}\n </button>\n </template>\n </div>\n\n <div v-if=\"cfg.showTime || cfg.showOkButton || cfg.showClearButton\" class=\"c-footer\">\n <template v-if=\"cfg.showTime\">\n <label class=\"dp-time-label\" for=\"dp-hours\">Idő</label>\n <div class=\"dp-time-inputs\">\n <input\n id=\"dp-hours\"\n ref=\"hoursInput\"\n type=\"number\"\n class=\"c-focus dp-time-input\"\n :value=\"formattedHours\"\n :disabled=\"!selectedDate\"\n min=\"0\"\n max=\"23\"\n @input=\"onTimeInput('hours', $event)\"\n @focus=\"($event.target as HTMLInputElement).select()\"\n />\n <span class=\"dp-time-sep\">:</span>\n <input\n id=\"dp-minutes\"\n ref=\"minutesInput\"\n type=\"number\"\n class=\"c-focus dp-time-input\"\n :value=\"formattedMinutes\"\n :disabled=\"!selectedDate\"\n min=\"0\"\n max=\"59\"\n @input=\"onTimeInput('minutes', $event)\"\n @focus=\"($event.target as HTMLInputElement).select()\"\n />\n </div>\n </template>\n <Button\n v-if=\"cfg.showClearButton\"\n label=\"Törlés\"\n @click=\"onClear\"\n outline\n :disabled=\"!selectedDate\"\n />\n <Button\n v-if=\"cfg.showOkButton\"\n label=\"OK\"\n type=\"success\"\n @click=\"emit('confirm', modelValue)\"\n :disabled=\"!selectedDate\"\n />\n </div>\n </template>\n </div>\n </div>\n </div>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/calendar.scss\"></style>\n<style lang=\"scss\" src=\"@/styles/components/datepickers.scss\"></style>\n"],"mappings":"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"}
|
|
@@ -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 // URL only counts if BOTH `page` and `pageSize` are present and valid.\n // It wins for this load but is intentionally NOT written to localStorage —\n // localStorage holds the user's persistent preference and must not be\n // polluted by transient URL state.\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":";;;;;;;;;;;sFACM,IAAe;CAAC;CAAI;CAAI;CAAI;AAAG,GAC/B,IAAoB;AAE1B,SAAgB,EAAY,GAA4B;CAEtD,IAAM,IAAU,EAAc,UAAU;CACxC,IAAI,KAAW,MAAM,OAAO;CAC5B,IAAI;EACF,IAAM,IAAiB,EAAkB,cAAc,CAAU,GAC3D,IAAM,aAAa,QAAQ,CAAc;EAC/C,IAAI,GAAK;GACP,IAAM,IAAO,OAAO,CAAG;GACvB,IAAI,IAAO,GAAG,OAAO;EACvB;CACF,QAAQ;EACN,QAAQ,KAAK,4CAA4C;CAC3D;CACA,OAAO;AACT;AAEA,SAAgB,EAAoB,GAAoB;CACtD,OAAO;EACL,OAAO;EACP,MAAM,EAAc,MAAM,KAAK;EAC/B,UAAU,EAAY,CAAU;CAClC;AACF;;;;;;;;;;;;;EAUA,IAAM,IAAQ,GAKR,IAAO;EAIb,SAAS,EAAa,GAAc;GAClC,IAAI;IACF,aAAa,QAAQ,EAAkB,cAAc,EAAM,UAAU,GAAG,OAAO,CAAI,CAAC;GACtF,QAAQ;IACN,QAAQ,KAAK,0CAA0C;GACzD;EACF;EAEA,IAAM,IAAa,QACjB,KAAK,IAAI,GAAG,KAAK,KAAK,EAAM,SAAS,QAAQ,EAAM,SAAS,QAAQ,CAAC,CACvE,GAEM,IAAa,QACjB,EAAM,SAAS,UAAU,IAAI,KAAK,EAAM,SAAS,OAAO,KAAK,EAAM,SAAS,WAAW,CACzF,GACM,IAAW,QACf,KAAK,IAAI,EAAM,SAAS,OAAO,EAAM,SAAS,UAAU,EAAM,SAAS,KAAK,CAC9E,GAEM,IAAe,QAAmC;GACtD,IAAM,IAAQ,EAAW,OACnB,IAAU,EAAM,SAAS;GAE/B,IAAI,KAAS,GAAY;IACvB,IAAM,IAAkB,CAAC;IACzB,KAAK,IAAI,IAAI,GAAG,KAAK,GAAO,KAAK,EAAM,KAAK,CAAC;IAC7C,OAAO;GACT;GAEA,IAAM,IAAQ,IAAa,GACvB,IAAW,IAAU,GACrB,IAAS,IAAU;GAUvB,KATI,IAAW,MACb,IAAS,KAAK,IAAI,IAAQ,GAAG,KAAU,IAAI,EAAS,GACpD,IAAW,IAET,IAAS,IAAQ,MACnB,IAAW,KAAK,IAAI,GAAG,KAAY,KAAU,IAAQ,GAAG,GACxD,IAAS,IAAQ,IAGZ,IAAS,IAAW,IAAI,IAAO;IACpC,IAAM,IAAgB,IAAW,GAC3B,IAAiB,IAAS,IAAQ;IACxC,IAAI,CAAC,KAAiB,CAAC,GAAgB;IAEvC,IAAM,IAAW,IAAW,GACtB,IAAY,IAAQ,IAAI,GAExB,IAAA,GACF,IAAgB,IAAW,IAAI,KAAK,KAAc,MAAS,IAAQ,IACjE,IACH,MAAW,KAAQ,GAAO,IAAiB,IAAS,IAAI,KAAK,IAAQ,IAElE,IAAU,IAAS,IAAW,GAEhC,IAAW;IAYf,IAVE,MACC,KAAY,KAAa,CAAC,MAC3B,IAAU,KAAwB,KAElC,KACA,IAAW,MACF,KAAkB,IAAU,KAAyB,MAC9D,KACA,IAAW,KAET,CAAC,GAAU;GACjB;GACA,IAAM,IAAmB,IAAW,GAC9B,IAAoB,IAAS,IAAQ,GAErC,IAA4B,CAAC;GAEnC,AADA,EAAM,KAAK,CAAC,GACR,KAAkB,EAAM,KAAK,KAAK;GACtC,KAAK,IAAI,IAAI,GAAU,KAAK,GAAQ,KAAK,EAAM,KAAK,CAAC;GAIrD,OAHI,KAAmB,EAAM,KAAK,KAAK,GACvC,EAAM,KAAK,CAAK,GAET;EACT,CAAC,GAEK,IAAa;EAEnB,SAAS,EAAkB,GAAc;GACvC,IAAM,IAAU,EAAM,SAAS,MACzB,IAAQ,EAAW,OAEnB,IAAS,MAAS,KAAK,MAAS,GAChC,IAAY,MAAS;GAI3B,OAFsB,IAAU,KAAK,IAAU,IAAQ,KAE/B,CAAC,KAAU,CAAC;EACtC;EAEA,SAAS,EAAS,GAAc;GAC1B,IAAO,KAAK,IAAO,EAAW,SAAS,MAAS,EAAM,SAAS,SACnE,EAAiB,QAAQ,GAAM;IAAE,WAAW,EAAM;IAAW,SAAS;GAAE,CAAC,GACzE,EAAiB,YAAY,EAAM,SAAS,UAAU,EAAE,WAAW,EAAM,UAAU,CAAC,GACpF,EAAK,qBAAqB;IAAE;IAAM,UAAU,EAAM,SAAS;GAAS,CAAC;EACvE;EAEA,SAAS,EAAe,GAAc;GACpC,IAAM,IAAO,OAAQ,EAAM,OAA6B,KAAK;GAI7D,AAHA,EAAa,CAAI,GACjB,EAAiB,YAAY,GAAM,EAAE,WAAW,EAAM,UAAU,CAAC,GACjE,EAAiB,QAAQ,GAAG;IAAE,WAAW,EAAM;IAAW,SAAS;GAAE,CAAC,GACtE,EAAK,qBAAqB;IAAE,MAAM;IAAG,UAAU;GAAK,CAAC;EACvD;SAEA,QAAgB;GACd,IAAI,CAAC,EAAM,WAAW;GAKtB,IAAM,IAAU,EAAc,UAAU,GAClC,IAAU,EAAc,MAAM;GAChC,KAAW,QAAQ,KAAW,SAC9B,MAAY,EAAM,SAAS,YAAY,MAAY,EAAM,SAAS,SACtE,EAAK,qBAAqB;IAAE,MAAM;IAAS,UAAU;GAAQ,CAAC;EAChE,CAAC,cAIC,EAAA,GAAA,EAkDM,OAlDN,GAkDM,CAjDJ,EAgDM,OAhDN,GAgDM;GA/CJ,EAGM,OAHN,GAGM,CAFJ,EAA6E,QAA7E,GAA6E,EAAzC,EAAA,KAAU,IAAG,MAAO,EAAG,EAAA,KAAQ,GAAA,CAAA,GACnE,EAA+D,QAA/D,GAAiC,QAAG,EAAG,EAAA,SAAS,KAAK,GAAA,CAAA,CAAA,CAAA;GAGvD,EA8BM,OA9BN,GA8BM;IA7BJ,EAKE,GAAA;KAJA,MAAK;KACL,KAAI;KACH,UAAU,EAAA,SAAS,QAAI;KACvB,gBAAgB,EAAS,EAAA,SAAS,OAAI,CAAA;;KAGzC,EAAA,EAAA,GAAA,EAcW,GAAA,MAAA,EAdgB,EAAA,QAAT,GAAG,OAA0B,EAAA,GAAA,EAAA,GAAA,EAAA,KAAA,EAAC,GAAA,CAClC,MAAC,SAAb,EAAA,GAAA,EAAsE,QAAtE,GAAuD,GAAQ,MAC/D,EAAA,GAAA,EAWS,UAAA;;KATP,MAAK;KACL,OAAK,EAAA,CAAC,qBAAmB;MACY,aAAA,MAAM,EAAA,SAAS;MAAoC,gBAAA,EAAkB,CAAC;;KAI1G,UAAK,MAAE,EAAS,CAAC;IAEf,GAAA,EAAA,CAAC,GAAA,IAAA,CAAA,EAAA,GAAA,EAAA;IAIR,EAKE,GAAA;KAJA,MAAK;KACL,KAAI;KACH,UAAU,EAAA,SAAS,QAAQ,EAAA;KAC3B,gBAAgB,EAAS,EAAA,SAAS,OAAI,CAAA;;;GAI3C,EASM,OATN,GASM,CARJ,EAOS,UAAA;IANP,OAAM;IACN,IAAG;IACF,OAAO,EAAA,SAAS;IAChB,UAAQ;GAET,GAAA,EAAA,EAAA,GAAA,EAAmF,GAAA,MAAA,EAA/D,IAAL,MAAf,EAAmF,UAAA;IAAhD,KAAK;IAAI,OAAO;GAAM,GAAA,EAAA,CAAC,IAAG,iBAAa,GAAA,CAAA"}
|
|
1
|
+
{"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 +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<{ 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
|
|
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<{ 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":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"admins-components83.js","names":[],"sources":["../src/components/data-table/DataSort.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type SortDirection = 'asc' | 'desc'\n\nexport interface DataSortOption {\n value: string\n label: string\n icon?: string\n}\n\nexport interface DataSortProps {\n modelValue: { key: string; direction: SortDirection } | null\n options: DataSortOption[]\n placeholder?: string\n handleUrl?: boolean\n disabled?: boolean\n}\n\nexport function getDefaultSort(): { key: string; direction: SortDirection } | null {\n if (typeof window === 'undefined') return null\n const params = new URLSearchParams(window.location.search)\n const key = params.get('sortBy')\n const dir = params.get('sortDir')\n if (key && (dir === 'asc' || dir === 'desc')) {\n return { key, direction: dir }\n }\n return null\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref, watch } from 'vue'\nimport DropdownSelect, { type DropdownOption } from '@/components/DropdownSelect.vue'\nimport { useDropdownAnchor } from '@/composables/useDropdownAnchor'\nimport { writeUrlOrRemove } from '@/utils/url'\nimport Button from '../Button.vue'\n\nconst props = withDefaults(defineProps<DataSortProps>(), {\n placeholder: 'Rendezés...',\n handleUrl: false,\n disabled: false\n})\n\nconst emit = defineEmits<{\n 'update:modelValue': [sort: { key: string; direction: SortDirection } | null]\n 'sort-change': [sort: { key: string; direction: SortDirection } | null]\n}>()\n\nconst wrapperRef = ref<HTMLElement | null>(null)\nconst dropdownRef = ref<HTMLElement | null>(null)\nconst { isOpen, dropdownStyle } = useDropdownAnchor(wrapperRef, dropdownRef, {\n extraStyle: (rect) => ({ minWidth: `${Math.max(rect.width, 240)}px` }),\n closeOnScroll: true,\n})\n\nconst sortBy = computed<string | string[] | null>({\n get: () => props.modelValue?.key ?? null,\n set: (v) => {\n if (Array.isArray(v)) return\n const next = typeof v === 'string' ? v : null\n emitChange(next, props.modelValue?.direction ?? 'asc')\n },\n})\n\nconst direction = computed<SortDirection>({\n get: () => props.modelValue?.direction ?? 'asc',\n set: (d) => emitChange(props.modelValue?.key ?? null, d),\n})\n\nconst activeLabel = computed(() => {\n if (!props.modelValue) return props.placeholder\n const opt = props.options.find((o) => o.value === props.modelValue!.key)\n const label = opt?.label ?? props.modelValue.key\n return `${label} (${props.modelValue.direction === 'asc' ? 'növekvő' : 'csökkenő'})`\n})\n\nfunction emitChange(key: string | null, dir: SortDirection) {\n if (key == null) {\n if (props.handleUrl) {\n writeUrlOrRemove('sortBy', null, { handleUrl: true })\n writeUrlOrRemove('sortDir', null, { handleUrl: true })\n }\n emit('update:modelValue', null)\n emit('sort-change', null)\n return\n }\n if (props.handleUrl) {\n writeUrlOrRemove('sortBy', key, { handleUrl: true })\n writeUrlOrRemove('sortDir', dir, { handleUrl: true, default: 'asc' })\n }\n const next = { key, direction: dir }\n emit('update:modelValue', next)\n emit('sort-change', next)\n}\n\nfunction clear() {\n emitChange(null, 'asc')\n isOpen.value = false\n}\n\nfunction onSortColumnChange(v: DropdownOption | DropdownOption[] | null) {\n if (Array.isArray(v)) return\n sortBy.value = v?.value ?? null\n}\n\n// Read initial state from URL on mount when handleUrl is true and modelValue is empty.\nwatch(\n isOpen,\n (open) => {\n if (!open || !props.handleUrl || props.modelValue) return\n const sort = getDefaultSort()\n if (sort) emitChange(sort.key, sort.direction)\n },\n { immediate: true },\n)\n</script>\n\n<template>\n <div class=\"ac-component\">\n <div ref=\"wrapperRef\" class=\"ds-sort-wrapper\">\n <button\n type=\"button\"\n class=\"c-btn ds-sort-trigger lh-1\"\n :class=\"[modelValue && 'is-active', disabled && 'is-disabled', isOpen && 'is-open']\"\n :disabled=\"disabled\"\n :aria-label=\"`Rendezés: ${activeLabel}`\"\n @click=\"isOpen = !isOpen\"\n >\n <i\n class=\"fa-solid fa-fw\"\n :class=\"\n !modelValue || modelValue.direction === 'asc'\n ? 'fa-arrow-up-wide-short'\n : 'fa-arrow-down-wide-short'\n \"\n ></i>\n <span class=\"ds-sort-label c-truncate\">{{ activeLabel }}</span>\n <button\n v-if=\"modelValue\"\n type=\"button\"\n class=\"c-icon-btn c-icon-btn--clear ds-sort-clear\"\n aria-label=\"Rendezés törlése\"\n title=\"Rendezés törlése\"\n @click.stop=\"clear\"\n >\n <i class=\"fa-solid fa-fw fa-xmark\"></i>\n </button>\n <span\n class=\"c-icon-btn c-icon-btn--chevron\"\n :class=\"{ 'c-icon-btn--chevron-open': isOpen }\"\n >\n <i class=\"fa-solid fa-fw fa-chevron-down\"></i>\n </span>\n </button>\n\n <Teleport to=\"body\">\n <div class=\"ac-component\">\n <div v-if=\"isOpen\" ref=\"dropdownRef\" class=\"ds-sort-panel\" :style=\"dropdownStyle\">\n\n <div class=\"ds-sort-panel__row\">\n <label class=\"ds-sort-panel__label\">Oszlop</label>\n <DropdownSelect\n :model-value=\"sortBy\"\n :options=\"options\"\n :config=\"{\n clearable: false,\n placeholder: 'Válassz oszlopot...',\n filterable: false,\n }\"\n @update:model-value=\"onSortColumnChange\"\n />\n </div>\n\n <div class=\"ds-sort-panel__row\">\n <span class=\"ds-sort-panel__label\">Irány</span>\n <div class=\"ds-sort-direction\" role=\"group\" aria-label=\"Rendezés iránya\">\n <button\n type=\"button\"\n class=\"ds-sort-direction__btn\"\n :class=\"{ 'is-active': direction === 'asc' }\"\n :aria-pressed=\"direction === 'asc'\"\n aria-label=\"Növekvő\"\n @click=\"direction = 'asc'\"\n >\n <i class=\"fa-solid fa-fw fa-arrow-up-wide-short\"></i>\n <span>Növekvő</span>\n </button>\n <button\n type=\"button\"\n class=\"ds-sort-direction__btn dir-desc\"\n :class=\"{ 'is-active': direction === 'desc' }\"\n :aria-pressed=\"direction === 'desc'\"\n aria-label=\"Csökkenő\"\n @click=\"direction = 'desc'\"\n >\n <i class=\"fa-solid fa-fw fa-arrow-down-wide-short\"></i>\n <span>Csökkenő</span>\n </button>\n </div>\n </div>\n\n <div class=\"ds-sort-panel__footer\">\n <Button label=\"Rendben\" outline size=\"small\" @click=\"isOpen = false\" />\n </div>\n </div>\n </div>\n </Teleport>\n </div>\n </div>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/data-table/data-sort.scss\"></style>\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"admins-components83.js","names":[],"sources":["../src/components/data-table/DataSort.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type SortDirection = 'asc' | 'desc'\n\nexport interface DataSortOption {\n value: string\n label: string\n icon?: string\n}\n\nexport interface DataSortProps {\n modelValue: { key: string; direction: SortDirection } | null\n options: DataSortOption[]\n placeholder?: string\n handleUrl?: boolean\n disabled?: boolean\n}\n\nexport function getDefaultSort(): { key: string; direction: SortDirection } | null {\n if (typeof window === 'undefined') return null\n const params = new URLSearchParams(window.location.search)\n const key = params.get('sortBy')\n const dir = params.get('sortDir')\n if (key && (dir === 'asc' || dir === 'desc')) {\n return { key, direction: dir }\n }\n return null\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref, watch } from 'vue'\nimport DropdownSelect, { type DropdownOption } from '@/components/DropdownSelect.vue'\nimport { useDropdownAnchor } from '@/composables/useDropdownAnchor'\nimport { writeUrlOrRemove } from '@/utils/url'\nimport Button from '../Button.vue'\n\nconst props = withDefaults(defineProps<DataSortProps>(), {\n placeholder: 'Rendezés...',\n handleUrl: false,\n disabled: false\n})\n\nconst emit = defineEmits<{\n 'update:modelValue': [sort: { key: string; direction: SortDirection } | null]\n 'sort-change': [sort: { key: string; direction: SortDirection } | null]\n}>()\n\nconst wrapperRef = ref<HTMLElement | null>(null)\nconst dropdownRef = ref<HTMLElement | null>(null)\nconst { isOpen, dropdownStyle } = useDropdownAnchor(wrapperRef, dropdownRef, {\n extraStyle: (rect) => ({ minWidth: `${Math.max(rect.width, 240)}px` }),\n closeOnScroll: true,\n})\n\nconst sortBy = computed<string | string[] | null>({\n get: () => props.modelValue?.key ?? null,\n set: (v) => {\n if (Array.isArray(v)) return\n const next = typeof v === 'string' ? v : null\n emitChange(next, props.modelValue?.direction ?? 'asc')\n },\n})\n\nconst direction = computed<SortDirection>({\n get: () => props.modelValue?.direction ?? 'asc',\n set: (d) => emitChange(props.modelValue?.key ?? null, d),\n})\n\nconst activeLabel = computed(() => {\n if (!props.modelValue) return props.placeholder\n const opt = props.options.find((o) => o.value === props.modelValue!.key)\n const label = opt?.label ?? props.modelValue.key\n return `${label} (${props.modelValue.direction === 'asc' ? 'növekvő' : 'csökkenő'})`\n})\n\nfunction emitChange(key: string | null, dir: SortDirection) {\n if (key == null) {\n if (props.handleUrl) {\n writeUrlOrRemove('sortBy', null, { handleUrl: true })\n writeUrlOrRemove('sortDir', null, { handleUrl: true })\n }\n emit('update:modelValue', null)\n emit('sort-change', null)\n return\n }\n if (props.handleUrl) {\n writeUrlOrRemove('sortBy', key, { handleUrl: true })\n writeUrlOrRemove('sortDir', dir, { handleUrl: true, default: 'asc' })\n }\n const next = { key, direction: dir }\n emit('update:modelValue', next)\n emit('sort-change', next)\n}\n\nfunction clear() {\n emitChange(null, 'asc')\n isOpen.value = false\n}\n\nfunction onSortColumnChange(v: DropdownOption | DropdownOption[] | null) {\n if (Array.isArray(v)) return\n sortBy.value = v?.value ?? null\n}\n\nwatch(\n isOpen,\n (open) => {\n if (!open || !props.handleUrl || props.modelValue) return\n const sort = getDefaultSort()\n if (sort) emitChange(sort.key, sort.direction)\n },\n { immediate: true },\n)\n</script>\n\n<template>\n <div class=\"ac-component\">\n <div ref=\"wrapperRef\" class=\"ds-sort-wrapper\">\n <button\n type=\"button\"\n class=\"c-btn ds-sort-trigger lh-1\"\n :class=\"[modelValue && 'is-active', disabled && 'is-disabled', isOpen && 'is-open']\"\n :disabled=\"disabled\"\n :aria-label=\"`Rendezés: ${activeLabel}`\"\n @click=\"isOpen = !isOpen\"\n >\n <i\n class=\"fa-solid fa-fw\"\n :class=\"\n !modelValue || modelValue.direction === 'asc'\n ? 'fa-arrow-up-wide-short'\n : 'fa-arrow-down-wide-short'\n \"\n ></i>\n <span class=\"ds-sort-label c-truncate\">{{ activeLabel }}</span>\n <button\n v-if=\"modelValue\"\n type=\"button\"\n class=\"c-icon-btn c-icon-btn--clear ds-sort-clear\"\n aria-label=\"Rendezés törlése\"\n title=\"Rendezés törlése\"\n @click.stop=\"clear\"\n >\n <i class=\"fa-solid fa-fw fa-xmark\"></i>\n </button>\n <span\n class=\"c-icon-btn c-icon-btn--chevron\"\n :class=\"{ 'c-icon-btn--chevron-open': isOpen }\"\n >\n <i class=\"fa-solid fa-fw fa-chevron-down\"></i>\n </span>\n </button>\n\n <Teleport to=\"body\">\n <div class=\"ac-component\">\n <div v-if=\"isOpen\" ref=\"dropdownRef\" class=\"ds-sort-panel\" :style=\"dropdownStyle\">\n\n <div class=\"ds-sort-panel__row\">\n <label class=\"ds-sort-panel__label\">Oszlop</label>\n <DropdownSelect\n :model-value=\"sortBy\"\n :options=\"options\"\n :config=\"{\n clearable: false,\n placeholder: 'Válassz oszlopot...',\n filterable: false,\n }\"\n @update:model-value=\"onSortColumnChange\"\n />\n </div>\n\n <div class=\"ds-sort-panel__row\">\n <span class=\"ds-sort-panel__label\">Irány</span>\n <div class=\"ds-sort-direction\" role=\"group\" aria-label=\"Rendezés iránya\">\n <button\n type=\"button\"\n class=\"ds-sort-direction__btn\"\n :class=\"{ 'is-active': direction === 'asc' }\"\n :aria-pressed=\"direction === 'asc'\"\n aria-label=\"Növekvő\"\n @click=\"direction = 'asc'\"\n >\n <i class=\"fa-solid fa-fw fa-arrow-up-wide-short\"></i>\n <span>Növekvő</span>\n </button>\n <button\n type=\"button\"\n class=\"ds-sort-direction__btn dir-desc\"\n :class=\"{ 'is-active': direction === 'desc' }\"\n :aria-pressed=\"direction === 'desc'\"\n aria-label=\"Csökkenő\"\n @click=\"direction = 'desc'\"\n >\n <i class=\"fa-solid fa-fw fa-arrow-down-wide-short\"></i>\n <span>Csökkenő</span>\n </button>\n </div>\n </div>\n\n <div class=\"ds-sort-panel__footer\">\n <Button label=\"Rendben\" outline size=\"small\" @click=\"isOpen = false\" />\n </div>\n </div>\n </div>\n </Teleport>\n </div>\n </div>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/data-table/data-sort.scss\"></style>\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"admins-components85.js","names":[],"sources":["../src/components/data-table/DataSort.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type SortDirection = 'asc' | 'desc'\n\nexport interface DataSortOption {\n value: string\n label: string\n icon?: string\n}\n\nexport interface DataSortProps {\n modelValue: { key: string; direction: SortDirection } | null\n options: DataSortOption[]\n placeholder?: string\n handleUrl?: boolean\n disabled?: boolean\n}\n\nexport function getDefaultSort(): { key: string; direction: SortDirection } | null {\n if (typeof window === 'undefined') return null\n const params = new URLSearchParams(window.location.search)\n const key = params.get('sortBy')\n const dir = params.get('sortDir')\n if (key && (dir === 'asc' || dir === 'desc')) {\n return { key, direction: dir }\n }\n return null\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref, watch } from 'vue'\nimport DropdownSelect, { type DropdownOption } from '@/components/DropdownSelect.vue'\nimport { useDropdownAnchor } from '@/composables/useDropdownAnchor'\nimport { writeUrlOrRemove } from '@/utils/url'\nimport Button from '../Button.vue'\n\nconst props = withDefaults(defineProps<DataSortProps>(), {\n placeholder: 'Rendezés...',\n handleUrl: false,\n disabled: false\n})\n\nconst emit = defineEmits<{\n 'update:modelValue': [sort: { key: string; direction: SortDirection } | null]\n 'sort-change': [sort: { key: string; direction: SortDirection } | null]\n}>()\n\nconst wrapperRef = ref<HTMLElement | null>(null)\nconst dropdownRef = ref<HTMLElement | null>(null)\nconst { isOpen, dropdownStyle } = useDropdownAnchor(wrapperRef, dropdownRef, {\n extraStyle: (rect) => ({ minWidth: `${Math.max(rect.width, 240)}px` }),\n closeOnScroll: true,\n})\n\nconst sortBy = computed<string | string[] | null>({\n get: () => props.modelValue?.key ?? null,\n set: (v) => {\n if (Array.isArray(v)) return\n const next = typeof v === 'string' ? v : null\n emitChange(next, props.modelValue?.direction ?? 'asc')\n },\n})\n\nconst direction = computed<SortDirection>({\n get: () => props.modelValue?.direction ?? 'asc',\n set: (d) => emitChange(props.modelValue?.key ?? null, d),\n})\n\nconst activeLabel = computed(() => {\n if (!props.modelValue) return props.placeholder\n const opt = props.options.find((o) => o.value === props.modelValue!.key)\n const label = opt?.label ?? props.modelValue.key\n return `${label} (${props.modelValue.direction === 'asc' ? 'növekvő' : 'csökkenő'})`\n})\n\nfunction emitChange(key: string | null, dir: SortDirection) {\n if (key == null) {\n if (props.handleUrl) {\n writeUrlOrRemove('sortBy', null, { handleUrl: true })\n writeUrlOrRemove('sortDir', null, { handleUrl: true })\n }\n emit('update:modelValue', null)\n emit('sort-change', null)\n return\n }\n if (props.handleUrl) {\n writeUrlOrRemove('sortBy', key, { handleUrl: true })\n writeUrlOrRemove('sortDir', dir, { handleUrl: true, default: 'asc' })\n }\n const next = { key, direction: dir }\n emit('update:modelValue', next)\n emit('sort-change', next)\n}\n\nfunction clear() {\n emitChange(null, 'asc')\n isOpen.value = false\n}\n\nfunction onSortColumnChange(v: DropdownOption | DropdownOption[] | null) {\n if (Array.isArray(v)) return\n sortBy.value = v?.value ?? null\n}\n\
|
|
1
|
+
{"version":3,"file":"admins-components85.js","names":[],"sources":["../src/components/data-table/DataSort.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type SortDirection = 'asc' | 'desc'\n\nexport interface DataSortOption {\n value: string\n label: string\n icon?: string\n}\n\nexport interface DataSortProps {\n modelValue: { key: string; direction: SortDirection } | null\n options: DataSortOption[]\n placeholder?: string\n handleUrl?: boolean\n disabled?: boolean\n}\n\nexport function getDefaultSort(): { key: string; direction: SortDirection } | null {\n if (typeof window === 'undefined') return null\n const params = new URLSearchParams(window.location.search)\n const key = params.get('sortBy')\n const dir = params.get('sortDir')\n if (key && (dir === 'asc' || dir === 'desc')) {\n return { key, direction: dir }\n }\n return null\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref, watch } from 'vue'\nimport DropdownSelect, { type DropdownOption } from '@/components/DropdownSelect.vue'\nimport { useDropdownAnchor } from '@/composables/useDropdownAnchor'\nimport { writeUrlOrRemove } from '@/utils/url'\nimport Button from '../Button.vue'\n\nconst props = withDefaults(defineProps<DataSortProps>(), {\n placeholder: 'Rendezés...',\n handleUrl: false,\n disabled: false\n})\n\nconst emit = defineEmits<{\n 'update:modelValue': [sort: { key: string; direction: SortDirection } | null]\n 'sort-change': [sort: { key: string; direction: SortDirection } | null]\n}>()\n\nconst wrapperRef = ref<HTMLElement | null>(null)\nconst dropdownRef = ref<HTMLElement | null>(null)\nconst { isOpen, dropdownStyle } = useDropdownAnchor(wrapperRef, dropdownRef, {\n extraStyle: (rect) => ({ minWidth: `${Math.max(rect.width, 240)}px` }),\n closeOnScroll: true,\n})\n\nconst sortBy = computed<string | string[] | null>({\n get: () => props.modelValue?.key ?? null,\n set: (v) => {\n if (Array.isArray(v)) return\n const next = typeof v === 'string' ? v : null\n emitChange(next, props.modelValue?.direction ?? 'asc')\n },\n})\n\nconst direction = computed<SortDirection>({\n get: () => props.modelValue?.direction ?? 'asc',\n set: (d) => emitChange(props.modelValue?.key ?? null, d),\n})\n\nconst activeLabel = computed(() => {\n if (!props.modelValue) return props.placeholder\n const opt = props.options.find((o) => o.value === props.modelValue!.key)\n const label = opt?.label ?? props.modelValue.key\n return `${label} (${props.modelValue.direction === 'asc' ? 'növekvő' : 'csökkenő'})`\n})\n\nfunction emitChange(key: string | null, dir: SortDirection) {\n if (key == null) {\n if (props.handleUrl) {\n writeUrlOrRemove('sortBy', null, { handleUrl: true })\n writeUrlOrRemove('sortDir', null, { handleUrl: true })\n }\n emit('update:modelValue', null)\n emit('sort-change', null)\n return\n }\n if (props.handleUrl) {\n writeUrlOrRemove('sortBy', key, { handleUrl: true })\n writeUrlOrRemove('sortDir', dir, { handleUrl: true, default: 'asc' })\n }\n const next = { key, direction: dir }\n emit('update:modelValue', next)\n emit('sort-change', next)\n}\n\nfunction clear() {\n emitChange(null, 'asc')\n isOpen.value = false\n}\n\nfunction onSortColumnChange(v: DropdownOption | DropdownOption[] | null) {\n if (Array.isArray(v)) return\n sortBy.value = v?.value ?? null\n}\n\nwatch(\n isOpen,\n (open) => {\n if (!open || !props.handleUrl || props.modelValue) return\n const sort = getDefaultSort()\n if (sort) emitChange(sort.key, sort.direction)\n },\n { immediate: true },\n)\n</script>\n\n<template>\n <div class=\"ac-component\">\n <div ref=\"wrapperRef\" class=\"ds-sort-wrapper\">\n <button\n type=\"button\"\n class=\"c-btn ds-sort-trigger lh-1\"\n :class=\"[modelValue && 'is-active', disabled && 'is-disabled', isOpen && 'is-open']\"\n :disabled=\"disabled\"\n :aria-label=\"`Rendezés: ${activeLabel}`\"\n @click=\"isOpen = !isOpen\"\n >\n <i\n class=\"fa-solid fa-fw\"\n :class=\"\n !modelValue || modelValue.direction === 'asc'\n ? 'fa-arrow-up-wide-short'\n : 'fa-arrow-down-wide-short'\n \"\n ></i>\n <span class=\"ds-sort-label c-truncate\">{{ activeLabel }}</span>\n <button\n v-if=\"modelValue\"\n type=\"button\"\n class=\"c-icon-btn c-icon-btn--clear ds-sort-clear\"\n aria-label=\"Rendezés törlése\"\n title=\"Rendezés törlése\"\n @click.stop=\"clear\"\n >\n <i class=\"fa-solid fa-fw fa-xmark\"></i>\n </button>\n <span\n class=\"c-icon-btn c-icon-btn--chevron\"\n :class=\"{ 'c-icon-btn--chevron-open': isOpen }\"\n >\n <i class=\"fa-solid fa-fw fa-chevron-down\"></i>\n </span>\n </button>\n\n <Teleport to=\"body\">\n <div class=\"ac-component\">\n <div v-if=\"isOpen\" ref=\"dropdownRef\" class=\"ds-sort-panel\" :style=\"dropdownStyle\">\n\n <div class=\"ds-sort-panel__row\">\n <label class=\"ds-sort-panel__label\">Oszlop</label>\n <DropdownSelect\n :model-value=\"sortBy\"\n :options=\"options\"\n :config=\"{\n clearable: false,\n placeholder: 'Válassz oszlopot...',\n filterable: false,\n }\"\n @update:model-value=\"onSortColumnChange\"\n />\n </div>\n\n <div class=\"ds-sort-panel__row\">\n <span class=\"ds-sort-panel__label\">Irány</span>\n <div class=\"ds-sort-direction\" role=\"group\" aria-label=\"Rendezés iránya\">\n <button\n type=\"button\"\n class=\"ds-sort-direction__btn\"\n :class=\"{ 'is-active': direction === 'asc' }\"\n :aria-pressed=\"direction === 'asc'\"\n aria-label=\"Növekvő\"\n @click=\"direction = 'asc'\"\n >\n <i class=\"fa-solid fa-fw fa-arrow-up-wide-short\"></i>\n <span>Növekvő</span>\n </button>\n <button\n type=\"button\"\n class=\"ds-sort-direction__btn dir-desc\"\n :class=\"{ 'is-active': direction === 'desc' }\"\n :aria-pressed=\"direction === 'desc'\"\n aria-label=\"Csökkenő\"\n @click=\"direction = 'desc'\"\n >\n <i class=\"fa-solid fa-fw fa-arrow-down-wide-short\"></i>\n <span>Csökkenő</span>\n </button>\n </div>\n </div>\n\n <div class=\"ds-sort-panel__footer\">\n <Button label=\"Rendben\" outline size=\"small\" @click=\"isOpen = false\" />\n </div>\n </div>\n </div>\n </Teleport>\n </div>\n </div>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/data-table/data-sort.scss\"></style>\n"],"mappings":""}
|