admins-components 9.0.55 → 9.0.57
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-components35.js +2 -1
- package/dist/admins-components35.js.map +1 -1
- package/dist/admins-components37.js.map +1 -1
- package/dist/admins-components58.js.map +1 -1
- package/dist/admins-components65.js +61 -58
- package/dist/admins-components65.js.map +1 -1
- package/dist/admins-components67.js.map +1 -1
- package/dist/src/components/HeaderComponent.vue.d.ts +1 -0
- package/dist/src/styles/components/data-table/data-table.scss_vue_type_style_index_0_src_true_lang.css +1 -1
- package/dist/src/types/data-list.d.ts +1 -1
- package/package.json +1 -1
|
@@ -23,6 +23,7 @@ var h = { class: "ac-component" }, g = { class: "hc-header" }, _ = { class: "hc-
|
|
|
23
23
|
props: /* @__PURE__ */ c({
|
|
24
24
|
title: {},
|
|
25
25
|
icon: {},
|
|
26
|
+
showBackButton: { type: Boolean },
|
|
26
27
|
backButton: {},
|
|
27
28
|
toolbars: {}
|
|
28
29
|
}, { ...C }),
|
|
@@ -42,7 +43,7 @@ var h = { class: "ac-component" }, g = { class: "hc-header" }, _ = { class: "hc-
|
|
|
42
43
|
});
|
|
43
44
|
return (n, c) => (d(), a("div", h, [o("header", g, [
|
|
44
45
|
o("div", _, [
|
|
45
|
-
w.value ? (d(), r(e, l({
|
|
46
|
+
s.showBackButton && w.value ? (d(), r(e, l({
|
|
46
47
|
key: 0,
|
|
47
48
|
class: "hc-back-btn"
|
|
48
49
|
}, w.value), null, 16)) : i("", !0),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"admins-components35.js","names":["$slots"],"sources":["../src/components/HeaderComponent.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ButtonProps } from '@/components/Button.vue'\nimport type { HorizontalAlignment } from '@/types/types'\n\nexport interface HeaderToolbar {\n align: HorizontalAlignment\n buttons: ButtonProps[]\n}\n\nexport interface HeaderComponentProps {\n title: string\n icon?: string\n\n backButton?: ButtonProps\n toolbars?: HeaderToolbar[]\n}\n\nexport const headerComponentDefaults = {\n icon: undefined,\n backButton: () => ({\n icon: 'fa-solid fa-chevron-left',\n ariaLabel: 'Vissza',\n callback: () => {},\n }),\n toolbars: () => [],\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport Button from '@/components/Button.vue'\n\nconst props = withDefaults(defineProps<HeaderComponentProps>(), {\n ...headerComponentDefaults,\n})\n\nconst mergedBackButton = computed<ButtonProps | undefined>(() => {\n if (!props.backButton) return undefined\n return { ...headerComponentDefaults.backButton(), ...props.backButton }\n})\n\nconst sortedToolbars = computed(() => {\n const order: Record<HorizontalAlignment, number> = { left: 0, center: 1, right: 2 }\n return [...props.toolbars].sort((a, b) => order[a.align] - order[b.align])\n})\n</script>\n\n<template>\n <div class=\"ac-component\">\n <header class=\"hc-header\">\n <div class=\"hc-left\">\n <Button\n v-if=\"mergedBackButton\"\n class=\"hc-back-btn\"\n v-bind=\"mergedBackButton\"\n />\n\n <div class=\"hc-title-group\">\n <i v-if=\"icon\" :class=\"icon\" class=\"hc-title-icon\"></i>\n <h1 class=\"hc-title\">{{ title }}</h1>\n </div>\n\n <div v-if=\"$slots.left\" class=\"hc-slot hc-slot--left\">\n <slot name=\"left\" />\n </div>\n\n <div\n v-for=\"(toolbar, ti) in sortedToolbars.filter((t) => t.align === 'left')\"\n :key=\"`l-${ti}`\"\n class=\"hc-buttons hc-buttons--left\"\n >\n <Button v-for=\"(btn, i) in toolbar.buttons\" :key=\"i\" v-bind=\"btn\" />\n </div>\n </div>\n\n <div\n v-if=\"$slots.center || sortedToolbars.some((t) => t.align === 'center')\"\n class=\"hc-slot hc-slot--center\"\n >\n <slot name=\"center\" />\n <div\n v-for=\"(toolbar, ti) in sortedToolbars.filter((t) => t.align === 'center')\"\n :key=\"`c-${ti}`\"\n class=\"hc-buttons\"\n >\n <Button v-for=\"(btn, i) in toolbar.buttons\" :key=\"i\" v-bind=\"btn\" />\n </div>\n </div>\n\n <div\n v-if=\"$slots.right || sortedToolbars.some((t) => t.align === 'right')\"\n class=\"hc-slot hc-slot--right\"\n >\n <slot name=\"right\" />\n <div\n v-for=\"(toolbar, ti) in sortedToolbars.filter((t) => t.align === 'right')\"\n :key=\"`r-${ti}`\"\n class=\"hc-buttons\"\n >\n <Button v-for=\"(btn, i) in toolbar.buttons\" :key=\"i\" v-bind=\"btn\" />\n </div>\n </div>\n </header>\n </div>\n</template>\n<style lang=\"scss\" src=\"@/styles/components/header.scss\"></style>\n"],"mappings":";;;;;;;;;;;;GAiBa,IAA0B;CACrC,MAAM,KAAA;CACN,mBAAmB;EACjB,MAAM;EACN,WAAW;EACX,gBAAgB,CAAC;CACnB;CACA,gBAAgB,CAAC;AACnB
|
|
1
|
+
{"version":3,"file":"admins-components35.js","names":["$slots"],"sources":["../src/components/HeaderComponent.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ButtonProps } from '@/components/Button.vue'\nimport type { HorizontalAlignment } from '@/types/types'\n\nexport interface HeaderToolbar {\n align: HorizontalAlignment\n buttons: ButtonProps[]\n}\n\nexport interface HeaderComponentProps {\n title: string\n icon?: string\n showBackButton?: boolean\n backButton?: ButtonProps\n toolbars?: HeaderToolbar[]\n}\n\nexport const headerComponentDefaults = {\n icon: undefined,\n backButton: () => ({\n icon: 'fa-solid fa-chevron-left',\n ariaLabel: 'Vissza',\n callback: () => {},\n }),\n toolbars: () => [],\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport Button from '@/components/Button.vue'\n\nconst props = withDefaults(defineProps<HeaderComponentProps>(), {\n ...headerComponentDefaults,\n})\n\nconst mergedBackButton = computed<ButtonProps | undefined>(() => {\n if (!props.backButton) return undefined\n return { ...headerComponentDefaults.backButton(), ...props.backButton }\n})\n\nconst sortedToolbars = computed(() => {\n const order: Record<HorizontalAlignment, number> = { left: 0, center: 1, right: 2 }\n return [...props.toolbars].sort((a, b) => order[a.align] - order[b.align])\n})\n</script>\n\n<template>\n <div class=\"ac-component\">\n <header class=\"hc-header\">\n <div class=\"hc-left\">\n <Button\n v-if=\"showBackButton && mergedBackButton\"\n class=\"hc-back-btn\"\n v-bind=\"mergedBackButton\"\n />\n\n <div class=\"hc-title-group\">\n <i v-if=\"icon\" :class=\"icon\" class=\"hc-title-icon\"></i>\n <h1 class=\"hc-title\">{{ title }}</h1>\n </div>\n\n <div v-if=\"$slots.left\" class=\"hc-slot hc-slot--left\">\n <slot name=\"left\" />\n </div>\n\n <div\n v-for=\"(toolbar, ti) in sortedToolbars.filter((t) => t.align === 'left')\"\n :key=\"`l-${ti}`\"\n class=\"hc-buttons hc-buttons--left\"\n >\n <Button v-for=\"(btn, i) in toolbar.buttons\" :key=\"i\" v-bind=\"btn\" />\n </div>\n </div>\n\n <div\n v-if=\"$slots.center || sortedToolbars.some((t) => t.align === 'center')\"\n class=\"hc-slot hc-slot--center\"\n >\n <slot name=\"center\" />\n <div\n v-for=\"(toolbar, ti) in sortedToolbars.filter((t) => t.align === 'center')\"\n :key=\"`c-${ti}`\"\n class=\"hc-buttons\"\n >\n <Button v-for=\"(btn, i) in toolbar.buttons\" :key=\"i\" v-bind=\"btn\" />\n </div>\n </div>\n\n <div\n v-if=\"$slots.right || sortedToolbars.some((t) => t.align === 'right')\"\n class=\"hc-slot hc-slot--right\"\n >\n <slot name=\"right\" />\n <div\n v-for=\"(toolbar, ti) in sortedToolbars.filter((t) => t.align === 'right')\"\n :key=\"`r-${ti}`\"\n class=\"hc-buttons\"\n >\n <Button v-for=\"(btn, i) in toolbar.buttons\" :key=\"i\" v-bind=\"btn\" />\n </div>\n </div>\n </header>\n </div>\n</template>\n<style lang=\"scss\" src=\"@/styles/components/header.scss\"></style>\n"],"mappings":";;;;;;;;;;;;GAiBa,IAA0B;CACrC,MAAM,KAAA;CACN,mBAAmB;EACjB,MAAM;EACN,WAAW;EACX,gBAAgB,CAAC;CACnB;CACA,gBAAgB,CAAC;AACnB;;;;;;;;;;EAOA,IAAM,IAAQ,GAIR,IAAmB,QAAwC;GAC1D,MAAM,YACX,OAAO;IAAE,GAAG,EAAwB,WAAW;IAAG,GAAG,EAAM;GAAW;EACxE,CAAC,GAEK,IAAiB,QAAe;GACpC,IAAM,IAA6C;IAAE,MAAM;IAAG,QAAQ;IAAG,OAAO;GAAE;GAClF,OAAO,CAAC,GAAG,EAAM,QAAQ,EAAE,MAAM,GAAG,MAAM,EAAM,EAAE,SAAS,EAAM,EAAE,MAAM;EAC3E,CAAC;yBAIC,EAuDM,OAvDN,GAuDM,CAtDJ,EAqDS,UArDT,GAqDS;GApDP,EAuBM,OAvBN,GAuBM;IArBI,EAAA,kBAAkB,EAAA,SAAA,EAAA,GAD1B,EAIE,GAJF,EAIE;;KAFA,OAAM;OACE,EAAA,KAAgB,GAAA,MAAA,EAAA,KAAA,EAAA,IAAA,EAAA;IAG1B,EAGM,OAHN,GAGM,CAFK,EAAA,QAAA,EAAA,GAAT,EAAuD,KAAA;;KAAvC,OAAK,EAAA,CAAE,EAAA,MAAY,eAAe,CAAA;8BAClD,EAAqC,MAArC,GAAqC,EAAb,EAAA,KAAK,GAAA,CAAA,CAAA,CAAA;IAGpBA,EAAAA,OAAO,QAAA,EAAA,GAAlB,EAEM,OAFN,GAEM,CADJ,EAAoB,EAAA,QAAA,MAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA;YAGtB,EAMM,GAAA,MAAA,EALoB,EAAA,MAAe,QAAQ,MAAM,EAAE,UAAK,MAAA,IAApD,GAAS,YADnB,EAMM,OAAA;KAJH,KAAG,KAAO;KACX,OAAM;gBAEN,EAAoE,GAAA,MAAA,EAAzC,EAAQ,UAAnB,GAAK,YAArB,EAAoE,GAApE,EAAoE,EAAvB,KAAK,EAAC,GAAA,EAAA,SAAA,GAAA,GAAU,CAAG,GAAA,MAAA,EAAA;;GAK5DA,EAAAA,OAAO,UAAU,EAAA,MAAe,MAAM,MAAM,EAAE,UAAK,QAAA,KAAA,EAAA,GAD3D,EAYM,OAZN,GAYM,CARJ,EAAsB,EAAA,QAAA,QAAA,IAAA,EAAA,EAAA,GACtB,EAMM,GAAA,MAAA,EALoB,EAAA,MAAe,QAAQ,MAAM,EAAE,UAAK,QAAA,IAApD,GAAS,YADnB,EAMM,OAAA;IAJH,KAAG,KAAO;IACX,OAAM;eAEN,EAAoE,GAAA,MAAA,EAAzC,EAAQ,UAAnB,GAAK,YAArB,EAAoE,GAApE,EAAoE,EAAvB,KAAK,EAAC,GAAA,EAAA,SAAA,GAAA,GAAU,CAAG,GAAA,MAAA,EAAA;GAK5DA,EAAAA,OAAO,SAAS,EAAA,MAAe,MAAM,MAAM,EAAE,UAAK,OAAA,KAAA,EAAA,GAD1D,EAYM,OAZN,GAYM,CARJ,EAAqB,EAAA,QAAA,OAAA,IAAA,EAAA,EAAA,GACrB,EAMM,GAAA,MAAA,EALoB,EAAA,MAAe,QAAQ,MAAM,EAAE,UAAK,OAAA,IAApD,GAAS,YADnB,EAMM,OAAA;IAJH,KAAG,KAAO;IACX,OAAM;eAEN,EAAoE,GAAA,MAAA,EAAzC,EAAQ,UAAnB,GAAK,YAArB,EAAoE,GAApE,EAAoE,EAAvB,KAAK,EAAC,GAAA,EAAA,SAAA,GAAA,GAAU,CAAG,GAAA,MAAA,EAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"admins-components37.js","names":[],"sources":["../src/components/HeaderComponent.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ButtonProps } from '@/components/Button.vue'\nimport type { HorizontalAlignment } from '@/types/types'\n\nexport interface HeaderToolbar {\n align: HorizontalAlignment\n buttons: ButtonProps[]\n}\n\nexport interface HeaderComponentProps {\n title: string\n icon?: string\n\n backButton?: ButtonProps\n toolbars?: HeaderToolbar[]\n}\n\nexport const headerComponentDefaults = {\n icon: undefined,\n backButton: () => ({\n icon: 'fa-solid fa-chevron-left',\n ariaLabel: 'Vissza',\n callback: () => {},\n }),\n toolbars: () => [],\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport Button from '@/components/Button.vue'\n\nconst props = withDefaults(defineProps<HeaderComponentProps>(), {\n ...headerComponentDefaults,\n})\n\nconst mergedBackButton = computed<ButtonProps | undefined>(() => {\n if (!props.backButton) return undefined\n return { ...headerComponentDefaults.backButton(), ...props.backButton }\n})\n\nconst sortedToolbars = computed(() => {\n const order: Record<HorizontalAlignment, number> = { left: 0, center: 1, right: 2 }\n return [...props.toolbars].sort((a, b) => order[a.align] - order[b.align])\n})\n</script>\n\n<template>\n <div class=\"ac-component\">\n <header class=\"hc-header\">\n <div class=\"hc-left\">\n <Button\n v-if=\"mergedBackButton\"\n class=\"hc-back-btn\"\n v-bind=\"mergedBackButton\"\n />\n\n <div class=\"hc-title-group\">\n <i v-if=\"icon\" :class=\"icon\" class=\"hc-title-icon\"></i>\n <h1 class=\"hc-title\">{{ title }}</h1>\n </div>\n\n <div v-if=\"$slots.left\" class=\"hc-slot hc-slot--left\">\n <slot name=\"left\" />\n </div>\n\n <div\n v-for=\"(toolbar, ti) in sortedToolbars.filter((t) => t.align === 'left')\"\n :key=\"`l-${ti}`\"\n class=\"hc-buttons hc-buttons--left\"\n >\n <Button v-for=\"(btn, i) in toolbar.buttons\" :key=\"i\" v-bind=\"btn\" />\n </div>\n </div>\n\n <div\n v-if=\"$slots.center || sortedToolbars.some((t) => t.align === 'center')\"\n class=\"hc-slot hc-slot--center\"\n >\n <slot name=\"center\" />\n <div\n v-for=\"(toolbar, ti) in sortedToolbars.filter((t) => t.align === 'center')\"\n :key=\"`c-${ti}`\"\n class=\"hc-buttons\"\n >\n <Button v-for=\"(btn, i) in toolbar.buttons\" :key=\"i\" v-bind=\"btn\" />\n </div>\n </div>\n\n <div\n v-if=\"$slots.right || sortedToolbars.some((t) => t.align === 'right')\"\n class=\"hc-slot hc-slot--right\"\n >\n <slot name=\"right\" />\n <div\n v-for=\"(toolbar, ti) in sortedToolbars.filter((t) => t.align === 'right')\"\n :key=\"`r-${ti}`\"\n class=\"hc-buttons\"\n >\n <Button v-for=\"(btn, i) in toolbar.buttons\" :key=\"i\" v-bind=\"btn\" />\n </div>\n </div>\n </header>\n </div>\n</template>\n<style lang=\"scss\" src=\"@/styles/components/header.scss\"></style>\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"admins-components37.js","names":[],"sources":["../src/components/HeaderComponent.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ButtonProps } from '@/components/Button.vue'\nimport type { HorizontalAlignment } from '@/types/types'\n\nexport interface HeaderToolbar {\n align: HorizontalAlignment\n buttons: ButtonProps[]\n}\n\nexport interface HeaderComponentProps {\n title: string\n icon?: string\n showBackButton?: boolean\n backButton?: ButtonProps\n toolbars?: HeaderToolbar[]\n}\n\nexport const headerComponentDefaults = {\n icon: undefined,\n backButton: () => ({\n icon: 'fa-solid fa-chevron-left',\n ariaLabel: 'Vissza',\n callback: () => {},\n }),\n toolbars: () => [],\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport Button from '@/components/Button.vue'\n\nconst props = withDefaults(defineProps<HeaderComponentProps>(), {\n ...headerComponentDefaults,\n})\n\nconst mergedBackButton = computed<ButtonProps | undefined>(() => {\n if (!props.backButton) return undefined\n return { ...headerComponentDefaults.backButton(), ...props.backButton }\n})\n\nconst sortedToolbars = computed(() => {\n const order: Record<HorizontalAlignment, number> = { left: 0, center: 1, right: 2 }\n return [...props.toolbars].sort((a, b) => order[a.align] - order[b.align])\n})\n</script>\n\n<template>\n <div class=\"ac-component\">\n <header class=\"hc-header\">\n <div class=\"hc-left\">\n <Button\n v-if=\"showBackButton && mergedBackButton\"\n class=\"hc-back-btn\"\n v-bind=\"mergedBackButton\"\n />\n\n <div class=\"hc-title-group\">\n <i v-if=\"icon\" :class=\"icon\" class=\"hc-title-icon\"></i>\n <h1 class=\"hc-title\">{{ title }}</h1>\n </div>\n\n <div v-if=\"$slots.left\" class=\"hc-slot hc-slot--left\">\n <slot name=\"left\" />\n </div>\n\n <div\n v-for=\"(toolbar, ti) in sortedToolbars.filter((t) => t.align === 'left')\"\n :key=\"`l-${ti}`\"\n class=\"hc-buttons hc-buttons--left\"\n >\n <Button v-for=\"(btn, i) in toolbar.buttons\" :key=\"i\" v-bind=\"btn\" />\n </div>\n </div>\n\n <div\n v-if=\"$slots.center || sortedToolbars.some((t) => t.align === 'center')\"\n class=\"hc-slot hc-slot--center\"\n >\n <slot name=\"center\" />\n <div\n v-for=\"(toolbar, ti) in sortedToolbars.filter((t) => t.align === 'center')\"\n :key=\"`c-${ti}`\"\n class=\"hc-buttons\"\n >\n <Button v-for=\"(btn, i) in toolbar.buttons\" :key=\"i\" v-bind=\"btn\" />\n </div>\n </div>\n\n <div\n v-if=\"$slots.right || sortedToolbars.some((t) => t.align === 'right')\"\n class=\"hc-slot hc-slot--right\"\n >\n <slot name=\"right\" />\n <div\n v-for=\"(toolbar, ti) in sortedToolbars.filter((t) => t.align === 'right')\"\n :key=\"`r-${ti}`\"\n class=\"hc-buttons\"\n >\n <Button v-for=\"(btn, i) in toolbar.buttons\" :key=\"i\" v-bind=\"btn\" />\n </div>\n </div>\n </header>\n </div>\n</template>\n<style lang=\"scss\" src=\"@/styles/components/header.scss\"></style>\n"],"mappings":""}
|
|
@@ -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"}
|
|
@@ -4,19 +4,19 @@ import { useSelection as n } from "./admins-components57.js";
|
|
|
4
4
|
import { dataTableSettingsDefaults as r } from "./admins-components58.js";
|
|
5
5
|
import i from "./admins-components62.js";
|
|
6
6
|
import a from "./admins-components64.js";
|
|
7
|
-
import { Fragment as o, computed as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createTextVNode as d, createVNode as f, defineComponent as p, nextTick as m, normalizeClass as h,
|
|
7
|
+
import { Fragment as o, computed as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createTextVNode as d, createVNode as f, defineComponent as p, nextTick as m, normalizeClass as h, onMounted as g, openBlock as _, ref as v, renderList as y, toDisplayString as b, unref as x, watch as S, withModifiers as C } from "vue";
|
|
8
8
|
//#region src/components/data-table/DataTable.vue?vue&type=script&setup=true&lang.ts
|
|
9
|
-
var
|
|
9
|
+
var w = { class: "ac-component" }, T = { key: 0 }, E = ["title", "onClick"], D = {
|
|
10
10
|
key: 1,
|
|
11
11
|
class: "c-actions-header"
|
|
12
|
-
},
|
|
12
|
+
}, O = { key: 0 }, k = ["onClick"], A = {
|
|
13
13
|
key: 1,
|
|
14
14
|
class: "c-actions-cell"
|
|
15
|
-
},
|
|
15
|
+
}, j = { class: "c-actions-wrap" }, M = { key: 1 }, N = { class: "c-table__loading-row" }, P = ["colspan"], F = { class: "c-table__loading-wrap" }, I = {
|
|
16
16
|
key: 0,
|
|
17
17
|
class: "c-table__backdrop",
|
|
18
18
|
"aria-hidden": "true"
|
|
19
|
-
},
|
|
19
|
+
}, L = /* @__PURE__ */ p({
|
|
20
20
|
__name: "DataTable",
|
|
21
21
|
props: {
|
|
22
22
|
config: {},
|
|
@@ -30,97 +30,100 @@ var T = { class: "ac-component" }, E = { key: 0 }, D = ["title", "onClick"], O =
|
|
|
30
30
|
},
|
|
31
31
|
emits: ["selection-change", "sort-change"],
|
|
32
32
|
setup(r, { emit: p }) {
|
|
33
|
-
let
|
|
34
|
-
|
|
35
|
-
e && (await m(),
|
|
33
|
+
let L = r, R = p, z = v(null), B = v(null);
|
|
34
|
+
S(() => L.loading, async (e) => {
|
|
35
|
+
e && (await m(), B.value?.scrollTo({
|
|
36
36
|
top: 0,
|
|
37
37
|
behavior: "smooth"
|
|
38
38
|
}));
|
|
39
39
|
});
|
|
40
|
-
let { selectedKeys:
|
|
40
|
+
let { selectedKeys: V, allSelected: H, toggle: U, toggleAll: W } = n(() => L.items, () => L.config.selectableAttr, (e) => R("selection-change", e)), G = s(() => L.config.columns.filter((e) => e.visible !== !1));
|
|
41
|
+
function K(e) {
|
|
42
|
+
return e.sort ? typeof e.sort == "boolean" ? null : e.sort : null;
|
|
43
|
+
}
|
|
41
44
|
function q(e) {
|
|
42
|
-
|
|
43
|
-
|
|
45
|
+
return !!e.sort;
|
|
46
|
+
}
|
|
47
|
+
function J(e) {
|
|
48
|
+
let t = e.property, n = z.value?.key === t && z.value.direction === "asc" ? "desc" : "asc";
|
|
49
|
+
z.value = {
|
|
44
50
|
key: t,
|
|
45
51
|
direction: n
|
|
46
|
-
}, e
|
|
52
|
+
}, K(e)?.callback?.(t, n), R("sort-change", {
|
|
47
53
|
key: t,
|
|
48
54
|
direction: n
|
|
49
55
|
});
|
|
50
56
|
}
|
|
51
|
-
function
|
|
57
|
+
function Y(e) {
|
|
52
58
|
if (!e) {
|
|
53
|
-
|
|
59
|
+
z.value !== null && (z.value = null);
|
|
54
60
|
return;
|
|
55
61
|
}
|
|
56
|
-
let t =
|
|
57
|
-
t && (
|
|
62
|
+
let t = L.config.columns.find((t) => t.property === e.key);
|
|
63
|
+
t && (z.value?.key === e.key && z.value.direction === e.direction || (z.value = {
|
|
58
64
|
key: e.key,
|
|
59
65
|
direction: e.direction
|
|
60
|
-
}, t
|
|
66
|
+
}, K(t)?.callback?.(e.key, e.direction), R("sort-change", {
|
|
61
67
|
key: e.key,
|
|
62
68
|
direction: e.direction
|
|
63
69
|
})));
|
|
64
70
|
}
|
|
65
|
-
return
|
|
71
|
+
return g(() => Y(L.initialSort)), S(() => L.initialSort, (e) => {
|
|
66
72
|
if (!e) {
|
|
67
|
-
|
|
73
|
+
z.value !== null && (z.value = null);
|
|
68
74
|
return;
|
|
69
75
|
}
|
|
70
|
-
|
|
76
|
+
L.config.columns.find((t) => t.property === e.key) && (z.value?.key === e.key && z.value.direction === e.direction || (z.value = {
|
|
71
77
|
key: e.key,
|
|
72
78
|
direction: e.direction
|
|
73
79
|
}));
|
|
74
|
-
}), (n, s) => (
|
|
80
|
+
}), (n, s) => (_(), l("div", w, [u("div", {
|
|
75
81
|
ref_key: "tableWrapperRef",
|
|
76
|
-
ref:
|
|
82
|
+
ref: B,
|
|
77
83
|
class: h(["c-table-wrapper list-table-view", { "is-loading": r.loading }])
|
|
78
|
-
}, [u("table", {
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
r.config.selectableAttr ? (v(), l("th", E, [f(e, {
|
|
83
|
-
"model-value": S(U),
|
|
84
|
-
"onUpdate:modelValue": S(G)
|
|
84
|
+
}, [u("table", { class: h(["c-table", { "is-compact": r.settings.compact }]) }, [u("thead", null, [u("tr", null, [
|
|
85
|
+
r.config.selectableAttr ? (_(), l("th", T, [f(e, {
|
|
86
|
+
"model-value": x(H),
|
|
87
|
+
"onUpdate:modelValue": x(W)
|
|
85
88
|
}, null, 8, ["model-value", "onUpdate:modelValue"])])) : c("", !0),
|
|
86
|
-
(
|
|
89
|
+
(_(!0), l(o, null, y(G.value, (e) => (_(), l("th", {
|
|
87
90
|
key: e.property,
|
|
88
91
|
class: h([{
|
|
89
|
-
"c-sortable": e
|
|
90
|
-
"c-sortable--sorted":
|
|
92
|
+
"c-sortable": q(e),
|
|
93
|
+
"c-sortable--sorted": z.value?.key === e.property,
|
|
91
94
|
"primary-col": e.primary
|
|
92
95
|
}, e.headerClass]),
|
|
93
|
-
title: e
|
|
94
|
-
onClick: (t) => e
|
|
95
|
-
}, [d(
|
|
96
|
+
title: q(e) ? `Sorrendezés ${e.label} alapján` : void 0,
|
|
97
|
+
onClick: (t) => q(e) ? J(e) : void 0
|
|
98
|
+
}, [d(b(e.hideHeader ? "" : e.label) + " ", 1), q(e) ? (_(), l("span", {
|
|
96
99
|
key: 0,
|
|
97
100
|
class: h(["c-sort-icon fa-solid", {
|
|
98
|
-
"fa-sort":
|
|
99
|
-
"fa-sort-down":
|
|
100
|
-
"fa-sort-up":
|
|
101
|
-
"c-sort-icon--active":
|
|
102
|
-
"is-asc":
|
|
103
|
-
"is-desc":
|
|
101
|
+
"fa-sort": z.value?.key !== e.property,
|
|
102
|
+
"fa-sort-down": z.value?.key === e.property && z.value.direction === "desc",
|
|
103
|
+
"fa-sort-up": z.value?.key === e.property && z.value.direction === "asc",
|
|
104
|
+
"c-sort-icon--active": z.value?.key === e.property,
|
|
105
|
+
"is-asc": z.value?.key === e.property && z.value.direction === "asc",
|
|
106
|
+
"is-desc": z.value?.key === e.property && z.value.direction === "desc"
|
|
104
107
|
}])
|
|
105
|
-
}, null, 2)) : c("", !0)], 10,
|
|
106
|
-
r.config.actions ? (
|
|
107
|
-
])]), !r.loading || r.items.length > 0 ? (
|
|
108
|
+
}, null, 2)) : c("", !0)], 10, E))), 128)),
|
|
109
|
+
r.config.actions ? (_(), l("th", D, b(r.config.actionHeader ?? ""), 1)) : c("", !0)
|
|
110
|
+
])]), !r.loading || r.items.length > 0 ? (_(), l("tbody", O, [(_(!0), l(o, null, y(r.items, (t, n) => (_(), l("tr", {
|
|
108
111
|
key: n,
|
|
109
112
|
class: h({
|
|
110
|
-
"is-selected": r.config.selectableAttr &&
|
|
113
|
+
"is-selected": r.config.selectableAttr && x(V).has(t[r.config.selectableAttr]),
|
|
111
114
|
"is-striped": r.settings.striped && n % 2 == 1
|
|
112
115
|
})
|
|
113
116
|
}, [
|
|
114
|
-
r.config.selectableAttr ? (
|
|
117
|
+
r.config.selectableAttr ? (_(), l("td", {
|
|
115
118
|
key: 0,
|
|
116
119
|
class: "pointer",
|
|
117
|
-
onClick:
|
|
120
|
+
onClick: C((e) => x(U)(t), ["stop"])
|
|
118
121
|
}, [f(e, {
|
|
119
|
-
"model-value": !!
|
|
120
|
-
"onUpdate:modelValue": (e) =>
|
|
121
|
-
onClick: s[0] ||=
|
|
122
|
-
}, null, 8, ["model-value", "onUpdate:modelValue"])], 8,
|
|
123
|
-
(
|
|
122
|
+
"model-value": !!x(V).has(t[r.config.selectableAttr]),
|
|
123
|
+
"onUpdate:modelValue": (e) => x(U)(t),
|
|
124
|
+
onClick: s[0] ||= C(() => {}, ["stop"])
|
|
125
|
+
}, null, 8, ["model-value", "onUpdate:modelValue"])], 8, k)) : c("", !0),
|
|
126
|
+
(_(!0), l(o, null, y(G.value, (e) => (_(), l("td", {
|
|
124
127
|
key: e.property,
|
|
125
128
|
class: h(["c-table__cell", [e.class, { "primary-col": e.primary }]])
|
|
126
129
|
}, [f(i, {
|
|
@@ -132,21 +135,21 @@ var T = { class: "ac-component" }, E = { key: 0 }, D = ["title", "onClick"], O =
|
|
|
132
135
|
"col",
|
|
133
136
|
"copy"
|
|
134
137
|
])], 2))), 128)),
|
|
135
|
-
r.config.actions ? (
|
|
138
|
+
r.config.actions ? (_(), l("td", A, [u("div", j, [f(a, {
|
|
136
139
|
actions: r.config.actions,
|
|
137
140
|
item: t
|
|
138
141
|
}, null, 8, ["actions", "item"])])])) : c("", !0)
|
|
139
|
-
], 2))), 128))])) : (
|
|
140
|
-
colspan:
|
|
142
|
+
], 2))), 128))])) : (_(), l("tbody", M, [u("tr", N, [u("td", {
|
|
143
|
+
colspan: G.value.length + +!!r.config.selectableAttr + +!!r.config.actions,
|
|
141
144
|
class: "c-table__loading-cell"
|
|
142
|
-
}, [u("div",
|
|
145
|
+
}, [u("div", F, [f(t, {
|
|
143
146
|
loading: !0,
|
|
144
147
|
size: "2.5rem"
|
|
145
|
-
})])], 8,
|
|
148
|
+
})])], 8, P)])]))], 2), r.loading && r.items.length > 0 ? (_(), l("div", I, [f(t, {
|
|
146
149
|
loading: !0,
|
|
147
150
|
size: "2.5rem"
|
|
148
151
|
})])) : c("", !0)], 2)]));
|
|
149
152
|
}
|
|
150
153
|
});
|
|
151
154
|
//#endregion
|
|
152
|
-
export {
|
|
155
|
+
export { L as default };
|
|
@@ -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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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,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,EAAI,MAAM,WAAW,GAAK,CAAS,GAEnC,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,cAC9E,EAAW,QAAQ;IAAE,KAAK,EAAK;IAAK,WAAW,EAAK;GAAU,GAC9D,EAAI,MAAM,WAAW,EAAK,KAAK,EAAK,SAAS,GAC7C,EAAK,eAAe;IAAE,KAAK,EAAK;IAAK,WAAW,EAAK;GAAU,CAAC;EAClE;SAEA,QAAgB,EAAiB,EAAM,WAAW,CAAC,GACnD,QACQ,EAAM,cACX,MAAM;GAIL,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,cACxE,EAAW,QAAQ;IAAE,KAAK,EAAE;IAAK,WAAW,EAAE;GAAU;EAC1D,CACF,mBAIE,EA8GM,OA9GN,GA8GM,CA7GJ,EA4GM,OAAA;YA3GA;GAAJ,KAAI;GACJ,OAAK,EAAA,CAAC,mCAAiC,EAAA,cACf,EAAA,QAAO,CAAA,CAAA;MAE/B,EAmGQ,SAAA;GAlGN,OAAK,EAAA,CAAC,WAAS,EAAA,cACS,EAAA,SAAS,QAAO,CAAA,CAAA;GACvC,OAAK,EAAA,EAAA,kBAAsB,EAAA,OAAO,SAAS,UAAM,EAAA,CAAA;MAElD,EAyCQ,SAAA,MAAA,CAxCN,EAuCK,MAAA,MAAA;GAtCO,EAAA,OAAO,kBAAA,EAAA,GAAjB,EAEK,MAAA,GAAA,CADH,EAAuE,GAAA;IAA5D,eAAa,EAAA,CAAA;IAAc,uBAAoB,EAAA,CAAA;;WAG5D,EA6BK,GAAA,MAAA,EA5BW,EAAA,QAAP,YADT,EA6BK,MAAA;IA3BF,KAAK,EAAI;IACT,OAAK,EAAA,CAAA;mBAAsD,EAAI;2BAA8C,EAAA,OAAY,QAAQ,EAAI;oBAA2C,EAAI;OAA4C,EAAI,WAAA,CAAA;IAQpO,OAAO,EAAI,OAAI,eAAkB,EAAI,MAAK,YAAa,KAAA;IACvD,UAAK,MAAE,EAAI,OAAO,EAAW,CAAG,IAAI,KAAA;WAEjC,EAAI,aAAsB,KAAT,EAAI,KAAK,IAAQ,KAEtC,CAAA,GACQ,EAAI,QAAA,EAAA,GADZ,EAYQ,QAAA;;IAVN,OAAK,EAAA,CAAC,wBAAsB;gBACW,EAAA,OAAY,QAAQ,EAAI;qBAAgE,EAAA,OAAY,QAAQ,EAAI,YAAY,EAAA,MAAW,cAAS;mBAA6C,EAAA,OAAY,QAAQ,EAAI,YAAY,EAAA,MAAW,cAAS;4BAAqD,EAAA,OAAY,QAAQ,EAAI;eAAsC,EAAA,OAAY,QAAQ,EAAI,YAAY,EAAA,MAAW,cAAS;gBAAyC,EAAA,OAAY,QAAQ,EAAI,YAAY,EAAA,MAAW,cAAS;;;GAYliB,EAAA,OAAO,WAAA,EAAA,GAAjB,EAEK,MAFL,GAEK,EADA,EAAA,OAAO,gBAAY,EAAA,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA;SAKd,EAAA,WAAW,EAAA,MAAM,SAAM,KAAA,EAAA,GAArC,EAoCQ,SAAA,GAAA,EAAA,EAAA,EAAA,GAnCN,EAkCK,GAAA,MAAA,EAjCqB,EAAA,QAAhB,GAAM,YADhB,EAkCK,MAAA;GAhCF,KAAK;GACL,OAAK,EAAA;mBAAiC,EAAA,OAAO,kBAAkB,EAAA,CAAA,EAAa,IAAI,EAAK,EAAA,OAAO,eAAc;kBAAgC,EAAA,SAAS,WAAW,IAAK,KAAA;;;GAK1J,EAAA,OAAO,kBAAA,EAAA,GAAjB,EAMK,MAAA;;IAN4B,OAAM;IAAW,SAAK,GAAA,MAAO,EAAA,CAAA,EAAU,CAAI,GAAA,CAAA,MAAA,CAAA;OAC1E,EAIE,GAAA;IAHC,eAAW,CAAA,CAAI,EAAA,CAAA,EAAa,IAAI,EAAK,EAAA,OAAO,eAAc;IAC1D,wBAAkB,MAAE,EAAA,CAAA,EAAU,CAAI;IAClC,SAAK,AAAA,EAAA,OAAA,QAAN,CAAA,GAAW,CAAA,MAAA,CAAA;;WAIf,EAWK,GAAA,MAAA,EAVW,EAAA,QAAP,YADT,EAWK,MAAA;IATF,KAAK,EAAI;IACV,OAAK,EAAA,CAAC,iBAAe,CACK,EAAI,OAAA,EAAA,eAAwC,EAAI,QAAO,CAAA,CAAA,CAAA;OAMjF,EAAqE,GAAA;IAApD;IAAY;IAAM,MAAI,CAAG,EAAI;;;;;;GAGtC,EAAA,OAAO,WAAA,EAAA,GAAjB,EAIK,MAJL,GAIK,CAHH,EAEM,OAFN,GAEM,CADJ,EAA0D,GAAA;IAAxC,SAAS,EAAA,OAAO;IAAgB;;4BAK1D,EAaQ,SAAA,GAAA,CAZN,EAWK,MAXL,GAWK,CAVH,EASK,MAAA;GARF,SAA0B,EAAA,MAAe,SAAU,KAAA,OAAO,iBAA2B,KAAA,OAAO;GAG7F,OAAM;MAEN,EAEM,OAFN,GAEM,CADJ,EAAwC,GAAA;GAA/B,SAAS;GAAM,MAAK;0BAM5B,EAAA,WAAW,EAAA,MAAM,SAAM,KAAA,EAAA,GAAlC,EAEM,OAFN,GAEM,CADJ,EAAwC,GAAA;GAA/B,SAAS;GAAM,MAAK"}
|
|
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 <!-- :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':\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 <!-- :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':\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":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.c-table-wrapper{--table-col-max-width:clamp(12rem, 10vw, 22rem);--table-primary-col-min-width:clamp(14rem, 33vw, 20rem);--table-primary-col-max-width:clamp(14rem, 28vw, 28rem);max-height:var(--data-list-max-height,75dvh);-webkit-overflow-scrolling:touch;position:relative;overflow:auto}.c-table-wrapper .c-table{--cell-padding:.375rem
|
|
1
|
+
.c-table-wrapper{--table-col-max-width:clamp(12rem, 10vw, 22rem);--table-primary-col-min-width:clamp(14rem, 33vw, 20rem);--table-primary-col-max-width:clamp(14rem, 28vw, 28rem);max-height:var(--data-list-max-height,75dvh);-webkit-overflow-scrolling:touch;position:relative;overflow:auto}.c-table-wrapper .c-table{--cell-padding:.375rem;border-collapse:collapse;width:100%;min-width:48rem;font-size:.875rem}.c-table-wrapper .c-table thead{z-index:2;background-color:var(--neutral-150);position:sticky;top:0;box-shadow:0 2px 5px -1px #32325d40,0 1px 3px -1px #0000004d}.c-table-wrapper .c-table th,.c-table-wrapper .c-table td{padding:var(--cell-padding);text-align:left;border-bottom:1px solid var(--neutral-200);overflow-wrap:break-word}.c-table-wrapper .c-table .primary-col{min-width:var(--table-primary-col-min-width);max-width:var(--table-primary-col-max-width);overflow-wrap:anywhere;word-break:break-word}.c-table-wrapper .c-table th.c-sortable{cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap}.c-table-wrapper .c-table th.c-sortable--sorted{color:var(--premium-500)}.c-table-wrapper .c-table th.c-sortable:hover{color:#1e2627}.c-table-wrapper .c-table th .c-sort-icon{color:var(--neutral-400);margin-left:.25rem;transition:color .15s}.c-table-wrapper .c-table th .c-sort-icon--active{color:var(--premium-500)}.c-table-wrapper .c-table td{max-width:var(--table-col-max-width)}.c-table-wrapper .c-table td.is-nowrap{white-space:nowrap}.c-table-wrapper .c-table.is-compact th{padding-top:.5rem;padding-bottom:.5rem}.c-table-wrapper .c-table.is-compact td{padding-top:.1875rem;padding-bottom:.1875rem}.c-table-wrapper .c-table tbody tr.is-striped{background-color:var(--neutral-50)}.c-table-wrapper .c-table tbody tr.is-selected,.c-table-wrapper .c-table tbody tr.is-striped.is-selected{background-color:var(--premium-200)}.c-table-wrapper .c-table tbody .c-table__loading-row,.c-table-wrapper .c-table tbody .c-table__loading-row:hover{background-color:#0000}.c-table-wrapper .c-table tbody .c-table__loading-cell{text-align:center;border-bottom:1px solid var(--neutral-200);padding:2rem}.c-table-wrapper .c-table tbody .c-table__loading-wrap{justify-content:center;align-items:center;width:100%;display:flex}@media (hover:hover) and (pointer:fine){.c-table-wrapper .c-table th.c-sortable:hover .c-sort-icon{color:var(--neutral-700)}.c-table-wrapper .c-table tbody tr:hover,.c-table-wrapper .c-table tbody tr.is-striped:hover{background-color:var(--premium-100)}.c-table-wrapper .c-table tbody tr:hover td,.c-table-wrapper .c-table tbody tr.is-striped:hover td{border-color:var(--premium-400)}.c-table-wrapper .c-table tbody tr.is-selected:hover,.c-table-wrapper .c-table tbody tr.is-striped.is-selected:hover{background-color:var(--premium-300)}}.c-table-wrapper .c-table .c-actions-header{text-align:center}.c-table-wrapper .c-table .c-actions-cell .c-actions-wrap{flex-wrap:wrap;justify-content:center;align-items:baseline;gap:.25rem;display:flex}.c-table-wrapper .c-table__cell{position:relative}@media (hover:none),(pointer:coarse){.c-table-wrapper .c-table__cell{transition:background-color .15s}.c-table-wrapper .c-table__cell:focus-within,.c-table-wrapper .c-table__cell:hover{background-color:#dfefef80}}.c-table-wrapper .c-table__cell .c-copy-btn{opacity:0;position:absolute;top:0;right:0}.c-table-wrapper .c-table__cell:hover .c-copy-btn,.c-table-wrapper .c-table__cell:focus-within .c-copy-btn{opacity:1}.c-table-wrapper .c-table__backdrop{z-index:1;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);pointer-events:none;background:#fff9;justify-content:center;align-items:center;padding-top:3rem;animation:.15s ease-out c-table-backdrop-in;display:flex;position:absolute;inset:0}.c-table-wrapper.is-loading{touch-action:none;overflow:hidden}.c-table-wrapper.is-loading .c-table tbody{opacity:.45;transition:opacity .15s ease-out}@keyframes c-table-backdrop-in{0%{opacity:0}to{opacity:1}}
|