@progress/kendo-vue-layout
Version:
256 lines (255 loc) • 10.2 kB
JavaScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import { defineComponent as g, createVNode as h, isVNode as f } from "vue";
import { getDefaultSlots as m, canUseDOM as y, classNames as b, setRef as x, Draggable as $, getRef as S } from "@progress/kendo-vue-common";
import { ResizeHandlers as c } from "./ResizeHandlers.mjs";
function w(t) {
return typeof t == "function" || Object.prototype.toString.call(t) === "[object Object]" && !f(t);
}
const u = ["k-card-title", "k-card-body", "k-tilelayout-item-body", "k-tilelayout-item", "k-tilelayout-item-header", "k-resize-handle"], p = 200, R = /* @__PURE__ */ g({
name: "KendoTile",
inheritAttrs: !1,
props: {
defaultPosition: {
type: Object,
required: !0
},
index: Number,
tile: Object,
hintStyle: Object,
hintClass: String,
header: [String, Function, Object],
body: [String, Function, Object],
item: [String, Function, Object],
resizable: {
type: [String, Boolean],
default: !0,
validator: function(t) {
return ["horizontal", "vertical", !0, !1].includes(t);
}
},
reorderable: {
type: Boolean,
default: !0
},
tabIndex: {
type: Number,
default: 0
},
ariaDescribedBy: String,
ignoreDrag: Function,
onUpdate: Function
},
created() {
this.oldSize = {}, this.dragging = !1, this.resizing = !1, this.currentIgnoreDrag = !1, this.pressOffset = {
x: 0,
y: 0
}, this.pressXY = {
x: 0,
y: 0
}, this.currentTranslate = {
x: 0,
y: 0
}, this.prevDefaultPosition = this.$props.defaultPosition, this.preventDataOps = void 0;
},
computed: {
wrapperClass() {
return {
"k-tilelayout-item": !0,
"k-card": !0,
"k-cursor-grab": this.reorderable
};
}
},
data() {
return {
rtl: !1,
grabbed: !1,
showHint: !1
};
},
mounted() {
this.$el && (this.element = this.$el.nodeType === 3 || this.$el.nodeType === 8 ? this.$el.nextElementSibling : this.$el, this.draggable = this.$refs.draggable, getComputedStyle(this.element).direction === "rtl" && (this.rtl = !0));
},
watch: {
defaultPosition: function(t, e) {
this.prevDefaultPosition = e;
}
},
beforeUpdate() {
this.oldSize = {};
const t = this.dragElement();
return t && (this.oldSize = t.getBoundingClientRect()), null;
},
updated() {
const t = this.dragElement();
if (this.hintElement = S(this, "hintElement"), !t)
return;
const e = t.getBoundingClientRect(), i = this.oldSize;
if (this.resizing) {
const s = e.width - i.width;
if (this.rtl) {
const a = parseFloat(t.style.marginLeft || "0");
t.style.marginLeft = a - s + "px";
} else {
const a = parseFloat(t.style.marginRight || "0");
t.style.marginRight = a + s + "px";
}
this.pressXY.x += this.rtl ? -s : s;
const l = e.height - i.height, o = parseFloat(t.style.height.substring(12));
t.style.height = `calc(100% + ${o + l}px)`, this.pressXY.y += l;
}
const r = i.left - e.left, n = i.top - e.top;
if (!(r === 0 && n === 0)) {
if (this.dragging) {
(this.prevDefaultPosition.order !== this.$props.defaultPosition.order || this.prevDefaultPosition.col !== this.$props.defaultPosition.col) && (this.currentTranslate.x = 0, this.currentTranslate.y = 0, t.style.transform = "");
return;
}
Math.abs(n) < 15 && Math.abs(r) < 15 || requestAnimationFrame(() => {
const s = this.element;
s && (s.style.transform = `translate(${r}px, ${n}px)`, s.style.transition = "transform 0s", requestAnimationFrame(() => {
s.style.transform = "", s.style.transition = `transform ${p}ms cubic-bezier(0.2, 0, 0, 1) 0s`;
}));
});
}
},
render() {
const t = m(this);
clearTimeout && typeof clearTimeout == "function" && (clearTimeout(this.preventDataOps), y && (this.preventDataOps = window.setTimeout(() => {
this.preventDataOps = void 0;
}, 200)));
const e = this.$props.defaultPosition, i = this.$props.resizable, r = {
gridColumnStart: e.col,
gridColumnEnd: `span ${e.colSpan}`,
gridRowStart: e.row,
gridRowEnd: `span ${e.rowSpan}`,
outline: "none",
order: e.order,
...this.$props.hintStyle
}, n = {
gridColumnStart: e.col,
gridColumnEnd: `span ${e.colSpan}`,
gridRowStart: e.row,
gridRowEnd: `span ${e.rowSpan}`,
order: e.order
}, s = h("div", {
class: this.wrapperClass,
style: {
height: "100%",
...n
},
role: "listitem",
tabindex: this.$props.tabIndex,
"aria-keyshortcuts": "Enter",
"aria-ariaDescribedBy": this.$props.ariaDescribedBy,
onTouchstart: this.touchStart
}, [t, i && i !== "vertical" && h(c, {
onPress: this.handlePress,
onResize: this.handleResize,
direction: "ew",
rtl: this.rtl
}, null), i && i !== "horizontal" && h(c, {
onPress: this.handlePress,
onResize: this.handleResize,
direction: "ns",
rtl: this.rtl
}, null), i === !0 && h(c, {
onPress: this.handlePress,
onResize: this.handleResize,
direction: this.rtl ? "nesw" : "nwse",
rtl: this.rtl
}, null)]);
return [this.showHint && h("div", {
ref: x(this, "hintElement"),
style: {
position: "absolute",
...r
},
class: b("k-layout-item-hint k-layout-item-hint-reorder", this.$props.hintClass)
}, null), h($, {
ref: "draggable",
onDrag: this.handleDrag,
onRelease: this.handleRelease,
onPress: this.handlePress
}, w(s) ? s : {
default: () => [s]
})];
},
methods: {
touchStart(t) {
(this.tile.dragClasses ? [...u, ...this.tile.dragClasses] : u).some((i) => t.target.classList.contains(i)) && t.preventDefault();
},
dragElement() {
return this.draggable && this.draggable.element;
},
handleResize(t, e) {
const i = this.dragElement();
if (e.end) {
this.handleRelease();
return;
}
if (!this.reorderable || !this.element)
return;
const r = t.clientX, n = t.clientY;
this.resizing = !0;
const s = (e.direction !== "ns" ? r - this.pressXY.x : 0) * (this.rtl ? -1 : 1), l = e.direction !== "ew" ? n - this.pressXY.y : 0;
if (i && (this.rtl ? i.style.marginLeft = -s + "px" : i.style.marginRight = -s + "px", i.style.height = `calc(100% + ${l}px)`), this.showHint = !0, this.hintElement && this.hintElement.classList.add("k-layout-item-hint-resize"), this.element.classList.add("k-layout-item-hint", "k-layout-item-hint-resize"), this.preventDataOps)
return;
let o = 0, a = 0;
const d = this.element.getBoundingClientRect();
s > d.width / this.$props.defaultPosition.colSpan / 3 && (o = 1), s < -d.width / this.$props.defaultPosition.colSpan / 1.25 && (o = -1), l > d.height / this.$props.defaultPosition.rowSpan / 3 && (a = 1), l < -d.height / this.$props.defaultPosition.rowSpan / 1.25 && (a = -1), (o !== 0 || a !== 0) && this.$emit("update", this.$props.index, 0, 0, a, o, !0);
},
handlePress(t) {
const e = this.dragElement();
if (!this.reorderable || !e)
return;
if (this.pressXY = {
x: t.clientX,
y: t.clientY
}, this.currentIgnoreDrag = !1, this.$props.ignoreDrag && this.$props.ignoreDrag(t.originalEvent)) {
this.currentIgnoreDrag = !0;
return;
}
this.element && (this.element.style.zIndex = "10", this.element.classList.add("k-layout-item-hint"), this.showHint = !0), e.classList.remove("k-cursor-grab"), e.classList.add("k-cursor-grabbing"), this.grabbed = !0;
const i = e.getBoundingClientRect();
this.pressOffset = {
x: t.clientX - i.x,
y: t.clientY - i.y
};
},
handleDrag(t) {
if (!this.reorderable || this.currentIgnoreDrag)
return;
const e = this.dragElement();
if (t.originalEvent.defaultPrevented || !e)
return;
this.dragging = !0, t.originalEvent.preventDefault();
const i = e.getBoundingClientRect();
if (this.currentTranslate = {
x: t.clientX - i.x - this.pressOffset.x + this.currentTranslate.x,
y: t.clientY - i.y - this.pressOffset.y + this.currentTranslate.y
}, e.style.transform = `translate(${this.currentTranslate.x}px, ${this.currentTranslate.y}px)`, e.style.transition = "transform 0s", this.preventDataOps)
return;
let r = 0, n = 0;
this.currentTranslate.y > 0.7 * i.height / this.$props.defaultPosition.rowSpan && (n = 1), this.currentTranslate.y < 0.7 * -i.height / this.$props.defaultPosition.rowSpan && (n = -1), this.currentTranslate.x > 0.7 * i.width / this.$props.defaultPosition.colSpan && (r = 1), this.currentTranslate.x < 0.7 * -i.width / this.$props.defaultPosition.colSpan && (r = -1), this.$emit("update", this.$props.index, n, this.rtl ? -r : r, 0, 0);
},
handleRelease() {
if (!this.reorderable)
return;
this.dragging = this.resizing = !1, this.currentTranslate = {
x: 0,
y: 0
}, this.element && (this.element.style.zIndex = "1", this.element.classList.remove("k-layout-item-hint", "k-layout-item-hint-resize"), this.hintElement && this.hintElement.classList.remove("k-layout-item-hint-resize"), this.showHint = !1);
const t = this.dragElement();
t && (t.style.transform = "translate(0px, 0px)", t.style.transition = `transform ${p}ms cubic-bezier(0.2, 0, 0, 1) 0s`, t.style.marginRight = "0px", t.style.marginLeft = "0px", t.style.height = "100%", t.classList.remove("k-cursor-grabbing"), t.classList.add("k-cursor-grab"), this.grabbed = !1);
}
}
});
export {
R as Tile
};