vuestic-ui
Version:
Vue 3 UI Framework
161 lines (160 loc) • 4.92 kB
JavaScript
import { toRefs, ref, watch, computed } from "vue";
const safeModelValue = (m) => m.value ? m.value : new Date((/* @__PURE__ */ new Date()).setHours(0, 0, 0, 0));
const createNumbersArray = (length) => Array.from(Array(length).keys());
const from24to12 = (h) => (h === 0 ? 12 : h) - Number(h > 12) * 12;
const from12to24 = (h, isAM = false) => (h === 12 ? 0 : h) + Number(isAM) * 12;
const createHoursColumn = (props, modelValue, isPM) => {
const computedSize = computed(() => props.ampm ? 12 : 24);
const items = computed(() => {
let array = createNumbersArray(computedSize.value);
if (props.hoursFilter) {
array = array.filter((i) => props.hoursFilter(props.ampm ? i + 12 * Number(isPM.value) : i));
}
return array.map((n) => {
return props.ampm ? from24to12(n) : n;
});
});
const activeItem = computed({
get: () => {
if (!modelValue.value) {
return -1;
}
if (props.ampm) {
const h2 = from24to12(modelValue.value.getHours() - 12 * Number(isPM.value));
return items.value.findIndex((i) => i === h2);
}
const h = modelValue.value.getHours();
return items.value.findIndex((i) => i === h);
},
set: (newIndex) => {
if (props.readonly) {
return;
}
const hours = props.ampm ? from12to24(items.value[newIndex], isPM.value) : items.value[newIndex];
modelValue.value = new Date(safeModelValue(modelValue).setHours(hours));
}
});
return computed(() => ({
items: items.value,
activeItem
}));
};
const createMinutesColumn = (props, modelValue) => {
const items = computed(() => {
const array = createNumbersArray(60);
if (!props.minutesFilter) {
return array;
}
return array.filter(props.minutesFilter);
});
const activeItem = computed({
get: () => {
if (!modelValue.value) {
return -1;
}
const m = modelValue.value.getMinutes();
return items.value.findIndex((i) => i === m);
},
set: (newIndex) => {
if (props.readonly) {
return;
}
const v = items.value[newIndex];
modelValue.value = new Date(safeModelValue(modelValue).setMinutes(v));
}
});
return computed(() => ({
items: items.value,
activeItem
}));
};
const createSecondsColumn = (props, modelValue) => {
const items = computed(() => {
const array = createNumbersArray(60);
if (!props.secondsFilter) {
return array;
}
return array.filter(props.secondsFilter);
});
const activeItem = computed({
get: () => {
if (!modelValue.value) {
return -1;
}
const s = modelValue.value.getSeconds();
return items.value.findIndex((i) => i === s);
},
set: (newIndex) => {
if (props.readonly) {
return;
}
const v = items.value[newIndex];
modelValue.value = new Date(safeModelValue(modelValue).setSeconds(v));
}
});
return computed(() => ({
items: items.value,
activeItem
}));
};
const createPeriodColumn = (props, modelValue, isPM) => {
return computed(() => ({
items: ["AM", "PM"],
activeItem: computed({
get: () => {
if (!modelValue.value) {
return -1;
}
return Number(isPM.value);
},
set: (val) => {
isPM.value = Boolean(val);
const h = safeModelValue(modelValue).getHours();
let h24 = isPM.value ? h + 12 : h;
if (isPM.value && h <= 12) {
h24 = h + 12;
}
if (!isPM.value && h >= 12) {
h24 = h - 12;
}
const isValidFilteredHour = !props.hoursFilter || props.hoursFilter(h24);
if (props.periodUpdatesModelValue && isValidFilteredHour) {
modelValue.value = new Date(safeModelValue(modelValue).setHours(h24));
}
}
})
}));
};
const useTimePicker = (props, modelValue) => {
const { view } = toRefs(props);
const isPM = ref(false);
watch(modelValue, () => {
isPM.value = safeModelValue(modelValue).getHours() >= 12;
}, { immediate: true });
const hoursColumn = createHoursColumn(props, modelValue, isPM);
const minutesColumn = createMinutesColumn(props, modelValue);
const secondsColumn = createSecondsColumn(props, modelValue);
const periodColumn = createPeriodColumn(props, modelValue, isPM);
const columns = computed(() => {
const array = [];
if (view.value === "hours") {
array.push(hoursColumn.value);
} else if (view.value === "minutes") {
array.push(hoursColumn.value, minutesColumn.value);
} else if (view.value === "seconds") {
array.push(hoursColumn.value, minutesColumn.value, secondsColumn.value);
}
if (props.ampm && !props.hidePeriodSwitch) {
array.push(periodColumn.value);
}
return array;
});
return {
columns,
isPM
};
};
export {
useTimePicker as u
};
//# sourceMappingURL=useTimePicker.js.map