lkt-table 1.2.4 → 1.2.6
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/build.d.ts +442 -442
- package/dist/build.js +526 -505
- package/dist/style.css +1 -1
- package/package.json +1 -1
- package/src/components/CreateButton.vue +5 -4
- package/src/components/DropButton.vue +4 -3
- package/src/components/LktTableCell.vue +1 -1
- package/src/components/LktTableRow.vue +3 -0
- package/src/lib-components/LktTable.vue +33 -6
- package/theme/default.css +2 -0
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.lkt-table-page,.lkt-table-page-content-wrapper{display:flex;width:100%;flex-direction:column;gap:var(--lkt-table-page-gap)}.lkt-table{width:var(--lkt-table-width);
|
|
1
|
+
.lkt-table-page,.lkt-table-page-content-wrapper{display:flex;width:100%;flex-direction:column;gap:var(--lkt-table-page-gap)}.lkt-table{width:var(--lkt-table-width);font-family:var(--lkt-table-font-family),serif}.lkt-table .lkt-field{--lkt-field-font-size: var(--lkt-table-font-size-row)}.lkt-table>table{width:100%;max-width:100%;border-collapse:var(--lkt-table-border-collapse);border-radius:var(--lkt-table-border-radius);border-spacing:var(--lkt-table-border-spacing)}.lkt-table th,.lkt-table td{vertical-align:middle;text-align:var(--lkt-table-text-align);padding:var(--lkt-table-padding-row);font-size:var(--lkt-table-font-size-row);color:var(--lkt-table-color-row)}.lkt-table th{font-family:var(--lkt-table-font-family-header),serif;padding:var(--lkt-table-padding-header)}.lkt-table thead tr{background-color:var(--lkt-table-bg-header)}.lkt-table tbody tr{background-color:var(--lkt-table-bg-row)}.lkt-table tbody tr:nth-child(odd){background-color:var(--lkt-table-bg-row-odd)}.lkt-table [data-sort=asc]>div,.lkt-table [data-sort=desc]>div{display:inline-block}.lkt-table [data-sort=asc]>div:after,.lkt-table [data-sort=desc]>div:after{font-family:var(--lkt-table-font-family-sort-icon),serif;display:inline-block;font-size:var(--lkt-table-font-size-sort-icon)}.lkt-table [data-sort=asc]>div:after{content:var(--lkt-table-sort-icon-content-asc)}.lkt-table [data-sort=desc]>div:after{content:var(--lkt-table-sort-icon-content-desc)}.lkt-table td[data-role=drag-indicator],.lkt-table td[data-role=invalid-drag-indicator]{width:var(--lkt-table-width-drag);height:40px;padding:0!important;position:relative;background:#eee;cursor:pointer}.lkt-table td[data-role=drag-indicator]:before,.lkt-table td[data-role=invalid-drag-indicator]:before{content:"";display:block;background:#eee;width:18px;height:36px;margin:auto}.lkt-table td[data-role=drag-indicator]:after,.lkt-table td[data-role=invalid-drag-indicator]:after{content:"…";color:#000;display:block;position:absolute;top:50%;left:50%;font-weight:700;width:15px;height:7px;transform:rotate(90deg);transform-origin:center center}[data-lkt=empty-table]{border:1px solid #ddd;border-radius:var(--lkt-table-border-radius);width:100%;padding:10px;background-color:#f8f7e5;font-family:var(--lkt-table-font-family);font-size:13px;color:#444;text-align:var(--lkt-table-text-align)}.sortable-chosen{border:var(--lkt-table-border-sortable-chosen)}.sortable-chosen.ghost{background:var(--lkt-table-bg-sortable-chosen-ghost)}.lkt-table td.lkt-table-nav-cell{padding:0}.lkt-table-nav-container{display:flex;align-items:center;flex-direction:column;justify-content:center}.lkt-table-page-buttons{position:sticky;top:calc(-1 * var(--lkt-table-gap-buttons));display:flex;align-items:center;gap:var(--lkt-table-gap-buttons);transition:all linear .15s;background:transparent;z-index:2}.lkt-table-page-buttons-bottom{justify-content:center}.lkt-table-page-buttons>.switch-edition-mode{margin-left:auto}.lkt-table .lkt-table-col-drop{width:var(--lkt-table-width-col-drop);text-align:var(--lkt-table-text-align-col-drop)}
|
package/package.json
CHANGED
|
@@ -7,10 +7,12 @@ const emit = defineEmits(['click']);
|
|
|
7
7
|
|
|
8
8
|
const props = withDefaults(defineProps<{
|
|
9
9
|
disabled: boolean
|
|
10
|
-
text:
|
|
10
|
+
text: string
|
|
11
|
+
icon: string
|
|
11
12
|
}>(), {
|
|
12
13
|
disabled: false,
|
|
13
14
|
text: '',
|
|
15
|
+
icon: '',
|
|
14
16
|
});
|
|
15
17
|
|
|
16
18
|
const hasCreateButtonSlot = computed(() => {
|
|
@@ -31,13 +33,12 @@ const hasCreateButtonSlot = computed(() => {
|
|
|
31
33
|
<lkt-button
|
|
32
34
|
palette="table-create"
|
|
33
35
|
:disabled="disabled"
|
|
36
|
+
:icon="hasCreateButtonSlot ? '' : icon"
|
|
37
|
+
:text="hasCreateButtonSlot ? '' : computedText"
|
|
34
38
|
@click="emit('click')">
|
|
35
39
|
<template v-if="hasCreateButtonSlot">
|
|
36
40
|
<component
|
|
37
41
|
:is="createButtonSlot"/>
|
|
38
42
|
</template>
|
|
39
|
-
<template v-else>
|
|
40
|
-
<i class=""/> {{computedText}}
|
|
41
|
-
</template>
|
|
42
43
|
</lkt-button>
|
|
43
44
|
</template>
|
|
@@ -9,12 +9,14 @@ const emit = defineEmits(['click']);
|
|
|
9
9
|
const props = withDefaults(defineProps<{
|
|
10
10
|
disabled: boolean
|
|
11
11
|
text: string
|
|
12
|
+
icon: string
|
|
12
13
|
confirm: string
|
|
13
14
|
resource: string
|
|
14
15
|
resourceData: LktObject
|
|
15
16
|
}>(), {
|
|
16
17
|
disabled: false,
|
|
17
18
|
text: '',
|
|
19
|
+
icon: '',
|
|
18
20
|
confirm: '',
|
|
19
21
|
resource: '',
|
|
20
22
|
resourceData: () => ({}),
|
|
@@ -37,6 +39,8 @@ const hasButtonSlot = computed(() => {
|
|
|
37
39
|
<template>
|
|
38
40
|
<lkt-button
|
|
39
41
|
palette="table-delete"
|
|
42
|
+
:icon="hasButtonSlot ? '' : icon"
|
|
43
|
+
:text="hasButtonSlot ? '' : computedText"
|
|
40
44
|
:resource="resource"
|
|
41
45
|
:resource-data="resourceData"
|
|
42
46
|
:confirm-modal="confirm"
|
|
@@ -46,8 +50,5 @@ const hasButtonSlot = computed(() => {
|
|
|
46
50
|
<component
|
|
47
51
|
:is="buttonSlot"/>
|
|
48
52
|
</template>
|
|
49
|
-
<template v-else>
|
|
50
|
-
<i class=""/> {{computedText}}
|
|
51
|
-
</template>
|
|
52
53
|
</lkt-button>
|
|
53
54
|
</template>
|
|
@@ -54,7 +54,7 @@ const slotData = computed(() => {
|
|
|
54
54
|
<template>
|
|
55
55
|
<template v-if="column.type === 'link'">
|
|
56
56
|
<lkt-anchor
|
|
57
|
-
:
|
|
57
|
+
:to="column.getHref(item)"
|
|
58
58
|
>{{ getColumnDisplayContent(column, item, i) }}</lkt-anchor>
|
|
59
59
|
</template>
|
|
60
60
|
<template v-else-if="column.type === 'action'">
|
|
@@ -26,6 +26,7 @@ const props = withDefaults(defineProps<{
|
|
|
26
26
|
emptyColumns: string[]
|
|
27
27
|
dropConfirm: string
|
|
28
28
|
dropText: string
|
|
29
|
+
dropIcon: string
|
|
29
30
|
dropResource: string
|
|
30
31
|
}>(), {
|
|
31
32
|
modelValue: () => ({}),
|
|
@@ -42,6 +43,7 @@ const props = withDefaults(defineProps<{
|
|
|
42
43
|
emptyColumns: () => [],
|
|
43
44
|
dropConfirm: '',
|
|
44
45
|
dropText: '',
|
|
46
|
+
dropIcon: '',
|
|
45
47
|
dropResource: '',
|
|
46
48
|
});
|
|
47
49
|
|
|
@@ -147,6 +149,7 @@ watch(Item, (v) => {
|
|
|
147
149
|
:resource-data="Item"
|
|
148
150
|
:confirm="dropConfirm"
|
|
149
151
|
:text="dropText"
|
|
152
|
+
:icon="dropIcon"
|
|
150
153
|
@click="onClickDrop"/>
|
|
151
154
|
</td>
|
|
152
155
|
</tr>
|
|
@@ -31,6 +31,7 @@ const props = withDefaults(defineProps<{
|
|
|
31
31
|
|
|
32
32
|
|
|
33
33
|
page?: number
|
|
34
|
+
perms?: string[]
|
|
34
35
|
resource?: string
|
|
35
36
|
noResultsText?: string
|
|
36
37
|
title?: string
|
|
@@ -38,6 +39,7 @@ const props = withDefaults(defineProps<{
|
|
|
38
39
|
titleIcon?: string
|
|
39
40
|
wrapContentTag?: string
|
|
40
41
|
wrapContentClass?: string
|
|
42
|
+
itemsContainerClass?: string
|
|
41
43
|
filters?: LktObject[]
|
|
42
44
|
dataStateConfig?: LktObject
|
|
43
45
|
hiddenSave?: boolean
|
|
@@ -50,7 +52,9 @@ const props = withDefaults(defineProps<{
|
|
|
50
52
|
saveResourceData?: LktObject
|
|
51
53
|
saveText?: string
|
|
52
54
|
createText?: string
|
|
55
|
+
createIcon?: string
|
|
53
56
|
dropText?: string
|
|
57
|
+
dropIcon?: string
|
|
54
58
|
editModeText?: string
|
|
55
59
|
switchEditionEnabled?: boolean
|
|
56
60
|
canCreate?: boolean
|
|
@@ -58,6 +62,7 @@ const props = withDefaults(defineProps<{
|
|
|
58
62
|
dropConfirm?: string
|
|
59
63
|
dropResource?: string
|
|
60
64
|
addNavigation?: boolean
|
|
65
|
+
itemMode?: boolean
|
|
61
66
|
createEnabledValidator?: Function
|
|
62
67
|
}>(), {
|
|
63
68
|
modelValue: () => [],
|
|
@@ -71,6 +76,7 @@ const props = withDefaults(defineProps<{
|
|
|
71
76
|
|
|
72
77
|
|
|
73
78
|
page: 1,
|
|
79
|
+
perms: [],
|
|
74
80
|
resource: '',
|
|
75
81
|
noResultsText: 'No results',
|
|
76
82
|
title: '',
|
|
@@ -78,6 +84,7 @@ const props = withDefaults(defineProps<{
|
|
|
78
84
|
titleIcon: 'h2',
|
|
79
85
|
wrapContentTag: 'div',
|
|
80
86
|
wrapContentClass: '',
|
|
87
|
+
itemsContainerClass: '',
|
|
81
88
|
filters: () => [],
|
|
82
89
|
dataStateConfig: () => ({}),
|
|
83
90
|
hiddenSave: false,
|
|
@@ -90,7 +97,9 @@ const props = withDefaults(defineProps<{
|
|
|
90
97
|
saveResourceData: () => ({}),
|
|
91
98
|
saveText: 'Save',
|
|
92
99
|
dropText: 'Delete',
|
|
100
|
+
dropIcon: '',
|
|
93
101
|
createText: 'Add item',
|
|
102
|
+
createIcon: '',
|
|
94
103
|
editModeText: 'Edit mode',
|
|
95
104
|
switchEditionEnabled: false,
|
|
96
105
|
canCreate: false,
|
|
@@ -98,6 +107,7 @@ const props = withDefaults(defineProps<{
|
|
|
98
107
|
dropConfirm: '',
|
|
99
108
|
dropResource: '',
|
|
100
109
|
addNavigation: false,
|
|
110
|
+
itemMode: false,
|
|
101
111
|
createEnabledValidator: undefined,
|
|
102
112
|
});
|
|
103
113
|
|
|
@@ -111,11 +121,10 @@ const Sorter = ref(typeof props.sorter === 'function' ? props.sorter : defaultTa
|
|
|
111
121
|
tableBody = ref(null),
|
|
112
122
|
Columns = ref(props.columns);
|
|
113
123
|
|
|
114
|
-
let basePerms: string[] = [];
|
|
115
124
|
const Page = ref(props.page),
|
|
116
125
|
loading = ref(false),
|
|
117
126
|
firstLoadReady = ref(false),
|
|
118
|
-
perms = ref(
|
|
127
|
+
perms = ref(props.perms),
|
|
119
128
|
paginator = ref(null),
|
|
120
129
|
sortableObject = ref({}),
|
|
121
130
|
dataState = ref(new DataState({items: Items.value}, props.dataStateConfig)),
|
|
@@ -194,6 +203,7 @@ const emptyColumns = computed(() => {
|
|
|
194
203
|
return editModeEnabled.value;
|
|
195
204
|
}),
|
|
196
205
|
showEditionButtons = computed(() => {
|
|
206
|
+
// if (hasCreatePerm.value || hasUpdatePerm.value || hasDropPerm.value)
|
|
197
207
|
if (props.switchEditionEnabled) return true;
|
|
198
208
|
return showSaveButton.value || (editModeEnabled.value && props.canCreate);
|
|
199
209
|
}),
|
|
@@ -464,9 +474,10 @@ defineExpose({
|
|
|
464
474
|
</lkt-button>
|
|
465
475
|
|
|
466
476
|
<create-button
|
|
467
|
-
v-if="canCreate && editModeEnabled"
|
|
477
|
+
v-if="canCreate && hasCreatePerm && editModeEnabled"
|
|
468
478
|
:disabled="!createEnabled"
|
|
469
479
|
:text="createText"
|
|
480
|
+
:icon="createIcon"
|
|
470
481
|
@click="onClickAddItem"
|
|
471
482
|
/>
|
|
472
483
|
|
|
@@ -489,7 +500,7 @@ defineExpose({
|
|
|
489
500
|
<lkt-loader v-if="loading"/>
|
|
490
501
|
|
|
491
502
|
<div v-show="!loading && Items.length > 0" class="lkt-table" :data-sortable="sortable">
|
|
492
|
-
<table>
|
|
503
|
+
<table v-if="!itemMode">
|
|
493
504
|
<thead>
|
|
494
505
|
<tr>
|
|
495
506
|
<th v-if="sortable && editModeEnabled" data-role="drag-indicator"/>
|
|
@@ -533,6 +544,7 @@ defineExpose({
|
|
|
533
544
|
:drop-confirm="dropConfirm"
|
|
534
545
|
:drop-resource="dropResource"
|
|
535
546
|
:drop-text="dropText"
|
|
547
|
+
:drop-icon="dropIcon"
|
|
536
548
|
:edit-mode-enabled="editModeEnabled"
|
|
537
549
|
v-on:click="onClick"
|
|
538
550
|
v-on:show="show"
|
|
@@ -580,6 +592,20 @@ defineExpose({
|
|
|
580
592
|
</lkt-hidden-row>
|
|
581
593
|
</tbody>
|
|
582
594
|
</table>
|
|
595
|
+
|
|
596
|
+
<div v-else class="lkt-table-items-container" :class="itemsContainerClass">
|
|
597
|
+
<div class="lkt-table-item" v-for="(item, i) in Items">
|
|
598
|
+
<slot name="item"
|
|
599
|
+
v-bind:item="item"
|
|
600
|
+
v-bind:index="i"
|
|
601
|
+
v-bind:can-create="hasCreatePerm"
|
|
602
|
+
v-bind:can-read="hasReadPerm"
|
|
603
|
+
v-bind:can-update="hasUpdatePerm"
|
|
604
|
+
v-bind:can-drop="hasDropPerm"
|
|
605
|
+
v-bind:is-loading="loading"
|
|
606
|
+
/>
|
|
607
|
+
</div>
|
|
608
|
+
</div>
|
|
583
609
|
</div>
|
|
584
610
|
|
|
585
611
|
<div v-if="!!$slots['no-items']" class="lkt-empty-table">
|
|
@@ -591,11 +617,12 @@ defineExpose({
|
|
|
591
617
|
{{ noResultsText }}
|
|
592
618
|
</div>
|
|
593
619
|
|
|
594
|
-
<div v-if="canCreate && editModeEnabled" class="lkt-table-page-buttons lkt-table-page-buttons-bottom">
|
|
620
|
+
<div v-if="canCreate && hasCreatePerm && editModeEnabled" class="lkt-table-page-buttons lkt-table-page-buttons-bottom">
|
|
595
621
|
<create-button
|
|
596
|
-
v-if="canCreate && editModeEnabled"
|
|
622
|
+
v-if="canCreate && hasCreatePerm && editModeEnabled"
|
|
597
623
|
:disabled="!createEnabled"
|
|
598
624
|
:text="createText"
|
|
625
|
+
:icon="createIcon"
|
|
599
626
|
@click="onClickAddItem"
|
|
600
627
|
/>
|
|
601
628
|
</div>
|