Updated vue-easy-dnd to latest version supporting vue2

This commit is contained in:
PMKuipers 2023-08-23 23:03:53 +02:00
parent d940c009bc
commit 09605834ae
10 changed files with 397 additions and 1875 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -32,7 +32,7 @@ Vue.use(PortalVue);
import BootstrapVue from './bootstrap-vue/bootstrap-vue.esm'; import BootstrapVue from './bootstrap-vue/bootstrap-vue.esm';
Vue.use(BootstrapVue); Vue.use(BootstrapVue);
import {Drag, Drop, DropList} from './vue-easy-dnd/vue-easy-dnd'; import {Drag, Drop, DropList} from './vue-easy-dnd/vue-easy-dnd.esm';
Vue.component('drag',Drag); Vue.component('drag',Drag);
Vue.component('drop',Drop); Vue.component('drop',Drop);
Vue.component('drop-list',DropList); Vue.component('drop-list',DropList);

View file

@ -5,10 +5,56 @@ Instructions for downloading and integrating vue-easy-dnd
1. download vue-easy-dnd distribusion throuhg npm 1. download vue-easy-dnd distribusion throuhg npm
npm install vue-easy-dnd@1.22.0 npm install vue-easy-dnd@1.22.0
2. Copy node_modules/vue-easy-dnd/dist/vue-easy-dnd.esm.js to amd/src/vue-easy-dnd 2. Copy node_modules/vue-easy-dnd/dist/vue-easy-dnd.esm.js to amd/src/vue-easy-dnd/
3. Change import statements to 3. Change import statements to
import './reflect-metadata'; import './reflect-metadata';
import { Vue, Component, Prop } from './vue-property-decorator'; import { Vue, Component, Prop } from './vue-property-decorator';
4. add /* eslint-disable */ to top of file 4. add /* eslint-disable */ to top of file
--- Support libraries ----
This version if vue-easy-dnd requires some additional support libraries in the same folder
-- vue-class-component.js --
1. if not already installed during vue-easy-dnd install, download vue-class-component distribusion through npm
npm install vue-class-component@7.2.6
2. copy node_modules/vue-class-component/dist/vue-class-component.esm-browser.js to amd/src/vue-easy-dnd/vue-class-component.js
3. change Vue import statement to
import Vue from '../vue/vue';
4. add the following to the top of the file
/* eslint-disable */
/*eslint no-unused-vars: "off" */
5. Replace both export statements at the bottom of the file by the following:
export { Component, createDecorator, mixins };
-- vue-property-decorator --
1. if not already installed during vue-easy-dnd install, download vue-property-decorator distribusion through npm
npm install vue-property-decorator@8.5.1
2. copy node_modules/vue-property-decorator/lib/vue-property-decorator.js to amd/src/vue-easy-dnd/
3. change import statements to
import Vue from '../vue/vue';
import { Component, createDecorator, mixins } from './vue-class-component';
4. add the following to the top of the file
/* eslint-disable */
/*eslint no-unused-vars: "off" */
-- reflect-metadata.js --
1. if not already installed during vue-easy-dnd install, download reflect-metadata distribusion through npm
npm install reflect-metadata@0.1.13
2. copy node_modules/reflect-metadata/Reflect.js to amd/src/vue-easy-dnd/reflect-metadata.js
3. add the following to the top of the file
/* eslint-disable */
/*eslint no-unused-vars: "off" */
4. add the following after the copyright notice:
export {Reflect};

View file

@ -1,270 +1,267 @@
/* eslint-disable */ /* eslint-disable */
/*eslint no-unused-vars: "off" */ /*eslint no-unused-vars: "off" */
/** /**
* vue-class-component v7.2.5 * vue-class-component v7.2.6
* (c) 2015-present Evan You * (c) 2015-present Evan You
* @license MIT * @license MIT
*/ */
import Vue from '../vue/vue';
import Vue from './vue/vue'; // The rational behind the verbose Reflect-feature check below is the fact that there are polyfills
// which add an implementation for Reflect.defineMetadata but not for Reflect.getOwnMetadataKeys.
// Without this check consumers will encounter hard to track down runtime errors.
function reflectionIsSupported() {
return typeof Reflect !== 'undefined' && Reflect.defineMetadata && Reflect.getOwnMetadataKeys;
}
function copyReflectionMetadata(to, from) {
forwardMetadata(to, from);
Object.getOwnPropertyNames(from.prototype).forEach(key => {
forwardMetadata(to.prototype, from.prototype, key);
});
Object.getOwnPropertyNames(from).forEach(key => {
forwardMetadata(to, from, key);
});
}
function forwardMetadata(to, from, propertyKey) {
var metaKeys = propertyKey ? Reflect.getOwnMetadataKeys(from, propertyKey) : Reflect.getOwnMetadataKeys(from);
metaKeys.forEach(metaKey => {
var metadata = propertyKey ? Reflect.getOwnMetadata(metaKey, from, propertyKey) : Reflect.getOwnMetadata(metaKey, from);
if (propertyKey) {
Reflect.defineMetadata(metaKey, metadata, to, propertyKey);
} else {
Reflect.defineMetadata(metaKey, metadata, to);
}
});
}
var fakeArray = {
__proto__: []
};
var hasProto = fakeArray instanceof Array;
function createDecorator(factory) {
return (target, key, index) => {
var Ctor = typeof target === 'function' ? target : target.constructor;
if (!Ctor.__decorators__) {
Ctor.__decorators__ = [];
}
if (typeof index !== 'number') {
index = undefined;
}
Ctor.__decorators__.push(options => factory(options, key, index));
};
}
function mixins() {
for (var _len = arguments.length, Ctors = new Array(_len), _key = 0; _key < _len; _key++) {
Ctors[_key] = arguments[_key];
}
return Vue.extend({
mixins: Ctors
});
}
function isPrimitive(value) {
var type = typeof value;
return value == null || type !== 'object' && type !== 'function';
}
function warn(message) {
if (typeof console !== 'undefined') {
console.warn('[vue-class-component] ' + message);
}
}
function collectDataFromConstructor(vm, Component) {
// override _init to prevent to init as Vue instance
var originalInit = Component.prototype._init;
Component.prototype._init = function () {
// proxy to actual vm
var keys = Object.getOwnPropertyNames(vm); // 2.2.0 compat (props are no longer exposed as self properties)
if (vm.$options.props) {
for (var key in vm.$options.props) {
if (!vm.hasOwnProperty(key)) {
keys.push(key);
}
}
}
keys.forEach(key => {
Object.defineProperty(this, key, {
get: () => vm[key],
set: value => {
vm[key] = value;
},
configurable: true
});
});
}; // should be acquired class property values
// The rational behind the verbose Reflect-feature check below is the fact that there are polyfills var data = new Component(); // restore original _init to avoid memory leak (#209)
// which add an implementation for Reflect.defineMetadata but not for Reflect.getOwnMetadataKeys.
// Without this check consumers will encounter hard to track down runtime errors. Component.prototype._init = originalInit; // create plain data object
function reflectionIsSupported() {
return typeof Reflect !== 'undefined' && Reflect.defineMetadata && Reflect.getOwnMetadataKeys; var plainData = {};
} Object.keys(data).forEach(key => {
function copyReflectionMetadata(to, from) { if (data[key] !== undefined) {
forwardMetadata(to, from); plainData[key] = data[key];
Object.getOwnPropertyNames(from.prototype).forEach(key => { }
forwardMetadata(to.prototype, from.prototype, key); });
});
Object.getOwnPropertyNames(from).forEach(key => { {
forwardMetadata(to, from, key); if (!(Component.prototype instanceof Vue) && Object.keys(plainData).length > 0) {
}); warn('Component class must inherit Vue or its descendant class ' + 'when class property is used.');
} }
}
function forwardMetadata(to, from, propertyKey) {
var metaKeys = propertyKey ? Reflect.getOwnMetadataKeys(from, propertyKey) : Reflect.getOwnMetadataKeys(from); return plainData;
metaKeys.forEach(metaKey => { }
var metadata = propertyKey ? Reflect.getOwnMetadata(metaKey, from, propertyKey) : Reflect.getOwnMetadata(metaKey, from);
var $internalHooks = ['data', 'beforeCreate', 'created', 'beforeMount', 'mounted', 'beforeDestroy', 'destroyed', 'beforeUpdate', 'updated', 'activated', 'deactivated', 'render', 'errorCaptured', 'serverPrefetch' // 2.6
if (propertyKey) { ];
Reflect.defineMetadata(metaKey, metadata, to, propertyKey); function componentFactory(Component) {
} else { var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
Reflect.defineMetadata(metaKey, metadata, to); options.name = options.name || Component._componentTag || Component.name; // prototype props.
}
}); var proto = Component.prototype;
} Object.getOwnPropertyNames(proto).forEach(function (key) {
if (key === 'constructor') {
var fakeArray = { return;
__proto__: [] } // hooks
};
var hasProto = fakeArray instanceof Array;
function createDecorator(factory) { if ($internalHooks.indexOf(key) > -1) {
return (target, key, index) => { options[key] = proto[key];
var Ctor = typeof target === 'function' ? target : target.constructor; return;
}
if (!Ctor.__decorators__) {
Ctor.__decorators__ = []; var descriptor = Object.getOwnPropertyDescriptor(proto, key);
}
if (descriptor.value !== void 0) {
if (typeof index !== 'number') { // methods
index = undefined; if (typeof descriptor.value === 'function') {
} (options.methods || (options.methods = {}))[key] = descriptor.value;
} else {
Ctor.__decorators__.push(options => factory(options, key, index)); // typescript decorated data
}; (options.mixins || (options.mixins = [])).push({
} data() {
function mixins() { return {
for (var _len = arguments.length, Ctors = new Array(_len), _key = 0; _key < _len; _key++) { [key]: descriptor.value
Ctors[_key] = arguments[_key]; };
} }
return Vue.extend({ });
mixins: Ctors }
}); } else if (descriptor.get || descriptor.set) {
} // computed properties
function isPrimitive(value) { (options.computed || (options.computed = {}))[key] = {
var type = typeof value; get: descriptor.get,
return value == null || type !== 'object' && type !== 'function'; set: descriptor.set
} };
function warn(message) { }
if (typeof console !== 'undefined') { });
console.warn('[vue-class-component] ' + message); (options.mixins || (options.mixins = [])).push({
} data() {
} return collectDataFromConstructor(this, Component);
}
function collectDataFromConstructor(vm, Component) {
// override _init to prevent to init as Vue instance }); // decorate options
var originalInit = Component.prototype._init;
var decorators = Component.__decorators__;
Component.prototype._init = function () {
// proxy to actual vm if (decorators) {
var keys = Object.getOwnPropertyNames(vm); // 2.2.0 compat (props are no longer exposed as self properties) decorators.forEach(fn => fn(options));
delete Component.__decorators__;
if (vm.$options.props) { } // find super
for (var key in vm.$options.props) {
if (!vm.hasOwnProperty(key)) {
keys.push(key); var superProto = Object.getPrototypeOf(Component.prototype);
} var Super = superProto instanceof Vue ? superProto.constructor : Vue;
} var Extended = Super.extend(options);
} forwardStaticMembers(Extended, Component, Super);
keys.forEach(key => { if (reflectionIsSupported()) {
Object.defineProperty(this, key, { copyReflectionMetadata(Extended, Component);
get: () => vm[key], }
set: value => {
vm[key] = value; return Extended;
}, }
configurable: true var reservedPropertyNames = [// Unique id
}); 'cid', // Super Vue constructor
}); 'super', // Component options that will be used by the component
}; // should be acquired class property values 'options', 'superOptions', 'extendOptions', 'sealedOptions', // Private assets
'component', 'directive', 'filter'];
var shouldIgnore = {
var data = new Component(); // restore original _init to avoid memory leak (#209) prototype: true,
arguments: true,
Component.prototype._init = originalInit; // create plain data object callee: true,
caller: true
var plainData = {}; };
Object.keys(data).forEach(key => {
if (data[key] !== undefined) { function forwardStaticMembers(Extended, Original, Super) {
plainData[key] = data[key]; // We have to use getOwnPropertyNames since Babel registers methods as non-enumerable
} Object.getOwnPropertyNames(Original).forEach(key => {
}); // Skip the properties that should not be overwritten
if (shouldIgnore[key]) {
{ return;
if (!(Component.prototype instanceof Vue) && Object.keys(plainData).length > 0) { } // Some browsers does not allow reconfigure built-in properties
warn('Component class must inherit Vue or its descendant class ' + 'when class property is used.');
}
} var extendedDescriptor = Object.getOwnPropertyDescriptor(Extended, key);
return plainData; if (extendedDescriptor && !extendedDescriptor.configurable) {
} return;
}
var $internalHooks = ['data', 'beforeCreate', 'created', 'beforeMount', 'mounted', 'beforeDestroy', 'destroyed', 'beforeUpdate', 'updated', 'activated', 'deactivated', 'render', 'errorCaptured', 'serverPrefetch' // 2.6
]; var descriptor = Object.getOwnPropertyDescriptor(Original, key); // If the user agent does not support `__proto__` or its family (IE <= 10),
function componentFactory(Component) { // the sub class properties may be inherited properties from the super class in TypeScript.
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; // We need to exclude such properties to prevent to overwrite
options.name = options.name || Component._componentTag || Component.name; // prototype props. // the component options object which stored on the extended constructor (See #192).
// If the value is a referenced value (object or function),
var proto = Component.prototype; // we can check equality of them and exclude it if they have the same reference.
Object.getOwnPropertyNames(proto).forEach(function (key) { // If it is a primitive value, it will be forwarded for safety.
if (key === 'constructor') {
return; if (!hasProto) {
} // hooks // Only `cid` is explicitly exluded from property forwarding
// because we cannot detect whether it is a inherited property or not
// on the no `__proto__` environment even though the property is reserved.
if ($internalHooks.indexOf(key) > -1) { if (key === 'cid') {
options[key] = proto[key]; return;
return; }
}
var superDescriptor = Object.getOwnPropertyDescriptor(Super, key);
var descriptor = Object.getOwnPropertyDescriptor(proto, key);
if (!isPrimitive(descriptor.value) && superDescriptor && superDescriptor.value === descriptor.value) {
if (descriptor.value !== void 0) { return;
// methods }
if (typeof descriptor.value === 'function') { } // Warn if the users manually declare reserved properties
(options.methods || (options.methods = {}))[key] = descriptor.value;
} else {
// typescript decorated data if ( reservedPropertyNames.indexOf(key) >= 0) {
(options.mixins || (options.mixins = [])).push({ warn("Static property name '".concat(key, "' declared on class '").concat(Original.name, "' ") + 'conflicts with reserved property name of Vue internal. ' + 'It may cause unexpected behavior of the component. Consider renaming the property.');
data() { }
return {
[key]: descriptor.value Object.defineProperty(Extended, key, descriptor);
}; });
} }
}); function Component(options) {
} if (typeof options === 'function') {
} else if (descriptor.get || descriptor.set) { return componentFactory(options);
// computed properties }
(options.computed || (options.computed = {}))[key] = {
get: descriptor.get, return function (Component) {
set: descriptor.set return componentFactory(Component, options);
}; };
} }
});
(options.mixins || (options.mixins = [])).push({ Component.registerHooks = function registerHooks(keys) {
data() { $internalHooks.push(...keys);
return collectDataFromConstructor(this, Component); };
}
export { Component, createDecorator, mixins };
}); // decorate options
var decorators = Component.__decorators__;
if (decorators) {
decorators.forEach(fn => fn(options));
delete Component.__decorators__;
} // find super
var superProto = Object.getPrototypeOf(Component.prototype);
var Super = superProto instanceof Vue ? superProto.constructor : Vue;
var Extended = Super.extend(options);
forwardStaticMembers(Extended, Component, Super);
if (reflectionIsSupported()) {
copyReflectionMetadata(Extended, Component);
}
return Extended;
}
var reservedPropertyNames = [// Unique id
'cid', // Super Vue constructor
'super', // Component options that will be used by the component
'options', 'superOptions', 'extendOptions', 'sealedOptions', // Private assets
'component', 'directive', 'filter'];
var shouldIgnore = {
prototype: true,
arguments: true,
callee: true,
caller: true
};
function forwardStaticMembers(Extended, Original, Super) {
// We have to use getOwnPropertyNames since Babel registers methods as non-enumerable
Object.getOwnPropertyNames(Original).forEach(key => {
// Skip the properties that should not be overwritten
if (shouldIgnore[key]) {
return;
} // Some browsers does not allow reconfigure built-in properties
var extendedDescriptor = Object.getOwnPropertyDescriptor(Extended, key);
if (extendedDescriptor && !extendedDescriptor.configurable) {
return;
}
var descriptor = Object.getOwnPropertyDescriptor(Original, key); // If the user agent does not support `__proto__` or its family (IE <= 10),
// the sub class properties may be inherited properties from the super class in TypeScript.
// We need to exclude such properties to prevent to overwrite
// the component options object which stored on the extended constructor (See #192).
// If the value is a referenced value (object or function),
// we can check equality of them and exclude it if they have the same reference.
// If it is a primitive value, it will be forwarded for safety.
if (!hasProto) {
// Only `cid` is explicitly exluded from property forwarding
// because we cannot detect whether it is a inherited property or not
// on the no `__proto__` environment even though the property is reserved.
if (key === 'cid') {
return;
}
var superDescriptor = Object.getOwnPropertyDescriptor(Super, key);
if (!isPrimitive(descriptor.value) && superDescriptor && superDescriptor.value === descriptor.value) {
return;
}
} // Warn if the users manually declare reserved properties
if ( reservedPropertyNames.indexOf(key) >= 0) {
warn("Static property name '".concat(key, "' declared on class '").concat(Original.name, "' ") + 'conflicts with reserved property name of Vue internal. ' + 'It may cause unexpected behavior of the component. Consider renaming the property.');
}
Object.defineProperty(Extended, key, descriptor);
});
}
function Component(options) {
if (typeof options === 'function') {
return componentFactory(options);
}
return function (Component) {
return componentFactory(Component, options);
};
}
Component.registerHooks = function registerHooks(keys) {
$internalHooks.push(...keys);
};
export { Component, createDecorator, mixins };

File diff suppressed because it is too large Load diff

View file

@ -1,12 +1,10 @@
/* eslint-disable */ /* eslint-disable */
/*eslint no-unused-vars: "off" */ /*eslint no-unused-vars: "off" */
/** vue-property-decorator verson 9.0.0 MIT LICENSE copyright 2020 kaorun343 */ /** vue-property-decorator verson 8.5.1 MIT LICENSE copyright 2020 kaorun343 */
/// <reference types='reflect-metadata'/>
'use strict'; 'use strict';
import Vue from '../vue/vue';
import Vue from './vue/vue'; import { Component, createDecorator, mixins } from './vue-class-component';
import {Component, createDecorator, mixins } from './vue-class-component';
export { Component, Vue, mixins as Mixins }; export { Component, Vue, mixins as Mixins };
/** Used for keying reactive provide/inject properties */ /** Used for keying reactive provide/inject properties */
var reactiveInjectKey = '__reactiveInject__'; var reactiveInjectKey = '__reactiveInject__';

View file

@ -1,18 +1,6 @@
<?xml version="1.0"?> <?xml version="1.0"?>
<libraries> <libraries>
<!-- Example from lib/thirdpartylibs.xml
<library>
<location>amd/src/popper.js</location>
<name>Popper.js</name>
<description>A kickass library used to created Poppers in web applications.</description>
<version>v1.12.6</version>
<license>MIT</license>
<repository>https://github.com/floating-ui/floating-ui</repository>
<copyrights>
<copyright>2016 Federico Zivolo and contributors</copyright>
</copyrights>
</library>
-->
<library> <library>
<location>amd/src/bootstrap-vue/</location> <location>amd/src/bootstrap-vue/</location>
<name>Bootstrap-Vue.js</name> <name>Bootstrap-Vue.js</name>
@ -24,6 +12,19 @@
<copyright>2016-2023 - BootstrapVue</copyright> <copyright>2016-2023 - BootstrapVue</copyright>
</copyrights> </copyrights>
</library> </library>
<library>
<location>css/bootstrap-vue/</location>
<name>Bootstrap-Vue.js</name>
<description>Vue components for Bootstrap</description>
<version>2.23.0</version>
<license>MIT</license>
<repository>https://github.com/bootstrap-vue/bootstrap-vue</repository>
<copyrights>
<copyright>2016-2023 - BootstrapVue</copyright>
</copyrights>
</library>
<library> <library>
<location>amd/src/portal-vue/</location> <location>amd/src/portal-vue/</location>
<name>Portal-Vue.js</name> <name>Portal-Vue.js</name>
@ -35,16 +36,82 @@
<copyright>2021 Thorsten Lünborg</copyright> <copyright>2021 Thorsten Lünborg</copyright>
</copyrights> </copyrights>
</library> </library>
<library> <library>
<location>amd/src/vue-easy-dnd/</location> <location>amd/src/vue</location>
<name>Vu</name>
<description>Vue is a progressive framework for building user interfaces.</description>
<version>2.7.14</version>
<license>MIT</license>
<repository>https://github.com/vuejs/vue</repository>
<copyrights>
<copyright>2014-2022 Evan You</copyright>
</copyrights>
</library>
<library>
<location>amd/src/vue-easy-dnd/vue-easy-dnd.esm.js</location>
<name>Vue-Easy-DnD</name> <name>Vue-Easy-DnD</name>
<description>A drag and drop implementation for Vue that uses only standard mouse events instead of the HTML5 drag and drop API</description> <description>A drag and drop implementation for Vue that uses only standard mouse events instead of the HTML5 drag and drop API</description>
<version>2.1.3</version> <version>2.1.3</version>
<license>MIT</license> <license>Apache 2.0</license>
<repository>https://github.com/rlemaigre/Easy-DnD</repository> <repository>https://github.com/rlemaigre/Easy-DnD</repository>
<copyrights> <copyrights>
<copyright>2019 Régis Lemaigre</copyright> <copyright>2019 Régis Lemaigre</copyright>
</copyrights> </copyrights>
</library> </library>
<library>
<location>amd/src/vue-easy-dnd/reflect-metadata.js</location>
<name>reflect-metadata</name>
<description>Metadata Reflection API for javascript</description>
<version>0.1.13</version>
<license>Apache 2.0</license>
<repository>https://github.com/rbuckton/reflect-metadata</repository>
<copyrights>
<copyright>Cy Brown</copyright>
<copyright>Oleh Dokuka</copyright>
<copyright>Ron Buckton</copyright>
<copyright>William Buchwalter</copyright>
</copyrights>
</library>
<library>
<location>amd/src/vue-easy-dnd/vue-class-component.js</location>
<name>vue-class-component</name>
<description>Vue Class Component</description>
<version>0.1.13</version>
<license>MIT</license>
<repository>https://github.com/vuejs/vue-class-component</repository>
<copyrights>
<copyright>2015-present Evan You</copyright>
</copyrights>
</library>
<library>
<location>amd/src/vue-easy-dnd/vue-property-decorator.js</location>
<name>vue-property-decorator</name>
<description>Vue Property Decorator</description>
<version>8.5.1</version>
<license>MIT</license>
<repository>https://github.com/kaorun343/vue-property-decorator</repository>
<copyrights>
<copyright>2015-present Evan You</copyright>
</copyrights>
</library>
<library>
<location>amd/src/simpleline</location>
<name>SimpleLine</name>
<description>Simpleline is a simple and lightweight tool to draw lines and arrows between two html elements.</description>
<version>1.0.0</version>
<license>MIT</license>
<repository>https://github.com/miqraeng/simpleline</repository>
<copyrights>
<copyright>2023 P.M. Kuipers</copyright>
<copyright>Morglod/jchnkl</copyright>
</copyrights>
</library>
</libraries> </libraries>