vue-input-autowidth - npm Package Compare versions

		{
		"name": "vue-input-autowidth",
		"version": "1.0.11",
		"description": "A Vue.js directive for adjusting a text input's width to fit its content.",
		"repository": "https://github.com/syropian/vue-input-autowidth",
		"main": "dist/index.js",
		"module": "dist/index.js",
		"unpkg": "dist/index.umd.min.js",
		"version": "2.0.0",
		"license": "MIT",
		"files": [
		"dist"
		],
		"scripts": {
		"build": "bili",
		"test": "jest",
		"test:watch": "jest --watchAll",
		"example": "poi --serve",
		"example:build": "rm -rf example/dist && poi --prod",
		"example:deploy": "npm run example:build && gh-pages -d example/dist",
		"version": "npm run example:deploy"
		},
		"keywords": [
		"vue",
		"input",
		"autowidth",
		"autosize",
		"autogrow"
		],
		"author": "Collin Henderson <collin@syropia.net>",
		"license": "MIT",
		"bili": {
		"output": {
		"format": [
		"cjs",
		"umd",
		"umd-min",
		"es"
		],
		"moduleName": "VueInputAutowidth"
		"main": "./dist/vue-input-autowidth.umd.js",
		"module": "./dist/vue-input-autowidth.es.js",
		"exports": {
		".": {
		"import": "./dist/vue-input-autowidth.es.js",
		"require": "./dist/vue-input-autowidth.umd.js"
		}
		},
		"poi": {
		"entry": "example/index.js",
		"output": {
		"dir": "example/dist",
		"publicUrl": "/vue-input-autowidth/"
		}
		"types": "./dist/directive.d.ts",
		"scripts": {
		"dev": "vite",
		"build": "tsc --noEmit && vite build && tsc --declaration --emitDeclarationOnly --outDir dist",
		"serve": "vite preview",
		"demo": "cd demo && vite",
		"demo:build": "cd demo && vite build"
		},
		"devDependencies": {
		"@babel/core": "^7.3.4",
		"@babel/preset-env": "^7.3.4",
		"@vue/test-utils": "^1.0.0-beta.29",
		"babel-jest": "^24.9.0",
		"bili": "^4.8.1",
		"gh-pages": "^2.1.1",
		"jest": "^24.9.0",
		"node-sass": "^4.5.3",
		"poi": "^12.7.2",
		"sass-loader": "^6.0.6",
		"vue": "^2.6.8",
		"vue-highlightjs": "^1.3.3",
		"vue-template-compiler": "^2.6.8"
		},
		"dependencies": {
		"es6-object-assign": "^1.1.0"
		"@types/node": "^16.9.2",
		"typescript": "^4.3.2",
		"vite": "^2.5.4",
		"vue": "^3.2.12",
		"vue-tsc": "^0.2.2"
		}
		}

105

README.md

		@@ -1,77 +0,78 @@
		# vue-input-autowidth [![Actions Status](https://github.com/syropian/vue-input-autowidth/workflows/Tests/badge.svg)](https://github.com/syropian/vue-input-autowidth/actions)
		# vue-input-autowidth

		> A Vue.js directive for adjusting a text input's width to fit its content.
		A Vue.js directive for adjusting a text input's width to fit its content.

		![](http://d.pr/i/lfmNKs+)
		## Installation

		[Demo](https://syropian.github.io/vue-input-autowidth/)

		### Install

		```bash
		$ yarn add vue-input-autowidth
		npm install vue-input-autowidth@next --save
		# or...
		yarn add vue-input-autowidth@next
		```

		or
		_or_

		```bash
		$ npm install --save vue-input-autowidth
		Use the UMD build from [Unpkg](https://unpkg.com/vue-input-autowidth), available as `VueInputAutowidth` in the global scope.

		```html
		<script src="/vendor/vue.js" />
		<script src="https://unpkg.com/vue-input-autowidth" />
		```

		It's also available on Unpkg: https://unpkg.com/vue-input-autowidth
		## Usage

		### Usage
		### Globally

		Import and register the directive in your app's entrypoint.

		```js
		import VueInputAutowidth from 'vue-input-autowidth'
		import { createApp } from "vue";
		import App from "./App.vue";
		import { plugin as VueInputAutowidth } from "vue-input-autowidth";

		Vue.use(VueInputAutowidth)

		// and in your template...
		<input
		type="text"
		v-autowidth="{maxWidth: '960px', minWidth: '20px', comfortZone: 0}"
		v-model="name"
		placeholder="Watch me change size with my content!"
		/>
		createApp(App).use(VueInputAutowidth).mount("#app");
		```

		### Options
		### Per-component

		#### maxWidth
		```js
		<script>
		import { directive as VueInputAutowidth } from "vue-input-autowidth"

		Type: `String`
		Default: `'none'`
		export default {
		directives: { autowidth: VueInputAutowidth },
		setup() {
		...
		},
		}
		</script>
		```

		The maximum width the input field will grow to.
		...and in your template:

		#### minWidth
		```html
		<template>
		<input type="text" placeholder="First Name" v-model="msg" v-autowidth />
		</template>
		```

		Type: `String`
		Default: `'none'`
		You can also pass some options:

		The minimum width the input field will shrink to.

		#### comfortZone

		Type: `Number`
		Default: `0`

		The additional space in pixels to add to the far side of the input's content.

		### Development

		```bash
		# To run the example
		$ npm run example

		# To run the tests
		$ npm test

		# To publish the dist file
		$ npm run build
		```html
		<template>
		<input
		type="text"
		placeholder="First Name"
		v-model="msg"
		v-autowidth="{
		minWidth: '75px',
		maxWidth: '75%',
		comfortZone: '1ch',
		}"
		/>
		</template>
		```

		### License
		## License

		MIT © [Collin Henderson](https://github.com/syropian)

dist/index.esm.js

dist/index.js

dist/index.umd.js

dist/index.umd.min.js

dist/index.umd.min.js.map

dist/vue-input-autowidth.js

LICENSE

Sorry, the diff of this file is not supported yet

New alerts

Improved metrics

Worsened metrics

Dependency changes