quasar-ui-danx 0.4.27 → 0.4.29
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/README.md +35 -35
- package/dist/danx.es.js +24686 -24119
- package/dist/danx.es.js.map +1 -1
- package/dist/danx.umd.js +109 -109
- package/dist/danx.umd.js.map +1 -1
- package/dist/style.css +1 -1
- package/package.json +1 -1
- package/src/components/ActionTable/ActionTable.vue +29 -7
- package/src/components/ActionTable/Filters/FilterableField.vue +14 -2
- package/src/components/ActionTable/Form/ActionForm.vue +17 -12
- package/src/components/ActionTable/Form/Fields/DateField.vue +24 -20
- package/src/components/ActionTable/Form/Fields/DateRangeField.vue +57 -53
- package/src/components/ActionTable/Form/Fields/EditOnClickTextField.vue +9 -2
- package/src/components/ActionTable/Form/Fields/EditableDiv.vue +51 -21
- package/src/components/ActionTable/Form/Fields/FieldLabel.vue +1 -1
- package/src/components/ActionTable/Form/Fields/SelectField.vue +27 -6
- package/src/components/ActionTable/Form/Fields/SelectOrCreateField.vue +56 -0
- package/src/components/ActionTable/Form/Fields/TextField.vue +2 -0
- package/src/components/ActionTable/Form/Fields/index.ts +1 -0
- package/src/components/ActionTable/Form/RenderedForm.vue +7 -20
- package/src/components/ActionTable/Form/Utilities/MaxLengthCounter.vue +1 -1
- package/src/components/ActionTable/Form/Utilities/SaveStateIndicator.vue +37 -0
- package/src/components/ActionTable/Form/Utilities/index.ts +1 -0
- package/src/components/ActionTable/Layouts/ActionTableLayout.vue +20 -23
- package/src/components/ActionTable/Toolbars/ActionToolbar.vue +44 -36
- package/src/components/ActionTable/{listControls.ts → controls.ts} +13 -9
- package/src/components/ActionTable/index.ts +1 -1
- package/src/components/DragAndDrop/ListItemDraggable.vue +45 -31
- package/src/components/DragAndDrop/dragAndDrop.ts +221 -220
- package/src/components/DragAndDrop/listDragAndDrop.ts +269 -227
- package/src/components/PanelsDrawer/PanelsDrawer.vue +7 -7
- package/src/components/PanelsDrawer/PanelsDrawerTabs.vue +3 -3
- package/src/components/Utility/Buttons/ShowHideButton.vue +86 -0
- package/src/components/Utility/Buttons/index.ts +1 -0
- package/src/components/Utility/Dialogs/ActionFormDialog.vue +30 -0
- package/src/components/Utility/Dialogs/CreateNewWithNameDialog.vue +26 -0
- package/src/components/Utility/Dialogs/RenderedFormDialog.vue +50 -0
- package/src/components/Utility/Dialogs/index.ts +3 -0
- package/src/helpers/FileUpload.ts +4 -4
- package/src/helpers/actions.ts +84 -20
- package/src/helpers/files.ts +56 -43
- package/src/helpers/formats.ts +23 -20
- package/src/helpers/objectStore.ts +24 -12
- package/src/types/actions.d.ts +50 -26
- package/src/types/controls.d.ts +23 -25
- package/src/types/fields.d.ts +1 -0
- package/src/types/files.d.ts +2 -2
- package/src/types/index.d.ts +5 -0
- package/src/types/shared.d.ts +9 -0
- package/src/types/tables.d.ts +3 -3
- package/types/vue-shims.d.ts +3 -2
@@ -2,224 +2,225 @@
|
|
2
2
|
* Drag and Drop basic functionality for dragging elements and firing events on drag start, drag over and drag end
|
3
3
|
*/
|
4
4
|
export class DragAndDrop {
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
|
113
|
-
|
114
|
-
|
115
|
-
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
|
126
|
-
|
127
|
-
|
128
|
-
|
129
|
-
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
|
147
|
-
|
148
|
-
|
149
|
-
|
150
|
-
|
151
|
-
|
152
|
-
|
153
|
-
|
154
|
-
|
155
|
-
|
156
|
-
|
157
|
-
|
158
|
-
|
159
|
-
|
160
|
-
|
161
|
-
|
162
|
-
|
163
|
-
|
164
|
-
|
165
|
-
|
166
|
-
|
167
|
-
|
168
|
-
|
169
|
-
|
170
|
-
|
171
|
-
|
172
|
-
|
173
|
-
|
174
|
-
|
175
|
-
|
176
|
-
|
177
|
-
|
178
|
-
|
179
|
-
|
180
|
-
|
181
|
-
|
182
|
-
|
183
|
-
|
184
|
-
|
185
|
-
|
186
|
-
|
187
|
-
|
188
|
-
|
189
|
-
|
190
|
-
|
191
|
-
|
192
|
-
|
193
|
-
|
194
|
-
|
195
|
-
|
196
|
-
|
197
|
-
|
198
|
-
|
199
|
-
|
200
|
-
|
201
|
-
|
202
|
-
|
203
|
-
|
204
|
-
|
205
|
-
|
206
|
-
|
207
|
-
|
208
|
-
|
209
|
-
|
210
|
-
|
211
|
-
|
212
|
-
|
213
|
-
|
214
|
-
|
215
|
-
|
216
|
-
|
217
|
-
|
218
|
-
|
219
|
-
|
220
|
-
|
221
|
-
|
222
|
-
|
223
|
-
|
224
|
-
|
5
|
+
options: {
|
6
|
+
direction?: string,
|
7
|
+
hideDragImage?: boolean,
|
8
|
+
showPlaceholder?: boolean,
|
9
|
+
allowDropZoneChange?: boolean,
|
10
|
+
} = { direction: "vertical", hideDragImage: false };
|
11
|
+
|
12
|
+
// State
|
13
|
+
startY = 0;
|
14
|
+
startX = 0;
|
15
|
+
startSize = 0;
|
16
|
+
cursorY = 0;
|
17
|
+
cursorX = 0;
|
18
|
+
onStartCb = null;
|
19
|
+
onEndCb = null;
|
20
|
+
onDropCb = null;
|
21
|
+
onDraggingCb = null;
|
22
|
+
dropZoneResolver = null;
|
23
|
+
currentDropZone: HTMLElement | null = null;
|
24
|
+
draggableData = null;
|
25
|
+
// Used to abort dragging event listeners on the element
|
26
|
+
abortController = null;
|
27
|
+
|
28
|
+
constructor(options = {}) {
|
29
|
+
// Options
|
30
|
+
options = {
|
31
|
+
direction: "vertical",
|
32
|
+
hideDragImage: false,
|
33
|
+
...options
|
34
|
+
};
|
35
|
+
|
36
|
+
this.setOptions(options);
|
37
|
+
}
|
38
|
+
|
39
|
+
/**
|
40
|
+
* Set the options for the drag and drop instance
|
41
|
+
* @param options
|
42
|
+
* @returns {DragAndDrop}
|
43
|
+
*/
|
44
|
+
setOptions(options = {}) {
|
45
|
+
this.options = { ...this.options, ...options };
|
46
|
+
return this;
|
47
|
+
}
|
48
|
+
|
49
|
+
/**
|
50
|
+
* Returns if the list is stacked vertically or horizontally
|
51
|
+
* @returns {boolean}
|
52
|
+
*/
|
53
|
+
isVertical() {
|
54
|
+
return this.options.direction === "vertical";
|
55
|
+
}
|
56
|
+
|
57
|
+
/**
|
58
|
+
* Set the target drop zone for draggable elements
|
59
|
+
* @param dropZone
|
60
|
+
* @returns {DragAndDrop}
|
61
|
+
*/
|
62
|
+
setDropZone(dropZone) {
|
63
|
+
this.dropZoneResolver = dropZone;
|
64
|
+
return this;
|
65
|
+
}
|
66
|
+
|
67
|
+
/**
|
68
|
+
* Callback that fires when an element has started dragging
|
69
|
+
* @param cb
|
70
|
+
* @returns {DragAndDrop}
|
71
|
+
*/
|
72
|
+
onStart(cb) {
|
73
|
+
this.onStartCb = cb;
|
74
|
+
return this;
|
75
|
+
}
|
76
|
+
|
77
|
+
/**
|
78
|
+
* Callback that fires when an element has stopped dragging
|
79
|
+
* @param cb
|
80
|
+
* @returns {DragAndDrop}
|
81
|
+
*/
|
82
|
+
onEnd(cb) {
|
83
|
+
this.onEndCb = cb;
|
84
|
+
return this;
|
85
|
+
}
|
86
|
+
|
87
|
+
/**
|
88
|
+
* Callback that fires when the dragging element is moved
|
89
|
+
* @param cb
|
90
|
+
* @returns {DragAndDrop}
|
91
|
+
*/
|
92
|
+
onDragging(cb) {
|
93
|
+
this.onDraggingCb = cb;
|
94
|
+
return this;
|
95
|
+
}
|
96
|
+
|
97
|
+
/**
|
98
|
+
* Callback that fires when the dragging element has been dropped
|
99
|
+
* @param cb
|
100
|
+
* @returns {DragAndDrop}
|
101
|
+
*/
|
102
|
+
onDrop(cb) {
|
103
|
+
this.onDropCb = cb;
|
104
|
+
return this;
|
105
|
+
}
|
106
|
+
|
107
|
+
/**
|
108
|
+
* Start listening for drag events and prepare an element for drag/drop
|
109
|
+
* @param e
|
110
|
+
* @param data
|
111
|
+
*/
|
112
|
+
dragStart(e, data) {
|
113
|
+
this.currentDropZone = this.getDropZone(e);
|
114
|
+
|
115
|
+
if (this.currentDropZone) {
|
116
|
+
this.startY = e.clientY;
|
117
|
+
this.startX = e.clientX;
|
118
|
+
this.startSize = this.getDropZoneSize();
|
119
|
+
e.dataTransfer.effectAllowed = "move";
|
120
|
+
e.dataTransfer.dropEffect = "move";
|
121
|
+
this.draggableData = data;
|
122
|
+
this.abortController = new AbortController();
|
123
|
+
const options = { signal: this.abortController.signal };
|
124
|
+
document.addEventListener("dragenter", (e) => this.dragEnter(e), options);
|
125
|
+
document.addEventListener("dragover", (e) => this.dragOver(e), options);
|
126
|
+
document.addEventListener("drop", (e) => this.drop(e), options);
|
127
|
+
this.onStartCb && this.onStartCb(e);
|
128
|
+
|
129
|
+
if (this.options.hideDragImage) {
|
130
|
+
e.dataTransfer.setDragImage(new Image(), 0, 0);
|
131
|
+
}
|
132
|
+
} else {
|
133
|
+
console.error("Drop zone was not found", e, data);
|
134
|
+
}
|
135
|
+
}
|
136
|
+
|
137
|
+
/**
|
138
|
+
* Clean up event listeners after dragging is done
|
139
|
+
*/
|
140
|
+
dragEnd(e) {
|
141
|
+
this.currentDropZone = null;
|
142
|
+
this.abortController?.abort();
|
143
|
+
this.draggableData = null;
|
144
|
+
this.onEndCb && this.onEndCb(e);
|
145
|
+
}
|
146
|
+
|
147
|
+
/**
|
148
|
+
* The dragging element has entered a new target
|
149
|
+
* @param e
|
150
|
+
*/
|
151
|
+
dragEnter(e) {
|
152
|
+
e.preventDefault();
|
153
|
+
}
|
154
|
+
|
155
|
+
/**
|
156
|
+
* The dragging element is moving
|
157
|
+
* @param e
|
158
|
+
*/
|
159
|
+
dragOver(e) {
|
160
|
+
e.preventDefault();
|
161
|
+
this.cursorY = e.clientY;
|
162
|
+
this.cursorX = e.clientX;
|
163
|
+
this.onDraggingCb && this.onDraggingCb(e);
|
164
|
+
}
|
165
|
+
|
166
|
+
/**
|
167
|
+
* Handle dropping the element into its correct position
|
168
|
+
* @param e
|
169
|
+
*/
|
170
|
+
drop(e) {
|
171
|
+
e.dataTransfer.dropEffect = "move";
|
172
|
+
e.preventDefault();
|
173
|
+
this.onDropCb && this.onDropCb(e, this.draggableData);
|
174
|
+
}
|
175
|
+
|
176
|
+
/**
|
177
|
+
* Returns the drop zone if the current target element is or is inside the drop zone
|
178
|
+
* @param e
|
179
|
+
* @returns {HTMLElement|null}
|
180
|
+
*/
|
181
|
+
getDropZone(e) {
|
182
|
+
if (typeof this.dropZoneResolver === "string") {
|
183
|
+
let target = e.target;
|
184
|
+
while (target) {
|
185
|
+
if (target.dataset?.dropZone === this.dropZoneResolver) {
|
186
|
+
return target;
|
187
|
+
}
|
188
|
+
target = target.parentNode;
|
189
|
+
}
|
190
|
+
return null;
|
191
|
+
} else if (typeof this.dropZoneResolver === "function") {
|
192
|
+
return this.dropZoneResolver(e);
|
193
|
+
} else {
|
194
|
+
return document.body;
|
195
|
+
}
|
196
|
+
}
|
197
|
+
|
198
|
+
/**
|
199
|
+
* Returns the distance between the start and current cursor position
|
200
|
+
* @returns {number}
|
201
|
+
*/
|
202
|
+
getDistance() {
|
203
|
+
return this.isVertical()
|
204
|
+
? this.cursorY - this.startY
|
205
|
+
: this.cursorX - this.startX;
|
206
|
+
}
|
207
|
+
|
208
|
+
/**
|
209
|
+
* Returns the size of the drop zone
|
210
|
+
*/
|
211
|
+
getDropZoneSize() {
|
212
|
+
return this.isVertical()
|
213
|
+
? this.currentDropZone?.offsetHeight
|
214
|
+
: this.currentDropZone?.offsetWidth;
|
215
|
+
}
|
216
|
+
|
217
|
+
/**
|
218
|
+
* Returns the percent change between the start and current cursor position relative to the drop zone size
|
219
|
+
*
|
220
|
+
* @returns {number}
|
221
|
+
*/
|
222
|
+
getPercentChange() {
|
223
|
+
const distance = this.getDistance();
|
224
|
+
return (distance / this.startSize) * 100;
|
225
|
+
}
|
225
226
|
}
|