quasar-ui-danx 0.4.26 → 0.4.28

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