vue3-gantt-elastic
Version:
gantt-elastic Project was wrapped with vue3 based on gantt-elastic-wrapvue3
1,183 lines • 245 kB
JavaScript
var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b2) => {
for (var prop in b2 || (b2 = {}))
if (__hasOwnProp.call(b2, prop))
__defNormalProp(a, prop, b2[prop]);
if (__getOwnPropSymbols)
for (var prop of __getOwnPropSymbols(b2)) {
if (__propIsEnum.call(b2, prop))
__defNormalProp(a, prop, b2[prop]);
}
return a;
};
var __spreadProps = (a, b2) => __defProps(a, __getOwnPropDescs(b2));
import { openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, createCommentVNode, resolveComponent, Fragment, renderList, createBlock, toDisplayString, renderSlot, withCtx, withDirectives, createVNode, vShow, resolveDynamicComponent, withModifiers, mergeProps, toRefs, ref, computed, onMounted, onUnmounted, watch, withKeys, createTextVNode } from "vue";
var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
var dayjs_min = { exports: {} };
(function(module, exports) {
!function(t, e) {
module.exports = e();
}(commonjsGlobal, function() {
var t = 1e3, e = 6e4, n = 36e5, r = "millisecond", i = "second", s2 = "minute", u2 = "hour", a = "day", o2 = "week", f2 = "month", h2 = "quarter", c2 = "year", d2 = "date", $ = "Invalid Date", l = /^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/, y2 = /\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g, M = { name: "en", weekdays: "Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"), months: "January_February_March_April_May_June_July_August_September_October_November_December".split("_") }, m2 = function(t2, e2, n2) {
var r2 = String(t2);
return !r2 || r2.length >= e2 ? t2 : "" + Array(e2 + 1 - r2.length).join(n2) + t2;
}, g2 = { s: m2, z: function(t2) {
var e2 = -t2.utcOffset(), n2 = Math.abs(e2), r2 = Math.floor(n2 / 60), i2 = n2 % 60;
return (e2 <= 0 ? "+" : "-") + m2(r2, 2, "0") + ":" + m2(i2, 2, "0");
}, m: function t2(e2, n2) {
if (e2.date() < n2.date())
return -t2(n2, e2);
var r2 = 12 * (n2.year() - e2.year()) + (n2.month() - e2.month()), i2 = e2.clone().add(r2, f2), s3 = n2 - i2 < 0, u3 = e2.clone().add(r2 + (s3 ? -1 : 1), f2);
return +(-(r2 + (n2 - i2) / (s3 ? i2 - u3 : u3 - i2)) || 0);
}, a: function(t2) {
return t2 < 0 ? Math.ceil(t2) || 0 : Math.floor(t2);
}, p: function(t2) {
return { M: f2, y: c2, w: o2, d: a, D: d2, h: u2, m: s2, s: i, ms: r, Q: h2 }[t2] || String(t2 || "").toLowerCase().replace(/s$/, "");
}, u: function(t2) {
return t2 === void 0;
} }, v2 = "en", D = {};
D[v2] = M;
var p2 = function(t2) {
return t2 instanceof _;
}, S2 = function t2(e2, n2, r2) {
var i2;
if (!e2)
return v2;
if (typeof e2 == "string") {
var s3 = e2.toLowerCase();
D[s3] && (i2 = s3), n2 && (D[s3] = n2, i2 = s3);
var u3 = e2.split("-");
if (!i2 && u3.length > 1)
return t2(u3[0]);
} else {
var a2 = e2.name;
D[a2] = e2, i2 = a2;
}
return !r2 && i2 && (v2 = i2), i2 || !r2 && v2;
}, w2 = function(t2, e2) {
if (p2(t2))
return t2.clone();
var n2 = typeof e2 == "object" ? e2 : {};
return n2.date = t2, n2.args = arguments, new _(n2);
}, O = g2;
O.l = S2, O.i = p2, O.w = function(t2, e2) {
return w2(t2, { locale: e2.$L, utc: e2.$u, x: e2.$x, $offset: e2.$offset });
};
var _ = function() {
function M2(t2) {
this.$L = S2(t2.locale, null, true), this.parse(t2);
}
var m3 = M2.prototype;
return m3.parse = function(t2) {
this.$d = function(t3) {
var e2 = t3.date, n2 = t3.utc;
if (e2 === null)
return new Date(NaN);
if (O.u(e2))
return new Date();
if (e2 instanceof Date)
return new Date(e2);
if (typeof e2 == "string" && !/Z$/i.test(e2)) {
var r2 = e2.match(l);
if (r2) {
var i2 = r2[2] - 1 || 0, s3 = (r2[7] || "0").substring(0, 3);
return n2 ? new Date(Date.UTC(r2[1], i2, r2[3] || 1, r2[4] || 0, r2[5] || 0, r2[6] || 0, s3)) : new Date(r2[1], i2, r2[3] || 1, r2[4] || 0, r2[5] || 0, r2[6] || 0, s3);
}
}
return new Date(e2);
}(t2), this.$x = t2.x || {}, this.init();
}, m3.init = function() {
var t2 = this.$d;
this.$y = t2.getFullYear(), this.$M = t2.getMonth(), this.$D = t2.getDate(), this.$W = t2.getDay(), this.$H = t2.getHours(), this.$m = t2.getMinutes(), this.$s = t2.getSeconds(), this.$ms = t2.getMilliseconds();
}, m3.$utils = function() {
return O;
}, m3.isValid = function() {
return !(this.$d.toString() === $);
}, m3.isSame = function(t2, e2) {
var n2 = w2(t2);
return this.startOf(e2) <= n2 && n2 <= this.endOf(e2);
}, m3.isAfter = function(t2, e2) {
return w2(t2) < this.startOf(e2);
}, m3.isBefore = function(t2, e2) {
return this.endOf(e2) < w2(t2);
}, m3.$g = function(t2, e2, n2) {
return O.u(t2) ? this[e2] : this.set(n2, t2);
}, m3.unix = function() {
return Math.floor(this.valueOf() / 1e3);
}, m3.valueOf = function() {
return this.$d.getTime();
}, m3.startOf = function(t2, e2) {
var n2 = this, r2 = !!O.u(e2) || e2, h3 = O.p(t2), $2 = function(t3, e3) {
var i2 = O.w(n2.$u ? Date.UTC(n2.$y, e3, t3) : new Date(n2.$y, e3, t3), n2);
return r2 ? i2 : i2.endOf(a);
}, l2 = function(t3, e3) {
return O.w(n2.toDate()[t3].apply(n2.toDate("s"), (r2 ? [0, 0, 0, 0] : [23, 59, 59, 999]).slice(e3)), n2);
}, y3 = this.$W, M3 = this.$M, m4 = this.$D, g3 = "set" + (this.$u ? "UTC" : "");
switch (h3) {
case c2:
return r2 ? $2(1, 0) : $2(31, 11);
case f2:
return r2 ? $2(1, M3) : $2(0, M3 + 1);
case o2:
var v3 = this.$locale().weekStart || 0, D2 = (y3 < v3 ? y3 + 7 : y3) - v3;
return $2(r2 ? m4 - D2 : m4 + (6 - D2), M3);
case a:
case d2:
return l2(g3 + "Hours", 0);
case u2:
return l2(g3 + "Minutes", 1);
case s2:
return l2(g3 + "Seconds", 2);
case i:
return l2(g3 + "Milliseconds", 3);
default:
return this.clone();
}
}, m3.endOf = function(t2) {
return this.startOf(t2, false);
}, m3.$set = function(t2, e2) {
var n2, o3 = O.p(t2), h3 = "set" + (this.$u ? "UTC" : ""), $2 = (n2 = {}, n2[a] = h3 + "Date", n2[d2] = h3 + "Date", n2[f2] = h3 + "Month", n2[c2] = h3 + "FullYear", n2[u2] = h3 + "Hours", n2[s2] = h3 + "Minutes", n2[i] = h3 + "Seconds", n2[r] = h3 + "Milliseconds", n2)[o3], l2 = o3 === a ? this.$D + (e2 - this.$W) : e2;
if (o3 === f2 || o3 === c2) {
var y3 = this.clone().set(d2, 1);
y3.$d[$2](l2), y3.init(), this.$d = y3.set(d2, Math.min(this.$D, y3.daysInMonth())).$d;
} else
$2 && this.$d[$2](l2);
return this.init(), this;
}, m3.set = function(t2, e2) {
return this.clone().$set(t2, e2);
}, m3.get = function(t2) {
return this[O.p(t2)]();
}, m3.add = function(r2, h3) {
var d3, $2 = this;
r2 = Number(r2);
var l2 = O.p(h3), y3 = function(t2) {
var e2 = w2($2);
return O.w(e2.date(e2.date() + Math.round(t2 * r2)), $2);
};
if (l2 === f2)
return this.set(f2, this.$M + r2);
if (l2 === c2)
return this.set(c2, this.$y + r2);
if (l2 === a)
return y3(1);
if (l2 === o2)
return y3(7);
var M3 = (d3 = {}, d3[s2] = e, d3[u2] = n, d3[i] = t, d3)[l2] || 1, m4 = this.$d.getTime() + r2 * M3;
return O.w(m4, this);
}, m3.subtract = function(t2, e2) {
return this.add(-1 * t2, e2);
}, m3.format = function(t2) {
var e2 = this, n2 = this.$locale();
if (!this.isValid())
return n2.invalidDate || $;
var r2 = t2 || "YYYY-MM-DDTHH:mm:ssZ", i2 = O.z(this), s3 = this.$H, u3 = this.$m, a2 = this.$M, o3 = n2.weekdays, f3 = n2.months, h3 = function(t3, n3, i3, s4) {
return t3 && (t3[n3] || t3(e2, r2)) || i3[n3].slice(0, s4);
}, c3 = function(t3) {
return O.s(s3 % 12 || 12, t3, "0");
}, d3 = n2.meridiem || function(t3, e3, n3) {
var r3 = t3 < 12 ? "AM" : "PM";
return n3 ? r3.toLowerCase() : r3;
}, l2 = { YY: String(this.$y).slice(-2), YYYY: this.$y, M: a2 + 1, MM: O.s(a2 + 1, 2, "0"), MMM: h3(n2.monthsShort, a2, f3, 3), MMMM: h3(f3, a2), D: this.$D, DD: O.s(this.$D, 2, "0"), d: String(this.$W), dd: h3(n2.weekdaysMin, this.$W, o3, 2), ddd: h3(n2.weekdaysShort, this.$W, o3, 3), dddd: o3[this.$W], H: String(s3), HH: O.s(s3, 2, "0"), h: c3(1), hh: c3(2), a: d3(s3, u3, true), A: d3(s3, u3, false), m: String(u3), mm: O.s(u3, 2, "0"), s: String(this.$s), ss: O.s(this.$s, 2, "0"), SSS: O.s(this.$ms, 3, "0"), Z: i2 };
return r2.replace(y2, function(t3, e3) {
return e3 || l2[t3] || i2.replace(":", "");
});
}, m3.utcOffset = function() {
return 15 * -Math.round(this.$d.getTimezoneOffset() / 15);
}, m3.diff = function(r2, d3, $2) {
var l2, y3 = O.p(d3), M3 = w2(r2), m4 = (M3.utcOffset() - this.utcOffset()) * e, g3 = this - M3, v3 = O.m(this, M3);
return v3 = (l2 = {}, l2[c2] = v3 / 12, l2[f2] = v3, l2[h2] = v3 / 3, l2[o2] = (g3 - m4) / 6048e5, l2[a] = (g3 - m4) / 864e5, l2[u2] = g3 / n, l2[s2] = g3 / e, l2[i] = g3 / t, l2)[y3] || g3, $2 ? v3 : O.a(v3);
}, m3.daysInMonth = function() {
return this.endOf(f2).$D;
}, m3.$locale = function() {
return D[this.$L];
}, m3.locale = function(t2, e2) {
if (!t2)
return this.$L;
var n2 = this.clone(), r2 = S2(t2, e2, true);
return r2 && (n2.$L = r2), n2;
}, m3.clone = function() {
return O.w(this.$d, this);
}, m3.toDate = function() {
return new Date(this.valueOf());
}, m3.toJSON = function() {
return this.isValid() ? this.toISOString() : null;
}, m3.toISOString = function() {
return this.$d.toISOString();
}, m3.toString = function() {
return this.$d.toUTCString();
}, M2;
}(), T = _.prototype;
return w2.prototype = T, [["$ms", r], ["$s", i], ["$m", s2], ["$H", u2], ["$W", a], ["$M", f2], ["$y", c2], ["$D", d2]].forEach(function(t2) {
T[t2[1]] = function(e2) {
return this.$g(e2, t2[0], t2[1]);
};
}), w2.extend = function(t2, e2) {
return t2.$i || (t2(e2, _, w2), t2.$i = true), w2;
}, w2.locale = S2, w2.isDayjs = p2, w2.unix = function(t2) {
return w2(1e3 * t2);
}, w2.en = D[v2], w2.Ls = D, w2.p = {}, w2;
});
})(dayjs_min);
var dayjs = dayjs_min.exports;
var _export_sfc = (sfc, props) => {
const target = sfc.__vccOpts || sfc;
for (const [key, val] of props) {
target[key] = val;
}
return target;
};
const _sfc_main$i = {
name: "Expander",
inject: ["root"],
props: ["tasks", "options", "type"],
data() {
const border = 0.5;
return {
border,
borderStyle: {
"stroke-width": border
},
lineOffset: 5
};
},
computed: {
style() {
if (this.type !== "taskList") {
return {};
}
const margin = this.root.state.options.taskList.expander.margin;
const padding = this.tasks[0].parents.length * this.root.state.options.taskList.expander.padding;
return {
"padding-left": padding + margin + "px",
margin: "auto 0"
};
},
allChildren() {
const children = [];
this.tasks.forEach((task) => {
task.allChildren.forEach((childId) => {
children.push(childId);
});
});
return children;
},
collapsed() {
if (this.tasks.length === 0) {
return false;
}
let collapsed = 0;
for (let i = 0, len = this.tasks.length; i < len; i++) {
if (this.tasks[i].collapsed) {
collapsed++;
}
}
return collapsed === this.tasks.length;
}
},
methods: {
getClassPrefix(full = true) {
return `${full ? "gantt-elastic__" : ""}${this.options.type}-expander`;
},
toggle() {
if (this.tasks.length === 0) {
return;
}
const collapsed = !this.collapsed;
this.tasks.forEach((task) => {
task.collapsed = collapsed;
});
}
}
};
const _hoisted_1$d = ["width", "height"];
const _hoisted_2$a = ["x", "y", "width", "height"];
const _hoisted_3$8 = ["x1", "y1", "x2", "y2"];
const _hoisted_4$6 = ["x1", "y1", "x2", "y2"];
function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("div", {
class: normalizeClass($options.getClassPrefix() + "-wrapper"),
style: normalizeStyle(__spreadValues(__spreadValues({}, $options.root.style[$options.getClassPrefix(false) + "-wrapper"]), $options.style))
}, [
$options.allChildren.length ? (openBlock(), createElementBlock("svg", {
key: 0,
class: normalizeClass($options.getClassPrefix() + "-content"),
style: normalizeStyle(__spreadValues({}, $options.root.style[$options.getClassPrefix(false) + "-content"])),
width: $props.options.size,
height: $props.options.size,
onClick: _cache[0] || (_cache[0] = (...args) => $options.toggle && $options.toggle(...args))
}, [
createElementVNode("rect", {
class: normalizeClass($options.getClassPrefix() + "-border"),
style: normalizeStyle(__spreadValues(__spreadValues({}, $options.root.style[$options.getClassPrefix(false) + "-border"]), $data.borderStyle)),
x: $data.border,
y: $data.border,
width: $props.options.size - $data.border * 2,
height: $props.options.size - $data.border * 2,
rx: "2",
ry: "2"
}, null, 14, _hoisted_2$a),
$options.allChildren.length ? (openBlock(), createElementBlock("line", {
key: 0,
class: normalizeClass($options.getClassPrefix() + "-line"),
style: normalizeStyle(__spreadValues({}, $options.root.style[$options.getClassPrefix(false) + "-line"])),
x1: $data.lineOffset,
y1: $props.options.size / 2,
x2: $props.options.size - $data.lineOffset,
y2: $props.options.size / 2
}, null, 14, _hoisted_3$8)) : createCommentVNode("", true),
$options.collapsed ? (openBlock(), createElementBlock("line", {
key: 1,
class: normalizeClass($options.getClassPrefix() + "-line"),
style: normalizeStyle(__spreadValues({}, $options.root.style[$options.getClassPrefix(false) + "-line"])),
x1: $props.options.size / 2,
y1: $data.lineOffset,
x2: $props.options.size / 2,
y2: $props.options.size - $data.lineOffset
}, null, 14, _hoisted_4$6)) : createCommentVNode("", true)
], 14, _hoisted_1$d)) : createCommentVNode("", true)
], 6);
}
var Expander = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", _sfc_render$i]]);
const _sfc_main$h = {
name: "TaskListHeader",
components: {
TaskListExpander: Expander
},
inject: ["root"],
data() {
return {
resizer: {
moving: false,
x: 0
}
};
},
computed: {
collapsible() {
return this.root.state.tasks.filter((task) => task.allChildren.length > 0);
}
},
methods: {
getStyle(column) {
return {
width: column.finalWidth + "px"
};
},
resizerMouseDown(event, column) {
if (!this.resizer.moving) {
this.resizer.moving = column;
this.resizer.x = event.clientX;
this.resizer.initialWidth = column.width;
this.$root.emitter.emit("taskList-column-width-change-start", this.resizer.moving);
}
},
resizerMouseMove(event) {
if (this.resizer.moving) {
const lastWidth = this.resizer.moving.width;
this.resizer.moving.width = this.resizer.initialWidth + event.clientX - this.resizer.x;
if (this.resizer.moving.width < this.root.state.options.taskList.minWidth) {
this.resizer.moving.width = this.root.state.options.taskList.minWidth;
}
if (lastWidth !== this.resizer.moving.width) {
this.$root.emitter.emit("taskList-column-width-change", this.resizer.moving);
}
}
},
resizerMouseUp(event) {
if (this.resizer.moving) {
this.$root.emitter.emit("taskList-column-width-change-stop", this.resizer.moving);
this.resizer.moving = false;
}
}
},
created() {
this.mouseUpListener = document.addEventListener("mouseup", this.resizerMouseUp.bind(this));
this.mouseMoveListener = document.addEventListener("mousemove", this.resizerMouseMove.bind(this));
this.$root.emitter.on("main-view-mousemove", this.resizerMouseMove);
this.$root.emitter.on("main-view-mouseup", this.resizerMouseUp);
},
beforeDestroy() {
document.removeEventListener("mouseup", this.resizerMouseUp);
document.removeEventListener("mousemove", this.resizerMouseMove);
}
};
const _hoisted_1$c = ["column"];
const _hoisted_2$9 = ["column", "onMousedown"];
function _sfc_render$h(_ctx, _cache, $props, $setup, $data, $options) {
const _component_task_list_expander = resolveComponent("task-list-expander");
return openBlock(), createElementBlock("div", {
class: "gantt-elastic__task-list-header",
style: normalizeStyle(__spreadProps(__spreadValues({}, $options.root.style["task-list-header"]), {
height: `${$options.root.state.options.calendar.height}px`,
"margin-bottom": `${$options.root.state.options.calendar.gap}px`
}))
}, [
(openBlock(true), createElementBlock(Fragment, null, renderList($options.root.getTaskListColumns, (column) => {
return openBlock(), createElementBlock("div", {
class: "gantt-elastic__task-list-header-column",
style: normalizeStyle(__spreadValues(__spreadValues(__spreadValues({}, $options.root.style["task-list-header-column"]), column.style["task-list-header-column"]), $options.getStyle(column))),
key: column._id
}, [
column.expander ? (openBlock(), createBlock(_component_task_list_expander, {
key: 0,
tasks: $options.collapsible,
options: $options.root.state.options.taskList.expander
}, null, 8, ["tasks", "options"])) : createCommentVNode("", true),
createElementVNode("div", {
class: "gantt-elastic__task-list-header-label",
style: normalizeStyle(__spreadValues(__spreadValues({}, $options.root.style["task-list-header-label"]), column.style["task-list-header-label"])),
column,
onMouseup: _cache[0] || (_cache[0] = (...args) => $options.resizerMouseUp && $options.resizerMouseUp(...args))
}, toDisplayString(column.label), 45, _hoisted_1$c),
createElementVNode("div", {
class: "gantt-elastic__task-list-header-resizer-wrapper",
style: normalizeStyle(__spreadValues(__spreadValues({}, $options.root.style["task-list-header-resizer-wrapper"]), column.style["task-list-header-resizer-wrapper"])),
column,
onMousedown: ($event) => $options.resizerMouseDown($event, column)
}, [
createElementVNode("div", {
class: "gantt-elastic__task-list-header-resizer",
style: normalizeStyle(__spreadValues(__spreadValues({}, $options.root.style["task-list-header-resizer"]), column.style["task-list-header-resizer"]))
}, [
createElementVNode("div", {
class: "gantt-elastic__task-list-header-resizer-dot",
style: normalizeStyle(__spreadValues(__spreadValues({}, $options.root.style["task-list-header-resizer-dot"]), column.style["task-list-header-resizer-dot"]))
}, null, 4),
createElementVNode("div", {
class: "gantt-elastic__task-list-header-resizer-dot",
style: normalizeStyle(__spreadValues(__spreadValues({}, $options.root.style["task-list-header-resizer-dot"]), column.style["task-list-header-resizer-dot"]))
}, null, 4),
createElementVNode("div", {
class: "gantt-elastic__task-list-header-resizer-dot",
style: normalizeStyle(__spreadValues(__spreadValues({}, $options.root.style["task-list-header-resizer-dot"]), column.style["task-list-header-resizer-dot"]))
}, null, 4)
], 4)
], 44, _hoisted_2$9)
], 4);
}), 128))
], 4);
}
var TaskListHeader = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["render", _sfc_render$h]]);
const _sfc_main$g = {
name: "ItemColumn",
inject: ["root"],
props: ["column", "task"],
data() {
return {};
},
methods: {
emitEvent(eventName, event) {
if (typeof this.column.events !== "undefined" && typeof this.column.events[eventName] === "function") {
this.column.events[eventName]({ event, data: this.task, column: this.column });
}
this.$root.emitter.emit(`taskList-${this.task.type}-${eventName}`, { event, data: this.task, column: this.column });
}
},
computed: {
html() {
if (typeof this.column.html !== "undefined" && this.column.html === true) {
return true;
}
return false;
},
value() {
if (typeof this.column.value === "function") {
return this.column.value(this.task);
}
return this.task[this.column.value];
},
itemColumnStyle() {
return __spreadProps(__spreadValues(__spreadValues({}, this.root.style["task-list-item-column"]), this.column.style["task-list-item-column"]), {
width: this.column.finalWidth + "px",
height: this.column.height + "px"
});
},
wrapperStyle() {
return __spreadValues(__spreadValues({}, this.root.style["task-list-item-value-wrapper"]), this.column.style["task-list-item-value-wrapper"]);
},
containerStyle() {
return __spreadValues(__spreadValues({}, this.root.style["task-list-item-value-container"]), this.column.style["task-list-item-value-container"]);
},
valueStyle() {
return __spreadValues(__spreadValues({}, this.root.style["task-list-item-value"]), this.column.style["task-list-item-value"]);
}
}
};
const _hoisted_1$b = ["innerHTML"];
function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("div", {
class: "gantt-elastic__task-list-item-column",
style: normalizeStyle($options.itemColumnStyle)
}, [
createElementVNode("div", {
class: "gantt-elastic__task-list-item-value-wrapper",
style: normalizeStyle($options.wrapperStyle)
}, [
renderSlot(_ctx.$slots, "default"),
createElementVNode("div", {
class: "gantt-elastic__task-list-item-value-container",
style: normalizeStyle($options.containerStyle)
}, [
!$options.html ? (openBlock(), createElementBlock("div", {
key: 0,
class: "gantt-elastic__task-list-item-value",
style: normalizeStyle($options.valueStyle),
onClick: _cache[0] || (_cache[0] = ($event) => $options.emitEvent("click", $event)),
onDblclick: _cache[1] || (_cache[1] = ($event) => $options.emitEvent("dblclick", $event)),
onMouseenter: _cache[2] || (_cache[2] = ($event) => $options.emitEvent("mouseenter", $event)),
onMouseover: _cache[3] || (_cache[3] = ($event) => $options.emitEvent("mouseover", $event)),
onMouseout: _cache[4] || (_cache[4] = ($event) => $options.emitEvent("mouseout", $event)),
onMousemove: _cache[5] || (_cache[5] = ($event) => $options.emitEvent("mousemove", $event)),
onMousedown: _cache[6] || (_cache[6] = ($event) => $options.emitEvent("mousedown", $event)),
onMouseup: _cache[7] || (_cache[7] = ($event) => $options.emitEvent("mouseup", $event)),
onMousewheel: _cache[8] || (_cache[8] = ($event) => $options.emitEvent("mousewheel", $event)),
onTouchstart: _cache[9] || (_cache[9] = ($event) => $options.emitEvent("touchstart", $event)),
onTouchmove: _cache[10] || (_cache[10] = ($event) => $options.emitEvent("touchmove", $event)),
onTouchend: _cache[11] || (_cache[11] = ($event) => $options.emitEvent("touchend", $event))
}, toDisplayString($options.value), 37)) : (openBlock(), createElementBlock("div", {
key: 1,
class: "gantt-elastic__task-list-item-value",
style: normalizeStyle($options.valueStyle),
onClick: _cache[12] || (_cache[12] = ($event) => $options.emitEvent("click", $event)),
onDblclick: _cache[13] || (_cache[13] = ($event) => $options.emitEvent("dblclick", $event)),
onMouseenter: _cache[14] || (_cache[14] = ($event) => $options.emitEvent("mouseenter", $event)),
onMouseover: _cache[15] || (_cache[15] = ($event) => $options.emitEvent("mouseover", $event)),
onMouseout: _cache[16] || (_cache[16] = ($event) => $options.emitEvent("mouseout", $event)),
onMousemove: _cache[17] || (_cache[17] = ($event) => $options.emitEvent("mousemove", $event)),
onMousedown: _cache[18] || (_cache[18] = ($event) => $options.emitEvent("mousedown", $event)),
onMouseup: _cache[19] || (_cache[19] = ($event) => $options.emitEvent("mouseup", $event)),
onMousewheel: _cache[20] || (_cache[20] = ($event) => $options.emitEvent("mousewheel", $event)),
onTouchstart: _cache[21] || (_cache[21] = ($event) => $options.emitEvent("touchstart", $event)),
onTouchmove: _cache[22] || (_cache[22] = ($event) => $options.emitEvent("touchmove", $event)),
onTouchend: _cache[23] || (_cache[23] = ($event) => $options.emitEvent("touchend", $event)),
innerHTML: $options.value
}, null, 44, _hoisted_1$b))
], 4)
], 4)
], 4);
}
var ItemColumn = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["render", _sfc_render$g]]);
const _sfc_main$f = {
name: "TaskListItem",
components: {
TaskListExpander: Expander,
ItemColumn
},
inject: ["root"],
props: ["task"],
data() {
return {};
},
computed: {
columns() {
return this.root.state.options.taskList.columns;
}
}
};
function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
const _component_task_list_expander = resolveComponent("task-list-expander");
const _component_item_column = resolveComponent("item-column");
return openBlock(), createElementBlock("div", {
class: "gantt-elastic__task-list-item",
style: normalizeStyle(__spreadValues({}, $options.root.style["task-list-item"]))
}, [
(openBlock(true), createElementBlock(Fragment, null, renderList($options.columns, (column) => {
return openBlock(), createBlock(_component_item_column, {
key: column._id,
column,
task: $props.task
}, {
default: withCtx(() => [
column.expander ? (openBlock(), createBlock(_component_task_list_expander, {
key: 0,
tasks: [$props.task],
options: $options.root.state.options.taskList.expander,
type: "taskList"
}, null, 8, ["tasks", "options"])) : createCommentVNode("", true)
]),
_: 2
}, 1032, ["column", "task"]);
}), 128))
], 4);
}
var TaskListItem = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["render", _sfc_render$f]]);
const _sfc_main$e = {
name: "TaskList",
components: {
TaskListHeader,
TaskListItem
},
inject: ["root"],
data() {
return {};
},
mounted() {
this.root.state.refs.taskListWrapper = this.$refs.taskListWrapper;
this.root.state.refs.taskList = this.$refs.taskList;
this.root.state.refs.taskListItems = this.$refs.taskListItems;
}
};
function _sfc_render$e(_ctx, _cache, $props, $setup, $data, $options) {
const _component_task_list_header = resolveComponent("task-list-header");
const _component_task_list_item = resolveComponent("task-list-item");
return withDirectives((openBlock(), createElementBlock("div", {
class: "gantt-elastic__task-list-wrapper",
ref: "taskListWrapper",
style: normalizeStyle(__spreadProps(__spreadValues({}, $options.root.style["task-list-wrapper"]), { width: "100%", height: "100%" }))
}, [
createElementVNode("div", {
class: "gantt-elastic__task-list",
style: normalizeStyle(__spreadValues({}, $options.root.style["task-list"])),
ref: "taskList"
}, [
createVNode(_component_task_list_header),
createElementVNode("div", {
class: "gantt-elastic__task-list-items",
ref: "taskListItems",
style: normalizeStyle(__spreadProps(__spreadValues({}, $options.root.style["task-list-items"]), { height: $options.root.state.options.rowsHeight + "px" }))
}, [
(openBlock(true), createElementBlock(Fragment, null, renderList($options.root.visibleTasks, (task) => {
return openBlock(), createBlock(_component_task_list_item, {
key: task.id,
task
}, null, 8, ["task"]);
}), 128))
], 4)
], 4)
], 4)), [
[vShow, $options.root.state.options.taskList.display]
]);
}
var TaskList = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["render", _sfc_render$e]]);
const _sfc_main$d = {
name: "Grid",
inject: ["root"],
data() {
return {};
},
created() {
this.$root.emitter.on("recenterPosition", this.recenterPosition);
},
mounted() {
this.$nextTick(() => {
this.$nextTick(() => {
this.root.scrollToTime(this.timeLinePosition.time);
});
});
},
methods: {
recenterPosition() {
this.root.scrollToTime(this.timeLinePosition.time);
}
},
computed: {
verticalLines() {
let lines = [];
const state = this.root.state;
state.options.times.steps.forEach((step) => {
if (this.root.isInsideViewPort(step.offset.px, 1)) {
lines.push({
key: step.time,
x1: step.offset.px,
y1: 0,
x2: step.offset.px,
y2: state.tasks.length * (state.options.row.height + state.options.chart.grid.horizontal.gap * 2) + this.root.style["grid-line-vertical"]["stroke-width"]
});
}
});
return lines;
},
horizontalLines() {
let lines = [];
const state = this.root.state.options;
let tasks = this.root.visibleTasks;
for (let index2 = 0, len = tasks.length; index2 <= len; index2++) {
const y2 = index2 * (state.row.height + state.chart.grid.horizontal.gap * 2) + this.root.style["grid-line-vertical"]["stroke-width"] / 2;
lines.push({
key: "hl" + index2,
x1: 0,
y1: y2,
x2: "100%",
y2
});
}
return lines;
},
inViewPort() {
return (line) => {
const state = this.root.state.options;
return line.x1 >= state.scroll.chart.left && line.x1 <= state.scroll.chart.right;
};
},
timeLinePosition() {
const d2 = new Date();
const current = d2.getTime();
const currentOffset = this.root.timeToPixelOffsetX(current);
const timeLine = {
x: 0,
y1: 0,
y2: "100%",
dateTime: "",
time: current
};
timeLine.x = currentOffset;
timeLine.dateTime = d2.toLocaleDateString();
return timeLine;
}
}
};
const _hoisted_1$a = ["width", "height"];
const _hoisted_2$8 = ["x1", "y1", "x2", "y2"];
const _hoisted_3$7 = ["x1", "y1", "x2", "y2"];
const _hoisted_4$5 = ["x1", "y1", "x2", "y2"];
function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("svg", {
class: "gantt-elastic__grid-lines-wrapper",
style: normalizeStyle(__spreadValues({}, $options.root.style["grid-lines-wrapper"])),
ref: "chart",
x: "0",
y: "0",
width: $options.root.state.options.width,
height: $options.root.state.options.allVisibleTasksHeight,
xmlns: "http://www.w3.org/2000/svg"
}, [
createElementVNode("g", {
class: "gantt-elastic__grid-lines",
style: normalizeStyle(__spreadValues({}, $options.root.style["grid-lines"]))
}, [
(openBlock(true), createElementBlock(Fragment, null, renderList($options.horizontalLines, (line) => {
return openBlock(), createElementBlock("line", {
class: "gantt-elastic__grid-line-horizontal",
style: normalizeStyle(__spreadValues({}, $options.root.style["grid-line-horizontal"])),
key: line.key,
x1: line.x1,
y1: line.y1,
x2: line.x2,
y2: line.y2
}, null, 12, _hoisted_2$8);
}), 128)),
(openBlock(true), createElementBlock(Fragment, null, renderList($options.verticalLines, (line) => {
return openBlock(), createElementBlock("line", {
class: "gantt-elastic__grid-line-vertical",
style: normalizeStyle(__spreadValues({}, $options.root.style["grid-line-vertical"])),
key: line.key,
x1: line.x1,
y1: line.y1,
x2: line.x2,
y2: line.y2
}, null, 12, _hoisted_3$7);
}), 128)),
createElementVNode("line", {
class: "gantt-elastic__grid-line-time",
style: normalizeStyle(__spreadValues({}, $options.root.style["grid-line-time"])),
x1: $options.timeLinePosition.x,
y1: $options.timeLinePosition.y1,
x2: $options.timeLinePosition.x,
y2: $options.timeLinePosition.y2
}, null, 12, _hoisted_4$5)
], 4)
], 12, _hoisted_1$a);
}
var Grid = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["render", _sfc_render$d]]);
const _sfc_main$c = {
name: "DaysHighlight",
inject: ["root"],
data() {
return {};
},
methods: {
getKey(day) {
return dayjs(day.time).format("YYYY-MM-DD");
}
},
computed: {
workingDays() {
return this.root.state.options.times.steps.filter((step) => {
return this.root.state.options.calendar.workingDays.indexOf(dayjs(step.time).day()) === -1;
});
},
showWorkingDays() {
const calendar = this.root.state.options.calendar;
if (typeof calendar.workingDays !== "undefined" && Array.isArray(calendar.workingDays) && calendar.workingDays.length) {
return true;
}
return false;
}
}
};
const _hoisted_1$9 = ["x", "width"];
function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
return $options.showWorkingDays ? (openBlock(), createElementBlock("g", {
key: 0,
class: "gantt-elastic__chart-days-highlight-container",
style: normalizeStyle(__spreadValues({}, $options.root.style["chart-days-highlight-container"]))
}, [
(openBlock(true), createElementBlock(Fragment, null, renderList($options.workingDays, (day) => {
return openBlock(), createElementBlock("rect", {
class: "gantt-elastic__chart-days-highlight-rect",
key: $options.getKey(day),
x: day.offset.px,
y: "0",
width: day.width.px,
height: "100%",
style: normalizeStyle(__spreadValues({}, $options.root.style["chart-days-highlight-rect"]))
}, null, 12, _hoisted_1$9);
}), 128))
], 4)) : createCommentVNode("", true);
}
var DaysHighlight = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["render", _sfc_render$c]]);
const _sfc_main$b = {
name: "CalendarRow",
inject: ["root"],
props: ["items", "which"],
data() {
return {};
},
methods: {
getTextX(item) {
let x2 = item.x + item.width / 2 - item.textWidth / 2;
if (this.which === "month" && this.root.isInsideViewPort(item.x, item.width, 0)) {
let scrollWidth = this.root.state.options.scroll.chart.right - this.root.state.options.scroll.chart.left;
x2 = this.root.state.options.scroll.chart.left + scrollWidth / 2 - item.textWidth / 2 + 2;
if (x2 + item.textWidth + 2 > item.x + item.width) {
x2 = item.x + item.width - item.textWidth - 2;
} else if (x2 < item.x) {
x2 = item.x + 2;
}
}
return x2 - item.x;
}
},
computed: {
rowStyle() {
return __spreadValues(__spreadValues({}, this.root.style["calendar-row"]), this.root.style["calendar-row--" + this.which]);
},
rectStyle() {
return __spreadValues(__spreadValues({}, this.root.style["calendar-row-rect"]), this.root.style["calendar-row-rect--" + this.which]);
},
rectChildStyle() {
const basicStyle = __spreadValues(__spreadValues({}, this.root.style["calendar-row-rect-child"]), this.root.style["calendar-row-rect-child--" + this.which]);
const style = [];
for (let item of this.items) {
const childrenStyle = [];
for (let child of item.children) {
childrenStyle.push(__spreadProps(__spreadValues({}, basicStyle), {
width: child.width + "px",
height: child.height + "px"
}));
}
style.push(childrenStyle);
}
return style;
},
textStyle() {
const basicStyle = __spreadValues(__spreadValues({}, this.root.style["calendar-row-text"]), this.root.style["calendar-row-text--" + this.which]);
return (child) => {
const style = __spreadValues({}, basicStyle);
if (this.which === "month") {
style.left = this.getTextX(child) + "px";
}
return style;
};
}
}
};
function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("div", {
class: normalizeClass("gantt-elastic__calendar-row gantt-elastic__calendar-row--" + $props.which),
style: normalizeStyle($options.rowStyle)
}, [
(openBlock(true), createElementBlock(Fragment, null, renderList($props.items, (item, itemIndex) => {
return openBlock(), createElementBlock("div", {
key: item.key,
class: normalizeClass("gantt-elastic__calendar-row-rect gantt-elastic__calendar-row-rect--" + $props.which),
style: normalizeStyle($options.rectStyle)
}, [
(openBlock(true), createElementBlock(Fragment, null, renderList(item.children, (child, childIndex) => {
return openBlock(), createElementBlock("div", {
class: normalizeClass("gantt-elastic__calendar-row-rect-child gantt-elastic__calendar-row-rect-child--" + $props.which),
key: child.key,
style: normalizeStyle($options.rectChildStyle[itemIndex][childIndex])
}, [
createElementVNode("div", {
class: normalizeClass("gantt-elastic__calendar-row-text gantt-elastic__calendar-row-text--" + $props.which),
style: normalizeStyle($options.textStyle(child))
}, toDisplayString(child.label), 7)
], 6);
}), 128))
], 6);
}), 128))
], 6);
}
var CalendarRow = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["render", _sfc_render$b]]);
const _sfc_main$a = {
name: "Calendar",
components: {
CalendarRow
},
inject: ["root"],
data() {
return {};
},
methods: {
howManyHoursFit(dayIndex) {
const stroke = 1;
const additionalSpace = stroke + 2;
let fullCellWidth = this.root.state.options.times.steps[dayIndex].width.px;
let formatNames = Object.keys(this.root.state.options.calendar.hour.format);
for (let hours = 24; hours > 1; hours = Math.ceil(hours / 2)) {
for (let formatName of formatNames) {
if ((this.root.state.options.calendar.hour.maxWidths[formatName] + additionalSpace) * hours <= fullCellWidth && hours > 1) {
return {
count: hours,
type: formatName
};
}
}
}
return {
count: 0,
type: ""
};
},
howManyDaysFit() {
const stroke = 1;
const additionalSpace = stroke + 2;
let fullWidth = this.root.state.options.width;
let formatNames = Object.keys(this.root.state.options.calendar.day.format);
for (let days = this.root.state.options.times.steps.length; days > 1; days = Math.ceil(days / 2)) {
for (let formatName of formatNames) {
if ((this.root.state.options.calendar.day.maxWidths[formatName] + additionalSpace) * days <= fullWidth && days > 1) {
return {
count: days,
type: formatName
};
}
}
}
return {
count: 0,
type: ""
};
},
howManyMonthsFit() {
const stroke = 1;
const additionalSpace = stroke + 2;
let fullWidth = this.root.state.options.width;
let formatNames = Object.keys(this.root.state.options.calendar.month.format);
let currentMonth = dayjs(this.root.state.options.times.firstTime);
currentMonth.clone();
this.root.state.options.times.lastTime;
let monthsCount = this.root.monthsCount(this.root.state.options.times.firstTime, this.root.state.options.times.lastTime);
if (monthsCount === 1) {
for (let formatName of formatNames) {
if (this.root.state.options.calendar.month.maxWidths[formatName] + additionalSpace <= fullWidth) {
return {
count: 1,
type: formatName
};
}
}
}
for (let months = monthsCount; months > 1; months = Math.ceil(months / 2)) {
for (let formatName of formatNames) {
if ((this.root.state.options.calendar.month.maxWidths[formatName] + additionalSpace) * months <= fullWidth && months > 1) {
return {
count: months,
type: formatName
};
}
}
}
return {
count: 0,
type: formatNames[0]
};
},
generateHours() {
let allHours = [];
if (!this.root.state.options.calendar.hour.display) {
return allHours;
}
const steps = this.root.state.options.times.steps;
this.root.state.options.locale.name;
for (let hourIndex = 0, len = steps.length; hourIndex < len; hourIndex++) {
const hoursCount = this.howManyHoursFit(hourIndex);
if (hoursCount.count === 0) {
continue;
}
const hours = { key: hourIndex + "step", children: [] };
const hourStep = 24 / hoursCount.count;
const hourWidthPx = steps[hourIndex].width.px / hoursCount.count;
for (let i = 0, len2 = hoursCount.count; i < len2; i++) {
const hour = i * hourStep;
let index2 = hourIndex;
if (hourIndex > 0) {
index2 = hourIndex - Math.floor(hourIndex / 24) * 24;
}
let textWidth = 0;
if (typeof this.root.state.options.calendar.hour.widths[index2] !== "undefined") {
textWidth = this.root.state.options.calendar.hour.widths[index2][hoursCount.type];
}
let x2 = steps[hourIndex].offset.px + hourWidthPx * i;
hours.children.push({
index: hourIndex,
key: "h" + i,
x: x2,
y: this.root.state.options.calendar.day.height + this.root.state.options.calendar.month.height,
width: hourWidthPx,
textWidth,
height: this.root.state.options.calendar.hour.height,
label: this.root.state.options.calendar.hour.formatted[hoursCount.type][hour]
});
}
allHours.push(hours);
}
return allHours;
},
generateDays() {
let days = [];
if (!this.root.state.options.calendar.day.display) {
return days;
}
const daysCount = this.howManyDaysFit();
if (daysCount.count === 0) {
return days;
}
const steps = this.root.state.options.times.steps;
const localeName = this.root.state.options.locale.name;
const dayStep = Math.ceil(steps.length / daysCount.count);
for (let dayIndex = 0, len = steps.length; dayIndex < len; dayIndex += dayStep) {
let dayWidthPx = 0;
for (let currentStep = 0; currentStep < dayStep; currentStep++) {
if (typeof steps[dayIndex + currentStep] !== "undefined") {
dayWidthPx += steps[dayIndex + currentStep].width.px;
}
}
const date = dayjs(steps[dayIndex].time);
let textWidth = 0;
if (typeof this.root.state.options.calendar.day.widths[dayIndex] !== "undefined") {
textWidth = this.root.state.options.calendar.day.widths[dayIndex][daysCount.type];
}
let x2 = steps[dayIndex].offset.px;
days.push({
index: dayIndex,
key: steps[dayIndex].time + "d",
x: x2,
y: this.root.state.options.calendar.month.height,
width: dayWidthPx,
textWidth,
height: this.root.state.options.calendar.day.height,
label: this.root.state.options.calendar.day.format[daysCount.type](date.locale(localeName))
});
}
return days.map((item) => ({
key: item.key,
children: [item]
}));
},
generateMonths() {
let months = [];
if (!this.root.state.options.calendar.month.display) {
return months;
}
const monthsCount = this.howManyMonthsFit();
if (monthsCount.count === 0) {
return months;
}
this.root.state.options.times.steps;
const localeName = this.root.state.options.locale.name;
let formatNames = Object.keys(this.root.state.options.calendar.month.format);
let currentDate = dayjs(this.root.state.options.times.firstTime);
for (let monthIndex = 0; monthIndex < monthsCount.count; monthIndex++) {
let monthWidth = 0;
let monthOffset = Number.MAX_SAFE_INTEGER;
let finalDate = dayjs(currentDate).add(1, "month").startOf("month");
if (finalDate.valueOf() > this.root.state.options.times.lastTime) {
finalDate = dayjs(this.root.state.options.times.lastTime);
}
for (let step = 0, len = this.root.state.options.times.steps.length; step < len; step++) {
let currentStep = this.root.state.options.times.steps[step];
if (currentStep.time >= currentDate.valueOf() && currentStep.time < finalDate.valueOf()) {
monthWidth += currentStep.width.px;
if (currentStep.offset.px < monthOffset) {
monthOffset = currentStep.offset.px;
}
}
}
let label = "";
let choosenFormatName;
for (let formatName of formatNames) {
if (this.root.state.options.calendar.month.maxWidths[formatName] + 2 <= monthWidth) {
label = this.root.state.options.calendar.month.format[formatName](currentDate.locale(localeName));
choosenFormatName = formatName;
}
}
let textWidth = 0;
if (typeof this.root.state.options.calendar.month.widths[monthIndex] !== "undefined") {
textWidth = this.root.state.options.calendar.month.widths[monthIndex][choosenFormatName];
}
let x2 = monthOffset;
months.push({
index: monthIndex,
key: monthIndex + "m",
x: x2,
y: 0,
width: monthWidth,
textWidth,
choosenFormatName,
height: this.root.state.options.calendar.month.height,
label
});
currentDate = currentDate.add(1, "month").startOf("month");
if (currentDate.valueOf() > this.root.state.options.times.lastTime) {
currentDate = dayjs(this.root.state.options.times.lastTime);
}
}
return months.map((item) => ({
key: item.key,
children: [item]
}));
},
calculateCalendarDimensions({ hours, days, months }) {
let height = 0;
if (this.root.state.options.calendar.hour.display && hours.length > 0) {
height += this.root.state.options.calendar.hour.height;
}
if (this.root.state.options.calendar.day.display && days.length > 0) {
height += this.root.state.options.calendar.day.height;
}
if (this.root.state.options.calendar.month.display && months.length > 0) {
height += this.root.state.options.calendar.month.height;
}
this.root.state.options.calendar.height = height;
}
},
computed: {
dates() {
const hours = this.generateHours();
const days = this.generateDays();
const months = this.generateMonths();
const allDates = { hours, days, months };
this.calculateCalendarDimensions(allDates);
return allDates;
}
}
};
function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
const _component_calendar_row = resolveComponent("calendar-row");
return openBlock(), createElementBlock("div", {
class: "gantt-elastic__calendar-wrapper",
style: normalizeStyle(__spreadProps(__spreadValues({}, $options.root.style["calendar-wrapper"]), { width: $options.root.state.options.width + "px" }))
}, [
createElementVNode("div", {
class: "gantt-elastic__calendar",
style: normalizeStyle(__spreadProps(__spreadValues({}, $options.root.style["calendar"]), { width: $options.root.state.options.width + "px" }))
}, [
$options.root.state.options