@oscarpalmer/oui 0.25.0 → 0.26.0
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/js/embedded-CHK82Uh5.d.mts +76 -0
- package/dist/js/{embedded-84gxpReS.d.mts → embedded-ai6cqURc.d.mts} +21 -17
- package/dist/js/floatable/embedded.d.mts +2 -2
- package/dist/js/floatable/embedded.mjs +27 -16
- package/dist/js/floatable/standalone.d.mts +2 -2
- package/dist/js/floatable/standalone.mjs +2 -2
- package/dist/js/focus-trap/embedded.d.mts +2 -2
- package/dist/js/focus-trap/embedded.mjs +157 -79
- package/dist/js/focus-trap/standalone.d.mts +2 -1
- package/dist/js/focus-trap/standalone.mjs +3 -3
- package/dist/js/index.d.mts +3 -2
- package/dist/js/index.mjs +4 -2
- package/dist/js/internal/draggable.d.mts +2 -2
- package/dist/js/internal/draggable.mjs +2 -2
- package/dist/js/{movable-BKFgoaOl.d.mts → movable-dNqBctx3.d.mts} +16 -16
- package/dist/js/movable.d.mts +2 -2
- package/dist/js/movable.mjs +4 -4
- package/dist/js/popover.d.mts +3 -3
- package/dist/js/popover.mjs +9 -9
- package/dist/js/sortable.d.mts +2 -2
- package/dist/js/sortable.mjs +4 -4
- package/dist/js/splitter.mjs +48 -47
- package/dist/js/toolbar.d.mts +1 -0
- package/dist/js/toolbar.mjs +107 -0
- package/dist/js/tooltip.d.mts +1 -1
- package/dist/js/tooltip.mjs +7 -7
- package/package.json +13 -1
- package/src/js/floatable/embedded.ts +65 -44
- package/src/js/floatable/standalone.ts +1 -1
- package/src/js/focus-trap/embedded.ts +219 -93
- package/src/js/focus-trap/standalone.ts +4 -2
- package/src/js/index.ts +1 -0
- package/src/js/internal/draggable.ts +20 -20
- package/src/js/movable.ts +17 -17
- package/src/js/popover.ts +18 -18
- package/src/js/sortable.ts +26 -26
- package/src/js/splitter.ts +98 -96
- package/src/js/toolbar.ts +214 -0
- package/src/js/tooltip.ts +14 -10
- package/dist/js/embedded-BpwzMSEF.d.mts +0 -26
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { EventPosition, PlainObject } from "@oscarpalmer/atoms/models";
|
|
2
2
|
|
|
3
3
|
//#region src/js/sortable.d.ts
|
|
4
|
-
declare class
|
|
4
|
+
declare class OuiSortable extends OuiDraggable {
|
|
5
5
|
connections: string | null;
|
|
6
6
|
origin: HTMLElement | undefined;
|
|
7
7
|
get dragged(): HTMLElement;
|
|
@@ -9,7 +9,7 @@ declare class Sortable extends Draggable {
|
|
|
9
9
|
}
|
|
10
10
|
//#endregion
|
|
11
11
|
//#region src/js/internal/draggable.d.ts
|
|
12
|
-
declare abstract class
|
|
12
|
+
declare abstract class OuiDraggable {
|
|
13
13
|
prefix: string;
|
|
14
14
|
element: HTMLElement;
|
|
15
15
|
options: DraggableOptions;
|
|
@@ -22,10 +22,10 @@ declare abstract class Draggable {
|
|
|
22
22
|
constructor(prefix: string, element: HTMLElement, options: DraggableOptions);
|
|
23
23
|
destroy(): void;
|
|
24
24
|
}
|
|
25
|
-
type DragBegin = (event: MouseEvent | TouchEvent, state: DraggableState, draggable:
|
|
26
|
-
type DragCancel = (state: DraggableState, draggable:
|
|
27
|
-
type DragEnd = (event: MouseEvent | TouchEvent, state: DraggableState, draggable:
|
|
28
|
-
type DragMove = (event: MouseEvent | TouchEvent, state: DraggableState, draggable:
|
|
25
|
+
type DragBegin = (event: MouseEvent | TouchEvent, state: DraggableState, draggable: OuiDraggable, element: HTMLElement, handle: HTMLElement, position: EventPosition) => void;
|
|
26
|
+
type DragCancel = (state: DraggableState, draggable: OuiDraggable) => void;
|
|
27
|
+
type DragEnd = (event: MouseEvent | TouchEvent, state: DraggableState, draggable: OuiDraggable, reset: () => void) => void;
|
|
28
|
+
type DragMove = (event: MouseEvent | TouchEvent, state: DraggableState, draggable: OuiDraggable, position: DragMovePosition) => PlainObject | undefined;
|
|
29
29
|
type DragMovePosition = {
|
|
30
30
|
calculated: EventPosition;
|
|
31
31
|
original: EventPosition;
|
|
@@ -35,8 +35,8 @@ type DraggableBound<Property extends keyof DraggableInstances = keyof DraggableI
|
|
|
35
35
|
property: Property;
|
|
36
36
|
};
|
|
37
37
|
type DraggableInstances = {
|
|
38
|
-
movable?:
|
|
39
|
-
sortable?:
|
|
38
|
+
movable?: OuiMovable;
|
|
39
|
+
sortable?: OuiSortable;
|
|
40
40
|
};
|
|
41
41
|
type DraggableOptions = {
|
|
42
42
|
container: DraggableOptionsContainer;
|
|
@@ -46,17 +46,17 @@ type DraggableOptions = {
|
|
|
46
46
|
};
|
|
47
47
|
type DraggableOptionsContainer = {
|
|
48
48
|
attribute: string;
|
|
49
|
-
map: Map<HTMLElement, Set<
|
|
49
|
+
map: Map<HTMLElement, Set<OuiDraggable>>;
|
|
50
50
|
onDestroy?: DraggableOptionsContainerOnDestroy;
|
|
51
51
|
onInitialize?: DraggableOptionsContainerOnInitialize;
|
|
52
52
|
};
|
|
53
|
-
type DraggableOptionsContainerOnDestroy = (draggable:
|
|
54
|
-
type DraggableOptionsContainerOnInitialize = (draggable:
|
|
53
|
+
type DraggableOptionsContainerOnDestroy = (draggable: OuiDraggable, container: HTMLElement, empty: boolean) => void;
|
|
54
|
+
type DraggableOptionsContainerOnInitialize = (draggable: OuiDraggable) => void;
|
|
55
55
|
type DraggableOptionsDirection = {
|
|
56
56
|
attribute: string;
|
|
57
57
|
onAfter?: DraggableOptionsDirectionOnAfter;
|
|
58
58
|
};
|
|
59
|
-
type DraggableOptionsDirectionOnAfter = (draggable:
|
|
59
|
+
type DraggableOptionsDirectionOnAfter = (draggable: OuiDraggable) => void;
|
|
60
60
|
type DraggableOptionsDrag = {
|
|
61
61
|
onBegin: DragBegin;
|
|
62
62
|
onCancel: DragCancel;
|
|
@@ -67,8 +67,8 @@ type DraggableOptionsPosition = {
|
|
|
67
67
|
getOffset: DraggableOptionsPositionGetOffset;
|
|
68
68
|
getOriginal: DraggableOptionsPositionGetOriginal;
|
|
69
69
|
};
|
|
70
|
-
type DraggableOptionsPositionGetOffset = (state: DraggableState, draggable:
|
|
71
|
-
type DraggableOptionsPositionGetOriginal = (state: DraggableState, draggable:
|
|
70
|
+
type DraggableOptionsPositionGetOffset = (state: DraggableState, draggable: OuiDraggable, element: HTMLElement, position: EventPosition) => EventPosition;
|
|
71
|
+
type DraggableOptionsPositionGetOriginal = (state: DraggableState, draggable: OuiDraggable, position: EventPosition) => EventPosition;
|
|
72
72
|
type DraggableState = {
|
|
73
73
|
container: DOMRect | undefined;
|
|
74
74
|
element: DraggableStateElement | undefined;
|
|
@@ -87,7 +87,7 @@ declare function removeDraggable<Property extends keyof DraggableInstances, Inst
|
|
|
87
87
|
}, element: HTMLElement): void;
|
|
88
88
|
//#endregion
|
|
89
89
|
//#region src/js/movable.d.ts
|
|
90
|
-
declare class
|
|
90
|
+
declare class OuiMovable extends OuiDraggable {
|
|
91
91
|
inset: string;
|
|
92
92
|
moved: boolean;
|
|
93
93
|
offset: Partial<EventPosition> | undefined;
|
|
@@ -98,4 +98,4 @@ declare class Movable extends Draggable {
|
|
|
98
98
|
destroy(): void;
|
|
99
99
|
}
|
|
100
100
|
//#endregion
|
|
101
|
-
export {
|
|
101
|
+
export { OuiDraggable as a, OuiSortable as c, DraggableState as i, DragMovePosition as n, addDraggable as o, DraggableBound as r, removeDraggable as s, OuiMovable as t };
|
package/dist/js/movable.d.mts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { t as
|
|
2
|
-
export {
|
|
1
|
+
import { t as OuiMovable } from "./movable-dNqBctx3.mjs";
|
|
2
|
+
export { OuiMovable };
|
package/dist/js/movable.mjs
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { attributable } from "./internal/attributable.mjs";
|
|
2
|
-
import {
|
|
2
|
+
import { OuiDraggable, addDraggable, removeDraggable } from "./internal/draggable.mjs";
|
|
3
3
|
import { getPosition, on } from "@oscarpalmer/toretto/event";
|
|
4
4
|
//#region src/js/movable.ts
|
|
5
|
-
var
|
|
5
|
+
var OuiMovable = class extends OuiDraggable {
|
|
6
6
|
inset;
|
|
7
7
|
moved = false;
|
|
8
8
|
offset;
|
|
@@ -142,11 +142,11 @@ const EVENT_END = "move:end";
|
|
|
142
142
|
const MOVED = /* @__PURE__ */ new Set();
|
|
143
143
|
const SELECTOR_HANDLE = `[${ATTRIBUTE}-handle]`;
|
|
144
144
|
const bound = {
|
|
145
|
-
constructor:
|
|
145
|
+
constructor: OuiMovable,
|
|
146
146
|
property: "movable"
|
|
147
147
|
};
|
|
148
148
|
const resizer = new ResizeObserver(onResize);
|
|
149
149
|
attributable(ATTRIBUTE, addDraggable.bind(bound), removeDraggable.bind(bound));
|
|
150
150
|
on(document, "scroll", onScroll);
|
|
151
151
|
//#endregion
|
|
152
|
-
export {
|
|
152
|
+
export { OuiMovable };
|
package/dist/js/popover.d.mts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { n as OuiFloatable } from "./embedded-
|
|
2
|
-
import { i as
|
|
1
|
+
import { n as OuiFloatable } from "./embedded-ai6cqURc.mjs";
|
|
2
|
+
import { i as OuiFocusTrap } from "./embedded-CHK82Uh5.mjs";
|
|
3
3
|
import { RemovableEventListener } from "@oscarpalmer/toretto/models";
|
|
4
4
|
|
|
5
5
|
//#region src/js/popover.d.ts
|
|
@@ -23,7 +23,7 @@ type OuiPopoverState = {
|
|
|
23
23
|
anchor: HTMLElement;
|
|
24
24
|
content: HTMLElement;
|
|
25
25
|
floatable: OuiFloatable;
|
|
26
|
-
focusTrap?:
|
|
26
|
+
focusTrap?: OuiFocusTrap;
|
|
27
27
|
listeners: RemovableEventListener[];
|
|
28
28
|
popover: OuiPopover;
|
|
29
29
|
};
|
package/dist/js/popover.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { createEmbeddedFloatable, getOnBeforeToggleListener } from "./floatable/embedded.mjs";
|
|
2
2
|
import { attributable } from "./internal/attributable.mjs";
|
|
3
3
|
import { createFocusTrap } from "./focus-trap/embedded.mjs";
|
|
4
4
|
import { on } from "@oscarpalmer/toretto/event";
|
|
@@ -29,6 +29,11 @@ var OuiPopover = class {
|
|
|
29
29
|
this.#state.floatable.show();
|
|
30
30
|
}
|
|
31
31
|
};
|
|
32
|
+
function addPopover(element) {
|
|
33
|
+
if (states.has(element) || element.hasAttribute("oui-floatable")) return;
|
|
34
|
+
const anchor = element.ownerDocument.querySelector(`[popovertarget="${element.id}"]`);
|
|
35
|
+
if (isHTMLOrSVGElement(anchor)) states.set(element, getState(anchor, element));
|
|
36
|
+
}
|
|
32
37
|
function destroyPopover(state) {
|
|
33
38
|
state.floatable.destroy();
|
|
34
39
|
state.focusTrap?.destroy();
|
|
@@ -53,7 +58,7 @@ function getState(anchor, content) {
|
|
|
53
58
|
const state = {
|
|
54
59
|
anchor,
|
|
55
60
|
content,
|
|
56
|
-
floatable:
|
|
61
|
+
floatable: createEmbeddedFloatable(anchor, content, options),
|
|
57
62
|
focusTrap: content.getAttribute(ARIA_MODAL) === TRUE ? createFocusTrap(content, { noescape: true }) : void 0,
|
|
58
63
|
listeners: [getOnBeforeToggleListener(content), on(content, EVENT_TOGGLE, (event) => {
|
|
59
64
|
if (event.newState === STATE_OPEN) {
|
|
@@ -71,15 +76,10 @@ function getState(anchor, content) {
|
|
|
71
76
|
state.popover = new OuiPopover(state);
|
|
72
77
|
return state;
|
|
73
78
|
}
|
|
74
|
-
function onAdd(element) {
|
|
75
|
-
if (states.has(element) || element.hasAttribute("oui-floatable")) return;
|
|
76
|
-
const anchor = element.ownerDocument.querySelector(`[popovertarget="${element.id}"]`);
|
|
77
|
-
if (isHTMLOrSVGElement(anchor)) states.set(element, getState(anchor, element));
|
|
78
|
-
}
|
|
79
79
|
function onPointerdown() {
|
|
80
80
|
ignoreFocus = true;
|
|
81
81
|
}
|
|
82
|
-
function
|
|
82
|
+
function removePopover(element) {
|
|
83
83
|
const state = states.get(element);
|
|
84
84
|
if (state == null) return;
|
|
85
85
|
destroyPopover(state);
|
|
@@ -98,6 +98,6 @@ const options = {
|
|
|
98
98
|
const states = /* @__PURE__ */ new WeakMap();
|
|
99
99
|
let ignoreFocus = false;
|
|
100
100
|
on(document, "pointerdown", onPointerdown, { capture: true });
|
|
101
|
-
attributable(ATTRIBUTE,
|
|
101
|
+
attributable(ATTRIBUTE, addPopover, removePopover);
|
|
102
102
|
//#endregion
|
|
103
103
|
export { getPopover };
|
package/dist/js/sortable.d.mts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { c as
|
|
2
|
-
export {
|
|
1
|
+
import { c as OuiSortable } from "./movable-dNqBctx3.mjs";
|
|
2
|
+
export { OuiSortable };
|
package/dist/js/sortable.mjs
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { attributable } from "./internal/attributable.mjs";
|
|
2
|
-
import {
|
|
2
|
+
import { OuiDraggable, addDraggable, removeDraggable } from "./internal/draggable.mjs";
|
|
3
3
|
import { getPosition } from "@oscarpalmer/toretto/event";
|
|
4
4
|
import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
|
|
5
5
|
import { findAncestor, getElementFromPosition } from "@oscarpalmer/toretto/find";
|
|
6
6
|
import { createElement } from "@oscarpalmer/toretto/create";
|
|
7
7
|
//#region src/js/sortable.ts
|
|
8
|
-
var
|
|
8
|
+
var OuiSortable = class extends OuiDraggable {
|
|
9
9
|
connections;
|
|
10
10
|
origin;
|
|
11
11
|
get dragged() {
|
|
@@ -230,7 +230,7 @@ const INSERT_BEFORE = "beforebegin";
|
|
|
230
230
|
const SELECTOR = `[${ATTRIBUTE}]`;
|
|
231
231
|
const SELECTOR_ITEM = `[${ATTRIBUTE}] > *`;
|
|
232
232
|
const bound = {
|
|
233
|
-
constructor:
|
|
233
|
+
constructor: OuiSortable,
|
|
234
234
|
property: "sortable"
|
|
235
235
|
};
|
|
236
236
|
const placeholder = {
|
|
@@ -242,4 +242,4 @@ const placeholder = {
|
|
|
242
242
|
};
|
|
243
243
|
attributable(ATTRIBUTE, addDraggable.bind(bound), removeDraggable.bind(bound));
|
|
244
244
|
//#endregion
|
|
245
|
-
export {
|
|
245
|
+
export { OuiSortable };
|
package/dist/js/splitter.mjs
CHANGED
|
@@ -10,6 +10,50 @@ const ATTRIBUTE_MAX = "max";
|
|
|
10
10
|
const ATTRIBUTE_MIN = "min";
|
|
11
11
|
const ATTRIBUTE_SIZE = "size";
|
|
12
12
|
const ATTRIBUTE_TYPE = "type";
|
|
13
|
+
var OuiSplitter = class {
|
|
14
|
+
element;
|
|
15
|
+
handle;
|
|
16
|
+
panels;
|
|
17
|
+
rectangle;
|
|
18
|
+
separator;
|
|
19
|
+
types;
|
|
20
|
+
values;
|
|
21
|
+
constructor(element, panels) {
|
|
22
|
+
this.element = element;
|
|
23
|
+
this.panels = panels;
|
|
24
|
+
if (isNullableOrWhitespace(element.id)) element.id = `oui_splitter_${++index}`;
|
|
25
|
+
this.values = getValues(element);
|
|
26
|
+
this.handle = createHandle();
|
|
27
|
+
this.rectangle = element.getBoundingClientRect();
|
|
28
|
+
this.separator = createSeparator(this);
|
|
29
|
+
this.separator.append(this.handle);
|
|
30
|
+
panels[0].insertAdjacentElement("afterend", this.separator);
|
|
31
|
+
this.updateOrientation();
|
|
32
|
+
this.updateValues();
|
|
33
|
+
}
|
|
34
|
+
updateConnections(add) {
|
|
35
|
+
const method = METHODS_CONNECT[add];
|
|
36
|
+
MAPPED_ELEMENTS[method](this.element, this);
|
|
37
|
+
MAPPED_ELEMENTS[method](this.handle, this);
|
|
38
|
+
MAPPED_ELEMENTS[method](this.separator, this);
|
|
39
|
+
if (this.types.auto) RESIZE_OBSERVER[METHODS_OBSERVE[add]](this.element);
|
|
40
|
+
}
|
|
41
|
+
updateOrientation() {
|
|
42
|
+
this.types = getTypes(this);
|
|
43
|
+
if (this.types.auto) RESIZE_OBSERVER.observe(this.element);
|
|
44
|
+
else RESIZE_OBSERVER.unobserve(this.element);
|
|
45
|
+
if (this.types.horizontal) this.element.setAttribute(ATTRIBUTE_HORIZONTAL, "");
|
|
46
|
+
else this.element.removeAttribute(ATTRIBUTE_HORIZONTAL);
|
|
47
|
+
setAriaOrientation(this);
|
|
48
|
+
}
|
|
49
|
+
updateValues() {
|
|
50
|
+
this.values = getValues(this.element);
|
|
51
|
+
requestAnimationFrame(() => {
|
|
52
|
+
setSize(this, this.values.now.current);
|
|
53
|
+
setAriaValue(this);
|
|
54
|
+
});
|
|
55
|
+
}
|
|
56
|
+
};
|
|
13
57
|
var OuiSplitterElement = class extends HTMLElement {
|
|
14
58
|
static observedAttributes = [
|
|
15
59
|
ATTRIBUTE_MAX,
|
|
@@ -45,8 +89,8 @@ var OuiSplitterElement = class extends HTMLElement {
|
|
|
45
89
|
constructor() {
|
|
46
90
|
super();
|
|
47
91
|
const panels = [...this.children].filter((child) => child instanceof HTMLElement);
|
|
48
|
-
if (panels.length !== 2) throw new Error(
|
|
49
|
-
this.#splitter = new
|
|
92
|
+
if (panels.length !== 2) throw new Error(MESSAGE);
|
|
93
|
+
this.#splitter = new OuiSplitter(this, panels);
|
|
50
94
|
}
|
|
51
95
|
connectedCallback() {
|
|
52
96
|
this.#splitter.updateConnections(1);
|
|
@@ -68,51 +112,6 @@ var OuiSplitterElement = class extends HTMLElement {
|
|
|
68
112
|
}
|
|
69
113
|
}
|
|
70
114
|
};
|
|
71
|
-
let index = 0;
|
|
72
|
-
var Splitter = class {
|
|
73
|
-
element;
|
|
74
|
-
handle;
|
|
75
|
-
panels;
|
|
76
|
-
rectangle;
|
|
77
|
-
separator;
|
|
78
|
-
types;
|
|
79
|
-
values;
|
|
80
|
-
constructor(element, panels) {
|
|
81
|
-
this.element = element;
|
|
82
|
-
this.panels = panels;
|
|
83
|
-
if (isNullableOrWhitespace(element.id)) element.id = `oui_splitter_${++index}`;
|
|
84
|
-
this.values = getValues(element);
|
|
85
|
-
this.handle = createHandle();
|
|
86
|
-
this.rectangle = element.getBoundingClientRect();
|
|
87
|
-
this.separator = createSeparator(this);
|
|
88
|
-
this.separator.append(this.handle);
|
|
89
|
-
panels[0].insertAdjacentElement("afterend", this.separator);
|
|
90
|
-
this.updateOrientation();
|
|
91
|
-
this.updateValues();
|
|
92
|
-
}
|
|
93
|
-
updateConnections(add) {
|
|
94
|
-
const method = METHODS_CONNECT[add];
|
|
95
|
-
MAPPED_ELEMENTS[method](this.element, this);
|
|
96
|
-
MAPPED_ELEMENTS[method](this.handle, this);
|
|
97
|
-
MAPPED_ELEMENTS[method](this.separator, this);
|
|
98
|
-
if (this.types.auto) RESIZE_OBSERVER[METHODS_OBSERVE[add]](this.element);
|
|
99
|
-
}
|
|
100
|
-
updateOrientation() {
|
|
101
|
-
this.types = getTypes(this);
|
|
102
|
-
if (this.types.auto) RESIZE_OBSERVER.observe(this.element);
|
|
103
|
-
else RESIZE_OBSERVER.unobserve(this.element);
|
|
104
|
-
if (this.types.horizontal) this.element.setAttribute(ATTRIBUTE_HORIZONTAL, "");
|
|
105
|
-
else this.element.removeAttribute(ATTRIBUTE_HORIZONTAL);
|
|
106
|
-
setAriaOrientation(this);
|
|
107
|
-
}
|
|
108
|
-
updateValues() {
|
|
109
|
-
this.values = getValues(this.element);
|
|
110
|
-
requestAnimationFrame(() => {
|
|
111
|
-
setSize(this, this.values.now.current);
|
|
112
|
-
setAriaValue(this);
|
|
113
|
-
});
|
|
114
|
-
}
|
|
115
|
-
};
|
|
116
115
|
function createHandle() {
|
|
117
116
|
const handle = document.createElement("span");
|
|
118
117
|
handle.setAttribute("aria-hidden", "true");
|
|
@@ -269,6 +268,7 @@ const KEYS_ALL = new Set([
|
|
|
269
268
|
...KEYS_VERTICAL
|
|
270
269
|
]);
|
|
271
270
|
const MAPPED_ELEMENTS = /* @__PURE__ */ new WeakMap();
|
|
271
|
+
const MESSAGE = `<${SELECTOR}> must have exactly two panels.`;
|
|
272
272
|
const METHODS_CONNECT = ["delete", "set"];
|
|
273
273
|
const METHODS_OBSERVE = ["unobserve", "observe"];
|
|
274
274
|
const NAVIGATION_MAXIMUM_PERCENTAGE = .9;
|
|
@@ -283,6 +283,7 @@ const STYLING_TOGGLER = toggleStyles(document.body, {
|
|
|
283
283
|
webkitUserSelect: "none"
|
|
284
284
|
});
|
|
285
285
|
const VALUE_DECIMALS = 6;
|
|
286
|
+
let index = 0;
|
|
286
287
|
let frame;
|
|
287
288
|
let splitter;
|
|
288
289
|
customElements.define(SELECTOR, OuiSplitterElement);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { };
|
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
import { attributable } from "./internal/attributable.mjs";
|
|
2
|
+
import { on } from "@oscarpalmer/toretto/event";
|
|
3
|
+
import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
|
|
4
|
+
import { clamp } from "@oscarpalmer/atoms/number";
|
|
5
|
+
import { findAncestor } from "@oscarpalmer/toretto/find";
|
|
6
|
+
//#region src/js/toolbar.ts
|
|
7
|
+
var OuiToolbar = class {
|
|
8
|
+
#state;
|
|
9
|
+
constructor(state) {
|
|
10
|
+
this.#state = state;
|
|
11
|
+
updateFocus(this.#state, false);
|
|
12
|
+
}
|
|
13
|
+
destroy() {
|
|
14
|
+
for (const listener of this.#state.listeners) listener();
|
|
15
|
+
this.#state.active = void 0;
|
|
16
|
+
this.#state.element = void 0;
|
|
17
|
+
this.#state.listeners = void 0;
|
|
18
|
+
}
|
|
19
|
+
};
|
|
20
|
+
function addToolbar(element) {
|
|
21
|
+
if (!instances.has(element)) instances.set(element, new OuiToolbar(getState(element)));
|
|
22
|
+
}
|
|
23
|
+
function getItems(element) {
|
|
24
|
+
return [...element.querySelectorAll(SELECTOR)].filter(isValidItem);
|
|
25
|
+
}
|
|
26
|
+
function getOrientation(element) {
|
|
27
|
+
const attribute = element.getAttribute(ARIA_ORIENTATION);
|
|
28
|
+
return ORIENTATIONS.has(attribute) ? attribute : ORIENTATION_HORIZONTAL;
|
|
29
|
+
}
|
|
30
|
+
function getState(element) {
|
|
31
|
+
const state = {
|
|
32
|
+
element,
|
|
33
|
+
active: { index: 0 },
|
|
34
|
+
listeners: [on(element, EVENT_FOCUSIN, (event) => {
|
|
35
|
+
onFocusin(state, event);
|
|
36
|
+
}), on(element, EVENT_KEYDOWN, (event) => {
|
|
37
|
+
onKeydown(state, event);
|
|
38
|
+
}, { passive: false })],
|
|
39
|
+
orientation: getOrientation(element)
|
|
40
|
+
};
|
|
41
|
+
return state;
|
|
42
|
+
}
|
|
43
|
+
function isValidItem(element) {
|
|
44
|
+
return PROPERTY_DISABLED in element ? element.disabled !== true : true;
|
|
45
|
+
}
|
|
46
|
+
function onKeydown(state, event) {
|
|
47
|
+
if (!KEYS_ALL.has(event.key)) return;
|
|
48
|
+
const items = getItems(state.element);
|
|
49
|
+
if (items.length === 0) return;
|
|
50
|
+
let index;
|
|
51
|
+
if (KEYS_ABSOLUTE.has(event.key)) index = event.key === KEY_HOME ? 0 : items.length - 1;
|
|
52
|
+
else if (state.orientation === ORIENTATION_HORIZONTAL ? KEYS_HORIZONTAL.has(event.key) : KEYS_VERTICAL.has(event.key)) {
|
|
53
|
+
if (state.active.element instanceof HTMLSelectElement) event.preventDefault();
|
|
54
|
+
index = clamp(state.active.index + (KEYS_NEXT.has(event.key) ? 1 : -1), 0, items.length - 1, true);
|
|
55
|
+
}
|
|
56
|
+
if (index == null || index === state.active.index) return;
|
|
57
|
+
state.active.element = items[index];
|
|
58
|
+
state.active.index = index;
|
|
59
|
+
updateFocus(state, true, items);
|
|
60
|
+
}
|
|
61
|
+
function onFocusin(state, event) {
|
|
62
|
+
const item = findAncestor(event, SELECTOR);
|
|
63
|
+
if (!isHTMLOrSVGElement(item) || !isValidItem(item)) return;
|
|
64
|
+
const items = getItems(state.element);
|
|
65
|
+
const index = items.indexOf(item);
|
|
66
|
+
if (index === -1) return;
|
|
67
|
+
state.active.element = item;
|
|
68
|
+
state.active.index = index;
|
|
69
|
+
updateFocus(state, false, items);
|
|
70
|
+
}
|
|
71
|
+
function removeToolbar(element) {
|
|
72
|
+
instances.get(element)?.destroy();
|
|
73
|
+
instances.delete(element);
|
|
74
|
+
}
|
|
75
|
+
function updateFocus(state, focus, items) {
|
|
76
|
+
const updated = items ?? getItems(state.element);
|
|
77
|
+
const { length } = updated;
|
|
78
|
+
if (length === 0) return;
|
|
79
|
+
for (let index = 0; index < length; index += 1) updated[index].tabIndex = index === state.active.index ? 0 : -1;
|
|
80
|
+
state.active.element ??= updated[state.active.index];
|
|
81
|
+
if (focus) state.active.element?.focus();
|
|
82
|
+
}
|
|
83
|
+
const ARIA_ORIENTATION = "aria-orientation";
|
|
84
|
+
const ATTRIBUTE = "oui-toolbar";
|
|
85
|
+
const EVENT_KEYDOWN = "keydown";
|
|
86
|
+
const EVENT_FOCUSIN = "focusin";
|
|
87
|
+
const KEY_ARROW_DOWN = "ArrowDown";
|
|
88
|
+
const KEY_ARROW_RIGHT = "ArrowRight";
|
|
89
|
+
const KEY_END = "End";
|
|
90
|
+
const KEY_HOME = "Home";
|
|
91
|
+
const KEYS_ABSOLUTE = new Set([KEY_END, KEY_HOME]);
|
|
92
|
+
const KEYS_HORIZONTAL = new Set([KEY_ARROW_RIGHT, "ArrowLeft"]);
|
|
93
|
+
const KEYS_VERTICAL = new Set([KEY_ARROW_DOWN, "ArrowUp"]);
|
|
94
|
+
const KEYS_ALL = new Set([
|
|
95
|
+
...KEYS_ABSOLUTE,
|
|
96
|
+
...KEYS_HORIZONTAL,
|
|
97
|
+
...KEYS_VERTICAL
|
|
98
|
+
]);
|
|
99
|
+
const KEYS_NEXT = new Set([KEY_ARROW_DOWN, KEY_ARROW_RIGHT]);
|
|
100
|
+
const ORIENTATION_HORIZONTAL = "horizontal";
|
|
101
|
+
const ORIENTATIONS = new Set([ORIENTATION_HORIZONTAL, "vertical"]);
|
|
102
|
+
const PROPERTY_DISABLED = "disabled";
|
|
103
|
+
const SELECTOR = `[${ATTRIBUTE}-item]`;
|
|
104
|
+
const instances = /* @__PURE__ */ new WeakMap();
|
|
105
|
+
attributable(ATTRIBUTE, addToolbar, removeToolbar);
|
|
106
|
+
//#endregion
|
|
107
|
+
export {};
|
package/dist/js/tooltip.d.mts
CHANGED
package/dist/js/tooltip.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { createEmbeddedFloatable } from "./floatable/embedded.mjs";
|
|
2
2
|
import { attributable } from "./internal/attributable.mjs";
|
|
3
3
|
import { on } from "@oscarpalmer/toretto/event";
|
|
4
4
|
import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
|
|
@@ -57,6 +57,9 @@ function activate(event, focus) {
|
|
|
57
57
|
});
|
|
58
58
|
}, shouldDelay ? delay : 0);
|
|
59
59
|
}
|
|
60
|
+
function addTooltip(element) {
|
|
61
|
+
if (!states.has(element)) createTooltip(element);
|
|
62
|
+
}
|
|
60
63
|
function closeTooltip(state) {
|
|
61
64
|
if (state == null) return;
|
|
62
65
|
if (state.timer != null) clearTimeout(state.timer);
|
|
@@ -120,7 +123,7 @@ function getState(anchor, content) {
|
|
|
120
123
|
const state = {
|
|
121
124
|
anchor,
|
|
122
125
|
content,
|
|
123
|
-
floatable:
|
|
126
|
+
floatable: createEmbeddedFloatable(anchor, content, options),
|
|
124
127
|
tooltip: null
|
|
125
128
|
};
|
|
126
129
|
state.tooltip = new OuiTooltip(state);
|
|
@@ -129,9 +132,6 @@ function getState(anchor, content) {
|
|
|
129
132
|
function getTooltip(element) {
|
|
130
133
|
return states.get(element)?.tooltip;
|
|
131
134
|
}
|
|
132
|
-
function onAdd(element) {
|
|
133
|
-
if (!states.has(element)) createTooltip(element);
|
|
134
|
-
}
|
|
135
135
|
function onFocusin(event) {
|
|
136
136
|
activate(event, true);
|
|
137
137
|
}
|
|
@@ -148,7 +148,7 @@ function onFocusout() {
|
|
|
148
148
|
function onPointermove(event) {
|
|
149
149
|
activate(event, false);
|
|
150
150
|
}
|
|
151
|
-
function
|
|
151
|
+
function removeTooltip(element) {
|
|
152
152
|
const state = states.get(element);
|
|
153
153
|
if (state == null) return;
|
|
154
154
|
destroyTooltip(state);
|
|
@@ -187,6 +187,6 @@ let focusTimer;
|
|
|
187
187
|
on(document, "focusin", onFocusin);
|
|
188
188
|
on(document, "focusout", onFocusout);
|
|
189
189
|
on(document, "pointermove", onPointermove);
|
|
190
|
-
attributable(ATTRIBUTE,
|
|
190
|
+
attributable(ATTRIBUTE, addTooltip, removeTooltip);
|
|
191
191
|
//#endregion
|
|
192
192
|
export { getTooltip, setTooltipDelay };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@oscarpalmer/oui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.26.0",
|
|
4
4
|
"description": "Styles, components, and utilities for building websites and applications.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"css",
|
|
@@ -33,6 +33,14 @@
|
|
|
33
33
|
"types": "./dist/js/index.d.mts",
|
|
34
34
|
"default": "./dist/js/index.mjs"
|
|
35
35
|
},
|
|
36
|
+
"./dialog": {
|
|
37
|
+
"types": "./dist/js/dialog.d.mts",
|
|
38
|
+
"default": "./dist/js/dialog.mjs"
|
|
39
|
+
},
|
|
40
|
+
"./floatable": {
|
|
41
|
+
"types": "./dist/js/floatable/standalone.d.mts",
|
|
42
|
+
"default": "./dist/js/floatable/standalone.mjs"
|
|
43
|
+
},
|
|
36
44
|
"./focus-trap": {
|
|
37
45
|
"types": "./dist/js/focus-trap/standalone.d.mts",
|
|
38
46
|
"default": "./dist/js/focus-trap/standalone.mjs"
|
|
@@ -53,6 +61,10 @@
|
|
|
53
61
|
"types": "./dist/js/splitter.d.mts",
|
|
54
62
|
"default": "./dist/js/splitter.mjs"
|
|
55
63
|
},
|
|
64
|
+
"./toolbar": {
|
|
65
|
+
"types": "./dist/js/toolbar.d.mts",
|
|
66
|
+
"default": "./dist/js/toolbar.mjs"
|
|
67
|
+
},
|
|
56
68
|
"./tooltip": {
|
|
57
69
|
"types": "./dist/js/tooltip.d.mts",
|
|
58
70
|
"default": "./dist/js/tooltip.mjs"
|