admins-components 9.0.40 → 9.0.41
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-components58.js.map +1 -1
- package/dist/admins-components63.js +2 -2
- package/dist/admins-components63.js.map +1 -1
- package/dist/admins-components64.js.map +1 -1
- package/dist/admins-components65.js +2 -2
- package/dist/admins-components65.js.map +1 -1
- package/dist/admins-components67.js.map +1 -1
- package/dist/admins-components68.js +2 -3
- package/dist/admins-components68.js.map +1 -1
- package/dist/admins-components70.js.map +1 -1
- package/dist/src/types/data-list.d.ts +2 -2
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"admins-components58.js","names":[],"sources":["../src/types/data-list.ts"],"sourcesContent":["import type { Ref } from 'vue'\nimport 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 | undefined\n columns: Column[]\n\n actions?: Array<Action | ActionGroup> | undefined\n actionHeader?: string | undefined\n}\n\nexport type ColumnType = 'normal' | 'uuid' | 'date' | 'datetime'\n\nexport interface Column {\n visible?: boolean | undefined\n primary?: boolean | undefined\n label: string\n property: string\n sort?: undefined | Sort\n type?: ColumnType\n class?: string | undefined\n headerClass?: string | undefined\n hideCopyToClipboard?: boolean | undefined\n\n converter?: undefined | ((v: any, item: any) => any)\n loading?: (() => boolean) | undefined\n}\n\nexport type SortDirection = 'asc' | 'desc' | null\n\nexport interface Sort {\n label: string\n active: Ref<boolean> | undefined\n direction?: Ref<SortDirection> | undefined\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> | undefined\n disabled?: (item: any) => boolean\n callback: (item: any) => any\n
|
|
1
|
+
{"version":3,"file":"admins-components58.js","names":[],"sources":["../src/types/data-list.ts"],"sourcesContent":["import type { Ref } from 'vue'\nimport 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 | undefined\n columns: Column[]\n\n actions?: Array<Action | ActionGroup> | undefined\n actionHeader?: string | undefined\n}\n\nexport type ColumnType = 'normal' | 'uuid' | 'date' | 'datetime'\n\nexport interface Column {\n visible?: boolean | undefined\n primary?: boolean | undefined\n label: string\n property: string\n sort?: undefined | Sort\n type?: ColumnType\n class?: string | undefined\n headerClass?: string | undefined\n hideCopyToClipboard?: boolean | undefined\n\n converter?: undefined | ((v: any, item: any) => any)\n loading?: (() => boolean) | undefined\n}\n\nexport type SortDirection = 'asc' | 'desc' | null\n\nexport interface Sort {\n label: string\n active: Ref<boolean> | undefined\n direction?: Ref<SortDirection> | undefined\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> | undefined\n disabled?: (item: any) => boolean\n callback: (item: any) => any\n withConfirm?: boolean\n withConfirmConfig?: 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> | undefined\n items: Action[]\n disabled?: (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":";AAqGA,IAAa,IAA+C;CAC1D,SAAS;CACT,SAAS;AACX,GAEa,IAA+C,EAC1D,SAAS,GACX,GAEa,IAAsD;CACjE,QAAQ;CACR,SAAS;AACX"}
|
|
@@ -12,14 +12,14 @@ var f = /* @__PURE__ */ s({
|
|
|
12
12
|
setup(s) {
|
|
13
13
|
let f = u(null);
|
|
14
14
|
function p(e) {
|
|
15
|
-
return e.
|
|
15
|
+
return e.withConfirmConfig ?? {
|
|
16
16
|
title: e.label ?? "Megerősítés",
|
|
17
17
|
message: "Biztosan végrehajta a műveletet?",
|
|
18
18
|
type: e.type
|
|
19
19
|
};
|
|
20
20
|
}
|
|
21
21
|
function m(e, t) {
|
|
22
|
-
e.
|
|
22
|
+
e.withConfirm ? f.value = {
|
|
23
23
|
action: e,
|
|
24
24
|
item: t
|
|
25
25
|
} : e.callback(t);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"admins-components63.js","names":[],"sources":["../src/components/data-table/DataListActions.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport type { Action, ActionGroup } from '@/types/data-list'\nimport type { ConfirmModalProps } from '@/components/ConfirmModal.vue'\nimport Button from '@/components/Button.vue'\nimport DropdownMenu from '@/components/DropdownMenu.vue'\nimport ConfirmModal from '@/components/ConfirmModal.vue'\nimport type { DropdownMenuItem } from '@/components/DropdownMenu.vue'\n\ndefineProps<{\n actions: Array<Action | ActionGroup>\n item?: Record<string, unknown>\n}>()\n\nconst activeConfirm = ref<{\n action: Action\n item?: Record<string, unknown>\n} | null>(null)\n\nfunction getConfirmConfig(action: Action): ConfirmModalProps {\n return action.
|
|
1
|
+
{"version":3,"file":"admins-components63.js","names":[],"sources":["../src/components/data-table/DataListActions.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport type { Action, ActionGroup } from '@/types/data-list'\nimport type { ConfirmModalProps } from '@/components/ConfirmModal.vue'\nimport Button from '@/components/Button.vue'\nimport DropdownMenu from '@/components/DropdownMenu.vue'\nimport ConfirmModal from '@/components/ConfirmModal.vue'\nimport type { DropdownMenuItem } from '@/components/DropdownMenu.vue'\n\ndefineProps<{\n actions: Array<Action | ActionGroup>\n item?: Record<string, unknown>\n}>()\n\nconst activeConfirm = ref<{\n action: Action\n item?: Record<string, unknown>\n} | null>(null)\n\nfunction getConfirmConfig(action: Action): ConfirmModalProps {\n return action.withConfirmConfig ?? {\n title: action.label ?? 'Megerősítés',\n message: 'Biztosan végrehajta a műveletet?',\n type: action.type,\n }\n}\n\nfunction handleOnClick(action: Action, item?: Record<string, unknown>) {\n if (action.withConfirm) {\n activeConfirm.value = { action, item }\n } else {\n action.callback(item)\n }\n}\n\nfunction handleConfirm() {\n if (activeConfirm.value) {\n activeConfirm.value.action.callback(activeConfirm.value.item)\n activeConfirm.value = null\n }\n}\n\nfunction isActionGroup(entry: Action | ActionGroup): entry is ActionGroup {\n return (entry as ActionGroup).isGroup === true && Array.isArray((entry as ActionGroup).items)\n}\n\nfunction buildActionGroupMenuItems(\n group: ActionGroup,\n item?: Record<string, unknown>,\n): DropdownMenuItem[] {\n return group.items.map((action: Action) => ({\n icon: action.icon,\n label: action.label ?? '',\n type: action.type,\n size: action.label ? 'small' : 'normal',\n callback: () => handleOnClick(action, item),\n }))\n}\n</script>\n\n<template>\n <template v-for=\"(action, ai) in actions\" :key=\"ai\">\n <DropdownMenu\n v-if=\"isActionGroup(action)\"\n :icon=\"action.icon\"\n :label=\"action.label\"\n :items=\"buildActionGroupMenuItems(action, item)\"\n v-bind=\"action.config\"\n />\n\n <Button\n v-else\n :icon=\"action.icon\"\n :label=\"action.label\"\n :type=\"action.type\"\n :disabled=\"action.disabled ? action.disabled(item) : false\"\n :size=\"action.label ? 'small' : 'normal'\"\n :ariaLabel=\"action.ariaLabel\"\n outline\n :callback=\"() => handleOnClick(action, item)\"\n v-bind=\"action.config\"\n />\n </template>\n\n <ConfirmModal\n v-if=\"activeConfirm\"\n v-bind=\"getConfirmConfig(activeConfirm.action)\"\n @confirm=\"handleConfirm\"\n @cancel=\"activeConfirm = null\"\n />\n</template>\n"],"mappings":";;;;;;;;;;;;EAcA,IAAM,IAAgB,EAGZ,IAAI;EAEd,SAAS,EAAiB,GAAmC;GAC3D,OAAO,EAAO,qBAAqB;IACjC,OAAO,EAAO,SAAS;IACvB,SAAS;IACT,MAAM,EAAO;GACf;EACF;EAEA,SAAS,EAAc,GAAgB,GAAgC;GACrE,AAAI,EAAO,cACT,EAAc,QAAQ;IAAE;IAAQ;GAAK,IAErC,EAAO,SAAS,CAAI;EAExB;EAEA,SAAS,IAAgB;GACvB,AAEE,EAAc,WADd,EAAc,MAAM,OAAO,SAAS,EAAc,MAAM,IAAI,GACtC;EAE1B;EAEA,SAAS,EAAc,GAAmD;GACxE,OAAQ,EAAsB,YAAY,MAAQ,MAAM,QAAS,EAAsB,KAAK;EAC9F;EAEA,SAAS,EACP,GACA,GACoB;GACpB,OAAO,EAAM,MAAM,KAAK,OAAoB;IAC1C,MAAM,EAAO;IACb,OAAO,EAAO,SAAS;IACvB,MAAM,EAAO;IACb,MAAM,EAAO,QAAQ,UAAU;IAC/B,gBAAgB,EAAc,GAAQ,CAAI;GAC5C,EAAE;EACJ;6CAIE,EAqBW,GAAA,MAAA,EArBsB,EAAA,UAAf,GAAQ,wBAAsB,EAAE,GAAA,CAExC,EAAc,CAAM,KAAA,EAAA,GAD5B,EAME,GANF,EAME;;GAJC,MAAM,EAAO;GACb,OAAO,EAAO;GACd,OAAO,EAA0B,GAAQ,EAAA,IAAI;sBACtC,EAAO,MAAM,GAAA,MAAA,IAAA;GAAA;GAAA;GAAA;EAAA,CAAA,MAAA,EAAA,GAGvB,EAWE,GAXF,EAWE;;GATC,MAAM,EAAO;GACb,OAAO,EAAO;GACd,MAAM,EAAO;GACb,UAAU,EAAO,WAAW,EAAO,SAAS,EAAA,IAAI,IAAA;GAChD,MAAM,EAAO,QAAK,UAAA;GAClB,WAAW,EAAO;GACnB,SAAA;GACC,gBAAgB,EAAc,GAAQ,EAAA,IAAI;sBACnC,EAAO,MAAM,GAAA,MAAA,IAAA;GAAA;GAAA;GAAA;GAAA;GAAA;GAAA;GAAA;EAAA,CAAA,EAAA,GAAA,EAAA,YAKjB,EAAA,SAAA,EAAA,GADR,EAKE,GALF,EAKE,EAAA,KAAA,EAAA,GAHQ,EAAiB,EAAA,MAAc,MAAM,GAAA;GAC5C,WAAS;GACT,UAAM,AAAA,EAAA,QAAA,MAAE,EAAA,QAAa"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"admins-components64.js","names":[],"sources":["../src/components/data-table/DataListActions.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport type { Action, ActionGroup } from '@/types/data-list'\nimport type { ConfirmModalProps } from '@/components/ConfirmModal.vue'\nimport Button from '@/components/Button.vue'\nimport DropdownMenu from '@/components/DropdownMenu.vue'\nimport ConfirmModal from '@/components/ConfirmModal.vue'\nimport type { DropdownMenuItem } from '@/components/DropdownMenu.vue'\n\ndefineProps<{\n actions: Array<Action | ActionGroup>\n item?: Record<string, unknown>\n}>()\n\nconst activeConfirm = ref<{\n action: Action\n item?: Record<string, unknown>\n} | null>(null)\n\nfunction getConfirmConfig(action: Action): ConfirmModalProps {\n return action.
|
|
1
|
+
{"version":3,"file":"admins-components64.js","names":[],"sources":["../src/components/data-table/DataListActions.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport type { Action, ActionGroup } from '@/types/data-list'\nimport type { ConfirmModalProps } from '@/components/ConfirmModal.vue'\nimport Button from '@/components/Button.vue'\nimport DropdownMenu from '@/components/DropdownMenu.vue'\nimport ConfirmModal from '@/components/ConfirmModal.vue'\nimport type { DropdownMenuItem } from '@/components/DropdownMenu.vue'\n\ndefineProps<{\n actions: Array<Action | ActionGroup>\n item?: Record<string, unknown>\n}>()\n\nconst activeConfirm = ref<{\n action: Action\n item?: Record<string, unknown>\n} | null>(null)\n\nfunction getConfirmConfig(action: Action): ConfirmModalProps {\n return action.withConfirmConfig ?? {\n title: action.label ?? 'Megerősítés',\n message: 'Biztosan végrehajta a műveletet?',\n type: action.type,\n }\n}\n\nfunction handleOnClick(action: Action, item?: Record<string, unknown>) {\n if (action.withConfirm) {\n activeConfirm.value = { action, item }\n } else {\n action.callback(item)\n }\n}\n\nfunction handleConfirm() {\n if (activeConfirm.value) {\n activeConfirm.value.action.callback(activeConfirm.value.item)\n activeConfirm.value = null\n }\n}\n\nfunction isActionGroup(entry: Action | ActionGroup): entry is ActionGroup {\n return (entry as ActionGroup).isGroup === true && Array.isArray((entry as ActionGroup).items)\n}\n\nfunction buildActionGroupMenuItems(\n group: ActionGroup,\n item?: Record<string, unknown>,\n): DropdownMenuItem[] {\n return group.items.map((action: Action) => ({\n icon: action.icon,\n label: action.label ?? '',\n type: action.type,\n size: action.label ? 'small' : 'normal',\n callback: () => handleOnClick(action, item),\n }))\n}\n</script>\n\n<template>\n <template v-for=\"(action, ai) in actions\" :key=\"ai\">\n <DropdownMenu\n v-if=\"isActionGroup(action)\"\n :icon=\"action.icon\"\n :label=\"action.label\"\n :items=\"buildActionGroupMenuItems(action, item)\"\n v-bind=\"action.config\"\n />\n\n <Button\n v-else\n :icon=\"action.icon\"\n :label=\"action.label\"\n :type=\"action.type\"\n :disabled=\"action.disabled ? action.disabled(item) : false\"\n :size=\"action.label ? 'small' : 'normal'\"\n :ariaLabel=\"action.ariaLabel\"\n outline\n :callback=\"() => handleOnClick(action, item)\"\n v-bind=\"action.config\"\n />\n </template>\n\n <ConfirmModal\n v-if=\"activeConfirm\"\n v-bind=\"getConfirmConfig(activeConfirm.action)\"\n @confirm=\"handleConfirm\"\n @cancel=\"activeConfirm = null\"\n />\n</template>\n"],"mappings":""}
|
|
@@ -53,11 +53,11 @@ var S = { class: "ac-component" }, C = { class: "c-table-wrapper" }, w = { key:
|
|
|
53
53
|
}, null, 8, ["model-value", "onUpdate:modelValue"])])) : c("", !0),
|
|
54
54
|
(g(!0), l(o, null, v(U.value, (e) => (g(), l("th", {
|
|
55
55
|
key: e.property,
|
|
56
|
-
class: m({
|
|
56
|
+
class: m([{
|
|
57
57
|
"c-sortable": e.sort,
|
|
58
58
|
"c-sortable--sorted": R.value?.key === e.property,
|
|
59
59
|
"primary-col": e.primary
|
|
60
|
-
}),
|
|
60
|
+
}, e.headerClass]),
|
|
61
61
|
onClick: (t) => e.sort ? W(e.property) : void 0
|
|
62
62
|
}, [d(y(e.label) + " ", 1), e.sort ? (g(), l("span", {
|
|
63
63
|
key: 0,
|
|
@@ -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 } from 'vue'\nimport Checkbox from '@/components/Checkbox.vue'\nimport { useSelection } from '@/composables/useSelection'\nimport { dataTableSettingsDefaults } from '@/types/data-list'\nimport type { 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 }>(),\n {\n settings: () => ({ ...dataTableSettingsDefaults }),\n loading: false,\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 {\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(key: string) {\n const direction: SortDirection =\n activeSort.value?.key === key && activeSort.value.direction === 'asc' ? 'desc' : 'asc'\n\n activeSort.value = { key, direction }\n\n emit('sort-change', { key, direction })\n}\n</script>\n\n<template>\n <div class=\"ac-component\">\n <div class=\"c-table-wrapper\">\n <table\n class=\"c-table\"\n :class=\"{ 'is-compact': settings.compact, 'is-loading': loading }\"\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
|
|
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 } from 'vue'\nimport Checkbox from '@/components/Checkbox.vue'\nimport { useSelection } from '@/composables/useSelection'\nimport { dataTableSettingsDefaults } from '@/types/data-list'\nimport type { 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 }>(),\n {\n settings: () => ({ ...dataTableSettingsDefaults }),\n loading: false,\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 {\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(key: string) {\n const direction: SortDirection =\n activeSort.value?.key === key && activeSort.value.direction === 'asc' ? 'desc' : 'asc'\n\n activeSort.value = { key, direction }\n\n emit('sort-change', { key, direction })\n}\n</script>\n\n<template>\n <div class=\"ac-component\">\n <div class=\"c-table-wrapper\">\n <table\n class=\"c-table\"\n :class=\"{ 'is-compact': settings.compact, 'is-loading': loading }\"\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 @click=\"col.sort ? handleSort(col.property) : undefined\"\n >\n {{ col.label }}\n\n <span\n v-if=\"col.sort\"\n class=\"c-sort-icon fa-solid\"\n :class=\"{\n 'fa-sort': activeSort?.key !== col.property,\n 'fa-sort-down':\n activeSort?.key === col.property && activeSort.direction === 'desc',\n 'fa-sort-up': activeSort?.key === col.property && activeSort.direction === 'asc',\n 'c-sort-icon--active': activeSort?.key === col.property,\n 'is-asc': activeSort?.key === col.property && activeSort.direction === 'asc',\n 'is-desc': activeSort?.key === col.property && activeSort.direction === 'desc',\n }\"\n ></span>\n </th>\n\n <th v-if=\"config.actions\" class=\"c-actions-header\">\n {{ config.actionHeader ?? '' }}\n </th>\n </tr>\n </thead>\n\n <tbody v-if=\"!loading || items.length > 0\">\n <tr\n v-for=\"(item, index) in items\"\n :key=\"index\"\n :class=\"{\n 'is-selected': config.selectableAttr && selectedKeys.has(item[config.selectableAttr]),\n 'is-striped': settings.striped && index % 2 === 1,\n }\"\n >\n <td v-if=\"config.selectableAttr\" class=\"pointer\" @click.stop=\"toggleRow(item)\">\n <Checkbox\n :model-value=\"!!selectedKeys.has(item[config.selectableAttr])\"\n @update:model-value=\"toggleRow(item)\"\n @click.stop\n />\n </td>\n\n <td\n v-for=\"col in visibleColumns\"\n :key=\"col.property\"\n class=\"c-table__cell\"\n :class=\"[\n col.class,\n { 'primary-col': col.primary },\n /* { 'is-nowrap': String(getColumnValue(item, col) ?? '').length < CHARACTER_BREAKPOINT}, */\n ]\"\n >\n <DataCell :item=\"item\" :col=\"col\" :copy=\"!col.hideCopyToClipboard\" />\n </td>\n\n <td v-if=\"config.actions\" class=\"c-actions-cell\">\n <div class=\"c-actions-wrap\">\n <DataListActions :actions=\"config.actions\" :item=\"item\" />\n </div>\n </td>\n </tr>\n </tbody>\n <tbody v-else>\n <tr class=\"c-table__loading-row\">\n <td\n :colspan=\"\n visibleColumns.length + (config.selectableAttr ? 1 : 0) + (config.actions ? 1 : 0)\n \"\n class=\"c-table__loading-cell\"\n >\n <div class=\"c-table__loading-wrap\">\n <Loader :loading=\"true\" size=\"2.5rem\" />\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n <div v-if=\"loading && items.length > 0\" class=\"c-table__backdrop\" aria-hidden=\"true\">\n <Loader :loading=\"true\" size=\"2.5rem\" />\n </div>\n </div>\n </div>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/data-table/data-table.scss\"></style>\n"],"mappings":"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"}
|
|
@@ -1 +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 } from 'vue'\nimport Checkbox from '@/components/Checkbox.vue'\nimport { useSelection } from '@/composables/useSelection'\nimport { dataTableSettingsDefaults } from '@/types/data-list'\nimport type { 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 }>(),\n {\n settings: () => ({ ...dataTableSettingsDefaults }),\n loading: false,\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 {\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(key: string) {\n const direction: SortDirection =\n activeSort.value?.key === key && activeSort.value.direction === 'asc' ? 'desc' : 'asc'\n\n activeSort.value = { key, direction }\n\n emit('sort-change', { key, direction })\n}\n</script>\n\n<template>\n <div class=\"ac-component\">\n <div class=\"c-table-wrapper\">\n <table\n class=\"c-table\"\n :class=\"{ 'is-compact': settings.compact, 'is-loading': loading }\"\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
|
|
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 } from 'vue'\nimport Checkbox from '@/components/Checkbox.vue'\nimport { useSelection } from '@/composables/useSelection'\nimport { dataTableSettingsDefaults } from '@/types/data-list'\nimport type { 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 }>(),\n {\n settings: () => ({ ...dataTableSettingsDefaults }),\n loading: false,\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 {\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(key: string) {\n const direction: SortDirection =\n activeSort.value?.key === key && activeSort.value.direction === 'asc' ? 'desc' : 'asc'\n\n activeSort.value = { key, direction }\n\n emit('sort-change', { key, direction })\n}\n</script>\n\n<template>\n <div class=\"ac-component\">\n <div class=\"c-table-wrapper\">\n <table\n class=\"c-table\"\n :class=\"{ 'is-compact': settings.compact, 'is-loading': loading }\"\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 @click=\"col.sort ? handleSort(col.property) : undefined\"\n >\n {{ 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":""}
|
|
@@ -111,8 +111,7 @@ var E = { class: "ac-component" }, D = ["onClick", "onPointerdown"], O = ["onCli
|
|
|
111
111
|
}, [p("i", { class: "fa-solid fa-chevron-down" })], -1)
|
|
112
112
|
], 40, D), w(p("div", M, [(_(!0), f(c, null, y(V.value, (e) => (_(), f("div", {
|
|
113
113
|
key: e.property,
|
|
114
|
-
class: "c-card__field"
|
|
115
|
-
tabindex: "0"
|
|
114
|
+
class: "c-card__field"
|
|
116
115
|
}, [
|
|
117
116
|
p("span", N, b(e.label), 1),
|
|
118
117
|
m(o, {
|
|
@@ -121,7 +120,7 @@ var E = { class: "ac-component" }, D = ["onClick", "onPointerdown"], O = ["onCli
|
|
|
121
120
|
class: "c-card__field-value",
|
|
122
121
|
copy: !1
|
|
123
122
|
}, null, 8, ["item", "col"]),
|
|
124
|
-
x(a)(n, e) ? (_(), u(t, {
|
|
123
|
+
x(a)(n, e) && !e.hideCopyToClipboard ? (_(), u(t, {
|
|
125
124
|
key: 0,
|
|
126
125
|
class: "c-card__field-copy click-expand",
|
|
127
126
|
value: x(a)(n, e)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"admins-components68.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 } 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'\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\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\nlet longPressTimer: ReturnType<typeof setTimeout> | null = null\nlet longPressTriggered = false\n\nfunction onPointerDown(e: PointerEvent, item: Record<string, unknown>) {\n if (!props.config.selectableAttr) return\n if (e.button !== 0) return\n longPressTriggered = false\n longPressTimer = setTimeout(() => {\n longPressTriggered = true\n toggleRow(item)\n }, 500)\n}\n\nfunction onPointerUp() {\n if (longPressTimer) {\n clearTimeout(longPressTimer)\n longPressTimer = null\n }\n}\n\nfunction onContextMenu(e: MouseEvent) {\n if (longPressTriggered) {\n e.preventDefault()\n }\n}\n\nfunction onHeaderClick(index: number) {\n if (longPressTriggered) {\n longPressTriggered = false\n return\n }\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 class=\"ac-component\">\n <div class=\"c-cards-wrapper\" :class=\"{ 'is-loading': loading }\">\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\n type=\"button\"\n class=\"c-card__header\"\n @click=\"onHeaderClick(index)\"\n @pointerdown=\"onPointerDown($event, item)\"\n @pointerup=\"onPointerUp()\"\n @pointerleave=\"onPointerUp()\"\n @contextmenu=\"onContextMenu\"\n >\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 >\n <span class=\"c-card__label\">{{ col.label }}</span>\n <span\n class=\"c-card__title\"\n :class=\"{ 'c-truncate': settings.compact && i === 0 }\"\n v-html=\"getColumnValue(item, col)\"\n ></span>\n </span>\n </span>\n <span class=\"c-card__icon\" aria-hidden=\"true\"\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\n v-for=\"col in visibleColumns\"\n :key=\"col.property\"\n class=\"c-card__field\"\n
|
|
1
|
+
{"version":3,"file":"admins-components68.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 } 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'\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\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\nlet longPressTimer: ReturnType<typeof setTimeout> | null = null\nlet longPressTriggered = false\n\nfunction onPointerDown(e: PointerEvent, item: Record<string, unknown>) {\n if (!props.config.selectableAttr) return\n if (e.button !== 0) return\n longPressTriggered = false\n longPressTimer = setTimeout(() => {\n longPressTriggered = true\n toggleRow(item)\n }, 500)\n}\n\nfunction onPointerUp() {\n if (longPressTimer) {\n clearTimeout(longPressTimer)\n longPressTimer = null\n }\n}\n\nfunction onContextMenu(e: MouseEvent) {\n if (longPressTriggered) {\n e.preventDefault()\n }\n}\n\nfunction onHeaderClick(index: number) {\n if (longPressTriggered) {\n longPressTriggered = false\n return\n }\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 class=\"ac-component\">\n <div class=\"c-cards-wrapper\" :class=\"{ 'is-loading': loading }\">\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\n type=\"button\"\n class=\"c-card__header\"\n @click=\"onHeaderClick(index)\"\n @pointerdown=\"onPointerDown($event, item)\"\n @pointerup=\"onPointerUp()\"\n @pointerleave=\"onPointerUp()\"\n @contextmenu=\"onContextMenu\"\n >\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 >\n <span class=\"c-card__label\">{{ col.label }}</span>\n <span\n class=\"c-card__title\"\n :class=\"{ 'c-truncate': settings.compact && i === 0 }\"\n v-html=\"getColumnValue(item, col)\"\n ></span>\n </span>\n </span>\n <span class=\"c-card__icon\" aria-hidden=\"true\"\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\n v-for=\"col in visibleColumns\"\n :key=\"col.property\"\n class=\"c-card__field\"\n >\n <span class=\"c-card__field-label\">{{ col.label }}</span>\n <DataCell :item=\"item\" :col=\"col\" class=\"c-card__field-value\" :copy=\"false\" />\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 <DataListActions :actions=\"config.actions\" :item=\"item\" />\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 </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-components70.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 } 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'\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\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\nlet longPressTimer: ReturnType<typeof setTimeout> | null = null\nlet longPressTriggered = false\n\nfunction onPointerDown(e: PointerEvent, item: Record<string, unknown>) {\n if (!props.config.selectableAttr) return\n if (e.button !== 0) return\n longPressTriggered = false\n longPressTimer = setTimeout(() => {\n longPressTriggered = true\n toggleRow(item)\n }, 500)\n}\n\nfunction onPointerUp() {\n if (longPressTimer) {\n clearTimeout(longPressTimer)\n longPressTimer = null\n }\n}\n\nfunction onContextMenu(e: MouseEvent) {\n if (longPressTriggered) {\n e.preventDefault()\n }\n}\n\nfunction onHeaderClick(index: number) {\n if (longPressTriggered) {\n longPressTriggered = false\n return\n }\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 class=\"ac-component\">\n <div class=\"c-cards-wrapper\" :class=\"{ 'is-loading': loading }\">\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\n type=\"button\"\n class=\"c-card__header\"\n @click=\"onHeaderClick(index)\"\n @pointerdown=\"onPointerDown($event, item)\"\n @pointerup=\"onPointerUp()\"\n @pointerleave=\"onPointerUp()\"\n @contextmenu=\"onContextMenu\"\n >\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 >\n <span class=\"c-card__label\">{{ col.label }}</span>\n <span\n class=\"c-card__title\"\n :class=\"{ 'c-truncate': settings.compact && i === 0 }\"\n v-html=\"getColumnValue(item, col)\"\n ></span>\n </span>\n </span>\n <span class=\"c-card__icon\" aria-hidden=\"true\"\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\n v-for=\"col in visibleColumns\"\n :key=\"col.property\"\n class=\"c-card__field\"\n
|
|
1
|
+
{"version":3,"file":"admins-components70.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 } 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'\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\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\nlet longPressTimer: ReturnType<typeof setTimeout> | null = null\nlet longPressTriggered = false\n\nfunction onPointerDown(e: PointerEvent, item: Record<string, unknown>) {\n if (!props.config.selectableAttr) return\n if (e.button !== 0) return\n longPressTriggered = false\n longPressTimer = setTimeout(() => {\n longPressTriggered = true\n toggleRow(item)\n }, 500)\n}\n\nfunction onPointerUp() {\n if (longPressTimer) {\n clearTimeout(longPressTimer)\n longPressTimer = null\n }\n}\n\nfunction onContextMenu(e: MouseEvent) {\n if (longPressTriggered) {\n e.preventDefault()\n }\n}\n\nfunction onHeaderClick(index: number) {\n if (longPressTriggered) {\n longPressTriggered = false\n return\n }\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 class=\"ac-component\">\n <div class=\"c-cards-wrapper\" :class=\"{ 'is-loading': loading }\">\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\n type=\"button\"\n class=\"c-card__header\"\n @click=\"onHeaderClick(index)\"\n @pointerdown=\"onPointerDown($event, item)\"\n @pointerup=\"onPointerUp()\"\n @pointerleave=\"onPointerUp()\"\n @contextmenu=\"onContextMenu\"\n >\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 >\n <span class=\"c-card__label\">{{ col.label }}</span>\n <span\n class=\"c-card__title\"\n :class=\"{ 'c-truncate': settings.compact && i === 0 }\"\n v-html=\"getColumnValue(item, col)\"\n ></span>\n </span>\n </span>\n <span class=\"c-card__icon\" aria-hidden=\"true\"\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\n v-for=\"col in visibleColumns\"\n :key=\"col.property\"\n class=\"c-card__field\"\n >\n <span class=\"c-card__field-label\">{{ col.label }}</span>\n <DataCell :item=\"item\" :col=\"col\" class=\"c-card__field-value\" :copy=\"false\" />\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 <DataListActions :actions=\"config.actions\" :item=\"item\" />\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 </div>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/data-table/data-cards.scss\"></style>\n"],"mappings":""}
|
|
@@ -68,8 +68,8 @@ export interface Action {
|
|
|
68
68
|
config?: Record<string, any> | undefined;
|
|
69
69
|
disabled?: (item: any) => boolean;
|
|
70
70
|
callback: (item: any) => any;
|
|
71
|
-
|
|
72
|
-
|
|
71
|
+
withConfirm?: boolean;
|
|
72
|
+
withConfirmConfig?: ConfirmModalProps;
|
|
73
73
|
}
|
|
74
74
|
export interface ActionGroup {
|
|
75
75
|
isGroup: true;
|