@blackcube/aurelia-kit 1.0.0-rc5 → 1.0.0-rc7

package/README.md

@@ -61,7 +61,7 @@ An element that must leave the layout when hidden also carries the HTML `hidden`
 (Tailwind's preflight turns it into `display: none`); the attribute toggles it, never a class.
 
 Attribute options use the Aurelia multi-binding syntax, as written by the PHP widgets:
-`bleet-toaster-trigger="color: success; title: Saved; content: Done; duration: 3000"`.
+`bleet-toaster-trigger="level: success; title: Saved; content: Done; duration: 3000"`.
 
 ## Abstract components
 
@@ -185,7 +185,6 @@ Behavior:
 ```typescript
 interface IDialogResponse {
     content?: string;         // the whole HTML of the dialog
-    color?: UiColor;          // not used by the element: the server HTML carries its own colors
     icon?: string | null;     // not used by the element: the server HTML carries its own icon
     action?: DialogAction;    // Close closes the dialog, RefreshAndClose closes it and reloads the page
     toast?: IToast;           // published on Channels.Toaster
@@ -195,7 +194,8 @@ interface IDialogResponse {
 }
 ```
 
-PHP side, `AureliaCommunication::dialogContent($content, $color)` builds the `content` / `color` part of it.
+PHP side, `AureliaCommunication::dialogContent($content)` builds the `content` part of it: the look of the dialog is
+in its HTML.
 
 **In a SPA**, the frame is the application's: its element extends `AbstractDialog` (see
 [Abstract components](#abstract-components)), its template holds the `<dialog ref="dialogElement">`, and the dialog is
@@ -216,13 +216,13 @@ export class AppDrawer extends AbstractDialog {}
 ```
 
 ```typescript
-resolve(IEventAggregator).publish(Channels.Modal, <IModal>{ action: ModalAction.Open, id: 'drawer', title: 'Edit user', color: UiColor.Primary });
+resolve(IEventAggregator).publish(Channels.Modal, <IModal>{ action: ModalAction.Open, id: 'drawer', title: 'Edit user' });
 ```
 
 | `AbstractDialog` | Meaning |
 |---|---|
 | `id` (bindable) | the id of the dialog on `Channels.Modal` |
-| `title`, `color` | those of the opening, kept until the dialog is closed |
+| `title` | the one of the opening, kept until the dialog is closed |
 | `dialogElement` | the `<dialog>` of the template (`ref`) |
 | `show(data)`, `close()`, `clear()` | protected, to extend: an opening, a closing, what to clear once closed |
 
@@ -285,7 +285,7 @@ Markup it expects:
 <div bleet-toaster popover="manual"
      class="fixed inset-auto top-4 right-0 z-70 m-0 p-0 pr-4 border-0 bg-transparent overflow-visible flex flex-col gap-4 pointer-events-none">
 
-    <!-- one template per UiColor: primary, secondary, success, danger, warning, info, accent -->
+    <!-- one template per UiLevel: info, success, warning, danger -->
     <template data-toaster="success">
         <div class="… translate-x-full opacity-0 transition-all duration-500"
              data-toaster-show="translate-x-0 opacity-100"
@@ -311,24 +311,24 @@ box of a popover (`inset`, `margin`, `padding`, `border`, `background`, `overflo
 
 Behavior:
 
-- `ToasterAction.Add`: clones `template[data-toaster=<color>]`, puts the icon of
+- `ToasterAction.Add`: clones `template[data-toaster=<level>]`, puts the icon of
   `template[data-toaster=icon-<icon>]` in the `icon` slot, fills `title` and `content`, appends the card to the
   container, then swaps its hide classes for its show classes. With `duration` > 0 the toast closes itself after
   `duration` ms; `0` keeps it until it is closed.
 - `ToasterAction.Remove` (or a click on `close`): swaps the show classes for the hide classes, waits for the end
   of the transition, removes the card.
-- A toast whose `id` is already displayed is ignored. A color without template is logged and ignored.
+- A toast whose `id` is already displayed is ignored. A level without template is logged and ignored.
 
 Publishing a toast from TypeScript:
 
 ```typescript
 import { resolve, IEventAggregator } from 'aurelia';
-import { Channels, IToaster, ToasterAction, UiColor, UiToastIcon } from '@blackcube/aurelia-kit';
+import { Channels, IToaster, ToasterAction, UiLevel, UiToastIcon } from '@blackcube/aurelia-kit';
 
 resolve(IEventAggregator).publish(Channels.Toaster, <IToaster>{
     action: ToasterAction.Add,
     toast: {
-        color: UiColor.Success,
+        level: UiLevel.Success,
         icon: UiToastIcon.Success,
         title: 'Saved',
         content: 'The page has been saved.',
@@ -345,7 +345,7 @@ interface IToaster {
 
 interface IToast {
     id?: string;             // generated when absent
-    color: UiColor;          // default Info
+    level: UiLevel;          // default Info
     icon?: UiToastIcon;      // default Info
     title?: string;
     content: string;         // HTML
@@ -359,20 +359,20 @@ Publishes one toast when the page loads (after `DOMContentLoaded`). Rendered by
 as a hidden element:
 
 ```html
-<div hidden bleet-toast="color: success; icon: check-circle; title: Saved; content: Done; duration: 3000"></div>
+<div hidden bleet-toast="level: success; icon: check-circle; title: Saved; content: Done; duration: 3000"></div>
 ```
 
-Options: `id`, `color`, `icon`, `title`, `content`, `duration` (same meaning as `IToast`).
+Options: `id`, `level`, `icon`, `title`, `content`, `duration` (same meaning as `IToast`).
 
 ### `bleet-toaster-trigger`
 
 Publishes one toast on click. Rendered by `Bleet::toast()->…->trigger()` as attributes of another element:
 
 ```html
-<button bleet-toaster-trigger="color: success; content: Saved!">Save</button>
+<button bleet-toaster-trigger="level: success; content: Saved!">Save</button>
 ```
 
-Options: `id`, `color`, `icon`, `title`, `content`, `duration`.
+Options: `id`, `level`, `icon`, `title`, `content`, `duration`.
 
 ### `AbstractToaster` (SPA)
 
@@ -399,7 +399,7 @@ export class AppToaster extends AbstractToaster {}
 
 | `AbstractToaster` | Meaning |
 |---|---|
-| `toasts` | the toasts shown: `id`, `color`, `icon`, `title`, `content`, `duration`, with the defaults of the attribute |
+| `toasts` | the toasts shown: `id`, `level`, `icon`, `title`, `content`, `duration`, with the defaults of the attribute |
 | `onClickClose(event, id)` | closes the toast (its button) |
 
 Behavior:
@@ -496,7 +496,13 @@ Behavior:
 
 - Listens on `Channels.Menu`: `MenuAction.Open` applies the show classes and opens the overlay, `MenuAction.Close`
   applies the hide classes and closes the overlay, `MenuAction.Toggle` does one or the other. `aria-hidden` follows.
-- A click on `[data-menu=close]` closes the menu; the menu closes too when the overlay closes.
+- A click on `[data-menu=close]` closes the menu; the menu closes too when the overlay closes, on `Escape` and on a
+  click on a link of the menu (the link is followed).
+- Open, the focus is trapped in the menu (`ITrapFocusService`), on `[data-menu=close]` first; once closed, it goes back
+  to what opened the menu (the burger).
+- The page follows: `<body>` takes the classes of the menu's `data-menu-page-show` while it is open and of its
+  `data-menu-page-hide` once closed — `data-menu-page-show="overflow-hidden"` keeps the page from scrolling under it.
+  Without these attributes, the page is left as is.
 - Publishes `MenuStatus.Opening`, `Opened`, `Closing`, `Closed` on `Channels.MenuStatus`.
 - `[data-menu=toggle-button-ID]` shows or hides `[data-menu=toggle-list-ID]` (`hidden` attribute), sets the
   data-menu-show / data-menu-hide classes of its `svg[data-menu=icon]` and its `aria-expanded`. Accordion: opening a
@@ -755,7 +761,7 @@ resolve(IEventAggregator).publish(Channels.Upload, <IUpload>{ action: UploadActi
 
 Attributes: `BleetToasterCustomAttribute`, `BleetToastCustomAttribute`, `BleetToasterTriggerCustomAttribute`,
 and the attributes of the other widgets. Abstract components: `AbstractDialog`, `AbstractDropdown`, `AbstractPager` (its `PagerEvent`, `IPagerDetail`),
-`AbstractToaster`. Enums: `Channels`, `ToasterAction`, `ToasterStatus`, `UiColor`,
+`AbstractToaster`. Enums: `Channels`, `ToasterAction`, `ToasterStatus`, `UiLevel`,
 `UiToastIcon`, `UiIcon`, and the actions and statuses of the other channels. Interfaces: `IToaster`, `IToast`,
 and the payloads of the other channels. Services: `IStorageService`, `ITransitionService`, `ITrapFocusService`.