@zag-js/auto-resize 0.2.1 → 0.2.3
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/dist/index.js +9 -30
- package/dist/index.mjs +6 -25
- package/package.json +5 -3
package/dist/index.js
CHANGED
|
@@ -23,32 +23,11 @@ __export(src_exports, {
|
|
|
23
23
|
autoResizeInput: () => autoResizeInput
|
|
24
24
|
});
|
|
25
25
|
module.exports = __toCommonJS(src_exports);
|
|
26
|
-
|
|
27
|
-
// ../dom/src/query.ts
|
|
28
|
-
function isDocument(el) {
|
|
29
|
-
return el.nodeType === Node.DOCUMENT_NODE;
|
|
30
|
-
}
|
|
31
|
-
function isWindow(value) {
|
|
32
|
-
return (value == null ? void 0 : value.toString()) === "[object Window]";
|
|
33
|
-
}
|
|
34
|
-
function getDocument(el) {
|
|
35
|
-
var _a;
|
|
36
|
-
if (isWindow(el))
|
|
37
|
-
return el.document;
|
|
38
|
-
if (isDocument(el))
|
|
39
|
-
return el;
|
|
40
|
-
return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
|
|
41
|
-
}
|
|
42
|
-
function getWindow(el) {
|
|
43
|
-
var _a;
|
|
44
|
-
return (_a = el == null ? void 0 : el.ownerDocument.defaultView) != null ? _a : window;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
// src/index.ts
|
|
26
|
+
var import_dom_query = require("@zag-js/dom-query");
|
|
48
27
|
function copyVisualStyles(fromEl, toEl) {
|
|
49
28
|
if (!fromEl)
|
|
50
29
|
return;
|
|
51
|
-
const win = getWindow(fromEl);
|
|
30
|
+
const win = (0, import_dom_query.getWindow)(fromEl);
|
|
52
31
|
const el = win.getComputedStyle(fromEl);
|
|
53
32
|
const cssText = "box-sizing:" + el.boxSizing + ";border-left:" + el.borderLeftWidth + " solid red;border-right:" + el.borderRightWidth + " solid red;font-family:" + el.fontFamily + ";font-feature-settings:" + el.fontFeatureSettings + ";font-kerning:" + el.fontKerning + ";font-size:" + el.fontSize + ";font-stretch:" + el.fontStretch + ";font-style:" + el.fontStyle + ";font-variant:" + el.fontVariant + ";font-variant-caps:" + el.fontVariantCaps + ";font-variant-ligatures:" + el.fontVariantLigatures + ";font-variant-numeric:" + el.fontVariantNumeric + ";font-weight:" + el.fontWeight + ";letter-spacing:" + el.letterSpacing + ";margin-left:" + el.marginLeft + ";margin-right:" + el.marginRight + ";padding-left:" + el.paddingLeft + ";padding-right:" + el.paddingRight + ";text-indent:" + el.textIndent + ";text-transform:" + el.textTransform;
|
|
54
33
|
toEl.style.cssText += cssText;
|
|
@@ -63,24 +42,24 @@ function createGhostElement(doc) {
|
|
|
63
42
|
function autoResizeInput(input) {
|
|
64
43
|
if (!input)
|
|
65
44
|
return;
|
|
66
|
-
const doc = getDocument(input);
|
|
67
|
-
const win = getWindow(input);
|
|
45
|
+
const doc = (0, import_dom_query.getDocument)(input);
|
|
46
|
+
const win = (0, import_dom_query.getWindow)(input);
|
|
68
47
|
const ghost = createGhostElement(doc);
|
|
69
48
|
copyVisualStyles(input, ghost);
|
|
70
49
|
function resize() {
|
|
71
50
|
win.requestAnimationFrame(() => {
|
|
72
51
|
ghost.innerHTML = input.value;
|
|
73
52
|
const rect = win.getComputedStyle(ghost);
|
|
74
|
-
input
|
|
53
|
+
input?.style.setProperty("width", rect.width);
|
|
75
54
|
});
|
|
76
55
|
}
|
|
77
56
|
resize();
|
|
78
|
-
input
|
|
79
|
-
input
|
|
57
|
+
input?.addEventListener("input", resize);
|
|
58
|
+
input?.addEventListener("change", resize);
|
|
80
59
|
return () => {
|
|
81
60
|
doc.body.removeChild(ghost);
|
|
82
|
-
input
|
|
83
|
-
input
|
|
61
|
+
input?.removeEventListener("input", resize);
|
|
62
|
+
input?.removeEventListener("change", resize);
|
|
84
63
|
};
|
|
85
64
|
}
|
|
86
65
|
// Annotate the CommonJS export names for ESM import in node:
|
package/dist/index.mjs
CHANGED
|
@@ -1,24 +1,5 @@
|
|
|
1
|
-
// ../dom/src/query.ts
|
|
2
|
-
function isDocument(el) {
|
|
3
|
-
return el.nodeType === Node.DOCUMENT_NODE;
|
|
4
|
-
}
|
|
5
|
-
function isWindow(value) {
|
|
6
|
-
return (value == null ? void 0 : value.toString()) === "[object Window]";
|
|
7
|
-
}
|
|
8
|
-
function getDocument(el) {
|
|
9
|
-
var _a;
|
|
10
|
-
if (isWindow(el))
|
|
11
|
-
return el.document;
|
|
12
|
-
if (isDocument(el))
|
|
13
|
-
return el;
|
|
14
|
-
return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
|
|
15
|
-
}
|
|
16
|
-
function getWindow(el) {
|
|
17
|
-
var _a;
|
|
18
|
-
return (_a = el == null ? void 0 : el.ownerDocument.defaultView) != null ? _a : window;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
1
|
// src/index.ts
|
|
2
|
+
import { getDocument, getWindow } from "@zag-js/dom-query";
|
|
22
3
|
function copyVisualStyles(fromEl, toEl) {
|
|
23
4
|
if (!fromEl)
|
|
24
5
|
return;
|
|
@@ -45,16 +26,16 @@ function autoResizeInput(input) {
|
|
|
45
26
|
win.requestAnimationFrame(() => {
|
|
46
27
|
ghost.innerHTML = input.value;
|
|
47
28
|
const rect = win.getComputedStyle(ghost);
|
|
48
|
-
input
|
|
29
|
+
input?.style.setProperty("width", rect.width);
|
|
49
30
|
});
|
|
50
31
|
}
|
|
51
32
|
resize();
|
|
52
|
-
input
|
|
53
|
-
input
|
|
33
|
+
input?.addEventListener("input", resize);
|
|
34
|
+
input?.addEventListener("change", resize);
|
|
54
35
|
return () => {
|
|
55
36
|
doc.body.removeChild(ghost);
|
|
56
|
-
input
|
|
57
|
-
input
|
|
37
|
+
input?.removeEventListener("input", resize);
|
|
38
|
+
input?.removeEventListener("change", resize);
|
|
58
39
|
};
|
|
59
40
|
}
|
|
60
41
|
export {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zag-js/auto-resize",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.3",
|
|
4
4
|
"description": "Autoresize utilities for the web",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"js",
|
|
@@ -21,9 +21,11 @@
|
|
|
21
21
|
"bugs": {
|
|
22
22
|
"url": "https://github.com/chakra-ui/zag/issues"
|
|
23
23
|
},
|
|
24
|
+
"dependencies": {
|
|
25
|
+
"@zag-js/dom-query": "0.1.3"
|
|
26
|
+
},
|
|
24
27
|
"devDependencies": {
|
|
25
|
-
"clean-package": "2.2.0"
|
|
26
|
-
"@zag-js/dom-utils": "0.2.2"
|
|
28
|
+
"clean-package": "2.2.0"
|
|
27
29
|
},
|
|
28
30
|
"clean-package": "../../../clean-package.config.json",
|
|
29
31
|
"main": "dist/index.js",
|