Skip to content

Commit 92e50ba

Browse files
committed
Defaults watchWindowSize to false, updates readme
1 parent 45b487e commit 92e50ba

File tree

2 files changed

+16
-6
lines changed

2 files changed

+16
-6
lines changed

README.md

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
# vue-input-autowidth ![tests](https://github.com/syropian/vue-input-autowidth/workflows/tests/badge.svg?branch=v2)
22

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

65
> 🚦 Looking for Vue 2 support? Check out the [master branch](https://github.com/syropian/vue-input-autowidth).
@@ -31,11 +30,11 @@ Use the UMD build from [Unpkg](https://unpkg.com/vue-input-autowidth), available
3130
Import and register the directive in your app's entrypoint.
3231
3332
```js
34-
import { createApp } from "vue";
35-
import App from "./App.vue";
36-
import { plugin as VueInputAutowidth } from "vue-input-autowidth";
33+
import { createApp } from 'vue'
34+
import App from './App.vue'
35+
import { plugin as VueInputAutowidth } from 'vue-input-autowidth'
3736
38-
createApp(App).use(VueInputAutowidth).mount("#app");
37+
createApp(App).use(VueInputAutowidth).mount('#app')
3938
```
4039
4140
### Per-component
@@ -78,6 +77,17 @@ You can also pass some options:
7877
</template>
7978
```
8079

80+
## Available Options
81+
82+
| Name | Type | Default Value | Description |
83+
| ----------------------------------- | --------- | ------------- | ----------------------------------------------------------------------------------------------------------------------- |
84+
| **maxWidth** | `string` | `undefined` | Sets the `max-width` CSS property on the element. The value should be a valid CSS size and unit. |
85+
| **minWidth** | `string` | `undefined` | Sets the `min-width` CSS property on the element. The value should be a valid CSS size and unit. |
86+
| **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. |
87+
| **watchWindowSize** | `boolean` | `false` | When enabled, the directive will listen to the window resize event, and resize the input if needed. |
88+
| **windowResizeHandlerDebounceTime** | `number` | `150` | The debounce time in milliseconds for the window resize event. Only applies if `watchWindowSize` is `true`. |
89+
| **disableNonInputWarning** | `boolean` | `false` | Disables the console warning if you try and use the directive on a non-input element. |
90+
8191
## License
8292

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

lib/directive.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ const defaults: Complete<InputAutoWidthOptions> = {
2424
maxWidth: undefined,
2525
minWidth: undefined,
2626
comfortZone: '0px',
27-
watchWindowSize: true,
27+
watchWindowSize: false,
2828
windowResizeHandlerDebounceTime: 150,
2929
disableNonInputWarning: false,
3030
} as const

0 commit comments

Comments
 (0)