staffa 0.4.0 → 0.4.2

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 (51) hide show
  1. package/README.md +34 -29
  2. package/dist/components/autocomplete.d.ts +9 -2
  3. package/dist/components/autocomplete.js +9 -2
  4. package/dist/components/box.d.ts +1 -0
  5. package/dist/components/box.js +1 -0
  6. package/dist/components/button.d.ts +1 -0
  7. package/dist/components/button.js +5 -5
  8. package/dist/components/buttonGroup.d.ts +5 -3
  9. package/dist/components/buttonGroup.js +5 -3
  10. package/dist/components/checkbox.d.ts +1 -0
  11. package/dist/components/checkbox.js +1 -0
  12. package/dist/components/dialog.d.ts +3 -3
  13. package/dist/components/dialog.js +3 -3
  14. package/dist/components/form.d.ts +3 -2
  15. package/dist/components/form.js +3 -2
  16. package/dist/components/main.d.ts +5 -1
  17. package/dist/components/main.js +5 -1
  18. package/dist/components/menu.d.ts +39 -5
  19. package/dist/components/menu.js +45 -5
  20. package/dist/components/tabs.d.ts +2 -2
  21. package/dist/components/tabs.js +2 -2
  22. package/dist/components/textarea.d.ts +3 -2
  23. package/dist/components/textarea.js +3 -2
  24. package/dist/components/textline.d.ts +1 -0
  25. package/dist/components/textline.js +1 -0
  26. package/dist/components/toast.d.ts +1 -2
  27. package/dist/components/toast.js +4 -2
  28. package/dist/components/tooltip.d.ts +4 -2
  29. package/dist/components/tooltip.js +4 -2
  30. package/dist/core.d.ts +10 -5
  31. package/dist/core.js +11 -9
  32. package/dist/index.d.ts +1 -1
  33. package/dist/index.js +1 -1
  34. package/dist/staffa.esm.js +1 -1
  35. package/package.json +1 -1
  36. package/src/components/autocomplete.ts +9 -2
  37. package/src/components/box.ts +1 -0
  38. package/src/components/button.ts +5 -5
  39. package/src/components/buttonGroup.ts +5 -3
  40. package/src/components/checkbox.ts +1 -0
  41. package/src/components/dialog.ts +3 -3
  42. package/src/components/form.ts +3 -2
  43. package/src/components/main.ts +5 -1
  44. package/src/components/menu.ts +50 -5
  45. package/src/components/tabs.ts +2 -2
  46. package/src/components/textarea.ts +3 -2
  47. package/src/components/textline.ts +1 -0
  48. package/src/components/toast.ts +3 -2
  49. package/src/components/tooltip.ts +4 -2
  50. package/src/core.ts +11 -9
  51. package/src/index.ts +1 -1
package/src/components/textline.ts CHANGED
@@ -48,6 +48,7 @@ export interface TextlineOptions extends FieldOptions {
48
48
  *
49
49
  * @example
50
50
  * ```ts
51
+ * const $user = A.proxy({email: "test@example.com"});
51
52
  * S.textline({ label: "Email", type: "email", required: true, bind: A.ref($user, "email") });
52
53
  * ```
53
54
  */
package/src/components/toast.ts CHANGED
@@ -54,6 +54,8 @@ let toastCount = 0;
54
54
  const toasts = A.proxy({} as Record<number, ToastEntry>);
55
55
 
56
56
  mountPortal(() => {
57
+ // Only redraws when emptiness flips, keeping the DOM clean while no toasts show.
58
+ if (A.isEmpty(toasts)) return;
57
59
  A("div.s-toasts aria-live=polite aria-atomic=false", () => {
58
60
  A.onEach(toasts, (entry) => {
59
61
  const { opts } = entry;
@@ -92,8 +94,7 @@ function dismiss(id: number): void {
92
94
  * S.toast({ message: "Saved!", type: "success" });
93
95
  * S.toast({ title: "Error", message: "Upload failed.", type: "danger", duration: 0 });
94
96
  * const off = S.toast({ message: "Uploading…", duration: 0, dismissible: false });
95
- * // later:
96
- * off();
97
+ * setTimeout(off, 3000); // Later..
97
98
  * ```
98
99
  */
99
100
  export function toast(opts: ToastOptions): () => void {
package/src/components/tooltip.ts CHANGED
@@ -113,11 +113,13 @@ mountPortal(() => {
113
113
  *
114
114
  * @example
115
115
  * ```ts
116
- * A("button #Save", () => {
116
+ * S.button(() => {
117
+ * A("#Save");
117
118
  * S.addTooltip({ tip: "Saves your work to the cloud" });
118
119
  * });
119
120
  *
120
- * A("button #Delete", () => {
121
+ * S.button(() => {
122
+ * A(".danger#Delete");
121
123
  * S.addTooltip({ tip: "Dangerous — cannot be undone", placement: "bottom" });
122
124
  * });
123
125
  * ```
package/src/core.ts CHANGED
@@ -71,15 +71,17 @@ export function drawSlot<Args extends unknown[] = []>(slot: Slot<Args> | undefin
71
71
  }
72
72
 
73
73
  /**
74
- * Mount a portal (tooltip, toast, menu, dialog, …) in its own dedicated
75
- * container under `<body>`. Each portal gets a private parent element because
76
- * two `A.mount`s sharing one parent can't tell their nodes apart: a redraw of
77
- * one (e.g. a tooltip hiding) may sweep up nodes another portal inserted
78
- * earlier in the same parent (e.g. an open menu).
74
+ * Mount a portal (tooltip, toast, menu, dialog, …) directly into `<body>`.
75
+ * Must be called at module top level, where Aberdeen's root scope (whose
76
+ * element is `document.body`) is current. Separate `A.mount`s sharing a parent
77
+ * can't tell their nodes apart, but sibling scopes within the root scope track
78
+ * their positions, so portals coexist without wrapper elements and add nothing
79
+ * to the DOM while they draw nothing.
80
+ *
81
+ * Scope creation is deferred a microtask so that an app drawing into `<body>`
82
+ * at module top level gets its content *before* the portals, keeping overlays
83
+ * at the end of the document.
79
84
  */
80
85
  export function mountPortal(draw: () => void): void {
81
- const container = document.createElement("div");
82
- container.style.display = "contents";
83
- document.body.appendChild(container);
84
- A.mount(container, draw);
86
+ queueMicrotask(() => A(draw));
85
87
  }
package/src/index.ts CHANGED
@@ -41,7 +41,7 @@ export { buttonGroup, type ButtonGroupOptions } from "./components/buttonGroup.j
41
41
  export { checkbox, type CheckboxOptions } from "./components/checkbox.js";
42
42
  export { form, type FormOptions } from "./components/form.js";
43
43
  export { main, type MainOptions } from "./components/main.js";
44
- export { menuButton, showFloatingMenu, type MenuOptions, type MenuEntry, type MenuItem, type MenuSeparator, type FloatingMenuOptions } from "./components/menu.js";
44
+ export { menuButton, showFloatingMenu, addContextMenu, type MenuOptions, type MenuEntry, type MenuItem, type MenuSeparator, type FloatingMenuOptions, type ContextMenuOptions } from "./components/menu.js";
45
45
  export { dialog, alert, confirm, prompt, type DialogOptions } from "./components/dialog.js";
46
46
  export { select, type SelectOptions, type SelectOptionInput } from "./components/select.js";
47
47
  export { tabs, type Tab, type TabsOptions } from "./components/tabs.js";