@innovation-system/vuetify-week-scheduler-v3
Version:
Vuetify week scheduler for Vue 3
785 lines (784 loc) • 29 kB
JavaScript
import { ref as L, createBlock as x, openBlock as g, withCtx as f, createElementVNode as u, mergeProps as H, withModifiers as h, withDirectives as P, createVNode as c, createTextVNode as E, vShow as v, toDisplayString as y, resolveComponent as F, createElementBlock as m, createCommentVNode as D, Fragment as k, renderList as C, normalizeStyle as R } from "vue";
import { VBtn as b } from "vuetify/components/VBtn";
import { VHover as B } from "vuetify/components/VHover";
import { VIcon as M } from "vuetify/components/VIcon";
import { VRow as Y, VCol as I } from "vuetify/components/VGrid";
import { VList as j, VListItem as V } from "vuetify/components/VList";
import { VMenu as W } from "vuetify/components/VMenu";
import { VTextField as U } from "vuetify/components/VTextField";
const S = (t, e) => {
const o = t.__vccOpts || t;
for (const [r, s] of e)
o[r] = s;
return o;
}, O = {
name: "VuetifyWeekSchedulerPeriod",
props: {
period: {
type: Object,
default: () => ({})
},
settings: {
type: Object,
default: () => ({})
},
editable: { type: Boolean, default: !1 },
controlsVisible: { type: Boolean, default: !1 }
},
emits: ["edit", "delete", "clone", "period-drag", "period-resize", "show-controls"],
setup() {
return { root: L(null) };
},
data() {
return {
longPressTimer: null,
longPressStart: null,
longPressDelay: 500,
longPressMoveThreshold: 8,
supportsHover: !1
};
},
computed: {
options() {
return this.period.options;
},
shortPeriod() {
return this.period.height <= 30;
}
},
mounted() {
var t;
this.supportsHover = ((t = window.matchMedia) == null ? void 0 : t.call(window, "(hover: hover) and (pointer: fine)").matches) ?? !0;
},
beforeUnmount() {
this.clearLongPress();
},
methods: {
onPeriodDown(t) {
this.clearLongPress(), this.$emit("period-drag", t);
},
onPeriodTouchStart(t) {
if (this.isInteractiveTouchTarget(t)) {
this.clearLongPress();
return;
}
this.$emit("show-controls"), this.clearLongPress();
const e = this.getTouch(t);
e && (this.longPressStart = {
x: e.clientX,
y: e.clientY
}, this.longPressTimer = setTimeout(() => {
const o = this.longPressStart;
this.longPressTimer = null, this.longPressStart = null, o && this.$emit("edit", this.createTouchEditEvent(t, o));
}, this.longPressDelay)), this.$emit("period-drag", t);
},
onPeriodTouchMove(t) {
if (!this.longPressTimer || !this.longPressStart) return;
const e = this.getTouch(t);
if (!e) {
this.clearLongPress();
return;
}
const o = Math.abs(e.clientX - this.longPressStart.x), r = Math.abs(e.clientY - this.longPressStart.y);
(o > this.longPressMoveThreshold || r > this.longPressMoveThreshold) && this.clearLongPress();
},
clearLongPress() {
this.longPressTimer && (clearTimeout(this.longPressTimer), this.longPressTimer = null), this.longPressStart = null;
},
onEdit(t) {
this.clearLongPress(), this.$emit("edit", t);
},
getTouch(t) {
var e, o;
return ((e = t.touches) == null ? void 0 : e[0]) || ((o = t.changedTouches) == null ? void 0 : o[0]);
},
isInteractiveTouchTarget(t) {
var e, o;
return !!((o = (e = t.target) == null ? void 0 : e.closest) != null && o.call(
e,
'.vws-period-buttons, .vws-handle, button, a, input, textarea, select, [role="button"]'
));
},
createTouchEditEvent(t, e) {
return {
type: "longpress",
clientX: e.x,
clientY: e.y,
originalEvent: t
};
},
showControls(t) {
return this.editable && (this.controlsVisible || this.supportsHover && t);
},
onPeriodResize(t, e) {
this.$emit("period-resize", {
$event: t,
isUp: e,
$el: this.root
});
}
}
}, X = { class: "vws-period-container" }, A = { class: "vws-period-time" }, N = {
class: "vws-period-buttons",
justify: "end"
};
function q(t, e, o, r, s, i) {
return g(), x(B, null, {
default: f(({ isHovering: d, props: n }) => [
u("div", H({
ref: "root",
class: "vws-period",
style: {
backgroundColor: i.options.backgroundColor,
outlineColor: i.options.borderColor,
textColor: i.options.textColor,
color: i.options.textColor,
top: o.period.top + "px",
height: o.period.height + "px"
}
}, n, {
onMousedown: e[10] || (e[10] = h((...l) => i.onPeriodDown && i.onPeriodDown(...l), ["stop"])),
onTouchstart: e[11] || (e[11] = h((...l) => i.onPeriodTouchStart && i.onPeriodTouchStart(...l), ["stop"])),
onTouchmove: e[12] || (e[12] = (...l) => i.onPeriodTouchMove && i.onPeriodTouchMove(...l)),
onTouchend: e[13] || (e[13] = (...l) => i.clearLongPress && i.clearLongPress(...l)),
onTouchcancel: e[14] || (e[14] = (...l) => i.clearLongPress && i.clearLongPress(...l)),
onContextmenu: e[15] || (e[15] = h((...l) => i.onEdit && i.onEdit(...l), ["stop", "prevent"])),
onDblclick: e[16] || (e[16] = h((...l) => i.onEdit && i.onEdit(...l), ["stop", "prevent"]))
}), [
u("div", X, [
P(c(M, {
size: "small",
class: "vws-handle",
onMousedown: e[0] || (e[0] = h((l) => i.onPeriodResize(l, !0), ["stop"])),
onTouchstart: e[1] || (e[1] = h((l) => i.onPeriodResize(l, !0), ["stop"]))
}, {
default: f(() => e[17] || (e[17] = [
E(" mdi-chevron-up ")
])),
_: 2
}, 1536), [
[v, i.showControls(d)]
]),
u("div", A, [
E(y(i.options.start) + " - " + y(i.options.end) + " ", 1),
P(u("span", { class: "text--caption ml-2" }, y(i.options.title), 513), [
[v, i.shortPeriod]
])
]),
P(u("div", { class: "vws-period-title text-truncate" }, y(i.options.title), 513), [
[v, !i.shortPeriod]
]),
P(u("div", N, [
c(b, {
class: "mx-1 mt-1",
icon: "mdi-close",
size: "x-small",
density: "compact",
variant: "text",
title: o.settings.periodRemoveButton,
onClick: e[2] || (e[2] = h((l) => t.$emit("delete"), ["stop"])),
onMousedown: e[3] || (e[3] = h(() => {
}, ["stop"])),
onTouchstart: e[4] || (e[4] = h(() => {
}, ["stop"]))
}, null, 8, ["title"]),
c(b, {
class: "mx-1 mt-1",
icon: "mdi-content-copy",
size: "x-small",
density: "compact",
variant: "text",
title: o.settings.periodDuplicateButton,
onClick: e[5] || (e[5] = h((l) => t.$emit("clone"), ["stop"])),
onMousedown: e[6] || (e[6] = h(() => {
}, ["stop"])),
onTouchstart: e[7] || (e[7] = h(() => {
}, ["stop"]))
}, null, 8, ["title"])
], 512), [
[v, i.showControls(d)]
]),
P(c(M, {
size: "small",
class: "vws-handle",
style: { bottom: "0" },
onMousedown: e[8] || (e[8] = h((l) => i.onPeriodResize(l, !1), ["stop"])),
onTouchstart: e[9] || (e[9] = h((l) => i.onPeriodResize(l, !1), ["stop"]))
}, {
default: f(() => e[18] || (e[18] = [
E(" mdi-chevron-down ")
])),
_: 2
}, 1536), [
[v, i.showControls(d)]
])
])
], 16)
]),
_: 1
});
}
const _ = /* @__PURE__ */ S(O, [["render", q]]), G = {
name: "VuetifyWeekScheduler",
// vue component name
components: {
SchedulerPeriod: _
},
props: {
config: { type: Object, default: () => {
} },
modelValue: { type: Array, required: !0 },
editable: { type: Boolean, default: !1 }
},
emits: ["update:modelValue", "error", "edit"],
data() {
return {
settings: {},
counter: 0,
blocksEachHour: 0,
maxBlocks: 0,
blockHeight: 0,
events: [],
// keep track of listeners
newPeriod: null,
draggingPeriod: null,
resizingPeriod: null,
activeControlsPeriod: null,
showEditMenu: !1,
x: 0,
y: 0,
editEvent: null
};
},
computed: {
data: {
get() {
let t = this.modelValue;
if (this.modelValue.length !== this.settings.days) {
t = [];
for (let e = 0; e < this.settings.days; e++)
t.push({
day: e,
periods: []
});
this.$emit("update:modelValue", t);
}
return t;
},
set(t) {
this.$emit("update:modelValue", t);
}
},
daysPeriods() {
var e;
const t = [];
for (let o = 0; o < this.settings.days; o++) {
const r = {
day: o,
periods: []
};
t.push(r);
const s = (e = this.data) == null ? void 0 : e[o];
if (s)
for (let i = 0; i < s.periods.length; i++) {
const d = s.periods[i], n = this.positionFormat(d.start), l = this.positionFormat(d.end);
r.periods.push({
options: this.addDefaults(d),
index: i,
top: n * this.blockHeight,
height: (l - n) * this.blockHeight
});
}
}
return t;
},
isMobile() {
return this.$vuetify.display.mdAndDown;
}
},
mounted() {
this.settings = { ...this.getDefaults(), ...this.config }, this.init(), this.handleEvents();
},
beforeUnmount() {
this.events.forEach((t) => {
t.element.removeEventListener(t.event, t.callback);
});
},
methods: {
getDefaults() {
return {
hour: 24,
// 12
days: 7,
// 7/5
periodDuration: 15,
// 15/30/60
periodTitle: "",
periodBackgroundColor: "#F44336FF",
periodBorderColor: "transparent",
periodTextColor: "#000",
periodRemoveButton: "Remove",
periodDuplicateButton: "Duplicate",
periodSelectWholeButton: "Select whole day",
inputType: "text",
daysList: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
colors: ["#F44336", "#FF9800", "#FFEB3B", "#8BC34A", "#4CAF50", "#00BCD4", "#2196F3"]
};
},
/** When clicking on a day */
onDayDown(t, e) {
if (!this.editable) return;
this.clearPeriodControls();
const o = e.currentTarget.getBoundingClientRect(), r = this.getY(e, !0) - o.top, s = Math.floor(r / this.blockHeight), i = this.blocksToTime(s), d = this.blocksToTime(s + 2), n = 2 * this.blockHeight;
this.newPeriod = {
dragStart: this.getY(e, !0),
startHeight: n,
maxHeight: e.currentTarget.clientHeight,
day: t,
start: i,
end: d,
top: s * this.blockHeight,
height: n
};
},
/** Add defaults to period */
addDefaults(t) {
return {
title: this.settings.periodTitle,
backgroundColor: this.settings.periodBackgroundColor,
borderColor: this.settings.periodBorderColor,
textColor: this.settings.periodTextColor,
...t
};
},
showPeriodControls(t, e) {
this.activeControlsPeriod = { day: t, index: e };
},
clearPeriodControls() {
this.activeControlsPeriod = null;
},
isPeriodControlsVisible(t, e) {
var o, r;
return ((o = this.activeControlsPeriod) == null ? void 0 : o.day) === t && ((r = this.activeControlsPeriod) == null ? void 0 : r.index) === e;
},
handleEvents() {
const t = () => {
if (this.newPeriod)
this.addPeriod(this.newPeriod.day, {
start: this.newPeriod.start,
end: this.newPeriod.end
}), this.newPeriod = null;
else if (this.draggingPeriod) {
const { el: o, day: r, index: s } = this.draggingPeriod, i = o.offsetTop, d = o.clientHeight;
this.onPositionChange(r, s, { top: i, height: d }), this.draggingPeriod = null;
} else if (this.resizingPeriod) {
const { el: o, day: r, index: s } = this.resizingPeriod, i = o.offsetTop, d = o.clientHeight;
this.onPositionChange(r, s, { top: i, height: d }), this.resizingPeriod = null;
}
}, e = (o) => {
if (this.newPeriod) {
o.preventDefault();
const r = this.roundBlock(this.newPeriod.dragStart - this.getY(o, !0)), s = this.roundBlock(this.newPeriod.startHeight - r);
if (s > this.blockHeight && this.newPeriod.top + s <= this.newPeriod.maxHeight) {
const { start: i, end: d } = this.positionToInterval(this.newPeriod), { periods: n } = this.data[this.newPeriod.day];
this.isValid({ start: i, end: d }, n) && Object.assign(this.newPeriod, { height: s, start: i, end: d });
}
} else if (this.draggingPeriod) {
o.preventDefault();
const { startDrag: r, startTop: s, el: i, day: d, index: n } = this.draggingPeriod, l = r - this.getY(o, !0), p = this.roundBlock(s - l), a = i.clientHeight, w = i.parentElement.clientHeight;
p + a <= w && p >= 0 && (i.style.top = `${p}px`, this.onPositionChange(d, n, {
top: p,
height: a
}));
} else if (this.resizingPeriod) {
o.preventDefault();
const { startDrag: r, startTop: s, startHeight: i, el: d, day: n, index: l, isUp: p } = this.resizingPeriod, a = this.roundBlock(r - this.getY(o, !0)), w = p ? this.roundBlock(s - a) : d.offsetTop;
let T = this.roundBlock(i + (p ? a : -a));
const z = document.querySelector(".vws-day").clientHeight;
T = Math.max(T, this.blockHeight), w + T <= z && w >= 0 && (d.style.height = `${T}px`, p && (d.style.top = `${w}px`), this.onPositionChange(n, l, {
top: w,
height: T
}));
}
};
this.addListener(document, "mouseup", t), this.addListener(document, "touchend", t), this.addListener(document, "mousemove", e), this.addListener(document, "touchmove", e);
},
onPeriodDown(t, e, o) {
if (this.editable) {
const r = t.currentTarget;
this.draggingPeriod = {
el: r,
day: e,
index: o,
startDrag: this.getY(t, !1),
startTop: r.offsetTop
};
}
},
onPeriodResize(t, e, o) {
if (this.editable) {
const { $event: r, isUp: s, $el: i } = t;
this.resizingPeriod = {
el: i,
day: e,
index: o,
isUp: s,
startDrag: this.getY(r, !1),
startTop: i.offsetTop,
startHeight: i.clientHeight
};
}
},
addPeriod(t, e) {
this.data[t] || (this.data[t] = {
day: t,
periods: []
});
const { periods: o } = this.data[t];
e = this.addDefaults(e), this.isValid(e, o) && o.push(e);
},
init() {
try {
if (![15, 30, 60].includes(this.settings.periodDuration))
throw new Error("Invalide period duration");
this.blocksEachHour = 60 / this.settings.periodDuration, this.maxBlocks = 24 * this.blocksEachHour, this.blockHeight = 40 / this.blocksEachHour, this.data.forEach((t) => {
t == null || t.periods.forEach((e, o) => {
this.isValid(e, t.periods) || (t.periods.splice(o, 1), console.error("Invalid period duration", e));
});
});
} catch (t) {
this.$emit("error", t);
}
},
deletePeriod(t, e) {
this.clearPeriodControls(), this.data[t].periods.splice(e, 1);
},
clonePeriod(t, e) {
this.clearPeriodControls();
const o = typeof e == "object" ? e : this.data[t].periods[e];
for (const r of this.data)
r.day !== t && this.isValid(o, r.periods) && r.periods.push({ ...o });
},
clearDayPeriods(t) {
this.data[t] && (this.data[t].periods = []);
},
cloneDayPeriods(t) {
if (this.data[t]) {
const { periods: e } = this.data[t];
for (const o of this.data)
if (o.day !== t)
for (const r of e)
this.clonePeriod(t, r);
}
},
async onPositionChange(t, e, o) {
var s;
t = (s = this.data) == null ? void 0 : s[t];
const r = t == null ? void 0 : t.periods[e];
if (r) {
const { start: i, end: d } = this.positionToInterval(o), n = r.start, l = r.end;
Object.assign(r, { start: i, end: d }), await this.$nextTick(), this.isValid(r, t.periods) || Object.assign(r, { start: n, end: l });
}
},
/** Round val to nearest multiple of blockHeight */
roundBlock(t) {
return Math.round(t / this.blockHeight) * this.blockHeight;
},
/** Returns start/end hours string (hh:mm) from period top/height in pixel */
positionToInterval(t) {
return {
start: this.blocksToTime(t.top / this.blockHeight),
end: this.blocksToTime(Math.floor((t.top + t.height) / this.blockHeight))
};
},
/**
* Return a readable hour from a block position
* @param position
* @returns {number}
*/
blocksToTime(t) {
t > this.maxBlocks && (t = 0), t < 0 && (t = 0);
let e = Math.floor(t / this.blocksEachHour), o = (t / this.blocksEachHour - e) * 60;
if (this.settings.hour === 12) {
let r = e, s = "";
return e >= 12 && (s = "p"), e > 12 && (r = e - 12), (e === 0 || e === 24) && (s = "", r = 12), o !== 0 && (r += `:${o}`), r + s;
}
return e < 10 && (e = `0${e}`), o < 10 && (o = `0${o}`), e === 23 && o === 59 && (e = "24", o = "00"), `${e}:${o}`;
},
/** Hour to string */
formatHour(t) {
if (this.settings.hour === 12)
switch (t) {
case 0:
case 24:
t = "12am";
break;
case 12:
t = "12pm";
break;
default:
t > 12 ? t = `${t - 12}pm` : t += "am";
}
else
t > 24 && (t = 0), t < 10 && (t = `0${t}`), t += ":00";
return t;
},
/**
* Return blocks from a time string (hh:mm)
* @param time
* @returns {number}
*/
positionFormat(t) {
const e = t.split(":");
let o = parseInt(e[0], 10), r = parseInt(e[1], 10);
if (this.settings.hour === 12) {
const i = t.match(/([0-1]?[0-9]):?([0-5][0-9])?\s?(am|pm|p)?/);
let d = i[3];
d || (d = "am"), o = parseInt(i[1], 10), r = parseInt(i[2], 10), r || (r = 0), o === 12 && d === "am" && (o = 0), o === 12 && (d === "pm" || d === "p") && (d = "am"), (d === "pm" || d === "p") && (o += 12);
}
let s = 0;
return s += o * this.blocksEachHour, s += r / 60 * this.blocksEachHour, s;
},
/**
* Check if a period is valid
* @param current
* @returns {boolean}
*/
isValid(t, e) {
const o = this.positionFormat(t.start), r = this.positionFormat(t.end);
let s = 0, i = 0, d = !0;
for (const n of e)
if (n !== t && (s = this.positionFormat(n.start), i = this.positionFormat(n.end), s > o && s < r && (d = !1), i > o && i < r && (d = !1), s < o && i > r && (d = !1), (s === o || i === r) && (d = !1), !d))
break;
return d;
},
addListener(t, e, o, r) {
this.events.push({
element: t,
event: e,
callback: o
}), t.addEventListener(e, o, r);
},
closeEditMenu() {
this.showEditMenu = !1, this.newPeriod = null, this.draggingPeriod = null, this.resizingPeriod = null, this.clearPeriodControls();
},
async editPeriod(t, e, o) {
var r;
if (this.editable)
if (this.draggingPeriod = null, this.clearPeriodControls(), this.$attrs.onEdit)
this.$emit("edit", { day: t, index: e });
else {
(r = o == null ? void 0 : o.preventDefault) == null || r.call(o);
const { x: s, y: i } = this.getClientPosition(o);
this.showEditMenu = !1, this.x = s, this.y = i;
const { periods: d } = this.modelValue[t];
this.editEvent = d[e], await this.$nextTick(), this.showEditMenu = !0;
}
},
getClientPosition(t) {
const e = this.getTouchPoint(t);
return e ? { x: e.clientX, y: e.clientY } : {
x: (t == null ? void 0 : t.clientX) ?? 0,
y: (t == null ? void 0 : t.clientY) ?? 0
};
},
getTouchPoint(t) {
var e, o;
return ((e = t == null ? void 0 : t.touches) == null ? void 0 : e[0]) || ((o = t == null ? void 0 : t.changedTouches) == null ? void 0 : o[0]) || null;
},
getY(t, e) {
let o = null;
return t.type === "touchstart" || t.type === "touchmove" || t.type === "touchend" || t.type === "touchcancel" ? (e && t.preventDefault(), o = this.getTouchPoint(t).clientY) : (t.type === "mousedown" || t.type === "mouseup" || t.type === "mousemove" || t.type === "mouseover" || t.type === "mouseout" || t.type === "mouseenter" || t.type === "mouseleave") && (o = t.clientY), o;
},
selectWholeDay(t) {
if (this.data[t]) {
const { periods: e } = this.data[t];
e.length > 0 ? (e[0].start = "00:00", e[0].end = "24:00", this.data[t].periods = [e[0]]) : this.data[t].periods = [
{
start: "00:00",
end: "24:00",
title: this.settings.periodTitle,
backgroundColor: this.settings.periodBackgroundColor,
borderColor: this.settings.periodBorderColor,
textColor: this.settings.periodTextColor
}
];
}
}
}
}, J = { class: "vws vws-mode-edit vws-mode-7" }, K = { class: "vws-table" }, Q = ["onTouchstart", "onMousedown"], Z = { class: "vws-period-helper-time" }, $ = { class: "vws-grid" }, tt = { class: "vws-grid-head" }, et = { class: "vws-grid-hour" };
function ot(t, e, o, r, s, i) {
const d = F("scheduler-period");
return g(), m("div", J, [
u("table", K, [
u("tbody", null, [
u("tr", null, [
(g(!0), m(k, null, C(i.daysPeriods, (n) => (g(), m("td", {
key: "day-" + n.day
}, [
u("div", {
ref_for: !0,
ref: "day",
class: "vws-day",
onTouchstart: (l) => i.onDayDown(n.day, l),
onMousedown: (l) => i.onDayDown(n.day, l)
}, [
(g(!0), m(k, null, C(n.periods, (l, p) => (g(), x(d, {
key: p,
period: l,
settings: s.settings,
editable: o.editable,
"controls-visible": i.isPeriodControlsVisible(n.day, l.index),
onShowControls: (a) => i.showPeriodControls(n.day, l.index),
onPeriodDrag: (a) => i.onPeriodDown(a, n.day, l.index),
onPeriodResize: (a) => i.onPeriodResize(a, n.day, l.index),
onDelete: (a) => i.deletePeriod(n.day, l.index),
onClone: (a) => i.clonePeriod(n.day, l.index),
onEdit: (a) => i.editPeriod(n.day, l.index, a)
}, null, 8, ["period", "settings", "editable", "controls-visible", "onShowControls", "onPeriodDrag", "onPeriodResize", "onDelete", "onClone", "onEdit"]))), 128)),
s.newPeriod && s.newPeriod.day === n.day ? (g(), m("div", {
key: 0,
style: R({
top: `${s.newPeriod.top}px`,
height: `${s.newPeriod.height}px`
}),
class: "vws-period-helper"
}, [
u("div", Z, y(s.newPeriod.start) + " - " + y(s.newPeriod.end), 1)
], 4)) : D("", !0)
], 40, Q)
]))), 128))
])
])
]),
s.showEditMenu ? (g(), m("div", {
key: 0,
class: "vws-edit-click-blocker",
onMousedown: e[0] || (e[0] = h((...n) => i.closeEditMenu && i.closeEditMenu(...n), ["stop", "prevent"])),
onTouchstart: e[1] || (e[1] = h((...n) => i.closeEditMenu && i.closeEditMenu(...n), ["stop", "prevent"])),
onClick: e[2] || (e[2] = h((...n) => i.closeEditMenu && i.closeEditMenu(...n), ["stop", "prevent"]))
}, null, 32)) : D("", !0),
u("div", $, [
u("div", tt, [
(g(!0), m(k, null, C(s.settings.days, (n) => (g(), m("div", {
key: n,
class: "vws-grid-day"
}, [
c(B, null, {
default: f(({ isHovering: l, props: p }) => [
c(Y, H({ ref_for: !0 }, p), {
default: f(() => [
c(I, null, {
default: f(() => [
u("strong", null, y(i.isMobile ? s.settings.daysList[n - 1].slice(0, 3) : s.settings.daysList[n - 1]), 1),
P(c(b, {
class: "mx-1 mb-1",
icon: "mdi-close",
density: "compact",
size: "x-small",
variant: "plain",
title: s.settings.periodRemoveButton,
onClick: (a) => i.clearDayPeriods(n - 1)
}, null, 8, ["title", "onClick"]), [
[v, o.editable && l]
]),
P(c(b, {
class: "mx-1 mb-1",
icon: "mdi-content-copy",
density: "compact",
size: "x-small",
variant: "plain",
title: s.settings.periodDuplicateButton,
onClick: (a) => i.cloneDayPeriods(n - 1)
}, null, 8, ["title", "onClick"]), [
[v, o.editable && l]
]),
P(c(b, {
class: "mx-1 mb-1",
icon: "mdi-select-all",
density: "compact",
size: "x-small",
variant: "plain",
title: s.settings.periodSelectWholeButton,
onClick: (a) => i.selectWholeDay(n - 1)
}, null, 8, ["title", "onClick"]), [
[v, o.editable && l]
])
]),
_: 2
}, 1024)
]),
_: 2
}, 1040)
]),
_: 2
}, 1024)
]))), 128))
]),
(g(), m(k, null, C(25, (n) => u("div", {
key: n,
class: "vws-grid-line"
}, [
u("div", et, y(i.formatHour(n - 1)), 1)
])), 64))
]),
s.showEditMenu ? (g(), x(W, {
key: 1,
modelValue: s.showEditMenu,
"onUpdate:modelValue": e[4] || (e[4] = (n) => s.showEditMenu = n),
target: [s.x, s.y],
"close-on-content-click": !1
}, {
default: f(() => [
c(j, { density: "compact" }, {
default: f(() => [
c(V, null, {
default: f(() => [
c(U, {
modelValue: s.editEvent.title,
"onUpdate:modelValue": e[3] || (e[3] = (n) => s.editEvent.title = n),
label: "Title",
required: "",
density: "compact",
variant: "solo-filled",
type: s.settings.inputType
}, null, 8, ["modelValue", "type"])
]),
_: 1
}),
c(V, { style: { "max-width": "300px" } }, {
default: f(() => [
(g(!0), m(k, null, C(s.settings.colors, (n) => (g(), x(b, {
key: n,
icon: "",
elevation: s.editEvent.backgroundColor === n ? 10 : 0
}, {
default: f(() => [
c(M, {
color: n,
size: "35px",
onClick: (l) => s.editEvent.backgroundColor = n
}, {
default: f(() => e[5] || (e[5] = [
E("mdi-circle")
])),
_: 2
}, 1032, ["color", "onClick"])
]),
_: 2
}, 1032, ["elevation"]))), 128))
]),
_: 1
})
]),
_: 1
})
]),
_: 1
}, 8, ["modelValue", "target"])) : D("", !0)
]);
}
const ut = /* @__PURE__ */ S(G, [["render", ot]]);
export {
ut as default
};