quasar-ui-danx 0.2.31 → 0.2.32
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/danx.es.js +647 -605
- package/dist/danx.es.js.map +1 -1
- package/dist/danx.umd.js +5 -5
- package/dist/danx.umd.js.map +1 -1
- package/package.json +1 -1
- package/src/components/ActionTable/ActionTable.vue +9 -45
- package/src/components/ActionTable/ActionTableHeaderColumn.vue +82 -0
- package/src/components/ActionTable/index.ts +1 -0
package/package.json
CHANGED
@@ -34,22 +34,12 @@
|
|
34
34
|
/>
|
35
35
|
</template>
|
36
36
|
<template #header-cell="rowProps">
|
37
|
-
<
|
38
|
-
|
39
|
-
:props="rowProps"
|
40
|
-
:
|
41
|
-
:
|
42
|
-
|
43
|
-
{{ rowProps.col.label }}
|
44
|
-
<HandleDraggable
|
45
|
-
v-if="rowProps.col.resizeable"
|
46
|
-
:drop-zone="`resize-column-` + rowProps.col.name"
|
47
|
-
:class="cls['resize-handle']"
|
48
|
-
@resize="onResizeColumn(rowProps.col, $event)"
|
49
|
-
>
|
50
|
-
<RowResizeIcon class="w-4 text-gray-600" />
|
51
|
-
</HandleDraggable>
|
52
|
-
</QTh>
|
37
|
+
<ActionTableHeaderColumn
|
38
|
+
v-model="columnSettings"
|
39
|
+
:row-props="rowProps"
|
40
|
+
:name="name"
|
41
|
+
@update:model-value="onUpdateColumnSettings"
|
42
|
+
/>
|
53
43
|
</template>
|
54
44
|
<template #body-cell="rowProps">
|
55
45
|
<ActionTableColumn
|
@@ -65,13 +55,12 @@
|
|
65
55
|
</template>
|
66
56
|
|
67
57
|
<script setup>
|
68
|
-
import { QTable
|
58
|
+
import { QTable } from "quasar";
|
69
59
|
import { ref } from "vue";
|
70
60
|
import { getItem, setItem } from "../../helpers";
|
71
|
-
import { DragHandleIcon as RowResizeIcon } from "../../svg";
|
72
|
-
import { HandleDraggable } from "../DragAndDrop";
|
73
61
|
import { ActionVnode } from "../Utility";
|
74
62
|
import ActionTableColumn from "./ActionTableColumn.vue";
|
63
|
+
import ActionTableHeaderColumn from "./ActionTableHeaderColumn";
|
75
64
|
import EmptyTableState from "./EmptyTableState.vue";
|
76
65
|
import { mapSortBy, registerStickyScrolling } from "./listHelpers";
|
77
66
|
import TableSummaryRow from "./TableSummaryRow.vue";
|
@@ -118,32 +107,7 @@ registerStickyScrolling(actionTable);
|
|
118
107
|
|
119
108
|
const COLUMN_SETTINGS_KEY = `column-settings-${props.name}`;
|
120
109
|
const columnSettings = ref(getItem(COLUMN_SETTINGS_KEY) || {});
|
121
|
-
function
|
122
|
-
columnSettings.value = {
|
123
|
-
...columnSettings.value,
|
124
|
-
[column.name]: {
|
125
|
-
width: Math.max(Math.min(val.distance + val.startDropZoneSize, column.maxWidth || 500), column.minWidth || 80)
|
126
|
-
}
|
127
|
-
};
|
110
|
+
function onUpdateColumnSettings() {
|
128
111
|
setItem(COLUMN_SETTINGS_KEY, columnSettings.value);
|
129
112
|
}
|
130
113
|
</script>
|
131
|
-
|
132
|
-
<style lang="scss" module="cls">
|
133
|
-
.handle-drop-zone {
|
134
|
-
.resize-handle {
|
135
|
-
position: absolute;
|
136
|
-
top: 0;
|
137
|
-
right: -.45em;
|
138
|
-
width: .9em;
|
139
|
-
opacity: 0;
|
140
|
-
transition: all .3s;
|
141
|
-
}
|
142
|
-
|
143
|
-
&:hover {
|
144
|
-
.resize-handle {
|
145
|
-
opacity: 1;
|
146
|
-
}
|
147
|
-
}
|
148
|
-
}
|
149
|
-
</style>
|
@@ -0,0 +1,82 @@
|
|
1
|
+
<template>
|
2
|
+
<QTh
|
3
|
+
:key="rowProps.key"
|
4
|
+
:props="rowProps"
|
5
|
+
:data-drop-zone="isResizeable && `resize-column-` + column.name"
|
6
|
+
:class="isResizeable && cls['handle-drop-zone']"
|
7
|
+
:style="columnStyle"
|
8
|
+
>
|
9
|
+
{{ column.label }}
|
10
|
+
<HandleDraggable
|
11
|
+
v-if="isResizeable"
|
12
|
+
:drop-zone="`resize-column-` + column.name"
|
13
|
+
:class="cls['resize-handle']"
|
14
|
+
@resize="onResizeColumn"
|
15
|
+
>
|
16
|
+
<RowResizeIcon class="w-4 text-gray-600" />
|
17
|
+
</HandleDraggable>
|
18
|
+
</QTh>
|
19
|
+
</template>
|
20
|
+
<script setup>
|
21
|
+
import { QTh } from "quasar";
|
22
|
+
import { computed } from "vue";
|
23
|
+
import { DragHandleIcon as RowResizeIcon } from "../../svg";
|
24
|
+
import { HandleDraggable } from "../DragAndDrop";
|
25
|
+
|
26
|
+
const emit = defineEmits(["update:model-value"]);
|
27
|
+
const props = defineProps({
|
28
|
+
modelValue: {
|
29
|
+
type: Object,
|
30
|
+
required: true
|
31
|
+
},
|
32
|
+
name: {
|
33
|
+
type: String,
|
34
|
+
required: true
|
35
|
+
},
|
36
|
+
rowProps: {
|
37
|
+
type: Object,
|
38
|
+
required: true
|
39
|
+
}
|
40
|
+
});
|
41
|
+
|
42
|
+
const column = computed(() => props.rowProps.col);
|
43
|
+
const isResizeable = computed(() => column.value.resizeable);
|
44
|
+
|
45
|
+
const columnStyle = computed(() => {
|
46
|
+
const width = props.settings?.width || column.value.width;
|
47
|
+
return {
|
48
|
+
width: width ? `${width}px` : undefined,
|
49
|
+
minWidth: column.value.minWidth ? `${column.value.minWidth}px` : undefined
|
50
|
+
};
|
51
|
+
});
|
52
|
+
|
53
|
+
|
54
|
+
function onResizeColumn(val) {
|
55
|
+
const settings = {
|
56
|
+
...props.modelValue,
|
57
|
+
[column.value.name]: {
|
58
|
+
width: Math.max(Math.min(val.distance + val.startDropZoneSize, column.value.maxWidth || 500), column.value.minWidth || 80)
|
59
|
+
}
|
60
|
+
};
|
61
|
+
emit("update:model-value", settings);
|
62
|
+
}
|
63
|
+
</script>
|
64
|
+
|
65
|
+
<style lang="scss" module="cls">
|
66
|
+
.handle-drop-zone {
|
67
|
+
.resize-handle {
|
68
|
+
position: absolute;
|
69
|
+
top: 0;
|
70
|
+
right: -.45em;
|
71
|
+
width: .9em;
|
72
|
+
opacity: 0;
|
73
|
+
transition: all .3s;
|
74
|
+
}
|
75
|
+
|
76
|
+
&:hover {
|
77
|
+
.resize-handle {
|
78
|
+
opacity: 1;
|
79
|
+
}
|
80
|
+
}
|
81
|
+
}
|
82
|
+
</style>
|
@@ -8,5 +8,6 @@ export * from "./tableColumns";
|
|
8
8
|
export { default as ActionMenu } from "./ActionMenu.vue";
|
9
9
|
export { default as ActionTable } from "./ActionTable.vue";
|
10
10
|
export { default as ActionTableColumn } from "./ActionTableColumn.vue";
|
11
|
+
export { default as ActionTableHeaderColumn } from "./ActionTableHeaderColumn.vue";
|
11
12
|
export { default as EmptyTableState } from "./EmptyTableState.vue";
|
12
13
|
export { default as TableSummaryRow } from "./TableSummaryRow.vue";
|