@myop/cli 0.1.49 → 0.1.51
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.
|
@@ -389,6 +389,7 @@ You can also use typed specific handlers alongside the generic `on` handler:
|
|
|
389
389
|
| `on` | `(action, payload) => void` | Generic handler for all CTA events |
|
|
390
390
|
| `on[ActionName]` | `(payload) => void` | Typed handler for a specific CTA (e.g., `onTaskToggled`) |
|
|
391
391
|
| `style` | `CSSProperties` | CSS styles for the container |
|
|
392
|
+
| `autoSize` | `boolean` | Default `true`. Set to `false` to disable auto-sizing — component fills its container, host controls dimensions via `style` |
|
|
392
393
|
| `environment` | `string` | Load from a specific environment (e.g., `"staging"`) |
|
|
393
394
|
| `preview` | `boolean` | Load the unpublished preview version |
|
|
394
395
|
|
|
@@ -18,8 +18,8 @@ Every component should declare its preferred dimensions in a `<meta>` tag inside
|
|
|
18
18
|
|
|
19
19
|
The host reads this BEFORE rendering the component, so the container can be sized correctly from the start (no layout shift). The `height` value also determines the sizing mode:
|
|
20
20
|
|
|
21
|
-
- **Number (or absent)** → **Content mode** (default): component auto-sizes to its content, like a `<div
|
|
22
|
-
- **`"100%"`** → **Fill mode**: component fills its parent container
|
|
21
|
+
- **Number (or absent)** → **Content mode** (default): component auto-sizes to its content, like a `<div>`. Pixel values are **initial hints** — after the component renders, auto-sizing measures the actual content and adjusts the height automatically.
|
|
22
|
+
- **`"100%"`** → **Fill mode**: component fills its parent container. Auto-sizing is skipped.
|
|
23
23
|
|
|
24
24
|
### Properties
|
|
25
25
|
|
|
@@ -67,6 +67,8 @@ html, body { width: 100%; margin: 0; padding: 0; }
|
|
|
67
67
|
#app-root { width: 100%; }
|
|
68
68
|
```
|
|
69
69
|
|
|
70
|
+
> **Important:** In content mode, do NOT set `height: 100%` on `html` or `body`. This conflicts with auto-sizing and can cause the component to appear as a blank white screen. If your component needs to fill its parent container, use fill mode instead.
|
|
71
|
+
|
|
70
72
|
### Fill Mode (opt-in) — component fills its parent container
|
|
71
73
|
|
|
72
74
|
The component fills all available space. Use for sidebars, full-page panels, dashboards, and any component that must stretch to fit the parent.
|
|
@@ -153,6 +155,21 @@ For simple display components:
|
|
|
153
155
|
|
|
154
156
|
## Common Mistakes
|
|
155
157
|
|
|
158
|
+
### Using fill mode CSS with content mode sizing
|
|
159
|
+
|
|
160
|
+
```css
|
|
161
|
+
/* WRONG: height:100% on body in content mode — breaks auto-sizing, causes white screen */
|
|
162
|
+
html, body { height: 100%; overflow: hidden; }
|
|
163
|
+
/* with meta tag: <meta name="myop:size" content='{"height":300}'> */
|
|
164
|
+
|
|
165
|
+
/* CORRECT: either use content mode CSS (no height on body)... */
|
|
166
|
+
html, body { width: 100%; margin: 0; padding: 0; }
|
|
167
|
+
|
|
168
|
+
/* ...or switch to fill mode (height:"100%" in meta tag) */
|
|
169
|
+
html, body { width: 100%; height: 100%; overflow: hidden; }
|
|
170
|
+
/* with meta tag: <meta name="myop:size" content='{"height":"100%"}'> */
|
|
171
|
+
```
|
|
172
|
+
|
|
156
173
|
### Missing `min-height: 0` on flex children
|
|
157
174
|
|
|
158
175
|
```css
|