@dhtmlx/trial-vue-gantt 1.1.2 → 9.1.4

package/src/wx/MaterialTheme.vue

@@ -1,107 +0,0 @@
-<template>
-	<div class="wx-default" style="height: 100%" v-if="this.$slots.default">
-		<slot />
-	</div>
-</template>
-
-<style>
-	@import "https://fonts.googleapis.com/css?family=Roboto:400,500,700,900&display=swap&subset=cyrillic-ext";
-	@import "https://cdn.materialdesignicons.com/2.7.94/css/materialdesignicons.css";
-
-	.wx-material {
-		/* common */
-		--wx-font: 400 14px Roboto;
-		--wx-font-color: #5f5f5f;
-		--wx-border-color: #ededed;
-
-		/* buttons */
-		--wx-button-font: 500 14px Roboto;
-		--wx-button-primary-font-color: #fff;
-		--wx-button-danger-font-color: #ff5252;
-		--wx-button-primary-color: #2a7fff;
-		--wx-button-primary-color-hover: #246cd9;
-		--wx-button-danger-color: transparent;
-		--wx-button-danger-color-hover: rgba(255, 82, 82, 0.2);
-		--wx-button-radius: 30px;
-
-		/* bars */
-		--wx-gantt-bar-font: 400 14px Roboto;
-		--wx-gantt-bar-border-radius: 50px;
-
-		--wx-gantt-task-color: #448aff;
-		--wx-gantt-task-font-color: #fff;
-		--wx-gantt-task-fill-color: #246cd9;
-		--wx-gantt-task-border-color: #448aff;
-
-		--wx-gantt-project-color: #1de9b6;
-		--wx-gantt-project-font-color: #5f5f5f;
-		--wx-gantt-project-fill-color: #00d19a;
-		--wx-gantt-project-border-color: #1de9b6;
-
-		--wx-gantt-milestone-color: #d33daf;
-
-		--wx-gantt-select-color: rgba(0, 199, 181, 0.2);
-		--wx-gantt-link-color: #87a4bc;
-
-		/* shadows */
-		--wx-top-shadow: 0px 3px 5px rgba(0, 0, 0, 0.1),
-			0px 1px 2px rgba(0, 0, 0, 0.1);
-
-		/* grid */
-		--wx-grid-header-font: 500 14px Roboto;
-		--wx-grid-header-font-color: #a6a6a6;
-		--wx-grid-header-text-transform: uppercase;
-		--wx-grid-header-shadow: var(--wx-top-shadow);
-
-		--wx-grid-body-font: 400 14px Roboto;
-		--wx-grid-body-font-color: #5f5f5f;
-		--wx-grid-body-row-border: 1px solid #fff;
-
-		/* timescale */
-		--wx-timescale-font: 500 12px Roboto;
-		--wx-timescale-font-color: #a6a6a6;
-		--wx-timescale-text-transform: uppercase;
-		--wx-timescale-shadow: var(--wx-top-shadow);
-		--wx-timescale-border: 1px solid transparent;
-
-		/* input */
-		--wx-label-font: 500 14px Roboto;
-		--wx-label-font-color: #5f5f5f;
-
-		--wx-input-font: 400 14px Roboto;
-		--wx-input-font-color: #5f5f5f;
-		--wx-input-padding: 8px 11px;
-		--wx-input-border: 1px solid #dfdfdf;
-		--wx-input-border-radius: 2px;
-		--wx-input-focus-color: #2a7fff;
-
-		/* calendar */
-		--wx-calendar-border: 1px solid #dfdfdf;
-		--wx-calendar-month-font: 400 12px Roboto;
-		--wx-calendar-month-font-color: #5f5f5f;
-		--wx-calendar-days-font: 400 10px Roboto;
-		--wx-calendar-days-font-color: rgba(0, 0, 0, 0.5);
-		--wx-calendar-dates-font: 400 12px Roboto;
-		--wx-calendar-dates-font-color: #4f4f4f;
-
-		/* markers */
-		--wx-gantt-marker-font: 500 12px Roboto;
-		--wx-gantt-marker-font-color: #fff;
-		--wx-gantt-marker-color: rgba(6, 189, 248, 0.77);
-
-		/* tooltips */
-		--wx-tooltip-font: 400 12px Roboto;
-		--wx-tooltip-font-color: #5f5f5f;
-
-		/* tooltips */
-
-		/* icons */
-		--wx-add-btn-icon: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.52734 0.671875H6.47266C6.37891 0.671875 6.33203 0.71875 6.33203 0.8125V6.33203H1.09375C1 6.33203 0.953125 6.37891 0.953125 6.47266V7.52734C0.953125 7.62109 1 7.66797 1.09375 7.66797H6.33203V13.1875C6.33203 13.2812 6.37891 13.3281 6.47266 13.3281H7.52734C7.62109 13.3281 7.66797 13.2812 7.66797 13.1875V7.66797H12.9062C13 7.66797 13.0469 7.62109 13.0469 7.52734V6.47266C13.0469 6.37891 13 6.33203 12.9062 6.33203H7.66797V0.8125C7.66797 0.71875 7.62109 0.671875 7.52734 0.671875Z' fill='%2300C7B5' fill-opacity='0.54'/%3E%3C/svg%3E ");
-		--wx-open-btn-icon: url("data:image/svg+xml,%3Csvg width='5' height='10' viewBox='0 0 5 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10L5 5L0 0V10Z' fill='%235F5F5F' fill-opacity='0.54'/%3E%3C/svg%3E%0A");
-		--wx-close-btn-icon: url("data:image/svg+xml,%3Csvg width='10' height='5' viewBox='0 0 10 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0L5 5L10 0H0Z' fill='%235F5F5F' fill-opacity='0.54'/%3E%3C/svg%3E%0A");
-		--wx-close-sb-icon: url("data:image/svg+xml,%3Csvg width='15' height='14' viewBox='0 0 15 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.0344 1.42188L12.6281 0.015625L7.04999 5.59375L1.47186 0.015625L0.0656128 1.42188L5.64374 7L0.0656128 12.5781L1.47186 13.9844L7.04999 8.40625L12.6281 13.9844L14.0344 12.5781L8.45624 7L14.0344 1.42188Z' fill='black' fill-opacity='0.54'/%3E%3C/svg%3E%0A");
-		--wx-show-more-icon: url("data:image/svg+xml,%3Csvg width='10' height='7' viewBox='0 0 10 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.175 0.158203L5 3.97487L8.825 0.158203L10 1.3332L5 6.3332L0 1.3332L1.175 0.158203Z' fill='%235F5F5F'/%3E%3C/svg%3E ");
-		--wx-calendar-icon: url("data:image/svg+xml,%3Csvg width='16' height='17' viewBox='0 0 16 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.8203 15.3203H2.17969V6.17969H13.8203V15.3203ZM11.3203 0.320312V2H4.67969V0.320312H3V2H2.17969C1.6849 2 1.28125 2.15625 0.96875 2.46875C0.65625 2.78125 0.5 3.1849 0.5 3.67969V15.3203C0.5 15.7891 0.65625 16.1927 0.96875 16.5312C1.30729 16.8438 1.71094 17 2.17969 17H13.8203C14.2891 17 14.6797 16.8438 14.9922 16.5312C15.3307 16.1927 15.5 15.7891 15.5 15.3203V3.67969C15.5 3.1849 15.3307 2.78125 14.9922 2.46875C14.6797 2.15625 14.2891 2 13.8203 2H13V0.320312H11.3203ZM12.1797 9.5H8V13.6797H12.1797V9.5Z' fill='black' fill-opacity='0.5'/%3E%3C/svg%3E ");
-		--wx-remove-link-icon: url("data:image/svg+xml,%3Csvg width='12' height='15' viewBox='0 0 12 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 13.3203C1 13.7891 1.15625 14.1927 1.46875 14.5312C1.80729 14.8438 2.21094 15 2.67969 15H9.32031C9.78906 15 10.1797 14.8438 10.4922 14.5312C10.8307 14.1927 11 13.7891 11 13.3203V3.32031H1V13.3203ZM3.03125 7.38281L4.24219 6.21094L6 8.00781L7.75781 6.21094L8.92969 7.38281L7.17188 9.17969L8.92969 10.9375L7.75781 12.1094L6 10.3516L4.24219 12.1094L3.07031 10.9375L4.82812 9.17969L3.03125 7.38281ZM8.92969 0.820312L8.07031 0H3.92969L3.07031 0.820312H0.179688V2.5H11.8203V0.820312H8.92969Z' fill='black' fill-opacity='0.5'/%3E%3C/svg%3E ");
-	}
-</style>

package/src/wx/RULocale.js

@@ -1,15 +0,0 @@
-import { provide, readonly } from "vue";
-import { LocaleContext } from "./locale";
-import locale from "./locales/ru";
-
-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();
-	},
-};

package/src/wx/Select.vue

@@ -1,75 +0,0 @@
-<template>
-	<div class="container">
-		<label class="label">{{ label }}</label>
-		<div class="wrapper">
-			<select class="select" :value="value" @change="select">
-				<option v-for="option in options" :key="option" :value="option">
-					{{ option }}
-				</option>
-			</select>
-			<div class="icon" />
-		</div>
-	</div>
-</template>
-
-<script>
-	export default {
-		props: {
-			label: { type: String, default: "" },
-			value: { type: String, default: "" },
-			options: { type: Array, default: () => [] },
-		},
-		emits: ["change"],
-
-		methods: {
-			select(e) {
-				this.$emit("change", e.target.value);
-			},
-		},
-	};
-</script>
-
-<style scoped>
-	.container {
-		margin-bottom: 20px;
-	}
-
-	.label {
-		display: block;
-		margin-bottom: 10px;
-		font: var(--wx-label-font);
-		color: var(--wx-label-font-color);
-	}
-
-	.wrapper {
-		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);
-		text-transform: capitalize;
-		outline: none;
-		appearance: none;
-	}
-
-	.select:focus {
-		border: 1px solid var(--wx-input-focus-color);
-	}
-
-	.icon {
-		position: absolute;
-		top: 50%;
-		right: 11px;
-		transform: translateY(-50%);
-		width: 20px;
-		height: 20px;
-		background: var(--wx-show-more-icon) center center no-repeat;
-		pointer-events: none;
-	}
-</style>

package/src/wx/Slider.vue

@@ -1,150 +0,0 @@
-<template>
-	<div class="slider">
-		<label class="label">{{ label }}</label>
-		<input
-			type="range"
-			class="range"
-			:style="bgStyle"
-			:value="value"
-			:min="min"
-			:max="max"
-			:step="step"
-			@input="input"
-		/>
-	</div>
-</template>
-
-<script>
-	export default {
-		props: {
-			label: { type: String, default: "" },
-			value: { type: Number, default: 0 },
-			min: { type: Number, default: 0 },
-			max: { type: Number, default: 100 },
-			step: { type: Number, default: 1 },
-			inactive: { type: String, default: "#dbdbdb" },
-		},
-		emits: ["change"],
-
-		methods: {
-			input(e) {
-				this.$emit("change", +e.target.value);
-			},
-		},
-
-		computed: {
-			bgStyle() {
-				const { value, min, max, inactive } = this;
-				const progress = ((value - min) / (max - min)) * 100 + "%";
-				return `background: linear-gradient(90deg, var(--wx-input-focus-color) 0% ${progress}, ${inactive} ${progress} 100%);`;
-			},
-		},
-	};
-</script>
-
-<style scoped>
-	.slider {
-		margin-bottom: 20px;
-	}
-
-	.label {
-		display: block;
-		margin-bottom: 10px;
-		font: var(--wx-label-font);
-		color: var(--wx-label-font-color);
-	}
-
-	.range {
-		width: 100%;
-		background-color: #dbdbdb;
-		-webkit-appearance: none;
-		border-radius: 4px;
-	}
-
-	.range:focus {
-		outline: none;
-	}
-
-	.range::-webkit-slider-runnable-track {
-		border-radius: 4px;
-		width: 100%;
-		height: 8px;
-		cursor: pointer;
-	}
-
-	.range::-webkit-slider-thumb {
-		margin-top: -6px;
-		width: 20px;
-		height: 20px;
-		background: var(--wx-input-focus-color);
-		border: 2px solid #ffffff;
-		border-radius: 50%;
-		cursor: pointer;
-		-webkit-appearance: none;
-	}
-
-	.range::-moz-range-track {
-		background-color: transparent;
-		border-top: 5px solid #fff;
-		border-bottom: 5px solid #fff;
-		width: 100%;
-		height: 8px;
-		cursor: pointer;
-	}
-
-	.range::-moz-range-thumb {
-		width: 14px;
-		height: 14px;
-		background: var(--wx-input-focus-color);
-		border: 2px solid #ffffff;
-		border-radius: 50%;
-		cursor: pointer;
-	}
-
-	.range::-moz-range-progress {
-		background-color: var(--wx-input-focus-color);
-		height: 8px;
-		border-top-left-radius: 6px;
-		border-bottom-left-radius: 6px;
-	}
-
-	.range::-ms-track {
-		background: transparent;
-		border-color: transparent;
-		border-width: 5px 0;
-		color: transparent;
-		width: 100%;
-		height: 8px;
-		cursor: pointer;
-	}
-
-	.range::-ms-fill-lower {
-		background: var(--wx-input-focus-color);
-		border: 0.2px solid var(--wx-input-focus-color);
-		border-radius: 8px;
-	}
-
-	.range::-ms-fill-upper {
-		background: #dbdbdb;
-		border: 0.2px solid #dbdbdb;
-		border-radius: 8px;
-	}
-
-	.range::-ms-thumb {
-		width: 16px;
-		height: 16px;
-		background: var(--wx-focus-color);
-		border: 2px solid #ffffff;
-		border-radius: 50%;
-		cursor: pointer;
-		margin-top: 0px;
-	}
-
-	.range:focus::-ms-fill-lower {
-		background: var(--wx-focus-color);
-	}
-
-	.range:focus::-ms-fill-upper {
-		background: #dbdbdb;
-	}
-</style>

package/src/wx/Text.vue

@@ -1,73 +0,0 @@
-<template>
-	<div class="text">
-		<label class="label">{{ label }}</label>
-		<input
-			ref="node"
-			type="text"
-			class="input"
-			:value="value"
-			:placeholder="placeholder"
-			:readonly="readonly"
-			:disabled="disabled"
-			@input="input"
-		/>
-	</div>
-</template>
-
-<script>
-	export default {
-		props: {
-			label: { type: String, default: "" },
-			value: { type: String, default: "" },
-			placeholder: { type: String, default: "" },
-			readonly: { type: Boolean, default: false },
-			disabled: { type: Boolean, default: false },
-			autofocus: { type: Boolean, default: false },
-		},
-		emits: ["change"],
-
-		data: () => ({
-			node: null,
-		}),
-
-		methods: {
-			input(e) {
-				this.$emit("change", e.target.value);
-			},
-		},
-
-		mounted() {
-			if (this.autofocus) {
-				this.$refs.node.focus();
-			}
-		},
-	};
-</script>
-
-<style scoped>
-	.text {
-		margin-bottom: 20px;
-	}
-
-	.label {
-		display: block;
-		margin-bottom: 10px;
-		font: var(--wx-label-font);
-		color: var(--wx-label-font-color);
-	}
-
-	.input {
-		box-sizing: border-box;
-		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;
-	}
-
-	.input:focus {
-		border: 1px solid var(--wx-input-focus-color);
-	}
-</style>

package/src/wx/Textarea.vue

@@ -1,63 +0,0 @@
-<template>
-	<div class="area">
-		<label class="label">{{ label }}</label>
-		<textarea
-			class="textarea"
-			:value="value"
-			:placeholder="placeholder"
-			:readonly="readonly"
-			:disabled="disabled"
-			@input="input"
-		/>
-	</div>
-</template>
-
-<script>
-	export default {
-		props: {
-			label: { type: String, default: "" },
-			value: { type: String, default: "" },
-			placeholder: { type: String, default: "" },
-			readonly: { type: Boolean, default: false },
-			disabled: { type: Boolean, default: false },
-		},
-		emits: ["change"],
-
-		methods: {
-			input(e) {
-				this.$emit("change", e.target.value);
-			},
-		},
-	};
-</script>
-
-<style scoped>
-	.area {
-		margin-bottom: 20px;
-		font: var(--wx-font);
-	}
-
-	.label {
-		display: block;
-		margin-bottom: 10px;
-		font: var(--wx-label-font);
-		color: var(--wx-label-font-color);
-	}
-
-	.textarea {
-		box-sizing: border-box;
-		width: 100%;
-		height: 70px;
-		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);
-		resize: vertical;
-		outline: none;
-	}
-
-	.textarea:focus {
-		border: 1px solid var(--wx-input-focus-color);
-	}
-</style>

package/src/wx/Tooltip.vue

@@ -1,110 +0,0 @@
-<template>
-	<div class="area" ref="area" @mousemove="move">
-		<div
-			v-if="(id && content) || tooltip"
-			class="tooltip"
-			ref="tooltipNode"
-			:style="{ top: pos.top + 'px', left: pos.left + 'px' }"
-		>
-			<template v-if="id">
-				<component :is="content" :data="tooltipData"></component>
-			</template>
-
-			<template v-else>{{ tooltip }}</template>
-		</div>
-
-		<slot />
-	</div>
-</template>
-
-<script>
-	export default {
-		props: {
-			content: { default: null },
-			data: { default: null },
-		},
-
-		data: () => ({
-			id: null,
-			tooltip: null,
-			tooltipData: null,
-			tooltipNode: null,
-			target: null,
-			targetCoords: null,
-			areaCoords: null,
-			pos: null,
-		}),
-
-		methods: {
-			locate(node) {
-				while (node) {
-					if (node.getAttribute) {
-						const id = node.getAttribute("data-tooltip-id");
-						const tooltip = node.getAttribute("data-tooltip");
-						if (id || tooltip) return { id, tooltip, target: node };
-					}
-					node = node.parentNode;
-				}
-
-				return { id: null, tooltip: null, target: null };
-			},
-
-			move(e) {
-				const data = this.locate(e.target);
-
-				this.id = data.id;
-				this.tooltip = data.tooltip;
-				this.target = data.target;
-
-				if (!this.id && !this.tooltip) return;
-
-				if (this.id && this.data) {
-					this.tooltipData = this.data(this.id);
-				}
-
-				this.targetCoords = this.target.getBoundingClientRect();
-				this.areaCoords = this.$refs.area.getBoundingClientRect();
-
-				const top =
-					this.targetCoords.top +
-					this.targetCoords.height -
-					this.areaCoords.top +
-					5;
-				const left = this.targetCoords.left - this.areaCoords.left;
-
-				this.pos = { top, left };
-			},
-		},
-
-		updated() {
-			if (this.$refs.tooltipNode) {
-				const node = this.$refs.tooltipNode;
-				const tooltipCoords = node.getBoundingClientRect();
-				if (tooltipCoords.right >= this.areaCoords.right) {
-					this.pos.left = this.areaCoords.width - tooltipCoords.width - 5;
-				}
-				if (tooltipCoords.bottom >= this.areaCoords.bottom) {
-					this.pos.top = this.targetCoords.top - tooltipCoords.height - 5;
-				}
-			}
-		},
-	};
-</script>
-
-<style scoped>
-	.area {
-		position: relative;
-		height: 100%;
-		width: 100%;
-	}
-</style>
-
-<style>
-	.tooltip {
-		position: absolute;
-		z-index: 10;
-		font: var(--wx-small-font);
-		color: var(--wx-font-color);
-		background-color: #fff;
-	}
-</style>

package/src/wx/index.js

@@ -1,35 +0,0 @@
-import Button from "./Button.vue";
-import Calendar from "./Calendar.vue";
-import Counter from "./Counter.vue";
-import Datepicker from "./Datepicker.vue";
-import Select from "./Select.vue";
-import Slider from "./Slider.vue";
-import Text from "./Text.vue";
-import Textarea from "./Textarea.vue";
-import Tooltip from "./Textarea.vue";
-
-import DefaultTheme from "./DefaultTheme.vue";
-import MaterialTheme from "./MaterialTheme.vue";
-
-import RULocale from "./RULocale";
-import ENLocale from "./ENLocale";
-import CNLocale from "./CNLocale";
-
-export const wx = {
-	Button,
-	Calendar,
-	Counter,
-	Datepicker,
-	Select,
-	Slider,
-	Text,
-	Textarea,
-	Tooltip,
-
-	DefaultTheme,
-	MaterialTheme,
-
-	RULocale,
-	CNLocale,
-	ENLocale,
-};

package/src/wx/locale.js

@@ -1 +0,0 @@
-export const LocaleContext = Symbol("WX Locale");

package/src/wx/locales/cn.js

@@ -1,39 +0,0 @@
-const days = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
-
-const months = [
-	"一月",
-	"二月",
-	"三月",
-	"四月",
-	"五月",
-	"六月",
-	"七月",
-	"八月",
-	"九月",
-	"十月",
-	"十一月",
-	"十二月",
-];
-
-let data = {
-	__dates: {
-		months,
-		days,
-	},
-};
-
-export default function wrapper() {
-	return {
-		_(key) {
-			return data[key] || key;
-		},
-		__(group, key) {
-			const block = data[group];
-			return block ? block[key] || key : key;
-		},
-		extend(values) {
-			data = { ...data, ...values };
-			return this;
-		},
-	};
-}