@weave-framework/ui 0.2.107
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/LICENSE +21 -0
- package/README.md +17 -0
- package/dist/autocomplete/autocomplete.d.ts +86 -0
- package/dist/autocomplete/autocomplete.d.ts.map +1 -0
- package/dist/autocomplete/autocomplete.js +263 -0
- package/dist/autocomplete/autocomplete.js.map +1 -0
- package/dist/badge/badge.d.ts +39 -0
- package/dist/badge/badge.d.ts.map +1 -0
- package/dist/badge/badge.js +59 -0
- package/dist/badge/badge.js.map +1 -0
- package/dist/bottom-sheet/bottom-sheet.d.ts +21 -0
- package/dist/bottom-sheet/bottom-sheet.d.ts.map +1 -0
- package/dist/bottom-sheet/bottom-sheet.js +82 -0
- package/dist/bottom-sheet/bottom-sheet.js.map +1 -0
- package/dist/button/button.d.ts +47 -0
- package/dist/button/button.d.ts.map +1 -0
- package/dist/button/button.js +47 -0
- package/dist/button/button.js.map +1 -0
- package/dist/button-toggle/button-toggle.d.ts +65 -0
- package/dist/button-toggle/button-toggle.d.ts.map +1 -0
- package/dist/button-toggle/button-toggle.js +127 -0
- package/dist/button-toggle/button-toggle.js.map +1 -0
- package/dist/card/card.d.ts +30 -0
- package/dist/card/card.d.ts.map +1 -0
- package/dist/card/card.js +32 -0
- package/dist/card/card.js.map +1 -0
- package/dist/cdk/bidi.d.ts +19 -0
- package/dist/cdk/bidi.d.ts.map +1 -0
- package/dist/cdk/bidi.js +32 -0
- package/dist/cdk/bidi.js.map +1 -0
- package/dist/cdk/breakpoints.d.ts +21 -0
- package/dist/cdk/breakpoints.d.ts.map +1 -0
- package/dist/cdk/breakpoints.js +39 -0
- package/dist/cdk/breakpoints.js.map +1 -0
- package/dist/cdk/clipboard.d.ts +8 -0
- package/dist/cdk/clipboard.d.ts.map +1 -0
- package/dist/cdk/clipboard.js +38 -0
- package/dist/cdk/clipboard.js.map +1 -0
- package/dist/cdk/data-source.d.ts +41 -0
- package/dist/cdk/data-source.d.ts.map +1 -0
- package/dist/cdk/data-source.js +36 -0
- package/dist/cdk/data-source.js.map +1 -0
- package/dist/cdk/date-adapter.d.ts +63 -0
- package/dist/cdk/date-adapter.d.ts.map +1 -0
- package/dist/cdk/date-adapter.js +155 -0
- package/dist/cdk/date-adapter.js.map +1 -0
- package/dist/cdk/drag-drop.d.ts +77 -0
- package/dist/cdk/drag-drop.d.ts.map +1 -0
- package/dist/cdk/drag-drop.js +268 -0
- package/dist/cdk/drag-drop.js.map +1 -0
- package/dist/cdk/focus-monitor.d.ts +27 -0
- package/dist/cdk/focus-monitor.d.ts.map +1 -0
- package/dist/cdk/focus-monitor.js +66 -0
- package/dist/cdk/focus-monitor.js.map +1 -0
- package/dist/cdk/focus-trap.d.ts +39 -0
- package/dist/cdk/focus-trap.d.ts.map +1 -0
- package/dist/cdk/focus-trap.js +127 -0
- package/dist/cdk/focus-trap.js.map +1 -0
- package/dist/cdk/index.d.ts +29 -0
- package/dist/cdk/index.d.ts.map +1 -0
- package/dist/cdk/index.js +29 -0
- package/dist/cdk/index.js.map +1 -0
- package/dist/cdk/interactivity.d.ts +19 -0
- package/dist/cdk/interactivity.d.ts.map +1 -0
- package/dist/cdk/interactivity.js +70 -0
- package/dist/cdk/interactivity.js.map +1 -0
- package/dist/cdk/key-manager.d.ts +41 -0
- package/dist/cdk/key-manager.d.ts.map +1 -0
- package/dist/cdk/key-manager.js +126 -0
- package/dist/cdk/key-manager.js.map +1 -0
- package/dist/cdk/live-announcer.d.ts +19 -0
- package/dist/cdk/live-announcer.d.ts.map +1 -0
- package/dist/cdk/live-announcer.js +48 -0
- package/dist/cdk/live-announcer.js.map +1 -0
- package/dist/cdk/observers.d.ts +17 -0
- package/dist/cdk/observers.d.ts.map +1 -0
- package/dist/cdk/observers.js +35 -0
- package/dist/cdk/observers.js.map +1 -0
- package/dist/cdk/overlay.d.ts +73 -0
- package/dist/cdk/overlay.d.ts.map +1 -0
- package/dist/cdk/overlay.js +154 -0
- package/dist/cdk/overlay.js.map +1 -0
- package/dist/cdk/platform.d.ts +22 -0
- package/dist/cdk/platform.d.ts.map +1 -0
- package/dist/cdk/platform.js +55 -0
- package/dist/cdk/platform.js.map +1 -0
- package/dist/cdk/portal.d.ts +31 -0
- package/dist/cdk/portal.d.ts.map +1 -0
- package/dist/cdk/portal.js +55 -0
- package/dist/cdk/portal.js.map +1 -0
- package/dist/cdk/positioning.d.ts +53 -0
- package/dist/cdk/positioning.d.ts.map +1 -0
- package/dist/cdk/positioning.js +140 -0
- package/dist/cdk/positioning.js.map +1 -0
- package/dist/cdk/scroll.d.ts +43 -0
- package/dist/cdk/scroll.d.ts.map +1 -0
- package/dist/cdk/scroll.js +97 -0
- package/dist/cdk/scroll.js.map +1 -0
- package/dist/cdk/selection-model.d.ts +50 -0
- package/dist/cdk/selection-model.d.ts.map +1 -0
- package/dist/cdk/selection-model.js +77 -0
- package/dist/cdk/selection-model.js.map +1 -0
- package/dist/cdk/virtual-scroll.d.ts +50 -0
- package/dist/cdk/virtual-scroll.d.ts.map +1 -0
- package/dist/cdk/virtual-scroll.js +92 -0
- package/dist/cdk/virtual-scroll.js.map +1 -0
- package/dist/checkbox/checkbox.d.ts +65 -0
- package/dist/checkbox/checkbox.d.ts.map +1 -0
- package/dist/checkbox/checkbox.js +82 -0
- package/dist/checkbox/checkbox.js.map +1 -0
- package/dist/chips/chips.d.ts +65 -0
- package/dist/chips/chips.d.ts.map +1 -0
- package/dist/chips/chips.js +119 -0
- package/dist/chips/chips.js.map +1 -0
- package/dist/context-menu/context-menu.d.ts +32 -0
- package/dist/context-menu/context-menu.d.ts.map +1 -0
- package/dist/context-menu/context-menu.js +63 -0
- package/dist/context-menu/context-menu.js.map +1 -0
- package/dist/datepicker/datepicker.d.ts +100 -0
- package/dist/datepicker/datepicker.d.ts.map +1 -0
- package/dist/datepicker/datepicker.js +440 -0
- package/dist/datepicker/datepicker.js.map +1 -0
- package/dist/dialog/dialog.d.ts +27 -0
- package/dist/dialog/dialog.d.ts.map +1 -0
- package/dist/dialog/dialog.js +47 -0
- package/dist/dialog/dialog.js.map +1 -0
- package/dist/dialog/modal-core.d.ts +42 -0
- package/dist/dialog/modal-core.d.ts.map +1 -0
- package/dist/dialog/modal-core.js +103 -0
- package/dist/dialog/modal-core.js.map +1 -0
- package/dist/expansion/expansion.d.ts +71 -0
- package/dist/expansion/expansion.d.ts.map +1 -0
- package/dist/expansion/expansion.js +127 -0
- package/dist/expansion/expansion.js.map +1 -0
- package/dist/form-field/form-field.d.ts +48 -0
- package/dist/form-field/form-field.d.ts.map +1 -0
- package/dist/form-field/form-field.js +89 -0
- package/dist/form-field/form-field.js.map +1 -0
- package/dist/grid-list/grid-list.d.ts +25 -0
- package/dist/grid-list/grid-list.d.ts.map +1 -0
- package/dist/grid-list/grid-list.js +22 -0
- package/dist/grid-list/grid-list.js.map +1 -0
- package/dist/icon/icon.d.ts +40 -0
- package/dist/icon/icon.d.ts.map +1 -0
- package/dist/icon/icon.js +99 -0
- package/dist/icon/icon.js.map +1 -0
- package/dist/icon/icons.d.ts +60 -0
- package/dist/icon/icons.d.ts.map +1 -0
- package/dist/icon/icons.js +126 -0
- package/dist/icon/icons.js.map +1 -0
- package/dist/icon/lucide-icons.d.ts +11 -0
- package/dist/icon/lucide-icons.d.ts.map +1 -0
- package/dist/icon/lucide-icons.js +65 -0
- package/dist/icon/lucide-icons.js.map +1 -0
- package/dist/index.d.ts +12 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +2 -0
- package/dist/index.js.map +1 -0
- package/dist/input/input.d.ts +90 -0
- package/dist/input/input.d.ts.map +1 -0
- package/dist/input/input.js +138 -0
- package/dist/input/input.js.map +1 -0
- package/dist/internal/compose.d.ts +26 -0
- package/dist/internal/compose.d.ts.map +1 -0
- package/dist/internal/compose.js +32 -0
- package/dist/internal/compose.js.map +1 -0
- package/dist/list/list.d.ts +70 -0
- package/dist/list/list.d.ts.map +1 -0
- package/dist/list/list.js +144 -0
- package/dist/list/list.js.map +1 -0
- package/dist/menu/menu-core.d.ts +56 -0
- package/dist/menu/menu-core.d.ts.map +1 -0
- package/dist/menu/menu-core.js +122 -0
- package/dist/menu/menu-core.js.map +1 -0
- package/dist/menu/menu.d.ts +31 -0
- package/dist/menu/menu.d.ts.map +1 -0
- package/dist/menu/menu.js +68 -0
- package/dist/menu/menu.js.map +1 -0
- package/dist/menubar/menubar.d.ts +49 -0
- package/dist/menubar/menubar.d.ts.map +1 -0
- package/dist/menubar/menubar.js +162 -0
- package/dist/menubar/menubar.js.map +1 -0
- package/dist/paginator/paginator.d.ts +89 -0
- package/dist/paginator/paginator.d.ts.map +1 -0
- package/dist/paginator/paginator.js +159 -0
- package/dist/paginator/paginator.js.map +1 -0
- package/dist/popover-edit/popover-edit.d.ts +33 -0
- package/dist/popover-edit/popover-edit.d.ts.map +1 -0
- package/dist/popover-edit/popover-edit.js +107 -0
- package/dist/popover-edit/popover-edit.js.map +1 -0
- package/dist/progress-bar/progress-bar.d.ts +32 -0
- package/dist/progress-bar/progress-bar.d.ts.map +1 -0
- package/dist/progress-bar/progress-bar.js +42 -0
- package/dist/progress-bar/progress-bar.js.map +1 -0
- package/dist/progress-spinner/progress-spinner.d.ts +25 -0
- package/dist/progress-spinner/progress-spinner.d.ts.map +1 -0
- package/dist/progress-spinner/progress-spinner.js +25 -0
- package/dist/progress-spinner/progress-spinner.js.map +1 -0
- package/dist/radio/radio.d.ts +68 -0
- package/dist/radio/radio.d.ts.map +1 -0
- package/dist/radio/radio.js +81 -0
- package/dist/radio/radio.js.map +1 -0
- package/dist/ripple/ripple.d.ts +20 -0
- package/dist/ripple/ripple.d.ts.map +1 -0
- package/dist/ripple/ripple.js +41 -0
- package/dist/ripple/ripple.js.map +1 -0
- package/dist/select/select.d.ts +83 -0
- package/dist/select/select.d.ts.map +1 -0
- package/dist/select/select.js +320 -0
- package/dist/select/select.js.map +1 -0
- package/dist/shared/options.d.ts +44 -0
- package/dist/shared/options.d.ts.map +1 -0
- package/dist/shared/options.js +59 -0
- package/dist/shared/options.js.map +1 -0
- package/dist/shared/positions.d.ts +20 -0
- package/dist/shared/positions.d.ts.map +1 -0
- package/dist/shared/positions.js +27 -0
- package/dist/shared/positions.js.map +1 -0
- package/dist/sidenav/sidenav.d.ts +65 -0
- package/dist/sidenav/sidenav.d.ts.map +1 -0
- package/dist/sidenav/sidenav.js +120 -0
- package/dist/sidenav/sidenav.js.map +1 -0
- package/dist/slide-toggle/slide-toggle.d.ts +56 -0
- package/dist/slide-toggle/slide-toggle.d.ts.map +1 -0
- package/dist/slide-toggle/slide-toggle.js +62 -0
- package/dist/slide-toggle/slide-toggle.js.map +1 -0
- package/dist/slider/slider.d.ts +69 -0
- package/dist/slider/slider.d.ts.map +1 -0
- package/dist/slider/slider.js +184 -0
- package/dist/slider/slider.js.map +1 -0
- package/dist/snackbar/snackbar.d.ts +25 -0
- package/dist/snackbar/snackbar.d.ts.map +1 -0
- package/dist/snackbar/snackbar.js +135 -0
- package/dist/snackbar/snackbar.js.map +1 -0
- package/dist/stepper/stepper.d.ts +87 -0
- package/dist/stepper/stepper.d.ts.map +1 -0
- package/dist/stepper/stepper.js +142 -0
- package/dist/stepper/stepper.js.map +1 -0
- package/dist/table/table.d.ts +140 -0
- package/dist/table/table.d.ts.map +1 -0
- package/dist/table/table.js +312 -0
- package/dist/table/table.js.map +1 -0
- package/dist/tabs/tabs.d.ts +64 -0
- package/dist/tabs/tabs.d.ts.map +1 -0
- package/dist/tabs/tabs.js +126 -0
- package/dist/tabs/tabs.js.map +1 -0
- package/dist/timepicker/timepicker.d.ts +83 -0
- package/dist/timepicker/timepicker.d.ts.map +1 -0
- package/dist/timepicker/timepicker.js +303 -0
- package/dist/timepicker/timepicker.js.map +1 -0
- package/dist/toolbar/toolbar.d.ts +34 -0
- package/dist/toolbar/toolbar.d.ts.map +1 -0
- package/dist/toolbar/toolbar.js +35 -0
- package/dist/toolbar/toolbar.js.map +1 -0
- package/dist/tooltip/tooltip.d.ts +30 -0
- package/dist/tooltip/tooltip.d.ts.map +1 -0
- package/dist/tooltip/tooltip.js +109 -0
- package/dist/tooltip/tooltip.js.map +1 -0
- package/dist/tree/tree.d.ts +100 -0
- package/dist/tree/tree.d.ts.map +1 -0
- package/dist/tree/tree.js +288 -0
- package/dist/tree/tree.js.map +1 -0
- package/package.json +230 -0
- package/src/styles/_api.scss +384 -0
- package/src/styles/_helpers.scss +101 -0
- package/src/styles/_index.scss +12 -0
- package/src/styles/_ref.scss +20 -0
- package/src/styles/_sass-utils.scss +14 -0
- package/src/styles/_token-utils.scss +24 -0
- package/src/styles/components/autocomplete/_index.scss +10 -0
- package/src/styles/components/autocomplete/_styles.scss +46 -0
- package/src/styles/components/autocomplete/_tokens.scss +28 -0
- package/src/styles/components/badge/_index.scss +12 -0
- package/src/styles/components/badge/_styles.scss +72 -0
- package/src/styles/components/badge/_tokens.scss +27 -0
- package/src/styles/components/bottom-sheet/_index.scss +9 -0
- package/src/styles/components/bottom-sheet/_styles.scss +77 -0
- package/src/styles/components/bottom-sheet/_tokens.scss +33 -0
- package/src/styles/components/button/_index.scss +12 -0
- package/src/styles/components/button/_styles.scss +106 -0
- package/src/styles/components/button/_tokens.scss +36 -0
- package/src/styles/components/button-toggle/_index.scss +12 -0
- package/src/styles/components/button-toggle/_styles.scss +57 -0
- package/src/styles/components/button-toggle/_tokens.scss +25 -0
- package/src/styles/components/card/_index.scss +15 -0
- package/src/styles/components/card/_styles.scss +68 -0
- package/src/styles/components/card/_tokens.scss +26 -0
- package/src/styles/components/checkbox/_index.scss +13 -0
- package/src/styles/components/checkbox/_styles.scss +108 -0
- package/src/styles/components/checkbox/_tokens.scss +25 -0
- package/src/styles/components/chips/_index.scss +12 -0
- package/src/styles/components/chips/_styles.scss +83 -0
- package/src/styles/components/chips/_tokens.scss +28 -0
- package/src/styles/components/datepicker/_index.scss +10 -0
- package/src/styles/components/datepicker/_styles.scss +203 -0
- package/src/styles/components/datepicker/_tokens.scss +50 -0
- package/src/styles/components/dialog/_index.scss +9 -0
- package/src/styles/components/dialog/_styles.scss +54 -0
- package/src/styles/components/dialog/_tokens.scss +29 -0
- package/src/styles/components/divider/_index.scss +8 -0
- package/src/styles/components/divider/_styles.scss +18 -0
- package/src/styles/components/divider/_tokens.scss +12 -0
- package/src/styles/components/expansion/_index.scss +14 -0
- package/src/styles/components/expansion/_styles.scss +128 -0
- package/src/styles/components/expansion/_tokens.scss +32 -0
- package/src/styles/components/form-field/_index.scss +13 -0
- package/src/styles/components/form-field/_styles.scss +39 -0
- package/src/styles/components/form-field/_tokens.scss +19 -0
- package/src/styles/components/grid-list/_index.scss +12 -0
- package/src/styles/components/grid-list/_styles.scss +31 -0
- package/src/styles/components/grid-list/_tokens.scss +18 -0
- package/src/styles/components/icon/_index.scss +8 -0
- package/src/styles/components/icon/_styles.scss +18 -0
- package/src/styles/components/icon/_tokens.scss +8 -0
- package/src/styles/components/input/_index.scss +13 -0
- package/src/styles/components/input/_styles.scss +111 -0
- package/src/styles/components/input/_tokens.scss +21 -0
- package/src/styles/components/list/_index.scss +12 -0
- package/src/styles/components/list/_styles.scss +87 -0
- package/src/styles/components/list/_tokens.scss +31 -0
- package/src/styles/components/menu/_index.scss +9 -0
- package/src/styles/components/menu/_styles.scss +60 -0
- package/src/styles/components/menu/_tokens.scss +33 -0
- package/src/styles/components/menubar/_index.scss +9 -0
- package/src/styles/components/menubar/_styles.scss +41 -0
- package/src/styles/components/menubar/_tokens.scss +25 -0
- package/src/styles/components/overlay/_index.scss +8 -0
- package/src/styles/components/overlay/_styles.scss +25 -0
- package/src/styles/components/overlay/_tokens.scss +21 -0
- package/src/styles/components/paginator/_index.scss +14 -0
- package/src/styles/components/paginator/_styles.scss +77 -0
- package/src/styles/components/paginator/_tokens.scss +28 -0
- package/src/styles/components/popover-edit/_index.scss +9 -0
- package/src/styles/components/popover-edit/_styles.scss +31 -0
- package/src/styles/components/popover-edit/_tokens.scss +21 -0
- package/src/styles/components/progress-bar/_index.scss +11 -0
- package/src/styles/components/progress-bar/_styles.scss +39 -0
- package/src/styles/components/progress-bar/_tokens.scss +17 -0
- package/src/styles/components/progress-spinner/_index.scss +11 -0
- package/src/styles/components/progress-spinner/_styles.scss +26 -0
- package/src/styles/components/progress-spinner/_tokens.scss +15 -0
- package/src/styles/components/radio/_index.scss +14 -0
- package/src/styles/components/radio/_styles.scss +92 -0
- package/src/styles/components/radio/_tokens.scss +24 -0
- package/src/styles/components/ripple/_index.scss +8 -0
- package/src/styles/components/ripple/_styles.scss +20 -0
- package/src/styles/components/ripple/_tokens.scss +12 -0
- package/src/styles/components/select/_index.scss +9 -0
- package/src/styles/components/select/_styles.scss +120 -0
- package/src/styles/components/select/_tokens.scss +35 -0
- package/src/styles/components/sidenav/_index.scss +14 -0
- package/src/styles/components/sidenav/_styles.scss +105 -0
- package/src/styles/components/sidenav/_tokens.scss +24 -0
- package/src/styles/components/slide-toggle/_index.scss +13 -0
- package/src/styles/components/slide-toggle/_styles.scss +86 -0
- package/src/styles/components/slide-toggle/_tokens.scss +24 -0
- package/src/styles/components/slider/_index.scss +13 -0
- package/src/styles/components/slider/_styles.scss +77 -0
- package/src/styles/components/slider/_tokens.scss +21 -0
- package/src/styles/components/snackbar/_index.scss +8 -0
- package/src/styles/components/snackbar/_styles.scss +59 -0
- package/src/styles/components/snackbar/_tokens.scss +28 -0
- package/src/styles/components/stepper/_index.scss +14 -0
- package/src/styles/components/stepper/_styles.scss +129 -0
- package/src/styles/components/stepper/_tokens.scss +44 -0
- package/src/styles/components/table/_index.scss +14 -0
- package/src/styles/components/table/_styles.scss +202 -0
- package/src/styles/components/table/_tokens.scss +47 -0
- package/src/styles/components/tabs/_index.scss +13 -0
- package/src/styles/components/tabs/_styles.scss +76 -0
- package/src/styles/components/tabs/_tokens.scss +28 -0
- package/src/styles/components/timepicker/_index.scss +9 -0
- package/src/styles/components/timepicker/_styles.scss +136 -0
- package/src/styles/components/timepicker/_tokens.scss +46 -0
- package/src/styles/components/toolbar/_index.scss +12 -0
- package/src/styles/components/toolbar/_styles.scss +41 -0
- package/src/styles/components/toolbar/_tokens.scss +17 -0
- package/src/styles/components/tooltip/_index.scss +8 -0
- package/src/styles/components/tooltip/_styles.scss +29 -0
- package/src/styles/components/tooltip/_tokens.scss +22 -0
- package/src/styles/components/tree/_index.scss +13 -0
- package/src/styles/components/tree/_styles.scss +99 -0
- package/src/styles/components/tree/_tokens.scss +38 -0
- package/src/styles/theme/_defaults.scss +50 -0
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Modal core — the shared behavior behind `openDialog` (centered) and `openBottomSheet`
|
|
3
|
+
* (bottom-docked). Builds a three-region modal panel (`__header` optional · `__content`
|
|
4
|
+
* always, scrolls · `__actions` optional) in a CDK overlay with a dimming backdrop,
|
|
5
|
+
* `blockScroll`, a focus-trap that returns focus to the opener on close, and Esc/backdrop
|
|
6
|
+
* dismissal. The BEM block (`weave-dialog` / `weave-bottom-sheet`) and the position strategy
|
|
7
|
+
* are supplied by the caller. Internal — `dialog.ts` / `bottom-sheet.ts` are the surfaces.
|
|
8
|
+
* Zero-dep.
|
|
9
|
+
*/
|
|
10
|
+
import { createOverlay, blockScroll, focusTrap, } from '../cdk/index.js';
|
|
11
|
+
let _seq = 0;
|
|
12
|
+
function toNode(content) {
|
|
13
|
+
if (typeof content === 'function')
|
|
14
|
+
return content();
|
|
15
|
+
if (typeof content === 'string')
|
|
16
|
+
return document.createTextNode(content);
|
|
17
|
+
return content;
|
|
18
|
+
}
|
|
19
|
+
/** Open a modal panel. Returns a {@link ModalRef}. */
|
|
20
|
+
export function openModal(config) {
|
|
21
|
+
const id = ++_seq;
|
|
22
|
+
const block = config.block;
|
|
23
|
+
const dismissable = config.dismissable !== false;
|
|
24
|
+
const panel = document.createElement('div');
|
|
25
|
+
panel.className = block;
|
|
26
|
+
panel.setAttribute('role', config.role ?? 'dialog');
|
|
27
|
+
panel.setAttribute('aria-modal', 'true');
|
|
28
|
+
// Header (optional) — a `header` node wins over the `title` string convenience.
|
|
29
|
+
const headerContent = config.header ?? config.title ?? null;
|
|
30
|
+
if (headerContent != null) {
|
|
31
|
+
const header = document.createElement('div');
|
|
32
|
+
header.className = `${block}__header`;
|
|
33
|
+
header.id = `${block}-title-${id}`;
|
|
34
|
+
header.append(toNode(headerContent));
|
|
35
|
+
panel.appendChild(header);
|
|
36
|
+
panel.setAttribute('aria-labelledby', header.id);
|
|
37
|
+
}
|
|
38
|
+
// Content (mandatory) — the scrolling region.
|
|
39
|
+
const content = document.createElement('div');
|
|
40
|
+
content.className = `${block}__content`;
|
|
41
|
+
content.id = `${block}-content-${id}`;
|
|
42
|
+
content.append(toNode(config.content));
|
|
43
|
+
panel.appendChild(content);
|
|
44
|
+
panel.setAttribute('aria-describedby', content.id);
|
|
45
|
+
// Actions (optional).
|
|
46
|
+
if (config.actions != null) {
|
|
47
|
+
const actions = document.createElement('div');
|
|
48
|
+
actions.className = `${block}__actions`;
|
|
49
|
+
actions.append(toNode(config.actions));
|
|
50
|
+
panel.appendChild(actions);
|
|
51
|
+
}
|
|
52
|
+
config.onPanel?.(panel);
|
|
53
|
+
const ref = createOverlay({
|
|
54
|
+
hasBackdrop: true,
|
|
55
|
+
positionStrategy: config.positionStrategy,
|
|
56
|
+
scrollStrategy: blockScroll,
|
|
57
|
+
});
|
|
58
|
+
// Modal: shield the background (inert + aria-hidden) while open; keep the backdrop clickable.
|
|
59
|
+
const trap = focusTrap(panel, {
|
|
60
|
+
restoreFocus: true,
|
|
61
|
+
inertBackground: true,
|
|
62
|
+
inertIgnore: ref.backdropElement,
|
|
63
|
+
});
|
|
64
|
+
let closed = false;
|
|
65
|
+
let result = undefined;
|
|
66
|
+
const resolvers = [];
|
|
67
|
+
function close(r) {
|
|
68
|
+
if (closed)
|
|
69
|
+
return;
|
|
70
|
+
closed = true;
|
|
71
|
+
result = r;
|
|
72
|
+
trap.deactivate(); // restores focus to the opener
|
|
73
|
+
ref.dispose();
|
|
74
|
+
config.onClose?.(r);
|
|
75
|
+
for (const resolve of resolvers)
|
|
76
|
+
resolve(r);
|
|
77
|
+
}
|
|
78
|
+
if (dismissable) {
|
|
79
|
+
ref.onBackdropClick(() => close());
|
|
80
|
+
panel.addEventListener('keydown', (event) => {
|
|
81
|
+
if (event.key === 'Escape') {
|
|
82
|
+
event.preventDefault();
|
|
83
|
+
close();
|
|
84
|
+
}
|
|
85
|
+
});
|
|
86
|
+
}
|
|
87
|
+
ref.attach(panel);
|
|
88
|
+
trap.activate(); // moves focus into the panel
|
|
89
|
+
return {
|
|
90
|
+
element: panel,
|
|
91
|
+
close,
|
|
92
|
+
afterClosed() {
|
|
93
|
+
if (closed)
|
|
94
|
+
return Promise.resolve(result);
|
|
95
|
+
return new Promise((resolve) => resolvers.push(resolve));
|
|
96
|
+
},
|
|
97
|
+
};
|
|
98
|
+
}
|
|
99
|
+
/** number → px; string passes through. Shared by dialog/bottom-sheet dimension options. */
|
|
100
|
+
export function toLength(value) {
|
|
101
|
+
return typeof value === 'number' ? `${value}px` : value;
|
|
102
|
+
}
|
|
103
|
+
//# sourceMappingURL=modal-core.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"modal-core.js","sourceRoot":"","sources":["../../src/dialog/modal-core.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* `<Expansion>` — an accordion of collapsible panels (WAI-ARIA accordion pattern).
|
|
3
|
+
*
|
|
4
|
+
* Each panel is a `<button>` header (title + a `+`/`−` marker) that toggles a
|
|
5
|
+
* `role=region` body revealed below it. The open header takes the `--field` tint;
|
|
6
|
+
* the body animates open via a `grid-template-rows` transition. **Panels are
|
|
7
|
+
* independent by default** (`multi` — any number open); pass `multi={{ false }}`
|
|
8
|
+
* for single-open (opening one closes the rest).
|
|
9
|
+
*
|
|
10
|
+
* Structural metadata is an items-prop (`panels`); each panel's **body is arbitrary
|
|
11
|
+
* content** — a `Node`, a string, or a factory `() => Node` (same shape as Dialog
|
|
12
|
+
* content) — appended into its region on mount. Open state is controlled via
|
|
13
|
+
* `value` (open panel ids) + `onChange`, or uncontrolled from `defaultOpen`.
|
|
14
|
+
*
|
|
15
|
+
* a11y: header `<button aria-expanded aria-controls>` inside a `role=heading`
|
|
16
|
+
* (level via `headingLevel`, default 3); region `role=region aria-labelledby`,
|
|
17
|
+
* `inert` + `aria-hidden` while collapsed. Up/Down/Home/End move focus between
|
|
18
|
+
* enabled headers; Enter/Space toggle (native button).
|
|
19
|
+
*
|
|
20
|
+
* import Expansion from '@weave-framework/ui/expansion';
|
|
21
|
+
* <Expansion panels={{ panels }} value={{ open() }} onChange={{ setOpen }} />
|
|
22
|
+
*/
|
|
23
|
+
import { type Signal } from '@weave-framework/runtime';
|
|
24
|
+
/** A panel body: a DOM node, a plain string, or a factory returning a node. */
|
|
25
|
+
export type ExpansionContent = Node | string | (() => Node);
|
|
26
|
+
export interface ExpansionPanel {
|
|
27
|
+
/** Stable id — what `value`/`onChange` speak in, and the open-set key. */
|
|
28
|
+
id: string;
|
|
29
|
+
/** Header title text. */
|
|
30
|
+
header: string;
|
|
31
|
+
/** Body content, revealed when the panel is open. */
|
|
32
|
+
body: ExpansionContent;
|
|
33
|
+
/** Disable just this panel (not toggleable, skipped in keyboard nav). */
|
|
34
|
+
disabled?: boolean;
|
|
35
|
+
}
|
|
36
|
+
export interface ExpansionProps {
|
|
37
|
+
/** The panels, top to bottom. */
|
|
38
|
+
panels: ExpansionPanel[];
|
|
39
|
+
/** Independent panels (any number open). Default true; false = single-open. */
|
|
40
|
+
multi?: boolean;
|
|
41
|
+
/** Controlled open set: the ids of the open panels. */
|
|
42
|
+
value?: string[];
|
|
43
|
+
/** Called with the next open set on toggle. */
|
|
44
|
+
onChange?: (openIds: string[]) => void;
|
|
45
|
+
/** Uncontrolled initial open set (ignored when `value` is provided). */
|
|
46
|
+
defaultOpen?: string[];
|
|
47
|
+
/** Disable the whole accordion. */
|
|
48
|
+
disabled?: boolean;
|
|
49
|
+
/** aria-level for each header's heading wrapper. Default 3. */
|
|
50
|
+
headingLevel?: number;
|
|
51
|
+
/** Extra classes, forwarded onto the container. */
|
|
52
|
+
class?: string;
|
|
53
|
+
}
|
|
54
|
+
export declare const template: string;
|
|
55
|
+
export interface ExpansionContext {
|
|
56
|
+
host: Signal<Element | null>;
|
|
57
|
+
panels: () => ExpansionPanel[];
|
|
58
|
+
rootClass: () => string;
|
|
59
|
+
headingLevel: () => number;
|
|
60
|
+
headerId: (panel: ExpansionPanel) => string;
|
|
61
|
+
regionId: (panel: ExpansionPanel) => string;
|
|
62
|
+
expandedAttr: (panel: ExpansionPanel) => string;
|
|
63
|
+
openAttr: (panel: ExpansionPanel) => string | undefined;
|
|
64
|
+
hiddenAttr: (panel: ExpansionPanel) => string | undefined;
|
|
65
|
+
disabledAttr: (panel: ExpansionPanel) => string | undefined;
|
|
66
|
+
isClosed: (panel: ExpansionPanel) => boolean;
|
|
67
|
+
toggle: (panel: ExpansionPanel) => void;
|
|
68
|
+
onHeaderKeydown: (event: KeyboardEvent) => void;
|
|
69
|
+
}
|
|
70
|
+
export declare function setup(props: ExpansionProps): ExpansionContext;
|
|
71
|
+
//# sourceMappingURL=expansion.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"expansion.d.ts","sourceRoot":"","sources":["../../src/expansion/expansion.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,OAAO,EAAmB,KAAK,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAExE,+EAA+E;AAC/E,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,MAAM,GAAG,CAAC,MAAM,IAAI,CAAC,CAAC;AAE5D,MAAM,WAAW,cAAc;IAC7B,0EAA0E;IAC1E,EAAE,EAAE,MAAM,CAAC;IACX,yBAAyB;IACzB,MAAM,EAAE,MAAM,CAAC;IACf,qDAAqD;IACrD,IAAI,EAAE,gBAAgB,CAAC;IACvB,yEAAyE;IACzE,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,cAAc;IAC7B,iCAAiC;IACjC,MAAM,EAAE,cAAc,EAAE,CAAC;IACzB,+EAA+E;IAC/E,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACvC,wEAAwE;IACxE,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+DAA+D;IAC/D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,QAAQ,EAAE,MAoBb,CAAC;AAEX,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC;IAC7B,MAAM,EAAE,MAAM,cAAc,EAAE,CAAC;IAC/B,SAAS,EAAE,MAAM,MAAM,CAAC;IACxB,YAAY,EAAE,MAAM,MAAM,CAAC;IAC3B,QAAQ,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,MAAM,CAAC;IAC5C,QAAQ,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,MAAM,CAAC;IAC5C,YAAY,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,MAAM,CAAC;IAChD,QAAQ,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,MAAM,GAAG,SAAS,CAAC;IACxD,UAAU,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,MAAM,GAAG,SAAS,CAAC;IAC1D,YAAY,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,MAAM,GAAG,SAAS,CAAC;IAC5D,QAAQ,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,OAAO,CAAC;IAC7C,MAAM,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IACxC,eAAe,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;CACjD;AAUD,wBAAgB,KAAK,CAAC,KAAK,EAAE,cAAc,GAAG,gBAAgB,CAuE7D"}
|
|
@@ -0,0 +1,127 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* `<Expansion>` — an accordion of collapsible panels (WAI-ARIA accordion pattern).
|
|
3
|
+
*
|
|
4
|
+
* Each panel is a `<button>` header (title + a `+`/`−` marker) that toggles a
|
|
5
|
+
* `role=region` body revealed below it. The open header takes the `--field` tint;
|
|
6
|
+
* the body animates open via a `grid-template-rows` transition. **Panels are
|
|
7
|
+
* independent by default** (`multi` — any number open); pass `multi={{ false }}`
|
|
8
|
+
* for single-open (opening one closes the rest).
|
|
9
|
+
*
|
|
10
|
+
* Structural metadata is an items-prop (`panels`); each panel's **body is arbitrary
|
|
11
|
+
* content** — a `Node`, a string, or a factory `() => Node` (same shape as Dialog
|
|
12
|
+
* content) — appended into its region on mount. Open state is controlled via
|
|
13
|
+
* `value` (open panel ids) + `onChange`, or uncontrolled from `defaultOpen`.
|
|
14
|
+
*
|
|
15
|
+
* a11y: header `<button aria-expanded aria-controls>` inside a `role=heading`
|
|
16
|
+
* (level via `headingLevel`, default 3); region `role=region aria-labelledby`,
|
|
17
|
+
* `inert` + `aria-hidden` while collapsed. Up/Down/Home/End move focus between
|
|
18
|
+
* enabled headers; Enter/Space toggle (native button).
|
|
19
|
+
*
|
|
20
|
+
* import Expansion from '@weave-framework/ui/expansion';
|
|
21
|
+
* <Expansion panels={{ panels }} value={{ open() }} onChange={{ setOpen }} />
|
|
22
|
+
*/
|
|
23
|
+
import { signal, onMount } from '@weave-framework/runtime';
|
|
24
|
+
export const template = '<div class={{ rootClass() }} ref={{ host }}>' +
|
|
25
|
+
'@for (panel of panels(); track panel.id) {' +
|
|
26
|
+
'<div class="weave-expansion__panel">' +
|
|
27
|
+
'<div class="weave-expansion__heading" role="heading" aria-level={{ headingLevel() }}>' +
|
|
28
|
+
'<button class="weave-expansion__header" type="button" id={{ headerId(panel) }}' +
|
|
29
|
+
' aria-expanded={{ expandedAttr(panel) }} aria-controls={{ regionId(panel) }}' +
|
|
30
|
+
' aria-disabled={{ disabledAttr(panel) }} on:click={{ () => toggle(panel) }}' +
|
|
31
|
+
' on:keydown={{ onHeaderKeydown }}>' +
|
|
32
|
+
'<span class="weave-expansion__title">{{ panel.header }}</span>' +
|
|
33
|
+
'<span class="weave-expansion__marker" aria-hidden="true"></span>' +
|
|
34
|
+
'</button>' +
|
|
35
|
+
'</div>' +
|
|
36
|
+
'<div class="weave-expansion__region" id={{ regionId(panel) }} role="region"' +
|
|
37
|
+
' aria-labelledby={{ headerId(panel) }} data-open={{ openAttr(panel) }}' +
|
|
38
|
+
' aria-hidden={{ hiddenAttr(panel) }} .inert={{ isClosed(panel) }}>' +
|
|
39
|
+
'<div class="weave-expansion__body"><div class="weave-expansion__content"></div></div>' +
|
|
40
|
+
'</div>' +
|
|
41
|
+
'</div>' +
|
|
42
|
+
'}' +
|
|
43
|
+
'</div>';
|
|
44
|
+
let _uid = 0;
|
|
45
|
+
function toNode(content) {
|
|
46
|
+
if (typeof content === 'function')
|
|
47
|
+
return content();
|
|
48
|
+
if (typeof content === 'string')
|
|
49
|
+
return document.createTextNode(content);
|
|
50
|
+
return content;
|
|
51
|
+
}
|
|
52
|
+
export function setup(props) {
|
|
53
|
+
const host = signal(null);
|
|
54
|
+
const uid = (_uid += 1);
|
|
55
|
+
const uncontrolled = signal(props.defaultOpen ?? []);
|
|
56
|
+
const panels = () => props.panels ?? [];
|
|
57
|
+
const multi = () => props.multi !== false;
|
|
58
|
+
const openIds = () => (props.value !== undefined ? (props.value ?? []) : uncontrolled());
|
|
59
|
+
const isOpen = (panel) => openIds().includes(panel.id);
|
|
60
|
+
const isPanelDisabled = (panel) => !!props.disabled || !!panel.disabled;
|
|
61
|
+
const headerId = (panel) => `weave-expansion-${uid}-${panel.id}-header`;
|
|
62
|
+
const regionId = (panel) => `weave-expansion-${uid}-${panel.id}-region`;
|
|
63
|
+
const toggle = (panel) => {
|
|
64
|
+
if (isPanelDisabled(panel))
|
|
65
|
+
return;
|
|
66
|
+
const open = isOpen(panel);
|
|
67
|
+
let next;
|
|
68
|
+
if (multi()) {
|
|
69
|
+
next = open ? openIds().filter((id) => id !== panel.id) : [...openIds(), panel.id];
|
|
70
|
+
}
|
|
71
|
+
else {
|
|
72
|
+
next = open ? [] : [panel.id];
|
|
73
|
+
}
|
|
74
|
+
if (props.value === undefined)
|
|
75
|
+
uncontrolled.set(next);
|
|
76
|
+
props.onChange?.(next);
|
|
77
|
+
};
|
|
78
|
+
const onHeaderKeydown = (event) => {
|
|
79
|
+
if (!['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key))
|
|
80
|
+
return;
|
|
81
|
+
const el = host();
|
|
82
|
+
if (!el)
|
|
83
|
+
return;
|
|
84
|
+
const headers = Array.from(el.querySelectorAll('.weave-expansion__header')).filter((h) => h.getAttribute('aria-disabled') !== 'true');
|
|
85
|
+
if (!headers.length)
|
|
86
|
+
return;
|
|
87
|
+
const current = headers.indexOf(document.activeElement);
|
|
88
|
+
let index;
|
|
89
|
+
if (event.key === 'Home')
|
|
90
|
+
index = 0;
|
|
91
|
+
else if (event.key === 'End')
|
|
92
|
+
index = headers.length - 1;
|
|
93
|
+
else if (event.key === 'ArrowDown')
|
|
94
|
+
index = current < 0 ? 0 : (current + 1) % headers.length;
|
|
95
|
+
else
|
|
96
|
+
index = current < 0 ? headers.length - 1 : (current - 1 + headers.length) % headers.length;
|
|
97
|
+
headers[index].focus();
|
|
98
|
+
event.preventDefault();
|
|
99
|
+
};
|
|
100
|
+
// Bodies are arbitrary content — append them into their regions once the regions
|
|
101
|
+
// are in the DOM (deferred to onMount, like Form Field's slotted-control wiring).
|
|
102
|
+
onMount(() => {
|
|
103
|
+
const el = host();
|
|
104
|
+
if (!el)
|
|
105
|
+
return;
|
|
106
|
+
const bodies = el.querySelectorAll('.weave-expansion__content');
|
|
107
|
+
panels().forEach((panel, i) => {
|
|
108
|
+
bodies[i]?.append(toNode(panel.body));
|
|
109
|
+
});
|
|
110
|
+
});
|
|
111
|
+
return {
|
|
112
|
+
host,
|
|
113
|
+
panels,
|
|
114
|
+
rootClass: () => (props.class ? `weave-expansion ${props.class}` : 'weave-expansion'),
|
|
115
|
+
headingLevel: () => props.headingLevel ?? 3,
|
|
116
|
+
headerId,
|
|
117
|
+
regionId,
|
|
118
|
+
expandedAttr: (panel) => (isOpen(panel) ? 'true' : 'false'),
|
|
119
|
+
openAttr: (panel) => (isOpen(panel) ? 'true' : undefined),
|
|
120
|
+
hiddenAttr: (panel) => (isOpen(panel) ? undefined : 'true'),
|
|
121
|
+
disabledAttr: (panel) => (isPanelDisabled(panel) ? 'true' : undefined),
|
|
122
|
+
isClosed: (panel) => !isOpen(panel),
|
|
123
|
+
toggle,
|
|
124
|
+
onHeaderKeydown,
|
|
125
|
+
};
|
|
126
|
+
}
|
|
127
|
+
//# sourceMappingURL=expansion.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"expansion.js","sourceRoot":"","sources":["../../src/expansion/expansion.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* `<FormField>` — the lean label / hint / error frame around a control (NOT Angular's
|
|
3
|
+
* heavy `mat-form-field`). A `__label` above (uppercase 10px), the control in the default
|
|
4
|
+
* slot, and a `__hint` / `__error` line below (11px). It **auto-wires** the slotted
|
|
5
|
+
* control: generates an `id`, points the label's `for` at it, links the hint/error via
|
|
6
|
+
* `aria-describedby`, and sets `aria-invalid` in the error state — so the simplest usage
|
|
7
|
+
* is a couple of lines and fully accessible.
|
|
8
|
+
*
|
|
9
|
+
* Error state is either **manual** (`error` prop) or **auto-derived** from a bound forms
|
|
10
|
+
* control (`control` — invalid AND touched → error). In the error state the label + line
|
|
11
|
+
* turn `error` red; the control's own underline reddens off the `aria-invalid` this sets.
|
|
12
|
+
*
|
|
13
|
+
* import FormField from '@weave-framework/ui/form-field';
|
|
14
|
+
* <FormField label={{ 'Email' }} hint={{ 'We never share it' }}>
|
|
15
|
+
* <Input control={{ form.controls.email }} />
|
|
16
|
+
* </FormField>
|
|
17
|
+
* <FormField label={{ 'Email' }} control={{ form.controls.email }}>…</FormField>
|
|
18
|
+
*/
|
|
19
|
+
import { type Signal } from '@weave-framework/runtime';
|
|
20
|
+
/** The subset of a `@weave-framework/forms` `Field` FormField reads for auto-error. */
|
|
21
|
+
export interface FormFieldControl {
|
|
22
|
+
touched?: () => boolean;
|
|
23
|
+
error?: () => string | null;
|
|
24
|
+
}
|
|
25
|
+
export interface FormFieldProps {
|
|
26
|
+
/** Label text (uppercase). Omit for an unlabelled field. */
|
|
27
|
+
label?: string;
|
|
28
|
+
/** Hint shown below when there's no error. */
|
|
29
|
+
hint?: string;
|
|
30
|
+
/** Manual error message — sets the error state when non-empty. */
|
|
31
|
+
error?: string;
|
|
32
|
+
/** A forms control — error state auto-derives from `touched() && error()`. */
|
|
33
|
+
control?: FormFieldControl;
|
|
34
|
+
/** Extra classes, forwarded onto the root. */
|
|
35
|
+
class?: string;
|
|
36
|
+
}
|
|
37
|
+
export declare const template: string;
|
|
38
|
+
export interface FormFieldContext {
|
|
39
|
+
labelRef: Signal<HTMLElement | null>;
|
|
40
|
+
controlWrap: Signal<HTMLElement | null>;
|
|
41
|
+
rootClass: () => string;
|
|
42
|
+
label: () => string | undefined;
|
|
43
|
+
message: () => string | null;
|
|
44
|
+
messageClass: () => string;
|
|
45
|
+
messageId: () => string;
|
|
46
|
+
}
|
|
47
|
+
export declare function setup(props: FormFieldProps): FormFieldContext;
|
|
48
|
+
//# sourceMappingURL=form-field.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"form-field.d.ts","sourceRoot":"","sources":["../../src/form-field/form-field.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,EAA2B,KAAK,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAEhF,uFAAuF;AACvF,MAAM,WAAW,gBAAgB;IAC/B,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,MAAM,GAAG,IAAI,CAAC;CAC7B;AAED,MAAM,WAAW,cAAc;IAC7B,4DAA4D;IAC5D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8CAA8C;IAC9C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kEAAkE;IAClE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8EAA8E;IAC9E,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,8CAA8C;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAID,eAAO,MAAM,QAAQ,EAAE,MAKb,CAAC;AAEX,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,MAAM,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACrC,WAAW,EAAE,MAAM,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACxC,SAAS,EAAE,MAAM,MAAM,CAAC;IACxB,KAAK,EAAE,MAAM,MAAM,GAAG,SAAS,CAAC;IAChC,OAAO,EAAE,MAAM,MAAM,GAAG,IAAI,CAAC;IAC7B,YAAY,EAAE,MAAM,MAAM,CAAC;IAC3B,SAAS,EAAE,MAAM,MAAM,CAAC;CACzB;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,cAAc,GAAG,gBAAgB,CAsD7D"}
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* `<FormField>` — the lean label / hint / error frame around a control (NOT Angular's
|
|
3
|
+
* heavy `mat-form-field`). A `__label` above (uppercase 10px), the control in the default
|
|
4
|
+
* slot, and a `__hint` / `__error` line below (11px). It **auto-wires** the slotted
|
|
5
|
+
* control: generates an `id`, points the label's `for` at it, links the hint/error via
|
|
6
|
+
* `aria-describedby`, and sets `aria-invalid` in the error state — so the simplest usage
|
|
7
|
+
* is a couple of lines and fully accessible.
|
|
8
|
+
*
|
|
9
|
+
* Error state is either **manual** (`error` prop) or **auto-derived** from a bound forms
|
|
10
|
+
* control (`control` — invalid AND touched → error). In the error state the label + line
|
|
11
|
+
* turn `error` red; the control's own underline reddens off the `aria-invalid` this sets.
|
|
12
|
+
*
|
|
13
|
+
* import FormField from '@weave-framework/ui/form-field';
|
|
14
|
+
* <FormField label={{ 'Email' }} hint={{ 'We never share it' }}>
|
|
15
|
+
* <Input control={{ form.controls.email }} />
|
|
16
|
+
* </FormField>
|
|
17
|
+
* <FormField label={{ 'Email' }} control={{ form.controls.email }}>…</FormField>
|
|
18
|
+
*/
|
|
19
|
+
import { signal, effect, onMount } from '@weave-framework/runtime';
|
|
20
|
+
let _uid = 0;
|
|
21
|
+
export const template = '<div class={{ rootClass() }}>' +
|
|
22
|
+
'@if (label()) {<label class="weave-form-field__label" ref={{ labelRef }}>{{ label() }}</label>}' +
|
|
23
|
+
'<div class="weave-form-field__control" ref={{ controlWrap }}><slot></slot></div>' +
|
|
24
|
+
'@if (message()) {<span class={{ messageClass() }} id={{ messageId() }}>{{ message() }}</span>}' +
|
|
25
|
+
'</div>';
|
|
26
|
+
export function setup(props) {
|
|
27
|
+
const labelRef = signal(null);
|
|
28
|
+
const controlWrap = signal(null);
|
|
29
|
+
const id = `weave-form-field-${(_uid += 1)}`;
|
|
30
|
+
const messageId = `${id}-message`;
|
|
31
|
+
// Error state: manual `error` prop wins; else the bound control's touched-and-invalid.
|
|
32
|
+
const activeError = () => {
|
|
33
|
+
if (props.error)
|
|
34
|
+
return props.error;
|
|
35
|
+
const c = props.control;
|
|
36
|
+
if (c && c.touched?.() && c.error?.())
|
|
37
|
+
return c.error() ?? null;
|
|
38
|
+
return null;
|
|
39
|
+
};
|
|
40
|
+
const invalid = () => activeError() !== null;
|
|
41
|
+
const message = () => activeError() ?? props.hint ?? null;
|
|
42
|
+
// Auto-wire the slotted control: id ↔ label `for`, aria-describedby ↔ the message,
|
|
43
|
+
// aria-invalid in the error state. Deferred to onMount so the slotted control is in
|
|
44
|
+
// the DOM; the inner effect then re-runs as the message / error state changes.
|
|
45
|
+
onMount(() => {
|
|
46
|
+
effect(() => {
|
|
47
|
+
const wrap = controlWrap();
|
|
48
|
+
if (!wrap)
|
|
49
|
+
return;
|
|
50
|
+
const control = wrap.querySelector('input, select, textarea');
|
|
51
|
+
if (!control)
|
|
52
|
+
return;
|
|
53
|
+
if (!control.id)
|
|
54
|
+
control.id = id;
|
|
55
|
+
const label = labelRef();
|
|
56
|
+
if (label)
|
|
57
|
+
label.setAttribute('for', control.id);
|
|
58
|
+
if (message())
|
|
59
|
+
control.setAttribute('aria-describedby', messageId);
|
|
60
|
+
else
|
|
61
|
+
control.removeAttribute('aria-describedby');
|
|
62
|
+
// Only manage aria-invalid when this field owns the error signal, so we don't
|
|
63
|
+
// fight a control that sets its own (e.g. an Input bound to the same field).
|
|
64
|
+
if (props.error !== undefined || props.control) {
|
|
65
|
+
if (invalid())
|
|
66
|
+
control.setAttribute('aria-invalid', 'true');
|
|
67
|
+
else
|
|
68
|
+
control.removeAttribute('aria-invalid');
|
|
69
|
+
}
|
|
70
|
+
});
|
|
71
|
+
});
|
|
72
|
+
return {
|
|
73
|
+
labelRef,
|
|
74
|
+
controlWrap,
|
|
75
|
+
rootClass: () => {
|
|
76
|
+
const parts = ['weave-form-field'];
|
|
77
|
+
if (invalid())
|
|
78
|
+
parts.push('weave-form-field--invalid');
|
|
79
|
+
if (props.class)
|
|
80
|
+
parts.push(props.class);
|
|
81
|
+
return parts.join(' ');
|
|
82
|
+
},
|
|
83
|
+
label: () => props.label,
|
|
84
|
+
message,
|
|
85
|
+
messageClass: () => activeError() !== null ? 'weave-form-field__error' : 'weave-form-field__hint',
|
|
86
|
+
messageId: () => messageId,
|
|
87
|
+
};
|
|
88
|
+
}
|
|
89
|
+
//# sourceMappingURL=form-field.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"form-field.js","sourceRoot":"","sources":["../../src/form-field/form-field.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* `<GridList>` — a responsive grid of square tiles (the Weave gallery: `repeat(auto-fill,
|
|
3
|
+
* minmax(96px, 1fr))`, 1px hairline gaps, one tile optionally accent-filled). Pure layout
|
|
4
|
+
* — a CSS grid you compose from the part classes; the tiles are your content:
|
|
5
|
+
*
|
|
6
|
+
* <GridList>
|
|
7
|
+
* <div class="weave-grid-list__tile">A</div>
|
|
8
|
+
* <div class="weave-grid-list__tile weave-grid-list__tile--accent">B</div>
|
|
9
|
+
* <div class="weave-grid-list__tile">C</div>
|
|
10
|
+
* </GridList>
|
|
11
|
+
*
|
|
12
|
+
* No behavior beyond forwarding `class`. Reflows with no JS (the grid auto-fills columns
|
|
13
|
+
* to the container width). Set a semantic role (`list`, `grid`) on it yourself if the
|
|
14
|
+
* context calls for one — the component stays an unopinionated layout container.
|
|
15
|
+
*/
|
|
16
|
+
export interface GridListProps {
|
|
17
|
+
/** Extra classes, forwarded onto the container. */
|
|
18
|
+
class?: string;
|
|
19
|
+
}
|
|
20
|
+
export declare const template: string;
|
|
21
|
+
export interface GridListContext {
|
|
22
|
+
gridListClass: () => string;
|
|
23
|
+
}
|
|
24
|
+
export declare function setup(props: GridListProps): GridListContext;
|
|
25
|
+
//# sourceMappingURL=grid-list.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"grid-list.d.ts","sourceRoot":"","sources":["../../src/grid-list/grid-list.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,MAAM,WAAW,aAAa;IAC5B,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,QAAQ,EAAE,MAA+D,CAAC;AAEvF,MAAM,WAAW,eAAe;IAC9B,aAAa,EAAE,MAAM,MAAM,CAAC;CAC7B;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,aAAa,GAAG,eAAe,CAI3D"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* `<GridList>` — a responsive grid of square tiles (the Weave gallery: `repeat(auto-fill,
|
|
3
|
+
* minmax(96px, 1fr))`, 1px hairline gaps, one tile optionally accent-filled). Pure layout
|
|
4
|
+
* — a CSS grid you compose from the part classes; the tiles are your content:
|
|
5
|
+
*
|
|
6
|
+
* <GridList>
|
|
7
|
+
* <div class="weave-grid-list__tile">A</div>
|
|
8
|
+
* <div class="weave-grid-list__tile weave-grid-list__tile--accent">B</div>
|
|
9
|
+
* <div class="weave-grid-list__tile">C</div>
|
|
10
|
+
* </GridList>
|
|
11
|
+
*
|
|
12
|
+
* No behavior beyond forwarding `class`. Reflows with no JS (the grid auto-fills columns
|
|
13
|
+
* to the container width). Set a semantic role (`list`, `grid`) on it yourself if the
|
|
14
|
+
* context calls for one — the component stays an unopinionated layout container.
|
|
15
|
+
*/
|
|
16
|
+
export const template = '<div class={{ gridListClass() }}><slot></slot></div>';
|
|
17
|
+
export function setup(props) {
|
|
18
|
+
return {
|
|
19
|
+
gridListClass: () => (props.class ? `weave-grid-list ${props.class}` : 'weave-grid-list'),
|
|
20
|
+
};
|
|
21
|
+
}
|
|
22
|
+
//# sourceMappingURL=grid-list.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"grid-list.js","sourceRoot":"","sources":["../../src/grid-list/grid-list.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAOH,MAAM,CAAC,MAAM,QAAQ,GAAW,sDAAsD,CAAC;AAMvF,MAAM,UAAU,KAAK,CAAC,KAAoB;IACxC,OAAO;QACL,aAAa,EAAE,GAAW,EAAE,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,mBAAmB,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,iBAAiB,CAAC;KAClG,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* `<Icon>` — renders an inline SVG from the active icon registry (or a directly
|
|
3
|
+
* supplied `svg` / `src`). Weave: 18px, 1.4 hairline stroke, `currentColor` (so an
|
|
4
|
+
* icon takes its parent's text color). Lean DOM — a single host `<span>` whose
|
|
5
|
+
* innerHTML is the SVG (Weave has no `{@html}`, so we set it via a ref + effect).
|
|
6
|
+
*
|
|
7
|
+
* Accessibility: pass `label` for a meaningful icon (`role="img"` + `aria-label`);
|
|
8
|
+
* with no label the icon is decorative (`aria-hidden`), the WAI-ARIA default.
|
|
9
|
+
*
|
|
10
|
+
* Reactive: changing `name` (or the registry's async cache) re-renders in place.
|
|
11
|
+
*
|
|
12
|
+
* import Icon, { configureIcons } from '@weave-framework/ui/icon';
|
|
13
|
+
* <Icon name={{ 'search' }} />
|
|
14
|
+
* <Icon name={{ 'trash-2' }} label={{ 'Delete' }} />
|
|
15
|
+
*/
|
|
16
|
+
import { type Signal } from '@weave-framework/runtime';
|
|
17
|
+
export { configureIcons, createIconRegistry, activeIcons, inlineIcons, spriteIcons, IconContext, } from './icons.js';
|
|
18
|
+
export type { IconRegistry, IconConfig, IconSource } from './icons.js';
|
|
19
|
+
export interface IconProps {
|
|
20
|
+
/** Name to look up in the active registry (built-in Lucide set by default). */
|
|
21
|
+
name?: string;
|
|
22
|
+
/** A complete `<svg>…</svg>` string to render directly (bypasses the registry). */
|
|
23
|
+
svg?: string;
|
|
24
|
+
/** URL of a standalone SVG file to fetch and render (bypasses the registry). */
|
|
25
|
+
src?: string;
|
|
26
|
+
/** Accessible label. Present → `role="img"`; absent → decorative (`aria-hidden`). */
|
|
27
|
+
label?: string;
|
|
28
|
+
}
|
|
29
|
+
/**
|
|
30
|
+
* Sanitize an SVG string before it goes into `innerHTML` (zero-dep, native `DOMParser`). Parsed as
|
|
31
|
+
* `image/svg+xml`, so nothing executes during parsing; `<script>`/`<foreignObject>`, every `on*`
|
|
32
|
+
* event-handler attribute, and `javascript:` URLs are removed. Returns '' for non-SVG / malformed
|
|
33
|
+
* input. Guards the `svg`/`src` inputs (a `<svg onload=…>` would otherwise run on insertion).
|
|
34
|
+
*/
|
|
35
|
+
export declare function sanitizeSvg(markup: string): string;
|
|
36
|
+
export declare const template: string;
|
|
37
|
+
export declare function setup(props: IconProps): {
|
|
38
|
+
host: Signal<Element | null>;
|
|
39
|
+
};
|
|
40
|
+
//# sourceMappingURL=icon.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../src/icon/icon.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAkB,KAAK,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAIvE,OAAO,EACL,cAAc,EACd,kBAAkB,EAClB,WAAW,EACX,WAAW,EACX,WAAW,EACX,WAAW,GACZ,MAAM,YAAY,CAAC;AACpB,YAAY,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAEvE,MAAM,WAAW,SAAS;IACxB,+EAA+E;IAC/E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mFAAmF;IACnF,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,gFAAgF;IAChF,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,qFAAqF;IACrF,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAoBD;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAOlD;AAED,eAAO,MAAM,QAAQ,EAAE,MAA0D,CAAC;AAElF,wBAAgB,KAAK,CAAC,KAAK,EAAE,SAAS,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC,OAAO,GAAG,IAAI,CAAC,CAAA;CAAE,CA0CxE"}
|