@yuneta/gobj-ui 2.2.4 → 2.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/README.md +31 -1
- package/dist/gobj-ui.cjs.js +702 -1024
- package/dist/gobj-ui.es.js +703 -1025
- package/package.json +1 -1
- package/src/c_yui_form.js +322 -51
- package/src/c_yui_map.js +7 -4
- package/src/c_yui_nav.js +90 -1
- package/src/c_yui_shell.css +68 -2
- package/src/c_yui_shell.js +103 -18
- package/src/c_yui_treedb_topic_with_form.js +216 -1171
- package/src/nav_cards_helpers.js +71 -0
- package/src/nav_cards_helpers.test.js +122 -0
- package/src/shell_section_index.js +106 -0
- package/src/shell_section_index.test.js +151 -0
package/README.md
CHANGED
|
@@ -4,7 +4,7 @@ Reusable GUI components for Yuneta GClass front-ends: a declarative shell
|
|
|
4
4
|
(`C_YUI_SHELL`/`NAV`/`PAGER`/`WIZARD`), the legacy GClass GUI stack
|
|
5
5
|
(`C_YUI_MAIN`/`WINDOW`/`TABS`/`ROUTING`), TreeDB editors, charts and maps.
|
|
6
6
|
|
|
7
|
-
Published as `@yuneta/gobj-ui`. Built on top of [`@yuneta/gobj-js`](https://github.com/artgins/gobj-js
|
|
7
|
+
Published as `@yuneta/gobj-ui`. Built on top of [`@yuneta/gobj-js`](https://github.com/artgins/gobj-js).
|
|
8
8
|
|
|
9
9
|
## Two maintained lines
|
|
10
10
|
|
|
@@ -56,4 +56,34 @@ npm test # vitest (v2/main only; v1 has no test target)
|
|
|
56
56
|
tarball; v2 (wattyzer) imports source files by specifier. Rebuild `dist/` to
|
|
57
57
|
validate and before publishing a v1 release.
|
|
58
58
|
|
|
59
|
+
## Conventions
|
|
60
|
+
|
|
61
|
+
### Logical class names on important DOM blocks
|
|
62
|
+
|
|
63
|
+
When a gclass builds DOM, tag its elements so the tree is self-describing in
|
|
64
|
+
the browser Inspector:
|
|
65
|
+
|
|
66
|
+
- **Root of the view:** the `GCLASS_NAME` class **plus** a logical card name,
|
|
67
|
+
e.g. `class="C_AGENT_CONSOLE CONSOLE_CARD view-card"`.
|
|
68
|
+
- **Every meaningful child** (status line, response panel, input row, input,
|
|
69
|
+
button, list…) gets a logical class **prefixed by the view/feature name**:
|
|
70
|
+
`CONSOLE_STATUS`, `CONSOLE_COMMENT`, `CONSOLE_RESPONSE`, `CONSOLE_INPUT_ROW`,
|
|
71
|
+
`CONSOLE_INPUT`, `CONSOLE_EXEC`, …
|
|
72
|
+
|
|
73
|
+
**Casing: `UPPER_SNAKE`, exactly like the gclass names** — `CONSOLE_COMMENT`,
|
|
74
|
+
never `console-comment`. CSS/styling classes stay lowercase (`view-card`,
|
|
75
|
+
`is-size-7`), so in a `class` attribute the case alone tells the two
|
|
76
|
+
namespaces apart: **uppercase = logical block name, lowercase = styling**.
|
|
77
|
+
Keep the existing Bulma/utility classes and **prepend** the logical name(s).
|
|
78
|
+
|
|
79
|
+
**Logical names are independent of whatever CSS class names each app uses.**
|
|
80
|
+
They form their own namespace: they identify blocks, they don't style them,
|
|
81
|
+
and they are tied to no CSS framework or app stylesheet. Each app keeps its
|
|
82
|
+
own styling classes alongside them — restyling or swapping the CSS layer never
|
|
83
|
+
renames a logical class, and adding a logical class never requires a CSS rule.
|
|
84
|
+
|
|
85
|
+
**Why:** a bare `<pre class="is-size-7 mb-2">` is unidentifiable in devtools —
|
|
86
|
+
you can't tell it's "the comment line". These are primarily debug aids, but
|
|
87
|
+
they **may** double as real CSS hooks; styling them is fine when useful.
|
|
88
|
+
|
|
59
89
|
Copyright (c) 2024-2026, ArtGins. All Rights Reserved.
|