vuedraggable
Advanced tools
vuedraggable - npm Package Compare versions
Comparing version 2.15.0 to 2.16.0
| 'use strict'; | ||
| var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; | ||
@@ -15,2 +16,11 @@ | ||
| function buildAttribute(object, propName, value) { | ||
| if (value == undefined) { | ||
| return object; | ||
| } | ||
| object = object == null ? {} : object; | ||
| object[propName] = value; | ||
| return object; | ||
| } | ||
| function buildDraggable(Sortable) { | ||
@@ -103,2 +113,7 @@ function removeNode(node) { | ||
| default: null | ||
| }, | ||
| componentData: { | ||
| type: Object, | ||
| required: false, | ||
| default: null | ||
| } | ||
@@ -115,3 +130,4 @@ }; | ||
| transitionMode: false, | ||
| componentMode: false | ||
| noneFunctionalComponentMode: false, | ||
| init: false | ||
| }; | ||
@@ -133,3 +149,16 @@ }, | ||
| } | ||
| return h(this.element, null, children); | ||
| var attributes = null; | ||
| var update = function update(name, value) { | ||
| attributes = buildAttribute(attributes, name, value); | ||
| }; | ||
| update('attrs', this.$attrs); | ||
| if (this.componentData) { | ||
| var _componentData = this.componentData, | ||
| on = _componentData.on, | ||
| _props = _componentData.props; | ||
| update('on', on); | ||
| update('props', _props); | ||
| } | ||
| return h(this.element, attributes, children); | ||
| }, | ||
@@ -139,4 +168,4 @@ mounted: function mounted() { | ||
| this.componentMode = this.element.toLowerCase() !== this.$el.nodeName.toLowerCase(); | ||
| if (this.componentMode && this.transitionMode) { | ||
| this.noneFunctionalComponentMode = this.element.toLowerCase() !== this.$el.nodeName.toLowerCase(); | ||
| if (this.noneFunctionalComponentMode && this.transitionMode) { | ||
| throw new Error('Transition-group inside component is not supported. Please alter element value or remove transition-group. Current element value: ' + this.element); | ||
@@ -197,3 +226,8 @@ } | ||
| getChildrenNodes: function getChildrenNodes() { | ||
| if (this.componentMode) { | ||
| if (!this.init) { | ||
| this.noneFunctionalComponentMode = this.noneFunctionalComponentMode && this.$children.length == 1; | ||
| this.init = true; | ||
| } | ||
| if (this.noneFunctionalComponentMode) { | ||
| return this.$children[0].$slots.default; | ||
@@ -378,11 +412,3 @@ } | ||
| Vue.component('draggable', draggable); | ||
| } else { | ||
| if(typeof window.Vue == "undefined") { | ||
| throw 'Vue.js not found!'; | ||
| } | ||
| if(typeof window.Sortable == "undefined") { | ||
| throw 'Sortable.js not found!'; | ||
| } | ||
| } | ||
| })(); | ||
| })(); |
| { | ||
| "name": "vuedraggable", | ||
| "version": "2.15.0", | ||
| "version": "2.16.0", | ||
| "description": "draggable component for vue", | ||
@@ -5,0 +5,0 @@ "main": "dist/vuedraggable.js", |
@@ -42,3 +42,3 @@ <p align="center"><img width="100"src="https://raw.githubusercontent.com/SortableJS/Vue.Draggable/master/logo.png"></p> | ||
| <draggable v-model="myArray" :options="{group:'people'}" @start="drag=true" @end="drag=false"> | ||
| <div v-for="element in myArray">{{element.name}}</div> | ||
| <div v-for="element in myArray" :key="element.id">{{element.name}}</div> | ||
| </draggable> | ||
@@ -135,3 +135,5 @@ ``` | ||
| HTML node type of the element that draggable component create as outer element for the included slot. | ||
| HTML node type of the element that draggable component create as outer element for the included slot.<br> | ||
| It is also possible to pass the name of vue component as element. In this case, draggable attribute will be passed to the create component.<br> | ||
| See also [componentData](#componentData) if you need to set props or event to the created component. | ||
@@ -183,3 +185,42 @@ #### clone | ||
| #### componentData | ||
| Type: `Object`<br> | ||
| Required: `false`<br> | ||
| Default: `null`<br> | ||
| This props is used to pass additional information to child component declared by [element props](#element).<br> | ||
| Value: | ||
| * `props`: props to be passed to the child component | ||
| * `on`: events to be subscribe in the child component | ||
| Example (using [element UI library](http://element.eleme.io/#/en-US)): | ||
| ```HTML | ||
| <draggable element="el-collapse" :list="list" :component-data="getComponentData()"> | ||
| <el-collapse-item v-for="e in list" :title="e.title" :name="e.name" :key="e.name"> | ||
| <div>{{e.description}}</div> | ||
| </el-collapse-item> | ||
| </draggable> | ||
| ``` | ||
| ```javascript | ||
| methods: { | ||
| handleChange() { | ||
| console.log('changed'); | ||
| }, | ||
| inputChanged(value) { | ||
| this.activeNames = value; | ||
| }, | ||
| getComponentData() { | ||
| return { | ||
| on: { | ||
| change: this.handleChange, | ||
| input: this.inputChanged | ||
| }, | ||
| props: { | ||
| value: this.activeNames | ||
| } | ||
| }; | ||
| } | ||
| } | ||
| ``` | ||
| ### Events | ||
@@ -295,3 +336,3 @@ | ||
| <!-- CDNJS :: Sortable (https://cdnjs.com/) --> | ||
| <script src="//cdnjs.cloudflare.com/ajax/libs/Sortable/1.7.0/Sortable.min.js"></script> | ||
| <script src="//cdn.jsdelivr.net/npm/sortablejs@1.7.0/Sortable.min.js"></script> | ||
@@ -298,0 +339,0 @@ <!-- CDNJS :: Vue.Draggable (https://cdnjs.com/) --> |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by6.66%
27985
- Lines of code
- increased by6.38%
367
- Number of lines in readme file
- increased by13.76%
339
No dependency changes