maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
179 lines (178 loc) • 9.07 kB
JavaScript
import { defineComponent, computed, ref, onMounted, watch, nextTick, createElementBlock, openBlock, normalizeClass, Fragment, renderList, createElementVNode, normalizeStyle, createBlock, withModifiers, withCtx, createTextVNode, toDisplayString } from "vue";
import dayjs from "dayjs";
import MazBtn from "../components/MazBtn.js";
import { f as findNearestNumberInList, s as scrollToTarget } from "./MazDatePicker.BkBbJH6f.js";
import { _ as _export_sfc } from "./_plugin-vue_export-helper.B--vMWp3.js";
import '../assets/MazPickerTime.yINUjbDZ.css';const _hoisted_1 = { class: "m-date-picker-time__column__items" }, _sfc_main = /* @__PURE__ */ defineComponent({
__name: "MazPickerTime",
props: {
modelValue: {
type: [String, Object],
default: void 0
},
formatterOptions: {
type: Object,
required: !0
},
color: { type: String, required: !0 },
hasDate: { type: Boolean, required: !0 },
minuteInterval: { type: Number, required: !0 },
disabledHours: { type: Array, default: void 0 },
format: { type: String, required: !0 },
isHour12: { type: Boolean, required: !0 },
minDate: { type: String, default: void 0 },
maxDate: { type: String, default: void 0 },
disabled: { type: Boolean, required: !0 }
},
emits: ["update:model-value"],
setup(__props, { emit: __emit }) {
const props = __props, emits = __emit, currentDate = computed({
get: () => props.modelValue,
set: (value) => {
emits("update:model-value", value);
}
}), hours = computed(() => Array.from({ length: props.isHour12 ? 12 : 24 }, (_v, i) => i).map((hour) => {
const hourBase = hour + (props.isHour12 ? 1 : 0), hour12or24 = getHour12or24(hourBase), hourValue = dayjs(currentDate.value).set("hour", hour12or24), isDisabled = isDisableHour(hour12or24) || (props.minDate && currentDate.value ? dayjs(props.minDate).isAfter(hourValue, "hour") : !1) || (props.maxDate && currentDate.value ? dayjs(props.maxDate).isBefore(hourValue, "hour") : !1);
return {
label: `${hourBase < 10 ? "0" : ""}${hourBase}`,
value: dayjs(currentDate.value).set("hour", hour12or24),
isDisabled
};
})), minutes = computed(() => {
const length = Math.floor(60 / props.minuteInterval) - 0;
return Array.from({ length }, (_v, i) => i * props.minuteInterval).map((minute) => {
const minuteValue = dayjs(currentDate.value).set("minute", minute), isDisabled = (props.minDate && currentDate.value ? dayjs(props.minDate).isAfter(minuteValue, "minute") : !1) || (props.maxDate && currentDate.value ? dayjs(props.maxDate).isBefore(minuteValue, "minute") : !1);
return {
label: `${minute < 10 ? "0" : ""}${minute}`,
value: minuteValue,
isDisabled
};
});
}), currentHour = computed(() => typeof currentDate.value == "string" ? findNearestHour(dayjs(currentDate.value).get("hour")) : void 0), currentMinute = computed(
() => typeof currentDate.value == "string" ? findNearestNumberInList(
minutes.value.map(({ value }) => value.get("minute")),
dayjs(currentDate.value).get("minute")
) : void 0
), currentAmpm = computed(() => typeof currentHour.value == "number" ? currentHour.value >= 12 ? "pm" : "am" : void 0), ampm = computed(
() => props.isHour12 ? [
{ label: "AM", value: "am" },
{ label: "PM", value: "pm" }
] : []
), columns = computed(() => {
const columns2 = [
{
identifier: "hour",
values: hours.value
},
{
identifier: "minute",
values: minutes.value
}
];
return props.isHour12 && columns2.push({
identifier: "ampm",
values: ampm.value
}), columns2;
});
function findNearestHour(hour) {
if (!props.disabledHours)
return hour;
const hourList = Array.from({ length: 24 }, (_v, i) => i).filter(
(hour2) => !props.disabledHours?.includes(hour2) || !0
), nearHour = findNearestNumberInList(hourList, hour);
return nearHour !== hour && selectTime("hour", dayjs(currentDate.value).set("hour", nearHour)), nearHour;
}
const MazDatePickerTime = ref(), spacerHeight = ref();
function getHour12or24(hourValue) {
if (props.isHour12) {
const newValue = currentAmpm.value === "pm" ? hourValue + 12 : hourValue;
return newValue === 12 ? 0 : newValue === 24 ? 12 : newValue;
} else
return hourValue;
}
function setSpacerHeight() {
if (!MazDatePickerTime.value)
return;
const itemHeight = MazDatePickerTime.value.querySelector(
".m-date-picker-time__column .m-btn"
)?.offsetHeight, topSpace = MazDatePickerTime.value.offsetHeight / 2 - itemHeight / 2;
spacerHeight.value = topSpace;
}
onMounted(() => {
setSpacerHeight(), scrollColumns(!1);
}), watch(
() => props.modelValue,
async (value, oldValue) => {
value !== oldValue && (await nextTick(), scrollColumns(!0));
},
{ immediate: !0 }
);
function scrollColumns(hasSmoothEffect) {
scrollColumn("hour", hasSmoothEffect), scrollColumn("minute", hasSmoothEffect), props.isHour12 && scrollColumn("ampm", hasSmoothEffect);
}
function isDisableHour(value) {
return (props.disabledHours && props.disabledHours.includes(value)) ?? !1;
}
function isSelected(identifier, value) {
return value === "am" || value === "pm" ? currentAmpm.value === value : identifier === "hour" ? currentHour.value === value.get(identifier) : identifier === "minute" ? currentMinute.value === value.get(identifier) : !1;
}
async function scrollColumn(identifier, hasSmoothEffect = !0) {
if (!MazDatePickerTime.value)
return;
const column = MazDatePickerTime.value.querySelector(`.m-date-picker-time__column__${identifier}`), selectedButton = MazDatePickerTime.value.querySelector(
`.m-date-picker-time__column__${identifier} .--is-selected`
);
spacerHeight.value && column && selectedButton && MazDatePickerTime.value && (await nextTick(), scrollToTarget(column, selectedButton, spacerHeight.value, hasSmoothEffect));
}
async function selectTime(identifier, value) {
const newDate = dayjs(currentDate.value);
if (identifier === "hour" && typeof value == "object" && (currentDate.value = newDate.set("hour", value.get("hour")).format()), identifier === "minute" && typeof value == "object") {
const dateWithNewMinute = newDate.set("minute", value.get("minute"));
currentDate.value = dateWithNewMinute.format();
}
if (identifier === "ampm" && (currentAmpm.value !== value || !currentHour.value) && (value === "am" && (currentDate.value = newDate.set("hour", newDate.get("hour")).subtract(12, "hour").format()), value === "pm")) {
const baseHour = newDate.get("hour"), newHour = baseHour + 12 > 12 && baseHour + 12 < 24 ? baseHour + 12 : baseHour === 0 ? 12 : baseHour;
currentDate.value = newDate.set("hour", newHour).format();
}
await nextTick(), scrollColumn(identifier);
}
return (_ctx, _cache) => (openBlock(), createElementBlock("div", {
ref_key: "MazDatePickerTime",
ref: MazDatePickerTime,
class: normalizeClass(["m-date-picker-time", { "--has-date": __props.hasDate }])
}, [
(openBlock(!0), createElementBlock(Fragment, null, renderList(columns.value, ({ values, identifier }, i) => (openBlock(), createElementBlock("div", {
key: i,
class: normalizeClass(["m-date-picker-time__column", [`m-date-picker-time__column__${identifier}`]])
}, [
createElementVNode("div", {
style: normalizeStyle({ height: `${spacerHeight.value}px` }),
class: "m-date-picker-time__column__spacer"
}, null, 4),
createElementVNode("div", _hoisted_1, [
(openBlock(!0), createElementBlock(Fragment, null, renderList(values, ({ value, label, isDisabled }, unitIndex) => (openBlock(), createBlock(MazBtn, {
key: unitIndex,
size: "xs",
color: isSelected(identifier, value) ? __props.color : "transparent",
class: normalizeClass({ "--is-selected": isSelected(identifier, value) }),
disabled: isDisabled || __props.disabled,
type: "button",
onClick: withModifiers(($event) => selectTime(identifier, value), ["stop"])
}, {
default: withCtx(() => [
createTextVNode(toDisplayString(label), 1)
]),
_: 2
}, 1032, ["color", "class", "disabled", "onClick"]))), 128))
]),
createElementVNode("div", {
style: normalizeStyle({ height: `${spacerHeight.value}px` }),
class: "m-date-picker-time__column__spacer"
}, null, 4)
], 2))), 128))
], 2));
}
}), MazPickerTime = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-69e4ce40"]]);
export {
MazPickerTime as default
};