Socket
Socket
Sign inDemoInstall

vue-input-autowidth

Package Overview
Dependencies
0
Maintainers
1
Versions
16
Alerts
File Explorer

Advanced tools

npm Scripts

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 2.0.2 to 2.2.0

4

dist/lib/directive.d.ts

@@ -6,4 +6,8 @@ import { ObjectDirective } from 'vue';

comfortZone?: string;
watchWindowSize?: boolean;
windowResizeHandlerDebounceTime?: number;
disableNonInputWarning?: boolean;
}
export declare const debounce: <T extends (...args: any[]) => any>(callback: T, waitFor: number) => (...args: Parameters<T>) => ReturnType<T>;
declare const _default: ObjectDirective<any, any>;
export default _default;

2

dist/vue-input-autowidth.es.js

@@ -1,1 +0,1 @@

const e={maxWidth:"none",minWidth:"none",comfortZone:"0px"},t=(e,t)=>{const n=e.mirror;e.style.maxWidth=t.maxWidth||"none",e.style.minWidth=t.minWidth||"none";let o=e.value;for(o||(o=e.placeholder||"");n.childNodes.length;)n.removeChild(n.childNodes[0]);n.appendChild(document.createTextNode(o));const i=n.scrollWidth+2;i!=e.scrollWidth&&(e.style.width=`${i}px`)},n=t=>Object.assign({},e,t);var o={beforeMount:function(e){if("INPUT"!==e.tagName.toLocaleUpperCase())throw new Error("v-input-autowidth can only be used on input elements.")},mounted:function(e,o,i){const r=n(o.value),d=Object.prototype.hasOwnProperty.call(i.props,"@onUpdate:modelValue"),l=window.getComputedStyle(e);e.mirror=document.createElement("div"),Object.assign(e.mirror.style,{position:"absolute",top:"0",left:"0",visibility:"hidden",height:"0",overflow:"hidden",whiteSpace:"pre",fontSize:l.fontSize,fontFamily:l.fontFamily,fontWeight:l.fontWeight,fontStyle:l.fontStyle,letterSpacing:l.letterSpacing,textTransform:l.textTransform,paddingRight:`calc(${r.comfortZone} + ${l.paddingRight} + ${l.borderRightWidth})`,paddingLeft:`calc(${l.paddingLeft} + ${l.borderLeftWidth})`}),e.mirror.setAttribute("aria-hidden","true"),document.body.appendChild(e.mirror),t(e,r),d||e.addEventListener("input",t.bind(null,e,r))},updated:function(e,o){t(e,n(o.value))},unmounted:function(e,o){document.body.removeChild(e.mirror),e.removeEventListener("input",t.bind(null,e,n(o.value)))}};const i={install:e=>{Number(e.version.split(".")[0])<3&&console.warn("This plugin requires Vue 3"),e.directive("autowidth",o)}};export{o as directive,i as plugin};
const e={maxWidth:void 0,minWidth:void 0,comfortZone:"0px",watchWindowSize:!1,windowResizeHandlerDebounceTime:150,disableNonInputWarning:!1},i=e=>{const{mirror:i,options:t}=e;t.maxWidth&&(e.style.maxWidth=t.maxWidth),t.minWidth&&(e.style.minWidth=t.minWidth);let n=e.value;for(n||(n=e.placeholder||"");i.childNodes.length;)i.removeChild(i.childNodes[0]);i.appendChild(document.createTextNode(n));const o=i.scrollWidth+2;o!=e.scrollWidth&&(e.style.width=`${o}px`)},t=e=>{const i=window.getComputedStyle(e),{options:t}=e;Object.assign(e.mirror.style,{position:"absolute",top:"0",left:"0",visibility:"hidden",height:"0",overflow:"hidden",whiteSpace:"pre",fontSize:i.fontSize,fontFamily:i.fontFamily,fontWeight:i.fontWeight,fontStyle:i.fontStyle,letterSpacing:i.letterSpacing,textTransform:i.textTransform,paddingRight:`calc(${t.comfortZone} + ${i.paddingRight} + ${i.borderRightWidth})`,paddingLeft:`calc(${i.paddingLeft} + ${i.borderLeftWidth})`})},n=e=>{t(e),i(e)};var o={beforeMount:function(i,t){var n;if(i.options=(n=t.value,Object.assign({},e,n)),!i.options.disableNonInputWarning&&"INPUT"!==i.tagName.toLocaleUpperCase())throw new Error("v-input-autowidth can only be used on input elements.")},mounted:function(e,o,r){const d=Object.prototype.hasOwnProperty.call(r.props,"@onUpdate:modelValue");if(e.sizerFunc=t=>i(e),e.mirror=document.createElement("div"),t(e),e.mirror.setAttribute("aria-hidden","true"),document.body.appendChild(e.mirror),n(e),d||e.addEventListener("input",e.sizerFunc),e.options.watchWindowSize&&void 0!==e.options.windowResizeHandlerDebounceTime){const i=i=>n(e);e.windowResizeHandler=((e,i)=>{let t;return(...n)=>{let o;return t&&clearTimeout(t),t=setTimeout((()=>{o=e(...n)}),i),o}})(i,e.options.windowResizeHandlerDebounceTime),window.addEventListener("resize",e.windowResizeHandler,{passive:!0})}},updated:function(e){e.sizerFunc&&e.sizerFunc()},unmounted:function(e){document.body.removeChild(e.mirror),e.sizerFunc&&e.removeEventListener("input",e.sizerFunc),e.options.watchWindowSize&&e.windowResizeHandler&&window.removeEventListener("resize",e.windowResizeHandler)}};const r={install:e=>{Number(e.version.split(".")[0])<3&&console.warn("This plugin requires Vue 3"),e.directive("autowidth",o)}};export{o as directive,r as plugin};

2

dist/vue-input-autowidth.umd.js

@@ -1,1 +0,1 @@

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self)["vue-input-autowidth"]={})}(this,(function(e){"use strict";const t={maxWidth:"none",minWidth:"none",comfortZone:"0px"},n=(e,t)=>{const n=e.mirror;e.style.maxWidth=t.maxWidth||"none",e.style.minWidth=t.minWidth||"none";let o=e.value;for(o||(o=e.placeholder||"");n.childNodes.length;)n.removeChild(n.childNodes[0]);n.appendChild(document.createTextNode(o));const i=n.scrollWidth+2;i!=e.scrollWidth&&(e.style.width=`${i}px`)},o=e=>Object.assign({},t,e);var i={beforeMount:function(e){if("INPUT"!==e.tagName.toLocaleUpperCase())throw new Error("v-input-autowidth can only be used on input elements.")},mounted:function(e,t,i){const d=o(t.value),r=Object.prototype.hasOwnProperty.call(i.props,"@onUpdate:modelValue"),l=window.getComputedStyle(e);e.mirror=document.createElement("div"),Object.assign(e.mirror.style,{position:"absolute",top:"0",left:"0",visibility:"hidden",height:"0",overflow:"hidden",whiteSpace:"pre",fontSize:l.fontSize,fontFamily:l.fontFamily,fontWeight:l.fontWeight,fontStyle:l.fontStyle,letterSpacing:l.letterSpacing,textTransform:l.textTransform,paddingRight:`calc(${d.comfortZone} + ${l.paddingRight} + ${l.borderRightWidth})`,paddingLeft:`calc(${l.paddingLeft} + ${l.borderLeftWidth})`}),e.mirror.setAttribute("aria-hidden","true"),document.body.appendChild(e.mirror),n(e,d),r||e.addEventListener("input",n.bind(null,e,d))},updated:function(e,t){n(e,o(t.value))},unmounted:function(e,t){document.body.removeChild(e.mirror),e.removeEventListener("input",n.bind(null,e,o(t.value)))}};const d={install:e=>{Number(e.version.split(".")[0])<3&&console.warn("This plugin requires Vue 3"),e.directive("autowidth",i)}};e.directive=i,e.plugin=d,Object.defineProperty(e,"__esModule",{value:!0}),e[Symbol.toStringTag]="Module"}));
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self)["vue-input-autowidth"]={})}(this,(function(e){"use strict";const t={maxWidth:void 0,minWidth:void 0,comfortZone:"0px",watchWindowSize:!1,windowResizeHandlerDebounceTime:150,disableNonInputWarning:!1},i=e=>{const{mirror:t,options:i}=e;i.maxWidth&&(e.style.maxWidth=i.maxWidth),i.minWidth&&(e.style.minWidth=i.minWidth);let n=e.value;for(n||(n=e.placeholder||"");t.childNodes.length;)t.removeChild(t.childNodes[0]);t.appendChild(document.createTextNode(n));const o=t.scrollWidth+2;o!=e.scrollWidth&&(e.style.width=`${o}px`)},n=e=>{const t=window.getComputedStyle(e),{options:i}=e;Object.assign(e.mirror.style,{position:"absolute",top:"0",left:"0",visibility:"hidden",height:"0",overflow:"hidden",whiteSpace:"pre",fontSize:t.fontSize,fontFamily:t.fontFamily,fontWeight:t.fontWeight,fontStyle:t.fontStyle,letterSpacing:t.letterSpacing,textTransform:t.textTransform,paddingRight:`calc(${i.comfortZone} + ${t.paddingRight} + ${t.borderRightWidth})`,paddingLeft:`calc(${t.paddingLeft} + ${t.borderLeftWidth})`})},o=e=>{n(e),i(e)};var d={beforeMount:function(e,i){var n;if(e.options=(n=i.value,Object.assign({},t,n)),!e.options.disableNonInputWarning&&"INPUT"!==e.tagName.toLocaleUpperCase())throw new Error("v-input-autowidth can only be used on input elements.")},mounted:function(e,t,d){const r=Object.prototype.hasOwnProperty.call(d.props,"@onUpdate:modelValue");if(e.sizerFunc=t=>i(e),e.mirror=document.createElement("div"),n(e),e.mirror.setAttribute("aria-hidden","true"),document.body.appendChild(e.mirror),o(e),r||e.addEventListener("input",e.sizerFunc),e.options.watchWindowSize&&void 0!==e.options.windowResizeHandlerDebounceTime){const t=t=>o(e);e.windowResizeHandler=((e,t)=>{let i;return(...n)=>{let o;return i&&clearTimeout(i),i=setTimeout((()=>{o=e(...n)}),t),o}})(t,e.options.windowResizeHandlerDebounceTime),window.addEventListener("resize",e.windowResizeHandler,{passive:!0})}},updated:function(e){e.sizerFunc&&e.sizerFunc()},unmounted:function(e){document.body.removeChild(e.mirror),e.sizerFunc&&e.removeEventListener("input",e.sizerFunc),e.options.watchWindowSize&&e.windowResizeHandler&&window.removeEventListener("resize",e.windowResizeHandler)}};const r={install:e=>{Number(e.version.split(".")[0])<3&&console.warn("This plugin requires Vue 3"),e.directive("autowidth",d)}};e.directive=d,e.plugin=r,Object.defineProperty(e,"__esModule",{value:!0}),e[Symbol.toStringTag]="Module"}));

7

package.json
{
"name": "vue-input-autowidth",
"version": "2.0.2",
"version": "2.2.0",
"license": "MIT",

@@ -24,3 +24,4 @@ "files": [

"lint": "eslint --ext .ts,vue --ignore-path .gitignore ./lib ./sandbox ./demo ./tests",
"format": "prettier ./lib ./sandbox ./demo ./tests -w -u"
"format": "prettier ./lib ./sandbox ./demo ./tests -w -u",
"serve": "vite preview"
},

@@ -33,3 +34,3 @@ "devDependencies": {

"@typescript-eslint/parser": "^4.31.2",
"@vitejs/plugin-vue": "^1.9.1",
"@vitejs/plugin-vue": "^1.9.2",
"@vue/compiler-sfc": "^3.2.16",

@@ -36,0 +37,0 @@ "@vue/eslint-config-prettier": "^6.0.0",

22

README.md
# vue-input-autowidth ![tests](https://github.com/syropian/vue-input-autowidth/workflows/tests/badge.svg?branch=v2)
A Vue.js directive that automatically resizes an input's width to fit its contents.

@@ -8,2 +7,4 @@

#### [See demo](https://vue-input-autowidth.netlify.app/)
## Installation

@@ -33,7 +34,7 @@

```js
import { createApp } from "vue";
import App from "./App.vue";
import { plugin as VueInputAutowidth } from "vue-input-autowidth";
import { createApp } from 'vue'
import App from './App.vue'
import { plugin as VueInputAutowidth } from 'vue-input-autowidth'
createApp(App).use(VueInputAutowidth).mount("#app");
createApp(App).use(VueInputAutowidth).mount('#app')
```

@@ -81,4 +82,15 @@

## Available Options
| Name | Type | Default Value | Description |
| ----------------------------------- | --------- | ------------- | ----------------------------------------------------------------------------------------------------------------------- |
| **maxWidth** | `string` | `undefined` | Sets the `max-width` CSS property on the element. The value should be a valid CSS size and unit. |
| **minWidth** | `string` | `undefined` | Sets the `min-width` CSS property on the element. The value should be a valid CSS size and unit. |
| **comfortZone** | `string` | `0px` | Uses CSS `calc()` to add the specificied amount to the calculated width. The value should be a valid CSS size and unit. |
| **watchWindowSize** | `boolean` | `false` | When enabled, the directive will listen to the window resize event, and resize the input if needed. |
| **windowResizeHandlerDebounceTime** | `number` | `150` | The debounce time in milliseconds for the window resize event. Only applies if `watchWindowSize` is `true`. |
| **disableNonInputWarning** | `boolean` | `false` | Disables the console warning if you try and use the directive on a non-input element. |
## License
MIT © [Collin Henderson](https://github.com/syropian)
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc