@bitforgehq/ui 0.3.0
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/CHANGELOG.md +3665 -0
- package/LICENSE +21 -0
- package/README.md +175 -0
- package/ai/MANIFEST.index.json +383 -0
- package/ai/MANIFEST.json +7528 -0
- package/ai/REFERENCE.index.json +1461 -0
- package/ai/REFERENCE.json +7213 -0
- package/ai/UI_GUIDE.md +1159 -0
- package/ai/components/action-bar.md +209 -0
- package/ai/components/action-sheet.md +526 -0
- package/ai/components/alert-dialog.md +509 -0
- package/ai/components/alert.md +376 -0
- package/ai/components/avatar.md +146 -0
- package/ai/components/back-button.md +286 -0
- package/ai/components/badge.md +171 -0
- package/ai/components/button.md +431 -0
- package/ai/components/card.md +303 -0
- package/ai/components/checkbox.md +418 -0
- package/ai/components/chip-group.md +205 -0
- package/ai/components/chip.md +300 -0
- package/ai/components/content.md +474 -0
- package/ai/components/desktop-toast.md +420 -0
- package/ai/components/dialog.md +962 -0
- package/ai/components/empty-state.md +146 -0
- package/ai/components/field.md +319 -0
- package/ai/components/header.md +809 -0
- package/ai/components/icon-button.md +221 -0
- package/ai/components/icon.md +176 -0
- package/ai/components/input.md +455 -0
- package/ai/components/list-item.md +326 -0
- package/ai/components/list.md +178 -0
- package/ai/components/menu-button.md +377 -0
- package/ai/components/menu.md +661 -0
- package/ai/components/modal.md +613 -0
- package/ai/components/number-input.md +423 -0
- package/ai/components/page.md +299 -0
- package/ai/components/progress.md +215 -0
- package/ai/components/radio-group.md +432 -0
- package/ai/components/refresher.md +377 -0
- package/ai/components/segmented.md +517 -0
- package/ai/components/select.md +510 -0
- package/ai/components/sheet.md +845 -0
- package/ai/components/spinner.md +171 -0
- package/ai/components/stack-outlet.md +661 -0
- package/ai/components/tab-bar.md +427 -0
- package/ai/components/tab.md +295 -0
- package/ai/components/tabs.md +408 -0
- package/ai/components/textarea.md +371 -0
- package/ai/components/toast.md +522 -0
- package/ai/components/toggle.md +387 -0
- package/ai/reference/bf-action-directive.md +21 -0
- package/ai/reference/bf-action-sheet-action-role.md +27 -0
- package/ai/reference/bf-action-sheet-action.md +28 -0
- package/ai/reference/bf-action-sheet-options.md +28 -0
- package/ai/reference/bf-action-sheet-service.md +33 -0
- package/ai/reference/bf-alert-dialog-button-role.md +27 -0
- package/ai/reference/bf-alert-dialog-button.md +27 -0
- package/ai/reference/bf-alert-dialog-options.md +29 -0
- package/ai/reference/bf-alert-dialog-service.md +34 -0
- package/ai/reference/bf-alert-variant.md +28 -0
- package/ai/reference/bf-autocapitalize.md +30 -0
- package/ai/reference/bf-avatar-size.md +27 -0
- package/ai/reference/bf-avatar-variant.md +28 -0
- package/ai/reference/bf-back-at-root.md +28 -0
- package/ai/reference/bf-back-button-service.md +40 -0
- package/ai/reference/bf-badge-variant.md +29 -0
- package/ai/reference/bf-button-size.md +29 -0
- package/ai/reference/bf-button-type.md +28 -0
- package/ai/reference/bf-button-variant.md +29 -0
- package/ai/reference/bf-card-padding.md +26 -0
- package/ai/reference/bf-card-variant.md +28 -0
- package/ai/reference/bf-chip-group-mode.md +27 -0
- package/ai/reference/bf-chip-variant.md +26 -0
- package/ai/reference/bf-compare-with.md +24 -0
- package/ai/reference/bf-component-overlay-ref.md +33 -0
- package/ai/reference/bf-confirm-button-role.md +26 -0
- package/ai/reference/bf-confirm-button.md +27 -0
- package/ai/reference/bf-confirm-options.md +31 -0
- package/ai/reference/bf-confirm-size.md +26 -0
- package/ai/reference/bf-content-scroll-event.md +21 -0
- package/ai/reference/bf-defaults-options.md +32 -0
- package/ai/reference/bf-defaults.md +28 -0
- package/ai/reference/bf-desktop-toast-config.md +28 -0
- package/ai/reference/bf-desktop-toast-harness.md +33 -0
- package/ai/reference/bf-desktop-toast-options.md +28 -0
- package/ai/reference/bf-desktop-toast-position.md +28 -0
- package/ai/reference/bf-desktop-toast-service.md +42 -0
- package/ai/reference/bf-dialog-config.md +44 -0
- package/ai/reference/bf-dialog-harness.md +52 -0
- package/ai/reference/bf-dialog-ref.md +44 -0
- package/ai/reference/bf-dialog-role.md +26 -0
- package/ai/reference/bf-dialog-service.md +55 -0
- package/ai/reference/bf-dialog-size.md +31 -0
- package/ai/reference/bf-dialog-template-context.md +32 -0
- package/ai/reference/bf-empty-state-heading-level.md +26 -0
- package/ai/reference/bf-enter-key-hint.md +31 -0
- package/ai/reference/bf-field-control-class.md +32 -0
- package/ai/reference/bf-field-control-state.md +28 -0
- package/ai/reference/bf-field-size.md +29 -0
- package/ai/reference/bf-haptics-impact-style.md +27 -0
- package/ai/reference/bf-haptics-notification-type.md +27 -0
- package/ai/reference/bf-haptics-service.md +41 -0
- package/ai/reference/bf-harness-filters.md +29 -0
- package/ai/reference/bf-horizontal-scroll-directive.md +129 -0
- package/ai/reference/bf-icon-button-variant.md +28 -0
- package/ai/reference/bf-icon-size.md +27 -0
- package/ai/reference/bf-input-autocapitalize.md +36 -0
- package/ai/reference/bf-input-enter-key-hint.md +38 -0
- package/ai/reference/bf-input-input-mode.md +38 -0
- package/ai/reference/bf-input-mode.md +32 -0
- package/ai/reference/bf-input-type.md +35 -0
- package/ai/reference/bf-jsdom-shim-options.md +22 -0
- package/ai/reference/bf-keyboard-assist-behavior.md +26 -0
- package/ai/reference/bf-keyboard-assist-directive.md +185 -0
- package/ai/reference/bf-keyboard-phase.md +30 -0
- package/ai/reference/bf-keyboard-service.md +50 -0
- package/ai/reference/bf-labels-overrides.md +26 -0
- package/ai/reference/bf-labels.md +44 -0
- package/ai/reference/bf-menu-button-harness.md +40 -0
- package/ai/reference/bf-menu-button-variant.md +27 -0
- package/ai/reference/bf-menu-divider-directive.md +13 -0
- package/ai/reference/bf-menu-group-directive.md +14 -0
- package/ai/reference/bf-menu-harness.md +55 -0
- package/ai/reference/bf-menu-item-checkbox-directive.md +31 -0
- package/ai/reference/bf-menu-item-directive.md +31 -0
- package/ai/reference/bf-menu-item-harness.md +52 -0
- package/ai/reference/bf-menu-item-radio-directive.md +29 -0
- package/ai/reference/bf-menu-placement.md +29 -0
- package/ai/reference/bf-menu-trigger-directive.md +46 -0
- package/ai/reference/bf-modal-options.md +30 -0
- package/ai/reference/bf-modal-presentation.md +26 -0
- package/ai/reference/bf-modal-service.md +38 -0
- package/ai/reference/bf-nav-controller.md +59 -0
- package/ai/reference/bf-nav-direction.md +23 -0
- package/ai/reference/bf-nav-target.md +21 -0
- package/ai/reference/bf-number-input-mode.md +28 -0
- package/ai/reference/bf-number-input-step.md +25 -0
- package/ai/reference/bf-overlay-auto-focus.md +29 -0
- package/ai/reference/bf-overlay-controller.md +22 -0
- package/ai/reference/bf-overlay-host.md +36 -0
- package/ai/reference/bf-overlay-options.md +53 -0
- package/ai/reference/bf-overlay-position.md +30 -0
- package/ai/reference/bf-overlay-ref.md +53 -0
- package/ai/reference/bf-overlay-role.md +27 -0
- package/ai/reference/bf-overlay-service.md +53 -0
- package/ai/reference/bf-overlay-stack-options.md +24 -0
- package/ai/reference/bf-overlay-stack.md +81 -0
- package/ai/reference/bf-overlay-template-context.md +24 -0
- package/ai/reference/bf-overscroll-stretch-directive.md +163 -0
- package/ai/reference/bf-page-context.md +24 -0
- package/ai/reference/bf-platform-service.md +53 -0
- package/ai/reference/bf-platform.md +28 -0
- package/ai/reference/bf-progress-size.md +26 -0
- package/ai/reference/bf-progress-tone.md +28 -0
- package/ai/reference/bf-radio-group-harness.md +49 -0
- package/ai/reference/bf-radio-group-orientation.md +26 -0
- package/ai/reference/bf-radio-option.md +30 -0
- package/ai/reference/bf-refresher-refresh-event.md +22 -0
- package/ai/reference/bf-segment-option.md +29 -0
- package/ai/reference/bf-segmented-harness.md +48 -0
- package/ai/reference/bf-segmented-size.md +29 -0
- package/ai/reference/bf-select-harness.md +70 -0
- package/ai/reference/bf-select-option.md +29 -0
- package/ai/reference/bf-sheet-auto-focus.md +29 -0
- package/ai/reference/bf-sheet-options.md +32 -0
- package/ai/reference/bf-sheet-ref.md +45 -0
- package/ai/reference/bf-sheet-service.md +34 -0
- package/ai/reference/bf-shell-config-mode.md +28 -0
- package/ai/reference/bf-shell-config.md +38 -0
- package/ai/reference/bf-shell-dynamic-type-limit.md +21 -0
- package/ai/reference/bf-shell-dynamic-type.md +25 -0
- package/ai/reference/bf-shell-mode.md +28 -0
- package/ai/reference/bf-shell-testing-options.md +26 -0
- package/ai/reference/bf-size.md +45 -0
- package/ai/reference/bf-spinner-size.md +27 -0
- package/ai/reference/bf-stack-change.md +22 -0
- package/ai/reference/bf-stack-reuse-strategy.md +32 -0
- package/ai/reference/bf-stack-transition-event.md +26 -0
- package/ai/reference/bf-stack-transition.md +26 -0
- package/ai/reference/bf-stacked-overlay.md +23 -0
- package/ai/reference/bf-system-bars-style.md +38 -0
- package/ai/reference/bf-tab-bar-controller.md +51 -0
- package/ai/reference/bf-tab-bar-host.md +52 -0
- package/ai/reference/bf-tab-context.md +32 -0
- package/ai/reference/bf-tab-links.md +37 -0
- package/ai/reference/bf-testing-options.md +27 -0
- package/ai/reference/bf-text-scale-service.md +35 -0
- package/ai/reference/bf-theme.md +27 -0
- package/ai/reference/bf-toast-action.md +25 -0
- package/ai/reference/bf-toast-controller.md +17 -0
- package/ai/reference/bf-toast-dismiss-reason.md +29 -0
- package/ai/reference/bf-toast-options.md +29 -0
- package/ai/reference/bf-toast-position.md +26 -0
- package/ai/reference/bf-toast-ref.md +41 -0
- package/ai/reference/bf-toast-service.md +39 -0
- package/ai/reference/bf-toggle-label-position.md +26 -0
- package/ai/reference/bf-transition-kind.md +28 -0
- package/ai/reference/bf-validation-message.md +31 -0
- package/ai/reference/bf-validation-messages.md +33 -0
- package/ai/reference/bf-view-event.md +28 -0
- package/ai/reference/bf-view-lifecycle.md +41 -0
- package/ai/reference/bf-view-state.md +28 -0
- package/ai/reference/bf_default_labels.md +21 -0
- package/ai/reference/bf_default_values.md +21 -0
- package/ai/reference/bf_defaults.md +21 -0
- package/ai/reference/bf_desktop_toast_defaults.md +21 -0
- package/ai/reference/bf_dialog_data.md +17 -0
- package/ai/reference/bf_labels.md +21 -0
- package/ai/reference/bf_overlay_data.md +19 -0
- package/ai/reference/bf_overlay_host.md +21 -0
- package/ai/reference/bf_sheet_default_snap_points.md +17 -0
- package/ai/reference/bf_shell_config.md +21 -0
- package/ai/reference/bf_shell_defaults.md +21 -0
- package/ai/reference/bf_tab_bar.md +21 -0
- package/ai/reference/bf_tab_bar_controller.md +21 -0
- package/ai/reference/bf_tab_context.md +21 -0
- package/ai/reference/bf_tab_links.md +21 -0
- package/ai/reference/bf_theme_storage.md +19 -0
- package/ai/reference/create-transition.md +36 -0
- package/ai/reference/duration_fast.md +17 -0
- package/ai/reference/duration_md.md +17 -0
- package/ai/reference/duration_overlay.md +17 -0
- package/ai/reference/duration_push.md +17 -0
- package/ai/reference/fade-down.md +26 -0
- package/ai/reference/fade-in.md +25 -0
- package/ai/reference/fade-out.md +25 -0
- package/ai/reference/fade-up.md +26 -0
- package/ai/reference/inject-shell-mode.md +23 -0
- package/ai/reference/install-bf-jsdom-shims.md +31 -0
- package/ai/reference/ios_duration.md +17 -0
- package/ai/reference/ios_easing.md +17 -0
- package/ai/reference/is-text-entry.md +25 -0
- package/ai/reference/max_complete_ms.md +17 -0
- package/ai/reference/md-transition.md +31 -0
- package/ai/reference/md_duration.md +17 -0
- package/ai/reference/md_easing.md +17 -0
- package/ai/reference/overlay_duration.md +21 -0
- package/ai/reference/overlay_easing.md +19 -0
- package/ai/reference/overlay_reduced_duration.md +17 -0
- package/ai/reference/pop-frames-at.md +25 -0
- package/ai/reference/prefers-reduced-motion.md +25 -0
- package/ai/reference/provide-bf-defaults.md +33 -0
- package/ai/reference/provide-bf-desktop-toast.md +28 -0
- package/ai/reference/provide-bf-labels.md +38 -0
- package/ai/reference/provide-bf-shell-testing.md +34 -0
- package/ai/reference/provide-bf-shell.md +41 -0
- package/ai/reference/provide-bf-testing.md +33 -0
- package/ai/reference/reduced-transition.md +28 -0
- package/ai/reference/reduced_duration.md +17 -0
- package/ai/reference/resolve-shell-mode.md +33 -0
- package/ai/reference/scale-in.md +25 -0
- package/ai/reference/settle-duration.md +25 -0
- package/ai/reference/settle-pop.md +33 -0
- package/ai/reference/settle_easing.md +17 -0
- package/ai/reference/should-complete-pop.md +26 -0
- package/ai/reference/slide-down.md +26 -0
- package/ai/reference/slide-up.md +26 -0
- package/ai/reference/with-bf-shell-routing.md +19 -0
- package/bin/bf-ui.js +81 -0
- package/fesm2022/bitforgehq-ui-icons.mjs +230 -0
- package/fesm2022/bitforgehq-ui-icons.mjs.map +1 -0
- package/fesm2022/bitforgehq-ui-mobile.mjs +5530 -0
- package/fesm2022/bitforgehq-ui-mobile.mjs.map +1 -0
- package/fesm2022/bitforgehq-ui-number-input.mjs +680 -0
- package/fesm2022/bitforgehq-ui-number-input.mjs.map +1 -0
- package/fesm2022/bitforgehq-ui-overlay.mjs +2675 -0
- package/fesm2022/bitforgehq-ui-overlay.mjs.map +1 -0
- package/fesm2022/bitforgehq-ui-testing.mjs +402 -0
- package/fesm2022/bitforgehq-ui-testing.mjs.map +1 -0
- package/fesm2022/bitforgehq-ui.mjs +7765 -0
- package/fesm2022/bitforgehq-ui.mjs.map +1 -0
- package/llms-full.txt +25394 -0
- package/llms.txt +329 -0
- package/package.json +94 -0
- package/theme.css +253 -0
- package/types/bitforgehq-ui-icons.d.ts +50 -0
- package/types/bitforgehq-ui-mobile.d.ts +2914 -0
- package/types/bitforgehq-ui-number-input.d.ts +282 -0
- package/types/bitforgehq-ui-overlay.d.ts +1514 -0
- package/types/bitforgehq-ui-testing.d.ts +495 -0
- package/types/bitforgehq-ui.d.ts +3499 -0
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
# BfTabBarHost
|
|
2
|
+
|
|
3
|
+
What each tab reads from its tab bar: the selection, tab stop and link mode
|
|
4
|
+
|
|
5
|
+
Interface from `@bitforgehq/ui` · since 0.1.0
|
|
6
|
+
|
|
7
|
+
What `bf-tab` needs from its enclosing `bf-tab-bar`, provided through an injection token so
|
|
8
|
+
`tab-bar.component.ts` and `tab.component.ts` never import each other.
|
|
9
|
+
|
|
10
|
+
```ts
|
|
11
|
+
import { type BfTabBarHost } from '@bitforgehq/ui';
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
## Properties
|
|
15
|
+
|
|
16
|
+
| Name | Type | Default | Description |
|
|
17
|
+
| ---------- | ---------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
18
|
+
| `active` | `Signal<string>` | required | The id of the selected tab, the bar's `active` model. |
|
|
19
|
+
| `selected` | `Signal<string>` | | The id of the tab shown as selected: `active`, or the controller's `current()` inside a parent that provides `BF_TAB_BAR_CONTROLLER` (`bf-tabs`). Optional, so a custom `BF_TAB_BAR` provider without it keeps working: `bf-tab` then reads `active`. |
|
|
20
|
+
| `tabStop` | `Signal<string>` | required | The id that currently owns the roving tab stop: the active enabled tab, or the first enabled tab when nothing valid is selected. |
|
|
21
|
+
| `linkMode` | `boolean` | required | True when a router-aware parent provides `BF_TAB_LINKS`: the tabs render as links in a `nav`, not as a `tablist`. |
|
|
22
|
+
|
|
23
|
+
## Methods
|
|
24
|
+
|
|
25
|
+
### `linkHref(id: string): string | null`
|
|
26
|
+
|
|
27
|
+
The URL of tab `id` in link mode; `null` without `BF_TAB_LINKS`.
|
|
28
|
+
|
|
29
|
+
| Parameter | Type | Description |
|
|
30
|
+
| --------- | -------- | -------------------- |
|
|
31
|
+
| `id` | `string` | The `id` of the tab. |
|
|
32
|
+
|
|
33
|
+
### `linkIsRoot(id: string): boolean`
|
|
34
|
+
|
|
35
|
+
Whether the current page is tab `id`'s root page (`aria-current="page"`) rather than a
|
|
36
|
+
child page of it (`aria-current="true"`); `true` without `BF_TAB_LINKS`.
|
|
37
|
+
|
|
38
|
+
| Parameter | Type | Description |
|
|
39
|
+
| --------- | -------- | -------------------- |
|
|
40
|
+
| `id` | `string` | The `id` of the tab. |
|
|
41
|
+
|
|
42
|
+
### `select(id: string): void`
|
|
43
|
+
|
|
44
|
+
Selects tab `id`, as a click on it would.
|
|
45
|
+
|
|
46
|
+
| Parameter | Type | Description |
|
|
47
|
+
| --------- | -------- | -------------------- |
|
|
48
|
+
| `id` | `string` | The `id` of the tab. |
|
|
49
|
+
|
|
50
|
+
## Used by
|
|
51
|
+
|
|
52
|
+
- [BF_TAB_BAR](bf_tab_bar.md)
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
# BfTabContext
|
|
2
|
+
|
|
3
|
+
What the tabs page tells its stack outlet: which tab a URL belongs to
|
|
4
|
+
|
|
5
|
+
Interface from `@bitforgehq/ui/mobile` · since 0.2.0
|
|
6
|
+
|
|
7
|
+
What `bf-tabs` tells the `bf-stack-outlet` inside it: which tab a URL belongs to. The outlet
|
|
8
|
+
keeps one stack per tab key and switches stacks when a navigation lands on another key.
|
|
9
|
+
|
|
10
|
+
```ts
|
|
11
|
+
import { type BfTabContext } from '@bitforgehq/ui/mobile';
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
## Properties
|
|
15
|
+
|
|
16
|
+
| Name | Type | Default | Description |
|
|
17
|
+
| -------- | ------------------------ | -------- | -------------------------------------------------------------------------------------- |
|
|
18
|
+
| `tabKey` | `Signal<string \| null>` | required | The active tab's key (the URL segment after the tabs route), or null outside the tabs. |
|
|
19
|
+
|
|
20
|
+
## Methods
|
|
21
|
+
|
|
22
|
+
### `keyOf(url: string): string | null`
|
|
23
|
+
|
|
24
|
+
The tab key of `url` (query and fragment ignored), or null when it is not under the tabs route.
|
|
25
|
+
|
|
26
|
+
| Parameter | Type | Description |
|
|
27
|
+
| --------- | -------- | ---------------- |
|
|
28
|
+
| `url` | `string` | The URL to read. |
|
|
29
|
+
|
|
30
|
+
## Used by
|
|
31
|
+
|
|
32
|
+
- [BF_TAB_CONTEXT](bf_tab_context.md)
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
# BfTabLinks
|
|
2
|
+
|
|
3
|
+
The URLs a router-aware parent gives a tab bar to render its tabs as links
|
|
4
|
+
|
|
5
|
+
Interface from `@bitforgehq/ui` · since 0.3.0
|
|
6
|
+
|
|
7
|
+
Provided by a router-aware parent (`bf-tabs`) to render the projected bar as a `nav` of links:
|
|
8
|
+
`href(id)` is the URL of tab `id`, used for the link's `href` (open in a new tab, copy the
|
|
9
|
+
link, see the URL). A plain click still goes through `bf-tab-bar`'s `select()`.
|
|
10
|
+
|
|
11
|
+
```ts
|
|
12
|
+
import { type BfTabLinks } from '@bitforgehq/ui';
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## Methods
|
|
16
|
+
|
|
17
|
+
### `href(id: string): string`
|
|
18
|
+
|
|
19
|
+
The URL of tab `id`'s root page, the link's `href`.
|
|
20
|
+
|
|
21
|
+
| Parameter | Type | Description |
|
|
22
|
+
| --------- | -------- | -------------------- |
|
|
23
|
+
| `id` | `string` | The `id` of the tab. |
|
|
24
|
+
|
|
25
|
+
### `isRoot(id: string): boolean`
|
|
26
|
+
|
|
27
|
+
Whether the current page is tab `id`'s root page; read in a reactive context, so back it
|
|
28
|
+
with signals.
|
|
29
|
+
|
|
30
|
+
| Parameter | Type | Description |
|
|
31
|
+
| --------- | -------- | -------------------- |
|
|
32
|
+
| `id` | `string` | The `id` of the tab. |
|
|
33
|
+
|
|
34
|
+
## Used by
|
|
35
|
+
|
|
36
|
+
- [BfTabBarController](bf-tab-bar-controller.md)
|
|
37
|
+
- [BF_TAB_LINKS](bf_tab_links.md)
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
# BfTestingOptions
|
|
2
|
+
|
|
3
|
+
Options of the test providers: the size defaults and labels a spec runs with
|
|
4
|
+
|
|
5
|
+
Interface from `@bitforgehq/ui/testing` · since 0.3.0
|
|
6
|
+
|
|
7
|
+
Options of `provideBfTesting()`.
|
|
8
|
+
|
|
9
|
+
```ts
|
|
10
|
+
import { type BfTestingOptions } from '@bitforgehq/ui/testing';
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Properties
|
|
14
|
+
|
|
15
|
+
| Name | Type | Default | Description |
|
|
16
|
+
| ---------- | ----------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------- |
|
|
17
|
+
| `defaults` | `Parameters<typeof provideBfDefaults>[0]` | | Passed to `provideBfDefaults()`, e.g. `{ fieldSize: 'sm' }`; left out, the library defaults apply. |
|
|
18
|
+
| `labels` | `Parameters<typeof provideBfLabels>[0]` | | Passed to `provideBfLabels()`, e.g. German validation messages; left out, the English defaults apply. |
|
|
19
|
+
|
|
20
|
+
## Uses
|
|
21
|
+
|
|
22
|
+
- [provideBfDefaults](provide-bf-defaults.md)
|
|
23
|
+
- [provideBfLabels](provide-bf-labels.md)
|
|
24
|
+
|
|
25
|
+
## Used by
|
|
26
|
+
|
|
27
|
+
- [provideBfTesting](provide-bf-testing.md)
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
# BfTextScaleService
|
|
2
|
+
|
|
3
|
+
Follows iOS Dynamic Type by scaling the root font size of the app
|
|
4
|
+
|
|
5
|
+
Service from `@bitforgehq/ui/mobile` · since 0.2.0
|
|
6
|
+
|
|
7
|
+
Scales the root font size with iOS Dynamic Type inside the native shell. WKWebView resolves the
|
|
8
|
+
system text style `font: -apple-system-body` to the user's text size (17 px at the default
|
|
9
|
+
"Large", 21 px at xxL, 40 px at AX3, 53 px at AX5); a hidden, persistent probe element with that
|
|
10
|
+
font gives the size, and `<html>` gets `font-size: probe / 17 × 100 %` (rounded to 0.1 %). Every
|
|
11
|
+
type token and spacing step of the library is in `rem`, so text and rem-based layout grow
|
|
12
|
+
together, as UIKit's Dynamic Type does.
|
|
13
|
+
|
|
14
|
+
A `ResizeObserver` on the probe re-applies the scale when the setting changes while the app
|
|
15
|
+
runs (WebKit re-resolves system fonts then); `visibilitychange` re-probes as the fallback. The
|
|
16
|
+
scale never goes below 1 (the smaller iOS sizes, and a Mac running the iOS app, keep the design
|
|
17
|
+
size) and is capped at `BfShellConfig.dynamicType.maxScale` (default 2.35; `Infinity` means no
|
|
18
|
+
cap; `NaN` falls back to the default). A missing or non-finite probe value gives 1; at 1 the
|
|
19
|
+
root font size is left unset.
|
|
20
|
+
|
|
21
|
+
Acts only with `provideBfShell()` (which starts it at bootstrap), on native iOS, and while
|
|
22
|
+
`dynamicType` is not `false`. Android needs nothing: its WebView applies the system font scale
|
|
23
|
+
(`textZoom`) itself, so probing there would scale twice. On the web the browser's own text
|
|
24
|
+
size and zoom apply. Destroying the service removes the probe, its listeners and the root font
|
|
25
|
+
size.
|
|
26
|
+
|
|
27
|
+
```ts
|
|
28
|
+
import { BfTextScaleService } from '@bitforgehq/ui/mobile';
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
## Properties
|
|
32
|
+
|
|
33
|
+
| Name | Type | Default | Description |
|
|
34
|
+
| ------- | ---------------- | ------- | ------------------------------------------------------------------------------------- |
|
|
35
|
+
| `scale` | `Signal<number>` | | Current root scale (1 = the system default "Large"); always 1 on Android and the web. |
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
# BfTheme
|
|
2
|
+
|
|
3
|
+
The app theme choice, following the system or forcing light or dark
|
|
4
|
+
|
|
5
|
+
Type from `@bitforgehq/ui/mobile` · since 0.2.0
|
|
6
|
+
|
|
7
|
+
The app theme choice: follow the system, or force light or dark.
|
|
8
|
+
|
|
9
|
+
```ts
|
|
10
|
+
import { type BfTheme } from '@bitforgehq/ui/mobile';
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Signature
|
|
14
|
+
|
|
15
|
+
```ts
|
|
16
|
+
type BfTheme = 'system' | 'light' | 'dark'
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Values
|
|
20
|
+
|
|
21
|
+
- `system`
|
|
22
|
+
- `light`
|
|
23
|
+
- `dark`
|
|
24
|
+
|
|
25
|
+
## Used by
|
|
26
|
+
|
|
27
|
+
- [BfPlatformService](bf-platform-service.md)
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
# BfToastAction
|
|
2
|
+
|
|
3
|
+
The action button of a toast: its label and what it runs when clicked
|
|
4
|
+
|
|
5
|
+
Interface from `@bitforgehq/ui/overlay` · since 0.2.0
|
|
6
|
+
|
|
7
|
+
Also exported from `@bitforgehq/ui/mobile`.
|
|
8
|
+
|
|
9
|
+
The action rendered as a real button inside a toast.
|
|
10
|
+
|
|
11
|
+
```ts
|
|
12
|
+
import { type BfToastAction } from '@bitforgehq/ui/overlay';
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## Properties
|
|
16
|
+
|
|
17
|
+
| Name | Type | Default | Description |
|
|
18
|
+
| --------- | ------------ | -------- | ---------------------------------------------------- |
|
|
19
|
+
| `label` | `string` | required | Text of the action button. |
|
|
20
|
+
| `handler` | `() => void` | | Runs before the toast closes with reason `'action'`. |
|
|
21
|
+
|
|
22
|
+
## Used by
|
|
23
|
+
|
|
24
|
+
- [BfDesktopToastOptions](bf-desktop-toast-options.md)
|
|
25
|
+
- [BfToastOptions](bf-toast-options.md)
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
# BfToastController
|
|
2
|
+
|
|
3
|
+
What the toast queue does for a toast ref: dismiss the toast now
|
|
4
|
+
|
|
5
|
+
Interface from `@bitforgehq/ui/overlay` · since 0.2.0
|
|
6
|
+
|
|
7
|
+
What the toast queue does for a toast ref; internal.
|
|
8
|
+
|
|
9
|
+
```ts
|
|
10
|
+
import { type BfToastController } from '@bitforgehq/ui/overlay';
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Methods
|
|
14
|
+
|
|
15
|
+
### `dismiss(): void`
|
|
16
|
+
|
|
17
|
+
Ends the toast now: closes it if shown, or drops it from the queue if it never showed.
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
# BfToastDismissReason
|
|
2
|
+
|
|
3
|
+
Why a toast ended: its time ran out, its action fired or it was dismissed
|
|
4
|
+
|
|
5
|
+
Type from `@bitforgehq/ui/overlay` · since 0.2.0
|
|
6
|
+
|
|
7
|
+
Also exported from `@bitforgehq/ui/mobile`.
|
|
8
|
+
|
|
9
|
+
Why a toast ended.
|
|
10
|
+
|
|
11
|
+
```ts
|
|
12
|
+
import { type BfToastDismissReason } from '@bitforgehq/ui/overlay';
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## Signature
|
|
16
|
+
|
|
17
|
+
```ts
|
|
18
|
+
type BfToastDismissReason = 'timeout' | 'action' | 'dismiss'
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
## Values
|
|
22
|
+
|
|
23
|
+
- `timeout`
|
|
24
|
+
- `action`
|
|
25
|
+
- `dismiss`
|
|
26
|
+
|
|
27
|
+
## Used by
|
|
28
|
+
|
|
29
|
+
- [BfToastRef](bf-toast-ref.md)
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
# BfToastOptions
|
|
2
|
+
|
|
3
|
+
Options of a mobile toast: its message, an action, its duration and position
|
|
4
|
+
|
|
5
|
+
Interface from `@bitforgehq/ui/mobile` · since 0.2.0
|
|
6
|
+
|
|
7
|
+
Options of `BfToastService.show()`.
|
|
8
|
+
|
|
9
|
+
```ts
|
|
10
|
+
import { type BfToastOptions } from '@bitforgehq/ui/mobile';
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Properties
|
|
14
|
+
|
|
15
|
+
| Name | Type | Default | Description |
|
|
16
|
+
| ---------- | --------------------------------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
17
|
+
| `message` | `string` | required | Text of the pill, truncated to two lines. |
|
|
18
|
+
| `action` | `BfToastAction` | | An optional action button. |
|
|
19
|
+
| `duration` | `number` | `3000` | Milliseconds before the toast auto-dismisses, not counting time the pointer is over it or focus is inside it; `0` keeps it until dismissed or its action fires (default 3000 without an action, `0` with one). |
|
|
20
|
+
| `position` | `BfToastPosition` (`'bottom' \| 'top'`) | `'bottom'` | Where the pill anchors (default `'bottom'`). |
|
|
21
|
+
|
|
22
|
+
## Uses
|
|
23
|
+
|
|
24
|
+
- [BfToastAction](bf-toast-action.md)
|
|
25
|
+
- [BfToastPosition](bf-toast-position.md)
|
|
26
|
+
|
|
27
|
+
## Used by
|
|
28
|
+
|
|
29
|
+
- [BfToastService](bf-toast-service.md)
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
# BfToastPosition
|
|
2
|
+
|
|
3
|
+
Where a mobile toast pill anchors in the viewport, at the bottom or top
|
|
4
|
+
|
|
5
|
+
Type from `@bitforgehq/ui/mobile` · since 0.2.0
|
|
6
|
+
|
|
7
|
+
Where the toast pill anchors in the viewport.
|
|
8
|
+
|
|
9
|
+
```ts
|
|
10
|
+
import { type BfToastPosition } from '@bitforgehq/ui/mobile';
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Signature
|
|
14
|
+
|
|
15
|
+
```ts
|
|
16
|
+
type BfToastPosition = 'bottom' | 'top'
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Values
|
|
20
|
+
|
|
21
|
+
- `bottom`
|
|
22
|
+
- `top`
|
|
23
|
+
|
|
24
|
+
## Used by
|
|
25
|
+
|
|
26
|
+
- [BfToastOptions](bf-toast-options.md)
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
# BfToastRef
|
|
2
|
+
|
|
3
|
+
Handle on a shown or queued toast that dismisses it and reports why it ended
|
|
4
|
+
|
|
5
|
+
Class from `@bitforgehq/ui/overlay` · since 0.2.0
|
|
6
|
+
|
|
7
|
+
Also exported from `@bitforgehq/ui/mobile`.
|
|
8
|
+
|
|
9
|
+
Handle to a toast, returned by `BfToastService.show()` (`/mobile`) and
|
|
10
|
+
`BfDesktopToastService.show()` (`/overlay`). `dismiss()` ends it immediately — closing it right
|
|
11
|
+
away if it is shown, or removing it from the queue before it ever shows. `afterDismissed`
|
|
12
|
+
resolves with why it ended: `'timeout'` (its duration elapsed), `'action'` (the action button
|
|
13
|
+
was clicked) or `'dismiss'` (`dismiss()` was called). The duration never runs out while the
|
|
14
|
+
toast is hovered or focused, and a toast with an action has none by default, so it only ends
|
|
15
|
+
with `'action'` or `'dismiss'` (`dismiss()`, `Escape` inside it, or the next `show()` replacing
|
|
16
|
+
it).
|
|
17
|
+
|
|
18
|
+
```ts
|
|
19
|
+
import { BfToastRef } from '@bitforgehq/ui/overlay';
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
## Properties
|
|
23
|
+
|
|
24
|
+
| Name | Type | Default | Description |
|
|
25
|
+
| ---------------- | ------------------------------- | ------- | ---------------------------------- |
|
|
26
|
+
| `afterDismissed` | `Promise<BfToastDismissReason>` | | Resolves with why the toast ended. |
|
|
27
|
+
|
|
28
|
+
## Methods
|
|
29
|
+
|
|
30
|
+
### `dismiss(): void`
|
|
31
|
+
|
|
32
|
+
Ends the toast now; see the class doc.
|
|
33
|
+
|
|
34
|
+
## Uses
|
|
35
|
+
|
|
36
|
+
- [BfToastDismissReason](bf-toast-dismiss-reason.md)
|
|
37
|
+
|
|
38
|
+
## Used by
|
|
39
|
+
|
|
40
|
+
- [BfDesktopToastService](bf-desktop-toast-service.md)
|
|
41
|
+
- [BfToastService](bf-toast-service.md)
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
# BfToastService
|
|
2
|
+
|
|
3
|
+
Shows brief toast pills on phones, one at a time, queued in order
|
|
4
|
+
|
|
5
|
+
Service from `@bitforgehq/ui/mobile` · since 0.2.0
|
|
6
|
+
|
|
7
|
+
Queues status pills: `show(options)` renders `bf-toast` on the overlay core (`passive: true` —
|
|
8
|
+
no backdrop, no focus trap, the page stays interactive, and it never counts towards
|
|
9
|
+
`BfOverlayStack.count()`) and returns a `BfToastRef`. One toast is visible at a time; later
|
|
10
|
+
calls queue in order and show once the current one ends. A toast auto-dismisses after
|
|
11
|
+
`duration` ms (default 3000, resolving `'timeout'`); a toast with an action defaults to
|
|
12
|
+
`duration: 0`, which keeps it until `dismiss()`, `Escape` inside it (`'dismiss'`) or its action
|
|
13
|
+
button (`'action'`) ends it; such a persistent toast never blocks the queue — the next `show()`
|
|
14
|
+
replaces it (`'dismiss'`). The timer pauses while the pointer is over the toast or focus is
|
|
15
|
+
inside it and resumes with the remaining time. When a toast still holding focus closes, focus
|
|
16
|
+
returns to the element focused last outside it. Each toast is announced once, politely, through
|
|
17
|
+
CDK `LiveAnnouncer` as it shows. A navigation (a pushed or popped page, a tab switch) never
|
|
18
|
+
closes it.
|
|
19
|
+
|
|
20
|
+
```ts
|
|
21
|
+
import { BfToastService } from '@bitforgehq/ui/mobile';
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
## Methods
|
|
25
|
+
|
|
26
|
+
### `show(options: BfToastOptions): BfToastRef`
|
|
27
|
+
|
|
28
|
+
Queues `options` as a toast; shows it now if none is visible, else once the current one ends.
|
|
29
|
+
A persistent toast (`duration` 0, the default with an action) never blocks the queue: a later
|
|
30
|
+
`show()` dismisses it (`'dismiss'`), whether it is visible or still waiting.
|
|
31
|
+
|
|
32
|
+
| Parameter | Type | Description |
|
|
33
|
+
| --------- | ---------------- | --------------------------------------------------- |
|
|
34
|
+
| `options` | `BfToastOptions` | The toast's message, action, duration and position. |
|
|
35
|
+
|
|
36
|
+
## Uses
|
|
37
|
+
|
|
38
|
+
- [BfToastOptions](bf-toast-options.md)
|
|
39
|
+
- [BfToastRef](bf-toast-ref.md)
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
# BfToggleLabelPosition
|
|
2
|
+
|
|
3
|
+
Whether a toggle's label sits after or before its switch
|
|
4
|
+
|
|
5
|
+
Type from `@bitforgehq/ui` · since 0.3.0
|
|
6
|
+
|
|
7
|
+
The side of a `bf-toggle`'s switch its label sits on: after it (`end`) or before it (`start`).
|
|
8
|
+
|
|
9
|
+
```ts
|
|
10
|
+
import { type BfToggleLabelPosition } from '@bitforgehq/ui';
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Signature
|
|
14
|
+
|
|
15
|
+
```ts
|
|
16
|
+
type BfToggleLabelPosition = 'end' | 'start'
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Values
|
|
20
|
+
|
|
21
|
+
- `end`
|
|
22
|
+
- `start`
|
|
23
|
+
|
|
24
|
+
## Used by
|
|
25
|
+
|
|
26
|
+
- [bf-toggle](../components/toggle.md)
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
# BfTransitionKind
|
|
2
|
+
|
|
3
|
+
The direction of a stack transition, a page pushed on or popped off
|
|
4
|
+
|
|
5
|
+
Type from `@bitforgehq/ui/mobile` · since 0.2.0
|
|
6
|
+
|
|
7
|
+
The direction of a stack transition: a page pushed on, or popped off.
|
|
8
|
+
|
|
9
|
+
```ts
|
|
10
|
+
import { type BfTransitionKind } from '@bitforgehq/ui/mobile';
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Signature
|
|
14
|
+
|
|
15
|
+
```ts
|
|
16
|
+
type BfTransitionKind = 'push' | 'pop'
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Values
|
|
20
|
+
|
|
21
|
+
- `push`
|
|
22
|
+
- `pop`
|
|
23
|
+
|
|
24
|
+
## Used by
|
|
25
|
+
|
|
26
|
+
- [BfStackTransitionEvent](bf-stack-transition-event.md)
|
|
27
|
+
- [createTransition](create-transition.md)
|
|
28
|
+
- [mdTransition](md-transition.md)
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
# bfValidationMessage
|
|
2
|
+
|
|
3
|
+
Turns one validation error into the text a form field shows under it
|
|
4
|
+
|
|
5
|
+
Function from `@bitforgehq/ui` · since 0.3.0
|
|
6
|
+
|
|
7
|
+
The text for one error: its own `message`, else the default for its `kind` (Signal Forms kinds
|
|
8
|
+
`required|email|pattern|parse|min|max|minLength|maxLength|minDate|maxDate`, and the Reactive
|
|
9
|
+
interop kinds `required|email|pattern|min|max|minlength|maxlength` whose limits sit
|
|
10
|
+
in `context`), else `fallback`. Reads limits through type guards, never `any`.
|
|
11
|
+
|
|
12
|
+
```ts
|
|
13
|
+
import { bfValidationMessage } from '@bitforgehq/ui';
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
## Signature
|
|
17
|
+
|
|
18
|
+
```ts
|
|
19
|
+
function bfValidationMessage(error: ValidationError, messages: BfValidationMessages): string
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
## Parameters
|
|
23
|
+
|
|
24
|
+
| Parameter | Type | Description |
|
|
25
|
+
| ---------- | ---------------------- | --------------------------------------------------------------- |
|
|
26
|
+
| `error` | `ValidationError` | A Signal Forms error, or a Reactive Forms error adapted to one. |
|
|
27
|
+
| `messages` | `BfValidationMessages` | The default texts, usually `inject(BF_LABELS).validation`. |
|
|
28
|
+
|
|
29
|
+
## Uses
|
|
30
|
+
|
|
31
|
+
- [BfValidationMessages](bf-validation-messages.md)
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
# BfValidationMessages
|
|
2
|
+
|
|
3
|
+
The default error text of each validator kind, shown under a form field
|
|
4
|
+
|
|
5
|
+
Interface from `@bitforgehq/ui` · since 0.3.0
|
|
6
|
+
|
|
7
|
+
Default text per validator kind, part of `BfLabels`; override with `provideBfLabels()`.
|
|
8
|
+
|
|
9
|
+
```ts
|
|
10
|
+
import { type BfValidationMessages } from '@bitforgehq/ui';
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Properties
|
|
14
|
+
|
|
15
|
+
| Name | Type | Default | Description |
|
|
16
|
+
| ----------- | ---------------------------- | -------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- |
|
|
17
|
+
| `required` | `string` | `'Fill in this field'` | `required` (Signal Forms and Reactive Forms; `Validators.requiredTrue` reports `required` too). |
|
|
18
|
+
| `email` | `string` | `'Enter a valid email address'` | `email`. |
|
|
19
|
+
| `pattern` | `string` | `'Use the expected format'` | `pattern`. |
|
|
20
|
+
| `parse` | `string` | `'Enter a valid number'` | `parse`: the text could not be read as a value (e.g. a number field). |
|
|
21
|
+
| `min` | `(min: number) => string` | `` (min) => `Enter ${min} or more` `` | `min`, given the lower limit. |
|
|
22
|
+
| `max` | `(max: number) => string` | `` (max) => `Enter ${max} or less` `` | `max`, given the upper limit. |
|
|
23
|
+
| `minLength` | `(length: number) => string` | `` (length) => `Use at least ${length} characters` `` | `minLength` (Signal Forms) and `minlength` (Reactive Forms), given the required length. |
|
|
24
|
+
| `maxLength` | `(length: number) => string` | `` (length) => `Use at most ${length} characters` `` | `maxLength` (Signal Forms) and `maxlength` (Reactive Forms), given the allowed length. |
|
|
25
|
+
| `minDate` | `(date: Date) => string` | `` (date) => `Pick ${date.toLocaleDateString()} or later` `` | `minDate`, given the earliest date. |
|
|
26
|
+
| `maxDate` | `(date: Date) => string` | `` (date) => `Pick ${date.toLocaleDateString()} or earlier` `` | `maxDate`, given the latest date. |
|
|
27
|
+
| `fallback` | `string` | `'Check this value'` | Any other kind without its own message. |
|
|
28
|
+
|
|
29
|
+
## Used by
|
|
30
|
+
|
|
31
|
+
- [BfLabels](bf-labels.md)
|
|
32
|
+
- [BfLabelsOverrides](bf-labels-overrides.md)
|
|
33
|
+
- [bfValidationMessage](bf-validation-message.md)
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
# BfViewEvent
|
|
2
|
+
|
|
3
|
+
The four lifecycle events of a stacked page as it enters and leaves
|
|
4
|
+
|
|
5
|
+
Type from `@bitforgehq/ui/mobile` · since 0.2.0
|
|
6
|
+
|
|
7
|
+
One lifecycle event of a stacked page.
|
|
8
|
+
|
|
9
|
+
```ts
|
|
10
|
+
import { type BfViewEvent } from '@bitforgehq/ui/mobile';
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Signature
|
|
14
|
+
|
|
15
|
+
```ts
|
|
16
|
+
type BfViewEvent = 'willEnter' | 'didEnter' | 'willLeave' | 'didLeave'
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Values
|
|
20
|
+
|
|
21
|
+
- `willEnter`
|
|
22
|
+
- `didEnter`
|
|
23
|
+
- `willLeave`
|
|
24
|
+
- `didLeave`
|
|
25
|
+
|
|
26
|
+
## Used by
|
|
27
|
+
|
|
28
|
+
- [BfViewLifecycle](bf-view-lifecycle.md)
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
# BfViewLifecycle
|
|
2
|
+
|
|
3
|
+
The lifecycle of one stacked page as signals and events, from enter to leave
|
|
4
|
+
|
|
5
|
+
Class from `@bitforgehq/ui/mobile` · since 0.2.0
|
|
6
|
+
|
|
7
|
+
Per-page lifecycle. `bf-stack-outlet` creates one per page and provides it through the page's
|
|
8
|
+
element injector; `bf-page` re-exposes it as outputs, and any page or service can
|
|
9
|
+
`inject(BfViewLifecycle)` to react to the page entering or leaving the top of the stack.
|
|
10
|
+
`state` and the counters are signals for `computed`/`effect`; `on()` delivers every event
|
|
11
|
+
synchronously, including the ones that happen before the page's first change detection and
|
|
12
|
+
right before a popped page is destroyed.
|
|
13
|
+
|
|
14
|
+
```ts
|
|
15
|
+
import { BfViewLifecycle } from '@bitforgehq/ui/mobile';
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
## Properties
|
|
19
|
+
|
|
20
|
+
| Name | Type | Default | Description |
|
|
21
|
+
| ----------- | ----------------------------- | ------- | ------------------------------------------------------------------------------- |
|
|
22
|
+
| `state` | `WritableSignal<BfViewState>` | | The page's current lifecycle state. |
|
|
23
|
+
| `willEnter` | `WritableSignal<number>` | | How often the page started entering; monotonic, so a page can `effect()` on it. |
|
|
24
|
+
| `didEnter` | `WritableSignal<number>` | | How often the page became the top page (its enter transition ended). |
|
|
25
|
+
| `willLeave` | `WritableSignal<number>` | | How often the page started leaving the top of the stack. |
|
|
26
|
+
| `didLeave` | `WritableSignal<number>` | | How often the page stopped being the top page (its leave transition ended). |
|
|
27
|
+
|
|
28
|
+
## Methods
|
|
29
|
+
|
|
30
|
+
### `on(listener: (event: BfViewEvent) => void): () => void`
|
|
31
|
+
|
|
32
|
+
Calls `listener` synchronously on every event; returns a function that removes it.
|
|
33
|
+
|
|
34
|
+
| Parameter | Type | Description |
|
|
35
|
+
| ---------- | ------------------------------ | -------------------------------------- |
|
|
36
|
+
| `listener` | `(event: BfViewEvent) => void` | Called with each event, synchronously. |
|
|
37
|
+
|
|
38
|
+
## Uses
|
|
39
|
+
|
|
40
|
+
- [BfViewEvent](bf-view-event.md)
|
|
41
|
+
- [BfViewState](bf-view-state.md)
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
# BfViewState
|
|
2
|
+
|
|
3
|
+
Where a stacked page is in its lifecycle: entering, active, leaving or inactive
|
|
4
|
+
|
|
5
|
+
Type from `@bitforgehq/ui/mobile` · since 0.2.0
|
|
6
|
+
|
|
7
|
+
Where a stacked page is in its lifecycle.
|
|
8
|
+
|
|
9
|
+
```ts
|
|
10
|
+
import { type BfViewState } from '@bitforgehq/ui/mobile';
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Signature
|
|
14
|
+
|
|
15
|
+
```ts
|
|
16
|
+
type BfViewState = 'entering' | 'active' | 'leaving' | 'inactive'
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Values
|
|
20
|
+
|
|
21
|
+
- `entering`
|
|
22
|
+
- `active`
|
|
23
|
+
- `leaving`
|
|
24
|
+
- `inactive`
|
|
25
|
+
|
|
26
|
+
## Used by
|
|
27
|
+
|
|
28
|
+
- [BfViewLifecycle](bf-view-lifecycle.md)
|