https://github.com/codefarm-bs/resizable-input

An input for vue that resizes itself to the its content.
https://github.com/codefarm-bs/resizable-input

form resizable vue

Last synced: 11 months ago
JSON representation

An input for vue that resizes itself to the its content.

• Host: GitHub
• URL: https://github.com/codefarm-bs/resizable-input
• Owner: codefarm-bs
• Created: 2022-01-01T12:54:44.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2022-07-09T06:20:44.000Z (almost 4 years ago)
• Last Synced: 2025-05-31T19:33:40.454Z (about 1 year ago)
• Topics: form, resizable, vue
• Language: Vue
• Homepage:
• Size: 315 KB
• Stars: 2
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Vue Resizable Input

[![npm](https://img.shields.io/npm/v/v-resizable-input.svg) ![npm](https://img.shields.io/npm/dm/v-resizable-input.svg)](https://www.npmjs.com/package/v-resizable-input)

[![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://vuejs.org/)

An simple customizable input for vue that resizes itself to the its content.

![](https://github.com/codefarm-bs/resizable-input/blob/master/assets/image.png?raw=true)

# 🛠️ Getting started

## Installation

### NPM

```sh

$ npm i -S v-resizable-input

```

### Yarn

```sh

$ yarn add v-resizable-input

```

### Import the component

```javascript

import ResizableInput from "v-resizable-input"

```

```javascript

components: {

  ResizableInput,

}

```

## Usage

```html

```

## Interface

### Props

| Props            | Required  | Type            | Default   | Description  |

| ---------------- | --------- | --------------- | --------- | -------------|

| `v-model`     | no     | String, Number  | ''        | value binding |

| `value`       | no     | String, Number  | ''        | part of the `v-model` binding |

| `max`         | no     | Number          | 100       | max textarea characters |

| `row`         | no     | Number          | 1         | number of min rows for your textarea |

| `placeholder` | no     | String          | "Enter your text ..." | placeholder for your textarea |

| `enterable`   | no     | Boolean         | true      | allows to accept enter on textarea |

| `hasHelper`   | no     | Boolean         | true      | indicate how much characters feasible |

| `inputCss`    | no     | String         | 'tailwind classes'      | as default it use tailwind css classes but you can fully customize its style |

| `helperCss`   | no     | String         | 'tailwind classes'      | as default it use tailwind css classes but you can fully customize its style |

### Events

| Name      | Params   | Description  |

| ----------|:---------|--------------|

| input     | value    | fires on textarea content changed. part of the `v-model` binding. [read more](https://vuejs.org/v2/guide/components.html#Form-Input-Components-using-Custom-Events) |

### Slots

There are no slots available

## License

[MIT](http://opensource.org/licenses/MIT)