vue-schedule-picker
Version:
The Vue schedule selector is used to select a time period
226 lines (225 loc) • 9.64 kB
JavaScript
(function(){ try {var elementStyle = document.createElement('style'); elementStyle.appendChild(document.createTextNode(".calendar-preview[data-v-926e7333]{margin-top:20px}.calendar-preview .day-item[data-v-926e7333]{display:flex;margin-top:10px}.calendar-preview .day-item[data-v-926e7333]:first-child{margin-top:0}.calendar-preview .day-item .day-name[data-v-926e7333]{color:#333}.calendar-preview .day-item .day-selectedTime[data-v-926e7333]{margin-left:10px}.calendar-preview .day-item .day-no-selected[data-v-926e7333]{margin-left:10px;color:#999;font-size:14px}.calendar[data-v-161591e3]{position:relative;margin-bottom:10px;-webkit-user-select:none;-ms-user-select:none;user-select:none}.calendar .calendar-head[data-v-161591e3]{box-sizing:border-box}.calendar .calendar-head tr[data-v-161591e3],.calendar .calendar-head td[data-v-161591e3]{height:30px}.calendar .calendar-body[data-v-161591e3]{box-sizing:border-box;display:table-row-group;vertical-align:middle;border-color:inherit}.calendar .calendar-table[data-v-161591e3]{box-sizing:border-box;border-collapse:collapse;display:table}.calendar .calendar-table thead[data-v-161591e3]{display:table-header-group;vertical-align:middle;border-color:inherit}.calendar .calendar-table tr[data-v-161591e3],.calendar .calendar-table td[data-v-161591e3],.calendar .calendar-table th[data-v-161591e3]{border:1px solid #ddd;font-size:12px;text-align:center;min-width:12px;padding:0}.calendar .calendar-table th[data-v-161591e3],.calendar .calendar-table td[data-v-161591e3]{display:table-cell}.calendar .calendar-time-color[data-v-161591e3]{background:#f5f5f5;border:1px solid #ddd;font-size:12px;text-align:center;box-sizing:border-box;transition:background .5s linear}.calendar .active-time-color[data-v-161591e3]{transition:background .5s linear}.schedule[data-v-161591e3]{background:rgba(100,255,0,.5);width:0;height:0;position:fixed;top:0;left:0;pointer-events:none}")); document.head.appendChild(elementStyle);} catch(e) {console.error('vite-plugin-css-injected-by-js', e);} })();import { defineComponent as I, computed as M, openBlock as d, createElementBlock as _, Fragment as S, renderList as w, createElementVNode as i, toDisplayString as g, withDirectives as H, vShow as O, readonly as X, ref as $, normalizeStyle as Y, unref as F, normalizeClass as W, renderSlot as j, createBlock as q, createCommentVNode as G } from "vue";
function z(e, n) {
return Array.from({ length: e }, (o, t) => n(t));
}
function B(e) {
return z(e, (n) => n);
}
function ge() {
return z(7, () => ({ forenoon: 0, afternoon: 0 }));
}
function Te(e, n) {
const { x: o, y: t } = n, { lt: p, rb: u } = e, { x: a, y } = p, { x: m, y: k } = u;
return o >= a && o <= m && t >= y && t <= k;
}
function ke(e) {
return Math.ceil(e) - 1;
}
function J(e, n) {
const [o, t] = e, p = o * n, u = (t + 1) * n;
function a(y) {
const m = Math.floor(y / 60), k = y % 60;
return `${m === 0 ? "00" : m < 10 ? `0${m}` : m}:${k === 0 ? "00" : k}`;
}
return `${a(p)}~${a(u)}`;
}
function K(e, n) {
const o = [], t = [];
function p() {
o.push([...t]), t.length = 0;
}
return e.forEach((u, a) => {
u ? t.length === 0 ? t.push(a, a) : t[1] = a : t.length > 0 && p();
}), t.length > 0 && p(), o.map((u) => J(u, n));
}
function C(e, n) {
return (e & 1 << n) !== 0;
}
function L(e, n) {
return e ^ 1 << n;
}
const Q = { class: "calendar-preview" }, Z = { class: "day-item" }, ee = { class: "day-name" }, te = { class: "day-selectedTime" }, ne = /* @__PURE__ */ I({
__name: "Preview",
props: {
timeBucketDisplay: {},
mode: {},
emptyText: {}
},
setup(e) {
const n = e, o = M(() => n.timeBucketDisplay.map((t) => ({
name: t.name,
selectedTime: K(t.selectedTime, n.mode === "hour" ? 60 : 30)
})));
return (t, p) => (d(), _("div", Q, [
(d(!0), _(S, null, w(o.value, (u) => (d(), _("div", Z, [
i("span", ee, g(u.name), 1),
(d(!0), _(S, null, w(u.selectedTime, (a) => (d(), _("div", te, [
i("span", null, g(a), 1)
]))), 256)),
H(i("div", { class: "day-no-selected" }, g(n.emptyText), 513), [
[O, !u.selectedTime.length]
])
]))), 256))
]));
}
});
const E = (e, n) => {
const o = e.__vccOpts || e;
for (const [t, p] of n)
o[t] = p;
return o;
}, oe = /* @__PURE__ */ E(ne, [["__scopeId", "data-v-926e7333"]]), Me = 7, ae = 24, re = 48, Se = 60, we = {}, se = {
DISPLAY_DAY_MAP: {
0: "星期一",
1: "星期二",
2: "星期三",
3: "星期四",
4: "星期五",
5: "星期六",
6: "星期日"
},
forenoon: "上午",
afternoon: "下午",
header: "星期/时间"
}, le = {
DISPLAY_DAY_MAP: {
0: "Mon",
1: "Tues",
2: "Wed",
3: "Thur",
4: "Fri",
5: "Sat",
6: "Sun"
},
forenoon: "forenoon",
afternoon: "afternoon",
header: "Week/Time"
}, ce = (e) => e === "zh-cn" ? se : le, ue = { class: "calendar" }, ie = { class: "calendar-head" }, de = {
rowspan: "2",
class: "calendar-head-title",
colspan: "2"
}, me = { colspan: "24" }, he = { colspan: "24" }, fe = { class: "calendar-body" }, _e = { colspan: "2" }, pe = ["colspan", "onMousedown", "onMousemove", "onMouseup"], ve = /* @__PURE__ */ I({
__name: "Schedule",
props: {
width: { default: 20 },
height: { default: 40 },
activeColor: { default: "rgba(48, 130, 224, 0.6)" },
mode: { default: "half-hour" },
rangeColor: { default: "rgba(100, 255, 100, 0.5)" },
emptyText: { default: "当前日期未选择数据" },
showPreview: { type: Boolean, default: !0 },
language: { default: "zh-cn" },
timeBucket: {}
},
emits: ["changeTimeBucket"],
setup(e, { emit: n }) {
const o = e, t = M(() => o.mode === "hour" ? ae : re), p = M(() => o.mode === "hour" ? 2 : 1), u = X(B(24)), a = $(), y = $(!1), m = $(), k = $(), x = M(() => ce(o.language)), P = M(() => {
const { DISPLAY_DAY_MAP: s } = x.value;
return o.timeBucket.map((h, c) => {
const { forenoon: r, afternoon: l } = h, f = t.value / 2, v = B(f).map((D, T) => C(r, T)), A = B(f).map((D, T) => C(l, T));
return {
name: `${s[c]}`,
selectedTime: v.concat(A)
};
});
}), N = (s, h, c) => {
if (!y.value)
return;
const { dIndex: r, hIndex: l } = m.value, f = Math.min(r, h), v = Math.max(r, h), A = Math.min(l, c), D = Math.max(l, c);
for (let T = f; T <= v; T++)
for (let b = A; b <= D; b++)
V(T, b);
y.value = !1, a.value.style.width = 0, a.value.style.height = 0;
}, R = (s, h, c) => {
if (s.preventDefault(), y.value) {
const { clientX: r, clientY: l } = s, { x: f, y: v } = m.value;
a.value.style.width = `${Math.abs(r - m.value.x)}px`, a.value.style.height = `${Math.abs(l - m.value.y)}px`, a.value.style.top = `${Math.min(l, v)}px`, a.value.style.left = `${Math.min(r, f)}px`;
}
}, U = (s, h, c) => {
const { clientX: r, clientY: l } = s;
m.value = {
dIndex: h,
hIndex: c,
x: r,
y: l
}, y.value = !0, a.value.style.left = `${r}px`, a.value.style.top = `${l}px`;
}, V = (s, h) => {
const c = o.timeBucket[s], r = t.value / 2, l = { ...c };
try {
h < r ? l.forenoon = L(c.forenoon, h) : l.afternoon = L(c.afternoon, h - r);
} catch (f) {
console.log(l), console.error(f);
}
n("changeTimeBucket", s, l);
};
return (s, h) => (d(), _("div", ue, [
H(i("div", {
class: "schedule",
ref_key: "schedule",
ref: a,
style: Y({ background: s.rangeColor })
}, null, 4), [
[O, y.value]
]),
i("table", {
class: "calendar-table",
ref_key: "calendarTable",
ref: k
}, [
i("thead", ie, [
i("tr", null, [
i("th", de, g(x.value.header), 1),
i("th", me, g(x.value.forenoon), 1),
i("th", he, g(x.value.afternoon), 1)
]),
i("tr", null, [
(d(!0), _(S, null, w(F(u), (c, r) => (d(), _("td", {
colspan: "2",
key: r
}, g(c), 1))), 128))
])
]),
i("tbody", fe, [
(d(!0), _(S, null, w(P.value, (c, r) => (d(), _("tr", { key: r }, [
i("td", _e, g(c.name), 1),
(d(!0), _(S, null, w(c.selectedTime, (l, f) => (d(), _("td", {
class: W(["calendar-time-color", { "active-time-color": l }]),
ref_for: !0,
ref: "tableItem",
style: Y({ width: `${s.width}px`, height: `${s.height}px`, background: l ? o.activeColor : "none" }),
key: f,
colspan: p.value,
onMousedown: (v) => U(v, r, f),
onMousemove: (v) => R(v),
onMouseup: (v) => N(v, r, f)
}, null, 46, pe))), 128))
]))), 128))
])
], 512),
j(s.$slots, "default", {}, void 0, !0),
s.showPreview ? (d(), q(oe, {
key: 0,
"time-bucket-display": P.value,
"empty-text": s.emptyText,
mode: s.mode
}, null, 8, ["time-bucket-display", "empty-text", "mode"])) : G("", !0)
]));
}
});
const xe = /* @__PURE__ */ E(ve, [["__scopeId", "data-v-161591e3"]]);
export {
Me as ALL_DAY,
ae as ALL_HOURS,
we as DISPLAY_DAY_MAP,
re as HALF_HOURS_SLOT,
Se as ONE_HOURS,
xe as default,
B as generateIncrementalArray,
K as generatePreviewTime,
ge as generateSelectedTime,
ce as getLanguageConfig,
C as hasBit,
Te as isValidateClick,
ke as normalizeIndex,
L as reverseBit
};