@base44-preview/vite-plugin 1.0.24-pr.93.c15f29a → 1.0.24-pr.93.fd9637f
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.
|
@@ -1,19 +1,24 @@
|
|
|
1
|
-
|
|
2
|
-
//
|
|
3
|
-
//
|
|
4
|
-
//
|
|
1
|
+
/// <reference types="vite/client" />
|
|
2
|
+
// The on-screen keyboard shrinks the builder's (top-level) visual viewport but not
|
|
3
|
+
// the preview iframe's, so an app inside the iframe can't reflow above the keyboard
|
|
4
|
+
// and leaves a blank gap (the published, top-level app is unaffected). The builder
|
|
5
|
+
// posts the visible height here — { type: "keyboard-viewport", height } — and while
|
|
6
|
+
// the keyboard is open (height > 0) we cap the document / #root / full-height wrappers
|
|
7
|
+
// to it so the layout fits above the keyboard; height 0 releases the cap.
|
|
8
|
+
// Inert until the parent posts; only runs inside the preview iframe.
|
|
5
9
|
if (window.self !== window.top) {
|
|
10
|
+
const MESSAGE_TYPE = "keyboard-viewport";
|
|
6
11
|
const HEIGHT_VAR = "--base44-keyboard-viewport-height";
|
|
7
12
|
const STYLE_ID = "base44-keyboard-viewport-style";
|
|
8
|
-
|
|
13
|
+
const ensureStyle = () => {
|
|
9
14
|
if (document.getElementById(STYLE_ID))
|
|
10
15
|
return;
|
|
11
16
|
const style = document.createElement("style");
|
|
12
17
|
style.id = STYLE_ID;
|
|
13
|
-
//
|
|
14
|
-
// min-h-screen
|
|
15
|
-
//
|
|
16
|
-
//
|
|
18
|
+
// Active only while HEIGHT_VAR is set on <html> (keyboard open). code_generator
|
|
19
|
+
// gives app roots `min-h-screen`/`h-screen`, so capping those (plus 100vh/100dvh
|
|
20
|
+
// inline styles), the mount node and the document makes the layout fit the
|
|
21
|
+
// visible area and reflow bottom-anchored inputs above the keyboard.
|
|
17
22
|
style.textContent = [
|
|
18
23
|
`html[style*="${HEIGHT_VAR}"], html[style*="${HEIGHT_VAR}"] body {`,
|
|
19
24
|
` height: var(${HEIGHT_VAR}) !important;`,
|
|
@@ -32,19 +37,20 @@ if (window.self !== window.top) {
|
|
|
32
37
|
`}`,
|
|
33
38
|
].join("\n");
|
|
34
39
|
document.head.appendChild(style);
|
|
35
|
-
}
|
|
36
|
-
|
|
40
|
+
};
|
|
41
|
+
const apply = (height) => {
|
|
42
|
+
const root = document.documentElement;
|
|
37
43
|
if (height > 0) {
|
|
38
44
|
ensureStyle();
|
|
39
|
-
|
|
45
|
+
root.style.setProperty(HEIGHT_VAR, `${Math.round(height)}px`);
|
|
40
46
|
}
|
|
41
47
|
else {
|
|
42
|
-
|
|
48
|
+
root.style.removeProperty(HEIGHT_VAR);
|
|
43
49
|
}
|
|
44
|
-
}
|
|
50
|
+
};
|
|
45
51
|
window.addEventListener("message", (event) => {
|
|
46
52
|
const data = event.data;
|
|
47
|
-
if (!data || data.type !==
|
|
53
|
+
if (!data || data.type !== MESSAGE_TYPE || typeof data.height !== "number")
|
|
48
54
|
return;
|
|
49
55
|
apply(data.height);
|
|
50
56
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"keyboard-viewport-bridge.js","sourceRoot":"","sources":["../../src/injections/keyboard-viewport-bridge.ts"],"names":[],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"file":"keyboard-viewport-bridge.js","sourceRoot":"","sources":["../../src/injections/keyboard-viewport-bridge.ts"],"names":[],"mappings":"AAAA,qCAAqC;AACrC,mFAAmF;AACnF,oFAAoF;AACpF,mFAAmF;AACnF,oFAAoF;AACpF,uFAAuF;AACvF,0EAA0E;AAC1E,qEAAqE;AAErE,IAAI,MAAM,CAAC,IAAI,KAAK,MAAM,CAAC,GAAG,EAAE,CAAC;IAC/B,MAAM,YAAY,GAAG,mBAAmB,CAAC;IACzC,MAAM,UAAU,GAAG,mCAAmC,CAAC;IACvD,MAAM,QAAQ,GAAG,gCAAgC,CAAC;IAElD,MAAM,WAAW,GAAG,GAAS,EAAE;QAC7B,IAAI,QAAQ,CAAC,cAAc,CAAC,QAAQ,CAAC;YAAE,OAAO;QAC9C,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAC9C,KAAK,CAAC,EAAE,GAAG,QAAQ,CAAC;QACpB,gFAAgF;QAChF,iFAAiF;QACjF,2EAA2E;QAC3E,qEAAqE;QACrE,KAAK,CAAC,WAAW,GAAG;YAClB,gBAAgB,UAAU,oBAAoB,UAAU,WAAW;YACnE,iBAAiB,UAAU,eAAe;YAC1C,qBAAqB,UAAU,eAAe;YAC9C,GAAG;YACH,gBAAgB,UAAU,YAAY;YACtC,iBAAiB,UAAU,eAAe;YAC1C,qBAAqB,UAAU,eAAe;YAC9C,qBAAqB;YACrB,GAAG;YACH,gBAAgB,UAAU,mCAAmC;YAC7D,gBAAgB,UAAU,sBAAsB;YAChD,gBAAgB,UAAU,wBAAwB;YAClD,iBAAiB,UAAU,eAAe;YAC1C,qBAAqB,UAAU,eAAe;YAC9C,GAAG;SACJ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACb,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IACnC,CAAC,CAAC;IAEF,MAAM,KAAK,GAAG,CAAC,MAAc,EAAQ,EAAE;QACrC,MAAM,IAAI,GAAG,QAAQ,CAAC,eAAe,CAAC;QACtC,IAAI,MAAM,GAAG,CAAC,EAAE,CAAC;YACf,WAAW,EAAE,CAAC;YACd,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,UAAU,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;QAChE,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC;QACxC,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,CAAC,KAAmB,EAAE,EAAE;QACzD,MAAM,IAAI,GAAG,KAAK,CAAC,IAAiD,CAAC;QACrE,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,KAAK,YAAY,IAAI,OAAO,IAAI,CAAC,MAAM,KAAK,QAAQ;YAAE,OAAO;QACnF,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IACrB,CAAC,CAAC,CAAC;AACL,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,19 +1,25 @@
|
|
|
1
|
-
|
|
2
|
-
//
|
|
3
|
-
//
|
|
4
|
-
//
|
|
1
|
+
/// <reference types="vite/client" />
|
|
2
|
+
// The on-screen keyboard shrinks the builder's (top-level) visual viewport but not
|
|
3
|
+
// the preview iframe's, so an app inside the iframe can't reflow above the keyboard
|
|
4
|
+
// and leaves a blank gap (the published, top-level app is unaffected). The builder
|
|
5
|
+
// posts the visible height here — { type: "keyboard-viewport", height } — and while
|
|
6
|
+
// the keyboard is open (height > 0) we cap the document / #root / full-height wrappers
|
|
7
|
+
// to it so the layout fits above the keyboard; height 0 releases the cap.
|
|
8
|
+
// Inert until the parent posts; only runs inside the preview iframe.
|
|
9
|
+
|
|
5
10
|
if (window.self !== window.top) {
|
|
11
|
+
const MESSAGE_TYPE = "keyboard-viewport";
|
|
6
12
|
const HEIGHT_VAR = "--base44-keyboard-viewport-height";
|
|
7
13
|
const STYLE_ID = "base44-keyboard-viewport-style";
|
|
8
14
|
|
|
9
|
-
|
|
15
|
+
const ensureStyle = (): void => {
|
|
10
16
|
if (document.getElementById(STYLE_ID)) return;
|
|
11
17
|
const style = document.createElement("style");
|
|
12
18
|
style.id = STYLE_ID;
|
|
13
|
-
//
|
|
14
|
-
// min-h-screen
|
|
15
|
-
//
|
|
16
|
-
//
|
|
19
|
+
// Active only while HEIGHT_VAR is set on <html> (keyboard open). code_generator
|
|
20
|
+
// gives app roots `min-h-screen`/`h-screen`, so capping those (plus 100vh/100dvh
|
|
21
|
+
// inline styles), the mount node and the document makes the layout fit the
|
|
22
|
+
// visible area and reflow bottom-anchored inputs above the keyboard.
|
|
17
23
|
style.textContent = [
|
|
18
24
|
`html[style*="${HEIGHT_VAR}"], html[style*="${HEIGHT_VAR}"] body {`,
|
|
19
25
|
` height: var(${HEIGHT_VAR}) !important;`,
|
|
@@ -32,20 +38,21 @@ if (window.self !== window.top) {
|
|
|
32
38
|
`}`,
|
|
33
39
|
].join("\n");
|
|
34
40
|
document.head.appendChild(style);
|
|
35
|
-
}
|
|
41
|
+
};
|
|
36
42
|
|
|
37
|
-
|
|
43
|
+
const apply = (height: number): void => {
|
|
44
|
+
const root = document.documentElement;
|
|
38
45
|
if (height > 0) {
|
|
39
46
|
ensureStyle();
|
|
40
|
-
|
|
47
|
+
root.style.setProperty(HEIGHT_VAR, `${Math.round(height)}px`);
|
|
41
48
|
} else {
|
|
42
|
-
|
|
49
|
+
root.style.removeProperty(HEIGHT_VAR);
|
|
43
50
|
}
|
|
44
|
-
}
|
|
51
|
+
};
|
|
45
52
|
|
|
46
53
|
window.addEventListener("message", (event: MessageEvent) => {
|
|
47
|
-
const data = event.data;
|
|
48
|
-
if (!data || data.type !==
|
|
54
|
+
const data = event.data as { type?: string; height?: number } | null;
|
|
55
|
+
if (!data || data.type !== MESSAGE_TYPE || typeof data.height !== "number") return;
|
|
49
56
|
apply(data.height);
|
|
50
57
|
});
|
|
51
58
|
}
|