@tachui/data 0.8.1-alpha → 0.8.8
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 +2 -2
- package/dist/List.js +2794 -202
- package/dist/Menu.js +157 -159
- package/dist/index.js +0 -1
- package/dist/list/List.d.ts +8 -1
- package/dist/list/List.d.ts.map +1 -1
- package/dist/list/index.js +0 -1
- package/dist/menu/Menu.d.ts +5 -0
- package/dist/menu/Menu.d.ts.map +1 -1
- package/dist/menu/index.js +0 -1
- package/package.json +8 -5
- package/dist/List.js.map +0 -1
- package/dist/Menu.js.map +0 -1
- package/dist/index.js.map +0 -1
- package/dist/list/index.js.map +0 -1
- package/dist/menu/index.js.map +0 -1
package/dist/Menu.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
var
|
|
2
|
-
var E = (
|
|
3
|
-
var
|
|
4
|
-
import { createSignal as
|
|
5
|
-
const
|
|
1
|
+
var k = Object.defineProperty;
|
|
2
|
+
var E = (l, e, i) => e in l ? k(l, e, { enumerable: !0, configurable: !0, writable: !0, value: i }) : l[e] = i;
|
|
3
|
+
var c = (l, e, i) => E(l, typeof e != "symbol" ? e + "" : e, i);
|
|
4
|
+
import { createSignal as b, useLifecycle as v, isSignal as I, setupPositioning as F, h as m, createEffect as w, withModifiers as A, AnimationManager as O, FocusManager as C } from "@tachui/core";
|
|
5
|
+
const g = {
|
|
6
6
|
colors: {
|
|
7
7
|
background: "#FFFFFF",
|
|
8
8
|
surface: "#F8F9FA",
|
|
@@ -29,20 +29,23 @@ const f = {
|
|
|
29
29
|
shadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
|
|
30
30
|
backdropBlur: "blur(2px)"
|
|
31
31
|
};
|
|
32
|
-
class
|
|
32
|
+
class T {
|
|
33
33
|
constructor(e) {
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
34
|
+
c(this, "type", "component");
|
|
35
|
+
c(this, "id");
|
|
36
|
+
c(this, "props");
|
|
37
|
+
c(this, "cleanup", []);
|
|
38
|
+
c(this, "theme", g);
|
|
39
|
+
c(this, "isOpenSignal", b(!1));
|
|
40
|
+
c(this, "focusedIndex", -1);
|
|
41
|
+
c(this, "menuElement", null);
|
|
42
|
+
c(this, "triggerElement", null);
|
|
43
|
+
c(this, "visibilityEffectInitialized", !1);
|
|
44
|
+
c(this, "hideFallbackTimeout", null);
|
|
45
|
+
c(this, "pendingPositionTask", null);
|
|
46
|
+
c(this, "handleKeyDown", (e) => {
|
|
44
47
|
if (!this.isOpen()) return;
|
|
45
|
-
const
|
|
48
|
+
const i = this.getVisibleItems();
|
|
46
49
|
switch (e.key) {
|
|
47
50
|
case "Escape":
|
|
48
51
|
(this.props.escapeKeyCloses ?? !0) && (e.preventDefault(), this.setIsOpenValue(!1));
|
|
@@ -50,7 +53,7 @@ class A {
|
|
|
50
53
|
case "ArrowDown":
|
|
51
54
|
e.preventDefault(), this.focusedIndex = Math.min(
|
|
52
55
|
this.focusedIndex + 1,
|
|
53
|
-
|
|
56
|
+
i.length - 1
|
|
54
57
|
), this.updateItemFocus();
|
|
55
58
|
break;
|
|
56
59
|
case "ArrowUp":
|
|
@@ -58,7 +61,7 @@ class A {
|
|
|
58
61
|
break;
|
|
59
62
|
case "Enter":
|
|
60
63
|
case " ":
|
|
61
|
-
if (this.focusedIndex >= 0 && this.focusedIndex <
|
|
64
|
+
if (this.focusedIndex >= 0 && this.focusedIndex < i.length) {
|
|
62
65
|
e.preventDefault();
|
|
63
66
|
const t = this.menuElement?.querySelector(
|
|
64
67
|
`[data-menu-item-index="${this.focusedIndex}"]`
|
|
@@ -70,29 +73,31 @@ class A {
|
|
|
70
73
|
e.preventDefault(), this.focusedIndex = 0, this.updateItemFocus();
|
|
71
74
|
break;
|
|
72
75
|
case "End":
|
|
73
|
-
e.preventDefault(), this.focusedIndex =
|
|
76
|
+
e.preventDefault(), this.focusedIndex = i.length - 1, this.updateItemFocus();
|
|
74
77
|
break;
|
|
75
78
|
}
|
|
76
79
|
});
|
|
77
|
-
|
|
80
|
+
c(this, "handleClickOutside", (e) => {
|
|
78
81
|
if (!(this.props.closeOnClickOutside ?? !0)) return;
|
|
79
|
-
const
|
|
80
|
-
!t && !
|
|
82
|
+
const i = e.target, t = this.menuElement?.contains(i), n = this.triggerElement?.contains(i);
|
|
83
|
+
!t && !n && this.setIsOpenValue(!1);
|
|
81
84
|
});
|
|
82
|
-
|
|
85
|
+
c(this, "setIsOpenValue", (e) => {
|
|
83
86
|
this.props.isOpen ? typeof this.props.isOpen == "function" && this.props.isOpen(e) : this.setIsOpen(e);
|
|
84
87
|
});
|
|
85
88
|
this.props = e, this.id = `menu-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`, this.props.isOpen && (this.isOpenSignal = [
|
|
86
89
|
this.props.isOpen,
|
|
87
|
-
((
|
|
90
|
+
((i) => {
|
|
88
91
|
typeof this.props.isOpen == "function" && this.props.isOpen(
|
|
89
|
-
typeof
|
|
92
|
+
typeof i == "function" ? i(this.props.isOpen()) : i
|
|
90
93
|
);
|
|
91
94
|
})
|
|
92
|
-
]),
|
|
93
|
-
onDOMReady: (
|
|
95
|
+
]), v(this, {
|
|
96
|
+
onDOMReady: (i, t) => {
|
|
94
97
|
t && (this.setupMenuPositioning(t), this.setupMenuAnimations(t));
|
|
95
98
|
}
|
|
99
|
+
}), this.cleanup.push(() => {
|
|
100
|
+
document.removeEventListener("keydown", this.handleKeyDown), document.removeEventListener("click", this.handleClickOutside), this.hideFallbackTimeout && (clearTimeout(this.hideFallbackTimeout), this.hideFallbackTimeout = null), this.pendingPositionTask !== null && (typeof cancelAnimationFrame == "function" ? cancelAnimationFrame(this.pendingPositionTask) : clearTimeout(this.pendingPositionTask), this.pendingPositionTask = null);
|
|
96
101
|
});
|
|
97
102
|
}
|
|
98
103
|
get isOpen() {
|
|
@@ -108,11 +113,11 @@ class A {
|
|
|
108
113
|
* Set up menu positioning using enhanced lifecycle (ENHANCED Phase 3)
|
|
109
114
|
*/
|
|
110
115
|
setupMenuPositioning(e) {
|
|
111
|
-
this.cleanup || (this.cleanup = []),
|
|
116
|
+
this.cleanup || (this.cleanup = []), F(
|
|
112
117
|
this,
|
|
113
118
|
`[data-menu-trigger="${this.id}"]`,
|
|
114
119
|
`[data-menu-content="${this.id}"]`,
|
|
115
|
-
(
|
|
120
|
+
(i, t) => this.calculatePosition(i, t)
|
|
116
121
|
);
|
|
117
122
|
}
|
|
118
123
|
/**
|
|
@@ -124,9 +129,9 @@ class A {
|
|
|
124
129
|
getVisibleItems() {
|
|
125
130
|
return this.props.items.filter((e) => e.title !== "---");
|
|
126
131
|
}
|
|
127
|
-
createMenuItem(e,
|
|
132
|
+
createMenuItem(e, i) {
|
|
128
133
|
if (e.title === "---")
|
|
129
|
-
return
|
|
134
|
+
return m("div", {
|
|
130
135
|
role: "separator",
|
|
131
136
|
style: {
|
|
132
137
|
height: "1px",
|
|
@@ -134,11 +139,11 @@ class A {
|
|
|
134
139
|
margin: `${this.theme.spacing.gap}px 0`
|
|
135
140
|
}
|
|
136
141
|
});
|
|
137
|
-
const t = this.resolveValue(e.disabled ?? !1),
|
|
142
|
+
const t = this.resolveValue(e.disabled ?? !1), n = this.resolveValue(e.title), h = m("div", {
|
|
138
143
|
role: "menuitem",
|
|
139
144
|
tabindex: t ? "-1" : "0",
|
|
140
145
|
"aria-disabled": t,
|
|
141
|
-
"data-menu-item-index":
|
|
146
|
+
"data-menu-item-index": i,
|
|
142
147
|
style: {
|
|
143
148
|
display: "flex",
|
|
144
149
|
alignItems: "center",
|
|
@@ -153,31 +158,31 @@ class A {
|
|
|
153
158
|
transition: "all 150ms ease-out",
|
|
154
159
|
userSelect: "none"
|
|
155
160
|
},
|
|
156
|
-
onclick: async (
|
|
161
|
+
onclick: async (d) => {
|
|
157
162
|
if (!t) {
|
|
158
|
-
if (
|
|
163
|
+
if (d.preventDefault(), d.stopPropagation(), e.action)
|
|
159
164
|
try {
|
|
160
165
|
await e.action();
|
|
161
|
-
} catch (
|
|
162
|
-
console.error("Menu item action failed:",
|
|
166
|
+
} catch (a) {
|
|
167
|
+
console.error("Menu item action failed:", a);
|
|
163
168
|
}
|
|
164
169
|
(this.props.closeOnSelect ?? !0) && this.setIsOpenValue(!1);
|
|
165
170
|
}
|
|
166
171
|
},
|
|
167
172
|
onmouseenter: () => {
|
|
168
173
|
if (!t) {
|
|
169
|
-
this.focusedIndex =
|
|
170
|
-
const
|
|
171
|
-
|
|
174
|
+
this.focusedIndex = i, this.updateItemFocus();
|
|
175
|
+
const d = h.element;
|
|
176
|
+
d && (d.style.backgroundColor = this.theme.colors.hover);
|
|
172
177
|
}
|
|
173
178
|
},
|
|
174
179
|
onmouseleave: () => {
|
|
175
180
|
if (!t) {
|
|
176
|
-
const
|
|
177
|
-
|
|
181
|
+
const d = h.element;
|
|
182
|
+
d && (d.style.backgroundColor = "transparent");
|
|
178
183
|
}
|
|
179
184
|
}
|
|
180
|
-
}),
|
|
185
|
+
}), s = m("div", {
|
|
181
186
|
style: {
|
|
182
187
|
display: "flex",
|
|
183
188
|
alignItems: "center",
|
|
@@ -185,107 +190,112 @@ class A {
|
|
|
185
190
|
}
|
|
186
191
|
});
|
|
187
192
|
if (e.systemImage) {
|
|
188
|
-
const
|
|
193
|
+
const a = m("span", {
|
|
189
194
|
style: {
|
|
190
195
|
fontSize: "16px",
|
|
191
196
|
color: "inherit"
|
|
192
197
|
}
|
|
193
198
|
}).element;
|
|
194
|
-
|
|
195
|
-
const
|
|
196
|
-
|
|
199
|
+
a && (a.textContent = e.systemImage);
|
|
200
|
+
const f = s.element;
|
|
201
|
+
f && a && f.appendChild(a);
|
|
197
202
|
}
|
|
198
|
-
const
|
|
199
|
-
|
|
200
|
-
const
|
|
201
|
-
|
|
202
|
-
const
|
|
203
|
-
if (
|
|
204
|
-
const
|
|
203
|
+
const o = m("span").element;
|
|
204
|
+
o && (o.textContent = n);
|
|
205
|
+
const r = s.element;
|
|
206
|
+
r && o && r.appendChild(o);
|
|
207
|
+
const p = h.element;
|
|
208
|
+
if (p && r && p.appendChild(r), e.shortcut) {
|
|
209
|
+
const a = m("span", {
|
|
205
210
|
style: {
|
|
206
211
|
fontSize: "12px",
|
|
207
212
|
color: this.theme.colors.shortcut,
|
|
208
213
|
fontFamily: "monospace"
|
|
209
214
|
}
|
|
210
215
|
}).element;
|
|
211
|
-
|
|
216
|
+
a && (a.textContent = e.shortcut ?? ""), p && a && p.appendChild(a);
|
|
212
217
|
}
|
|
213
218
|
if (e.submenu && e.submenu.length > 0) {
|
|
214
|
-
const
|
|
219
|
+
const a = m("span", {
|
|
215
220
|
style: {
|
|
216
221
|
fontSize: "12px",
|
|
217
222
|
color: this.theme.colors.textSecondary
|
|
218
223
|
}
|
|
219
224
|
}).element;
|
|
220
|
-
|
|
225
|
+
a && (a.textContent = "▶"), p && a && p.appendChild(a);
|
|
221
226
|
}
|
|
222
|
-
return
|
|
227
|
+
return h;
|
|
223
228
|
}
|
|
224
229
|
updateItemFocus() {
|
|
225
230
|
if (!this.menuElement) return;
|
|
226
|
-
this.menuElement.querySelectorAll('[role="menuitem"]').forEach((
|
|
227
|
-
const
|
|
228
|
-
t === this.focusedIndex ? (
|
|
231
|
+
this.menuElement.querySelectorAll('[role="menuitem"]').forEach((i, t) => {
|
|
232
|
+
const n = i;
|
|
233
|
+
t === this.focusedIndex ? (n.style.backgroundColor = this.theme.colors.hover, n.focus()) : n.style.backgroundColor = "transparent";
|
|
229
234
|
});
|
|
230
235
|
}
|
|
231
|
-
calculatePosition(e,
|
|
232
|
-
const t = e.getBoundingClientRect(),
|
|
236
|
+
calculatePosition(e, i) {
|
|
237
|
+
const t = e.getBoundingClientRect(), n = i.getBoundingClientRect(), h = {
|
|
233
238
|
width: window.innerWidth,
|
|
234
239
|
height: window.innerHeight
|
|
235
|
-
},
|
|
236
|
-
let
|
|
237
|
-
switch (
|
|
240
|
+
}, s = this.props.placement ?? "bottom", u = this.props.offset ?? { x: 0, y: 4 };
|
|
241
|
+
let o = 0, r = 0;
|
|
242
|
+
switch (s) {
|
|
238
243
|
case "bottom":
|
|
239
244
|
case "bottom-start":
|
|
240
245
|
case "bottom-end":
|
|
241
|
-
|
|
246
|
+
r = t.bottom + u.y;
|
|
242
247
|
break;
|
|
243
248
|
case "top":
|
|
244
249
|
case "top-start":
|
|
245
250
|
case "top-end":
|
|
246
|
-
|
|
251
|
+
r = t.top - n.height - u.y;
|
|
247
252
|
break;
|
|
248
253
|
case "right":
|
|
249
254
|
case "right-start":
|
|
250
255
|
case "right-end":
|
|
251
|
-
|
|
256
|
+
o = t.right + u.x;
|
|
252
257
|
break;
|
|
253
258
|
case "left":
|
|
254
259
|
case "left-start":
|
|
255
260
|
case "left-end":
|
|
256
|
-
|
|
261
|
+
o = t.left - n.width - u.x;
|
|
257
262
|
break;
|
|
258
263
|
}
|
|
259
|
-
switch (
|
|
264
|
+
switch (s) {
|
|
260
265
|
case "bottom":
|
|
261
266
|
case "top":
|
|
262
|
-
|
|
267
|
+
o = t.left + (t.width - n.width) / 2;
|
|
263
268
|
break;
|
|
264
269
|
case "bottom-start":
|
|
265
270
|
case "top-start":
|
|
266
|
-
|
|
271
|
+
o = t.left;
|
|
267
272
|
break;
|
|
268
273
|
case "bottom-end":
|
|
269
274
|
case "top-end":
|
|
270
|
-
|
|
275
|
+
o = t.right - n.width;
|
|
271
276
|
break;
|
|
272
277
|
case "right":
|
|
273
278
|
case "left":
|
|
274
|
-
|
|
279
|
+
r = t.top + (t.height - n.height) / 2;
|
|
275
280
|
break;
|
|
276
281
|
case "right-start":
|
|
277
282
|
case "left-start":
|
|
278
|
-
|
|
283
|
+
r = t.top;
|
|
279
284
|
break;
|
|
280
285
|
case "right-end":
|
|
281
286
|
case "left-end":
|
|
282
|
-
|
|
287
|
+
r = t.bottom - n.height;
|
|
283
288
|
break;
|
|
284
289
|
}
|
|
285
|
-
|
|
290
|
+
const p = s.startsWith("bottom") || s.startsWith("top"), d = s.startsWith("left") || s.startsWith("right");
|
|
291
|
+
if (this.props.flip ?? !0) {
|
|
292
|
+
const a = r + n.height > h.height, f = r < 0, x = o + n.width > h.width, y = o < 0;
|
|
293
|
+
a && s.startsWith("bottom") ? r = t.top - n.height - u.y : f && s.startsWith("top") && (r = t.bottom + u.y), x && p ? o = t.right - n.width : y && p && (o = t.left), x && s.startsWith("right") ? o = t.left - n.width - u.x : y && s.startsWith("left") && (o = t.right + u.x), d && (a ? r = t.bottom - n.height : f && (r = t.top));
|
|
294
|
+
}
|
|
295
|
+
return (this.props.shift ?? !0) && (o = Math.max(8, Math.min(o, h.width - n.width - 8)), r = Math.max(8, Math.min(r, h.height - n.height - 8))), { x: o, y: r };
|
|
286
296
|
}
|
|
287
297
|
createMenuContent() {
|
|
288
|
-
const e =
|
|
298
|
+
const e = m("div", {
|
|
289
299
|
role: "menu",
|
|
290
300
|
"aria-labelledby": `${this.id}-trigger`,
|
|
291
301
|
"data-menu-id": this.id,
|
|
@@ -307,85 +317,74 @@ class A {
|
|
|
307
317
|
transition: `all ${this.props.animationDuration || 150}ms cubic-bezier(0.16, 1, 0.3, 1)`
|
|
308
318
|
}
|
|
309
319
|
});
|
|
310
|
-
return this.props.items.forEach((
|
|
311
|
-
const
|
|
312
|
-
|
|
320
|
+
return this.props.items.forEach((i, t) => {
|
|
321
|
+
const n = this.createMenuItem(i, t), h = e.element, s = n.element;
|
|
322
|
+
h && s && h.appendChild(s);
|
|
313
323
|
}), this.menuElement = e.element, e;
|
|
314
324
|
}
|
|
315
325
|
setupTrigger() {
|
|
316
326
|
let e;
|
|
317
327
|
if (typeof this.props.trigger == "function") {
|
|
318
|
-
const
|
|
319
|
-
if ("render" in
|
|
320
|
-
const t =
|
|
328
|
+
const i = this.props.trigger();
|
|
329
|
+
if ("render" in i) {
|
|
330
|
+
const t = i.render();
|
|
321
331
|
Array.isArray(t) ? e = t[0]?.element : e = t instanceof HTMLElement ? t : t?.element;
|
|
322
332
|
} else
|
|
323
|
-
e =
|
|
333
|
+
e = i;
|
|
324
334
|
} else if ("render" in this.props.trigger) {
|
|
325
|
-
const
|
|
326
|
-
Array.isArray(
|
|
335
|
+
const i = this.props.trigger.render();
|
|
336
|
+
Array.isArray(i) ? e = i[0]?.element : e = i instanceof HTMLElement ? i : i?.element;
|
|
327
337
|
} else
|
|
328
338
|
e = this.props.trigger;
|
|
329
|
-
return e.id = e.id || `${this.id}-trigger`, e.setAttribute("aria-haspopup", "menu"), e.setAttribute("aria-expanded", String(this.isOpen())), e.setAttribute("data-menu-trigger", this.id), e.addEventListener("click", (
|
|
330
|
-
|
|
331
|
-
}), this.triggerElement = e, e;
|
|
339
|
+
return e.id = e.id || `${this.id}-trigger`, e.setAttribute("aria-haspopup", "menu"), e.setAttribute("aria-expanded", String(this.isOpen())), e.setAttribute("data-menu-trigger", this.id), e.__tachuiMenuClickBound || (e.addEventListener("click", (i) => {
|
|
340
|
+
i.preventDefault(), i.stopPropagation(), this.setIsOpenValue(!this.isOpen());
|
|
341
|
+
}), e.__tachuiMenuClickBound = !0), this.triggerElement = e, e;
|
|
332
342
|
}
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
343
|
+
schedulePositionAndAnimation(e) {
|
|
344
|
+
this.pendingPositionTask !== null && (typeof cancelAnimationFrame == "function" ? cancelAnimationFrame(this.pendingPositionTask) : clearTimeout(this.pendingPositionTask), this.pendingPositionTask = null);
|
|
345
|
+
const i = () => {
|
|
346
|
+
if (this.pendingPositionTask = null, !this.triggerElement || !e.isConnected)
|
|
347
|
+
return;
|
|
348
|
+
const t = this.calculatePosition(this.triggerElement, e);
|
|
349
|
+
e.style.left = `${t.x}px`, e.style.top = `${t.y}px`, O.scaleIn(this, e, this.props.animationDuration || 150), this.focusedIndex = 0, C.focusWhenReady(this, '[role="menuitem"]', e);
|
|
350
|
+
};
|
|
351
|
+
typeof requestAnimationFrame == "function" ? this.pendingPositionTask = requestAnimationFrame(i) : this.pendingPositionTask = setTimeout(i, 0);
|
|
352
|
+
}
|
|
353
|
+
ensureVisibilityEffect() {
|
|
354
|
+
if (this.visibilityEffectInitialized) return;
|
|
355
|
+
this.visibilityEffectInitialized = !0;
|
|
356
|
+
const e = w(() => {
|
|
341
357
|
if (this.isOpen()) {
|
|
342
|
-
const
|
|
343
|
-
|
|
344
|
-
const a = this.calculatePosition(
|
|
345
|
-
this.triggerElement,
|
|
346
|
-
this.menuElement
|
|
347
|
-
);
|
|
348
|
-
this.menuElement.style.left = `${a.x}px`, this.menuElement.style.top = `${a.y}px`, O.scaleIn(
|
|
349
|
-
this,
|
|
350
|
-
this.menuElement,
|
|
351
|
-
this.props.animationDuration || 150
|
|
352
|
-
), this.focusedIndex = 0, w.focusWhenReady(
|
|
353
|
-
this,
|
|
354
|
-
'[role="menuitem"]',
|
|
355
|
-
this.menuElement
|
|
356
|
-
);
|
|
357
|
-
}
|
|
358
|
-
document.addEventListener("keydown", this.handleKeyDown), document.addEventListener("click", this.handleClickOutside), this.triggerElement?.setAttribute("aria-expanded", "true");
|
|
358
|
+
const n = this.createMenuContent().element;
|
|
359
|
+
n && (document.body.appendChild(n), this.menuElement = n), this.menuElement && this.schedulePositionAndAnimation(this.menuElement), document.addEventListener("keydown", this.handleKeyDown), document.addEventListener("click", this.handleClickOutside), this.triggerElement?.setAttribute("aria-expanded", "true");
|
|
359
360
|
} else {
|
|
360
361
|
if (this.menuElement) {
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
i
|
|
366
|
-
);
|
|
362
|
+
const t = this.menuElement;
|
|
363
|
+
t.style.opacity = "0", t.style.transform = "scale(0.95)";
|
|
364
|
+
const n = () => {
|
|
365
|
+
t.removeEventListener("transitionend", n), t.parentNode && document.body.removeChild(t), this.menuElement === t && (this.menuElement = null);
|
|
367
366
|
};
|
|
368
|
-
this.
|
|
369
|
-
"transitionend",
|
|
370
|
-
i
|
|
371
|
-
);
|
|
372
|
-
const s = setTimeout(() => {
|
|
373
|
-
this.menuElement?.removeEventListener(
|
|
374
|
-
"transitionend",
|
|
375
|
-
i
|
|
376
|
-
), i();
|
|
367
|
+
t.addEventListener("transitionend", n), this.hideFallbackTimeout && clearTimeout(this.hideFallbackTimeout), this.hideFallbackTimeout = setTimeout(() => {
|
|
368
|
+
t.removeEventListener("transitionend", n), n(), this.hideFallbackTimeout = null;
|
|
377
369
|
}, this.props.animationDuration || 150);
|
|
378
|
-
this.cleanup || (this.cleanup = []), this.cleanup.push(() => {
|
|
379
|
-
s && clearTimeout(s);
|
|
380
|
-
});
|
|
381
370
|
}
|
|
382
371
|
document.removeEventListener("keydown", this.handleKeyDown), document.removeEventListener("click", this.handleClickOutside), this.triggerElement?.setAttribute("aria-expanded", "false"), this.focusedIndex = -1;
|
|
383
372
|
}
|
|
384
|
-
})
|
|
373
|
+
});
|
|
374
|
+
this.cleanup.push(() => e.dispose());
|
|
375
|
+
}
|
|
376
|
+
render() {
|
|
377
|
+
const e = m("div", {
|
|
378
|
+
style: {
|
|
379
|
+
position: "relative",
|
|
380
|
+
display: "inline-block"
|
|
381
|
+
}
|
|
382
|
+
}), i = this.setupTrigger();
|
|
383
|
+
return e.element && i && e.element.appendChild(i), this.ensureVisibilityEffect(), e;
|
|
385
384
|
}
|
|
386
385
|
}
|
|
387
|
-
function
|
|
388
|
-
return
|
|
386
|
+
function P(l) {
|
|
387
|
+
return A(new T(l));
|
|
389
388
|
}
|
|
390
389
|
const S = {
|
|
391
390
|
/**
|
|
@@ -397,54 +396,54 @@ const S = {
|
|
|
397
396
|
/**
|
|
398
397
|
* Create a destructive menu item
|
|
399
398
|
*/
|
|
400
|
-
destructive(
|
|
399
|
+
destructive(l, e, i) {
|
|
401
400
|
return {
|
|
402
|
-
title:
|
|
401
|
+
title: l,
|
|
403
402
|
action: e,
|
|
404
403
|
destructive: !0,
|
|
405
|
-
systemImage:
|
|
404
|
+
systemImage: i
|
|
406
405
|
};
|
|
407
406
|
},
|
|
408
407
|
/**
|
|
409
408
|
* Create a menu item with keyboard shortcut
|
|
410
409
|
*/
|
|
411
|
-
withShortcut(
|
|
410
|
+
withShortcut(l, e, i, t) {
|
|
412
411
|
return {
|
|
413
|
-
title:
|
|
412
|
+
title: l,
|
|
414
413
|
shortcut: e,
|
|
415
|
-
action:
|
|
414
|
+
action: i,
|
|
416
415
|
systemImage: t
|
|
417
416
|
};
|
|
418
417
|
},
|
|
419
418
|
/**
|
|
420
419
|
* Create a context menu for right-click interactions
|
|
421
420
|
*/
|
|
422
|
-
contextMenu(
|
|
423
|
-
const [
|
|
424
|
-
|
|
425
|
-
|
|
421
|
+
contextMenu(l, e) {
|
|
422
|
+
const [i, t] = b(!1), [n, h] = b({ x: 0, y: 0 });
|
|
423
|
+
l.addEventListener("contextmenu", (s) => {
|
|
424
|
+
s.preventDefault(), h({ x: s.clientX, y: s.clientY }), t(!0);
|
|
426
425
|
}), console.log("Context menu requested", {
|
|
427
426
|
items: e,
|
|
428
|
-
position:
|
|
429
|
-
isOpen:
|
|
427
|
+
position: n(),
|
|
428
|
+
isOpen: i()
|
|
430
429
|
});
|
|
431
430
|
}
|
|
432
431
|
}, $ = {
|
|
433
|
-
theme:
|
|
432
|
+
theme: g,
|
|
434
433
|
/**
|
|
435
434
|
* Create a custom menu theme
|
|
436
435
|
*/
|
|
437
|
-
createTheme(
|
|
438
|
-
return { ...
|
|
436
|
+
createTheme(l) {
|
|
437
|
+
return { ...g, ...l };
|
|
439
438
|
},
|
|
440
439
|
/**
|
|
441
440
|
* Dark theme preset
|
|
442
441
|
*/
|
|
443
442
|
darkTheme() {
|
|
444
443
|
return {
|
|
445
|
-
...
|
|
444
|
+
...g,
|
|
446
445
|
colors: {
|
|
447
|
-
...
|
|
446
|
+
...g.colors,
|
|
448
447
|
background: "#2A2A2A",
|
|
449
448
|
surface: "#3A3A3A",
|
|
450
449
|
text: "#FFFFFF",
|
|
@@ -457,10 +456,9 @@ const S = {
|
|
|
457
456
|
}
|
|
458
457
|
};
|
|
459
458
|
export {
|
|
460
|
-
|
|
461
|
-
|
|
459
|
+
T as M,
|
|
460
|
+
P as a,
|
|
462
461
|
S as b,
|
|
463
462
|
$ as c,
|
|
464
|
-
|
|
463
|
+
g as d
|
|
465
464
|
};
|
|
466
|
-
//# sourceMappingURL=Menu.js.map
|
package/dist/index.js
CHANGED
package/dist/list/List.d.ts
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
import type { ModifiableComponent, ModifierBuilder } from '@tachui/core';
|
|
8
8
|
import type { Signal } from '@tachui/core';
|
|
9
9
|
import type { ComponentInstance } from '@tachui/core';
|
|
10
|
-
import { type ScrollViewProps } from '@tachui/
|
|
10
|
+
import { type ScrollViewProps } from '@tachui/primitives';
|
|
11
11
|
/**
|
|
12
12
|
* List item selection mode
|
|
13
13
|
*/
|
|
@@ -102,6 +102,13 @@ export declare class EnhancedList<T = any> implements ComponentInstance<ListProp
|
|
|
102
102
|
* Helper to flatten render results
|
|
103
103
|
*/
|
|
104
104
|
private flattenRenderResult;
|
|
105
|
+
/**
|
|
106
|
+
* Normalize item render output into safe DOM node payloads.
|
|
107
|
+
*
|
|
108
|
+
* Strings and primitives are always emitted as text nodes to avoid HTML
|
|
109
|
+
* interpretation in list item rendering.
|
|
110
|
+
*/
|
|
111
|
+
private normalizeItemRenderOutput;
|
|
105
112
|
/**
|
|
106
113
|
* Resolve data from various input types
|
|
107
114
|
*/
|
package/dist/list/List.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../src/list/List.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAExE,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AAE1C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAA;AACrD,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../src/list/List.ts"],"names":[],"mappings":"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"}
|
package/dist/list/index.js
CHANGED
package/dist/menu/Menu.d.ts
CHANGED
|
@@ -94,6 +94,9 @@ export declare class MenuComponent implements ComponentInstance<MenuProps> {
|
|
|
94
94
|
private focusedIndex;
|
|
95
95
|
private menuElement;
|
|
96
96
|
private triggerElement;
|
|
97
|
+
private visibilityEffectInitialized;
|
|
98
|
+
private hideFallbackTimeout;
|
|
99
|
+
private pendingPositionTask;
|
|
97
100
|
constructor(props: MenuProps);
|
|
98
101
|
private resolveValue;
|
|
99
102
|
/**
|
|
@@ -111,6 +114,8 @@ export declare class MenuComponent implements ComponentInstance<MenuProps> {
|
|
|
111
114
|
private calculatePosition;
|
|
112
115
|
private createMenuContent;
|
|
113
116
|
private setupTrigger;
|
|
117
|
+
private schedulePositionAndAnimation;
|
|
118
|
+
private ensureVisibilityEffect;
|
|
114
119
|
render(): DOMNode;
|
|
115
120
|
private handleClickOutside;
|
|
116
121
|
private setIsOpenValue;
|