@dhtmlx/trial-vue-gantt 1.1.2 → 9.1.4

package/src/components/chart/Links.vue

@@ -1,35 +0,0 @@
-<template>
-	<svg class="links" :width="width" :height="height">
-		<polyline
-			class="line"
-			v-for="link in links"
-			:key="link.id"
-			:points="link.$p"
-		/>
-	</svg>
-</template>
-
-<script>
-	export default {
-		props: ["links", "width", "height"],
-	};
-</script>
-
-<style scoped>
-	.links {
-		position: absolute;
-		top: 0;
-		left: 0;
-	}
-
-	.line {
-		user-select: auto;
-		pointer-events: stroke;
-		position: relative;
-		cursor: pointer;
-		stroke: var(--wx-gantt-link-color);
-		stroke-width: 2;
-		z-index: 0;
-		fill: transparent;
-	}
-</style>

package/src/components/chart/NewLink.vue

@@ -1,39 +0,0 @@
-<template>
-	<svg
-		class="new"
-		:style="`top:${link.top}px;left:${link.left}px`"
-		:width="link.width"
-		:height="link.height"
-	>
-		<polyline class="line" :points="link.p" />
-	</svg>
-</template>
-
-<script>
-	import { placeLink } from "@dhtmlx/trial-lib-gantt";
-
-	export default {
-		props: ["layer", "start", "end"],
-
-		computed: {
-			link() {
-				const box = this.layer.getBoundingClientRect();
-				const link = placeLink(box, this.start, this.end);
-				return link;
-			},
-		},
-	};
-</script>
-
-<style scoped>
-	.new {
-		position: relative;
-		pointer-events: none;
-	}
-
-	.line {
-		stroke: var(--wx-gantt-link-color);
-		stroke-width: 2;
-		fill: none;
-	}
-</style>

package/src/components/grid/Body.vue

@@ -1,256 +0,0 @@
-<template>
-	<div
-		class="table"
-		ref="node"
-		:style="{ top: -(scrollTop - scrollDelta) + 'px' }"
-		@wheel.passive="wheel"
-		@click="click"
-		@dblclick="dblclick"
-		@touchstart="touchStart"
-		@touchmove="touchMove"
-		@touchend="endScroll"
-	>
-		<div
-			v-for="task in tasks"
-			:key="task.id"
-			:class="['row', { selected: selected && selected.id == task.id }]"
-			:style="{ height: cellHeight + 'px' }"
-			:data-id="task.id"
-		>
-			<div
-				v-for="column in columns"
-				:key="column.name"
-				class="cell"
-				:style="cellStyle(column)"
-			>
-				<template v-if="column.name === 'text'">
-					<div class="content" :style="contentStyle(task)">
-						<div
-							class="icon"
-							:class="getIcon(task)"
-							data-action="toggle-task"
-						></div>
-						{{ column.template(task) }}
-					</div>
-				</template>
-
-				<template v-else-if="column.action">
-					<span class="add" :data-action="column.action" />
-				</template>
-
-				<template v-else>
-					{{ column.template(task) }}
-				</template>
-			</div>
-		</div>
-	</div>
-</template>
-
-<script>
-	import { locateID } from "@dhtmlx/trial-lib-gantt";
-	import { reorder } from "./actions/reorder";
-
-	export default {
-		props: [
-			"tasks",
-			"columns",
-			"cellHeight",
-			"scrollTop",
-			"scrollDelta",
-			"selected",
-		],
-
-		data: () => ({
-			delta: 20,
-			touchY: null,
-			scroll: true,
-		}),
-
-		mounted() {
-			reorder(this.$refs.node, {
-				start: e => this.startReorder(e),
-				move: e => this.moveReorder(e),
-				end: e => this.endReorder(e),
-				touchStart: () => this.endScroll(),
-			});
-		},
-
-		methods: {
-			click(e) {
-				const id = locateID(e);
-				if (!id) return;
-
-				const action = e.target.dataset.action;
-				if (action) {
-					this.$emit("action", { id, action });
-					e.preventDefault();
-				} else {
-					this.$emit("action", { action: "select-task", id });
-				}
-			},
-
-			dblclick(e) {
-				const id = locateID(e);
-				if (id) this.$emit("action", { action: "show-details", id });
-			},
-
-			wheel(e) {
-				const step = e.deltaMode ? e.deltaY * 18 : e.deltaY;
-				const top = Math.max(0, this.scrollTop + step);
-				this.$emit("action", { action: "scroll-chart", top });
-			},
-
-			touchStart(e) {
-				this.scroll = true;
-				this.touchY = e.touches[0].clientY + this.scrollTop;
-			},
-
-			touchMove(e) {
-				if (this.scroll) {
-					const delta = this.touchY - e.touches[0].clientY;
-					this.$emit("action", { action: "scroll-chart", top: delta });
-				}
-			},
-
-			endScroll() {
-				this.scroll = false;
-			},
-
-			cellStyle(column) {
-				const align = `text-align:${column.align}`;
-				const width =
-					column.width === "100%" ? `flex:1` : `width:${column.width}`;
-				return `${width};${align}`;
-			},
-
-			contentStyle(task) {
-				return {
-					paddingLeft: (task.$level - 1) * this.delta + "px",
-				};
-			},
-
-			getIcon(task) {
-				if (!task.data) return "";
-				return task.open ? "icon-close" : "icon-open";
-			},
-
-			startReorder({ id }) {
-				id *= 1;
-				const task = this.tasks.find(a => a.id === id);
-				if (!task) return;
-
-				if (task.open) this.$emit("action", { id, action: "toggle-task" });
-
-				this.$emit("action", { action: "hide-details" });
-			},
-
-			moveReorder({ id, top }) {
-				this.$emit("action", {
-					action: "move-task",
-					id,
-					obj: { top: top + this.scrollDelta },
-				});
-			},
-
-			endReorder(result) {
-				let id = result.id * 1;
-				const { before, after } = result;
-				const target = (before || after) * 1;
-
-				if (!target) {
-					this.$emit("action", { id, action: "repaint-task" });
-					return;
-				}
-
-				const mode = before ? "before" : "after";
-
-				this.$emit("action", {
-					id,
-					action: "reorder-task",
-					obj: { id, mode, target },
-				});
-			},
-		},
-	};
-</script>
-
-<style scoped>
-	.table {
-		position: relative;
-		width: 100%;
-		font: var(--wx-grid-body-font);
-		color: var(--wx-grid-body-font-color);
-	}
-
-	.row {
-		display: flex;
-		align-items: center;
-		box-sizing: border-box;
-		border-bottom: var(--wx-grid-body-row-border);
-	}
-
-	.row.selected {
-		background: var(--wx-gantt-select-color);
-	}
-
-	.cell {
-		box-sizing: border-box;
-		flex: 0 0 auto;
-		padding: 0 5px;
-		overflow: hidden;
-	}
-
-	.content {
-		width: 100%;
-		white-space: nowrap;
-		display: flex;
-		justify-content: flex-start;
-		align-items: center;
-	}
-
-	.icon {
-		width: 12px;
-		min-width: 12px;
-		height: 12px;
-		margin: 0 5px;
-		pointer-events: none;
-	}
-
-	.icon-close,
-	.icon-open {
-		cursor: pointer;
-		pointer-events: auto;
-	}
-
-	.icon-close {
-		background: var(--wx-close-btn-icon) center center no-repeat;
-	}
-
-	.icon-open {
-		background: var(--wx-open-btn-icon) center center no-repeat;
-	}
-
-	.add {
-		display: inline-block;
-		width: 12px;
-		height: 12px;
-		background: var(--wx-add-btn-icon) center center no-repeat;
-		opacity: 0.54;
-		cursor: pointer;
-	}
-
-	.add:hover {
-		opacity: 1;
-	}
-
-	.wx-reorder-card.row {
-		width: 100%;
-		background: white;
-		border-top: var(--wx-grid-body-row-border);
-		opacity: 50%;
-	}
-
-	.wx-reorder.row {
-		opacity: 50%;
-	}
-</style>

package/src/components/grid/Grid.vue

@@ -1,98 +0,0 @@
-<template>
-	<div class="grid" :style="{ flex: `0 0 ${basis}` }">
-		<Header
-			:compactMode="compactMode"
-			:columns="cols"
-			:height="scales.height"
-			@action="action"
-		/>
-
-		<Body
-			:tasks="tasks"
-			:columns="cols"
-			:cellHeight="cellHeight"
-			:scrollTop="scrollTop"
-			:scrollDelta="scrollDelta"
-			:selected="selected"
-			@action="action"
-		/>
-	</div>
-</template>
-
-<script>
-	import Header from "./Header.vue";
-	import Body from "./Body.vue";
-
-	export default {
-		components: {
-			Header,
-			Body,
-		},
-
-		data: () => ({
-			showFull: false,
-		}),
-
-		props: [
-			"compactMode",
-			"width",
-			"tasks",
-			"columns",
-			"scales",
-			"cellHeight",
-			"scrollTop",
-			"scrollDelta",
-			"selected",
-		],
-
-		methods: {
-			action(ev) {
-				const { action } = ev;
-
-				switch (action) {
-					case "toggle-grid":
-						this.showFull = !this.showFull;
-						break;
-
-					default:
-						this.$emit("action", ev);
-						break;
-				}
-			},
-		},
-
-		computed: {
-			cols() {
-				const { compactMode, columns } = this;
-				return compactMode
-					? [
-							columns[columns.length - 1],
-							...columns.slice(0, columns.length - 1),
-					  ]
-					: columns;
-			},
-
-			basis() {
-				return this.showFull ? "100%" : `${this.width}px`;
-			},
-		},
-
-		watch: {
-			compactMode() {
-				if (!this.compactMode) {
-					this.showFull = false;
-				}
-			},
-		},
-	};
-</script>
-
-<style scoped>
-	.grid {
-		display: flex;
-		flex-direction: column;
-		box-sizing: border-box;
-		border-right: 1px solid var(--wx-border-color);
-		overflow: hidden;
-	}
-</style>

package/src/components/grid/Header.vue

@@ -1,104 +0,0 @@
-<template>
-	<div class="table">
-		<div class="row" :style="headerStyle">
-			<div
-				v-for="column in columns"
-				:key="column.name"
-				class="cell"
-				:style="cellStyle(column)"
-			>
-				<template v-if="column.action">
-					<span
-						v-if="compactMode"
-						class="mdi mdi-menu"
-						@click="toggleGrid"
-					></span>
-					<span v-else class="add" @click="addTask"></span>
-				</template>
-				<template v-else>{{ t("gantt", column.label) }}</template>
-			</div>
-		</div>
-	</div>
-</template>
-
-<script>
-	import { LocaleContext } from "@/wx/locale";
-	import { inject } from "vue";
-
-	export default {
-		props: ["compactMode", "columns", "height"],
-
-		setup() {
-			return { t: inject(LocaleContext).__ };
-		},
-
-		methods: {
-			cellStyle(column) {
-				const align = `text-align:${column.align}`;
-				const width =
-					column.width === "100%" ? `flex:1` : `width:${column.width}`;
-				return `${width};${align}`;
-			},
-
-			addTask() {
-				this.$emit("action", { action: "add-task", id: 0 });
-			},
-
-			toggleGrid() {
-				this.$emit("action", { action: "toggle-grid" });
-			},
-		},
-
-		computed: {
-			headerStyle() {
-				return {
-					height: this.height + "px",
-				};
-			},
-		},
-	};
-</script>
-
-<style scoped>
-	.table {
-		position: relative;
-		width: 100%;
-		box-shadow: var(--wx-grid-header-shadow);
-		background-color: #fff;
-		z-index: 1;
-	}
-
-	.row {
-		box-sizing: border-box;
-		display: flex;
-		align-items: center;
-		border-bottom: 1px solid var(--wx-border-color);
-	}
-
-	.cell {
-		box-sizing: border-box;
-		flex: 0 0 auto;
-		font: var(--wx-grid-header-font);
-		text-transform: var(--wx-grid-header-text-transform);
-		color: var(--wx-grid-header-font-color);
-	}
-
-	.add {
-		display: inline-block;
-		width: 12px;
-		height: 12px;
-		background: var(--wx-add-btn-icon) center center no-repeat;
-		opacity: 0.54;
-		cursor: pointer;
-	}
-
-	.add:hover {
-		opacity: 1;
-	}
-
-	.mdi-menu {
-		cursor: pointer;
-		font-size: 20px;
-		color: var(--wx-button-primary-color);
-	}
-</style>

package/src/components/grid/actions/reorder.js

@@ -1,193 +0,0 @@
-import { locate } from "@dhtmlx/trial-lib-gantt";
-
-function getOffset(node, relative, ev) {
-	const box = node.getBoundingClientRect();
-	const base = relative.getBoundingClientRect();
-
-	return {
-		top: box.top - base.top,
-		left: box.left - base.left,
-		dt: box.bottom - ev.clientY,
-		db: ev.clientY - box.top,
-	};
-}
-
-const SHIFT = 5;
-
-export function reorder(node, config) {
-	let source, clone;
-	let x, y, base, detail;
-	let touched, touchTimer;
-
-	function down(event) {
-		x = event.clientX;
-		y = event.clientY;
-		base = getOffset(source, node, event);
-
-		document.body.style.userSelect = "none";
-	}
-
-	function handleTouchstart(event) {
-		source = locate(event);
-		if (!source) return;
-
-		touchTimer = setTimeout(() => {
-			touched = true;
-			if (config && config.touchStart) config.touchStart();
-			source.classList.add("wx-reorder");
-			down(event.touches[0]);
-		}, 500);
-
-		node.addEventListener("touchmove", handleTouchmove);
-		node.addEventListener("contextmenu", handleContext);
-		window.addEventListener("touchend", handleTouchend);
-	}
-
-	function handleContext(event) {
-		if (touched || touchTimer) {
-			event.preventDefault();
-			return false;
-		}
-	}
-
-	function handleMousedown(event) {
-		if (event.which === 3) return;
-
-		source = locate(event);
-		if (!source) return;
-
-		node.addEventListener("mousemove", handleMousemove);
-		window.addEventListener("mouseup", handleMouseup);
-
-		down(event);
-	}
-
-	function end(full) {
-		node.removeEventListener("mousemove", handleMousemove);
-		node.removeEventListener("touchmove", handleTouchmove);
-		window.removeEventListener("mouseup", handleMouseup);
-		window.removeEventListener("touchend", handleTouchend);
-		document.body.style.userSelect = "";
-
-		if (full) {
-			node.removeEventListener("mousedown", handleMousedown);
-			node.removeEventListener("touchstart", handleTouchstart);
-		}
-	}
-
-	function move(event) {
-		const dx = event.clientX - x;
-		const dy = event.clientY - y;
-		if (!clone) {
-			if (config && config.start) {
-				if (config.start({ id: source.dataset.id, e: event }) === false) return;
-			}
-			if (Math.abs(dx) < SHIFT && Math.abs(dy) < SHIFT) return;
-
-			clone = source.cloneNode(true);
-			clone.style.pointerEvents = "none";
-			clone.classList.add("wx-reorder-card");
-			clone.style.position = "absolute";
-			clone.style.left = base.left + "px";
-			clone.style.top = base.top + "px";
-
-			source.style.visibility = "hidden";
-			source.parentNode.insertBefore(clone, source);
-		}
-
-		if (clone) {
-			const top = Math.max(0, base.top + dy);
-			clone.style.top = top + "px";
-
-			const targetNode = document.elementFromPoint(
-				event.clientX,
-				event.clientY
-			);
-			const target = locate(targetNode);
-
-			if (target && target !== source) {
-				const box = target.getBoundingClientRect();
-				const line = box.top + box.height / 2;
-
-				const after =
-					event.clientY + base.db > line &&
-					target.nextElementSibling !== source;
-				const before =
-					event.clientY - base.dt < line &&
-					target.previousElementSibling !== source;
-				if (config && config.move)
-					if (
-						config.move({ id: source.dataset.id, top, before, after }) === false
-					)
-						return;
-				if (after) {
-					// move down
-					target.parentNode.insertBefore(source, target.nextElementSibling);
-					detail = { id: source.dataset.id, after: target.dataset.id };
-				} else if (before) {
-					// move up
-					target.parentNode.insertBefore(source, target);
-					detail = { id: source.dataset.id, before: target.dataset.id };
-				}
-				return;
-			}
-
-			if (config && config.move) config.move({ id: source.dataset.id, top });
-		}
-	}
-
-	function handleMousemove(event) {
-		move(event);
-	}
-
-	function handleTouchmove(event) {
-		if (touched) {
-			event.preventDefault();
-			move(event.touches[0]);
-		} else if (touchTimer) {
-			clearTimeout(touchTimer);
-			touchTimer = null;
-		}
-	}
-
-	function handleTouchend() {
-		touched = null;
-		if (touchTimer) {
-			clearTimeout(touchTimer);
-			touchTimer = null;
-		}
-		up();
-	}
-
-	function handleMouseup() {
-		up();
-	}
-
-	function up() {
-		if (source) {
-			source.style.visibility = "";
-			source.classList.remove("wx-reorder");
-		}
-		if (clone) {
-			clone.parentNode.removeChild(clone);
-			if (config && config.end)
-				if (config.end(detail || { id: source.dataset.id }) === false) {
-					source.parentNode.removeChild(source);
-				}
-		}
-
-		source = clone = base = detail = null;
-		end();
-	}
-
-	if (node.style.position !== "absolute") node.style.position = "relative";
-
-	node.addEventListener("mousedown", handleMousedown);
-	node.addEventListener("touchstart", handleTouchstart);
-
-	return {
-		destroy() {
-			end(true);
-		},
-	};
-}