@ulu/frontend 0.1.0-beta.82 → 0.1.0-beta.83
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/CHANGELOG.md +12 -3
- package/dist/ulu-frontend.min.js +17 -17
- package/docs-dev/demos/card/index.html +16 -16
- package/docs-dev/demos/data-table/index.html +100 -100
- package/docs-dev/javascript/ui-resizer/index.html +212 -16
- package/js/ui/modal-builder.js +2 -2
- package/js/ui/resizer.js +331 -112
- package/js/utils/font-awesome.js +1 -1
- package/package.json +1 -1
- package/types/ui/dialog.d.ts.map +1 -1
- package/types/ui/resizer.d.ts +85 -12
- package/types/ui/resizer.d.ts.map +1 -1
package/types/ui/resizer.d.ts
CHANGED
|
@@ -1,3 +1,6 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Class for creating/controlling a container size with a handle/control
|
|
3
|
+
*/
|
|
1
4
|
export class Resizer {
|
|
2
5
|
static defaults: {
|
|
3
6
|
debug: boolean;
|
|
@@ -23,33 +26,103 @@ export class Resizer {
|
|
|
23
26
|
* - Default null
|
|
24
27
|
*/
|
|
25
28
|
fromY: "top" | "bottom" | null;
|
|
29
|
+
/**
|
|
30
|
+
* The step in pixels for keyboard resizing with arrow keys.
|
|
31
|
+
*/
|
|
32
|
+
keyboardStep: number;
|
|
33
|
+
/**
|
|
34
|
+
* Debounce time in milliseconds for ending a keyboard resize.
|
|
35
|
+
*/
|
|
36
|
+
keyboardDebounceTime: number;
|
|
37
|
+
/**
|
|
38
|
+
* If true, the Resizer instance will automatically bind its own DOM event listeners
|
|
39
|
+
* (pointerdown, keydown) to the control element. If `false`, the user is
|
|
40
|
+
* responsible for calling `resizerInstance.onPointerdown(event)` and
|
|
41
|
+
* `resizerInstance.onKeydown(event)` from their own listeners.
|
|
42
|
+
* Default: true
|
|
43
|
+
*/
|
|
44
|
+
manageEvents: boolean;
|
|
45
|
+
/**
|
|
46
|
+
* If true, the Resizer instance will automatically manage the `aria-label`
|
|
47
|
+
* attribute of the control element. If `false`, the user is responsible
|
|
48
|
+
* for setting this attribute.
|
|
49
|
+
* Default: false
|
|
50
|
+
*/
|
|
51
|
+
manageAriaLabel: boolean;
|
|
52
|
+
/**
|
|
53
|
+
* If true, pointer events (mouse/touch) will enable resizing.
|
|
54
|
+
* Default: true
|
|
55
|
+
*/
|
|
56
|
+
enablePointerResizing: boolean;
|
|
57
|
+
/**
|
|
58
|
+
* If true, keyboard events (arrow keys) will enable resizing.
|
|
59
|
+
* Default: true
|
|
60
|
+
*/
|
|
61
|
+
enableKeyboardResizing: boolean;
|
|
26
62
|
};
|
|
27
63
|
/**
|
|
28
64
|
* @param {Node} container Container to be resized
|
|
29
|
-
* @param {
|
|
30
|
-
* @param {Object}
|
|
31
|
-
* @param {Boolean}
|
|
32
|
-
* @param {Boolean}
|
|
33
|
-
* @param {
|
|
34
|
-
* @param {"
|
|
65
|
+
* @param {HTMLElement} control Resize handle element (should be focusable like a button)
|
|
66
|
+
* @param {Object} config Options to configure the resizer.
|
|
67
|
+
* @param {Boolean} [config.debug=false] Enable non-essential debugging logs.
|
|
68
|
+
* @param {Boolean} [config.multiplier=1] Amount to increase size by (ie. pointer movement * multiplier).
|
|
69
|
+
* @param {Boolean} [config.overrideMaxDimensions=false] When script is activated by handle, remove the element's max-width/max-height and allow the resize to exceed them.
|
|
70
|
+
* @param {"left"|"right"|null} [config.fromX=null] Horizontal resizing direction.
|
|
71
|
+
* @param {"top"|"bottom"|null} [config.fromY=null] Vertical resizing direction.
|
|
72
|
+
* @param {number} [config.keyboardStep=10] The step in pixels for keyboard resizing.
|
|
73
|
+
* @param {number} [config.keyboardDebounceTime=200] Debounce time for keyboard resize end.
|
|
74
|
+
* @param {boolean} [config.manageEvents=true] If true, the Resizer will automatically bind its own events.
|
|
75
|
+
* @param {boolean} [config.manageAriaLabel=false] If true, the Resizer will manage the control's aria-label.
|
|
76
|
+
* @param {boolean} [config.enablePointerResizing=true] If true, pointer events will enable resizing.
|
|
77
|
+
* @param {boolean} [config.enableKeyboardResizing=true] If true, keyboard events will enable resizing.
|
|
35
78
|
*/
|
|
36
|
-
constructor(container: Node, control:
|
|
37
|
-
debug
|
|
38
|
-
|
|
79
|
+
constructor(container: Node, control: HTMLElement, config: {
|
|
80
|
+
debug?: boolean;
|
|
81
|
+
multiplier?: boolean;
|
|
82
|
+
overrideMaxDimensions?: boolean;
|
|
39
83
|
fromX?: "left" | "right" | null;
|
|
40
84
|
fromY?: "top" | "bottom" | null;
|
|
85
|
+
keyboardStep?: number;
|
|
86
|
+
keyboardDebounceTime?: number;
|
|
87
|
+
manageEvents?: boolean;
|
|
88
|
+
manageAriaLabel?: boolean;
|
|
89
|
+
enablePointerResizing?: boolean;
|
|
90
|
+
enableKeyboardResizing?: boolean;
|
|
41
91
|
});
|
|
42
92
|
options: any;
|
|
43
93
|
container: Node;
|
|
44
|
-
control:
|
|
94
|
+
control: HTMLElement;
|
|
45
95
|
debug: any;
|
|
46
96
|
resizeHorizontal: boolean;
|
|
47
97
|
resizeVertical: boolean;
|
|
48
98
|
/**
|
|
49
|
-
* Cleans up event listeners to prevent memory leaks.
|
|
99
|
+
* Cleans up event listeners and internal state to prevent memory leaks.
|
|
50
100
|
*/
|
|
51
101
|
destroy(): void;
|
|
52
|
-
|
|
102
|
+
/**
|
|
103
|
+
* Public handler for pointerdown events. Call this method from your own event listeners
|
|
104
|
+
* if `manageEvents` is false. Its logic will only execute if `enablePointerResizing` is true.
|
|
105
|
+
* @param {PointerEvent} e The pointerdown event.
|
|
106
|
+
*/
|
|
107
|
+
onPointerdown(e: PointerEvent): void;
|
|
108
|
+
/**
|
|
109
|
+
* Public handler for keydown events. Call this method from your own event listeners
|
|
110
|
+
* if `manageEvents` is false. Its logic will only execute if `enableKeyboardResizing` is true.
|
|
111
|
+
* @param {KeyboardEvent} e The keydown event.
|
|
112
|
+
*/
|
|
113
|
+
onKeydown(e: KeyboardEvent): void;
|
|
114
|
+
/**
|
|
115
|
+
* Generates an accessible label for the resize control based on its configuration.
|
|
116
|
+
* This is a convenience function that can be used by the consumer if `manageAriaLabel` is false.
|
|
117
|
+
* @returns {string} The suggested aria-label for the control.
|
|
118
|
+
*/
|
|
119
|
+
getAriaLabel(): string;
|
|
120
|
+
/**
|
|
121
|
+
* Dispatches a custom event on the container element.
|
|
122
|
+
* @param {string} type The event type (e.g., "resizer:start", "resizer:update", "resizer:end").
|
|
123
|
+
* @param {Object} [data={}] Optional data to attach to the event's detail property.
|
|
124
|
+
*/
|
|
125
|
+
dispatchEvent(type: string, data?: any): void;
|
|
53
126
|
#private;
|
|
54
127
|
}
|
|
55
128
|
//# sourceMappingURL=resizer.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"resizer.d.ts","sourceRoot":"","sources":["../../js/ui/resizer.js"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"resizer.d.ts","sourceRoot":"","sources":["../../js/ui/resizer.js"],"names":[],"mappings":"AAUA;;GAEG;AACH;IACE;;QAEE;;WAEG;;QAEH;;WAEG;;QAEH;;;;;WAKG;eAJO,MAAM,GAAC,OAAO,GAAC,IAAI;QAM7B;;;;;WAKG;eAJO,KAAK,GAAC,QAAQ,GAAC,IAAI;QAM7B;;WAEG;;QAEH;;WAEG;;QAEH;;;;;;WAMG;;QAEH;;;;;WAKG;;QAEH;;;WAGG;;QAEH;;;WAGG;;MAEH;IAaF;;;;;;;;;;;;;;;OAeG;IACH,uBAfW,IAAI,WACJ,WAAW;QAEM,KAAK;QACL,UAAU;QACV,qBAAqB;QACT,KAAK,GAAlC,MAAM,GAAC,OAAO,GAAC,IAAI;QACU,KAAK,GAAlC,KAAK,GAAC,QAAQ,GAAC,IAAI;QACH,YAAY,GAA5B,MAAM;QACU,oBAAoB,GAApC,MAAM;QACW,YAAY,GAA7B,OAAO;QACU,eAAe,GAAhC,OAAO;QACU,qBAAqB,GAAtC,OAAO;QACU,sBAAsB,GAAvC,OAAO;OAmDjB;IA3CC,aAAsB;IACtB,gBAA0B;IAC1B,qBAAsB;IACtB,WAA0B;IAmB1B,0BAA8C;IAC9C,wBAA4C;IAqC9C;;OAEG;IACH,gBAsBC;IAwGD;;;;OAIG;IACH,iBAFW,YAAY,QAyCtB;IAED;;;;OAIG;IACH,aAFW,aAAa,QA4DvB;IAED;;;;OAIG;IACH,gBAFa,MAAM,CAYlB;IAED;;;;OAIG;IACH,oBAHW,MAAM,oBAKhB;;CACF"}
|