@htmlbricks/hb-dialog 0.66.8 → 0.66.10
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 +61 -0
- package/manifest.json +1 -1
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
## `hb-dialog` — dialog
|
|
2
|
+
|
|
3
|
+
**Category:** overlays | **Tags:** overlays, modal
|
|
4
|
+
|
|
5
|
+
### What it does
|
|
6
|
+
|
|
7
|
+
Bootstrap-styled modal controlled by string `show` (`yes`/`no`): fade transitions, optional backdrop click to close, Escape when `keyboard` is enabled, and `modal-open` on `document.body`. Slots replace title, body, footer, and button labels; default footer emits `modalConfirm` with `{ id, confirm }` and toggles visibility. Also emits `modalShow` when opened or closed.
|
|
8
|
+
|
|
9
|
+
### Custom element
|
|
10
|
+
|
|
11
|
+
`hb-dialog`
|
|
12
|
+
|
|
13
|
+
### Attributes / props (snake_case)
|
|
14
|
+
|
|
15
|
+
| Property | Type | Notes |
|
|
16
|
+
| --- | --- | --- |
|
|
17
|
+
| `id` | string (optional) | Element identifier (included in events). |
|
|
18
|
+
| `style` | string (optional) | Inline style string. |
|
|
19
|
+
| `show` | union (optional) | `"yes"` \| `"no"` — visibility. |
|
|
20
|
+
| `confirm_btn_class` | string (optional) | Bootstrap button classes for confirm. |
|
|
21
|
+
| `title` | string (optional) | Default title text if slot unused. |
|
|
22
|
+
| `backdrop` | boolean (optional) | Show backdrop. |
|
|
23
|
+
| `ignoreBackdrop` | boolean (optional) | Ignore backdrop interactions when true. |
|
|
24
|
+
| `keyboard` | boolean (optional) | Escape to close. |
|
|
25
|
+
| `describedby` | string (optional) | ARIA describedby id. |
|
|
26
|
+
| `labelledby` | string (optional) | ARIA labelledby id. |
|
|
27
|
+
| `content` | string (optional) | Default body string if slot unused. |
|
|
28
|
+
| `closelabel` | string (optional) | Close button label. |
|
|
29
|
+
| `confirmlabel` | string (optional) | Confirm button label. |
|
|
30
|
+
| `disable_confirm` | boolean (optional) | Disable confirm button. |
|
|
31
|
+
| `close_btn_class` | string (optional) | Classes for close button. |
|
|
32
|
+
| `hide_close` | boolean (optional) | Hide close control. |
|
|
33
|
+
| `hide_confirm` | boolean (optional) | Hide confirm control. |
|
|
34
|
+
|
|
35
|
+
**CSS vars:** Bootstrap `--bs-*`, `--hb-modal-max-width`. **Part:** `modal-dialog`. **Slots:** `header`, `modal-footer`, `body-content`, `footer`, `close-button-label`, `confirm-button-label`.
|
|
36
|
+
|
|
37
|
+
### Events (`CustomEvent` names)
|
|
38
|
+
|
|
39
|
+
- **`modalConfirm`** — `{ id: string; confirm: boolean }`
|
|
40
|
+
- **`modalShow`** — `{ id: string; show: true }`
|
|
41
|
+
|
|
42
|
+
### Usage notes
|
|
43
|
+
|
|
44
|
+
- Full Bootstrap modal behavior patterns (body scroll lock, backdrop).
|
|
45
|
+
- bootstrap-icons may appear on buttons depending on implementation.
|
|
46
|
+
- Teleports/focus live in shadow DOM; test accessibility with real browsers.
|
|
47
|
+
- No i18n array in `docs.ts`.
|
|
48
|
+
|
|
49
|
+
### Minimal HTML example
|
|
50
|
+
|
|
51
|
+
```html
|
|
52
|
+
<hb-dialog
|
|
53
|
+
id="confirm-delete"
|
|
54
|
+
show="yes"
|
|
55
|
+
title="Delete item?"
|
|
56
|
+
content="This cannot be undone."
|
|
57
|
+
confirmlabel="Delete"
|
|
58
|
+
closelabel="Cancel"
|
|
59
|
+
keyboard="true"
|
|
60
|
+
></hb-dialog>
|
|
61
|
+
```
|
package/manifest.json
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@htmlbricks/hb-dialog",
|
|
3
|
-
"version": "0.66.
|
|
3
|
+
"version": "0.66.10",
|
|
4
4
|
"contributors": [],
|
|
5
5
|
"description": "Bootstrap-styled modal controlled by string `show` (`yes`/`no`): fade/fly transitions, optional backdrop click to close, Escape when `keyboard` is enabled, and `modal-open` on `document.body`. Slots replace title, body, footer, and button labels; default footer emits `modalConfirm` with `{ id, confirm }` and toggles visibility. Also emits `modalShow` when opened or closed.",
|
|
6
6
|
"licenses": [
|