@dhtmlx/trial-vue-gantt 1.1.2 → 9.1.4

package/src/components/sidebar/Links.vue

@@ -1,147 +0,0 @@
-<template>
-	<template v-for="(links, index) in linksData" :key="index">
-		<div v-if="links.data.length" class="links">
-			<p class="label">{{ links.title }}</p>
-
-			<table class="table" @click="click">
-				<tr v-for="obj in links.data" :key="obj" class="row">
-					<td class="cell">
-						<div class="task-name">
-							{{ obj.task.text || obj.task.textRight || obj.task.textLeft }}
-						</div>
-					</td>
-
-					<td class="cell">
-						<div class="wrapper">
-							<select
-								class="select"
-								:value="obj.link.type"
-								:data-id="obj.link.id"
-								@change="select"
-							>
-								<option v-for="item in list" :key="item.id" :value="item.id">
-									{{ item.text }}
-								</option>
-							</select>
-							<div class="icon-more" />
-						</div>
-					</td>
-
-					<td>
-						<div
-							class="icon-delete"
-							data-action="delete-link"
-							:data-id="obj.link.id"
-						/>
-					</td>
-				</tr>
-			</table>
-		</div>
-	</template>
-</template>
-
-<script>
-	export default {
-		props: ["linksData"],
-
-		emits: ["action"],
-
-		data: () => ({
-			list: [
-				{ id: 0, text: "End-to-start" },
-				{ id: 1, text: "Start-to-start" },
-				{ id: 2, text: "End-to-end" },
-				{ id: 3, text: "Start-to-end" },
-			],
-		}),
-
-		methods: {
-			click(e) {
-				const { action, id } = e.target.dataset;
-				if (action) {
-					this.$emit("action", { action, id });
-				}
-			},
-
-			select(e) {
-				const id = e.target.dataset.id;
-				const value = e.target.value * 1;
-				this.$emit("action", {
-					action: "update-link",
-					id,
-					obj: { type: value },
-				});
-			},
-		},
-	};
-</script>
-
-<style scoped>
-	.links {
-		margin-bottom: 10px;
-	}
-
-	.label {
-		margin-bottom: 10px;
-		font: var(--wx-label-font);
-		color: var(--wx-label-font-color);
-	}
-
-	.cell {
-		text-align: center;
-	}
-
-	.task-name {
-		font: var(--wx-input-font);
-		color: var(--wx-input-font-color);
-		width: 90px;
-		text-align: left;
-		overflow: hidden;
-		white-space: nowrap;
-	}
-
-	.wrapper {
-		width: 225px;
-		position: relative;
-		display: flex;
-	}
-
-	.select {
-		width: 100%;
-		padding: var(--wx-input-padding);
-		border: var(--wx-input-border);
-		border-radius: var(--wx-input-border-radius);
-		font: var(--wx-input-font);
-		color: var(--wx-input-font-color);
-		outline: none;
-		appearance: none;
-	}
-
-	.select:focus {
-		border: 1px solid var(--wx-input-focus-color);
-	}
-
-	.icon-more {
-		position: absolute;
-		top: 50%;
-		right: 11px;
-		width: 20px;
-		height: 20px;
-		transform: translateY(-50%);
-		background: var(--wx-show-more-icon) center center no-repeat;
-		pointer-events: none;
-	}
-
-	.icon-delete {
-		width: 20px;
-		height: 20px;
-		margin-left: 12px;
-		background: var(--wx-remove-link-icon) center center no-repeat;
-		opacity: 0.2;
-		cursor: pointer;
-	}
-
-	.icon-delete:hover {
-		opacity: 1;
-	}
-</style>

package/src/components/sidebar/Sidebar.vue

@@ -1,219 +0,0 @@
-<template>
-	<div :class="['sidebar', { compact: compactMode }]">
-		<div class="header">
-			<div class="icon-close" @click="hide"></div>
-			<div class="buttons">
-				<Button @click="hide"> {{ t("gantt", "Save") }} </Button>
-				<Button appearance="danger" @click="remove">
-					{{ t("gantt", "Delete") }}
-				</Button>
-			</div>
-		</div>
-		<div class="body">
-			<component
-				v-if="template"
-				:is="templates.sidebarForm"
-				:task="task"
-				:linksData="linksData"
-				@action="action"
-			></component>
-
-			<template v-else>
-				<Text
-					:label="t('gantt', 'Name')"
-					:value="task.text"
-					:autofocus="true"
-					@change="v => update('text', v)"
-				/>
-
-				<Textarea
-					:label="t('gantt', 'Type')"
-					:value="task.details"
-					@change="v => update('details', v)"
-				/>
-
-				<Select
-					v-if="taskTypes.length > 1"
-					:label="t('gantt', 'Type')"
-					:value="task.type"
-					:options="taskTypes"
-					@change="v => update('type', v)"
-				/>
-
-				<Datepicker
-					:label="t('gantt', 'Start Date')"
-					:value="task.start_date"
-					:readonly="true"
-					@change="v => update('start_date', v)"
-				/>
-
-				<template v-if="!milestone">
-					<Datepicker
-						:label="t('gantt', 'End Date')"
-						:value="task.end_date"
-						:readonly="true"
-						@change="v => update('end_date', v)"
-					/>
-
-					<Counter
-						:label="t('gantt', 'Duration')"
-						:value="task.duration"
-						@change="v => update('duration', v)"
-					/>
-
-					<Slider
-						:label="`${t('gantt', 'Progress')}: ${task.progress}%`"
-						:value="task.progress"
-						@change="v => update('progress', v)"
-					/>
-				</template>
-
-				<Links :linksData="linksData" @action="action" />
-			</template>
-		</div>
-	</div>
-</template>
-
-<script>
-	import { getDiffer, getAdder } from "@dhtmlx/trial-lib-gantt";
-	import Button from "../../wx/Button.vue";
-	import Text from "../../wx/Text.vue";
-	import Select from "../../wx/Select.vue";
-	import Textarea from "../../wx/Textarea.vue";
-	import Slider from "../../wx/Slider.vue";
-	import Datepicker from "../../wx/Datepicker.vue";
-	import Counter from "../../wx/Counter.vue";
-	import Links from "./Links.vue";
-
-	import { LocaleContext } from "@/wx/locale";
-	import { inject } from "vue";
-
-	const addDay = getAdder("day");
-	const diffDay = getDiffer("day");
-
-	export default {
-		components: {
-			Button,
-			Text,
-			Textarea,
-			Select,
-			Slider,
-			Datepicker,
-			Counter,
-			Links,
-		},
-
-		props: [
-			"compactMode",
-			"taskTypes",
-			"templates",
-			"task",
-			"links",
-			"tasksMap",
-		],
-
-		setup() {
-			return { t: inject(LocaleContext).__ };
-		},
-
-		methods: {
-			hide() {
-				this.$emit("action", { action: "hide-details" });
-			},
-
-			remove() {
-				this.$emit("action", { action: "delete-task", id: this.task.id });
-				this.$emit("action", { action: "hide-details" });
-			},
-
-			action(e) {
-				this.$emit("action", e);
-			},
-
-			update(name, value) {
-				const { task } = this;
-				task[name] = value;
-
-				switch (name) {
-					case "start_date":
-					case "end_date":
-						task.duration = diffDay(task.end_date, task.start_date);
-						break;
-
-					case "duration":
-						task.duration = value * 1;
-						task.end_date = addDay(task.start_date, task.duration);
-						break;
-				}
-
-				this.$emit("action", { action: "update-task", id: task.id, obj: task });
-			},
-		},
-
-		computed: {
-			linksData() {
-				const inLinks = this.links
-					.filter(a => a.target == this.task.id)
-					.map(link => ({ link, task: this.tasksMap[link.source] }));
-
-				const outLinks = this.links
-					.filter(a => a.source == this.task.id)
-					.map(link => ({ link, task: this.tasksMap[link.target] }));
-
-				return [
-					{ title: this.t("gantt", "Predecessors"), data: inLinks },
-					{ title: this.t("gantt", "Successors"), data: outLinks },
-				];
-			},
-
-			milestone() {
-				return this.task.type === "milestone";
-			},
-
-			template() {
-				return this.templates && this.templates.sidebarForm;
-			},
-		},
-	};
-</script>
-
-<style scoped>
-	.sidebar {
-		flex: 0 0 400px;
-		display: flex;
-		flex-direction: column;
-		box-sizing: border-box;
-		height: 100%;
-		background: #fff;
-		box-shadow: 0px 1px 30px rgba(0, 0, 0, 0.25);
-		overflow: hidden;
-	}
-
-	.sidebar.compact {
-		position: absolute;
-		width: 100%;
-		z-index: 5;
-	}
-
-	.header {
-		box-sizing: border-box;
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		padding: 11px 20px;
-		border-bottom: 1px solid var(--wx-border-color);
-	}
-
-	.body {
-		flex: 1 1 auto;
-		padding: 20px;
-		overflow: auto;
-	}
-
-	.icon-close {
-		width: 24px;
-		height: 27px;
-		background: var(--wx-close-sb-icon) center center no-repeat;
-		cursor: pointer;
-	}
-</style>

package/src/locales/cn.js

@@ -1,21 +0,0 @@
-export default {
-	gantt: {
-		// Header
-		"Task name": "任务名称",
-		"Start time": "开始时间",
-		Duration: "期间",
-
-		// Sidebar
-		Save: "保存",
-		Delete: "删除",
-		Name: "名称",
-		Description: "描述",
-		Type: "类型",
-		"Start Date": "开始日期",
-		"End Date": "结束日期",
-		// Duration: "期间",
-		Progress: "进步",
-		Predecessors: "前辈",
-		Successors: "后继者",
-	},
-};

package/src/locales/en.js

@@ -1,21 +0,0 @@
-export default {
-	gantt: {
-		// Header
-		"Task name": "Task name",
-		"Start time": "Start time",
-		Duration: "Duration",
-
-		// Sidebar
-		Save: "Save",
-		Delete: "Delete",
-		Name: "Name",
-		Description: "Description",
-		Type: "Type",
-		"Start date": "Start date",
-		"End date": "End date",
-		// Duration: "Duration",
-		Progress: "Progress",
-		Predecessors: "Predecessors",
-		Successors: "Successors",
-	},
-};

package/src/locales/ru.js

@@ -1,21 +0,0 @@
-export default {
-	gantt: {
-		// Header
-		"Task name": "Название",
-		"Start time": "Начало",
-		Duration: "Длительность",
-
-		// Sidebar
-		Save: "Сохранить",
-		Delete: "Удалить",
-		Name: "Задача",
-		Description: "Описание",
-		Type: "Тип",
-		"Start Date": "Дата выполнения",
-		"End Date": "Дата окончания",
-		// Duration: "Длительность",
-		Progress: "Прогресс",
-		Predecessors: "Предшественники",
-		Successors: "Преемники",
-	},
-};

package/src/main.js

@@ -1,46 +0,0 @@
-import Gantt from "./components/Gantt.vue";
-export default Gantt;
-
-import Button from "@/wx/Button.vue";
-import Calendar from "@/wx/Calendar.vue";
-import Counter from "@/wx/Counter.vue";
-import Datepicker from "@/wx/Datepicker.vue";
-import Select from "@/wx/Select.vue";
-import Slider from "@/wx/Slider.vue";
-import Text from "@/wx/Text.vue";
-import Textarea from "@/wx/Textarea.vue";
-import Tooltip from "@/wx/Tooltip.vue";
-
-import MaterialTheme from "@/wx/MaterialTheme.vue";
-import DefaultTheme from "@/wx/DefaultTheme.vue";
-
-import RULocale from "@/wx/RULocale";
-import ENLocale from "@/wx/ENLocale";
-import CNLocale from "@/wx/CNLocale";
-
-import ru from "./locales/ru";
-import en from "./locales/en";
-import cn from "./locales/cn";
-
-const wx = {
-	Button,
-	Calendar,
-	Counter,
-	Datepicker,
-	Select,
-	Slider,
-	Text,
-	Textarea,
-	Tooltip,
-
-	MaterialTheme,
-	DefaultTheme,
-
-	RULocale,
-	ENLocale,
-	CNLocale,
-};
-
-const locales = { ru, en, cn };
-
-export { Gantt, wx, MaterialTheme, DefaultTheme, locales };

package/src/state/local.js

@@ -1,48 +0,0 @@
-import { nextTick } from "vue";
-import { LocalData, LocalState } from "@dhtmlx/trial-lib-gantt";
-
-export class VueLocalData extends LocalData {
-	constructor(vm) {
-		super(vm.$emit.bind(vm));
-		this._vm = vm;
-	}
-	updateStore(obj) {
-		super.updateStore(obj);
-		for (var key in obj) {
-			const fullKey = key + "State";
-			if (typeof this._vm[fullKey] !== "undefined")
-				this._vm[fullKey] = this.state[key];
-		}
-	}
-}
-
-export class VueLocalState extends LocalState {
-	constructor(vm) {
-		const wrapper = (v, n) => {
-			let h = [];
-			return {
-				set: nv => {
-					if (v !== nv) {
-						v = vm[n] = nv;
-						h.forEach(x => x(nv));
-					}
-				},
-				subscribe: x => {
-					h.push(x);
-					x(v);
-				},
-			};
-		};
-		super(wrapper);
-	}
-	getValues() {
-		const data = super.getState();
-		const out = {};
-		for (var key in data) data[key].subscribe(v => (out[key] = v));
-
-		return out;
-	}
-	actions(store, dispatch) {
-		return super.actions(store, dispatch, nextTick);
-	}
-}

package/src/wx/Button.vue

@@ -1,54 +0,0 @@
-<template>
-	<button :class="['btn', appearance]" @click="$emit('click')">
-		<slot />
-	</button>
-</template>
-
-<script>
-	export default {
-		props: {
-			appearance: { type: String, default: "primary" },
-		},
-		emits: ["click"],
-	};
-</script>
-
-<style scoped>
-	.btn {
-		min-width: 82px;
-		padding: 8px 16px;
-		border: none;
-		border-radius: var(--wx-button-radius);
-		font: var(--wx-button-font);
-		text-transform: uppercase;
-		cursor: pointer;
-	}
-
-	.btn:active {
-		outline: none;
-		opacity: 0.7;
-	}
-
-	.btn:focus {
-		outline: none;
-	}
-
-	.primary {
-		margin-right: 20px;
-		color: var(--wx-button-primary-font-color);
-		background-color: var(--wx-button-primary-color);
-	}
-
-	.primary:hover {
-		background-color: var(--wx-button-primary-color-hover);
-	}
-
-	.danger {
-		color: var(--wx-button-danger-font-color);
-		background-color: var(--wx-button-danger-color);
-	}
-
-	.danger:hover {
-		background-color: var(--wx-button-danger-color-hover);
-	}
-</style>

package/src/wx/CNLocale.js

@@ -1,15 +0,0 @@
-import { provide, readonly } from "vue";
-import { LocaleContext } from "./locale";
-import locale from "./locales/cn";
-
-export default {
-	setup(props) {
-		if (props.words)
-			provide(LocaleContext, readonly(locale().extend(props.words)));
-		else provide(LocaleContext, readonly(locale()));
-	},
-	props: ["words"],
-	render() {
-		return this.$slots.default();
-	},
-};