@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
225 lines (224 loc) • 6.74 kB
JavaScript
import { defineComponent as V, ref as u, watch as d, createElementBlock as O, openBlock as j, normalizeClass as m, unref as i, createVNode as y, withModifiers as T, withCtx as g, createElementVNode as w, renderSlot as h, createTextVNode as $, toDisplayString as k } from "vue";
import "../wheel/index.mjs";
import { useNameHelper as z } from "@vexip-ui/config";
import { range as S, doubleDigits as C, USE_TOUCH as q } from "@vexip-ui/utils";
import W from "../wheel/wheel.vue2.mjs";
const Q = /* @__PURE__ */ V({
name: "TimeWheel",
__name: "time-wheel",
props: {
noArrow: {
type: Boolean,
default: !1
},
hour: {
type: Number,
default: 0,
validator: (o) => o >= 0 && o <= 23
},
minute: {
type: Number,
default: 0,
validator: (o) => o >= 0 && o <= 59
},
second: {
type: Number,
default: 0,
validator: (o) => o >= 0 && o <= 59
},
candidate: {
default: 2,
validator: (o) => [0, 1, 2, 3].includes(o)
},
steps: {
type: Array,
default: () => [1, 1, 1],
validator: (o) => {
if (o[0] && 24 % o[0] !== 0)
return !1;
for (let f = 1; f < 3; ++f)
if (o[f] && 60 % o[f] !== 0)
return !1;
return !0;
}
},
pointer: {
type: Boolean,
default: q
},
disabledTime: {
type: Object,
default: () => ({})
},
noTransition: {
type: Boolean,
default: !1
}
},
emits: ["change", "toggle-col", "update:hour", "update:minute", "update:second"],
setup(o, { expose: f, emit: U }) {
const a = o, s = U, r = z("time-picker"), l = u(a.hour), p = u(a.minute), b = u(a.second), N = u([]), M = u([]), x = u([]), A = u(), B = u(), D = u();
d(() => a.steps, I, { immediate: !0 }), d(
() => a.hour,
(e) => {
l.value = e;
}
), d(
() => a.minute,
(e) => {
p.value = e;
}
), d(
() => a.second,
(e) => {
b.value = e;
}
), d(l, (e) => {
s("update:hour", e), s("change", "hour", e);
}), d(p, (e) => {
s("update:minute", e), s("change", "minute", e);
}), d(b, (e) => {
s("update:second", e), s("change", "second", e);
}), f({ refreshWheel: K });
function E(e) {
return typeof a.disabledTime.hour == "function" && a.disabledTime.hour(e);
}
function H(e) {
return typeof a.disabledTime.minute == "function" && a.disabledTime.minute(l.value, e);
}
function R(e) {
return typeof a.disabledTime.second == "function" && a.disabledTime.second(l.value, p.value, e);
}
function I() {
const [e = 1, n = 1, t = 1] = a.steps;
N.value = S(24 / e, 0, e), M.value = S(60 / n, 0, n), x.value = S(60 / t, 0, t);
}
function v(e) {
s("toggle-col", e);
}
function K() {
[A.value, B.value, D.value].forEach((e) => {
e == null || e.refreshScroll();
});
}
return (e, n) => (j(), O("div", {
class: m(i(r).be("wheel"))
}, [
y(i(W), {
ref_key: "hourWheel",
ref: A,
value: l.value,
"onUpdate:value": n[0] || (n[0] = (t) => l.value = t),
inherit: "",
class: m(i(r).be("hour-wheel")),
pointer: o.pointer,
arrow: !o.noArrow,
candidate: o.candidate,
options: N.value,
tabindex: "-1",
"no-transition": o.noTransition,
onMouseenter: n[1] || (n[1] = (t) => v("hour")),
onTouchstart: n[2] || (n[2] = (t) => v("hour")),
onKeydown: n[3] || (n[3] = T(() => {
}, ["stop"])),
onItemClick: n[4] || (n[4] = (t) => l.value = t)
}, {
default: g(({ option: t, index: c }) => [
w("span", {
class: m([
i(r).be("option"),
i(r).be("hour"),
E(t.value) && i(r).bem("option", "disabled")
])
}, [
h(e.$slots, "hour", {
option: t,
index: c
}, () => [
$(k(i(C)(t.value)), 1)
])
], 2)
]),
_: 3
}, 8, ["value", "class", "pointer", "arrow", "candidate", "options", "no-transition"]),
y(i(W), {
ref_key: "minuteWheel",
ref: B,
value: p.value,
"onUpdate:value": n[5] || (n[5] = (t) => p.value = t),
inherit: "",
class: m(i(r).be("minute-wheel")),
pointer: o.pointer,
arrow: !o.noArrow,
candidate: o.candidate,
options: M.value,
tabindex: "-1",
"no-transition": o.noTransition,
onMouseenter: n[6] || (n[6] = (t) => v("minute")),
onTouchstart: n[7] || (n[7] = (t) => v("minute")),
onKeydown: n[8] || (n[8] = T(() => {
}, ["stop"])),
onItemClick: n[9] || (n[9] = (t) => p.value = t)
}, {
default: g(({ option: t, index: c }) => [
w("span", {
class: m([
i(r).be("option"),
i(r).be("minute"),
H(t.value) && i(r).bem("option", "disabled")
])
}, [
h(e.$slots, "minute", {
option: t,
index: c
}, () => [
$(k(i(C)(t.value)), 1)
])
], 2)
]),
_: 3
}, 8, ["value", "class", "pointer", "arrow", "candidate", "options", "no-transition"]),
y(i(W), {
ref_key: "secondWheel",
ref: D,
value: b.value,
"onUpdate:value": n[10] || (n[10] = (t) => b.value = t),
inherit: "",
class: m(i(r).be("second-wheel")),
pointer: o.pointer,
arrow: !o.noArrow,
candidate: o.candidate,
options: x.value,
tabindex: "-1",
"no-transition": o.noTransition,
onMouseenter: n[11] || (n[11] = (t) => v("second")),
onTouchstart: n[12] || (n[12] = (t) => v("second")),
onKeydown: n[13] || (n[13] = T(() => {
}, ["stop"])),
onItemClick: n[14] || (n[14] = (t) => b.value = t)
}, {
default: g(({ option: t, index: c }) => [
w("span", {
class: m([
i(r).be("option"),
i(r).be("second"),
R(t.value) && i(r).bem("option", "disabled")
])
}, [
h(e.$slots, "second", {
option: t,
index: c
}, () => [
$(k(i(C)(t.value)), 1)
])
], 2)
]),
_: 3
}, 8, ["value", "class", "pointer", "arrow", "candidate", "options", "no-transition"])
], 2));
}
});
export {
Q as default
};
//# sourceMappingURL=time-wheel.vue2.mjs.map