https://github.com/syropian/vue-input-autowidth

A Vue.js directive that automatically resizes an input's width to fit its contents.
https://github.com/syropian/vue-input-autowidth

auto-width input vue vue2 vue3

Last synced: about 23 hours ago
JSON representation

A Vue.js directive that automatically resizes an input's width to fit its contents.

• Host: GitHub
• URL: https://github.com/syropian/vue-input-autowidth
• Owner: syropian
• License: mit
• Created: 2017-08-22T16:38:35.000Z (about 7 years ago)
• Default Branch: v2
• Last Pushed: 2023-05-24T12:29:32.000Z (over 1 year ago)
• Last Synced: 2024-09-21T10:06:23.061Z (4 days ago)
• Topics: auto-width, input, vue, vue2, vue3
• Language: TypeScript
• Homepage:
• Size: 1.82 MB
• Stars: 103
• Watchers: 4
• Forks: 18
• Open Issues: 17
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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.

> 🚦 Looking for Vue 2 support? Check out the [master branch](https://github.com/syropian/vue-input-autowidth).

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

## Installation

```bash

npm install vue-input-autowidth@next --save

# or...

yarn add vue-input-autowidth@next

```

_or_

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

```html

```

## Usage

### Globally

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

```js

import { createApp } from 'vue'

import App from './App.vue'

import { plugin as VueInputAutowidth } from 'vue-input-autowidth'

createApp(App).use(VueInputAutowidth).mount('#app')

```

### Per-component

```js

import { directive as VueInputAutowidth } from "vue-input-autowidth"

export default {

  directives: { autowidth: VueInputAutowidth },

  setup() {

    ...

  },

}

```

...and in your template:

```html

  

```

You can also pass some options:

```html

  

```

## 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)