@benqoder/beam 0.4.0 → 0.4.1
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 +5 -3
- package/dist/client.d.ts.map +1 -1
- package/dist/client.js +0 -16
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -410,7 +410,7 @@ return ctx.drawer(render(<MyDrawer />), { position: 'left', size: 'medium' })
|
|
|
410
410
|
| `beam-watch-if` | Condition that must be true to trigger | `beam-watch-if="value.length >= 3"` |
|
|
411
411
|
| `beam-cast` | Cast input value: `number`, `integer`, `boolean`, `trim` | `beam-cast="number"` |
|
|
412
412
|
| `beam-loading-class` | Add class to input while request is in progress | `beam-loading-class="loading"` |
|
|
413
|
-
| `beam-keep` |
|
|
413
|
+
| `beam-keep` | Prevent element from being morphed during updates | `beam-keep` |
|
|
414
414
|
|
|
415
415
|
### Dirty Form Tracking
|
|
416
416
|
|
|
@@ -783,9 +783,9 @@ Add a class to the input while the request is in progress:
|
|
|
783
783
|
</style>
|
|
784
784
|
```
|
|
785
785
|
|
|
786
|
-
###
|
|
786
|
+
### Preventing Element Replacement
|
|
787
787
|
|
|
788
|
-
Use `beam-keep` to
|
|
788
|
+
Use `beam-keep` to prevent an element from being morphed/replaced during updates. This keeps the element exactly as-is, preserving its state (focus, value, etc.):
|
|
789
789
|
|
|
790
790
|
```html
|
|
791
791
|
<input
|
|
@@ -797,6 +797,8 @@ Use `beam-keep` to preserve focus and cursor position after the response morphs
|
|
|
797
797
|
/>
|
|
798
798
|
```
|
|
799
799
|
|
|
800
|
+
Since the input isn't replaced, focus and cursor position are naturally preserved.
|
|
801
|
+
|
|
800
802
|
### Auto-Save on Blur
|
|
801
803
|
|
|
802
804
|
Trigger action when the user leaves the field:
|
package/dist/client.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../src/client.ts"],"names":[],"mappings":"AACA,OAAO,EAA0B,KAAK,OAAO,EAAE,MAAM,SAAS,CAAA;AA8B9D,UAAU,cAAc;IACtB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;IACxB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,GAAG;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IAClE,MAAM,CAAC,EAAE,MAAM,GAAG;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;CACvF;AAGD,UAAU,UAAU;IAClB,IAAI,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,OAAO,CAAC,cAAc,CAAC,CAAA;IAC7E,gBAAgB,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;CAClF;AAQD,KAAK,cAAc,GAAG,OAAO,CAAC,UAAU,CAAC,CAAA;AAq8BzC,iBAAS,UAAU,IAAI,IAAI,CAU1B;AAkCD,iBAAS,WAAW,IAAI,IAAI,CAU3B;AAID,iBAAS,SAAS,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,GAAE,SAAS,GAAG,OAAmB,GAAG,IAAI,CAsB/E;AAkrBD,iBAAS,UAAU,CAAC,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAUzC;
|
|
1
|
+
{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../src/client.ts"],"names":[],"mappings":"AACA,OAAO,EAA0B,KAAK,OAAO,EAAE,MAAM,SAAS,CAAA;AA8B9D,UAAU,cAAc;IACtB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;IACxB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,GAAG;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IAClE,MAAM,CAAC,EAAE,MAAM,GAAG;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;CACvF;AAGD,UAAU,UAAU;IAClB,IAAI,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,OAAO,CAAC,cAAc,CAAC,CAAA;IAC7E,gBAAgB,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;CAClF;AAQD,KAAK,cAAc,GAAG,OAAO,CAAC,UAAU,CAAC,CAAA;AAq8BzC,iBAAS,UAAU,IAAI,IAAI,CAU1B;AAkCD,iBAAS,WAAW,IAAI,IAAI,CAU3B;AAID,iBAAS,SAAS,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,GAAE,SAAS,GAAG,OAAmB,GAAG,IAAI,CAsB/E;AAkrBD,iBAAS,UAAU,CAAC,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAUzC;AAikCD,UAAU,WAAW;IACnB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAMD,iBAAS,gBAAgB,CAAC,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI,CA0B9D;AAGD,iBAAS,gBAAgB,IAAI,OAAO,CAEnC;AAED,iBAAS,eAAe,IAAI,OAAO,CAAC,cAAc,CAAC,CAGlD;AAED,QAAA,MAAM,SAAS;;;;;;;;;sBA1qFO,OAAO,CAAC,cAAc,CAAC;CAorF5C,CAAA;AAGD,KAAK,YAAY,GAAG,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,OAAO,CAAC,EAAE,MAAM,GAAG,WAAW,KAAK,OAAO,CAAC,cAAc,CAAC,CAAA;AAE/G,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,IAAI,EAAE,OAAO,SAAS,GAAG;YACvB,CAAC,MAAM,EAAE,MAAM,GAAG,YAAY,CAAA;SAC/B,CAAA;KACF;CACF"}
|
package/dist/client.js
CHANGED
|
@@ -1840,9 +1840,6 @@ function setupInputWatcher(el) {
|
|
|
1840
1840
|
}
|
|
1841
1841
|
}
|
|
1842
1842
|
}
|
|
1843
|
-
// Only restore focus for "input" events, not "change" (blur) events
|
|
1844
|
-
const shouldRestoreFocus = htmlEl.hasAttribute('beam-keep') && eventType === 'input';
|
|
1845
|
-
const activeElement = document.activeElement;
|
|
1846
1843
|
// Add loading class if specified
|
|
1847
1844
|
if (loadingClass)
|
|
1848
1845
|
htmlEl.classList.add(loadingClass);
|
|
@@ -1891,19 +1888,6 @@ function setupInputWatcher(el) {
|
|
|
1891
1888
|
if (response.script) {
|
|
1892
1889
|
executeScript(response.script);
|
|
1893
1890
|
}
|
|
1894
|
-
// Restore focus if beam-keep is set and this was an input event (not change/blur)
|
|
1895
|
-
if (shouldRestoreFocus && activeElement instanceof HTMLElement) {
|
|
1896
|
-
const newEl = document.querySelector(`[name="${name}"]`);
|
|
1897
|
-
if (newEl && newEl !== activeElement) {
|
|
1898
|
-
newEl.focus();
|
|
1899
|
-
if (newEl instanceof HTMLInputElement || newEl instanceof HTMLTextAreaElement) {
|
|
1900
|
-
const cursorPos = activeElement.selectionStart;
|
|
1901
|
-
if (cursorPos !== null) {
|
|
1902
|
-
newEl.setSelectionRange(cursorPos, cursorPos);
|
|
1903
|
-
}
|
|
1904
|
-
}
|
|
1905
|
-
}
|
|
1906
|
-
}
|
|
1907
1891
|
}
|
|
1908
1892
|
catch (err) {
|
|
1909
1893
|
console.error('Input watcher error:', err);
|