@progress/kendo-vue-treelist 3.6.4 → 3.7.0-dev.202210250731

package/dist/esm/rows/TreeListDraggableRow.js

@@ -1,123 +1,175 @@
-// import { Draggable, canUseDOM } from '@progress/kendo-vue-common';
-// import { TreeListRow } from './TreeListRow.js';
-// import { TreeListRowProps } from '../interfaces/TreeListRowProps.js';
-// function targetRowIndex(event: any, parent: (Node & ParentNode) | null, currentDocument: Document) {
-//     if (!event.originalEvent) {
-//         return -1;
-//     }
-//     let row = targetElement<HTMLTableRowElement>(event, 'tr', currentDocument);
-//     if (row) {
-//         const rows = parent ? parent.childNodes : [];
-//         for (let i = 0; i < rows.length; i++) {
-//             if (rows[i] === row) {
-//                 return i;
-//             }
-//         }
-//     }
-//     return -1;
-// }
-// function targetElement<T extends Element>(event: any, closest: string, currentDocument: Document): T | null {
-//     let target: Element | null = currentDocument 
-// ? currentDocument.elementFromPoint(event.clientX, event.originalEvent.clientY)
-// : null;
-//     return ((closest && target) ? target.closest(closest) : null) as T | null;
-// }
-// const treelist = '.k-widget.k-grid';
-// interface TreeListRowState {
-//     clueProps: RowDragClueProps;
-// }
-// const defaultClueState: RowDragClueProps = {
-//     visible: false,
-//     top: 0,
-//     left: 0,
-//     text: '',
-//     allowDrop: false
-// };
-// /**
-//  * The TreeList draggable row component.
-//  */
-// export class TreeListDraggableRow extends Component<TreeListRowProps, TreeListRowState> {
-//     /**
-//      * @hidden
-//      */
-//     readonly state: TreeListRowState = {
-//         clueProps: { ...defaultClueState }
-//     };
-//     private draggable = createRef<Draggable>();
-//     private dragged: number[] | null = null;
-//     private draggedOver: number[] | null = null;
-//     /**
-//      * @hidden
-//      */
-//     render() {
-//         const { clueProps } = this.state;
-//         return (
-//           <>
-//             <Draggable
-//               ref={this.draggable}
-//               onPress={this.onPress}
-//               onDrag={this.onDrag}
-//               onRelease={this.onRelease}
-//                 >
-//               <TreeListRow {...this.props} />
-//             </Draggable>
-//             <RowDragClue {...clueProps} />
-//           </>
-//         );
-//     }
-//     private onPress = () => this.dragged = this.props.level;
-//     private onDrag = (args) => {
-//         if (!canUseDOM){ return; }
-//         const element = this.draggable.current && this.draggable.current.element;
-//         const ownerDocument = element ? element.ownerDocument : document;
-//         if (!ownerDocument) { return; }
-//         const event = args.event;
-//         const dragged = this.dragged;
-//         if (element && dragged) {
-//             if (!event.isTouch) {
-//                 event.originalEvent.preventDefault();
-//             }
-//             const hovered = this.props.levels[targetRowIndex(event, element.parentNode, ownerDocument)];
-//             this.draggedOver = hovered;
-//             const allowDrop = hovered ?
-//                 !dragged.every((num, i) => num === hovered[i]) :
-//                 Boolean(targetElement(event, treelist, ownerDocument));
-//             this.setState({
-//                 clueProps: {
-//                     visible: true,
-//                     top: (event.pageY + 10),
-//                     left: event.pageX,
-//                     text: element.innerText,
-//                     allowDrop
-//                 }
-//             });
-//             if (this.props.onDrag) {
-//                 this.props.onDrag.call(undefined, {
-//                     nativeEvent: event.originalEvent,
-//                     dragged,
-//                     draggedOver: hovered,
-//                     draggedItem: this.props.dataItem
-//                 });
-//             }
-//         }
-//     };
-//     private onRelease = (args) => {
-//         const event = args.event;
-//         if (this.dragged) {
-//             const dragged = [...this.dragged];
-//             const draggedOver = this.draggedOver && [...this.draggedOver];
-//             const allowDrop = this.state.clueProps.allowDrop;
-//             this.dragged = null;
-//             this.draggedOver = null;
-//             this.setState({ clueProps: { ...defaultClueState } });
-//             const draggedItem = this.props.dataItem;
-//             if (allowDrop && this.props.onDrop) {
-//                 this.props.onDrop.call(undefined, {
-//                     nativeEvent: event.originalEvent,
-//                     dragged, draggedOver,
-//                     draggedItem
-//                 });
-//             }
-//         }
-//     };
-// }
+var __assign = this && this.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) {
+        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+var __spreadArray = this && this.__spreadArray || function (to, from, pack) {
+  if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+    if (ar || !(i in from)) {
+      if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+      ar[i] = from[i];
+    }
+  }
+  return to.concat(ar || Array.prototype.slice.call(from));
+};
+// @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, canUseDOM } from '@progress/kendo-vue-common';
+import { TreeListRow } from './TreeListRow.js';
+function targetRowIndex(event, parent, currentDocument) {
+  if (!event.originalEvent) {
+    return -1;
+  }
+  var row = targetElement(event, 'tr', currentDocument);
+  if (row) {
+    var rows = parent ? parent.children : [];
+    for (var i = 0; i < rows.length; i++) {
+      if (rows[i] === row) {
+        return i;
+      }
+    }
+  }
+  return -1;
+}
+function targetElement(event, closest, currentDocument) {
+  var target = currentDocument ? currentDocument.elementFromPoint(event.clientX, event.originalEvent.clientY) : null;
+  return closest && target ? target.closest(closest) : null;
+}
+var treelist = '.k-widget.k-grid';
+/**
+ * @hidden
+ */
+var TreeListDraggableRowVue2 = {
+  props: __assign(__assign({}, TreeListRow.props), {
+    clueProps: {
+      type: Object,
+      default: function _default() {
+        return {};
+      }
+    }
+  }),
+  // @ts-ignore
+  emits: {
+    press: null,
+    drag: null,
+    drop: null
+  },
+  created: function created() {
+    this.allowDrop = false;
+    this.dragged = null;
+    this.draggedOver = null;
+  },
+  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.dragged = this.$props.level;
+        this.$emit('press', event, element);
+      }
+    },
+    onDrag: function onDrag(event) {
+      var element = this.draggable && this.draggable.element;
+      if (!canUseDOM) {
+        return;
+      }
+      var ownerDocument = element ? element.ownerDocument : document;
+      if (!ownerDocument) {
+        return;
+      }
+      var dragged = this.dragged;
+      if (element && dragged) {
+        if (!event.isTouch) {
+          event.originalEvent.preventDefault();
+        }
+        var hovered_1 = this.$props.levels[targetRowIndex(event, element.parentNode, ownerDocument)];
+        this.draggedOver = hovered_1;
+        this.allowDrop = hovered_1 ? !dragged.every(function (num, i) {
+          return num === hovered_1[i];
+        }) : Boolean(targetElement(event, treelist, ownerDocument));
+        this.$emit('drag', {
+          nativeEvent: event.originalEvent,
+          dragged: dragged,
+          draggedOver: hovered_1,
+          draggedItem: this.$props.dataItem,
+          clueProps: {
+            visible: true,
+            top: event.pageY + 10,
+            left: event.pageX,
+            text: element.innerText,
+            allowDrop: this.allowDrop
+          }
+        });
+      }
+    },
+    onRelease: function onRelease(event) {
+      var element = this.draggable && this.draggable.element;
+      if (element) {
+        if (this.dragged) {
+          var dragged = __spreadArray([], this.dragged, true);
+          var draggedOver = this.draggedOver && __spreadArray([], this.draggedOver, true);
+          this.dragged = null;
+          this.draggedOver = null;
+          var draggedItem = this.$props.dataItem;
+          this.$emit('drop', {
+            nativeEvent: event.originalEvent,
+            dragged: dragged,
+            draggedOver: draggedOver,
+            draggedItem: draggedItem,
+            clueProps: {
+              allowDrop: this.allowDrop
+            }
+          });
+          this.allowDrop = false;
+        }
+      }
+    }
+  },
+  // @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 [defaultSlot];
+      } : [defaultSlot])
+    );
+  }
+};
+/**
+ * @hidden
+ */
+var TreeListDraggableRow = TreeListDraggableRowVue2;
+export { TreeListDraggableRow, TreeListDraggableRowVue2 };

package/dist/esm/rows/TreeListRow.js

@@ -7,14 +7,17 @@ import { getTemplate, getDefaultSlots } from '@progress/kendo-vue-common';
 /**
  * @hidden
  */
-
 var TreeListRowVue2 = {
   name: 'KendoTreeListRow',
   // @ts-ignore
   emits: {
-    'rowclick': null,
-    'rowdblclick': null,
-    'contextmenu': null
+    'click': null,
+    'dblclick': null,
+    'contextmenu': null,
+    'focus': null,
+    'blur': null,
+    'mousedown': null,
+    'mouseup': null
   },
   props: {
     level: Array,
@@ -35,8 +38,8 @@ var TreeListRowVue2 = {
   computed: {
     wrapperClass: function wrapperClass() {
       var _a = this.$props,
-          isSelected = _a.isSelected,
-          isAltRow = _a.isAltRow;
+        isSelected = _a.isSelected,
+        isAltRow = _a.isAltRow;
       return {
         'k-master-row': true,
         'k-selected': isSelected,
@@ -47,13 +50,25 @@ var TreeListRowVue2 = {
   },
   methods: {
     handleClick: function handleClick(e) {
-      this.$emit('rowclick', e);
+      this.$emit('click', e);
     },
     handleDoubleClick: function handleDoubleClick(e) {
-      this.$emit('rowdblclick', e);
+      this.$emit('dblclick', e);
     },
     handleContextMenu: function handleContextMenu(e) {
       this.$emit('contextmenu', e);
+    },
+    handleFocus: function handleFocus(e) {
+      this.$emit('focus', e);
+    },
+    handleBlur: function handleBlur(e) {
+      this.$emit('blur', e);
+    },
+    handleMousedown: function handleMousedown(e) {
+      this.$emit('mousedown', e);
+    },
+    handleMouseup: function handleMouseup(e) {
+      this.$emit('mouseup', e);
     }
   },
   // @ts-ignore
@@ -68,22 +83,30 @@ var TreeListRowVue2 = {
     var h = gh || createElement;
     var defaultSlot = getDefaultSlots(this);
     var _a = this.$props,
-        rowHeight = _a.rowHeight,
-        expanded = _a.expanded,
-        ariaRowIndex = _a.ariaRowIndex,
-        level = _a.level,
-        ariaSetSize = _a.ariaSetSize,
-        ariaPosInSet = _a.ariaPosInSet,
-        rowIndex = _a.rowIndex;
+      rowHeight = _a.rowHeight,
+      expanded = _a.expanded,
+      ariaRowIndex = _a.ariaRowIndex,
+      level = _a.level,
+      ariaSetSize = _a.ariaSetSize,
+      ariaPosInSet = _a.ariaPosInSet,
+      rowIndex = _a.rowIndex;
     var defaultRendering = h("tr", {
       onClick: this.handleClick,
       on: this.v3 ? undefined : {
         "click": this.handleClick,
         "dblclick": this.handleDoubleClick,
-        "contextmenu": this.handleContextMenu
+        "contextmenu": this.handleContextMenu,
+        "focus": this.handleFocus,
+        "blur": this.handleBlur,
+        "mousedown": this.handleMousedown,
+        "mouseup": this.handleMouseup
       },
       onDblclick: this.handleDoubleClick,
       onContextmenu: this.handleContextMenu,
+      onFocus: this.handleFocus,
+      onBlur: this.handleBlur,
+      onMousedown: this.handleMousedown,
+      onMouseup: this.handleMouseup,
       "class": this.wrapperClass,
       style: rowHeight !== undefined ? {
         height: rowHeight + 'px'
@@ -121,6 +144,5 @@ var TreeListRowVue2 = {
 /**
  * @hidden
  */
-
 var TreeListRow = TreeListRowVue2;
 export { TreeListRow, TreeListRowVue2 };