Skip to content

Commit c36118e

Browse files
committed
Simplifies size calculations and fixes sizing issue on Firefox
1 parent a45d896 commit c36118e

File tree

4 files changed

+32
-29
lines changed

4 files changed

+32
-29
lines changed

dist/vue-input-autowidth.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

src/check-width.js

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,16 +11,20 @@ export default function(el, binding) {
1111
el.style.minWidth = options.minWidth;
1212

1313
let val = el.value;
14+
1415
if (!val) {
1516
val = el.placeholder || "";
1617
}
18+
1719
while (mirror.childNodes.length) {
1820
mirror.removeChild(mirror.childNodes[0]);
1921
}
22+
2023
mirror.appendChild(document.createTextNode(val));
21-
let newWidth = mirror.getBoundingClientRect().width + options.comfortZone;
2224

23-
if (newWidth != el.getBoundingClientRect().width) {
25+
let newWidth = mirror.scrollWidth + options.comfortZone + 2;
26+
27+
if (newWidth != el.scrollWidth) {
2428
el.style.width = `${newWidth}px`;
2529
}
2630
}

src/index.js

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import VueInputAutoWidth from "./vue-input-autowidth";
22

3-
function install(Vue, globalOptions) {
3+
const install = function(Vue) {
44
Vue.directive("autowidth", VueInputAutoWidth);
5-
}
6-
7-
export { default as VueInputAutoWidth } from "./vue-input-autowidth";
8-
export default install;
5+
};
96

107
if (typeof window !== "undefined" && window.Vue) {
118
window.Vue.use(install);
129
}
10+
11+
VueInputAutoWidth.install = install;
12+
13+
export default VueInputAutoWidth;

src/vue-input-autowidth.js

Lines changed: 19 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -9,36 +9,34 @@ export default {
99
el.dataset.uuid = Math.random()
1010
.toString(36)
1111
.slice(-5);
12+
el.style.boxSizing = "content-box";
1213
},
1314
inserted: function(el, binding) {
15+
const styles = window.getComputedStyle(el);
16+
1417
el.mirror = document.createElement("span");
15-
el.mirror.classList.add(`vue-input-autowidth-mirror-${el.dataset.uuid}`);
16-
let styles = window.getComputedStyle(el);
18+
1719
Object.assign(el.mirror.style, {
1820
position: "absolute",
19-
top: "-9999px",
20-
left: "-9999px",
21-
width: "auto",
21+
top: "0",
22+
left: "0",
23+
visibility: "hidden",
24+
height: "0",
25+
overflow: "scroll",
2226
whiteSpace: "pre",
23-
opacity: 0,
24-
border: styles.getPropertyValue("border"),
25-
fontSize: styles.getPropertyValue("font-size"),
26-
fontFamily: styles.getPropertyValue("font-family"),
27-
fontWeight: styles.getPropertyValue("font-weight"),
28-
fontStyle: styles.getPropertyValue("font-style"),
29-
fontFeatureSettings: styles.getPropertyValue("font-feature-settings"),
30-
fontKerning: styles.getPropertyValue("font-kerning"),
31-
fontStretch: styles.getPropertyValue("font-stretch"),
32-
fontVariant: styles.getPropertyValue("font-variant"),
33-
fontVariantCaps: styles.getPropertyValue("font-variant-caps"),
34-
fontVariantLigatures: styles.getPropertyValue("font-variant-ligatures"),
35-
fontVariantNumeric: styles.getPropertyValue("font-variant-numeric"),
36-
letterSpacing: styles.getPropertyValue("letter-spacing"),
37-
padding: styles.getPropertyValue("padding"),
38-
textTransform: styles.getPropertyValue("text-transform")
27+
fontSize: styles.fontSize,
28+
fontFamily: styles.fontFamily,
29+
fontWeight: styles.fontWeight,
30+
fontStyle: styles.fontStyle,
31+
letterSpacing: styles.letterSpacing,
32+
textTransform: styles.textTransform
3933
});
34+
35+
el.mirror.classList.add(`vue-input-autowidth-mirror-${el.dataset.uuid}`);
4036
el.mirror.setAttribute("aria-hidden", "true");
37+
4138
document.body.appendChild(el.mirror);
39+
4240
checkWidth(el, binding);
4341
},
4442
componentUpdated: function(el, binding) {

0 commit comments

Comments
 (0)