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.
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) { Component.prototype._init = originalInit; // create plain data object
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) { var plainData = {};
Reflect.defineMetadata(metaKey, metadata, to, propertyKey); Object.keys(data).forEach(key => {
} else { if (data[key] !== undefined) {
Reflect.defineMetadata(metaKey, metadata, to); plainData[key] = data[key];
} }
}); });
}
var fakeArray = { {
__proto__: [] 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.');
var hasProto = fakeArray instanceof Array; }
function createDecorator(factory) { }
return (target, key, index) => {
var Ctor = typeof target === 'function' ? target : target.constructor;
if (!Ctor.__decorators__) { return plainData;
Ctor.__decorators__ = []; }
}
if (typeof index !== 'number') { var $internalHooks = ['data', 'beforeCreate', 'created', 'beforeMount', 'mounted', 'beforeDestroy', 'destroyed', 'beforeUpdate', 'updated', 'activated', 'deactivated', 'render', 'errorCaptured', 'serverPrefetch' // 2.6
index = undefined; ];
} function componentFactory(Component) {
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
options.name = options.name || Component._componentTag || Component.name; // prototype props.
Ctor.__decorators__.push(options => factory(options, key, index)); var proto = Component.prototype;
}; Object.getOwnPropertyNames(proto).forEach(function (key) {
} if (key === 'constructor') {
function mixins() { return;
for (var _len = arguments.length, Ctors = new Array(_len), _key = 0; _key < _len; _key++) { } // hooks
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
var data = new Component(); // restore original _init to avoid memory leak (#209) if ($internalHooks.indexOf(key) > -1) {
options[key] = proto[key];
return;
}
Component.prototype._init = originalInit; // create plain data object var descriptor = Object.getOwnPropertyDescriptor(proto, key);
var plainData = {}; if (descriptor.value !== void 0) {
Object.keys(data).forEach(key => { // methods
if (data[key] !== undefined) { if (typeof descriptor.value === 'function') {
plainData[key] = data[key]; (options.methods || (options.methods = {}))[key] = descriptor.value;
} } else {
}); // typescript decorated data
(options.mixins || (options.mixins = [])).push({
data() {
return {
[key]: descriptor.value
};
}
{ });
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.'); } else if (descriptor.get || descriptor.set) {
} // computed properties
} (options.computed || (options.computed = {}))[key] = {
get: descriptor.get,
set: descriptor.set
};
}
});
(options.mixins || (options.mixins = [])).push({
data() {
return collectDataFromConstructor(this, Component);
}
return plainData; }); // decorate options
}
var $internalHooks = ['data', 'beforeCreate', 'created', 'beforeMount', 'mounted', 'beforeDestroy', 'destroyed', 'beforeUpdate', 'updated', 'activated', 'deactivated', 'render', 'errorCaptured', 'serverPrefetch' // 2.6 var decorators = Component.__decorators__;
];
function componentFactory(Component) {
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
options.name = options.name || Component._componentTag || Component.name; // prototype props.
var proto = Component.prototype; if (decorators) {
Object.getOwnPropertyNames(proto).forEach(function (key) { decorators.forEach(fn => fn(options));
if (key === 'constructor') { delete Component.__decorators__;
return; } // find super
} // hooks
if ($internalHooks.indexOf(key) > -1) { var superProto = Object.getPrototypeOf(Component.prototype);
options[key] = proto[key]; var Super = superProto instanceof Vue ? superProto.constructor : Vue;
return; var Extended = Super.extend(options);
} forwardStaticMembers(Extended, Component, Super);
var descriptor = Object.getOwnPropertyDescriptor(proto, key); if (reflectionIsSupported()) {
copyReflectionMetadata(Extended, Component);
}
if (descriptor.value !== void 0) { return Extended;
// methods }
if (typeof descriptor.value === 'function') { var reservedPropertyNames = [// Unique id
(options.methods || (options.methods = {}))[key] = descriptor.value; 'cid', // Super Vue constructor
} else { 'super', // Component options that will be used by the component
// typescript decorated data 'options', 'superOptions', 'extendOptions', 'sealedOptions', // Private assets
(options.mixins || (options.mixins = [])).push({ 'component', 'directive', 'filter'];
data() { var shouldIgnore = {
return { prototype: true,
[key]: descriptor.value arguments: true,
}; callee: true,
} caller: true
};
}); function forwardStaticMembers(Extended, Original, Super) {
} // We have to use getOwnPropertyNames since Babel registers methods as non-enumerable
} else if (descriptor.get || descriptor.set) { Object.getOwnPropertyNames(Original).forEach(key => {
// computed properties // Skip the properties that should not be overwritten
(options.computed || (options.computed = {}))[key] = { if (shouldIgnore[key]) {
get: descriptor.get, return;
set: descriptor.set } // Some browsers does not allow reconfigure built-in properties
};
}
});
(options.mixins || (options.mixins = [])).push({
data() {
return collectDataFromConstructor(this, Component);
}
}); // 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 extendedDescriptor = Object.getOwnPropertyDescriptor(Extended, key);
var Super = superProto instanceof Vue ? superProto.constructor : Vue;
var Extended = Super.extend(options);
forwardStaticMembers(Extended, Component, Super);
if (reflectionIsSupported()) { if (extendedDescriptor && !extendedDescriptor.configurable) {
copyReflectionMetadata(Extended, Component); return;
} }
return Extended; 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.
var reservedPropertyNames = [// Unique id // We need to exclude such properties to prevent to overwrite
'cid', // Super Vue constructor // the component options object which stored on the extended constructor (See #192).
'super', // Component options that will be used by the component // If the value is a referenced value (object or function),
'options', 'superOptions', 'extendOptions', 'sealedOptions', // Private assets // we can check equality of them and exclude it if they have the same reference.
'component', 'directive', 'filter']; // If it is a primitive value, it will be forwarded for safety.
var shouldIgnore = {
prototype: true,
arguments: true,
callee: true,
caller: true
};
function forwardStaticMembers(Extended, Original, Super) { if (!hasProto) {
// We have to use getOwnPropertyNames since Babel registers methods as non-enumerable // Only `cid` is explicitly exluded from property forwarding
Object.getOwnPropertyNames(Original).forEach(key => { // because we cannot detect whether it is a inherited property or not
// Skip the properties that should not be overwritten // on the no `__proto__` environment even though the property is reserved.
if (shouldIgnore[key]) { if (key === 'cid') {
return; return;
} // Some browsers does not allow reconfigure built-in properties }
var superDescriptor = Object.getOwnPropertyDescriptor(Super, key);
if (!isPrimitive(descriptor.value) && superDescriptor && superDescriptor.value === descriptor.value) {
return;
}
} // Warn if the users manually declare reserved properties
var extendedDescriptor = Object.getOwnPropertyDescriptor(Extended, key); 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.');
}
if (extendedDescriptor && !extendedDescriptor.configurable) { Object.defineProperty(Extended, key, descriptor);
return; });
} }
var descriptor = Object.getOwnPropertyDescriptor(Original, key); // If the user agent does not support `__proto__` or its family (IE <= 10), function Component(options) {
// the sub class properties may be inherited properties from the super class in TypeScript. if (typeof options === 'function') {
// We need to exclude such properties to prevent to overwrite return componentFactory(options);
// 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) { return function (Component) {
// Only `cid` is explicitly exluded from property forwarding return componentFactory(Component, options);
// 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); Component.registerHooks = function registerHooks(keys) {
$internalHooks.push(...keys);
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 };
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>