@progress/kendo-vue-layout 3.7.4-dev.202211100847 → 3.7.4-dev.202211301436

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (20) hide show
  1. package/dist/cdn/js/kendo-vue-layout.js +1 -1
  2. package/dist/es/package-metadata.js +1 -1
  3. package/dist/es/tilelayout/ResizeHandlers.d.ts +1 -1
  4. package/dist/es/tilelayout/ResizeHandlers.js +98 -42
  5. package/dist/es/tilelayout/Tile.js +187 -148
  6. package/dist/es/tilelayout/TileLayout.js +125 -99
  7. package/dist/es/tilelayout/interfaces/main.d.ts +18 -4
  8. package/dist/esm/package-metadata.js +1 -1
  9. package/dist/esm/tilelayout/ResizeHandlers.d.ts +1 -1
  10. package/dist/esm/tilelayout/ResizeHandlers.js +98 -42
  11. package/dist/esm/tilelayout/Tile.js +187 -148
  12. package/dist/esm/tilelayout/TileLayout.js +125 -99
  13. package/dist/esm/tilelayout/interfaces/main.d.ts +18 -4
  14. package/dist/npm/package-metadata.js +1 -1
  15. package/dist/npm/tilelayout/ResizeHandlers.d.ts +1 -1
  16. package/dist/npm/tilelayout/ResizeHandlers.js +98 -42
  17. package/dist/npm/tilelayout/Tile.js +186 -148
  18. package/dist/npm/tilelayout/TileLayout.js +124 -98
  19. package/dist/npm/tilelayout/interfaces/main.d.ts +18 -4
  20. package/package.json +13 -11
package/dist/es/package-metadata.js CHANGED
@@ -5,7 +5,7 @@ export var packageMetadata = {
5
5
  name: '@progress/kendo-vue-layout',
6
6
  productName: 'Kendo UI for Vue',
7
7
  productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
8
- publishDate: 1668069369,
8
+ publishDate: 1669818334,
9
9
  version: '',
10
10
  licensingDocsUrl: 'https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning'
11
11
  };
package/dist/es/tilelayout/ResizeHandlers.d.ts CHANGED
@@ -7,7 +7,7 @@ import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } fr
7
7
  * @hidden
8
8
  */
9
9
  export interface ResizeHandlersProps {
10
- resizable: string | boolean;
10
+ direction: string;
11
11
  onResize?: (e: any, args: {
12
12
  end: boolean;
13
13
  direction: any;
package/dist/es/tilelayout/ResizeHandlers.js CHANGED
@@ -1,17 +1,78 @@
1
+ var __assign = this && this.__assign || function () {
2
+ __assign = Object.assign || function (t) {
3
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
4
+ s = arguments[i];
5
+ for (var p in s) {
6
+ if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
7
+ }
8
+ }
9
+ return t;
10
+ };
11
+ return __assign.apply(this, arguments);
12
+ };
1
13
  // @ts-ignore
2
14
  import * as Vue from 'vue';
3
15
  var allVue = Vue;
4
16
  var gh = allVue.h;
5
17
  var isV3 = allVue.version && allVue.version[0] === '3';
18
+ import { Draggable } from '@progress/kendo-vue-common';
6
19
  /**
7
20
  * @hidden
8
21
  */
9
22
  var ResizeHandlersVue2 = {
10
23
  name: 'KendoResizeHandlers',
11
24
  props: {
12
- resizable: [String, Boolean],
25
+ direction: String,
13
26
  rtl: Boolean
14
27
  },
28
+ computed: {
29
+ handleClass: function handleClass() {
30
+ return 'k-resize-handle k-cursor-' + this.direction + '-resize';
31
+ },
32
+ dirStyles: function dirStyles() {
33
+ var direction = this.$props.direction;
34
+ switch (direction) {
35
+ case 'ew':
36
+ return this.rtl ? {
37
+ top: 0,
38
+ width: '9px',
39
+ left: 0,
40
+ right: ''
41
+ } : {
42
+ top: 0,
43
+ width: '9px',
44
+ right: 0,
45
+ left: ''
46
+ };
47
+ case 'ns':
48
+ return {
49
+ left: 0,
50
+ height: '9px'
51
+ };
52
+ case 'nesw':
53
+ case 'nwse':
54
+ return this.rtl ? {
55
+ width: '9px',
56
+ height: '9px',
57
+ right: '',
58
+ left: 0
59
+ } : {
60
+ width: '9px',
61
+ height: '9px',
62
+ right: 0,
63
+ left: ''
64
+ };
65
+ default:
66
+ return {};
67
+ }
68
+ },
69
+ handleStyle: function handleStyle() {
70
+ return __assign({
71
+ bottom: 0,
72
+ right: 0
73
+ }, this.dirStyles);
74
+ }
75
+ },
15
76
  // @ts-ignore
16
77
  setup: !isV3 ? undefined : function () {
17
78
  var v3 = !!isV3;
@@ -20,55 +81,50 @@ var ResizeHandlersVue2 = {
20
81
  };
21
82
  },
22
83
  render: function render(createElement) {
84
+ var _this2 = this;
85
+ var _this = this;
23
86
  var h = gh || createElement;
24
- var _a = this.$props,
25
- resizable = _a.resizable,
26
- onPress = _a.onPress,
27
- rtl = _a.rtl;
28
- if (!resizable) {
29
- return null;
30
- }
31
- // const Handle = (props: { onResize: any; style: {}; d: string; onPress: any }) => (
32
- // // @ts-ignore
33
- // <Draggable
34
- // onPress={props.onPress}
35
- // onDrag={(data: any) => { props.onResize(data.event, false, props.d); }}
36
- // onRelease={(data: any) => { props.onResize(data.event, true, props.d); }}
37
- // >
38
- // <div className={'k-resize-handle k-cursor-' + props.d + '-resize'}
39
- // style={{ bottom: 0, right: 0, ...props.style }} />
40
- // </Draggable>
41
- // );
42
- return h("div")
43
- // <React.Fragment>
44
- // {resizable !== 'vertical' && (
45
- // <Handle
46
- // onPress={onPress}
47
- // onResize={this.handleResize}
48
- // d="ew"
49
- // style={rtl ? { top: 0, width: 9, left: 0, right: '' } : { top: 0, width: 9, right: 0, left: '' }}
50
- // />
51
- // )}
52
- // {resizable !== 'horizontal' && (
53
- // <Handle onPress={onPress} onResize={this.handleResize} d="ns" style={{ left: 0, height: 9 }} />)}
54
- // {(resizable === true) && (
55
- // <Handle
56
- // onPress={onPress}
57
- // onResize={this.handleResize}
58
- // d={rtl ? 'nesw' : 'nwse'}
59
- // style={rtl ? { width: 9, height: 9, right: '', left: 0 } : { width: 9, height: 9, right: 0, left: '' }}
60
- // />)}
61
- // </React.Fragment>
62
- ;
87
+ var direction = this.$props.direction;
88
+ return (
89
+ // @ts-ignore function children
90
+ h(Draggable, {
91
+ onPress: this.handlePress,
92
+ on: this.v3 ? undefined : {
93
+ "press": this.handlePress,
94
+ "drag": function drag(event) {
95
+ _this.handleResize(event, false, direction);
96
+ },
97
+ "release": function release(event) {
98
+ _this.handleResize(event, true, direction);
99
+ }
100
+ },
101
+ onDrag: function drag(event) {
102
+ _this.handleResize(event, false, direction);
103
+ },
104
+ onRelease: function release(event) {
105
+ _this.handleResize(event, true, direction);
106
+ }
107
+ }, this.v3 ? function () {
108
+ return [h("div", {
109
+ "class": _this2.handleClass,
110
+ style: _this2.handleStyle
111
+ })];
112
+ } : [h("div", {
113
+ "class": _this2.handleClass,
114
+ style: _this2.handleStyle
115
+ })])
116
+ );
63
117
  },
64
-
65
118
  methods: {
66
119
  handleResize: function handleResize(event, isEnd, direction) {
67
120
  event.originalEvent.preventDefault();
68
- this.$props.onResize(event, {
121
+ this.$emit('resize', event, {
69
122
  end: isEnd,
70
123
  direction: direction
71
124
  });
125
+ },
126
+ handlePress: function handlePress(event) {
127
+ this.$emit('press', event);
72
128
  }
73
129
  }
74
130
  };
package/dist/es/tilelayout/Tile.js CHANGED
@@ -15,7 +15,7 @@ import * as Vue from 'vue';
15
15
  var allVue = Vue;
16
16
  var gh = allVue.h;
17
17
  var isV3 = allVue.version && allVue.version[0] === '3';
18
- import { canUseDOM, classNames, Draggable, getDefaultSlots } from '@progress/kendo-vue-common';
18
+ import { canUseDOM, Draggable, getDefaultSlots } from '@progress/kendo-vue-common';
19
19
  import { ResizeHandlers } from './ResizeHandlers';
20
20
  /**
21
21
  * @hidden
@@ -28,12 +28,11 @@ var TileVue2 = {
28
28
  name: 'KendoTile',
29
29
  props: {
30
30
  defaultPosition: {
31
- type: Object,
32
31
  required: true
33
32
  },
34
33
  index: Number,
35
34
  hintStyle: Object,
36
- hintClassName: String,
35
+ hintClass: String,
37
36
  header: [String, Function, Object],
38
37
  body: [String, Function, Object],
39
38
  item: [String, Function, Object],
@@ -50,85 +49,115 @@ var TileVue2 = {
50
49
  }
51
50
  },
52
51
  created: function created() {
53
- // state = {
54
- // rtl: false
55
- // };
56
- // oldSize = {};
57
- // draggable: { element: HTMLElement | null } | null = null;
58
- // dragging = false;
59
- // resizing = false;
60
- // element: HTMLElement | null = null;
61
- // get dragElement() {
62
- // return this.draggable ? this.draggable.element : undefined;
63
- // }
64
- // ignoreDrag: boolean = false;
65
- // pressOffset = { x: 0, y: 0 };
66
- // pressXY = { x: 0, y: 0 };
67
- // currentTranslate = { x: 0, y: 0 };
68
- // preventDataOps: any = undefined;
52
+ this.oldSize = {};
53
+ this.dragging = false;
54
+ this.resizing = false;
55
+ this.ignoreDrag = false;
56
+ this.pressOffset = {
57
+ x: 0,
58
+ y: 0
59
+ };
60
+ this.pressXY = {
61
+ x: 0,
62
+ y: 0
63
+ };
64
+ this.currentTranslate = {
65
+ x: 0,
66
+ y: 0
67
+ };
68
+ this.prevDefaultPosition = this.$props.defaultPosition;
69
+ this.preventDataOps = undefined;
70
+ },
71
+ computed: {
72
+ wrapperClass: function wrapperClass() {
73
+ return {
74
+ 'k-tilelayout-item': true,
75
+ 'k-card': true,
76
+ 'k-cursor-grab': this.reorderable
77
+ };
78
+ }
79
+ },
80
+ data: function data() {
81
+ return {
82
+ rtl: false
83
+ };
69
84
  },
70
85
  mounted: function mounted() {
71
- // if (!this.element) {
72
- // return;
73
- // }
74
- // if (getComputedStyle(this.element).direction === 'rtl') {
75
- // this.setState({
76
- // rtl: true
77
- // });
78
- // }
86
+ if (!this.$el) {
87
+ return;
88
+ }
89
+ if (this.$el) {
90
+ this.draggable = this.$refs.draggable;
91
+ }
92
+ if (getComputedStyle(this.$el).direction === 'rtl') {
93
+ this.rtl = true;
94
+ }
95
+ },
96
+ watch: {
97
+ defaultPosition: function defaultPosition(_, oldValue) {
98
+ this.prevDefaultPosition = oldValue;
99
+ }
100
+ },
101
+ beforeUpdate: function beforeUpdate() {
102
+ this.oldSize = {};
103
+ var dragElement = this.dragElement();
104
+ if (dragElement) {
105
+ this.oldSize = dragElement.getBoundingClientRect();
106
+ }
107
+ return null;
79
108
  },
80
109
  updated: function updated() {
81
- // const dragElement = this.dragElement;
82
- // if (!dragElement) {
83
- // return;
84
- // }
85
- // const newBox = dragElement.getBoundingClientRect();
86
- // const oldBox = this.oldSize as any;
87
- // if (this.resizing) {
88
- // const diffCol = newBox.width - oldBox.width;
89
- // if (this.state.rtl) {
90
- // const currentM: number = parseFloat(dragElement.style.marginLeft || '0');
91
- // dragElement.style.marginLeft = (currentM - diffCol) + 'px';
92
- // } else {
93
- // const currentM: number = parseFloat(dragElement.style.marginRight || '0');
94
- // dragElement.style.marginRight = (currentM + diffCol) + 'px';
95
- // }
96
- // this.pressXY.x += this.state.rtl ? -diffCol : diffCol;
97
- // const diffRow = newBox.height - oldBox.height;
98
- // const currentBot: number = parseFloat(dragElement.style!.height!.substring(12) as any);
99
- // dragElement.style.height = `calc(100% + ${(currentBot + diffRow)}px)`;
100
- // this.pressXY.y += diffRow;
101
- // }
102
- // const deltaX = oldBox.left - newBox.left;
103
- // const deltaY = oldBox.top - newBox.top;
104
- // if (deltaX === 0 && deltaY === 0) {
105
- // return;
106
- // }
107
- // if (this.dragging) {
108
- // if ((prevProps.defaultPosition.order !== this.$props.defaultPosition.order ||
109
- // prevProps.defaultPosition.col !== this.$props.defaultPosition.col)) {
110
- // this.currentTranslate.x = 0;
111
- // this.currentTranslate.y = 0;
112
- // dragElement.style.transform = '';
113
- // }
114
- // return;
115
- // }
116
- // if (Math.abs(deltaY) < 15 && Math.abs(deltaX) < 15) {
117
- // // improves performance and removes random flickering
118
- // return;
119
- // }
120
- // requestAnimationFrame(() => {
121
- // const domNode = this.element;
122
- // if (!domNode) {
123
- // return;
124
- // }
125
- // domNode.style.transform = `translate(${deltaX}px, ${deltaY}px)`;
126
- // domNode.style.transition = 'transform 0s';
127
- // requestAnimationFrame(() => {
128
- // domNode.style.transform = '';
129
- // domNode.style.transition = `transform ${ANIMATION_DURATION}ms cubic-bezier(0.2, 0, 0, 1) 0s`;
130
- // });
131
- // });
110
+ var dragElement = this.dragElement();
111
+ if (!dragElement) {
112
+ return;
113
+ }
114
+ var newBox = dragElement.getBoundingClientRect();
115
+ var oldBox = this.oldSize;
116
+ var that = this;
117
+ if (this.resizing) {
118
+ var diffCol = newBox.width - oldBox.width;
119
+ if (this.rtl) {
120
+ var currentM = parseFloat(dragElement.style.marginLeft || '0');
121
+ dragElement.style.marginLeft = currentM - diffCol + 'px';
122
+ } else {
123
+ var currentM = parseFloat(dragElement.style.marginRight || '0');
124
+ dragElement.style.marginRight = currentM + diffCol + 'px';
125
+ }
126
+ this.pressXY.x += this.rtl ? -diffCol : diffCol;
127
+ var diffRow = newBox.height - oldBox.height;
128
+ var currentBot = parseFloat(dragElement.style.height.substring(12));
129
+ dragElement.style.height = "calc(100% + ".concat(currentBot + diffRow, "px)");
130
+ this.pressXY.y += diffRow;
131
+ }
132
+ var deltaX = oldBox.left - newBox.left;
133
+ var deltaY = oldBox.top - newBox.top;
134
+ if (deltaX === 0 && deltaY === 0) {
135
+ return;
136
+ }
137
+ if (this.dragging) {
138
+ if (this.prevDefaultPosition.order !== this.$props.defaultPosition.order || this.prevDefaultPosition.col !== this.$props.defaultPosition.col) {
139
+ this.currentTranslate.x = 0;
140
+ this.currentTranslate.y = 0;
141
+ dragElement.style.transform = '';
142
+ }
143
+ return;
144
+ }
145
+ if (Math.abs(deltaY) < 15 && Math.abs(deltaX) < 15) {
146
+ // improves performance and removes random flickering
147
+ return;
148
+ }
149
+ requestAnimationFrame(function () {
150
+ var domNode = that.$el;
151
+ if (!domNode) {
152
+ return;
153
+ }
154
+ domNode.style.transform = "translate(".concat(deltaX, "px, ").concat(deltaY, "px)");
155
+ domNode.style.transition = 'transform 0s';
156
+ requestAnimationFrame(function () {
157
+ domNode.style.transform = '';
158
+ domNode.style.transition = "transform ".concat(ANIMATION_DURATION, "ms cubic-bezier(0.2, 0, 0, 1) 0s");
159
+ });
160
+ });
132
161
  },
133
162
  // @ts-ignore
134
163
  setup: !isV3 ? undefined : function () {
@@ -160,83 +189,102 @@ var TileVue2 = {
160
189
  order: position.order
161
190
  }, this.$props.hintStyle);
162
191
  var card = h("div", {
163
- ref: function ref(e) {
164
- _this.draggable = e ? {
165
- element: e
166
- } : null;
167
- },
168
- "class": classNames('k-tilelayout-item k-card', {
169
- 'k-cursor-grab': this.reorderable
170
- }, this.$props.className),
171
- style: __assign({
192
+ "class": this.wrapperClass,
193
+ style: {
172
194
  height: '100%'
173
- }, this.$props.style)
174
- }, [defaultSlots,
175
- // @ts-ignore
176
- h(ResizeHandlers, {
195
+ }
196
+ }, [defaultSlots, resizable !== 'vertical' && h(ResizeHandlers, {
197
+ onPress: this.handlePress,
198
+ on: this.v3 ? undefined : {
199
+ "press": this.handlePress,
200
+ "resize": this.handleResize
201
+ },
202
+ onResize: this.handleResize,
203
+ direction: "ew",
204
+ attrs: this.v3 ? undefined : {
205
+ direction: "ew",
206
+ rtl: this.rtl
207
+ },
208
+ rtl: this.rtl
209
+ }), resizable !== 'horizontal' && h(ResizeHandlers, {
177
210
  onPress: this.handlePress,
178
211
  on: this.v3 ? undefined : {
179
212
  "press": this.handlePress,
180
213
  "resize": this.handleResize
181
214
  },
182
215
  onResize: this.handleResize,
183
- resizable: resizable,
216
+ direction: "ns",
184
217
  attrs: this.v3 ? undefined : {
185
- resizable: resizable,
186
- rtl: this.state.rtl
218
+ direction: "ns",
219
+ rtl: this.rtl
187
220
  },
188
- rtl: this.state.rtl
221
+ rtl: this.rtl
222
+ }), resizable === true && h(ResizeHandlers, {
223
+ onPress: this.handlePress,
224
+ on: this.v3 ? undefined : {
225
+ "press": this.handlePress,
226
+ "resize": this.handleResize
227
+ },
228
+ onResize: this.handleResize,
229
+ direction: this.rtl ? 'nesw' : 'nwse',
230
+ attrs: this.v3 ? undefined : {
231
+ direction: this.rtl ? 'nesw' : 'nwse',
232
+ rtl: this.rtl
233
+ },
234
+ rtl: this.rtl
189
235
  })]);
190
236
  return h("div", {
191
237
  style: itemStyles,
192
- "class": this.$props.hintClassName
238
+ "class": this.$props.hintClass
193
239
  }, [
194
240
  // @ts-ignore function children
195
241
  h(Draggable, {
196
- ref: function ref(e) {
197
- _this.draggable = e;
198
- },
199
- onDrag: this.$props.reorderable ? this.handleDrag : undefined,
242
+ ref: 'draggable',
243
+ onDrag: this.handleDrag,
200
244
  on: this.v3 ? undefined : {
201
- "drag": this.$props.reorderable ? this.handleDrag : undefined,
202
- "release": this.$props.reorderable ? this.handleRelease : undefined,
203
- "press": this.$props.reorderable ? this.handlePress : undefined
245
+ "drag": this.handleDrag,
246
+ "release": this.handleRelease,
247
+ "press": this.handlePress
204
248
  },
205
- onRelease: this.$props.reorderable ? this.handleRelease : undefined,
206
- onPress: this.$props.reorderable ? this.handlePress : undefined
249
+ onRelease: this.handleRelease,
250
+ onPress: this.handlePress
207
251
  }, this.v3 ? function () {
208
252
  return [card];
209
253
  } : [card])]);
210
254
  },
211
255
  methods: {
256
+ dragElement: function dragElement() {
257
+ return this.draggable && this.draggable.element;
258
+ },
212
259
  handleResize: function handleResize(e, q) {
260
+ var dragElement = this.dragElement();
213
261
  if (q.end) {
214
262
  this.handleRelease();
215
263
  return;
216
264
  }
217
- if (!this.element) {
265
+ if (!this.reorderable || !this.$el) {
218
266
  return;
219
267
  }
220
268
  var x = e.clientX;
221
269
  var y = e.clientY;
222
270
  this.resizing = true;
223
- var dX = (q.direction !== 'ns' ? x - this.pressXY.x : 0) * (this.state.rtl ? -1 : 1);
271
+ var dX = (q.direction !== 'ns' ? x - this.pressXY.x : 0) * (this.rtl ? -1 : 1);
224
272
  var dY = q.direction !== 'ew' ? y - this.pressXY.y : 0;
225
- if (this.dragElement) {
226
- if (this.state.rtl) {
227
- this.dragElement.style.marginLeft = -dX + 'px';
273
+ if (dragElement) {
274
+ if (this.rtl) {
275
+ dragElement.style.marginLeft = -dX + 'px';
228
276
  } else {
229
- this.dragElement.style.marginRight = -dX + 'px';
277
+ dragElement.style.marginRight = -dX + 'px';
230
278
  }
231
- this.dragElement.style.height = "calc(100% + ".concat(dY, "px)");
279
+ dragElement.style.height = "calc(100% + ".concat(dY, "px)");
232
280
  }
233
- this.element.classList.add('k-layout-item-hint', 'k-layout-item-hint-resize');
281
+ this.$el.classList.add('k-layout-item-hint', 'k-layout-item-hint-resize');
234
282
  if (this.preventDataOps) {
235
283
  return;
236
284
  }
237
285
  var col = 0;
238
286
  var row = 0;
239
- var wrapBox = this.element.getBoundingClientRect();
287
+ var wrapBox = this.$el.getBoundingClientRect();
240
288
  if (dX > wrapBox.width / this.$props.defaultPosition.colSpan / 3) {
241
289
  col = 1;
242
290
  }
@@ -251,48 +299,49 @@ var TileVue2 = {
251
299
  row = -1;
252
300
  }
253
301
  if (col !== 0 || row !== 0) {
254
- this.$props.update(this.$props.index, 0, 0, row, col);
302
+ this.$emit('update', this.$props.index, 0, 0, row, col);
255
303
  }
256
304
  },
257
305
  handlePress: function handlePress(e) {
258
- if (!this.dragElement) {
306
+ var dragElement = this.dragElement();
307
+ if (!this.reorderable || !dragElement) {
259
308
  return;
260
309
  }
261
310
  this.ignoreDrag = false;
262
- if (this.$props.ignoreDrag && this.$props.ignoreDrag(e.event.originalEvent)) {
311
+ if (this.$props.ignoreDrag && this.$props.ignoreDrag(e.originalEvent)) {
263
312
  this.ignoreDrag = true;
264
313
  return;
265
314
  }
266
- if (this.element) {
267
- this.element.style.zIndex = '10';
268
- this.element.classList.add('k-layout-item-hint');
315
+ if (this.$el) {
316
+ this.$el.style.zIndex = '10';
317
+ this.$el.classList.add('k-layout-item-hint');
269
318
  }
270
- this.dragElement.classList.remove('k-cursor-grab');
271
- this.dragElement.classList.add('k-cursor-grabbing');
272
- var rec = this.dragElement.getBoundingClientRect();
319
+ dragElement.classList.remove('k-cursor-grab');
320
+ dragElement.classList.add('k-cursor-grabbing');
321
+ var rec = dragElement.getBoundingClientRect();
273
322
  this.pressXY = {
274
- x: e.event.clientX,
275
- y: e.event.clientY
323
+ x: e.clientX,
324
+ y: e.clientY
276
325
  };
277
326
  this.pressOffset = {
278
- x: e.event.clientX - rec.x,
279
- y: e.event.clientY - rec.y
327
+ x: e.clientX - rec.x,
328
+ y: e.clientY - rec.y
280
329
  };
281
330
  },
282
331
  handleDrag: function handleDrag(e) {
283
- if (this.ignoreDrag) {
332
+ if (!this.reorderable || this.ignoreDrag) {
284
333
  return;
285
334
  }
286
- var dragElement = this.dragElement;
287
- if (e.event.originalEvent.defaultPrevented || !dragElement) {
335
+ var dragElement = this.dragElement();
336
+ if (e.originalEvent.defaultPrevented || !dragElement) {
288
337
  return;
289
338
  }
290
339
  this.dragging = true;
291
- e.event.originalEvent.preventDefault();
340
+ e.originalEvent.preventDefault();
292
341
  var rec = dragElement.getBoundingClientRect();
293
342
  this.currentTranslate = {
294
- x: e.event.clientX - rec.x - this.pressOffset.x + this.currentTranslate.x,
295
- y: e.event.clientY - rec.y - this.pressOffset.y + this.currentTranslate.y
343
+ x: e.clientX - rec.x - this.pressOffset.x + this.currentTranslate.x,
344
+ y: e.clientY - rec.y - this.pressOffset.y + this.currentTranslate.y
296
345
  };
297
346
  dragElement.style.transform = "translate(".concat(this.currentTranslate.x, "px, ").concat(this.currentTranslate.y, "px)");
298
347
  dragElement.style.transition = 'transform 0s';
@@ -313,7 +362,7 @@ var TileVue2 = {
313
362
  if (this.currentTranslate.x < 0.7 * -rec.width / this.$props.defaultPosition.colSpan) {
314
363
  col = -1;
315
364
  }
316
- this.$props.update(this.$props.index, row, this.state.rtl ? -col : col, 0, 0);
365
+ this.$emit('update', this.$props.index, row, this.rtl ? -col : col, 0, 0);
317
366
  },
318
367
  handleRelease: function handleRelease() {
319
368
  this.dragging = this.resizing = false;
@@ -321,11 +370,11 @@ var TileVue2 = {
321
370
  x: 0,
322
371
  y: 0
323
372
  };
324
- if (this.element) {
325
- this.element.style.zIndex = '1';
326
- this.element.classList.remove('k-layout-item-hint', 'k-layout-item-hint-resize');
373
+ if (this.$el) {
374
+ this.$el.style.zIndex = '1';
375
+ this.$el.classList.remove('k-layout-item-hint', 'k-layout-item-hint-resize');
327
376
  }
328
- var dragElement = this.dragElement;
377
+ var dragElement = this.dragElement();
329
378
  if (dragElement) {
330
379
  dragElement.style.transform = 'translate(0px, 0px)';
331
380
  dragElement.style.transition = "transform ".concat(ANIMATION_DURATION, "ms cubic-bezier(0.2, 0, 0, 1) 0s");
@@ -337,16 +386,6 @@ var TileVue2 = {
337
386
  }
338
387
  }
339
388
  }
340
- // /**
341
- // * @hidden
342
- // */
343
- // getSnapshotBeforeUpdate(_: any) {
344
- // this.oldSize = {};
345
- // if (this.dragElement) {
346
- // this.oldSize = this.dragElement.getBoundingClientRect();
347
- // }
348
- // return null;
349
- // }
350
389
  };
351
390
  /**
352
391
  * @hidden