syropian / vue-input-autowidth Goto Github PK

View Code? Open in Web Editor NEW

102.0 4.0 18.0 1.86 MB

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

License: MIT License

JavaScript 18.50% TypeScript 81.50%

vue input auto-width vue2 vue3

vue-input-autowidth's Introduction

vue-input-autowidth

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.

See demo

Installation

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

Use the UMD build from Unpkg, available as VueInputAutowidth in the global scope.

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

Usage

Globally

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

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

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

export default {
  directives: { autowidth: VueInputAutowidth },
  setup() {
    ...
  },
}
</script>

...and in your template:

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

You can also pass some options:

<template>
  <input
    type="text"
    placeholder="First Name"
    v-model="msg"
    v-autowidth="{
      minWidth: '75px',
      maxWidth: '75%',
      comfortZone: '1ch',
    }"
  />
</template>

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

vue-input-autowidth's People

Contributors

Stargazers

Watchers

Forkers

mr-sanders maoniangv5 jettway wsb260 lenzls wj-code-mania panboren kkxlkkxllb nachodd trendingtechnology h-hidetaka singod myl303 djmilan tsbolty diandianyezi dai-siki libin1991

vue-input-autowidth's Issues

The mirror span is still read by screen readers

The auto generated mirror span is read by screen readers.

Related merge request: #12

Kindly add Support for Typescript

Vue 3 doesn't work. Please fix.

box-sizing: content-box (bootstrap 4)

Input field looks large because box-sizing property is set to content-box.

Auto width calculated incorrectly on page load

I had the auto width calculated incorrectly when the page load at first but then if I change or remove the text from input, it worked correctly. Here is a video showing exactly when it happens
https://giphy.com/gifs/hWpIELosaTxjlcMyCW
the domain name in the video is just a element. Only the subdomain is the textbox. I just styled this the way so the whole line look like a textbox.

[Vue warn]: A plugin must either be a function or an object with an "install" function.

Thank you for making this great plugin!

I believe I've followed your instructions for installation and usage on the v2 branch, but get [Vue warn]: A plugin must either be a function or an object with an "install" function. when I try to use it.

For your reference, here's my main.js:

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

import App from "./App.vue";
import router from "./router";

import "./assets/main.css";

const app = createApp(App);

app.use(VueInputAutowidth); // this is the line with the warning
app.use(router);

app.mount("#app");

This problem seems to prevent me from using your plugin. I attempt to use it in a component I get:

[Vue warn]: Failed to resolve directive: autowidth 
  at <HomeView onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <App>

Not working when using :value directive on input.

I'm currently injecting data into the input component directly via the :value directive, which does not trigger the autoresize. Changing to v-model fixes it.

Is there a fundamental restriction when using the value directive which makes the autoresize functionality not work?

max/min width options probably not necessary

All it's currently doing is setting the min/max width css style on the element. This is something the user can likely do themselves, and with Vue's reactivity system, it's easy to update.

Dist should be ES5

This module does not work in IE11 due to it using ES6 Object.assign. The dist file should be ES5 for better browser support.

This is an issue to me because Browserify/Babelify does not transpile the node_modules folder.

Padding breaks autowidth in Vue 3

Using the v2 branch, whenever I add left/right padding, the width is not accounting for it and therefore cuts off text.

Paste text breaks max width

q is not defined

I got this error on production (Heroku), I've been using Vue 2 with Meteor.

Maybe too narrow on Firefox

It could be this needs some inquiry but I think on Firefox (68.0.2 MacOS) the fiels are too narrow.
Other browser do work fine.

Doesn't work?

It doesn't seem to work? Do you have a working demo somewhere other than the gif?

https://jsfiddle.net/1Lrgmu7n/

wrong width on password input

just a little bug when you use a password input, show you

| text input |
| ••••••••••• |

Release problem

I waiting 1.0.8, but the fix for FF is not here :
See : https://unpkg.com/[email protected]/dist/index.umd.min.js whereas : dd9c3d9#diff-86ae3ce16deeb1cf5903641a8f921997R25

Please fix

Wrong width

Hi,

On last version FF, since last update.

My input seems to appear with confortZone > 0 while ... :
v-autowidth="{maxWidth: '680px', minWidth: '50px', comfortZone: 0}"

Please fix 🤔
PS: no it's not minWidth. Seems to be OK on other browser like Chrome

npm upload

Please, upload latest version to npm

Flicker on keydown in Chrome/Safari

I've been testing vue-input-autowidth and it seems there is a slight flicker on keydown in Chrome/Safari (Version 61.0.3163.100) but not in Firefox.

All extensions were disabled.

Loom Recording

Not working when trying to use it with Nuxt3.

It shows me an error:

500
Cannot read properties of undefined (reading 'getSSRProps')

Vue 3 support

I am currently migrating some of my apps to Vue3 which is currently in RC-2.

There is a few breaking changes to the directive API making the library not compatible.

I found a workaround in my apps by doing:

import VueInputAutowidth from 'vue-input-autowidth';

export default {
  [...]
  directives: {
    autowidth: {
      beforeMount: VueInputAutowidth.bind,
      mounted: VueInputAutowidth.inserted,
      updated: VueInputAutowidth.componentUpdated,
      unmounted: VueInputAutowidth.unbind,
    },
  },
}