@blackcube/aurelia-kit 1.0.0-rc1 → 1.0.0-rc3

package/README.md

@@ -12,7 +12,7 @@ widgets, styled with Tailwind classes written in the PHP markup. The HTTP layer
 npm install @blackcube/aurelia-kit @blackcube/aurelia-api
 ```
 
-Peer dependencies: `aurelia` `^2.0.0-rc.2`, `@blackcube/aurelia-api` `^1.0.0`.
+Peer dependencies: `aurelia` `^2.0.0-rc.2`, `@blackcube/aurelia-api` `^1.0.0-rc1`.
 
 The package is ESM only (`dist/index.es.js`, built by Vite in library mode); the application bundler resolves it.
 
@@ -101,6 +101,7 @@ sends. Its template holds no markup of its own:
     <au-slot name="loader" if.bind="loading"><progress></progress></au-slot>
     <template else>
         <au-compose if.bind="contentView" template.bind="contentView"></au-compose>
+        <au-slot else></au-slot>
     </template>
 </dialog>
 ```
@@ -140,12 +141,17 @@ Behavior:
 - `content` is the whole HTML of the dialog (frame, header, body, footer), rendered by the server; it becomes the
   view of the `au-compose`, so the `bleet-*` attributes it holds work. A response without `content` keeps the
   current view.
+- `Open` (or `Toggle` when closed) with a `content` and no `url`: that HTML is shown as the server's would be, without
+  request (the same view, its `bleet-*` attributes, its forms posted by the element) — a page that already holds the
+  HTML (a confirmation, a `<template>` of the page).
 - A `<form>` submitted inside the dialog is posted by the element (multipart, method from `_method` or the form,
   POST by default, with the clicked submit button `name` / `value`); its `IDialogResponse` is applied the same way.
 - A `<form>` marked `data-dialog="native"` is not intercepted: the browser submits it (download, plain post).
 - A click on an element inside `[data-dialog="close"]`, the Escape key, or a click on the overlay closes the dialog
   with the hide transition; closing empties the view. A `cancel` coming from an `<input type="file">` (file chooser
   dismissed) does not close it. An `Open` received while the dialog is closing cancels the closing.
+- Escape while a menu of the dialog is open (`[aria-expanded="true"]`: `bleet-dropdown`, `bleet-profile`) closes
+  that menu, not the dialog.
 - Statuses `Opening`, `Opened`, `Closing`, `Closed` (with the `id`) on `Channels.ModalStatus`.
 
 ```typescript
@@ -163,6 +169,28 @@ interface IDialogResponse {
 
 PHP side, `AureliaCommunication::dialogContent($content, $color)` builds the `content` / `color` part of it.
 
+**In a SPA**, the content is the application's: its frame and its view go in the default slot of `<bleet-dialog>`,
+written once in the shell, and the dialog is opened without `url`:
+
+```html
+<bleet-dialog id="drawer"
+              data-dialog-class="… translate-x-full"
+              data-dialog-show="translate-x-0"
+              data-dialog-hide="translate-x-full">
+    <header …>${$host.title} <button type="button" data-dialog="close">…</button></header>
+    <au-viewport name="drawer"></au-viewport>
+</bleet-dialog>
+```
+
+```typescript
+resolve(IEventAggregator).publish(Channels.Modal, <IModal>{ action: ModalAction.Open, id: 'drawer', title: 'Edit user', color: UiColor.Primary });
+```
+
+- `Open` (or `Toggle` when closed) with neither `url` nor `content` opens the dialog on its default slot; its `title`
+  and `color` are kept on the element for the frame (`$host.title`, `$host.color`) until it is closed.
+- A form of the default slot is not posted by the element: it belongs to the page that projects it.
+- `ModalStatus.Closed` with the `id` tells the page the dialog is closed (its route can be left).
+
 ## Ajaxify
 
 ### `<bleet-ajaxify>`
@@ -305,6 +333,39 @@ Publishes one toast on click. Rendered by `Bleet::toast()->…->trigger()` as at
 
 Options: `id`, `color`, `icon`, `title`, `content`, `duration`.
 
+### `<bleet-toaster>` (SPA)
+
+The toaster of a SPA, where the application's templates render the markup: the same channel, the same payload and the
+same state classes as the `bleet-toaster` attribute, but each toast is rendered by Aurelia from the markup the
+application projects into the element. The element holds no markup and no class of its own: its template only repeats
+its default slot, once per toast, the toast exposed as `$host`.
+
+```html
+<bleet-toaster popover="manual" class="fixed inset-auto top-4 right-0 … flex flex-col gap-4 pointer-events-none">
+    <div data-toaster-id.bind="$host.id"
+         class="… translate-x-full opacity-0 transition-all duration-500"
+         data-toaster-show="translate-x-0 opacity-100"
+         data-toaster-hide="translate-x-full opacity-0">
+        … ${$host.title} … <div innerhtml.bind="$host.content"></div> …
+        <button type="button" click.trigger="$host.close($event)">…</button>
+    </div>
+</bleet-toaster>
+```
+
+| `$host` (`IToastView`) | Meaning |
+|---|---|
+| `id`, `color`, `icon`, `title`, `content`, `duration` | the published toast, with the defaults of the attribute |
+| `close(event)` | closes the toast (its button) |
+
+Behavior:
+
+- The root of the projected toast carries `data-toaster-id="${$host.id}"`: once rendered, its hide classes are
+  swapped for its show classes; `close()`, `ToasterAction.Remove` or the end of its `duration` swap them back, then the
+  toast leaves the list once the transition ends.
+- With `popover="manual"` on the element, it is shown again on each toast and hidden once the last one is gone, as the
+  attribute's container.
+- The texts, the icons and the classes are the application's: its i18n, its icon component, its theme.
+
 ## Alerts
 
 ### `bleet-alert`
@@ -538,6 +599,17 @@ Behavior:
   is selected, the `count` template text beyond.
 - The panel does not open while the native select is disabled.
 
+### `bleet-focus`
+
+An element that takes the focus as it appears — a field or a message shown later (a condition of the page, a fragment
+loaded by ajaxify):
+
+```html
+<input bleet-focus …>
+```
+
+When attached, the element is focused on the next frame; the browser brings it into view.
+
 ## Upload channel
 
 `Channels.Upload` carries `IUpload` (`{ action: UploadAction.Reset, id?: string }`) for the upload bridges