v-autocomplete - npm Package Compare versions

Comparing version 0.0.5 to 1.0.1

dist/v-autocomplete.js

@@ -1,1 +0,1 @@
-(function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.VAutocomplete=e():t.VAutocomplete=e()})(this,function(){return function(t){function e(i){if(n[i])return n[i].exports;var s=n[i]={i:i,l:!1,exports:{}};return t[i].call(s.exports,s,s.exports,e),s.l=!0,s.exports}var n={};return e.m=t,e.c=n,e.i=function(t){return t},e.d=function(t,n,i){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:i})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p=".",e(e.s=10)}([function(t,e){t.exports=function(t,e,n,i){var s,o=t=t||{},r=typeof t.default;"object"!==r&&"function"!==r||(s=t,o=t.default);var u="function"==typeof o?o.options:o;if(e&&(u.render=e.render,u.staticRenderFns=e.staticRenderFns),n&&(u._scopeId=n),i){var a=u.computed||(u.computed={});Object.keys(i).forEach(function(t){var e=i[t];a[t]=function(){return e}})}return{esModule:s,exports:o,options:u}}},function(t,e,n){var i=n(6);i.install=function(t){return t.component(i.name,i)},i.version="0.0.4",t.exports=i},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var i=n(7),s=n.n(i),o=n(4);e.default={name:"v-autocomplete",props:{componentItem:{default:function(){return s.a}},placeholder:String,minLen:{type:Number,default:o.a.minLen},wait:{type:Number,default:o.a.wait},value:null,getLabel:{type:Function,default:function(t){return t}},items:Array},data:function(){return{searchText:"",showList:!1,internalItems:this.items||[]}},methods:{inputChange:function(){this.showList=!0,this.onSelectItem(null),o.a.callUpdateItems(this.searchText,this.updateItems),this.$emit("change",this.searchText)},updateItems:function(){this.$emit("updateItems",this.searchText)},focus:function(){this.showList=!0},blur:function(){var t=this;setTimeout(function(){return t.showList=!1},200)},onSelectItem:function(t){t?(this.internalItems=[t],this.searchText=this.getLabel(t)):this.setItems(this.items),this.$emit("input",t)},setItems:function(t){this.internalItems=t||[]}},created:function(){o.a.minLen=this.minLen,o.a.wait=this.wait,this.onSelectItem(this.value)},watch:{items:function(t){this.setItems(t);var e=o.a.findItem(this.items,this.searchText,this.getLabel);e&&(this.onSelectItem(e),this.showList=!1)},value:function(t){this.onSelectItem(t)}}}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={props:{item:{required:!0}}}},function(t,e,n){"use strict";e.a={minLen:3,wait:500,timeout:null,isUpdateItems:function(t){if(t.length>this.minLen)return!0},callUpdateItems:function(t,e){clearTimeout(this.timeout),this.isUpdateItems(t)&&(this.timeout=setTimeout(e,this.wait))},findItem:function(t,e,n){if(e)return 1==t.length?t[0]:void 0}}},function(t,e){},function(t,e,n){n(5);var i=n(0)(n(2),n(8),null,null);t.exports=i.exports},function(t,e,n){var i=n(0)(n(3),n(9),null,null);t.exports=i.exports},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"v-autocomplete"},[n("div",{staticClass:"v-autocomplete-input-group",class:{"v-autocomplete-selected":t.value}},[n("input",{directives:[{name:"model",rawName:"v-model",value:t.searchText,expression:"searchText"}],staticClass:"v-autocomplete-input",attrs:{type:"search",placeholder:t.placeholder},domProps:{value:t.searchText},on:{blur:t.blur,focus:t.focus,input:[function(e){e.target.composing||(t.searchText=e.target.value)},t.inputChange]}})]),t.showList&&t.internalItems?n("div",{staticClass:"v-autocomplete-list"},t._l(t.internalItems,function(e){return n("div",{staticClass:"v-autocomplete-list-item",on:{click:function(n){t.onSelectItem(e)}}},[n(t.componentItem,{tag:"div",attrs:{item:e}})])})):t._e()])},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement;return(t._self._c||e)("div",[t._v(t._s(t.item))])},staticRenderFns:[]}},function(t,e,n){t.exports=n(1)}])});
+(function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.VAutocomplete=e():t.VAutocomplete=e()})(this,function(){return function(t){function e(i){if(n[i])return n[i].exports;var s=n[i]={i:i,l:!1,exports:{}};return t[i].call(s.exports,s,s.exports,e),s.l=!0,s.exports}var n={};return e.m=t,e.c=n,e.i=function(t){return t},e.d=function(t,n,i){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:i})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p=".",e(e.s=10)}([function(t,e){t.exports=function(t,e,n,i){var s,o=t=t||{},r=typeof t.default;"object"!==r&&"function"!==r||(s=t,o=t.default);var u="function"==typeof o?o.options:o;if(e&&(u.render=e.render,u.staticRenderFns=e.staticRenderFns),n&&(u._scopeId=n),i){var a=u.computed||(u.computed={});Object.keys(i).forEach(function(t){var e=i[t];a[t]=function(){return e}})}return{esModule:s,exports:o,options:u}}},function(t,e,n){var i=n(6);i.install=function(t){return t.component(i.name,i)},i.version="1.0.0",t.exports=i},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var i=n(7),s=n.n(i),o=n(4);e.default={name:"v-autocomplete",props:{componentItem:{default:function(){return s.a}},placeholder:String,minLen:{type:Number,default:o.a.minLen},wait:{type:Number,default:o.a.wait},value:null,getLabel:{type:Function,default:function(t){return t}},items:Array},data:function(){return{searchText:"",showList:!1,internalItems:this.items||[]}},methods:{inputChange:function(){this.showList=!0,this.onSelectItem(null),o.a.callUpdateItems(this.searchText,this.updateItems),this.$emit("change",this.searchText)},updateItems:function(){this.$emit("update-items",this.searchText)},focus:function(){this.showList=!0},blur:function(){var t=this;setTimeout(function(){return t.showList=!1},200)},onSelectItem:function(t){t?(this.internalItems=[t],this.searchText=this.getLabel(t)):this.setItems(this.items),this.$emit("input",t)},setItems:function(t){this.internalItems=t||[]}},created:function(){o.a.minLen=this.minLen,o.a.wait=this.wait,this.onSelectItem(this.value)},watch:{items:function(t){this.setItems(t);var e=o.a.findItem(this.items,this.searchText,this.getLabel);e&&(this.onSelectItem(e),this.showList=!1)},value:function(t){this.onSelectItem(t)}}}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={props:{item:{required:!0}}}},function(t,e,n){"use strict";e.a={minLen:3,wait:500,timeout:null,isUpdateItems:function(t){if(t.length>this.minLen)return!0},callUpdateItems:function(t,e){clearTimeout(this.timeout),this.isUpdateItems(t)&&(this.timeout=setTimeout(e,this.wait))},findItem:function(t,e,n){if(e)return 1==t.length?t[0]:void 0}}},function(t,e){},function(t,e,n){n(5);var i=n(0)(n(2),n(8),null,null);t.exports=i.exports},function(t,e,n){var i=n(0)(n(3),n(9),null,null);t.exports=i.exports},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"v-autocomplete"},[n("div",{staticClass:"v-autocomplete-input-group",class:{"v-autocomplete-selected":t.value}},[n("input",{directives:[{name:"model",rawName:"v-model",value:t.searchText,expression:"searchText"}],staticClass:"v-autocomplete-input",attrs:{type:"search",placeholder:t.placeholder},domProps:{value:t.searchText},on:{blur:t.blur,focus:t.focus,input:[function(e){e.target.composing||(t.searchText=e.target.value)},t.inputChange]}})]),t.showList&&t.internalItems?n("div",{staticClass:"v-autocomplete-list"},t._l(t.internalItems,function(e){return n("div",{staticClass:"v-autocomplete-list-item",on:{click:function(n){t.onSelectItem(e)}}},[n(t.componentItem,{tag:"div",attrs:{item:e}})])})):t._e()])},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement;return(t._self._c||e)("div",[t._v(t._s(t.item))])},staticRenderFns:[]}},function(t,e,n){t.exports=n(1)}])});

package.json

 {
   "name": "v-autocomplete",
-  "version": "0.0.5",
+  "version": "1.0.1",
   "description": "Autocomplete component for Vue.js",
@@ -5,0 +5,0 @@ "author": "Marcos Paliari <[e-mail]>",

README.md

@@ -1,11 +0,8 @@
-v-autocomplete
-==============
+# v-autocomplete
+---
 
 > Autocomplete component for Vue.js
 
-Usage
-=====
 
-Installation
-------------
+## Installation
 
@@ -20,10 +17,9 @@ ### Using yarn
 
-Demo
-----
+## Demo
 
 [DEMO](http://paliari.github.io/v-autocomplete)
 
-Usage
------
+## Usage
 
+
 ### Bundler (Webpack, Rollup)
@@ -53,47 +49,125 @@
 
-### Usage example
+### Example
 
 ```html
-<!-- in your component -->
-<v-autocomplete :items="items" v-model="item" :get-label="getLabel" @updateItems="updateItems">
-</v-autocomplete>
-```
+<template>
+  <v-autocomplete :items="items" v-model="item" :get-label="getLabel" :component-item='template' @update-items="updateItems">
+  </v-autocomplete>
+</template>
 
-```js
-// in your component
-// ...
-data () {
-  return {
-    item: {label: 'Item 4', id: 4},
-    items: []
-  }
-},
-methods: {
-  getLabel (item) {
-    return item.label
+<script>
+import ItemTemplate from './ItemTemplate.vue'
+export default {
+  data () {
+    return {
+      item: {id: 9, name: 'Lion', description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.'},
+      items: [],
+      template: ItemTemplate
+    }
   },
-  updateItems (text) {
-    yourGetItemsMethod(text).then( (response) => {
-      this.items = response
-    })
+  methods: {
+    getLabel (item) {
+      return item.name
+    },
+    updateItems (text) {
+      yourGetItemsMethod(text).then( (response) => {
+        this.items = response
+      })
+    }
   }
-},
-// ...
+}
+</script>
 ```
 
-### Params
+**ItemTemplate example:**
 
-| Name          | Type                                | Required | Default value                  | Info                                                 |
-|---------------|-------------------------------------|----------|--------------------------------|------------------------------------------------------|
-| items         | Array                               | Yes      |                                | List items                                           |
-| componentItem | Vue Component or Function or String | No       | Item                           | Template of item list                                |
-| placeholder   | String                              | No       |                                |                                                      |
-| minLen        | Number                              | No       | 3                              | Min length to input search call 'updateItems' event  |
-| wait          | String                              | No       | 500                            | Wait of input change before call 'updateItems' event |
-| getLabel      | Function                            | No       | function(item) { return item } | Custom function to extract label of item             |
-| value         | Mixed                               | No       |                                | Initial value (use v-model)                          |
+```html
+<template>
+  <div>
+    <b>#{{item.id}}</b>
+    <span>{{ item.name }}</span>
+    <abbr>{{item.description}}</abbr>
+  </div>
+</template>
 
-License
--------
+<script>
+export default {
+  props: { item: { required: true } }
+}
+</script>
+```
 
+## Properties
+
+| Name               | Type                                | Required | Default value                  | Info                                                   |
+|--------------------|-------------------------------------|----------|--------------------------------|--------------------------------------------------------|
+| **items**          | Array                               | Yes      |                                | List items                                             |
+| **component-item** | Vue Component or Function or String | No       | Item                           | Item list template                                     |
+| **placeholder**    | String                              | No       |                                |                                                        |
+| **min-len**        | Number                              | No       | 3                              | Min length to trigger the *updateItems* event          |
+| **wait**           | String                              | No       | 500                            | Miliseconds dela to trigger the *updateItems* event    |
+| **get-label**      | Function                            | No       | function(item) { return item } | Anonymous function to extract label of the item        |
+| **value**          | Mixed                               | No       |                                | Initial value (use v-model)                            |
+
+## Events
+
+| Name               | Params                       | Info                                                   |
+|--------------------|------------------------------|--------------------------------------------------------|
+| **change**         | *text*: Text of search input | Triggered after every change in the search input       |
+| **update-items**   | *text*: Text of search input | Same as *change*, but respecting *min-len* and *wait*  |
+
+
+## What about appearence?
+
+Just overwrite their css classes. See the structure in *stylus* lang:
+
+```stylus
+.v-autocomplete
+  .v-autocomplete-input-group
+    .v-autocomplete-input
+  .v-autocomplete-list
+    .v-autocomplete-list-item
+```
+
+Follows the css used in the [DEMO](http://paliari.github.io/v-autocomplete):
+
+```stylus
+.v-autocomplete
+  .v-autocomplete-input-group
+    .v-autocomplete-input
+      font-size 1.5em
+      padding 10px 15px
+      border-radius 5px
+      box-shadow none
+      border 2px solid #157977
+      width calc(100% - 30px)
+      outline none
+    &.v-autocomplete-selected
+      .v-autocomplete-input
+        color green
+        background-color #f2fff2
+  .v-autocomplete-list
+    width 100%
+    text-align left
+    border 1px solid #157977
+    max-height 400px
+    overflow-y auto
+    .v-autocomplete-list-item
+      cursor pointer
+      background-color #fff
+      padding 10px
+      border-bottom 1px solid #157977
+      &:last-child
+        border none
+      &:hover
+        background-color #eee
+```
+
+## Authors
+
+- [Marcos Paliari](http://paliari.com)
+- [Daniel Fernando Lourusso](http://dflourusso.com.br)
+
+## License
+
 This project is licensed under [MIT License](http://en.wikipedia.org/wiki/MIT_License)

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

9897

increased by26.41%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

172

increased by75.51%

Worsened metrics

Number of medium supply chain risk alerts

2

increased by100%

No dependency changes