admins-components 9.0.85 → 9.0.86
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/admins-components103.js +121 -117
- package/dist/admins-components103.js.map +1 -1
- package/dist/admins-components105.js.map +1 -1
- package/dist/admins-components60.js +1 -0
- package/dist/admins-components60.js.map +1 -1
- package/dist/admins-components68.js +7 -4
- package/dist/admins-components68.js.map +1 -1
- package/dist/admins-components70.js.map +1 -1
- package/dist/admins-components71.js +5 -2
- package/dist/admins-components71.js.map +1 -1
- package/dist/admins-components73.js.map +1 -1
- package/dist/admins-components75.js +103 -77
- package/dist/admins-components75.js.map +1 -1
- package/dist/admins-components77.js.map +1 -1
- package/dist/admins-components80.js +49 -48
- package/dist/admins-components80.js.map +1 -1
- package/dist/admins-components82.js.map +1 -1
- package/dist/src/components/data-table/DataCards.vue.d.ts +4 -4
- package/dist/src/components/data-table/DataPaginator.vue.d.ts +3 -0
- package/dist/src/components/data-table/DataTable.vue.d.ts +4 -4
- package/dist/src/types/data-list.d.ts +2 -1
- package/dist/styles/components/data-table/data-cards.scss_vue_type_style_index_0_src_true_lang.css +1 -1
- package/dist/styles/components/data-table/data-list-options.scss_vue_type_style_index_0_src_true_lang.css +1 -1
- package/dist/styles/components/data-table/data-list.scss_vue_type_style_index_0_src_true_lang.css +1 -1
- package/dist/styles/components/data-table/data-paginator.scss_vue_type_style_index_0_src_true_lang.css +1 -1
- package/dist/styles/components/data-table/data-table.scss_vue_type_style_index_0_src_true_lang.css +1 -1
- package/dist/test.html +162 -162
- package/dist/test81.html +160 -160
- package/dist/widget.css +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"admins-components68.js","names":["$slots"],"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 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\n ref=\"tableWrapperRef\"\n class=\"ac-component c-table-wrapper list-table-view\"\n :class=\"{ 'is-loading': loading }\"\n >\n <!-- :style=\"{ '--action-count': config.actions?.length ?? 0 }\" -->\n <table class=\"c-table\" :class=\"{ 'is-compact': settings.compact }\">\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': 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 'pointer': config.selectableAttr,\n }\"\n @click=\"config.selectableAttr ? toggleRow(item) : undefined\"\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 <slot :name=\"`cell:${col.property}`\" :item=\"item\" :col=\"col\">\n <DataCell :item=\"item\" :col=\"col\" :copy=\"!col.hideCopyToClipboard\" />\n </slot>\n </td>\n\n <td v-if=\"config.actions\" class=\"c-actions-cell\" @click.stop>\n <slot\n v-if=\"$slots.actions\"\n name=\"actions\"\n :item=\"item\"\n :index=\"index\"\n :actions=\"config.actions\"\n />\n <div v-else 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</template>\n\n<style lang=\"scss\" src=\"@/styles/components/data-table/data-table.scss\"></style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkCA,IAAM,IAAQ,GAeR,IAAO,GAOP,IAAa,EAGT,IAAI,GAER,IAAkB,EAAwB,IAAI;EAEpD,QACQ,EAAM,SACZ,OAAO,MAAc;GACnB,AAAI,MACF,MAAM,EAAS,GACf,EAAgB,OAAO,SAAS;IAAE,KAAK;IAAG,UAAU;GAAS,CAAC;EAElE,CACF;EAEA,IAAM,EACJ,iBACA,gBACA,QAAQ,GACR,iBACE,QACI,EAAM,aACN,EAAM,OAAO,iBAClB,MAAM,EAAK,oBAAoB,CAAC,CACnC,GAEM,IAAiB,QAAe,EAAM,OAAO,QAAQ,QAAQ,MAAM,EAAE,YAAY,EAAK,CAAC;EAE7F,SAAS,EAAc,GAA0B;GAE/C,OADK,EAAI,OACF,OAAO,EAAI,QAAS,YAAY,OAAO,EAAI,OAD5B;EAExB;EAEA,SAAS,EAAW,GAAsB;GACxC,OAAO,CAAC,CAAC,EAAI;EACf;EAEA,SAAS,EAAW,GAAa;GAC/B,IAAM,IAAM,EAAI,UACV,IACJ,EAAW,OAAO,QAAQ,KAAO,EAAW,MAAM,cAAc,QAAQ,SAAS;GAKnF,AAHA,EAAW,QAAQ;IAAE;IAAK;GAAU,GACpC,EAAc,CAAG,CAAC,EAAE,WAAW,GAAK,CAAS,GAE7C,EAAK,eAAe;IAAE;IAAK;GAAU,CAAC;EACxC;EAEA,SAAS,EAAiB,GAAoE;GAC5F,IAAI,CAAC,GAAM;IACT,AAAI,EAAW,UAAU,SAAM,EAAW,QAAQ;IAClD;GACF;GACA,IAAM,IAAM,EAAM,OAAO,QAAQ,MAAM,MAAM,EAAE,aAAa,EAAK,GAAG;GAC/D,MACD,EAAW,OAAO,QAAQ,EAAK,OAAO,EAAW,MAAM,cAAc,EAAK,eAC9E,EAAW,QAAQ;IAAE,KAAK,EAAK;IAAK,WAAW,EAAK;GAAU,GAC9D,EAAc,CAAG,CAAC,EAAE,WAAW,EAAK,KAAK,EAAK,SAAS,GACvD,EAAK,eAAe;IAAE,KAAK,EAAK;IAAK,WAAW,EAAK;GAAU,CAAC;EAClE;SAEA,QAAgB,EAAiB,EAAM,WAAW,CAAC,GACnD,QACQ,EAAM,cACX,MAAM;GACL,IAAI,CAAC,GAAG;IACN,AAAI,EAAW,UAAU,SAAM,EAAW,QAAQ;IAClD;GACF;GACY,EAAM,OAAO,QAAQ,MAAM,MAAM,EAAE,aAAa,EAAE,GACzD,MACD,EAAW,OAAO,QAAQ,EAAE,OAAO,EAAW,MAAM,cAAc,EAAE,eACxE,EAAW,QAAQ;IAAE,KAAK,EAAE;IAAK,WAAW,EAAE;GAAU;EAC1D,CACF,cAIE,EAAA,GAAA,EAmHM,OAAA;GAlHA,SAAA;GAAJ,KAAI;GACJ,OAAK,EAAA,CAAC,gDAA8C,EAAA,cAC5B,EAAA,QAAO,CAAA,CAAA;EAG/B,GAAA,CAAA,EAyGQ,SAAA,EAzGD,OAAK,EAAA,CAAC,WAAS,EAAA,cAAyB,EAAA,SAAS,QAAO,CAAA,CAAA,EAAA,GAAA,CAC7D,EAwCQ,SAAA,MAAA,CAvCN,EAsCK,MAAA,MAAA;GArCO,EAAA,OAAO,kBAAjB,EAAA,GAAA,EAEK,MAAA,GAAA,CADH,EAAuE,GAAA;IAA5D,eAAa,EAAA,CAAA;IAAc,uBAAoB,EAAA,CAAA;;IAG5D,EAAA,EAAA,GAAA,EA4BK,GAAA,MAAA,EA3BW,EAAA,QAAP,OADT,EAAA,GAAA,EA4BK,MAAA;IA1BF,KAAK,EAAI;IACT,OAAK,EAAA,CAAA;KAAkD,cAAA,EAAW,CAAG;KAAyC,sBAAA,EAAA,OAAY,QAAQ,EAAI;KAAyC,eAAA,EAAI;IAAwC,GAAA,EAAI,WAAA,CAAA;IAQ/N,OAAO,EAAW,CAAG,IAAA,eAAmB,EAAI,MAAK,YAAa,KAAA;IAC9D,UAAK,MAAE,EAAW,CAAG,IAAI,EAAW,CAAG,IAAI,KAAA;GAExC,GAAA,CAAA,EAAA,EAAA,EAAI,aAAsB,KAAT,EAAI,KAAK,IAAQ,KAEtC,CAAA,GACQ,EAAW,CAAG,KADtB,EAAA,GAAA,EAWQ,QAAA;;IATN,OAAK,EAAA,CAAC,wBAAsB;KACS,WAAA,EAAA,OAAY,QAAQ,EAAI;KAA0C,gBAAA,EAAA,OAAY,QAAQ,EAAI,YAAY,EAAA,MAAW,cAAS;KAA2C,cAAA,EAAA,OAAY,QAAQ,EAAI,YAAY,EAAA,MAAW,cAAS;KAAmD,uBAAA,EAAA,OAAY,QAAQ,EAAI;KAAoC,UAAA,EAAA,OAAY,QAAQ,EAAI,YAAY,EAAA,MAAW,cAAS;KAAuC,WAAA,EAAA,OAAY,QAAQ,EAAI,YAAY,EAAA,MAAW,cAAS;;;GAWlgB,EAAA,OAAO,WAAjB,EAAA,GAAA,EAEK,MAFL,GAEK,EADA,EAAA,OAAO,gBAAY,EAAA,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA;EAKd,CAAA,CAAA,CAAA,GAAA,CAAA,EAAA,WAAW,EAAA,MAAM,SAAM,KAArC,EAAA,GAAA,EA+CQ,SAAA,GAAA,EA9CN,EAAA,EAAA,GAAA,EA6CK,GAAA,MAAA,EA5CqB,EAAA,QAAhB,GAAM,OADhB,EAAA,GAAA,EA6CK,MAAA;GA3CF,KAAK;GACL,OAAK,EAAA;IAA+B,eAAA,EAAA,OAAO,kBAAkB,EAAA,CAAA,CAAY,CAAC,IAAI,EAAK,EAAA,OAAO,eAAc;IAA8B,cAAA,EAAA,SAAS,WAAW,IAAK,KAAA;IAAmC,SAAA,EAAA,OAAO;;GAKzM,UAAK,MAAE,EAAA,OAAO,iBAAiB,EAAA,CAAA,CAAS,CAAC,CAAI,IAAI,KAAA;;GAExC,EAAA,OAAO,kBAAjB,EAAA,GAAA,EAMK,MAAA;;IAN4B,OAAM;IAAW,SAAK,GAAA,MAAO,EAAA,CAAA,CAAS,CAAC,CAAI,GAAA,CAAA,MAAA,CAAA;GAC1E,GAAA,CAAA,EAIE,GAAA;IAHC,eAAW,CAAA,CAAI,EAAA,CAAA,CAAY,CAAC,IAAI,EAAK,EAAA,OAAO,eAAc;IAC1D,wBAAkB,MAAE,EAAA,CAAA,CAAS,CAAC,CAAI;IAClC,SAAK,AAAA,EAAA,OAAA,QAAN,CAAA,GAAW,CAAA,MAAA,CAAA;;IAIf,EAAA,EAAA,GAAA,EAaK,GAAA,MAAA,EAZW,EAAA,QAAP,OADT,EAAA,GAAA,EAaK,MAAA;IAXF,KAAK,EAAI;IACV,OAAK,EAAA,CAAC,iBAAe,CACG,EAAI,OAAsC,EAAA,eAAA,EAAI,QAAO,CAAA,CAAA,CAAA;GAM7E,GAAA,CAAA,EAEO,EAAA,QAAA,QAFc,EAAI,YAAQ;IAAW;IAAY;GAAxD,SAEO,CADL,EAAqE,GAAA;IAApD;IAAY;IAAM,MAAI,CAAG,EAAI;;;;;;GAIxC,EAAA,OAAO,WAAjB,EAAA,GAAA,EAWK,MAAA;;IAXqB,OAAM;IAAkB,SAAK,AAAA,EAAA,OAAA,QAAN,CAAA,GAAW,CAAA,MAAA,CAAA;GAElDA,GAAAA,CAAAA,EAAAA,OAAO,UADf,EAME,EAAA,QAAA,WAAA;;IAHO;IACC;IACP,SAAS,EAAA,OAAO;GAEnB,CAAA,KAAA,EAAA,GAAA,EAEM,OAFN,GAEM,CADJ,EAA0D,GAAA;IAAxC,SAAS,EAAA,OAAO;IAAgB;;YAK1D,GAAA,GAAA,EAAA,CAAA,MAAA,EAAA,GAAA,EAaQ,SAAA,GAAA,CAZN,EAWK,MAXL,GAWK,CAVH,EASK,MAAA;GARF,SAAwB,EAAA,MAAe,SAAU,KAAA,OAAO,iBAA2B,KAAA,OAAO;GAG3F,OAAM;EAEN,GAAA,CAAA,EAEM,OAFN,GAEM,CADJ,EAAwC,GAAA;GAA/B,SAAS;GAAM,MAAK;EAM5B,CAAA,CAAA,CAAA,CAAA,GAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,EAAA,GAAA,CAAA,GAAA,EAAA,WAAW,EAAA,MAAM,SAAM,KAAlC,EAAA,GAAA,EAEM,OAFN,GAEM,CADJ,EAAwC,GAAA;GAA/B,SAAS;GAAM,MAAK"}
|
|
1
|
+
{"version":3,"file":"admins-components68.js","names":["$slots"],"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, DataListSettings, 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?: Partial<DataListSettings>\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 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\n ref=\"tableWrapperRef\"\n class=\"ac-component c-table-wrapper list-table-view\"\n :class=\"{\n 'is-loading': loading,\n [`is-font-${settings.fontSize ?? 'normal'}`]: true,\n }\"\n >\n <!-- :style=\"{ '--action-count': config.actions?.length ?? 0 }\" -->\n <table class=\"c-table\" :class=\"{ 'is-compact': settings.compact }\">\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': 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 && !config.selectableAttr\" 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 pointer: config.selectableAttr,\n }\"\n @click=\"config.selectableAttr ? toggleRow(item) : undefined\"\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 <slot :name=\"`cell:${col.property}`\" :item=\"item\" :col=\"col\">\n <DataCell :item=\"item\" :col=\"col\" :copy=\"!col.hideCopyToClipboard\" />\n </slot>\n </td>\n\n <td v-if=\"config.actions && !config.selectableAttr\" class=\"c-actions-cell\" @click.stop>\n <slot\n v-if=\"$slots.actions\"\n name=\"actions\"\n :item=\"item\"\n :index=\"index\"\n :actions=\"config.actions\"\n />\n <div v-else 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 +\n (config.selectableAttr ? 1 : 0) +\n (config.actions && !config.selectableAttr ? 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</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-components70.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,
|
|
1
|
+
{"version":3,"file":"admins-components70.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, DataListSettings, 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?: Partial<DataListSettings>\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 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\n ref=\"tableWrapperRef\"\n class=\"ac-component c-table-wrapper list-table-view\"\n :class=\"{\n 'is-loading': loading,\n [`is-font-${settings.fontSize ?? 'normal'}`]: true,\n }\"\n >\n <!-- :style=\"{ '--action-count': config.actions?.length ?? 0 }\" -->\n <table class=\"c-table\" :class=\"{ 'is-compact': settings.compact }\">\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': 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 && !config.selectableAttr\" 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 pointer: config.selectableAttr,\n }\"\n @click=\"config.selectableAttr ? toggleRow(item) : undefined\"\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 <slot :name=\"`cell:${col.property}`\" :item=\"item\" :col=\"col\">\n <DataCell :item=\"item\" :col=\"col\" :copy=\"!col.hideCopyToClipboard\" />\n </slot>\n </td>\n\n <td v-if=\"config.actions && !config.selectableAttr\" class=\"c-actions-cell\" @click.stop>\n <slot\n v-if=\"$slots.actions\"\n name=\"actions\"\n :item=\"item\"\n :index=\"index\"\n :actions=\"config.actions\"\n />\n <div v-else 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 +\n (config.selectableAttr ? 1 : 0) +\n (config.actions && !config.selectableAttr ? 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</template>\n\n<style lang=\"scss\" src=\"@/styles/components/data-table/data-table.scss\"></style>\n"],"mappings":""}
|
|
@@ -70,7 +70,10 @@ var M = ["onClick"], N = ["onClick"], P = { class: "c-card__heading" }, F = { cl
|
|
|
70
70
|
return b(), p("div", {
|
|
71
71
|
ref_key: "cardsWrapperRef",
|
|
72
72
|
ref: J,
|
|
73
|
-
class: y(["ac-component c-cards-wrapper list-card-view", {
|
|
73
|
+
class: y(["ac-component c-cards-wrapper list-card-view", {
|
|
74
|
+
"is-loading": a.loading,
|
|
75
|
+
[`is-font-${a.settings.fontSize ?? "normal"}`]: !0
|
|
76
|
+
}])
|
|
74
77
|
}, [!a.loading || a.items.length > 0 ? (b(), p("div", {
|
|
75
78
|
key: 0,
|
|
76
79
|
class: y(["c-cards", { "is-compact": a.settings.compact }])
|
|
@@ -128,7 +131,7 @@ var M = ["onClick"], N = ["onClick"], P = { class: "c-card__heading" }, F = { cl
|
|
|
128
131
|
class: "c-card__field-copy click-expand",
|
|
129
132
|
value: D(o)(t, e)
|
|
130
133
|
}, null, 8, ["value"])) : f("", !0)
|
|
131
|
-
]))), 128)), a.config.actions ? (b(), p("div", {
|
|
134
|
+
]))), 128)), a.config.actions && !a.config.selectableAttr ? (b(), p("div", {
|
|
132
135
|
key: 0,
|
|
133
136
|
class: "c-card__actions",
|
|
134
137
|
onClick: u[1] ||= j(() => {}, ["stop"])
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"admins-components71.js","names":[],"sources":["../src/components/data-table/DataCards.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { DataListConfig, DataCardsSettings, DataListSettings } from '@/types/data-list'\nimport DataCell from './DataCell.vue'\nimport DataListActions from './DataListActions.vue'\nexport { dataCardsSettingsDefaults } from '@/types/data-list'\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref, watch, isVNode, nextTick } from 'vue'\nimport Checkbox from '@/components/Checkbox.vue'\nimport CopyToClipboard from '@/components/CopyToClipboard.vue'\nimport Loader from '@/components/Loader.vue'\nimport { useSelection } from '@/composables/useSelection'\nimport { dataCardsSettingsDefaults } from '@/types/data-list'\nimport { getColumnValue } from '@/utils/dataList'\nimport { shortUuid } from '@/utils/dataListConverters'\n\nconst props = withDefaults(\n defineProps<{\n config: DataListConfig\n items: Record<string, unknown>[]\n settings?: DataCardsSettings | DataListSettings\n loading?: boolean\n }>(),\n {\n settings: () => ({ ...dataCardsSettingsDefaults }),\n loading: false,\n },\n)\n\nconst emit = defineEmits<{\n 'selection-change': [selected: unknown[]]\n}>()\n\nconst { selectedKeys, toggle: toggleRow } = useSelection(\n () => props.items,\n () => props.config.selectableAttr,\n (s) => emit('selection-change', s),\n)\n\nconst openRowIndexes = ref<Set<number>>(new Set())\n\nconst cardsWrapperRef = ref<HTMLElement | null>(null)\n\nwatch(\n () => props.loading,\n async (isLoading) => {\n if (isLoading) {\n await nextTick()\n cardsWrapperRef.value?.scrollTo({ top: 0, behavior: 'smooth' })\n }\n },\n)\n\nwatch(\n () => props.items,\n () => {\n openRowIndexes.value = new Set()\n },\n)\n\nconst visibleColumns = computed(() => props.config.columns.filter((c) => c.visible !== false))\n\nconst cardHeaderColumns = computed(() => {\n const s = props.settings as any\n if (s?.cardHeaderColumns) {\n const cols = visibleColumns.value.filter((c) => s.cardHeaderColumns[c.property])\n if (cols.length > 0) {\n if (s.cardHeaderOrder) {\n const order = s.cardHeaderOrder as 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 return cols\n }\n }\n const primary = visibleColumns.value.filter((c) => c.primary)\n if (primary.length > 0) return primary\n\n return visibleColumns.value.slice(0, 1)\n})\n\nfunction onHeaderClick(index: number, item: Record<string, unknown>) {\n if (props.config.selectableAttr) {\n toggleRow(item)\n } else {\n toggleAccordion(index)\n }\n}\n\nfunction onChevronClick(index: number, e: MouseEvent) {\n e.stopPropagation()\n toggleAccordion(index)\n}\n\nfunction toggleAccordion(index: number) {\n if (openRowIndexes.value.has(index)) {\n openRowIndexes.value.delete(index)\n } else {\n openRowIndexes.value.add(index)\n }\n openRowIndexes.value = new Set(openRowIndexes.value)\n}\n</script>\n\n<template>\n <div\n ref=\"cardsWrapperRef\"\n class=\"ac-component c-cards-wrapper list-card-view\"\n :class=\"{ 'is-loading': loading }\"\n >\n <div\n v-if=\"!loading || items.length > 0\"\n class=\"c-cards\"\n :class=\"{ 'is-compact': settings.compact }\"\n >\n <div\n v-for=\"(item, index) in items\"\n :key=\"index\"\n class=\"c-card\"\n :class=\"{\n 'is-open': openRowIndexes.has(index),\n 'is-selected': config.selectableAttr && selectedKeys.has(item[config.selectableAttr]),\n }\"\n >\n <button type=\"button\" class=\"c-card__header\" @click=\"onHeaderClick(index, item)\">\n <span\n v-if=\"config.selectableAttr\"\n class=\"c-card__check-zone\"\n @click.stop=\"toggleRow(item)\"\n >\n <Checkbox\n :model-value=\"!!selectedKeys.has(item[config.selectableAttr])\"\n @update:model-value=\"toggleRow(item)\"\n @click.stop\n />\n </span>\n <span class=\"c-card__heading\">\n <span\n v-for=\"(col, i) in cardHeaderColumns\"\n :key=\"col.property\"\n class=\"c-card__heading-item\"\n :class=\"[{ primary: col.primary }, col.headerClass]\"\n >\n <span class=\"c-card__label\">{{ !col.hideHeader ? col.label : '' }}</span>\n <span class=\"c-card__title\" :class=\"{ 'c-truncate': settings.compact && i === 0 }\">\n <component\n v-if=\"isVNode(getColumnValue(item, col))\"\n :is=\"getColumnValue(item, col)\"\n />\n <span\n v-else-if=\"col.type === 'uuid'\"\n v-tooltip=\"getColumnValue(item, col)\"\n v-html=\"shortUuid()(getColumnValue(item, col) as string)\"\n ></span>\n <span v-else v-html=\"getColumnValue(item, col)\"></span>\n </span>\n </span>\n </span>\n <span class=\"c-card__icon\" aria-hidden=\"true\" @click=\"onChevronClick(index, $event)\"\n ><i class=\"fa-solid fa-chevron-down\"></i\n ></span>\n </button>\n\n <div v-show=\"openRowIndexes.has(index)\" class=\"c-card__body\">\n <div v-for=\"col in visibleColumns\" :key=\"col.property\" class=\"c-card__field\">\n <span class=\"c-card__field-label\">{{ col.label }}</span>\n <slot :name=\"`cell:${col.property}`\" :item=\"item\" :col=\"col\">\n <DataCell :item=\"item\" :col=\"col\" class=\"c-card__field-value\" :copy=\"false\" />\n </slot>\n\n <CopyToClipboard\n v-if=\"getColumnValue(item, col) && !col.hideCopyToClipboard\"\n class=\"c-card__field-copy click-expand\"\n :value=\"getColumnValue(item, col)\"\n />\n </div>\n\n <div v-if=\"config.actions\" class=\"c-card__actions\" @click.stop>\n <slot name=\"actions\" :item=\"item\" :index=\"index\" :actions=\"config.actions\">\n <DataListActions :actions=\"config.actions\" :item=\"item\" />\n </slot>\n </div>\n </div>\n </div>\n </div>\n <div v-else class=\"c-cards__loading-wrap\">\n <Loader :loading=\"true\" size=\"2.5rem\" />\n </div>\n <div v-if=\"loading && items.length > 0\" class=\"c-cards__backdrop\" aria-hidden=\"true\">\n <Loader :loading=\"true\" size=\"2.5rem\" />\n </div>\n </div>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/data-table/data-cards.scss\"></style>\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"admins-components71.js","names":[],"sources":["../src/components/data-table/DataCards.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { DataListConfig, DataListSettings } from '@/types/data-list'\nimport DataCell from './DataCell.vue'\nimport DataListActions from './DataListActions.vue'\nexport { dataCardsSettingsDefaults } from '@/types/data-list'\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref, watch, isVNode, nextTick } from 'vue'\nimport Checkbox from '@/components/Checkbox.vue'\nimport CopyToClipboard from '@/components/CopyToClipboard.vue'\nimport Loader from '@/components/Loader.vue'\nimport { useSelection } from '@/composables/useSelection'\nimport { dataCardsSettingsDefaults } from '@/types/data-list'\nimport { getColumnValue } from '@/utils/dataList'\nimport { shortUuid } from '@/utils/dataListConverters'\n\nconst props = withDefaults(\n defineProps<{\n config: DataListConfig\n items: Record<string, unknown>[]\n settings?: Partial<DataListSettings>\n loading?: boolean\n }>(),\n {\n settings: () => ({ ...dataCardsSettingsDefaults }),\n loading: false,\n },\n)\n\nconst emit = defineEmits<{\n 'selection-change': [selected: unknown[]]\n}>()\n\nconst { selectedKeys, toggle: toggleRow } = useSelection(\n () => props.items,\n () => props.config.selectableAttr,\n (s) => emit('selection-change', s),\n)\n\nconst openRowIndexes = ref<Set<number>>(new Set())\n\nconst cardsWrapperRef = ref<HTMLElement | null>(null)\n\nwatch(\n () => props.loading,\n async (isLoading) => {\n if (isLoading) {\n await nextTick()\n cardsWrapperRef.value?.scrollTo({ top: 0, behavior: 'smooth' })\n }\n },\n)\n\nwatch(\n () => props.items,\n () => {\n openRowIndexes.value = new Set()\n },\n)\n\nconst visibleColumns = computed(() => props.config.columns.filter((c) => c.visible !== false))\n\nconst cardHeaderColumns = computed(() => {\n const s = props.settings as any\n if (s?.cardHeaderColumns) {\n const cols = visibleColumns.value.filter((c) => s.cardHeaderColumns[c.property])\n if (cols.length > 0) {\n if (s.cardHeaderOrder) {\n const order = s.cardHeaderOrder as 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 return cols\n }\n }\n const primary = visibleColumns.value.filter((c) => c.primary)\n if (primary.length > 0) return primary\n\n return visibleColumns.value.slice(0, 1)\n})\n\nfunction onHeaderClick(index: number, item: Record<string, unknown>) {\n if (props.config.selectableAttr) {\n toggleRow(item)\n } else {\n toggleAccordion(index)\n }\n}\n\nfunction onChevronClick(index: number, e: MouseEvent) {\n e.stopPropagation()\n toggleAccordion(index)\n}\n\nfunction toggleAccordion(index: number) {\n if (openRowIndexes.value.has(index)) {\n openRowIndexes.value.delete(index)\n } else {\n openRowIndexes.value.add(index)\n }\n openRowIndexes.value = new Set(openRowIndexes.value)\n}\n</script>\n\n<template>\n <div\n ref=\"cardsWrapperRef\"\n class=\"ac-component c-cards-wrapper list-card-view\"\n :class=\"{\n 'is-loading': loading,\n [`is-font-${settings.fontSize ?? 'normal'}`]: true,\n }\"\n >\n <div\n v-if=\"!loading || items.length > 0\"\n class=\"c-cards\"\n :class=\"{ 'is-compact': settings.compact }\"\n >\n <div\n v-for=\"(item, index) in items\"\n :key=\"index\"\n class=\"c-card\"\n :class=\"{\n 'is-open': openRowIndexes.has(index),\n 'is-selected': config.selectableAttr && selectedKeys.has(item[config.selectableAttr]),\n }\"\n >\n <button type=\"button\" class=\"c-card__header\" @click=\"onHeaderClick(index, item)\">\n <span\n v-if=\"config.selectableAttr\"\n class=\"c-card__check-zone\"\n @click.stop=\"toggleRow(item)\"\n >\n <Checkbox\n :model-value=\"!!selectedKeys.has(item[config.selectableAttr])\"\n @update:model-value=\"toggleRow(item)\"\n @click.stop\n />\n </span>\n <span class=\"c-card__heading\">\n <span\n v-for=\"(col, i) in cardHeaderColumns\"\n :key=\"col.property\"\n class=\"c-card__heading-item\"\n :class=\"[{ primary: col.primary }, col.headerClass]\"\n >\n <span class=\"c-card__label\">{{ !col.hideHeader ? col.label : '' }}</span>\n <span class=\"c-card__title\" :class=\"{ 'c-truncate': settings.compact && i === 0 }\">\n <component\n v-if=\"isVNode(getColumnValue(item, col))\"\n :is=\"getColumnValue(item, col)\"\n />\n <span\n v-else-if=\"col.type === 'uuid'\"\n v-tooltip=\"getColumnValue(item, col)\"\n v-html=\"shortUuid()(getColumnValue(item, col) as string)\"\n ></span>\n <span v-else v-html=\"getColumnValue(item, col)\"></span>\n </span>\n </span>\n </span>\n <span class=\"c-card__icon\" aria-hidden=\"true\" @click=\"onChevronClick(index, $event)\"\n ><i class=\"fa-solid fa-chevron-down\"></i\n ></span>\n </button>\n\n <div v-show=\"openRowIndexes.has(index)\" class=\"c-card__body\">\n <div v-for=\"col in visibleColumns\" :key=\"col.property\" class=\"c-card__field\">\n <span class=\"c-card__field-label\">{{ col.label }}</span>\n <slot :name=\"`cell:${col.property}`\" :item=\"item\" :col=\"col\">\n <DataCell :item=\"item\" :col=\"col\" class=\"c-card__field-value\" :copy=\"false\" />\n </slot>\n\n <CopyToClipboard\n v-if=\"getColumnValue(item, col) && !col.hideCopyToClipboard\"\n class=\"c-card__field-copy click-expand\"\n :value=\"getColumnValue(item, col)\"\n />\n </div>\n\n <div v-if=\"config.actions && !config.selectableAttr\" class=\"c-card__actions\" @click.stop>\n <slot name=\"actions\" :item=\"item\" :index=\"index\" :actions=\"config.actions\">\n <DataListActions :actions=\"config.actions\" :item=\"item\" />\n </slot>\n </div>\n </div>\n </div>\n </div>\n <div v-else class=\"c-cards__loading-wrap\">\n <Loader :loading=\"true\" size=\"2.5rem\" />\n </div>\n <div v-if=\"loading && items.length > 0\" class=\"c-cards__backdrop\" aria-hidden=\"true\">\n <Loader :loading=\"true\" size=\"2.5rem\" />\n </div>\n </div>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/data-table/data-cards.scss\"></style>\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"admins-components73.js","names":[],"sources":["../src/components/data-table/DataCards.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { DataListConfig,
|
|
1
|
+
{"version":3,"file":"admins-components73.js","names":[],"sources":["../src/components/data-table/DataCards.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { DataListConfig, DataListSettings } from '@/types/data-list'\nimport DataCell from './DataCell.vue'\nimport DataListActions from './DataListActions.vue'\nexport { dataCardsSettingsDefaults } from '@/types/data-list'\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref, watch, isVNode, nextTick } from 'vue'\nimport Checkbox from '@/components/Checkbox.vue'\nimport CopyToClipboard from '@/components/CopyToClipboard.vue'\nimport Loader from '@/components/Loader.vue'\nimport { useSelection } from '@/composables/useSelection'\nimport { dataCardsSettingsDefaults } from '@/types/data-list'\nimport { getColumnValue } from '@/utils/dataList'\nimport { shortUuid } from '@/utils/dataListConverters'\n\nconst props = withDefaults(\n defineProps<{\n config: DataListConfig\n items: Record<string, unknown>[]\n settings?: Partial<DataListSettings>\n loading?: boolean\n }>(),\n {\n settings: () => ({ ...dataCardsSettingsDefaults }),\n loading: false,\n },\n)\n\nconst emit = defineEmits<{\n 'selection-change': [selected: unknown[]]\n}>()\n\nconst { selectedKeys, toggle: toggleRow } = useSelection(\n () => props.items,\n () => props.config.selectableAttr,\n (s) => emit('selection-change', s),\n)\n\nconst openRowIndexes = ref<Set<number>>(new Set())\n\nconst cardsWrapperRef = ref<HTMLElement | null>(null)\n\nwatch(\n () => props.loading,\n async (isLoading) => {\n if (isLoading) {\n await nextTick()\n cardsWrapperRef.value?.scrollTo({ top: 0, behavior: 'smooth' })\n }\n },\n)\n\nwatch(\n () => props.items,\n () => {\n openRowIndexes.value = new Set()\n },\n)\n\nconst visibleColumns = computed(() => props.config.columns.filter((c) => c.visible !== false))\n\nconst cardHeaderColumns = computed(() => {\n const s = props.settings as any\n if (s?.cardHeaderColumns) {\n const cols = visibleColumns.value.filter((c) => s.cardHeaderColumns[c.property])\n if (cols.length > 0) {\n if (s.cardHeaderOrder) {\n const order = s.cardHeaderOrder as 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 return cols\n }\n }\n const primary = visibleColumns.value.filter((c) => c.primary)\n if (primary.length > 0) return primary\n\n return visibleColumns.value.slice(0, 1)\n})\n\nfunction onHeaderClick(index: number, item: Record<string, unknown>) {\n if (props.config.selectableAttr) {\n toggleRow(item)\n } else {\n toggleAccordion(index)\n }\n}\n\nfunction onChevronClick(index: number, e: MouseEvent) {\n e.stopPropagation()\n toggleAccordion(index)\n}\n\nfunction toggleAccordion(index: number) {\n if (openRowIndexes.value.has(index)) {\n openRowIndexes.value.delete(index)\n } else {\n openRowIndexes.value.add(index)\n }\n openRowIndexes.value = new Set(openRowIndexes.value)\n}\n</script>\n\n<template>\n <div\n ref=\"cardsWrapperRef\"\n class=\"ac-component c-cards-wrapper list-card-view\"\n :class=\"{\n 'is-loading': loading,\n [`is-font-${settings.fontSize ?? 'normal'}`]: true,\n }\"\n >\n <div\n v-if=\"!loading || items.length > 0\"\n class=\"c-cards\"\n :class=\"{ 'is-compact': settings.compact }\"\n >\n <div\n v-for=\"(item, index) in items\"\n :key=\"index\"\n class=\"c-card\"\n :class=\"{\n 'is-open': openRowIndexes.has(index),\n 'is-selected': config.selectableAttr && selectedKeys.has(item[config.selectableAttr]),\n }\"\n >\n <button type=\"button\" class=\"c-card__header\" @click=\"onHeaderClick(index, item)\">\n <span\n v-if=\"config.selectableAttr\"\n class=\"c-card__check-zone\"\n @click.stop=\"toggleRow(item)\"\n >\n <Checkbox\n :model-value=\"!!selectedKeys.has(item[config.selectableAttr])\"\n @update:model-value=\"toggleRow(item)\"\n @click.stop\n />\n </span>\n <span class=\"c-card__heading\">\n <span\n v-for=\"(col, i) in cardHeaderColumns\"\n :key=\"col.property\"\n class=\"c-card__heading-item\"\n :class=\"[{ primary: col.primary }, col.headerClass]\"\n >\n <span class=\"c-card__label\">{{ !col.hideHeader ? col.label : '' }}</span>\n <span class=\"c-card__title\" :class=\"{ 'c-truncate': settings.compact && i === 0 }\">\n <component\n v-if=\"isVNode(getColumnValue(item, col))\"\n :is=\"getColumnValue(item, col)\"\n />\n <span\n v-else-if=\"col.type === 'uuid'\"\n v-tooltip=\"getColumnValue(item, col)\"\n v-html=\"shortUuid()(getColumnValue(item, col) as string)\"\n ></span>\n <span v-else v-html=\"getColumnValue(item, col)\"></span>\n </span>\n </span>\n </span>\n <span class=\"c-card__icon\" aria-hidden=\"true\" @click=\"onChevronClick(index, $event)\"\n ><i class=\"fa-solid fa-chevron-down\"></i\n ></span>\n </button>\n\n <div v-show=\"openRowIndexes.has(index)\" class=\"c-card__body\">\n <div v-for=\"col in visibleColumns\" :key=\"col.property\" class=\"c-card__field\">\n <span class=\"c-card__field-label\">{{ col.label }}</span>\n <slot :name=\"`cell:${col.property}`\" :item=\"item\" :col=\"col\">\n <DataCell :item=\"item\" :col=\"col\" class=\"c-card__field-value\" :copy=\"false\" />\n </slot>\n\n <CopyToClipboard\n v-if=\"getColumnValue(item, col) && !col.hideCopyToClipboard\"\n class=\"c-card__field-copy click-expand\"\n :value=\"getColumnValue(item, col)\"\n />\n </div>\n\n <div v-if=\"config.actions && !config.selectableAttr\" class=\"c-card__actions\" @click.stop>\n <slot name=\"actions\" :item=\"item\" :index=\"index\" :actions=\"config.actions\">\n <DataListActions :actions=\"config.actions\" :item=\"item\" />\n </slot>\n </div>\n </div>\n </div>\n </div>\n <div v-else class=\"c-cards__loading-wrap\">\n <Loader :loading=\"true\" size=\"2.5rem\" />\n </div>\n <div v-if=\"loading && items.length > 0\" class=\"c-cards__backdrop\" aria-hidden=\"true\">\n <Loader :loading=\"true\" size=\"2.5rem\" />\n </div>\n </div>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/data-table/data-cards.scss\"></style>\n"],"mappings":""}
|
|
@@ -2,31 +2,31 @@ import e from "./admins-components6.js";
|
|
|
2
2
|
import t from "./admins-components34.js";
|
|
3
3
|
import { dataCardsSettingsDefaults as n, dataListSettingsDefaults as r, dataTableSettingsDefaults as i } from "./admins-components60.js";
|
|
4
4
|
import { deepMerge as a } from "./admins-components74.js";
|
|
5
|
-
import { Fragment as o, computed as s, createBlock as ee, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createTextVNode as d, createVNode as f, defineComponent as p, normalizeClass as m, onMounted as te, openBlock as h, ref as g, renderList as _, resolveDirective as ne, toDisplayString as v, watch as
|
|
5
|
+
import { Fragment as o, computed as s, createBlock as ee, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createTextVNode as d, createVNode as f, defineComponent as p, normalizeClass as m, onMounted as te, openBlock as h, ref as g, renderList as _, resolveDirective as ne, toDisplayString as v, watch as y, withCtx as re, withDirectives as b, withModifiers as x } from "vue";
|
|
6
6
|
//#region src/components/data-table/DataListOptions.vue?vue&type=script&setup=true&lang.ts
|
|
7
|
-
var
|
|
7
|
+
var ie = { class: "list-options basic" }, ae = { class: "list-options__col" }, oe = { class: "list-options__title" }, se = { class: "list-options__title-value" }, ce = { class: "layout-switch" }, le = { class: "list-options__col" }, ue = { class: "list-options__title" }, de = { class: "list-options__list" }, fe = { class: "list-options__col list-options__col--full" }, pe = { class: "list-options__title" }, me = { class: "list-options__title-value" }, he = { class: "layout-switch" }, ge = { class: "list-options__col" }, _e = { class: "list-options__title" }, ve = { class: "list-options__list" }, ye = [
|
|
8
8
|
"draggable",
|
|
9
9
|
"onDragstart",
|
|
10
10
|
"onDragover",
|
|
11
11
|
"onClick"
|
|
12
|
-
],
|
|
12
|
+
], be = {
|
|
13
13
|
key: 0,
|
|
14
14
|
class: "fa-solid fa-grip-vertical list-options__drag-handle"
|
|
15
|
-
},
|
|
15
|
+
}, xe = ["onClick"], Se = {
|
|
16
16
|
key: 0,
|
|
17
17
|
class: "list-options__move-actions"
|
|
18
|
-
},
|
|
18
|
+
}, S = ["disabled"], C = ["disabled"], w = { class: "list-options__col" }, T = { class: "list-options__title flex-center gap-1" }, E = { class: "list-options__list" }, D = [
|
|
19
19
|
"draggable",
|
|
20
20
|
"onDragstart",
|
|
21
21
|
"onDragover",
|
|
22
22
|
"onClick"
|
|
23
|
-
],
|
|
23
|
+
], O = {
|
|
24
24
|
key: 0,
|
|
25
25
|
class: "fa-solid fa-grip-vertical list-options__drag-handle"
|
|
26
|
-
},
|
|
26
|
+
}, k = ["onClick"], A = {
|
|
27
27
|
key: 0,
|
|
28
28
|
class: "list-options__move-actions"
|
|
29
|
-
},
|
|
29
|
+
}, j = ["disabled"], Ce = ["disabled"], we = { class: "list-options-footer" }, Te = { class: "list-options advanced" }, Ee = { class: "list-options__col" }, De = { class: "list-options__title" }, Oe = { class: "list-options__list" }, M = /*@__PURE__*/ p({
|
|
30
30
|
__name: "DataListOptions",
|
|
31
31
|
props: {
|
|
32
32
|
open: { type: Boolean },
|
|
@@ -41,7 +41,7 @@ var ae = { class: "list-options basic" }, oe = { class: "list-options__col" }, x
|
|
|
41
41
|
},
|
|
42
42
|
emits: ["close", "change"],
|
|
43
43
|
setup(p, { emit: M }) {
|
|
44
|
-
let N = p, P = M, F = g(z()), I = s(() => `data-list-${N.storageKey}`),
|
|
44
|
+
let N = p, P = M, F = g(z()), I = s(() => `data-list-${N.storageKey}`), ke = s(() => JSON.stringify(F.value) !== JSON.stringify(z()));
|
|
45
45
|
function L(e) {
|
|
46
46
|
return e.primary === !0 || e.hideable === !1;
|
|
47
47
|
}
|
|
@@ -60,7 +60,7 @@ var ae = { class: "list-options basic" }, oe = { class: "list-options__col" }, x
|
|
|
60
60
|
cardHeaderOrder: N.settings.cardHeaderOrder ?? N.columns.map((e) => e.property)
|
|
61
61
|
};
|
|
62
62
|
}
|
|
63
|
-
function
|
|
63
|
+
function Ae() {
|
|
64
64
|
try {
|
|
65
65
|
let e = localStorage.getItem(I.value), t = z();
|
|
66
66
|
if (e) {
|
|
@@ -84,7 +84,7 @@ var ae = { class: "list-options basic" }, oe = { class: "list-options__col" }, x
|
|
|
84
84
|
cardHeaderOrder: r(e.cardHeaderOrder)
|
|
85
85
|
};
|
|
86
86
|
}
|
|
87
|
-
function
|
|
87
|
+
function je() {
|
|
88
88
|
try {
|
|
89
89
|
let e = I.value, t = localStorage.getItem(e), n = t ? JSON.parse(t) : {};
|
|
90
90
|
n.settings = F.value, localStorage.setItem(e, JSON.stringify(n));
|
|
@@ -97,7 +97,7 @@ var ae = { class: "list-options basic" }, oe = { class: "list-options__col" }, x
|
|
|
97
97
|
F.value = {
|
|
98
98
|
...F.value,
|
|
99
99
|
[e]: t
|
|
100
|
-
},
|
|
100
|
+
}, je();
|
|
101
101
|
}
|
|
102
102
|
function H(e) {
|
|
103
103
|
V("columns", {
|
|
@@ -121,18 +121,18 @@ var ae = { class: "list-options basic" }, oe = { class: "list-options__col" }, x
|
|
|
121
121
|
});
|
|
122
122
|
}
|
|
123
123
|
let K = s(() => G(N.columns, F.value.columnOrder)), q = s(() => G(N.columns, F.value.cardHeaderOrder)), J = g(null), Y = g(null), X = g(null), Z = g(null);
|
|
124
|
-
function
|
|
124
|
+
function Me(e) {
|
|
125
125
|
J.value = e;
|
|
126
126
|
}
|
|
127
|
-
function
|
|
127
|
+
function Ne(e, t) {
|
|
128
128
|
if (e.preventDefault(), J.value === null || J.value === t) return;
|
|
129
129
|
let n = [...F.value.columnOrder], r = n.splice(J.value, 1)[0];
|
|
130
130
|
r && (n.splice(t, 0, r), J.value = t, V("columnOrder", n));
|
|
131
131
|
}
|
|
132
|
-
function
|
|
132
|
+
function Pe() {
|
|
133
133
|
J.value = null;
|
|
134
134
|
}
|
|
135
|
-
function
|
|
135
|
+
function Fe(e) {
|
|
136
136
|
Y.value = Y.value === e ? null : e;
|
|
137
137
|
}
|
|
138
138
|
function Q(e) {
|
|
@@ -142,18 +142,18 @@ var ae = { class: "list-options basic" }, oe = { class: "list-options__col" }, x
|
|
|
142
142
|
let n = [...F.value.columnOrder], r = n[Y.value];
|
|
143
143
|
n[Y.value] = n[t], n[t] = r, V("columnOrder", n), Y.value = t;
|
|
144
144
|
}
|
|
145
|
-
function
|
|
145
|
+
function Ie(e) {
|
|
146
146
|
X.value = e;
|
|
147
147
|
}
|
|
148
|
-
function
|
|
148
|
+
function Le(e, t) {
|
|
149
149
|
if (e.preventDefault(), X.value === null || X.value === t) return;
|
|
150
150
|
let n = [...F.value.cardHeaderOrder], r = n.splice(X.value, 1)[0];
|
|
151
151
|
r && (n.splice(t, 0, r), X.value = t, V("cardHeaderOrder", n));
|
|
152
152
|
}
|
|
153
|
-
function
|
|
153
|
+
function Re() {
|
|
154
154
|
X.value = null;
|
|
155
155
|
}
|
|
156
|
-
function
|
|
156
|
+
function ze(e) {
|
|
157
157
|
Z.value = Z.value === e ? null : e;
|
|
158
158
|
}
|
|
159
159
|
function $(e) {
|
|
@@ -163,10 +163,10 @@ var ae = { class: "list-options basic" }, oe = { class: "list-options__col" }, x
|
|
|
163
163
|
let n = [...F.value.cardHeaderOrder], r = n[Z.value];
|
|
164
164
|
n[Z.value] = n[t], n[t] = r, V("cardHeaderOrder", n), Z.value = t;
|
|
165
165
|
}
|
|
166
|
-
function
|
|
166
|
+
function Be() {
|
|
167
167
|
localStorage.removeItem(I.value), F.value = z(), P("change", F.value);
|
|
168
168
|
}
|
|
169
|
-
return te(
|
|
169
|
+
return te(Ae), y(() => N.columns, () => {
|
|
170
170
|
F.value = B(F.value, N.columns), R(F.value);
|
|
171
171
|
}), (n, r) => {
|
|
172
172
|
let i = ne("tooltip");
|
|
@@ -174,28 +174,28 @@ var ae = { class: "list-options basic" }, oe = { class: "list-options__col" }, x
|
|
|
174
174
|
open: p.open,
|
|
175
175
|
title: "Lista beállítások",
|
|
176
176
|
position: N.position,
|
|
177
|
-
onClose: r[
|
|
177
|
+
onClose: r[21] ||= (e) => P("close")
|
|
178
178
|
}, {
|
|
179
|
-
default:
|
|
180
|
-
u("div",
|
|
181
|
-
u("div",
|
|
179
|
+
default: re(() => [
|
|
180
|
+
u("div", ie, [
|
|
181
|
+
u("div", ae, [u("h4", oe, [r[22] ||= d(" Elrendezés ", -1), u("span", se, "— " + v(F.value.layout === "screen" ? "Auto" : F.value.layout === "table" ? "Táblázat" : "Kártyák"), 1)]), u("div", ce, [
|
|
182
182
|
u("button", {
|
|
183
183
|
class: m(["layout-switch__btn", { "layout-switch__btn--active": F.value.layout === "screen" }]),
|
|
184
184
|
title: "Kijelző méretéhez igazodó elrendezés",
|
|
185
185
|
onClick: r[0] ||= (e) => V("layout", "screen")
|
|
186
|
-
}, [...r[
|
|
186
|
+
}, [...r[23] ||= [u("i", { class: "fa-solid fa-display" }, null, -1)]], 2),
|
|
187
187
|
u("button", {
|
|
188
188
|
class: m(["layout-switch__btn", { "layout-switch__btn--active": F.value.layout === "table" }]),
|
|
189
189
|
title: "Táblázat nézet",
|
|
190
190
|
onClick: r[1] ||= (e) => V("layout", "table")
|
|
191
|
-
}, [...r[
|
|
191
|
+
}, [...r[24] ||= [u("i", { class: "fa-solid fa-table-list" }, null, -1)]], 2),
|
|
192
192
|
u("button", {
|
|
193
193
|
class: m(["layout-switch__btn", { "layout-switch__btn--active": F.value.layout === "cards" }]),
|
|
194
194
|
title: "Kártya nézet",
|
|
195
195
|
onClick: r[2] ||= (e) => V("layout", "cards")
|
|
196
|
-
}, [...r[
|
|
196
|
+
}, [...r[25] ||= [u("i", { class: "fa-solid fa-list" }, null, -1)]], 2)
|
|
197
197
|
])]),
|
|
198
|
-
u("div", le, [
|
|
198
|
+
u("div", le, [b((h(), l("h4", ue, [...r[26] ||= [d(" Megjelenés ", -1), u("i", { class: "fa-regular fa-question-circle" }, null, -1)]])), [[
|
|
199
199
|
i,
|
|
200
200
|
"<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 ",
|
|
201
201
|
void 0,
|
|
@@ -206,18 +206,44 @@ var ae = { class: "list-options basic" }, oe = { class: "list-options__col" }, x
|
|
|
206
206
|
title: "A sorok közötti térköz csökkentése"
|
|
207
207
|
}, [u("span", {
|
|
208
208
|
class: m(["c-checkbox", { "c-checkbox--checked": F.value.compact }]),
|
|
209
|
-
onClick: r[3] ||=
|
|
210
|
-
}, null, 2), r[
|
|
209
|
+
onClick: r[3] ||= x((e) => W("compact"), ["stop"])
|
|
210
|
+
}, null, 2), r[27] ||= u("span", null, "Kompakt", -1)]), u("li", {
|
|
211
211
|
class: "list-options__item",
|
|
212
212
|
onClick: r[6] ||= (e) => W("striped"),
|
|
213
213
|
title: "A páros sorok háttere kicsit sötétebb (csak táblázat nézetben)"
|
|
214
214
|
}, [u("span", {
|
|
215
215
|
class: m(["c-checkbox", { "c-checkbox--checked": F.value.striped }]),
|
|
216
|
-
onClick: r[5] ||=
|
|
217
|
-
}, null, 2), r[
|
|
218
|
-
u("div", fe, [
|
|
219
|
-
|
|
220
|
-
|
|
216
|
+
onClick: r[5] ||= x((e) => W("striped"), ["stop"])
|
|
217
|
+
}, null, 2), r[28] ||= u("span", null, "Sávos (striped)", -1)])])]),
|
|
218
|
+
u("div", fe, [b((h(), l("h4", pe, [r[29] ||= d(" Betűméret ", -1), u("span", me, "— " + v(F.value.fontSize === "small" ? "Kicsi" : F.value.fontSize === "normal" ? "Normál" : "Nagy"), 1)])), [[i, "Betűméret: a lista összes szövegének alap mérete"]]), u("div", he, [
|
|
219
|
+
u("button", {
|
|
220
|
+
class: m(["layout-switch__btn", { "layout-switch__btn--active": F.value.fontSize === "small" }]),
|
|
221
|
+
title: "Kis betűméret",
|
|
222
|
+
onClick: r[7] ||= (e) => V("fontSize", "small")
|
|
223
|
+
}, [...r[30] ||= [u("i", {
|
|
224
|
+
class: "fa-solid fa-a",
|
|
225
|
+
style: { "font-size": "0.725em" }
|
|
226
|
+
}, null, -1)]], 2),
|
|
227
|
+
u("button", {
|
|
228
|
+
class: m(["layout-switch__btn", { "layout-switch__btn--active": F.value.fontSize === "normal" }]),
|
|
229
|
+
title: "Normál betűméret",
|
|
230
|
+
onClick: r[8] ||= (e) => V("fontSize", "normal")
|
|
231
|
+
}, [...r[31] ||= [u("i", {
|
|
232
|
+
class: "fa-solid fa-a",
|
|
233
|
+
style: { "font-size": "0.825rem" }
|
|
234
|
+
}, null, -1)]], 2),
|
|
235
|
+
u("button", {
|
|
236
|
+
class: m(["layout-switch__btn", { "layout-switch__btn--active": F.value.fontSize === "large" }]),
|
|
237
|
+
title: "Nagy betűméret",
|
|
238
|
+
onClick: r[9] ||= (e) => V("fontSize", "large")
|
|
239
|
+
}, [...r[32] ||= [u("i", {
|
|
240
|
+
class: "fa-solid fa-a",
|
|
241
|
+
style: { "font-size": "1.25em" }
|
|
242
|
+
}, null, -1)]], 2)
|
|
243
|
+
])]),
|
|
244
|
+
u("div", ge, [
|
|
245
|
+
b((h(), l("h4", _e, [...r[33] ||= [d(" Táblázat oszlopok ", -1), u("i", { class: "fa-regular fa-question-circle" }, null, -1)]])), [[i, "Táblázat nézetben megjelenő oszlopok"]]),
|
|
246
|
+
u("ul", ve, [(h(!0), l(o, null, _(K.value, (e, t) => (h(), l("li", {
|
|
221
247
|
key: e.property,
|
|
222
248
|
class: m(["list-options__item", {
|
|
223
249
|
"list-options__item--disabled": L(e),
|
|
@@ -225,28 +251,28 @@ var ae = { class: "list-options basic" }, oe = { class: "list-options__col" }, x
|
|
|
225
251
|
"list-options__item--dragging": p.orderable && J.value === t
|
|
226
252
|
}]),
|
|
227
253
|
draggable: p.orderable,
|
|
228
|
-
onDragstart:
|
|
229
|
-
onDragover:
|
|
230
|
-
onDrop: r[
|
|
231
|
-
onDragend: r[
|
|
232
|
-
onClick:
|
|
233
|
-
}, [p.orderable ? (h(), l("i",
|
|
254
|
+
onDragstart: x((e) => p.orderable && Me(t), ["stop"]),
|
|
255
|
+
onDragover: x((e) => p.orderable && Ne(e, t), ["prevent"]),
|
|
256
|
+
onDrop: r[10] ||= x(() => {}, ["prevent"]),
|
|
257
|
+
onDragend: r[11] ||= (e) => p.orderable && Pe(),
|
|
258
|
+
onClick: x((n) => p.orderable ? Fe(t) : !L(e) && H(e.property), ["prevent"])
|
|
259
|
+
}, [p.orderable ? (h(), l("i", be)) : c("", !0), u("span", {
|
|
234
260
|
class: "list-options__toggle",
|
|
235
|
-
onClick:
|
|
236
|
-
}, [u("span", { class: m(["c-checkbox", { "c-checkbox--checked": F.value.columns[e.property] }]) }, null, 2), u("span", null, v(e.label), 1)], 8,
|
|
237
|
-
p.orderable && Y.value !== null ? (h(), l("div",
|
|
261
|
+
onClick: x((t) => !L(e) && H(e.property), ["stop"])
|
|
262
|
+
}, [u("span", { class: m(["c-checkbox", { "c-checkbox--checked": F.value.columns[e.property] }]) }, null, 2), u("span", null, v(e.label), 1)], 8, xe)], 42, ye))), 128))]),
|
|
263
|
+
p.orderable && Y.value !== null ? (h(), l("div", Se, [u("button", {
|
|
238
264
|
class: "list-options__move-btn",
|
|
239
265
|
disabled: Y.value === 0,
|
|
240
|
-
onClick: r[
|
|
241
|
-
}, [...r[
|
|
266
|
+
onClick: r[12] ||= (e) => Q(-1)
|
|
267
|
+
}, [...r[34] ||= [u("i", { class: "fa-solid fa-arrow-up" }, null, -1)]], 8, S), u("button", {
|
|
242
268
|
class: "list-options__move-btn",
|
|
243
269
|
disabled: Y.value === K.value.length - 1,
|
|
244
|
-
onClick: r[
|
|
245
|
-
}, [...r[
|
|
270
|
+
onClick: r[13] ||= (e) => Q(1)
|
|
271
|
+
}, [...r[35] ||= [u("i", { class: "fa-solid fa-arrow-down" }, null, -1)]], 8, C)])) : c("", !0)
|
|
246
272
|
]),
|
|
247
|
-
u("div",
|
|
248
|
-
|
|
249
|
-
u("ul",
|
|
273
|
+
u("div", w, [
|
|
274
|
+
b((h(), l("h4", T, [...r[36] ||= [d(" Kártya fejléc ", -1), u("i", { class: "fa-regular fa-question-circle" }, null, -1)]])), [[i, "Kártya nézetben, a sorok fejlécén megjelenő oszlopok"]]),
|
|
275
|
+
u("ul", E, [(h(!0), l(o, null, _(q.value, (e, t) => (h(), l("li", {
|
|
250
276
|
key: "ch-" + e.property,
|
|
251
277
|
class: m(["list-options__item", {
|
|
252
278
|
"list-options__item--disabled": L(e),
|
|
@@ -254,51 +280,51 @@ var ae = { class: "list-options basic" }, oe = { class: "list-options__col" }, x
|
|
|
254
280
|
"list-options__item--dragging": p.orderable && X.value === t
|
|
255
281
|
}]),
|
|
256
282
|
draggable: p.orderable,
|
|
257
|
-
onDragstart:
|
|
258
|
-
onDragover:
|
|
259
|
-
onDrop: r[
|
|
260
|
-
onDragend: r[
|
|
261
|
-
onClick:
|
|
262
|
-
}, [p.orderable ? (h(), l("i",
|
|
283
|
+
onDragstart: x((e) => p.orderable && Ie(t), ["stop"]),
|
|
284
|
+
onDragover: x((e) => p.orderable && Le(e, t), ["prevent"]),
|
|
285
|
+
onDrop: r[14] ||= x(() => {}, ["prevent"]),
|
|
286
|
+
onDragend: r[15] ||= (e) => p.orderable && Re(),
|
|
287
|
+
onClick: x((n) => p.orderable ? ze(t) : !L(e) && U(e.property), ["prevent"])
|
|
288
|
+
}, [p.orderable ? (h(), l("i", O)) : c("", !0), u("span", {
|
|
263
289
|
class: "list-options__toggle",
|
|
264
|
-
onClick:
|
|
265
|
-
}, [u("span", { class: m(["c-checkbox", { "c-checkbox--checked": F.value.cardHeaderColumns[e.property] }]) }, null, 2), u("span", null, v(e.label), 1)], 8,
|
|
266
|
-
p.orderable && Z.value !== null ? (h(), l("div",
|
|
290
|
+
onClick: x((t) => !L(e) && U(e.property), ["stop"])
|
|
291
|
+
}, [u("span", { class: m(["c-checkbox", { "c-checkbox--checked": F.value.cardHeaderColumns[e.property] }]) }, null, 2), u("span", null, v(e.label), 1)], 8, k)], 42, D))), 128))]),
|
|
292
|
+
p.orderable && Z.value !== null ? (h(), l("div", A, [u("button", {
|
|
267
293
|
class: "list-options__move-btn",
|
|
268
294
|
disabled: Z.value === 0,
|
|
269
|
-
onClick: r[
|
|
270
|
-
}, [...r[
|
|
295
|
+
onClick: r[16] ||= (e) => $(-1)
|
|
296
|
+
}, [...r[37] ||= [u("i", { class: "fa-solid fa-arrow-up" }, null, -1)]], 8, j), u("button", {
|
|
271
297
|
class: "list-options__move-btn",
|
|
272
298
|
disabled: Z.value === q.value.length - 1,
|
|
273
|
-
onClick: r[
|
|
274
|
-
}, [...r[
|
|
299
|
+
onClick: r[17] ||= (e) => $(1)
|
|
300
|
+
}, [...r[38] ||= [u("i", { class: "fa-solid fa-arrow-down" }, null, -1)]], 8, Ce)])) : c("", !0)
|
|
275
301
|
])
|
|
276
302
|
]),
|
|
277
|
-
r[
|
|
278
|
-
u("div",
|
|
303
|
+
r[41] ||= u("hr", { class: "separator my-3" }, null, -1),
|
|
304
|
+
u("div", we, [f(e, {
|
|
279
305
|
icon: "fa-solid fa-triangle-exclamation",
|
|
280
|
-
disabled: !
|
|
306
|
+
disabled: !ke.value,
|
|
281
307
|
label: "Alapértelmezés visszaállítása",
|
|
282
308
|
size: "small",
|
|
283
|
-
onClick:
|
|
309
|
+
onClick: Be
|
|
284
310
|
}, null, 8, ["disabled"]), f(e, {
|
|
285
311
|
label: "OK",
|
|
286
|
-
onClick: r[
|
|
312
|
+
onClick: r[18] ||= (e) => P("close")
|
|
287
313
|
})]),
|
|
288
|
-
r[
|
|
289
|
-
u("div",
|
|
314
|
+
r[42] ||= u("hr", { class: "separator my-3" }, null, -1),
|
|
315
|
+
u("div", Te, [u("div", Ee, [b((h(), l("h4", De, [...r[39] ||= [d(" Haladó beállítások ", -1), u("i", { class: "fa-regular fa-question-circle" }, null, -1)]])), [[
|
|
290
316
|
i,
|
|
291
317
|
"<b>Azonnali szűrés</b>: Bekapcsolt állapotban a szűrő mezők módosítása azonnal érvénybe lép, míg kikapcsolva csak a „Szűrés” gombra kattintva kerülnek alkalmazásra.",
|
|
292
318
|
void 0,
|
|
293
319
|
{ html: !0 }
|
|
294
|
-
]]), u("ul",
|
|
320
|
+
]]), u("ul", Oe, [u("li", {
|
|
295
321
|
class: "list-options__item",
|
|
296
|
-
onClick: r[
|
|
322
|
+
onClick: r[20] ||= (e) => W("filtersEager"),
|
|
297
323
|
title: "Bekapcsolt állapotban a szűrő mezők módosítása azonnal érvénybe lép"
|
|
298
324
|
}, [u("span", {
|
|
299
325
|
class: m(["c-checkbox", { "c-checkbox--checked": F.value.filtersEager }]),
|
|
300
|
-
onClick: r[
|
|
301
|
-
}, null, 2), r[
|
|
326
|
+
onClick: r[19] ||= x((e) => W("filtersEager"), ["stop"])
|
|
327
|
+
}, null, 2), r[40] ||= u("span", null, "Azonnali szűrés", -1)])])])])
|
|
302
328
|
]),
|
|
303
329
|
_: 1
|
|
304
330
|
}, 8, ["open", "position"]);
|