@betterportal/theme-bootstrap1 10.1.66 → 10.1.67
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/bp-resources/ui-guide.md
CHANGED
|
@@ -13,6 +13,7 @@ Use Bootstrap 5 classes and server-rendered JSX/HTMX. BetterPortal service rende
|
|
|
13
13
|
## Forms and mutations
|
|
14
14
|
|
|
15
15
|
- Use real `<form>` elements and labelled controls. Validation text uses `.invalid-feedback` or `.form-text`.
|
|
16
|
+
- Plain internal `<a href="/route">` links and GET/POST forms are automatically upgraded to HTMX and routed through the owning service. A bare `<form>` posts to the current service view. Use `bp-no-override` or `data-bp-no-override` on an element or ancestor only when native browser behavior is intentional.
|
|
16
17
|
- In renderers, use `ctx.url.route()` for form actions, HTMX calls, downloads and SSE. `ctx.url.uiRoute()` is only for GET navigation through a mounted page route. For another service, pass its declared dependency alias as `serviceId`; both helpers resolve the active app-mounted provider. Handler equivalents are `ctx.routeUrl()` and `ctx.uiRouteUrl()`.
|
|
17
18
|
- Use `<BPElement ctx={ctx} service="dependency-alias" path="/contract/path" fragment="location.id">` for cross-service UI fragments. `service` is the dependency alias/key declared in `betterportal.json`; never put service titles, UUIDs, hostnames, or absolute URLs in renderer code. The server consumes `ctx` and resolves the active app-mounted provider.
|
|
18
19
|
- Use `service="shell"` and a singular shell fragment id to reuse active-shell UI such as `theme-selector`. Add `bp-loading`, status-specific `bp-status`, and `bp-nok` states as needed. Omit `bp-ok` to insert successful content directly; add it only to wrap success content, with exactly one `<template />`.
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"pluginId": "org.betterportal.theme.bootstrap1",
|
|
5
5
|
"title": "Bootstrap1 Theme",
|
|
6
6
|
"description": "Bootstrap 5 + htmx theme that renders BetterPortal app shells.",
|
|
7
|
-
"version": "10.1.
|
|
7
|
+
"version": "10.1.67",
|
|
8
8
|
"category": "theme",
|
|
9
9
|
"deploymentModes": [
|
|
10
10
|
"self-hosted"
|
|
@@ -249,7 +249,7 @@
|
|
|
249
249
|
"title": "Bootstrap1 UI guide",
|
|
250
250
|
"description": "Layout, component, HTMX, responsive and accessibility rules.",
|
|
251
251
|
"mediaType": "text/markdown; charset=utf-8",
|
|
252
|
-
"content": "# Bootstrap1 UI guide\n\nUse Bootstrap 5 classes and server-rendered JSX/HTMX. BetterPortal service renderers return fragments; the theme owns the shell, navigation, visible URL and global assets.\n\n## Layout\n\n- Render primary content for the `main` slot. Never emit another page shell, `<html>`, `<head>`, sidebar navigation or top bar.\n- Start pages with a semantic heading and a short action row when actions exist.\n- Use `.container-fluid`, Bootstrap grid classes and responsive gaps. Avoid fixed widths except a declared `data-bp-sidebar-width`.\n- Use cards for grouped settings, tables for comparable records and list groups for short navigation or status collections.\n- Keep primary actions on the right of desktop action rows and allow them to wrap on small screens.\n\n## Forms and mutations\n\n- Use real `<form>` elements and labelled controls. Validation text uses `.invalid-feedback` or `.form-text`.\n- In renderers, use `ctx.url.route()` for form actions, HTMX calls, downloads and SSE. `ctx.url.uiRoute()` is only for GET navigation through a mounted page route. For another service, pass its declared dependency alias as `serviceId`; both helpers resolve the active app-mounted provider. Handler equivalents are `ctx.routeUrl()` and `ctx.uiRouteUrl()`.\n- Use `<BPElement ctx={ctx} service=\"dependency-alias\" path=\"/contract/path\" fragment=\"location.id\">` for cross-service UI fragments. `service` is the dependency alias/key declared in `betterportal.json`; never put service titles, UUIDs, hostnames, or absolute URLs in renderer code. The server consumes `ctx` and resolves the active app-mounted provider.\n- Use `service=\"shell\"` and a singular shell fragment id to reuse active-shell UI such as `theme-selector`. Add `bp-loading`, status-specific `bp-status`, and `bp-nok` states as needed. Omit `bp-ok` to insert successful content directly; add it only to wrap success content, with exactly one `<template />`.\n- The renderer's second argument is `ViewRenderContext`. Use its limited `tenant`/`app` presentation projections and `ctx.url` helpers; keep authorization and business data in the handler. Auth navigation fields are view IDs and must be resolved with `ctx.url.uiRoute()`.\n- Mutations should return a useful fragment and emit an `HX-Trigger` event for passive regions that need to reload.\n- Disable buttons only while their own request is active. Keep a visible loading indicator and an error fragment.\n\n## Components\n\n- Buttons: `.btn`, with one obvious `.btn-primary` action per group.\n- Status: Bootstrap badges with text; never communicate state by colour alone.\n- Destructive actions: `.btn-outline-danger` or `.btn-danger`, with confirmation proportional to impact.\n- Side panels: wrap content in `data-bp-sidebar`, add `data-bp-sidebar-title`, and open it with `data-bp-sidebar-open`. The theme converts it to an offcanvas.\n- Modals and offcanvas content may be teleported by the shell. Do not depend on a specific DOM parent after activation.\n\n## Accessibility\n\n- Preserve heading order, visible labels, keyboard focus and native controls.\n- Every icon-only action needs an accessible name.\n- Tables need headers; use a responsive wrapper instead of shrinking text.\n- Focus the first meaningful control when opening a task panel and return focus to its trigger when it closes.\n\n## Avoid\n\n- No SPA framework, client router, iframe, client state store or hardcoded service hostname.\n- No inline copy of Bootstrap or shell JavaScript.\n- No theme-origin mutation URL. Service requests go to service URLs.\n- No custom colour that bypasses the app palette when a Bootstrap semantic token exists.\n"
|
|
252
|
+
"content": "# Bootstrap1 UI guide\n\nUse Bootstrap 5 classes and server-rendered JSX/HTMX. BetterPortal service renderers return fragments; the theme owns the shell, navigation, visible URL and global assets.\n\n## Layout\n\n- Render primary content for the `main` slot. Never emit another page shell, `<html>`, `<head>`, sidebar navigation or top bar.\n- Start pages with a semantic heading and a short action row when actions exist.\n- Use `.container-fluid`, Bootstrap grid classes and responsive gaps. Avoid fixed widths except a declared `data-bp-sidebar-width`.\n- Use cards for grouped settings, tables for comparable records and list groups for short navigation or status collections.\n- Keep primary actions on the right of desktop action rows and allow them to wrap on small screens.\n\n## Forms and mutations\n\n- Use real `<form>` elements and labelled controls. Validation text uses `.invalid-feedback` or `.form-text`.\n- Plain internal `<a href=\"/route\">` links and GET/POST forms are automatically upgraded to HTMX and routed through the owning service. A bare `<form>` posts to the current service view. Use `bp-no-override` or `data-bp-no-override` on an element or ancestor only when native browser behavior is intentional.\n- In renderers, use `ctx.url.route()` for form actions, HTMX calls, downloads and SSE. `ctx.url.uiRoute()` is only for GET navigation through a mounted page route. For another service, pass its declared dependency alias as `serviceId`; both helpers resolve the active app-mounted provider. Handler equivalents are `ctx.routeUrl()` and `ctx.uiRouteUrl()`.\n- Use `<BPElement ctx={ctx} service=\"dependency-alias\" path=\"/contract/path\" fragment=\"location.id\">` for cross-service UI fragments. `service` is the dependency alias/key declared in `betterportal.json`; never put service titles, UUIDs, hostnames, or absolute URLs in renderer code. The server consumes `ctx` and resolves the active app-mounted provider.\n- Use `service=\"shell\"` and a singular shell fragment id to reuse active-shell UI such as `theme-selector`. Add `bp-loading`, status-specific `bp-status`, and `bp-nok` states as needed. Omit `bp-ok` to insert successful content directly; add it only to wrap success content, with exactly one `<template />`.\n- The renderer's second argument is `ViewRenderContext`. Use its limited `tenant`/`app` presentation projections and `ctx.url` helpers; keep authorization and business data in the handler. Auth navigation fields are view IDs and must be resolved with `ctx.url.uiRoute()`.\n- Mutations should return a useful fragment and emit an `HX-Trigger` event for passive regions that need to reload.\n- Disable buttons only while their own request is active. Keep a visible loading indicator and an error fragment.\n\n## Components\n\n- Buttons: `.btn`, with one obvious `.btn-primary` action per group.\n- Status: Bootstrap badges with text; never communicate state by colour alone.\n- Destructive actions: `.btn-outline-danger` or `.btn-danger`, with confirmation proportional to impact.\n- Side panels: wrap content in `data-bp-sidebar`, add `data-bp-sidebar-title`, and open it with `data-bp-sidebar-open`. The theme converts it to an offcanvas.\n- Modals and offcanvas content may be teleported by the shell. Do not depend on a specific DOM parent after activation.\n\n## Accessibility\n\n- Preserve heading order, visible labels, keyboard focus and native controls.\n- Every icon-only action needs an accessible name.\n- Tables need headers; use a responsive wrapper instead of shrinking text.\n- Focus the first meaningful control when opening a task panel and return focus to its trigger when it closes.\n\n## Avoid\n\n- No SPA framework, client router, iframe, client state store or hardcoded service hostname.\n- No inline copy of Bootstrap or shell JavaScript.\n- No theme-origin mutation URL. Service requests go to service URLs.\n- No custom colour that bypasses the app palette when a Bootstrap semantic token exists.\n"
|
|
253
253
|
},
|
|
254
254
|
{
|
|
255
255
|
"id": "bootstrap1.skill",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@betterportal/theme-bootstrap1",
|
|
3
|
-
"version": "10.1.
|
|
3
|
+
"version": "10.1.67",
|
|
4
4
|
"description": "BetterPortal v10 Bootstrap1 theme plugin for Node.js",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"types": "src/index.ts",
|
|
@@ -27,16 +27,16 @@
|
|
|
27
27
|
"license": "(AGPL-3.0-only OR Commercial)",
|
|
28
28
|
"type": "module",
|
|
29
29
|
"devDependencies": {
|
|
30
|
-
"@bsb/tests": "^9.6.
|
|
30
|
+
"@bsb/tests": "^9.6.70",
|
|
31
31
|
"@types/node": "^26.0.0",
|
|
32
32
|
"tsx": "^4.21.0",
|
|
33
33
|
"typescript": "^6.0.3"
|
|
34
34
|
},
|
|
35
35
|
"dependencies": {
|
|
36
|
-
"@betterportal/framework": "10.1.
|
|
37
|
-
"@betterportal/plugin-bsb": "10.1.
|
|
38
|
-
"@betterportal/theme-runtime": "10.1.
|
|
39
|
-
"@bsb/base": "^9.6.
|
|
36
|
+
"@betterportal/framework": "10.1.67",
|
|
37
|
+
"@betterportal/plugin-bsb": "10.1.67",
|
|
38
|
+
"@betterportal/theme-runtime": "10.1.67",
|
|
39
|
+
"@bsb/base": "^9.6.70",
|
|
40
40
|
"anyvali": "^1.0.6",
|
|
41
41
|
"bootstrap": "^5.3.8",
|
|
42
42
|
"jsx-htmx": "4.0.0-beta6"
|