-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/pages/fitment/common/vuedraggable-helper.js b/src/pages/fitment/common/vuedraggable-helper.js
index e41406886b80dc82da5bee69b49a53888bfa4d09..11d2ad20020c43bfcbebc8a8710d3d8945e583d5 100644
--- a/src/pages/fitment/common/vuedraggable-helper.js
+++ b/src/pages/fitment/common/vuedraggable-helper.js
@@ -1,37 +1,33 @@
+const regex = /-(\w)/g;
+
function getConsole() {
- if (typeof window !== "undefined") {
- return window.console;
- }
- return global.console;
+ if (typeof window !== 'undefined') {
+ return window.console;
+ }
+ return global.console;
}
const console = getConsole();
function cached(fn) {
- const cache = Object.create(null);
- return function cachedFn(str) {
- const hit = cache[str];
- return hit || (cache[str] = fn(str));
- };
+ const cache = Object.create(null);
+ return function cachedFn(str) {
+ const hit = cache[str];
+ return hit || (cache[str] = fn(str));
+ };
}
-const regex = /-(\w)/g;
-const camelize = cached(str =>
- str.replace(regex, (_, c) => (c ? c.toUpperCase() : ""))
-);
+const camelize = cached(str => str.replace(regex, (_, c) => (c ? c.toUpperCase() : '')));
function removeNode(node) {
- if (node.parentElement !== null) {
- node.parentElement.removeChild(node);
- }
+ if (node.parentElement !== null) {
+ node.parentElement.removeChild(node);
+ }
}
function insertNodeAt(fatherNode, node, position) {
- const refNode =
- position === 0
- ? fatherNode.children[0]
- : fatherNode.children[position - 1].nextSibling;
- fatherNode.insertBefore(node, refNode);
+ const refNode = position === 0 ? fatherNode.children[0] : fatherNode.children[position - 1].nextSibling;
+ fatherNode.insertBefore(node, refNode);
}
-export {insertNodeAt, camelize, console, removeNode};
+export { insertNodeAt, camelize, console, removeNode };
diff --git a/src/pages/fitment/common/vuedraggable.js b/src/pages/fitment/common/vuedraggable.js
index 98c17ee78672eeb5fbd1e02838e396576c9aacb5..f479c80b0c6a3fce8dbdf622a6c3e297632f1c10 100644
--- a/src/pages/fitment/common/vuedraggable.js
+++ b/src/pages/fitment/common/vuedraggable.js
@@ -1,485 +1,462 @@
-import Sortable from "sortablejs";
-import {insertNodeAt, camelize, console, removeNode} from "./vuedraggable-helper";
+import Sortable from 'sortablejs';
+import { insertNodeAt, camelize, console, removeNode } from './vuedraggable-helper';
function buildAttribute(object, propName, value) {
- if (value === undefined) {
- return object;
- }
- object = object || {};
- object[propName] = value;
+ if (value === undefined) {
return object;
+ }
+ object = object || {};
+ object[propName] = value;
+ return object;
}
function computeVmIndex(vnodes, element) {
- return vnodes.map(elt => elt.elm).indexOf(element);
+ return vnodes.map(elt => elt.elm).indexOf(element);
}
function computeIndexes(slots, children, isTransition, footerOffset) {
- if (!slots) {
- return [];
- }
-
- const elmFromNodes = slots.map(elt => elt.elm);
- const footerIndex = children.length - footerOffset;
- const rawIndexes = [...children].map((elt, idx) =>
- idx >= footerIndex ? elmFromNodes.length : elmFromNodes.indexOf(elt)
- );
- return isTransition ? rawIndexes.filter(ind => ind !== -1) : rawIndexes;
+ if (!slots) {
+ return [];
+ }
+
+ const elmFromNodes = slots.map(elt => elt.elm);
+ const footerIndex = children.length - footerOffset;
+ const rawIndexes = [...children].map((elt, idx) =>
+ idx >= footerIndex ? elmFromNodes.length : elmFromNodes.indexOf(elt)
+ );
+ return isTransition ? rawIndexes.filter(ind => ind !== -1) : rawIndexes;
}
function emit(evtName, evtData) {
- this.$nextTick(() => this.$emit(evtName.toLowerCase(), {...evtData}));
+ this.$nextTick(() => this.$emit(evtName.toLowerCase(), { ...evtData }));
}
function delegateAndEmit(evtName) {
- return evtData => {
- if (this.realList !== null) {
- this["onDrag" + evtName](evtData);
- }
- emit.call(this, evtName, evtData);
- };
+ return evtData => {
+ if (this.realList !== null) {
+ this['onDrag' + evtName](evtData);
+ }
+ emit.call(this, evtName, evtData);
+ };
}
function isTransitionName(name) {
- return ["transition-group", "TransitionGroup"].includes(name);
+ return ['transition-group', 'TransitionGroup'].includes(name);
}
function isTransition(slots) {
- if (!slots || slots.length !== 1) {
- return false;
- }
- const [{componentOptions}] = slots;
- if (!componentOptions) {
- return false;
- }
- return isTransitionName(componentOptions.tag);
+ if (!slots || slots.length !== 1) {
+ return false;
+ }
+ const [{ componentOptions }] = slots;
+ if (!componentOptions) {
+ return false;
+ }
+ return isTransitionName(componentOptions.tag);
}
function getSlot(slot, scopedSlot, key) {
- return slot[key] || (scopedSlot[key] ? scopedSlot[key]() : undefined);
+ return slot[key] || (scopedSlot[key] ? scopedSlot[key]() : undefined);
}
function computeChildrenAndOffsets(children, slot, scopedSlot) {
- let headerOffset = 0;
- let footerOffset = 0;
- const header = getSlot(slot, scopedSlot, "header");
- if (header) {
- headerOffset = header.length;
- children = children ? [...header, ...children] : [...header];
- }
- const footer = getSlot(slot, scopedSlot, "footer");
- if (footer) {
- footerOffset = footer.length;
- children = children ? [...children, ...footer] : [...footer];
- }
- return {children, headerOffset, footerOffset};
+ let headerOffset = 0;
+ let footerOffset = 0;
+ const header = getSlot(slot, scopedSlot, 'header');
+ if (header) {
+ headerOffset = header.length;
+ children = children ? [...header, ...children] : [...header];
+ }
+ const footer = getSlot(slot, scopedSlot, 'footer');
+ if (footer) {
+ footerOffset = footer.length;
+ children = children ? [...children, ...footer] : [...footer];
+ }
+ return { children, headerOffset, footerOffset };
}
function getComponentAttributes($attrs, componentData) {
- let attributes = null;
- const update = (name, value) => {
- attributes = buildAttribute(attributes, name, value);
- };
- const attrs = Object.keys($attrs)
- .filter(key => key === "id" || key.startsWith("data-"))
- .reduce((res, key) => {
- res[key] = $attrs[key];
- return res;
- }, {});
- update("attrs", attrs);
-
- if (!componentData) {
- return attributes;
- }
- const {on, props, attrs: componentDataAttrs} = componentData;
- update("on", on);
- update("props", props);
- Object.assign(attributes.attrs, componentDataAttrs);
+ let attributes = null;
+ const update = (name, value) => {
+ attributes = buildAttribute(attributes, name, value);
+ };
+ const attrs = Object.keys($attrs)
+ .filter(key => key === 'id' || key.startsWith('data-'))
+ .reduce((res, key) => {
+ res[key] = $attrs[key];
+ return res;
+ }, {});
+ update('attrs', attrs);
+
+ if (!componentData) {
return attributes;
+ }
+ const { on, props, attrs: componentDataAttrs } = componentData;
+ update('on', on);
+ update('props', props);
+ Object.assign(attributes.attrs, componentDataAttrs);
+ return attributes;
}
-const eventsListened = ["Start", "Add", "Remove", "Update", "End"];
-const eventsToEmit = ["Choose", "Unchoose", "Sort", "Filter", "Clone"];
-const readonlyProperties = ["Move", ...eventsListened, ...eventsToEmit].map(
- evt => "on" + evt
-);
+const eventsListened = ['Start', 'Add', 'Remove', 'Update', 'End'];
+const eventsToEmit = ['Choose', 'Unchoose', 'Sort', 'Filter', 'Clone'];
+const readonlyProperties = ['Move', ...eventsListened, ...eventsToEmit].map(evt => 'on' + evt);
var draggingElement = null;
const props = {
- options: Object,
- list: {
- type: Array,
- required: false,
- default: null
+ options: Object,
+ list: {
+ type: Array,
+ required: false,
+ default: null
+ },
+ value: {
+ type: Array,
+ required: false,
+ default: null
+ },
+ noTransitionOnDrag: {
+ type: Boolean,
+ default: false
+ },
+ clone: {
+ type: Function,
+ default: original => {
+ return original;
+ }
+ },
+ element: {
+ type: String,
+ default: 'div'
+ },
+ tag: {
+ type: String,
+ default: null
+ },
+ move: {
+ type: Function,
+ default: null
+ },
+ componentData: {
+ type: Object,
+ required: false,
+ default: null
+ }
+};
+
+const draggableComponent = {
+ name: 'draggable',
+
+ inheritAttrs: false,
+
+ props,
+
+ data() {
+ return {
+ transitionMode: false,
+ noneFunctionalComponentMode: false
+ };
+ },
+
+ render(h) {
+ const slots = this.$slots.default;
+ this.transitionMode = isTransition(slots);
+ const { children, headerOffset, footerOffset } = computeChildrenAndOffsets(slots, this.$slots, this.$scopedSlots);
+ this.headerOffset = headerOffset;
+ this.footerOffset = footerOffset;
+ const attributes = getComponentAttributes(this.$attrs, this.componentData);
+ return h(this.getTag(), attributes, children);
+ },
+
+ created() {
+ if (this.list !== null && this.value !== null) {
+ console.error('Value and list props are mutually exclusive! Please set one or another.');
+ }
+
+ if (this.element !== 'div') {
+ console.warn(
+ 'Element props is deprecated please use tag props instead. See https://github.com/SortableJS/Vue.Draggable/blob/master/documentation/migrate.md#element-props'
+ );
+ }
+
+ if (this.options !== undefined) {
+ console.warn(
+ 'Options props is deprecated, add sortable options directly as vue.draggable item, or use v-bind. See https://github.com/SortableJS/Vue.Draggable/blob/master/documentation/migrate.md#options-props'
+ );
+ }
+ },
+
+ mounted() {
+ this.noneFunctionalComponentMode =
+ this.getTag().toLowerCase() !== this.$el.nodeName.toLowerCase() && !this.getIsFunctional();
+ if (this.noneFunctionalComponentMode && this.transitionMode) {
+ throw new Error(
+ `Transition-group inside component is not supported. Please alter tag value or remove transition-group. Current tag value: ${this.getTag()}`
+ );
+ }
+ var optionsAdded = {};
+ eventsListened.forEach(elt => {
+ optionsAdded['on' + elt] = delegateAndEmit.call(this, elt);
+ });
+
+ eventsToEmit.forEach(elt => {
+ optionsAdded['on' + elt] = emit.bind(this, elt);
+ });
+
+ const attributes = Object.keys(this.$attrs).reduce((res, key) => {
+ res[camelize(key)] = this.$attrs[key];
+ return res;
+ }, {});
+
+ const options = Object.assign({}, this.options, attributes, optionsAdded, {
+ onMove: (evt, originalEvent) => {
+ return this.onDragMove(evt, originalEvent);
+ }
+ });
+ !('draggable' in options) && (options.draggable = '>*');
+ this._sortable = new Sortable(this.rootContainer, options);
+ this.computeIndexes();
+ },
+
+ beforeDestroy() {
+ if (this._sortable !== undefined) this._sortable.destroy();
+ },
+
+ computed: {
+ rootContainer() {
+ return this.transitionMode ? this.$el.children[0] : this.$el;
},
- value: {
- type: Array,
- required: false,
- default: null
+
+ realList() {
+ return this.list ? this.list : this.value;
+ }
+ },
+
+ watch: {
+ options: {
+ handler(newOptionValue) {
+ this.updateOptions(newOptionValue);
+ },
+ deep: true
},
- noTransitionOnDrag: {
- type: Boolean,
- default: false
+
+ $attrs: {
+ handler(newOptionValue) {
+ this.updateOptions(newOptionValue);
+ },
+ deep: true
},
- clone: {
- type: Function,
- default: original => {
- return original;
+
+ realList() {
+ this.computeIndexes();
+ }
+ },
+
+ methods: {
+ getIsFunctional() {
+ const { fnOptions } = this._vnode;
+ return fnOptions && fnOptions.functional;
+ },
+
+ getTag() {
+ return this.tag || this.element;
+ },
+
+ updateOptions(newOptionValue) {
+ for (var property in newOptionValue) {
+ const value = camelize(property);
+ if (readonlyProperties.indexOf(value) === -1) {
+ this._sortable.option(value, newOptionValue[property]);
}
+ }
},
- element: {
- type: String,
- default: "div"
+
+ getChildrenNodes() {
+ if (this.noneFunctionalComponentMode) {
+ return this.$children[0].$slots.default;
+ }
+ const rawNodes = this.$slots.default;
+ return this.transitionMode ? rawNodes[0].child.$slots.default : rawNodes;
},
- tag: {
- type: String,
- default: null
+
+ computeIndexes() {
+ this.$nextTick(() => {
+ this.visibleIndexes = computeIndexes(
+ this.getChildrenNodes(),
+ this.rootContainer.children,
+ this.transitionMode,
+ this.footerOffset
+ );
+ });
},
- move: {
- type: Function,
- default: null
+
+ getUnderlyingVm(htmlElt) {
+ const index = computeVmIndex(this.getChildrenNodes() || [], htmlElt);
+ if (index === -1) {
+ //Edge case during move callback: related element might be
+ //an element different from collection
+ return null;
+ }
+ const element = this.realList[index];
+ return { index, element };
},
- componentData: {
- type: Object,
- required: false,
- default: null
- }
-};
-const draggableComponent = {
- name: "draggable",
+ getUnderlyingPotencialDraggableComponent({ __vue__: vue }) {
+ if (!vue || !vue.$options || !isTransitionName(vue.$options._componentTag)) {
+ if (!('realList' in vue) && vue.$children.length === 1 && 'realList' in vue.$children[0])
+ return vue.$children[0];
- inheritAttrs: false,
+ return vue;
+ }
+ return vue.$parent;
+ },
- props,
+ emitChanges(evt) {
+ this.$nextTick(() => {
+ this.$emit('change', evt);
+ });
+ },
- data() {
- return {
- transitionMode: false,
- noneFunctionalComponentMode: false
- };
+ alterList(onList) {
+ if (this.list) {
+ onList(this.list);
+ return;
+ }
+ const newList = [...this.value];
+ onList(newList);
+ this.$emit('input', newList);
},
- render(h) {
- const slots = this.$slots.default;
- this.transitionMode = isTransition(slots);
- const {children, headerOffset, footerOffset} = computeChildrenAndOffsets(
- slots,
- this.$slots,
- this.$scopedSlots
- );
- this.headerOffset = headerOffset;
- this.footerOffset = footerOffset;
- const attributes = getComponentAttributes(this.$attrs, this.componentData);
- return h(this.getTag(), attributes, children);
+ spliceList() {
+ const spliceList = list => list.splice(...arguments);
+ this.alterList(spliceList);
},
- created() {
- if (this.list !== null && this.value !== null) {
- console.error(
- "Value and list props are mutually exclusive! Please set one or another."
- );
- }
+ updatePosition(oldIndex, newIndex) {
+ const updatePosition = list => list.splice(newIndex, 0, list.splice(oldIndex, 1)[0]);
+ this.alterList(updatePosition);
+ },
- if (this.element !== "div") {
- console.warn(
- "Element props is deprecated please use tag props instead. See https://github.com/SortableJS/Vue.Draggable/blob/master/documentation/migrate.md#element-props"
- );
+ getRelatedContextFromMoveEvent({ to, related }) {
+ const component = this.getUnderlyingPotencialDraggableComponent(to);
+ if (!component) {
+ return { component };
+ }
+ const list = component.realList;
+ const context = { list, component };
+ if (to !== related && list && component.getUnderlyingVm) {
+ const destination = component.getUnderlyingVm(related);
+ if (destination) {
+ return Object.assign(destination, context);
}
+ }
+ return context;
+ },
- if (this.options !== undefined) {
- console.warn(
- "Options props is deprecated, add sortable options directly as vue.draggable item, or use v-bind. See https://github.com/SortableJS/Vue.Draggable/blob/master/documentation/migrate.md#options-props"
- );
- }
+ getVmIndex(domIndex) {
+ const indexes = this.visibleIndexes;
+ const numberIndexes = indexes.length;
+ return domIndex > numberIndexes - 1 ? numberIndexes : indexes[domIndex];
},
- mounted() {
- this.noneFunctionalComponentMode =
- this.getTag().toLowerCase() !== this.$el.nodeName.toLowerCase() &&
- !this.getIsFunctional();
- if (this.noneFunctionalComponentMode && this.transitionMode) {
- throw new Error(
- `Transition-group inside component is not supported. Please alter tag value or remove transition-group. Current tag value: ${this.getTag()}`
- );
- }
- var optionsAdded = {};
- eventsListened.forEach(elt => {
- optionsAdded["on" + elt] = delegateAndEmit.call(this, elt);
- });
-
- eventsToEmit.forEach(elt => {
- optionsAdded["on" + elt] = emit.bind(this, elt);
- });
-
- const attributes = Object.keys(this.$attrs).reduce((res, key) => {
- res[camelize(key)] = this.$attrs[key];
- return res;
- }, {});
-
- const options = Object.assign({}, this.options, attributes, optionsAdded, {
- onMove: (evt, originalEvent) => {
- return this.onDragMove(evt, originalEvent);
- }
- });
- !("draggable" in options) && (options.draggable = ">*");
- this._sortable = new Sortable(this.rootContainer, options);
- this.computeIndexes();
+ getComponent() {
+ return this.$slots.default[0].componentInstance;
},
- beforeDestroy() {
- if (this._sortable !== undefined) this._sortable.destroy();
+ resetTransitionData(index) {
+ if (!this.noTransitionOnDrag || !this.transitionMode) {
+ return;
+ }
+ var nodes = this.getChildrenNodes();
+ nodes[index].data = null;
+ const transitionContainer = this.getComponent();
+ transitionContainer.children = [];
+ transitionContainer.kept = undefined;
},
- computed: {
- rootContainer() {
- return this.transitionMode ? this.$el.children[0] : this.$el;
- },
+ onDragStart(evt) {
+ this.context = this.getUnderlyingVm(evt.item);
+ evt.item._underlying_vm_ = this.clone(this.context.element);
+ draggingElement = evt.item;
+ },
- realList() {
- return this.list ? this.list : this.value;
- }
+ onDragAdd(evt) {
+ const element = evt.item._underlying_vm_;
+ if (element === undefined) {
+ return;
+ }
+ removeNode(evt.item);
+ const newIndex = this.getVmIndex(evt.newIndex);
+ this.spliceList(newIndex, 0, element);
+ this.computeIndexes();
+ const added = { element, newIndex };
+ this.emitChanges({ added });
},
- watch: {
- options: {
- handler(newOptionValue) {
- this.updateOptions(newOptionValue);
- },
- deep: true
- },
-
- $attrs: {
- handler(newOptionValue) {
- this.updateOptions(newOptionValue);
- },
- deep: true
- },
-
- realList() {
- this.computeIndexes();
- }
+ onDragRemove(evt) {
+ insertNodeAt(this.rootContainer, evt.item, evt.oldIndex);
+ if (evt.pullMode === 'clone') {
+ removeNode(evt.clone);
+ return;
+ }
+ const oldIndex = this.context.index;
+ this.spliceList(oldIndex, 1);
+ const removed = { element: this.context.element, oldIndex };
+ this.resetTransitionData(oldIndex);
+ this.emitChanges({ removed });
},
- methods: {
- getIsFunctional() {
- const {fnOptions} = this._vnode;
- return fnOptions && fnOptions.functional;
- },
-
- getTag() {
- return this.tag || this.element;
- },
-
- updateOptions(newOptionValue) {
- for (var property in newOptionValue) {
- const value = camelize(property);
- if (readonlyProperties.indexOf(value) === -1) {
- this._sortable.option(value, newOptionValue[property]);
- }
- }
- },
-
- getChildrenNodes() {
- if (this.noneFunctionalComponentMode) {
- return this.$children[0].$slots.default;
- }
- const rawNodes = this.$slots.default;
- return this.transitionMode ? rawNodes[0].child.$slots.default : rawNodes;
- },
-
- computeIndexes() {
- this.$nextTick(() => {
- this.visibleIndexes = computeIndexes(
- this.getChildrenNodes(),
- this.rootContainer.children,
- this.transitionMode,
- this.footerOffset
- );
- });
- },
-
- getUnderlyingVm(htmlElt) {
- const index = computeVmIndex(this.getChildrenNodes() || [], htmlElt);
- if (index === -1) {
- //Edge case during move callback: related element might be
- //an element different from collection
- return null;
- }
- const element = this.realList[index];
- return {index, element};
- },
-
- getUnderlyingPotencialDraggableComponent({__vue__: vue}) {
- if (
- !vue ||
- !vue.$options ||
- !isTransitionName(vue.$options._componentTag)
- ) {
- if (
- !("realList" in vue) &&
- vue.$children.length === 1 &&
- "realList" in vue.$children[0]
- )
- return vue.$children[0];
-
- return vue;
- }
- return vue.$parent;
- },
-
- emitChanges(evt) {
- this.$nextTick(() => {
- this.$emit("change", evt);
- });
- },
-
- alterList(onList) {
- if (this.list) {
- onList(this.list);
- return;
- }
- const newList = [...this.value];
- onList(newList);
- this.$emit("input", newList);
- },
-
- spliceList() {
- const spliceList = list => list.splice(...arguments);
- this.alterList(spliceList);
- },
-
- updatePosition(oldIndex, newIndex) {
- const updatePosition = list =>
- list.splice(newIndex, 0, list.splice(oldIndex, 1)[0]);
- this.alterList(updatePosition);
- },
-
- getRelatedContextFromMoveEvent({to, related}) {
- const component = this.getUnderlyingPotencialDraggableComponent(to);
- if (!component) {
- return {component};
- }
- const list = component.realList;
- const context = {list, component};
- if (to !== related && list && component.getUnderlyingVm) {
- const destination = component.getUnderlyingVm(related);
- if (destination) {
- return Object.assign(destination, context);
- }
- }
- return context;
- },
-
- getVmIndex(domIndex) {
- const indexes = this.visibleIndexes;
- const numberIndexes = indexes.length;
- return domIndex > numberIndexes - 1 ? numberIndexes : indexes[domIndex];
- },
-
- getComponent() {
- return this.$slots.default[0].componentInstance;
- },
-
- resetTransitionData(index) {
- if (!this.noTransitionOnDrag || !this.transitionMode) {
- return;
- }
- var nodes = this.getChildrenNodes();
- nodes[index].data = null;
- const transitionContainer = this.getComponent();
- transitionContainer.children = [];
- transitionContainer.kept = undefined;
- },
-
- onDragStart(evt) {
- this.context = this.getUnderlyingVm(evt.item);
- evt.item._underlying_vm_ = this.clone(this.context.element);
- draggingElement = evt.item;
- },
-
- onDragAdd(evt) {
- const element = evt.item._underlying_vm_;
- if (element === undefined) {
- return;
- }
- removeNode(evt.item);
- const newIndex = this.getVmIndex(evt.newIndex);
- this.spliceList(newIndex, 0, element);
- this.computeIndexes();
- const added = {element, newIndex};
- this.emitChanges({added});
- },
-
- onDragRemove(evt) {
- insertNodeAt(this.rootContainer, evt.item, evt.oldIndex);
- if (evt.pullMode === "clone") {
- removeNode(evt.clone);
- return;
- }
- const oldIndex = this.context.index;
- this.spliceList(oldIndex, 1);
- const removed = {element: this.context.element, oldIndex};
- this.resetTransitionData(oldIndex);
- this.emitChanges({removed});
- },
-
- onDragUpdate(evt) {
- removeNode(evt.item);
- insertNodeAt(evt.from, evt.item, evt.oldIndex);
- const oldIndex = this.context.index;
- const newIndex = this.getVmIndex(evt.newIndex);
- this.updatePosition(oldIndex, newIndex);
- const moved = {element: this.context.element, oldIndex, newIndex};
- this.emitChanges({moved});
- },
-
- updateProperty(evt, propertyName) {
- evt.hasOwnProperty(propertyName) &&
- (evt[propertyName] += this.headerOffset);
- },
-
- computeFutureIndex(relatedContext, evt) {
- if (!relatedContext.element) {
- return 0;
- }
- const domChildren = [...evt.to.children].filter(
- el => el.style["display"] !== "none"
- );
- const currentDOMIndex = domChildren.indexOf(evt.related);
- const currentIndex = relatedContext.component.getVmIndex(currentDOMIndex);
- const draggedInList = domChildren.indexOf(draggingElement) !== -1;
- return draggedInList || !evt.willInsertAfter
- ? currentIndex
- : currentIndex + 1;
- },
-
- onDragMove(evt, originalEvent) {
- const onMove = this.move;
- if (!onMove || !this.realList) {
- return true;
- }
-
- const relatedContext = this.getRelatedContextFromMoveEvent(evt);
- const draggedContext = this.context;
- const futureIndex = this.computeFutureIndex(relatedContext, evt);
- Object.assign(draggedContext, {futureIndex});
- const sendEvt = Object.assign({}, evt, {
- relatedContext,
- draggedContext
- });
- return onMove(sendEvt, originalEvent);
- },
-
- onDragEnd() {
- this.computeIndexes();
- draggingElement = null;
- }
+ onDragUpdate(evt) {
+ removeNode(evt.item);
+ insertNodeAt(evt.from, evt.item, evt.oldIndex);
+ const oldIndex = this.context.index;
+ const newIndex = this.getVmIndex(evt.newIndex);
+ this.updatePosition(oldIndex, newIndex);
+ const moved = { element: this.context.element, oldIndex, newIndex };
+ this.emitChanges({ moved });
+ },
+
+ updateProperty(evt, propertyName) {
+ evt.hasOwnProperty(propertyName) && (evt[propertyName] += this.headerOffset);
+ },
+
+ computeFutureIndex(relatedContext, evt) {
+ if (!relatedContext.element) {
+ return 0;
+ }
+ const domChildren = [...evt.to.children].filter(el => el.style['display'] !== 'none');
+ const currentDOMIndex = domChildren.indexOf(evt.related);
+ const currentIndex = relatedContext.component.getVmIndex(currentDOMIndex);
+ const draggedInList = domChildren.indexOf(draggingElement) !== -1;
+ return draggedInList || !evt.willInsertAfter ? currentIndex : currentIndex + 1;
+ },
+
+ onDragMove(evt, originalEvent) {
+ const onMove = this.move;
+ if (!onMove || !this.realList) {
+ return true;
+ }
+
+ const relatedContext = this.getRelatedContextFromMoveEvent(evt);
+ const draggedContext = this.context;
+ const futureIndex = this.computeFutureIndex(relatedContext, evt);
+ Object.assign(draggedContext, { futureIndex });
+ const sendEvt = Object.assign({}, evt, {
+ relatedContext,
+ draggedContext
+ });
+ return onMove(sendEvt, originalEvent);
+ },
+
+ onDragEnd() {
+ this.computeIndexes();
+ draggingElement = null;
}
+ }
};
-if (typeof window !== "undefined" && "Vue" in window) {
- window.Vue.component("draggable", draggableComponent);
+if (typeof window !== 'undefined' && 'Vue' in window) {
+ window.Vue.component('draggable', draggableComponent);
}
export default draggableComponent;
diff --git a/src/pages/fitment/common/widget.vue b/src/pages/fitment/common/widget.vue
index 09c9544bdd0a292432fc7b8b7ad39c4e6a42f225..bf8563d02c3f073860dedcbfbdc6406b5b2e6037 100644
--- a/src/pages/fitment/common/widget.vue
+++ b/src/pages/fitment/common/widget.vue
@@ -1,243 +1,243 @@
- 
- 
- 
+ 
+