admins-components 9.0.55 → 9.0.56
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"admins-components58.js","names":[],"sources":["../src/types/data-list.ts"],"sourcesContent":["import type { DropdownOption } from '@/components/DropdownSelect.vue'\nimport type { PickedDate, PickedUtcRange } from '@/types/types'\nimport type { ButtonType } from '@/components/Button.vue'\nimport type { ConfirmModalProps } from '@/components/ConfirmModal.vue'\n\nexport type FilterValue = string | PickedDate | PickedUtcRange | string[] | null | undefined\n\nexport interface FilterConfig {\n type: 'text' | 'date' | 'date-range' | 'select' | 'multi-select'\n key: string\n placeholder?: string\n options?: DropdownOption[]\n}\n\nexport type LayoutMode = 'table' | 'cards' | 'screen'\n\nexport interface DataTableSettings {\n striped: boolean\n compact: boolean\n}\n\nexport interface DataCardsSettings {\n compact: boolean\n}\n\nexport interface DataListSettings extends DataTableSettings, DataCardsSettings {\n layout: LayoutMode\n columns: Record<string, boolean>\n cardHeaderColumns: Record<string, boolean>\n columnOrder: string[]\n cardHeaderOrder: string[]\n}\n\nexport interface PageSettings {\n page: number\n pageSize: number\n}\n\nexport interface PaginatorSettings extends PageSettings {\n total: number\n}\n\nexport interface DataListConfig {\n selectableAttr?: string\n columns: Column[]\n\n actions?: Array<Action | ActionGroup>\n actionHeader?: string\n}\n\nexport type ColumnType = 'normal' | 'uuid' | 'date' | 'datetime'\n\nexport interface Column {\n visible?: boolean\n primary?: boolean\n hideable?: boolean\n defaultCardHeader?: boolean\n label: string\n property: string\n sort?: Sort\n type?: ColumnType\n class?: string\n headerClass?: string\n hideCopyToClipboard?: boolean\n hideHeader?: boolean\n\n converter?: ((v: any, item: any) => any)\n loading?: (() => boolean)\n}\n\nexport type SortDirection = 'asc' | 'desc' | null\n\nexport interface Sort {\n label: string\n callback: (property: string, direction: SortDirection) => any\n}\n\nexport interface Action {\n icon: string\n label?: string\n ariaLabel?: string\n cardLabel?: string\n type?: ButtonType\n config?: Record<string, any>\n disabled?: (item: any) => boolean\n hidden?: (item: any) => boolean\n callback: (item: any) => any\n withConfirm?: boolean\n withConfirmConfig?: (item: any) => ConfirmModalProps\n}\n\nexport interface ActionGroup {\n isGroup: true\n icon?: string\n label?: string\n ariaLabel?: string\n cardLabel?: string\n config?: Record<string, any>\n items: Action[]\n disabled?: (item: any) => boolean\n hidden?: (item: any) => boolean\n}\n\nexport const dataTableSettingsDefaults: DataTableSettings = {\n striped: true,\n compact: false,\n}\n\nexport const dataCardsSettingsDefaults: DataCardsSettings = {\n compact: false,\n}\n\nexport const dataListSettingsDefaults: Partial<DataListSettings> = {\n layout: 'screen',\n compact: false,\n}\n"],"mappings":";AAuGA,IAAa,IAA+C;CAC1D,SAAS;CACT,SAAS;AACX,GAEa,IAA+C,EAC1D,SAAS,GACX,GAEa,IAAsD;CACjE,QAAQ;CACR,SAAS;AACX"}
|
|
1
|
+
{"version":3,"file":"admins-components58.js","names":[],"sources":["../src/types/data-list.ts"],"sourcesContent":["import type { DropdownOption } from '@/components/DropdownSelect.vue'\nimport type { PickedDate, PickedUtcRange } from '@/types/types'\nimport type { ButtonType } from '@/components/Button.vue'\nimport type { ConfirmModalProps } from '@/components/ConfirmModal.vue'\n\nexport type FilterValue = string | PickedDate | PickedUtcRange | string[] | null | undefined\n\nexport interface FilterConfig {\n type: 'text' | 'date' | 'date-range' | 'select' | 'multi-select'\n key: string\n placeholder?: string\n options?: DropdownOption[]\n}\n\nexport type LayoutMode = 'table' | 'cards' | 'screen'\n\nexport interface DataTableSettings {\n striped: boolean\n compact: boolean\n}\n\nexport interface DataCardsSettings {\n compact: boolean\n}\n\nexport interface DataListSettings extends DataTableSettings, DataCardsSettings {\n layout: LayoutMode\n columns: Record<string, boolean>\n cardHeaderColumns: Record<string, boolean>\n columnOrder: string[]\n cardHeaderOrder: string[]\n}\n\nexport interface PageSettings {\n page: number\n pageSize: number\n}\n\nexport interface PaginatorSettings extends PageSettings {\n total: number\n}\n\nexport interface DataListConfig {\n selectableAttr?: string\n columns: Column[]\n\n actions?: Array<Action | ActionGroup>\n actionHeader?: string\n}\n\nexport type ColumnType = 'normal' | 'uuid' | 'date' | 'datetime'\n\nexport interface Column {\n visible?: boolean\n primary?: boolean\n hideable?: boolean\n defaultCardHeader?: boolean\n label: string\n property: string\n sort?: Sort | boolean\n type?: ColumnType\n class?: string\n headerClass?: string\n hideCopyToClipboard?: boolean\n hideHeader?: boolean\n\n converter?: ((v: any, item: any) => any)\n loading?: (() => boolean)\n}\n\nexport type SortDirection = 'asc' | 'desc' | null\n\nexport interface Sort {\n label: string\n callback: (property: string, direction: SortDirection) => any\n}\n\nexport interface Action {\n icon: string\n label?: string\n ariaLabel?: string\n cardLabel?: string\n type?: ButtonType\n config?: Record<string, any>\n disabled?: (item: any) => boolean\n hidden?: (item: any) => boolean\n callback: (item: any) => any\n withConfirm?: boolean\n withConfirmConfig?: (item: any) => ConfirmModalProps\n}\n\nexport interface ActionGroup {\n isGroup: true\n icon?: string\n label?: string\n ariaLabel?: string\n cardLabel?: string\n config?: Record<string, any>\n items: Action[]\n disabled?: (item: any) => boolean\n hidden?: (item: any) => boolean\n}\n\nexport const dataTableSettingsDefaults: DataTableSettings = {\n striped: true,\n compact: false,\n}\n\nexport const dataCardsSettingsDefaults: DataCardsSettings = {\n compact: false,\n}\n\nexport const dataListSettingsDefaults: Partial<DataListSettings> = {\n layout: 'screen',\n compact: false,\n}\n"],"mappings":";AAuGA,IAAa,IAA+C;CAC1D,SAAS;CACT,SAAS;AACX,GAEa,IAA+C,EAC1D,SAAS,GACX,GAEa,IAAsD;CACjE,QAAQ;CACR,SAAS;AACX"}
|
|
@@ -39,16 +39,22 @@ var T = { class: "ac-component" }, E = { key: 0 }, D = ["title", "onClick"], O =
|
|
|
39
39
|
});
|
|
40
40
|
let { selectedKeys: H, allSelected: U, toggle: W, toggleAll: G } = n(() => R.items, () => R.config.selectableAttr, (e) => z("selection-change", e)), K = s(() => R.config.columns.filter((e) => e.visible !== !1));
|
|
41
41
|
function q(e) {
|
|
42
|
+
return e.sort ? typeof e.sort == "boolean" ? null : e.sort : null;
|
|
43
|
+
}
|
|
44
|
+
function J(e) {
|
|
45
|
+
return !!e.sort;
|
|
46
|
+
}
|
|
47
|
+
function Y(e) {
|
|
42
48
|
let t = e.property, n = B.value?.key === t && B.value.direction === "asc" ? "desc" : "asc";
|
|
43
49
|
B.value = {
|
|
44
50
|
key: t,
|
|
45
51
|
direction: n
|
|
46
|
-
}, e
|
|
52
|
+
}, q(e)?.callback?.(t, n), z("sort-change", {
|
|
47
53
|
key: t,
|
|
48
54
|
direction: n
|
|
49
55
|
});
|
|
50
56
|
}
|
|
51
|
-
function
|
|
57
|
+
function X(e) {
|
|
52
58
|
if (!e) {
|
|
53
59
|
B.value !== null && (B.value = null);
|
|
54
60
|
return;
|
|
@@ -57,12 +63,12 @@ var T = { class: "ac-component" }, E = { key: 0 }, D = ["title", "onClick"], O =
|
|
|
57
63
|
t && (B.value?.key === e.key && B.value.direction === e.direction || (B.value = {
|
|
58
64
|
key: e.key,
|
|
59
65
|
direction: e.direction
|
|
60
|
-
}, t
|
|
66
|
+
}, q(t)?.callback?.(e.key, e.direction), z("sort-change", {
|
|
61
67
|
key: e.key,
|
|
62
68
|
direction: e.direction
|
|
63
69
|
})));
|
|
64
70
|
}
|
|
65
|
-
return _(() =>
|
|
71
|
+
return _(() => X(R.initialSort)), C(() => R.initialSort, (e) => {
|
|
66
72
|
if (!e) {
|
|
67
73
|
B.value !== null && (B.value = null);
|
|
68
74
|
return;
|
|
@@ -86,13 +92,13 @@ var T = { class: "ac-component" }, E = { key: 0 }, D = ["title", "onClick"], O =
|
|
|
86
92
|
(v(!0), l(o, null, b(K.value, (e) => (v(), l("th", {
|
|
87
93
|
key: e.property,
|
|
88
94
|
class: h([{
|
|
89
|
-
"c-sortable": e
|
|
95
|
+
"c-sortable": J(e),
|
|
90
96
|
"c-sortable--sorted": B.value?.key === e.property,
|
|
91
97
|
"primary-col": e.primary
|
|
92
98
|
}, e.headerClass]),
|
|
93
|
-
title: e
|
|
94
|
-
onClick: (t) => e
|
|
95
|
-
}, [d(x(e.hideHeader ? "" : e.label) + " ", 1), e
|
|
99
|
+
title: J(e) ? `Sorrendezés ${e.label} alapján` : void 0,
|
|
100
|
+
onClick: (t) => J(e) ? Y(e) : void 0
|
|
101
|
+
}, [d(x(e.hideHeader ? "" : e.label) + " ", 1), J(e) ? (v(), l("span", {
|
|
96
102
|
key: 0,
|
|
97
103
|
class: h(["c-sort-icon fa-solid", {
|
|
98
104
|
"fa-sort": B.value?.key !== e.property,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"admins-components65.js","names":[],"sources":["../src/components/data-table/DataTable.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type {\n LayoutMode,\n DataListConfig,\n DataListSettings,\n DataTableSettings,\n DataCardsSettings,\n Column,\n Sort,\n Action,\n ActionGroup,\n FilterConfig,\n FilterValue,\n} from '@/types/data-list'\n\nexport {\n dataTableSettingsDefaults,\n dataCardsSettingsDefaults,\n dataListSettingsDefaults,\n} from '@/types/data-list'\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref, onMounted, watch, nextTick } from 'vue'\nimport Checkbox from '@/components/Checkbox.vue'\nimport { useSelection } from '@/composables/useSelection'\nimport { dataTableSettingsDefaults } from '@/types/data-list'\nimport type { Column, DataListConfig, DataTableSettings } from '@/types/data-list'\nimport Loader from '@/components/Loader.vue'\nimport DataCell from './DataCell.vue'\nimport DataListActions from './DataListActions.vue'\n\ntype SortDirection = 'asc' | 'desc'\n\nconst props = withDefaults(\n defineProps<{\n config: DataListConfig\n items: Record<string, unknown>[]\n settings?: DataTableSettings\n loading?: boolean\n initialSort?: { key: string; direction: SortDirection } | null\n }>(),\n {\n settings: () => ({ ...dataTableSettingsDefaults }),\n loading: false,\n initialSort: null,\n },\n)\n\nconst emit = defineEmits<{\n 'selection-change': [selected: unknown[]]\n 'sort-change': [sort: { key: string; direction: SortDirection }]\n}>()\n\n//const CHARACTER_BREAKPOINT = 20\n\nconst activeSort = ref<{\n key: string\n direction: SortDirection\n} | null>(null)\n\nconst tableWrapperRef = ref<HTMLElement | null>(null)\n\nwatch(\n () => props.loading,\n async (isLoading) => {\n if (isLoading) {\n await nextTick()\n tableWrapperRef.value?.scrollTo({ top: 0, behavior: 'smooth' })\n }\n },\n)\n\nconst {\n selectedKeys,\n allSelected,\n toggle: toggleRow,\n toggleAll,\n} = useSelection(\n () => props.items,\n () => props.config.selectableAttr,\n (s) => emit('selection-change', s),\n)\n\nconst visibleColumns = computed(() => props.config.columns.filter((c) => c.visible !== false))\n\nfunction handleSort(col: Column) {\n const key = col.property\n const direction: SortDirection =\n activeSort.value?.key === key && activeSort.value.direction === 'asc' ? 'desc' : 'asc'\n\n activeSort.value = { key, direction }\n col.sort?.callback?.(key, direction)\n\n emit('sort-change', { key, direction })\n}\n\nfunction applyInitialSort(sort: { key: string; direction: SortDirection } | null | undefined) {\n if (!sort) {\n if (activeSort.value !== null) activeSort.value = null\n return\n }\n const col = props.config.columns.find((c) => c.property === sort.key)\n if (!col) return\n if (activeSort.value?.key === sort.key && activeSort.value.direction === sort.direction) return\n activeSort.value = { key: sort.key, direction: sort.direction }\n col.sort?.callback?.(sort.key, sort.direction)\n emit('sort-change', { key: sort.key, direction: sort.direction })\n}\n\nonMounted(() => applyInitialSort(props.initialSort))\nwatch(\n () => props.initialSort,\n (s) => {\n // When initialSort changes, sync the visual indicator only.\n // Don't re-emit sort-change — that would cause an infinite loop with\n // parents that re-assign the prop from the emitted value.\n if (!s) {\n if (activeSort.value !== null) activeSort.value = null\n return\n }\n const col = props.config.columns.find((c) => c.property === s.key)\n if (!col) return\n if (activeSort.value?.key === s.key && activeSort.value.direction === s.direction) return\n activeSort.value = { key: s.key, direction: s.direction }\n },\n)\n</script>\n\n<template>\n <div class=\"ac-component\">\n <div\n ref=\"tableWrapperRef\"\n class=\"c-table-wrapper list-table-view\"\n :class=\"{ 'is-loading': loading }\"\n >\n <table\n class=\"c-table\"\n :class=\"{ 'is-compact': settings.compact }\"\n :style=\"{ '--action-count': config.actions?.length ?? 0 }\"\n >\n <thead>\n <tr>\n <th v-if=\"config.selectableAttr\">\n <Checkbox :model-value=\"allSelected\" @update:model-value=\"toggleAll\" />\n </th>\n\n <th\n v-for=\"col in visibleColumns\"\n :key=\"col.property\"\n :class=\"[\n {\n 'c-sortable': col.sort,\n 'c-sortable--sorted': activeSort?.key === col.property,\n 'primary-col': col.primary,\n },\n col.headerClass,\n ]\"\n :title=\"col.sort ? `Sorrendezés ${col.label} alapján` : undefined\"\n @click=\"col.sort ? handleSort(col) : undefined\"\n >\n {{ !col.hideHeader ? col.label : '' }}\n\n <span\n v-if=\"col.sort\"\n class=\"c-sort-icon fa-solid\"\n :class=\"{\n 'fa-sort': activeSort?.key !== col.property,\n 'fa-sort-down':\n activeSort?.key === col.property && activeSort.direction === 'desc',\n 'fa-sort-up': activeSort?.key === col.property && activeSort.direction === 'asc',\n 'c-sort-icon--active': activeSort?.key === col.property,\n 'is-asc': activeSort?.key === col.property && activeSort.direction === 'asc',\n 'is-desc': activeSort?.key === col.property && activeSort.direction === 'desc',\n }\"\n ></span>\n </th>\n\n <th v-if=\"config.actions\" class=\"c-actions-header\">\n {{ config.actionHeader ?? '' }}\n </th>\n </tr>\n </thead>\n\n <tbody v-if=\"!loading || items.length > 0\">\n <tr\n v-for=\"(item, index) in items\"\n :key=\"index\"\n :class=\"{\n 'is-selected': config.selectableAttr && selectedKeys.has(item[config.selectableAttr]),\n 'is-striped': settings.striped && index % 2 === 1,\n }\"\n >\n <td v-if=\"config.selectableAttr\" class=\"pointer\" @click.stop=\"toggleRow(item)\">\n <Checkbox\n :model-value=\"!!selectedKeys.has(item[config.selectableAttr])\"\n @update:model-value=\"toggleRow(item)\"\n @click.stop\n />\n </td>\n\n <td\n v-for=\"col in visibleColumns\"\n :key=\"col.property\"\n class=\"c-table__cell\"\n :class=\"[\n col.class,\n { 'primary-col': col.primary },\n /* { 'is-nowrap': String(getColumnValue(item, col) ?? '').length < CHARACTER_BREAKPOINT}, */\n ]\"\n >\n <DataCell :item=\"item\" :col=\"col\" :copy=\"!col.hideCopyToClipboard\" />\n </td>\n\n <td v-if=\"config.actions\" class=\"c-actions-cell\">\n <div class=\"c-actions-wrap\">\n <DataListActions :actions=\"config.actions\" :item=\"item\" />\n </div>\n </td>\n </tr>\n </tbody>\n <tbody v-else>\n <tr class=\"c-table__loading-row\">\n <td\n :colspan=\"\n visibleColumns.length + (config.selectableAttr ? 1 : 0) + (config.actions ? 1 : 0)\n \"\n class=\"c-table__loading-cell\"\n >\n <div class=\"c-table__loading-wrap\">\n <Loader :loading=\"true\" size=\"2.5rem\" />\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n <div v-if=\"loading && items.length > 0\" class=\"c-table__backdrop\" aria-hidden=\"true\">\n <Loader :loading=\"true\" size=\"2.5rem\" />\n </div>\n </div>\n </div>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/data-table/data-table.scss\"></style>\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"admins-components65.js","names":[],"sources":["../src/components/data-table/DataTable.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type {\n LayoutMode,\n DataListConfig,\n DataListSettings,\n DataTableSettings,\n DataCardsSettings,\n Column,\n Sort,\n Action,\n ActionGroup,\n FilterConfig,\n FilterValue,\n} from '@/types/data-list'\n\nexport {\n dataTableSettingsDefaults,\n dataCardsSettingsDefaults,\n dataListSettingsDefaults,\n} from '@/types/data-list'\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref, onMounted, watch, nextTick } from 'vue'\nimport Checkbox from '@/components/Checkbox.vue'\nimport { useSelection } from '@/composables/useSelection'\nimport { dataTableSettingsDefaults } from '@/types/data-list'\nimport type { Column, DataListConfig, DataTableSettings, Sort } from '@/types/data-list'\nimport Loader from '@/components/Loader.vue'\nimport DataCell from './DataCell.vue'\nimport DataListActions from './DataListActions.vue'\n\ntype SortDirection = 'asc' | 'desc'\n\nconst props = withDefaults(\n defineProps<{\n config: DataListConfig\n items: Record<string, unknown>[]\n settings?: DataTableSettings\n loading?: boolean\n initialSort?: { key: string; direction: SortDirection } | null\n }>(),\n {\n settings: () => ({ ...dataTableSettingsDefaults }),\n loading: false,\n initialSort: null,\n },\n)\n\nconst emit = defineEmits<{\n 'selection-change': [selected: unknown[]]\n 'sort-change': [sort: { key: string; direction: SortDirection }]\n}>()\n\n//const CHARACTER_BREAKPOINT = 20\n\nconst activeSort = ref<{\n key: string\n direction: SortDirection\n} | null>(null)\n\nconst tableWrapperRef = ref<HTMLElement | null>(null)\n\nwatch(\n () => props.loading,\n async (isLoading) => {\n if (isLoading) {\n await nextTick()\n tableWrapperRef.value?.scrollTo({ top: 0, behavior: 'smooth' })\n }\n },\n)\n\nconst {\n selectedKeys,\n allSelected,\n toggle: toggleRow,\n toggleAll,\n} = useSelection(\n () => props.items,\n () => props.config.selectableAttr,\n (s) => emit('selection-change', s),\n)\n\nconst visibleColumns = computed(() => props.config.columns.filter((c) => c.visible !== false))\n\nfunction getSortConfig(col: Column): Sort | null {\n if (!col.sort) return null\n return typeof col.sort === 'boolean' ? null : col.sort\n}\n\nfunction isSortable(col: Column): boolean {\n return !!col.sort\n}\n\nfunction handleSort(col: Column) {\n const key = col.property\n const direction: SortDirection =\n activeSort.value?.key === key && activeSort.value.direction === 'asc' ? 'desc' : 'asc'\n\n activeSort.value = { key, direction }\n getSortConfig(col)?.callback?.(key, direction)\n\n emit('sort-change', { key, direction })\n}\n\nfunction applyInitialSort(sort: { key: string; direction: SortDirection } | null | undefined) {\n if (!sort) {\n if (activeSort.value !== null) activeSort.value = null\n return\n }\n const col = props.config.columns.find((c) => c.property === sort.key)\n if (!col) return\n if (activeSort.value?.key === sort.key && activeSort.value.direction === sort.direction) return\n activeSort.value = { key: sort.key, direction: sort.direction }\n getSortConfig(col)?.callback?.(sort.key, sort.direction)\n emit('sort-change', { key: sort.key, direction: sort.direction })\n}\n\nonMounted(() => applyInitialSort(props.initialSort))\nwatch(\n () => props.initialSort,\n (s) => {\n // When initialSort changes, sync the visual indicator only.\n // Don't re-emit sort-change — that would cause an infinite loop with\n // parents that re-assign the prop from the emitted value.\n if (!s) {\n if (activeSort.value !== null) activeSort.value = null\n return\n }\n const col = props.config.columns.find((c) => c.property === s.key)\n if (!col) return\n if (activeSort.value?.key === s.key && activeSort.value.direction === s.direction) return\n activeSort.value = { key: s.key, direction: s.direction }\n },\n)\n</script>\n\n<template>\n <div class=\"ac-component\">\n <div\n ref=\"tableWrapperRef\"\n class=\"c-table-wrapper list-table-view\"\n :class=\"{ 'is-loading': loading }\"\n >\n <table\n class=\"c-table\"\n :class=\"{ 'is-compact': settings.compact }\"\n :style=\"{ '--action-count': config.actions?.length ?? 0 }\"\n >\n <thead>\n <tr>\n <th v-if=\"config.selectableAttr\">\n <Checkbox :model-value=\"allSelected\" @update:model-value=\"toggleAll\" />\n </th>\n\n <th\n v-for=\"col in visibleColumns\"\n :key=\"col.property\"\n :class=\"[\n {\n 'c-sortable': isSortable(col),\n 'c-sortable--sorted': activeSort?.key === col.property,\n 'primary-col': col.primary,\n },\n col.headerClass,\n ]\"\n :title=\"isSortable(col) ? `Sorrendezés ${col.label} alapján` : undefined\"\n @click=\"isSortable(col) ? handleSort(col) : undefined\"\n >\n {{ !col.hideHeader ? col.label : '' }}\n\n <span\n v-if=\"isSortable(col)\"\n class=\"c-sort-icon fa-solid\"\n :class=\"{\n 'fa-sort': activeSort?.key !== col.property,\n 'fa-sort-down':\n activeSort?.key === col.property && activeSort.direction === 'desc',\n 'fa-sort-up': activeSort?.key === col.property && activeSort.direction === 'asc',\n 'c-sort-icon--active': activeSort?.key === col.property,\n 'is-asc': activeSort?.key === col.property && activeSort.direction === 'asc',\n 'is-desc': activeSort?.key === col.property && activeSort.direction === 'desc',\n }\"\n ></span>\n </th>\n\n <th v-if=\"config.actions\" class=\"c-actions-header\">\n {{ config.actionHeader ?? '' }}\n </th>\n </tr>\n </thead>\n\n <tbody v-if=\"!loading || items.length > 0\">\n <tr\n v-for=\"(item, index) in items\"\n :key=\"index\"\n :class=\"{\n 'is-selected': config.selectableAttr && selectedKeys.has(item[config.selectableAttr]),\n 'is-striped': settings.striped && index % 2 === 1,\n }\"\n >\n <td v-if=\"config.selectableAttr\" class=\"pointer\" @click.stop=\"toggleRow(item)\">\n <Checkbox\n :model-value=\"!!selectedKeys.has(item[config.selectableAttr])\"\n @update:model-value=\"toggleRow(item)\"\n @click.stop\n />\n </td>\n\n <td\n v-for=\"col in visibleColumns\"\n :key=\"col.property\"\n class=\"c-table__cell\"\n :class=\"[\n col.class,\n { 'primary-col': col.primary },\n /* { 'is-nowrap': String(getColumnValue(item, col) ?? '').length < CHARACTER_BREAKPOINT}, */\n ]\"\n >\n <DataCell :item=\"item\" :col=\"col\" :copy=\"!col.hideCopyToClipboard\" />\n </td>\n\n <td v-if=\"config.actions\" class=\"c-actions-cell\">\n <div class=\"c-actions-wrap\">\n <DataListActions :actions=\"config.actions\" :item=\"item\" />\n </div>\n </td>\n </tr>\n </tbody>\n <tbody v-else>\n <tr class=\"c-table__loading-row\">\n <td\n :colspan=\"\n visibleColumns.length + (config.selectableAttr ? 1 : 0) + (config.actions ? 1 : 0)\n \"\n class=\"c-table__loading-cell\"\n >\n <div class=\"c-table__loading-wrap\">\n <Loader :loading=\"true\" size=\"2.5rem\" />\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n <div v-if=\"loading && items.length > 0\" class=\"c-table__backdrop\" aria-hidden=\"true\">\n <Loader :loading=\"true\" size=\"2.5rem\" />\n </div>\n </div>\n </div>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/data-table/data-table.scss\"></style>\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"admins-components67.js","names":[],"sources":["../src/components/data-table/DataTable.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type {\n LayoutMode,\n DataListConfig,\n DataListSettings,\n DataTableSettings,\n DataCardsSettings,\n Column,\n Sort,\n Action,\n ActionGroup,\n FilterConfig,\n FilterValue,\n} from '@/types/data-list'\n\nexport {\n dataTableSettingsDefaults,\n dataCardsSettingsDefaults,\n dataListSettingsDefaults,\n} from '@/types/data-list'\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref, onMounted, watch, nextTick } from 'vue'\nimport Checkbox from '@/components/Checkbox.vue'\nimport { useSelection } from '@/composables/useSelection'\nimport { dataTableSettingsDefaults } from '@/types/data-list'\nimport type { Column, DataListConfig, DataTableSettings } from '@/types/data-list'\nimport Loader from '@/components/Loader.vue'\nimport DataCell from './DataCell.vue'\nimport DataListActions from './DataListActions.vue'\n\ntype SortDirection = 'asc' | 'desc'\n\nconst props = withDefaults(\n defineProps<{\n config: DataListConfig\n items: Record<string, unknown>[]\n settings?: DataTableSettings\n loading?: boolean\n initialSort?: { key: string; direction: SortDirection } | null\n }>(),\n {\n settings: () => ({ ...dataTableSettingsDefaults }),\n loading: false,\n initialSort: null,\n },\n)\n\nconst emit = defineEmits<{\n 'selection-change': [selected: unknown[]]\n 'sort-change': [sort: { key: string; direction: SortDirection }]\n}>()\n\n//const CHARACTER_BREAKPOINT = 20\n\nconst activeSort = ref<{\n key: string\n direction: SortDirection\n} | null>(null)\n\nconst tableWrapperRef = ref<HTMLElement | null>(null)\n\nwatch(\n () => props.loading,\n async (isLoading) => {\n if (isLoading) {\n await nextTick()\n tableWrapperRef.value?.scrollTo({ top: 0, behavior: 'smooth' })\n }\n },\n)\n\nconst {\n selectedKeys,\n allSelected,\n toggle: toggleRow,\n toggleAll,\n} = useSelection(\n () => props.items,\n () => props.config.selectableAttr,\n (s) => emit('selection-change', s),\n)\n\nconst visibleColumns = computed(() => props.config.columns.filter((c) => c.visible !== false))\n\nfunction handleSort(col: Column) {\n const key = col.property\n const direction: SortDirection =\n activeSort.value?.key === key && activeSort.value.direction === 'asc' ? 'desc' : 'asc'\n\n activeSort.value = { key, direction }\n col
|
|
1
|
+
{"version":3,"file":"admins-components67.js","names":[],"sources":["../src/components/data-table/DataTable.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type {\n LayoutMode,\n DataListConfig,\n DataListSettings,\n DataTableSettings,\n DataCardsSettings,\n Column,\n Sort,\n Action,\n ActionGroup,\n FilterConfig,\n FilterValue,\n} from '@/types/data-list'\n\nexport {\n dataTableSettingsDefaults,\n dataCardsSettingsDefaults,\n dataListSettingsDefaults,\n} from '@/types/data-list'\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref, onMounted, watch, nextTick } from 'vue'\nimport Checkbox from '@/components/Checkbox.vue'\nimport { useSelection } from '@/composables/useSelection'\nimport { dataTableSettingsDefaults } from '@/types/data-list'\nimport type { Column, DataListConfig, DataTableSettings, Sort } from '@/types/data-list'\nimport Loader from '@/components/Loader.vue'\nimport DataCell from './DataCell.vue'\nimport DataListActions from './DataListActions.vue'\n\ntype SortDirection = 'asc' | 'desc'\n\nconst props = withDefaults(\n defineProps<{\n config: DataListConfig\n items: Record<string, unknown>[]\n settings?: DataTableSettings\n loading?: boolean\n initialSort?: { key: string; direction: SortDirection } | null\n }>(),\n {\n settings: () => ({ ...dataTableSettingsDefaults }),\n loading: false,\n initialSort: null,\n },\n)\n\nconst emit = defineEmits<{\n 'selection-change': [selected: unknown[]]\n 'sort-change': [sort: { key: string; direction: SortDirection }]\n}>()\n\n//const CHARACTER_BREAKPOINT = 20\n\nconst activeSort = ref<{\n key: string\n direction: SortDirection\n} | null>(null)\n\nconst tableWrapperRef = ref<HTMLElement | null>(null)\n\nwatch(\n () => props.loading,\n async (isLoading) => {\n if (isLoading) {\n await nextTick()\n tableWrapperRef.value?.scrollTo({ top: 0, behavior: 'smooth' })\n }\n },\n)\n\nconst {\n selectedKeys,\n allSelected,\n toggle: toggleRow,\n toggleAll,\n} = useSelection(\n () => props.items,\n () => props.config.selectableAttr,\n (s) => emit('selection-change', s),\n)\n\nconst visibleColumns = computed(() => props.config.columns.filter((c) => c.visible !== false))\n\nfunction getSortConfig(col: Column): Sort | null {\n if (!col.sort) return null\n return typeof col.sort === 'boolean' ? null : col.sort\n}\n\nfunction isSortable(col: Column): boolean {\n return !!col.sort\n}\n\nfunction handleSort(col: Column) {\n const key = col.property\n const direction: SortDirection =\n activeSort.value?.key === key && activeSort.value.direction === 'asc' ? 'desc' : 'asc'\n\n activeSort.value = { key, direction }\n getSortConfig(col)?.callback?.(key, direction)\n\n emit('sort-change', { key, direction })\n}\n\nfunction applyInitialSort(sort: { key: string; direction: SortDirection } | null | undefined) {\n if (!sort) {\n if (activeSort.value !== null) activeSort.value = null\n return\n }\n const col = props.config.columns.find((c) => c.property === sort.key)\n if (!col) return\n if (activeSort.value?.key === sort.key && activeSort.value.direction === sort.direction) return\n activeSort.value = { key: sort.key, direction: sort.direction }\n getSortConfig(col)?.callback?.(sort.key, sort.direction)\n emit('sort-change', { key: sort.key, direction: sort.direction })\n}\n\nonMounted(() => applyInitialSort(props.initialSort))\nwatch(\n () => props.initialSort,\n (s) => {\n // When initialSort changes, sync the visual indicator only.\n // Don't re-emit sort-change — that would cause an infinite loop with\n // parents that re-assign the prop from the emitted value.\n if (!s) {\n if (activeSort.value !== null) activeSort.value = null\n return\n }\n const col = props.config.columns.find((c) => c.property === s.key)\n if (!col) return\n if (activeSort.value?.key === s.key && activeSort.value.direction === s.direction) return\n activeSort.value = { key: s.key, direction: s.direction }\n },\n)\n</script>\n\n<template>\n <div class=\"ac-component\">\n <div\n ref=\"tableWrapperRef\"\n class=\"c-table-wrapper list-table-view\"\n :class=\"{ 'is-loading': loading }\"\n >\n <table\n class=\"c-table\"\n :class=\"{ 'is-compact': settings.compact }\"\n :style=\"{ '--action-count': config.actions?.length ?? 0 }\"\n >\n <thead>\n <tr>\n <th v-if=\"config.selectableAttr\">\n <Checkbox :model-value=\"allSelected\" @update:model-value=\"toggleAll\" />\n </th>\n\n <th\n v-for=\"col in visibleColumns\"\n :key=\"col.property\"\n :class=\"[\n {\n 'c-sortable': isSortable(col),\n 'c-sortable--sorted': activeSort?.key === col.property,\n 'primary-col': col.primary,\n },\n col.headerClass,\n ]\"\n :title=\"isSortable(col) ? `Sorrendezés ${col.label} alapján` : undefined\"\n @click=\"isSortable(col) ? handleSort(col) : undefined\"\n >\n {{ !col.hideHeader ? col.label : '' }}\n\n <span\n v-if=\"isSortable(col)\"\n class=\"c-sort-icon fa-solid\"\n :class=\"{\n 'fa-sort': activeSort?.key !== col.property,\n 'fa-sort-down':\n activeSort?.key === col.property && activeSort.direction === 'desc',\n 'fa-sort-up': activeSort?.key === col.property && activeSort.direction === 'asc',\n 'c-sort-icon--active': activeSort?.key === col.property,\n 'is-asc': activeSort?.key === col.property && activeSort.direction === 'asc',\n 'is-desc': activeSort?.key === col.property && activeSort.direction === 'desc',\n }\"\n ></span>\n </th>\n\n <th v-if=\"config.actions\" class=\"c-actions-header\">\n {{ config.actionHeader ?? '' }}\n </th>\n </tr>\n </thead>\n\n <tbody v-if=\"!loading || items.length > 0\">\n <tr\n v-for=\"(item, index) in items\"\n :key=\"index\"\n :class=\"{\n 'is-selected': config.selectableAttr && selectedKeys.has(item[config.selectableAttr]),\n 'is-striped': settings.striped && index % 2 === 1,\n }\"\n >\n <td v-if=\"config.selectableAttr\" class=\"pointer\" @click.stop=\"toggleRow(item)\">\n <Checkbox\n :model-value=\"!!selectedKeys.has(item[config.selectableAttr])\"\n @update:model-value=\"toggleRow(item)\"\n @click.stop\n />\n </td>\n\n <td\n v-for=\"col in visibleColumns\"\n :key=\"col.property\"\n class=\"c-table__cell\"\n :class=\"[\n col.class,\n { 'primary-col': col.primary },\n /* { 'is-nowrap': String(getColumnValue(item, col) ?? '').length < CHARACTER_BREAKPOINT}, */\n ]\"\n >\n <DataCell :item=\"item\" :col=\"col\" :copy=\"!col.hideCopyToClipboard\" />\n </td>\n\n <td v-if=\"config.actions\" class=\"c-actions-cell\">\n <div class=\"c-actions-wrap\">\n <DataListActions :actions=\"config.actions\" :item=\"item\" />\n </div>\n </td>\n </tr>\n </tbody>\n <tbody v-else>\n <tr class=\"c-table__loading-row\">\n <td\n :colspan=\"\n visibleColumns.length + (config.selectableAttr ? 1 : 0) + (config.actions ? 1 : 0)\n \"\n class=\"c-table__loading-cell\"\n >\n <div class=\"c-table__loading-wrap\">\n <Loader :loading=\"true\" size=\"2.5rem\" />\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n <div v-if=\"loading && items.length > 0\" class=\"c-table__backdrop\" aria-hidden=\"true\">\n <Loader :loading=\"true\" size=\"2.5rem\" />\n </div>\n </div>\n </div>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/data-table/data-table.scss\"></style>\n"],"mappings":""}
|