@progress/kendo-vue-grid 3.5.0 → 3.5.1-dev.202208150613

package/dist/esm/drag/ColumnDraggable.d.ts

@@ -0,0 +1,43 @@
+import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
+declare type DefaultData<V> = object | ((this: V) => {});
+declare type DefaultMethods<V> = {
+    [key: string]: (this: V, ...args: any[]) => any;
+};
+/**
+ * @hidden
+ */
+export interface ColumnDraggableProps {
+    key?: any;
+    onPressHandler?: (draggableEvent: any, element: HTMLElement) => void;
+    onDragHandler?: (draggableEvent: any, element: HTMLElement) => void;
+    onReleaseHandler?: (draggableEvent: any) => void;
+}
+/**
+ * @hidden
+ */
+export interface ColumnDraggableMethods extends Vue2type {
+    onPress: (event: any) => void;
+    onDrag: (event: any) => void;
+    onRelease: (event: any) => void;
+}
+/**
+ * @hidden
+ */
+export interface ColumnDraggableState {
+    element: any | null;
+    draggable: any;
+}
+/**
+ * @hidden
+ */
+export interface ColumnDraggableAll extends ColumnDraggableMethods, ColumnDraggableState {
+}
+/**
+ * @hidden
+ */
+declare let ColumnDraggableVue2: ComponentOptions<Vue2type, DefaultData<{}>, DefaultMethods<ColumnDraggableAll>, {}, RecordPropsDefinition<ColumnDraggableProps>>;
+/**
+ * @hidden
+ */
+declare const ColumnDraggable: DefineComponent<ColumnDraggableProps, any, {}, {}, ColumnDraggableMethods, {}, {}, {}, string, ColumnDraggableProps, ColumnDraggableProps, {}>;
+export { ColumnDraggable, ColumnDraggableVue2 };

package/dist/esm/drag/ColumnDraggable.js

@@ -0,0 +1,73 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+import { getDefaultSlots, Draggable } from '@progress/kendo-vue-common';
+/**
+ * @hidden
+ */
+
+var ColumnDraggableVue2 = {
+  mounted: function mounted() {
+    if (this.$el) {
+      this.draggable = this.$refs.draggable;
+    }
+  },
+  methods: {
+    onPress: function onPress(event) {
+      var element = this.draggable && this.draggable.element;
+
+      if (element) {
+        this.$emit('pressHandler', event, element);
+      }
+    },
+    onDrag: function onDrag(event) {
+      var element = this.draggable && this.draggable.element;
+
+      if (element) {
+        this.$emit('dragHandler', event, element);
+      }
+    },
+    onRelease: function onRelease(event) {
+      var element = this.draggable && this.draggable.element;
+
+      if (element) {
+        this.$emit('releaseHandler', event, element);
+      }
+    }
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var h = gh || createElement;
+    var defaultSlot = getDefaultSlots(this);
+    return (// @ts-ignore  function children
+      h(Draggable, {
+        onPress: this.onPress,
+        on: this.v3 ? undefined : {
+          "press": this.onPress,
+          "drag": this.onDrag,
+          "release": this.onRelease
+        },
+        onDrag: this.onDrag,
+        onRelease: this.onRelease,
+        ref: 'draggable'
+      }, this.v3 ? function () {
+        return [h("tr", [defaultSlot])];
+      } : [h("tr", [defaultSlot])])
+    );
+  }
+};
+/**
+ * @hidden
+ */
+
+var ColumnDraggable = ColumnDraggableVue2;
+export { ColumnDraggable, ColumnDraggableVue2 };

package/dist/esm/drag/ColumnResize.d.ts

@@ -0,0 +1,31 @@
+import { ExtendedColumnProps } from '../interfaces/ExtendedColumnProps';
+/**
+ * @hidden
+ */
+export declare class ColumnResize {
+    /**
+     * The main `colgroup` of the Grid.
+     */
+    colGroupMain: any | null;
+    /**
+     * The header `colgroup` of the Grid, if any.
+     */
+    colGroupHeader: any | null;
+    /**
+     * The footer `colgroup` of the Grid (if any).
+     */
+    colGroupFooter: any | null;
+    columns: ExtendedColumnProps[];
+    /**
+     * The settings for resizing the Grid.
+     */
+    resizable: boolean;
+    onResize: (index: number, newWidth: number, oldWidth: number, originalEvent: any, end: boolean) => void;
+    private isRtl;
+    constructor(triggerResize: (index: number, newWidth: number, oldWidth: number, originalEvent: any, end: boolean) => void);
+    setIsRtl: (isRtl: boolean) => void;
+    dragHandler(event: any, column: ExtendedColumnProps, dragCue: HTMLSpanElement, end: boolean): void;
+    private fixateInitialWidths;
+    private setWidths;
+    private updateColElements;
+}

package/dist/esm/drag/ColumnResize.js

@@ -0,0 +1,126 @@
+/**
+ * @hidden
+ */
+var ColumnResize = /** @class */ (function () {
+    function ColumnResize(triggerResize) {
+        var _this = this;
+        /**
+         * The settings for resizing the Grid.
+         */
+        this.resizable = false;
+        this.isRtl = false;
+        this.setIsRtl = function (isRtl) {
+            _this.isRtl = isRtl;
+        };
+        this.onResize = triggerResize;
+        this.dragHandler = this.dragHandler.bind(this);
+    }
+    ColumnResize.prototype.dragHandler = function (event, column, dragCue, end) {
+        var e = event.originalEvent;
+        if (!end) {
+            e.preventDefault();
+            e.stopPropagation();
+            e.stopImmediatePropagation();
+        }
+        var tdElement = dragCue.parentElement;
+        if (!tdElement || !tdElement.parentElement) {
+            return;
+        }
+        var oldWidth = tdElement.clientWidth;
+        var newWidth;
+        if (this.isRtl) {
+            newWidth = (dragCue.getBoundingClientRect().right - (dragCue.offsetWidth / 2)) - event.clientX;
+            newWidth += oldWidth;
+        }
+        else {
+            newWidth = oldWidth + event.clientX - dragCue.getBoundingClientRect().left - (dragCue.offsetWidth / 2);
+        }
+        if (!end && Math.abs(newWidth - oldWidth) < 1) {
+            return;
+        }
+        this.fixateInitialWidths(tdElement.parentElement.clientWidth);
+        this.setWidths(column, Math.floor(newWidth) / oldWidth);
+        var index = this.columns.filter(function (c) { return !c.children.length; }).indexOf(column);
+        this.onResize(index, oldWidth, newWidth, e, end);
+    };
+    ColumnResize.prototype.fixateInitialWidths = function (width) {
+        var columns = this.columns.filter(function (c) { return !c.children.length; });
+        var remainingCount = 0;
+        var cols = this.colGroupMain ? this.colGroupMain.children : [];
+        for (var i = 0; i < cols.length; i++) {
+            if (cols[i].width) {
+                width -= parseFloat(cols[i].width);
+            }
+            else {
+                remainingCount++;
+            }
+        }
+        if (remainingCount === 0) {
+            return;
+        }
+        var perCol = Math.floor(width / remainingCount);
+        for (var i = 0; i < cols.length; i++) {
+            var col = cols[i];
+            if (!col.width) {
+                col.width = perCol;
+                columns[i].width = perCol.toString();
+                if (this.colGroupHeader) {
+                    this.colGroupHeader.children[i].width = perCol;
+                }
+                if (this.colGroupFooter) {
+                    this.colGroupFooter.children[i].width = perCol;
+                }
+            }
+        }
+    };
+    ColumnResize.prototype.setWidths = function (column, coef) {
+        var indexInOriginal = this.columns.indexOf(column);
+        var toAdjust = [];
+        var more = column.children.length;
+        for (var i = indexInOriginal + 1; more > 0 && i < this.columns.length; i++, more--) {
+            var cc = this.columns[i];
+            if (!cc.children.length) {
+                toAdjust.push(cc);
+            }
+            else {
+                more += cc.children.length;
+            }
+        }
+        if (toAdjust.length === 0) {
+            toAdjust.push(column);
+        }
+        toAdjust.forEach(function (colToAdjust) {
+            var targetWidth = colToAdjust.width ? parseFloat(colToAdjust.width.toString()) * coef : 0;
+            var min = colToAdjust.minResizableWidth === undefined ? 10 : colToAdjust.minResizableWidth;
+            if (targetWidth < min) {
+                targetWidth = min;
+            }
+            colToAdjust.width = targetWidth;
+        });
+        this.updateColElements(toAdjust);
+    };
+    ColumnResize.prototype.updateColElements = function (affectedColumns) {
+        var columns = this.columns.filter(function (c) { return !c.children.length; });
+        var difference = 1e-10;
+        for (var i = 0; i < affectedColumns.length; i++) {
+            var colIndex = columns.indexOf(affectedColumns[i]);
+            var currentColumnFloatWidth = parseFloat((affectedColumns[i].width || 0).toString());
+            difference += currentColumnFloatWidth - Math.floor(currentColumnFloatWidth);
+            var currentWidth = Math.floor(currentColumnFloatWidth) + Math.floor(difference);
+            difference -= Math.floor(difference);
+            if (this.colGroupMain) {
+                this.colGroupMain.children[colIndex].width = currentWidth + 'px';
+            }
+            if (this.colGroupHeader) {
+                // static headers
+                this.colGroupHeader.children[colIndex].width = currentWidth + 'px';
+            }
+            if (this.colGroupFooter && this.colGroupFooter.children[colIndex]) {
+                // static footers
+                this.colGroupFooter.children[colIndex].width = currentWidth + 'px';
+            }
+        }
+    };
+    return ColumnResize;
+}());
+export { ColumnResize };

package/dist/esm/drag/ColumnResizer.d.ts

@@ -0,0 +1,40 @@
+import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
+declare type DefaultData<V> = object | ((this: V) => {});
+declare type DefaultMethods<V> = {
+    [key: string]: (this: V, ...args: any[]) => any;
+};
+/**
+ * @hidden
+ */
+export interface ColumnResizerProps {
+    key?: number;
+    resize: (event: any, dragCue: Element, end: boolean) => void;
+}
+/**
+ * @hidden
+ */
+export interface ColumnResizerMethods extends Vue2type {
+    drag: (event: any) => void;
+    release: (event: any) => void;
+}
+/**
+ * @hidden
+ */
+export interface ColumnResizerState {
+    element: any | null;
+    draggable: any;
+}
+/**
+ * @hidden
+ */
+export interface ColumnResizerAll extends ColumnResizerMethods, ColumnResizerState {
+}
+/**
+ * @hidden
+ */
+declare let ColumnResizerVue2: ComponentOptions<Vue2type, DefaultData<{}>, DefaultMethods<ColumnResizerAll>, {}, RecordPropsDefinition<ColumnResizerProps>>;
+/**
+ * @hidden
+ */
+declare const ColumnResizer: DefineComponent<ColumnResizerProps, any, {}, {}, ColumnResizerMethods, {}, {}, {}, string, ColumnResizerProps, ColumnResizerProps, {}>;
+export { ColumnResizer, ColumnResizerVue2 };

package/dist/esm/drag/ColumnResizer.js

@@ -0,0 +1,89 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+import { Draggable } from '@progress/kendo-vue-common';
+/**
+ * @hidden
+ */
+
+var ColumnResizerVue2 = {
+  mounted: function mounted() {
+    if (this.$el) {
+      this.draggable = this.$refs.draggable;
+    }
+  },
+  methods: {
+    drag: function drag(event) {
+      var element = this.draggable && this.draggable.element;
+
+      if (element) {
+        this.$emit('resize', event, element, false);
+      }
+    },
+    release: function release(event) {
+      var element = this.draggable && this.draggable.element;
+
+      if (element) {
+        this.$emit('resize', event, element, true);
+      }
+    }
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var _this = this;
+
+    var h = gh || createElement;
+    var resizeStyle = {
+      // TODO: move to theme
+      cursor: 'col-resize',
+      display: 'block',
+      height: '1000%',
+      position: 'absolute',
+      // [this.props.isRtl ? 'left' : 'right']: 0,
+      top: 0,
+      width: '.5em'
+    };
+    return (// @ts-ignore  function children
+      h(Draggable, {
+        onDrag: this.drag,
+        on: this.v3 ? undefined : {
+          "drag": this.drag,
+          "release": this.release
+        },
+        onRelease: this.release,
+        ref: 'draggable'
+      }, this.v3 ? function () {
+        return [h("span", {
+          "class": "k-column-resizer",
+          draggable: false,
+          attrs: _this.v3 ? undefined : {
+            draggable: false
+          },
+          style: resizeStyle
+        })];
+      } : [h("span", {
+        "class": "k-column-resizer",
+        draggable: false,
+        attrs: _this.v3 ? undefined : {
+          draggable: false
+        },
+        style: resizeStyle
+      })])
+    );
+  }
+};
+/**
+ * @hidden
+ */
+
+var ColumnResizer = ColumnResizerVue2;
+export { ColumnResizer, ColumnResizerVue2 };

package/dist/esm/drag/CommonDragLogic.d.ts

@@ -0,0 +1,35 @@
+import { ExtendedColumnProps } from '../interfaces/ExtendedColumnProps';
+/**
+ * @hidden
+ */
+export declare type handler = (prevIndex: number, nextIndex: number, event: any) => void;
+/**
+ * @hidden
+ */
+export declare class CommonDragLogic {
+    columns: ExtendedColumnProps[];
+    reorderable: boolean;
+    groupable: boolean;
+    dropElementClue: any | null;
+    dragElementClue: any | null;
+    private startColumn;
+    private startGroup;
+    private currentColumn;
+    private currentGroup;
+    private columnReorder;
+    private groupReorder;
+    private columnToGroup;
+    private groupPanelDivElement;
+    constructor(columnReorder: handler, groupReorder: handler, columnToGroup: handler);
+    refGroupPanelDiv: (e: any | null) => void;
+    refDropElementClue: (e: any | null) => void;
+    refDragElementClue: (e: any | null) => void;
+    pressHandler: (event: any, element: HTMLElement) => void;
+    dragHandler: (event: any, element: HTMLElement) => void;
+    releaseHandler: (event: any) => void;
+    private getColumnIndex;
+    private getGroupIndex;
+    private isValid;
+    private updateDragElementClue;
+    private updateDropElementClue;
+}

package/dist/esm/drag/CommonDragLogic.js

@@ -0,0 +1,177 @@
+import { getIndex } from '../utils.js';
+import { canUseDOM } from '@progress/kendo-vue-common';
+/**
+ * @hidden
+ */
+var CommonDragLogic = /** @class */ (function () {
+    function CommonDragLogic(columnReorder, groupReorder, columnToGroup) {
+        var _this = this;
+        this.reorderable = false;
+        this.groupable = false;
+        this.dropElementClue = null;
+        this.dragElementClue = null;
+        this.startColumn = -1;
+        this.startGroup = -1;
+        this.currentColumn = -1;
+        this.currentGroup = -1;
+        this.groupPanelDivElement = null;
+        this.refGroupPanelDiv = function (e) {
+            _this.groupPanelDivElement = e;
+        };
+        this.refDropElementClue = function (e) {
+            _this.dropElementClue = e;
+            if (_this.dropElementClue && canUseDOM) {
+                document.body.appendChild(_this.dropElementClue.$el);
+            }
+        };
+        this.refDragElementClue = function (e) {
+            _this.dragElementClue = e;
+            if (_this.dragElementClue && canUseDOM) {
+                document.body.appendChild(_this.dragElementClue.$el);
+            }
+        };
+        this.pressHandler = function (event, element) {
+            if (!event.isTouch) {
+                event.originalEvent.preventDefault();
+            }
+            var startColumn = _this.getColumnIndex(event, element);
+            _this.startGroup = _this.getGroupIndex(event);
+            if (startColumn >= 0) {
+                var col = _this.columns[startColumn];
+                if (col.reorderable && _this.reorderable || col.groupable && _this.groupable) {
+                    _this.startColumn = startColumn;
+                }
+            }
+        };
+        this.dragHandler = function (event, element) {
+            if (!event.isTouch) {
+                event.originalEvent.preventDefault();
+            }
+            event.originalEvent.stopPropagation();
+            if (_this.startColumn === -1 && _this.startGroup === -1) {
+                return;
+            }
+            _this.currentColumn = _this.getColumnIndex(event, element);
+            _this.currentGroup = _this.getGroupIndex(event);
+            if (_this.groupPanelDivElement && _this.startGroup >= 0) {
+                _this.currentGroup = Math.min(_this.currentGroup, _this.groupPanelDivElement.children.length - 2);
+            }
+            var invalidIndex = !_this.isValid();
+            if (invalidIndex) {
+                _this.currentColumn = -1;
+                _this.currentGroup = -1;
+            }
+            var targetElement = (_this.currentColumn >= 0) ?
+                element.children[_this.columns[_this.currentColumn].index] :
+                _this.groupPanelDivElement && _this.groupPanelDivElement.children[_this.currentGroup];
+            _this.updateDragElementClue(event, element, targetElement, invalidIndex);
+            _this.updateDropElementClue(event, element, targetElement, invalidIndex);
+        };
+        this.releaseHandler = function (event) {
+            var prevColumnIndex = _this.startColumn;
+            var nextColumnIndex = _this.currentColumn;
+            var prevGroupIndex = _this.startGroup;
+            var nextGroupIndex = _this.currentGroup;
+            if (_this.dropElementClue) {
+                _this.dropElementClue.visible = false;
+            }
+            if (_this.dragElementClue) {
+                _this.dragElementClue.visible = false;
+            }
+            var isValid = _this.isValid();
+            _this.startColumn = _this.startGroup = _this.currentColumn = _this.currentGroup = -1;
+            if (!isValid) {
+                return;
+            }
+            if (prevColumnIndex >= 0 && nextColumnIndex >= 0) {
+                _this.columnReorder(prevColumnIndex, nextColumnIndex, event.originalEvent);
+            }
+            else if (prevGroupIndex >= 0 && nextGroupIndex >= 0) {
+                _this.groupReorder(prevGroupIndex, nextGroupIndex, event.originalEvent);
+            }
+            else if (prevColumnIndex >= 0 && nextGroupIndex >= 0) {
+                _this.columnToGroup(prevColumnIndex, nextGroupIndex, event.originalEvent);
+            }
+        };
+        this.columnReorder = columnReorder;
+        this.groupReorder = groupReorder;
+        this.columnToGroup = columnToGroup;
+    }
+    CommonDragLogic.prototype.getColumnIndex = function (event, parent) {
+        if (!parent || (parent.parentElement === this.groupPanelDivElement)) {
+            return -1;
+        }
+        var index = getIndex(event, parent);
+        if (index === -1) {
+            return -1;
+        }
+        var _loop_1 = function (i) {
+            if (parent.parentNode.children[i] === parent) {
+                return { value: this_1.columns.findIndex(function (c) { return ((c.index === index) && (c.depth === i)); }) };
+            }
+        };
+        var this_1 = this;
+        for (var i = 0; i < parent.parentNode.children.length; i++) {
+            var state_1 = _loop_1(i);
+            if (typeof state_1 === "object")
+                return state_1.value;
+        }
+        return -1;
+    };
+    CommonDragLogic.prototype.getGroupIndex = function (event) {
+        return getIndex(event, this.groupPanelDivElement);
+    };
+    CommonDragLogic.prototype.isValid = function () {
+        if (this.startGroup >= 0) {
+            // group can be moved into group only
+            return this.currentGroup >= 0 && this.currentGroup !== this.startGroup;
+        }
+        if (this.startColumn === -1) {
+            return false;
+        }
+        if (this.currentGroup >= 0) {
+            // column to group is possible
+            return this.columns[this.startColumn].groupable === true && this.groupable === true;
+        }
+        // reorder is possible
+        return this.reorderable === true &&
+            this.currentColumn >= 0 &&
+            this.currentColumn !== this.startColumn &&
+            this.columns[this.startColumn].reorderable === true &&
+            this.columns[this.currentColumn].parentIndex === this.columns[this.startColumn].parentIndex;
+    };
+    CommonDragLogic.prototype.updateDragElementClue = function (event, element, targetElement, invalidIndex) {
+        if (!this.dragElementClue) {
+            return;
+        }
+        var innerText = this.startColumn >= 0 ?
+            element.children[this.columns[this.startColumn].index].innerText :
+            element.innerText;
+        this.dragElementClue.visible = true;
+        this.dragElementClue.top = (event.pageY + 10);
+        this.dragElementClue.left = event.pageX;
+        this.dragElementClue.innerText = innerText;
+        this.dragElementClue.status = (invalidIndex || !targetElement) ? 'k-i-cancel' : 'k-i-add';
+    };
+    CommonDragLogic.prototype.updateDropElementClue = function (event, element, targetElement, invalidIndex) {
+        if (!this.dropElementClue) {
+            return;
+        }
+        if (invalidIndex || !targetElement) {
+            this.dropElementClue.visible = false;
+            return;
+        }
+        var rect = targetElement.getBoundingClientRect();
+        var left = rect.left + event.pageX - event.clientX - 6;
+        if (this.currentColumn > this.startColumn || this.currentGroup > this.startGroup && this.startGroup !== -1) {
+            left += rect.width;
+        }
+        var top = rect.top + event.pageY - event.clientY;
+        this.dropElementClue.visible = true;
+        this.dropElementClue.top = top;
+        this.dropElementClue.left = left;
+        this.dropElementClue.height = (this.currentColumn >= 0) ? element.clientHeight : rect.height;
+    };
+    return CommonDragLogic;
+}());
+export { CommonDragLogic };

package/dist/esm/drag/DragClue.d.ts

@@ -0,0 +1,25 @@
+import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
+declare type DefaultData<V> = object | ((this: V) => DragClueData);
+declare type DefaultMethods<V> = {
+    [key: string]: (this: V, ...args: any[]) => any;
+};
+/**
+ * @hidden
+ */
+export interface DragClueData extends Vue2type {
+    ref?: string;
+    visible?: boolean;
+    top?: number;
+    left?: number;
+    innerText?: string;
+    status?: 'k-i-cancel' | 'k-i-add';
+}
+/**
+ * @hidden
+ */
+declare let DragClueVue2: ComponentOptions<Vue2type, DefaultData<DragClueData>, DefaultMethods<{}>, {}, RecordPropsDefinition<{}>>;
+/**
+ * @hidden
+ */
+declare const DragClue: DefineComponent<{}, any, DragClueData, {}, {}, {}, {}, {}, string, {}, {}, {}>;
+export { DragClue, DragClueVue2 };

package/dist/esm/drag/DragClue.js

@@ -0,0 +1,52 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+/**
+ * @hidden
+ */
+
+var DragClueVue2 = {
+  data: function data() {
+    return {
+      visible: false,
+      top: 0,
+      left: 0,
+      innerText: '',
+      status: 'k-i-cancel'
+    };
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var h = gh || createElement;
+    return this.visible && h("div", {
+      "class": "k-header k-drag-clue",
+      style: {
+        display: 'block',
+        position: 'absolute',
+        zIndex: 20000,
+        padding: '8px 12px',
+        top: this.top + 'px',
+        left: this.left + 'px'
+      }
+    }, [h("span", {
+      "class": 'k-icon k-drag-status ' + this.status + ' k-icon-with-modifier'
+    }, [h("span", {
+      "class": "k-icon k-icon-modifier"
+    })]), this.innerText]);
+  }
+};
+/**
+ * @hidden
+ */
+
+var DragClue = DragClueVue2;
+export { DragClue, DragClueVue2 };