Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

vue-textarea-autosize

Package Overview
Dependencies
Maintainers
1
Versions
8
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue-textarea-autosize - npm Package Compare versions

Comparing version 0.0.0 to 1.0.0

src/components/TextareaAutosize.vue

2

config/webpack.config.base.js

@@ -29,2 +29,4 @@ var webpack = require('webpack')

css: ExtractTextPlugin.extract('css-loader'),
sass: ExtractTextPlugin.extract('css-loader!sass-loader'),
scss: ExtractTextPlugin.extract('css-loader!sass-loader'),
},

@@ -31,0 +33,0 @@ },

2

dist/vue-textarea-autosize.browser.js

@@ -1,1 +0,1 @@

!function(root,factory){"object"==typeof exports&&"object"==typeof module?module.exports=factory():"function"==typeof define&&define.amd?define([],factory):"object"==typeof exports?exports.VueTextareaAutosize=factory():root.VueTextareaAutosize=factory()}(this,function(){return function(modules){function __webpack_require__(moduleId){if(installedModules[moduleId])return installedModules[moduleId].exports;var module=installedModules[moduleId]={i:moduleId,l:!1,exports:{}};return modules[moduleId].call(module.exports,module,module.exports,__webpack_require__),module.l=!0,module.exports}var installedModules={};return __webpack_require__.m=modules,__webpack_require__.c=installedModules,__webpack_require__.i=function(value){return value},__webpack_require__.d=function(exports,name,getter){__webpack_require__.o(exports,name)||Object.defineProperty(exports,name,{configurable:!1,enumerable:!0,get:getter})},__webpack_require__.n=function(module){var getter=module&&module.__esModule?function(){return module.default}:function(){return module};return __webpack_require__.d(getter,"a",getter),getter},__webpack_require__.o=function(object,property){return Object.prototype.hasOwnProperty.call(object,property)},__webpack_require__.p="",__webpack_require__(__webpack_require__.s=2)}([function(module,exports){var g,_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(obj){return typeof obj}:function(obj){return obj&&"function"==typeof Symbol&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj};g=function(){return this}();try{g=g||Function("return this")()||(0,eval)("this")}catch(e){"object"===("undefined"==typeof window?"undefined":_typeof(window))&&(g=window)}module.exports=g},function(module,exports,__webpack_require__){__webpack_require__(4);var Component=__webpack_require__(5)(__webpack_require__(3),__webpack_require__(6),"data-v-17ccda0f",null);module.exports=Component.exports},function(module,__webpack_exports__,__webpack_require__){"use strict";Object.defineProperty(__webpack_exports__,"__esModule",{value:!0}),function(global){function install(Vue){Vue.component("test",__WEBPACK_IMPORTED_MODULE_0__components_Test_vue___default.a)}__webpack_exports__.install=install;var __WEBPACK_IMPORTED_MODULE_0__components_Test_vue__=__webpack_require__(1),__WEBPACK_IMPORTED_MODULE_0__components_Test_vue___default=__webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__components_Test_vue__);__webpack_require__.d(__webpack_exports__,"Test",function(){return __WEBPACK_IMPORTED_MODULE_0__components_Test_vue___default.a});var plugin={version:"0.0.0",install:install};__webpack_exports__.default=plugin;var GlobalVue=null;"undefined"!=typeof window?GlobalVue=window.Vue:void 0!==global&&(GlobalVue=global.Vue),GlobalVue&&GlobalVue.use(plugin)}.call(__webpack_exports__,__webpack_require__(0))},function(module,__webpack_exports__,__webpack_require__){"use strict";Object.defineProperty(__webpack_exports__,"__esModule",{value:!0}),__webpack_exports__.default={name:"test",data:function(){return{name:"world"}}}},function(module,exports){},function(module,exports){module.exports=function(rawScriptExports,compiledTemplate,scopeId,cssModules){var esModule,scriptExports=rawScriptExports=rawScriptExports||{},type=typeof rawScriptExports.default;"object"!==type&&"function"!==type||(esModule=rawScriptExports,scriptExports=rawScriptExports.default);var options="function"==typeof scriptExports?scriptExports.options:scriptExports;if(compiledTemplate&&(options.render=compiledTemplate.render,options.staticRenderFns=compiledTemplate.staticRenderFns),scopeId&&(options._scopeId=scopeId),cssModules){var computed=options.computed||(options.computed={});Object.keys(cssModules).forEach(function(key){var module=cssModules[key];computed[key]=function(){return module}})}return{esModule:esModule,exports:scriptExports,options:options}}},function(module,exports){module.exports={render:function(){var _vm=this,_h=_vm.$createElement,_c=_vm._self._c||_h;return _c("div",{staticClass:"test"},[_c("h1",[_vm._v("Hello vue-textarea-autosize!")]),_vm._v(" "),_c("input",{directives:[{name:"model",rawName:"v-model",value:_vm.name,expression:"name"}],attrs:{placeholder:"Name"},domProps:{value:_vm.name},on:{input:function($event){$event.target.composing||(_vm.name=$event.target.value)}}})])},staticRenderFns:[]}}])});
!function(root,factory){"object"==typeof exports&&"object"==typeof module?module.exports=factory():"function"==typeof define&&define.amd?define([],factory):"object"==typeof exports?exports.VueTextareaAutosize=factory():root.VueTextareaAutosize=factory()}(this,function(){return function(modules){function __webpack_require__(moduleId){if(installedModules[moduleId])return installedModules[moduleId].exports;var module=installedModules[moduleId]={i:moduleId,l:!1,exports:{}};return modules[moduleId].call(module.exports,module,module.exports,__webpack_require__),module.l=!0,module.exports}var installedModules={};return __webpack_require__.m=modules,__webpack_require__.c=installedModules,__webpack_require__.i=function(value){return value},__webpack_require__.d=function(exports,name,getter){__webpack_require__.o(exports,name)||Object.defineProperty(exports,name,{configurable:!1,enumerable:!0,get:getter})},__webpack_require__.n=function(module){var getter=module&&module.__esModule?function(){return module.default}:function(){return module};return __webpack_require__.d(getter,"a",getter),getter},__webpack_require__.o=function(object,property){return Object.prototype.hasOwnProperty.call(object,property)},__webpack_require__.p="",__webpack_require__(__webpack_require__.s=2)}([function(module,exports){var g,_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(obj){return typeof obj}:function(obj){return obj&&"function"==typeof Symbol&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj};g=function(){return this}();try{g=g||Function("return this")()||(0,eval)("this")}catch(e){"object"===("undefined"==typeof window?"undefined":_typeof(window))&&(g=window)}module.exports=g},function(module,exports,__webpack_require__){var Component=__webpack_require__(4)(__webpack_require__(3),__webpack_require__(5),null,null);module.exports=Component.exports},function(module,__webpack_exports__,__webpack_require__){"use strict";Object.defineProperty(__webpack_exports__,"__esModule",{value:!0}),function(global){function install(Vue){Vue.component("textarea-autosize",__WEBPACK_IMPORTED_MODULE_0__components_TextareaAutosize_vue___default.a)}__webpack_exports__.install=install;var __WEBPACK_IMPORTED_MODULE_0__components_TextareaAutosize_vue__=__webpack_require__(1),__WEBPACK_IMPORTED_MODULE_0__components_TextareaAutosize_vue___default=__webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__components_TextareaAutosize_vue__);__webpack_require__.d(__webpack_exports__,"TextareaAutosize",function(){return __WEBPACK_IMPORTED_MODULE_0__components_TextareaAutosize_vue___default.a});var plugin={version:"1.0.0",install:install};__webpack_exports__.default=plugin;var GlobalVue=null;"undefined"!=typeof window?GlobalVue=window.Vue:void 0!==global&&(GlobalVue=global.Vue),GlobalVue&&GlobalVue.use(plugin)}.call(__webpack_exports__,__webpack_require__(0))},function(module,__webpack_exports__,__webpack_require__){"use strict";Object.defineProperty(__webpack_exports__,"__esModule",{value:!0}),__webpack_exports__.default={name:"TextareaAutosize",created:function(){this.updateVal()},mounted:function(){this.resize()},props:{value:{type:[String,Number],required:!1,default:""},autosize:{type:Boolean,required:!1,default:!0},minHeight:{type:[Number],required:!1,default:null},maxHeight:{type:[Number],required:!1,default:null}},data:function(){return{val:null,maxHeightScroll:!1}},computed:{computedStyles:function(){var objStyles={};return this.autosize&&(objStyles.resize="none",this.maxHeightScroll||(objStyles.overflow="hidden")),objStyles}},methods:{updateVal:function(){this.val=this.value},resize:function(){this.$el.style.height="auto";var contentHeight=this.$el.scrollHeight+1;return this.minHeight&&(contentHeight=contentHeight<this.minHeight?this.minHeight:contentHeight),this.maxHeight&&(contentHeight>this.maxHeight?(contentHeight=this.maxHeight,this.maxHeightScroll=!0):this.maxHeightScroll=!1),this.$el.style.height=contentHeight+"px",this}},watch:{value:function(){this.updateVal()},val:function(_val){this.resize(),this.$emit("input",_val)}}}},function(module,exports){module.exports=function(rawScriptExports,compiledTemplate,scopeId,cssModules){var esModule,scriptExports=rawScriptExports=rawScriptExports||{},type=typeof rawScriptExports.default;"object"!==type&&"function"!==type||(esModule=rawScriptExports,scriptExports=rawScriptExports.default);var options="function"==typeof scriptExports?scriptExports.options:scriptExports;if(compiledTemplate&&(options.render=compiledTemplate.render,options.staticRenderFns=compiledTemplate.staticRenderFns),scopeId&&(options._scopeId=scopeId),cssModules){var computed=options.computed||(options.computed={});Object.keys(cssModules).forEach(function(key){var module=cssModules[key];computed[key]=function(){return module}})}return{esModule:esModule,exports:scriptExports,options:options}}},function(module,exports){module.exports={render:function(){var _vm=this,_h=_vm.$createElement;return(_vm._self._c||_h)("textarea",{directives:[{name:"model",rawName:"v-model",value:_vm.val,expression:"val"}],style:_vm.computedStyles,domProps:{value:_vm.val},on:{focus:_vm.resize,input:function($event){$event.target.composing||(_vm.val=$event.target.value)}}})},staticRenderFns:[]}}])});

@@ -1,1 +0,1 @@

module.exports=function(modules){function __webpack_require__(moduleId){if(installedModules[moduleId])return installedModules[moduleId].exports;var module=installedModules[moduleId]={i:moduleId,l:!1,exports:{}};return modules[moduleId].call(module.exports,module,module.exports,__webpack_require__),module.l=!0,module.exports}var installedModules={};return __webpack_require__.m=modules,__webpack_require__.c=installedModules,__webpack_require__.i=function(value){return value},__webpack_require__.d=function(exports,name,getter){__webpack_require__.o(exports,name)||Object.defineProperty(exports,name,{configurable:!1,enumerable:!0,get:getter})},__webpack_require__.n=function(module){var getter=module&&module.__esModule?function(){return module.default}:function(){return module};return __webpack_require__.d(getter,"a",getter),getter},__webpack_require__.o=function(object,property){return Object.prototype.hasOwnProperty.call(object,property)},__webpack_require__.p="",__webpack_require__(__webpack_require__.s=1)}([function(module,exports,__webpack_require__){__webpack_require__(3);var Component=__webpack_require__(4)(__webpack_require__(2),__webpack_require__(5),"data-v-17ccda0f",null);module.exports=Component.exports},function(module,__webpack_exports__,__webpack_require__){"use strict";function install(Vue){Vue.component("test",__WEBPACK_IMPORTED_MODULE_0__components_Test_vue___default.a)}Object.defineProperty(__webpack_exports__,"__esModule",{value:!0}),__webpack_exports__.install=install;var __WEBPACK_IMPORTED_MODULE_0__components_Test_vue__=__webpack_require__(0),__WEBPACK_IMPORTED_MODULE_0__components_Test_vue___default=__webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__components_Test_vue__);__webpack_require__.d(__webpack_exports__,"Test",function(){return __WEBPACK_IMPORTED_MODULE_0__components_Test_vue___default.a});var plugin={version:"0.0.0",install:install};__webpack_exports__.default=plugin;var GlobalVue=null;"undefined"!=typeof window?GlobalVue=window.Vue:"undefined"!=typeof global&&(GlobalVue=global.Vue),GlobalVue&&GlobalVue.use(plugin)},function(module,__webpack_exports__,__webpack_require__){"use strict";Object.defineProperty(__webpack_exports__,"__esModule",{value:!0}),__webpack_exports__.default={name:"test",data:function(){return{name:"world"}}}},function(module,exports){},function(module,exports){module.exports=function(rawScriptExports,compiledTemplate,scopeId,cssModules){var esModule,scriptExports=rawScriptExports=rawScriptExports||{},type=typeof rawScriptExports.default;"object"!==type&&"function"!==type||(esModule=rawScriptExports,scriptExports=rawScriptExports.default);var options="function"==typeof scriptExports?scriptExports.options:scriptExports;if(compiledTemplate&&(options.render=compiledTemplate.render,options.staticRenderFns=compiledTemplate.staticRenderFns),scopeId&&(options._scopeId=scopeId),cssModules){var computed=options.computed||(options.computed={});Object.keys(cssModules).forEach(function(key){var module=cssModules[key];computed[key]=function(){return module}})}return{esModule:esModule,exports:scriptExports,options:options}}},function(module,exports){module.exports={render:function(){var _vm=this,_h=_vm.$createElement,_c=_vm._self._c||_h;return _c("div",{staticClass:"test"},[_c("h1",[_vm._v("Hello vue-textarea-autosize!")]),_vm._v(" "),_c("input",{directives:[{name:"model",rawName:"v-model",value:_vm.name,expression:"name"}],attrs:{placeholder:"Name"},domProps:{value:_vm.name},on:{input:function($event){$event.target.composing||(_vm.name=$event.target.value)}}})])},staticRenderFns:[]}}]);
module.exports=function(modules){function __webpack_require__(moduleId){if(installedModules[moduleId])return installedModules[moduleId].exports;var module=installedModules[moduleId]={i:moduleId,l:!1,exports:{}};return modules[moduleId].call(module.exports,module,module.exports,__webpack_require__),module.l=!0,module.exports}var installedModules={};return __webpack_require__.m=modules,__webpack_require__.c=installedModules,__webpack_require__.i=function(value){return value},__webpack_require__.d=function(exports,name,getter){__webpack_require__.o(exports,name)||Object.defineProperty(exports,name,{configurable:!1,enumerable:!0,get:getter})},__webpack_require__.n=function(module){var getter=module&&module.__esModule?function(){return module.default}:function(){return module};return __webpack_require__.d(getter,"a",getter),getter},__webpack_require__.o=function(object,property){return Object.prototype.hasOwnProperty.call(object,property)},__webpack_require__.p="",__webpack_require__(__webpack_require__.s=1)}([function(module,exports,__webpack_require__){var Component=__webpack_require__(3)(__webpack_require__(2),__webpack_require__(4),null,null);module.exports=Component.exports},function(module,__webpack_exports__,__webpack_require__){"use strict";function install(Vue){Vue.component("textarea-autosize",__WEBPACK_IMPORTED_MODULE_0__components_TextareaAutosize_vue___default.a)}Object.defineProperty(__webpack_exports__,"__esModule",{value:!0}),__webpack_exports__.install=install;var __WEBPACK_IMPORTED_MODULE_0__components_TextareaAutosize_vue__=__webpack_require__(0),__WEBPACK_IMPORTED_MODULE_0__components_TextareaAutosize_vue___default=__webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__components_TextareaAutosize_vue__);__webpack_require__.d(__webpack_exports__,"TextareaAutosize",function(){return __WEBPACK_IMPORTED_MODULE_0__components_TextareaAutosize_vue___default.a});var plugin={version:"1.0.0",install:install};__webpack_exports__.default=plugin;var GlobalVue=null;"undefined"!=typeof window?GlobalVue=window.Vue:"undefined"!=typeof global&&(GlobalVue=global.Vue),GlobalVue&&GlobalVue.use(plugin)},function(module,__webpack_exports__,__webpack_require__){"use strict";Object.defineProperty(__webpack_exports__,"__esModule",{value:!0}),__webpack_exports__.default={name:"TextareaAutosize",created:function(){this.updateVal()},mounted:function(){this.resize()},props:{value:{type:[String,Number],required:!1,default:""},autosize:{type:Boolean,required:!1,default:!0},minHeight:{type:[Number],required:!1,default:null},maxHeight:{type:[Number],required:!1,default:null}},data:function(){return{val:null,maxHeightScroll:!1}},computed:{computedStyles:function(){var objStyles={};return this.autosize&&(objStyles.resize="none",this.maxHeightScroll||(objStyles.overflow="hidden")),objStyles}},methods:{updateVal:function(){this.val=this.value},resize:function(){this.$el.style.height="auto";var contentHeight=this.$el.scrollHeight+1;return this.minHeight&&(contentHeight=contentHeight<this.minHeight?this.minHeight:contentHeight),this.maxHeight&&(contentHeight>this.maxHeight?(contentHeight=this.maxHeight,this.maxHeightScroll=!0):this.maxHeightScroll=!1),this.$el.style.height=contentHeight+"px",this}},watch:{value:function(){this.updateVal()},val:function(_val){this.resize(),this.$emit("input",_val)}}}},function(module,exports){module.exports=function(rawScriptExports,compiledTemplate,scopeId,cssModules){var esModule,scriptExports=rawScriptExports=rawScriptExports||{},type=typeof rawScriptExports.default;"object"!==type&&"function"!==type||(esModule=rawScriptExports,scriptExports=rawScriptExports.default);var options="function"==typeof scriptExports?scriptExports.options:scriptExports;if(compiledTemplate&&(options.render=compiledTemplate.render,options.staticRenderFns=compiledTemplate.staticRenderFns),scopeId&&(options._scopeId=scopeId),cssModules){var computed=options.computed||(options.computed={});Object.keys(cssModules).forEach(function(key){var module=cssModules[key];computed[key]=function(){return module}})}return{esModule:esModule,exports:scriptExports,options:options}}},function(module,exports){module.exports={render:function(){var _vm=this,_h=_vm.$createElement;return(_vm._self._c||_h)("textarea",{directives:[{name:"model",rawName:"v-model",value:_vm.val,expression:"val"}],style:_vm.computedStyles,domProps:{value:_vm.val},on:{focus:_vm.resize,input:function($event){$event.target.composing||(_vm.val=$event.target.value)}}})},staticRenderFns:[]}}]);

@@ -1,3 +0,4 @@

export default from './dist/vue-textarea-autosize.common'
export * from './dist/vue-textarea-autosize.common'
import plugin from './dist/vue-textarea-autosize.common.js'
export default plugin
export * from './dist/vue-textarea-autosize.common.js'
import './dist/vue-textarea-autosize.css'
{
"name": "vue-textarea-autosize",
"description": "Vue component provides textarea with automatically adjustable height and without any wrappers and dependencies",
"version": "0.0.0",
"version": "1.0.0",
"author": {

@@ -12,3 +12,8 @@ "name": "Saymon",

"vuejs",
"plugin"
"plugin",
"textarea",
"size",
"auto",
"autosize",
"height"
],

@@ -28,8 +33,8 @@ "license": "MIT",

"type": "git",
"url": "git+https://github.com/Saymon-biz/vue-textarea-autosize.git"
"url": "git+https://github.com/devstark-com/vue-textarea-autosize.git"
},
"bugs": {
"url": "https://github.com/Saymon-biz/vue-textarea-autosize/issues"
"url": "https://github.com/devstark-com/vue-textarea-autosize/issues"
},
"homepage": "https://github.com/Saymon-biz/vue-textarea-autosize#readme",
"homepage": "https://github.com/devstark-com/vue-textarea-autosize#readme",
"devDependencies": {

@@ -36,0 +41,0 @@ "babel-core": "^6.0.0",

@@ -7,170 +7,1 @@ # vue-textarea-autosize

Vue component provides textarea with automatically adjustable height and without any wrappers and dependencies
## Table of contents
- [Installation](#installation)
- [Usage](#usage)
- [Example](#example)
# Installation
```
npm install --save vue-textarea-autosize
```
## Default import
Install all the components:
```javascript
import Vue from 'vue'
import VueTextareaAutosize from 'vue-textarea-autosize'
Vue.use(VueTextareaAutosize)
```
Use specific components:
```javascript
import Vue from 'vue'
import { Test } from 'vue-textarea-autosize'
Vue.component('test', Test)
```
**⚠️ A css file is included when importing the package. You may have to setup your bundler to embed the css in your page.**
## Distribution import
Install all the components:
```javascript
import 'vue-textarea-autosize/dist/vue-textarea-autosize.css'
import VueTextareaAutosize from 'vue-textarea-autosize/dist/vue-textarea-autosize.common'
Vue.use(VueTextareaAutosize)
```
Use specific components:
```javascript
import 'vue-textarea-autosize/dist/vue-textarea-autosize.css'
import { Test } from 'vue-textarea-autosize/dist/vue-textarea-autosize.common'
Vue.component('test', Test)
```
**⚠️ You may have to setup your bundler to embed the css file in your page.**
## Browser
```html
<link rel="stylesheet" href="vue-textarea-autosize/dist/vue-textarea-autosize.css"/>
<script src="vue.js"></script>
<script src="vue-textarea-autosize/dist/vue-textarea-autosize.browser.js"></script>
```
The plugin should be auto-installed. If not, you can install it manually with the instructions below.
Install all the components:
```javascript
Vue.use(VueTextareaAutosize)
```
Use specific components:
```javascript
Vue.component('test', VueTextareaAutosize.Test)
```
## Source import
Install all the components:
```javascript
import Vue from 'vue'
import VueTextareaAutosize from 'vue-textarea-autosize/src'
Vue.use(VueTextareaAutosize)
```
Use specific components:
```javascript
import Vue from 'vue'
import { Test } from 'vue-textarea-autosize/src'
Vue.component('test', Test)
```
**⚠️ You need to configure your bundler to compile `.vue` files.** More info [in the official documentation](https://vuejs.org/v2/guide/single-file-components.html).
# Usage
> TODO
# Example
> TODO
---
# Plugin Development
## Installation
The first time you create or clone your plugin, you need to install the default dependencies:
```
npm install
```
## Watch and compile
This will run webpack in watching mode and output the compiled files in the `dist` folder.
```
npm run dev
```
## Use it in another project
While developping, you can follow the install instructions of your plugin and link it into the project that uses it.
In the plugin folder:
```
npm link
```
In the other project folder:
```
npm link vue-textarea-autosize
```
This will install it in the dependencies as a symlink, so that it gets any modifications made to the plugin.
## Publish to npm
You may have to login to npm before, with `npm adduser`. The plugin will be built in production mode before getting published on npm.
```
npm publish
```
## Manual build
This will build the plugin into the `dist` folder in production mode.
```
npm run build
```
---
## License
[MIT](http://opensource.org/licenses/MIT)

@@ -1,6 +0,6 @@

import Test from './components/Test.vue'
import TextareaAutosize from './components/TextareaAutosize.vue'
// Install the components
export function install (Vue) {
Vue.component('test', Test)
Vue.component('textarea-autosize', TextareaAutosize)
/* -- Add more components here -- */

@@ -11,3 +11,3 @@ }

export {
Test
TextareaAutosize
/* -- Add more components here -- */

@@ -14,0 +14,0 @@ }

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc