vue3-tailwind-datepicker
Version:
A date range picker component for Vue3 and Tailwind CSS, dependent to day.js
1,075 lines (996 loc) • 281 kB
JavaScript
import dayjs from 'dayjs';
import localeData from 'dayjs/plugin/localeData';
import localizedFormat from 'dayjs/plugin/localizedFormat';
import customParseFormat from 'dayjs/plugin/customParseFormat';
import isToday from 'dayjs/plugin/isToday';
import isBetween from 'dayjs/plugin/isBetween';
import duration from 'dayjs/plugin/duration';
import { defineComponent, openBlock, createBlock, createVNode, withDirectives, vShow, toDisplayString, Fragment, renderList, inject, TransitionGroup, withCtx, Transition, createCommentVNode, withModifiers, ref, reactive, computed, unref, nextTick, watch, watchEffect, isProxy, provide, resolveComponent, resolveDirective, renderSlot, mergeProps, vModelText } from 'vue';
const usePreviousDate = date => {
const display = [];
for (let i = 0; i <= date.date(0).day(); i++) {
display.push(date.date(0).subtract(i, 'day'));
}
return display.sort((a, b) => a.date() - b.date());
};
const useCurrentDate = date => {
return Array.from({
length: date.daysInMonth()
}, (v, k) => date.date(k + 1));
};
const useNextDate = date => {
const display = [];
for (let i = 1; i <= 42 - (usePreviousDate(date).length + date.daysInMonth()); i++) {
display.push(date.date(i).month(date.month()).add(1, 'month'));
}
return display;
};
const useDisableDate = (date, {
disableDate
}) => {
if (typeof disableDate === 'function') {
return disableDate(date.toDate());
} else {
return false;
}
};
const useBetweenRange = (date, {
previous,
next
}) => {
let pattern;
if (previous.isAfter(next, 'date')) {
pattern = '(]';
} else {
pattern = '[)';
}
return !!(date.isBetween(previous, next, 'date', pattern) && !date.off);
};
const useToValueFromString = (date, {
formatter
}) => {
return date.format(formatter.date);
};
const useToValueFromArray = ({
previous,
next
}, {
formatter,
separator
}) => {
return `${previous.format(formatter.date)}${separator}${next.format(formatter.date)}`;
};
const useDirective = binding => {
const {
instance,
arg,
value
} = binding;
document.body.addEventListener('click', $event => {
if ($event.target.classList.contains('litepie-datepicker-overlay')) {
return instance.isShow = false;
} else {
if (instance.LitepieDatepickerRef) {
const {
autoApply,
previous,
next
} = instance;
const target = $event.target.classList.contains('litepie-datepicker-date');
if (target && autoApply && !previous && !next) {
return instance.isShow = false;
}
if (!autoApply && $event.target.classList.contains(`${arg}-apply-picker`) && instance.value !== '') {
return instance.isShow = false;
}
if ($event.target.classList.contains(`${arg}-cancel-picker`)) {
return instance.isShow = false;
}
if ($event.target.classList.contains(`litepie-shortcuts`) && autoApply) {
return instance.isShow = false;
}
return instance.isShow = instance.LitepieDatepickerRef.contains($event.target) || document.getElementById(value) === $event.target || value === $event.target;
}
return instance.isShow = true;
}
});
};
const useVisibleViewport = el => {
const {
right
} = el.getBoundingClientRect();
const vWidth = window.innerWidth || document.documentElement.clientWidth;
return right < vWidth;
};
var script = defineComponent({
name: 'LitepieHeader',
props: {
asPrevOrNext: Boolean,
panel: Object,
calendar: Object
},
inheritAttrs: false
});
const _hoisted_1 = {
class: "flex justify-between items-center px-2 py-1.5 rounded-md border border-black border-opacity-10 dark:border-litepie-secondary-700 dark:border-opacity-100"
};
const _hoisted_2 = {
class: "flex-shrink-0"
};
const _hoisted_3 = {
class: "inline-flex rounded-full"
};
const _hoisted_4 = {
class: "w-5 h-5 rtl-flip",
fill: "none",
stroke: "currentColor",
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg"
};
const _hoisted_5 = {
class: "px-1.5 space-x-1.5 flex flex-1"
};
const _hoisted_6 = {
class: "flex flex-1 rounded-md"
};
const _hoisted_7 = {
class: "flex flex-1 rounded-md"
};
const _hoisted_8 = {
class: "flex-shrink-0"
};
const _hoisted_9 = {
class: "inline-flex rounded-full"
};
const _hoisted_10 = {
class: "w-5 h-5 rtl-flip",
fill: "none",
stroke: "currentColor",
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg"
};
function render(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createBlock("div", _hoisted_1, [createVNode("div", _hoisted_2, [withDirectives(createVNode("span", _hoisted_3, [createVNode("button", {
type: "button",
class: "p-1.5 rounded-full bg-white text-litepie-secondary-600 transition-colors border border-transparent hover:bg-litepie-secondary-100 hover:text-litepie-secondary-900 focus:bg-litepie-primary-50 focus:text-litepie-secondary-900 focus:border-litepie-primary-300 focus:ring focus:ring-litepie-primary-500 focus:ring-opacity-10 focus:outline-none dark:bg-litepie-secondary-800 dark:text-litepie-secondary-300 dark:hover:bg-litepie-secondary-700 dark:hover:text-litepie-secondary-300 dark:focus:bg-litepie-secondary-600 dark:focus:text-litepie-secondary-100 dark:focus:border-litepie-primary-500 dark:focus:ring-opacity-25 dark:focus:bg-opacity-50",
onClick: _cache[1] || (_cache[1] = $event => _ctx.panel.calendar ? _ctx.calendar.onPrevious() : _ctx.calendar.onPreviousYear())
}, [(openBlock(), createBlock("svg", _hoisted_4, [createVNode("path", {
"stroke-linecap": "round",
"stroke-linejoin": "round",
"stroke-width": "1.5",
d: _ctx.panel.calendar ? `M15 19l-7-7 7-7` : `M11 19l-7-7 7-7m8 14l-7-7 7-7`
}, null, 8, ["d"])]))])], 512), [[vShow, _ctx.panel.calendar || _ctx.panel.year]])]), createVNode("div", _hoisted_5, [createVNode("span", _hoisted_6, [createVNode("button", {
type: "button",
class: "px-3 py-1.5 block w-full leading-relaxed rounded-md bg-white text-xs 2xl:text-sm tracking-wide text-litepie-secondary-600 font-semibold sm:font-medium transition-colors border border-transparent hover:bg-litepie-secondary-100 hover:text-litepie-secondary-900 focus:bg-litepie-primary-50 focus:text-litepie-secondary-900 focus:border-litepie-primary-300 focus:ring focus:ring-litepie-primary-500 focus:ring-opacity-10 focus:outline-none uppercase dark:bg-litepie-secondary-800 dark:text-litepie-secondary-300 dark:hover:bg-litepie-secondary-700 dark:hover:text-litepie-secondary-300 dark:focus:bg-litepie-secondary-600 dark:focus:text-litepie-secondary-100 dark:focus:border-litepie-primary-500 dark:focus:ring-opacity-25 dark:focus:bg-opacity-50",
textContent: toDisplayString(_ctx.calendar.month),
onClick: _cache[2] || (_cache[2] = $event => _ctx.calendar.openMonth())
}, null, 8, ["textContent"])]), createVNode("span", _hoisted_7, [createVNode("button", {
type: "button",
class: "px-3 py-1.5 block w-full leading-relaxed rounded-md bg-white text-xs 2xl:text-sm tracking-wide text-litepie-secondary-600 font-semibold sm:font-medium transition-colors border border-transparent hover:bg-litepie-secondary-100 hover:text-litepie-secondary-900 focus:bg-litepie-primary-50 focus:text-litepie-secondary-900 focus:border-litepie-primary-300 focus:ring focus:ring-litepie-primary-500 focus:ring-opacity-10 focus:outline-none uppercase dark:bg-litepie-secondary-800 dark:text-litepie-secondary-300 dark:hover:bg-litepie-secondary-700 dark:hover:text-litepie-secondary-300 dark:focus:bg-litepie-secondary-600 dark:focus:text-litepie-secondary-100 dark:focus:border-litepie-primary-500 dark:focus:ring-opacity-25 dark:focus:bg-opacity-50",
textContent: toDisplayString(_ctx.calendar.year),
onClick: _cache[3] || (_cache[3] = $event => _ctx.calendar.openYear())
}, null, 8, ["textContent"])])]), createVNode("div", _hoisted_8, [withDirectives(createVNode("span", _hoisted_9, [createVNode("button", {
type: "button",
class: "p-1.5 rounded-full bg-white text-litepie-secondary-600 transition-colors border border-transparent hover:bg-litepie-secondary-100 hover:text-litepie-secondary-900 focus:bg-litepie-primary-50 focus:text-litepie-secondary-900 focus:border-litepie-primary-300 focus:ring focus:ring-litepie-primary-500 focus:ring-opacity-10 focus:outline-none dark:bg-litepie-secondary-800 dark:text-litepie-secondary-300 dark:hover:bg-litepie-secondary-700 dark:hover:text-litepie-secondary-300 dark:focus:bg-litepie-secondary-600 dark:focus:text-litepie-secondary-100 dark:focus:border-litepie-primary-500 dark:focus:ring-opacity-25 dark:focus:bg-opacity-50",
onClick: _cache[4] || (_cache[4] = $event => _ctx.panel.calendar ? _ctx.calendar.onNext() : _ctx.calendar.onNextYear())
}, [(openBlock(), createBlock("svg", _hoisted_10, [createVNode("path", {
"stroke-linecap": "round",
"stroke-linejoin": "round",
"stroke-width": "1.5",
d: _ctx.panel.calendar ? `M9 5l7 7-7 7` : `M13 5l7 7-7 7M5 5l7 7-7 7`
}, null, 8, ["d"])]))])], 512), [[vShow, _ctx.panel.calendar || _ctx.panel.year]])])]);
}
script.render = render;
var script$1 = defineComponent({
name: 'LitepieMonth',
props: {
months: Array
},
inheritAttrs: false,
emits: ['update:month']
});
const _hoisted_1$1 = {
class: "flex flex-wrap mt-1.5"
};
const _hoisted_2$1 = {
class: "flex rounded-md mt-1.5"
};
function render$1(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createBlock("div", _hoisted_1$1, [(openBlock(true), createBlock(Fragment, null, renderList(_ctx.months, (month, key) => {
return openBlock(), createBlock("div", {
key: key,
class: "w-1/2 px-0.5"
}, [createVNode("span", _hoisted_2$1, [createVNode("button", {
type: "button",
class: "px-3 py-2 block w-full leading-6 rounded-md bg-white text-xs 2xl:text-sm tracking-wide text-litepie-secondary-600 font-medium transition-colors border border-transparent hover:bg-litepie-secondary-100 hover:text-litepie-secondary-900 focus:bg-litepie-primary-50 focus:text-litepie-secondary-900 focus:border-litepie-primary-300 focus:ring focus:ring-litepie-primary-500 focus:ring-opacity-10 focus:outline-none uppercase dark:bg-litepie-secondary-800 dark:hover:bg-litepie-secondary-700 dark:text-litepie-secondary-300 dark:hover:text-litepie-secondary-100 dark:focus:bg-litepie-secondary-700",
textContent: toDisplayString(month),
onClick: $event => _ctx.$emit('update:month', key)
}, null, 8, ["textContent", "onClick"])])]);
}), 128))]);
}
script$1.render = render$1;
var script$2 = defineComponent({
name: 'LitepieWeek',
props: {
weeks: Array
},
inheritAttrs: false
});
const _hoisted_1$2 = {
class: "grid grid-cols-7 py-2 mt-0.5 border-b border-black border-opacity-10 dark:border-litepie-secondary-700 dark:border-opacity-100"
};
function render$2(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createBlock("div", _hoisted_1$2, [(openBlock(true), createBlock(Fragment, null, renderList(_ctx.weeks, (day, keyDay) => {
return openBlock(), createBlock("div", {
key: keyDay,
class: "text-litepie-secondary-500 text-xs 2xl:text-sm tracking-wide font-medium text-center cursor-default dark:text-litepie-secondary-400"
}, [createVNode("span", {
textContent: toDisplayString(day)
}, null, 8, ["textContent"])]);
}), 128))]);
}
script$2.render = render$2;
var script$3 = defineComponent({
name: 'LitepieYear',
props: {
asPrevOrNext: Boolean,
years: Array
},
inheritAttrs: false,
emits: ['update:year']
});
const _hoisted_1$3 = {
class: "flex flex-wrap"
};
const _hoisted_2$2 = {
class: "flex rounded-md mt-1.5"
};
function render$3(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createBlock("div", _hoisted_1$3, [(openBlock(true), createBlock(Fragment, null, renderList(_ctx.years, (year, key) => {
return openBlock(), createBlock("div", {
key: key,
class: "w-1/2 px-0.5"
}, [createVNode("span", _hoisted_2$2, [createVNode("button", {
type: "button",
class: "px-3 py-2 block w-full leading-6 rounded-md bg-white text-xs 2xl:text-sm tracking-wide text-litepie-secondary-600 font-medium transition-colors border border-transparent hover:bg-litepie-secondary-100 hover:text-litepie-secondary-900 focus:bg-litepie-primary-50 focus:text-litepie-secondary-900 focus:border-litepie-primary-300 focus:ring focus:ring-litepie-primary-500 focus:ring-opacity-10 focus:outline-none uppercase dark:bg-litepie-secondary-800 dark:hover:bg-litepie-secondary-700 dark:text-litepie-secondary-300 dark:hover:text-litepie-secondary-100 dark:focus:bg-litepie-secondary-700",
textContent: toDisplayString(year),
onClick: $event => _ctx.$emit('update:year', year, _ctx.asPrevOrNext)
}, null, 8, ["textContent", "onClick"])])]);
}), 128))]);
}
script$3.render = render$3;
var script$4 = defineComponent({
name: 'LitepieCalendar',
props: {
asPrevOrNext: Boolean,
calendar: Object,
weeks: Array,
asRange: Boolean
},
inheritAttrs: false,
emits: ['update:date'],
setup() {
const isBetweenRange = inject('isBetweenRange');
const betweenRangeClasses = inject('betweenRangeClasses');
const datepickerClasses = inject('datepickerClasses');
const atMouseOver = inject('atMouseOver');
return {
isBetweenRange,
betweenRangeClasses,
datepickerClasses,
atMouseOver
};
}
});
const _hoisted_1$4 = {
class: "grid grid-cols-7 gap-y-0.5 my-1"
};
function render$4(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createBlock("div", _hoisted_1$4, [createVNode(TransitionGroup, {
"enter-from-class": "opacity-0",
"enter-to-class": "opacity-100",
"enter-active-class": "transition-opacity ease-out duration-300",
"leave-active-class": "transition-opacity ease-in duration-200",
"leave-from-class": "opacity-100",
"leave-to-class": "opacity-0"
}, {
default: withCtx(() => [(openBlock(true), createBlock(Fragment, null, renderList(_ctx.calendar.date(), (date, keyDate) => {
return openBlock(), createBlock("div", {
key: keyDate,
class: ["relative", {
'litepie-tooltip': _ctx.asRange && date.duration()
}],
"data-tooltip": `${date.duration()}`
}, [createVNode(Transition, {
"enter-from-class": "opacity-0",
"enter-to-class": "opacity-100",
"enter-active-class": "transition-opacity ease-out duration-200",
"leave-active-class": "transition-opacity ease-in duration-150",
"leave-from-class": "opacity-100",
"leave-to-class": "opacity-0"
}, {
default: withCtx(() => [_ctx.isBetweenRange(date) || date.hovered() ? (openBlock(), createBlock("span", {
key: 0,
class: ["absolute bg-litepie-primary-100 bg-opacity-60 dark:bg-litepie-secondary-700 dark:bg-opacity-50", _ctx.betweenRangeClasses(date)]
}, null, 2)) : createCommentVNode("", true)]),
_: 2
}, 1024), createVNode("button", {
type: "button",
class: ["litepie-datepicker-date relative w-12 h-12 lg:w-10 lg:h-10 flex justify-center items-center text-xs 2xl:text-sm focus:outline-none", [_ctx.datepickerClasses(date), _ctx.asRange ? 'transition-all' : 'transition-colors']],
disabled: date.disabled || date.inRange(),
onClick: $event => _ctx.$emit('update:date', date, _ctx.asPrevOrNext),
onMouseenter: $event => _ctx.atMouseOver(date),
onFocusin: $event => _ctx.atMouseOver(date),
textContent: toDisplayString(date.date()),
"data-date": date.toDate()
}, null, 42, ["disabled", "onClick", "onMouseenter", "onFocusin", "textContent", "data-date"])], 10, ["data-tooltip"]);
}), 128))]),
_: 1
})]);
}
script$4.render = render$4;
var script$5 = defineComponent({
name: 'LitepieShortcut',
props: {
shortcuts: [Boolean, Function],
asRange: Boolean,
asSingle: Boolean,
i18n: Object
},
inheritAttrs: false,
setup(props) {
const setToToday = inject('setToToday');
const setToYesterday = inject('setToYesterday');
const setToLastDay = inject('setToLastDay');
const setToThisMonth = inject('setToThisMonth');
const setToLastMonth = inject('setToLastMonth');
const setToCustomShortcut = inject('setToCustomShortcut');
const withShortcut = () => {
if (typeof props.shortcuts === 'function') {
return props.shortcuts();
} else {
return false;
}
};
return {
setToToday,
setToYesterday,
setToLastDay,
setToThisMonth,
setToLastMonth,
setToCustomShortcut,
withShortcut
};
}
});
const _hoisted_1$5 = {
key: 0,
class: "relative order-last w-full border-t border-b-0 border-black sm:border-t-0 sm:border-b lg:border-b-0 lg:border-e border-opacity-10 sm:order-none dark:border-litepie-secondary-700 dark:border-opacity-100 sm:mt-1 lg:me-1 sm:mb-1 lg:mb-0 sm:mx-1 lg:mx-0"
};
const _hoisted_2$3 = {
key: 0,
class: "grid grid-cols-2 sm:grid-cols-3 gap-1 lg:block w-full pe-0 sm:pe-1 mt-1.5 sm:mt-0 sm:mb-1.5 lg:mb-0"
};
const _hoisted_3$1 = {
key: 1,
class: "grid grid-cols-2 sm:grid-cols-3 gap-1 lg:block w-full pe-0 sm:pe-1 mt-1.5 sm:mt-0 sm:mb-1.5 lg:mb-0"
};
function render$5(_ctx, _cache, $props, $setup, $data, $options) {
return _ctx.asRange && !_ctx.asSingle ? (openBlock(), createBlock("div", _hoisted_1$5, [_ctx.withShortcut() ? (openBlock(), createBlock("ol", _hoisted_2$3, [(openBlock(true), createBlock(Fragment, null, renderList(_ctx.withShortcut(), (item, i) => {
return openBlock(), createBlock("li", {
key: i
}, [createVNode("a", {
href: "#",
class: "block px-2 py-2 text-sm font-medium transition-colors rounded litepie-shortcuts lg:text-xs sm:leading-4 whitespace-nowrap text-litepie-primary-600 hover:text-litepie-primary-700 hover:bg-litepie-secondary-100 focus:bg-litepie-secondary-100 focus:text-litepie-primary-600 dark:hover:bg-litepie-secondary-700 dark:hover:text-litepie-primary-300 dark:text-litepie-primary-400 dark:focus:bg-litepie-secondary-700 dark:focus:text-litepie-primary-300",
onClick: withModifiers($event => _ctx.setToCustomShortcut(item), ["prevent"]),
textContent: toDisplayString(item.label)
}, null, 8, ["onClick", "textContent"])]);
}), 128))])) : (openBlock(), createBlock("ol", _hoisted_3$1, [createVNode("li", null, [createVNode("a", {
href: "#",
class: "block px-2 py-2 text-sm font-medium transition-colors rounded litepie-shortcuts lg:text-xs sm:leading-4 whitespace-nowrap text-litepie-primary-600 hover:text-litepie-primary-700 hover:bg-litepie-secondary-100 focus:bg-litepie-secondary-100 focus:text-litepie-primary-600 dark:hover:bg-litepie-secondary-700 dark:hover:text-litepie-primary-300 dark:text-litepie-primary-400 dark:focus:bg-litepie-secondary-700 dark:focus:text-litepie-primary-300",
onClick: _cache[1] || (_cache[1] = withModifiers((...args) => _ctx.setToToday && _ctx.setToToday(...args), ["prevent"]))
}, toDisplayString(_ctx.i18n.today), 1)]), createVNode("li", null, [createVNode("a", {
href: "#",
class: "block px-2 py-2 text-sm font-medium transition-colors rounded litepie-shortcuts lg:text-xs sm:leading-4 whitespace-nowrap text-litepie-primary-600 hover:text-litepie-primary-700 hover:bg-litepie-secondary-100 focus:bg-litepie-secondary-100 focus:text-litepie-primary-600 dark:hover:bg-litepie-secondary-700 dark:hover:text-litepie-primary-300 dark:text-litepie-primary-400 dark:focus:bg-litepie-secondary-700 dark:focus:text-litepie-primary-300",
onClick: _cache[2] || (_cache[2] = withModifiers((...args) => _ctx.setToYesterday && _ctx.setToYesterday(...args), ["prevent"]))
}, toDisplayString(_ctx.i18n.yesterday), 1)]), createVNode("li", null, [createVNode("a", {
href: "#",
class: "block px-2 py-2 text-sm font-medium transition-colors rounded litepie-shortcuts lg:text-xs sm:leading-4 whitespace-nowrap text-litepie-primary-600 hover:text-litepie-primary-700 hover:bg-litepie-secondary-100 focus:bg-litepie-secondary-100 focus:text-litepie-primary-600 dark:hover:bg-litepie-secondary-700 dark:hover:text-litepie-primary-300 dark:text-litepie-primary-400 dark:focus:bg-litepie-secondary-700 dark:focus:text-litepie-primary-300",
onClick: _cache[3] || (_cache[3] = withModifiers($event => _ctx.setToLastDay(7), ["prevent"]))
}, toDisplayString(_ctx.i18n.past(7)), 1)]), createVNode("li", null, [createVNode("a", {
href: "#",
class: "block px-2 py-2 text-sm font-medium transition-colors rounded litepie-shortcuts lg:text-xs sm:leading-4 whitespace-nowrap text-litepie-primary-600 hover:text-litepie-primary-700 hover:bg-litepie-secondary-100 focus:bg-litepie-secondary-100 focus:text-litepie-primary-600 dark:hover:bg-litepie-secondary-700 dark:hover:text-litepie-primary-300 dark:text-litepie-primary-400 dark:focus:bg-litepie-secondary-700 dark:focus:text-litepie-primary-300",
onClick: _cache[4] || (_cache[4] = withModifiers($event => _ctx.setToLastDay(30), ["prevent"]))
}, toDisplayString(_ctx.i18n.past(30)), 1)]), createVNode("li", null, [createVNode("a", {
href: "#",
class: "block px-2 py-2 text-sm font-medium transition-colors rounded litepie-shortcuts lg:text-xs sm:leading-4 whitespace-nowrap text-litepie-primary-600 hover:text-litepie-primary-700 hover:bg-litepie-secondary-100 focus:bg-litepie-secondary-100 focus:text-litepie-primary-600 dark:hover:bg-litepie-secondary-700 dark:hover:text-litepie-primary-300 dark:text-litepie-primary-400 dark:focus:bg-litepie-secondary-700 dark:focus:text-litepie-primary-300",
onClick: _cache[5] || (_cache[5] = withModifiers((...args) => _ctx.setToThisMonth && _ctx.setToThisMonth(...args), ["prevent"]))
}, toDisplayString(_ctx.i18n.currentMonth), 1)]), createVNode("li", null, [createVNode("a", {
href: "#",
class: "block px-2 py-2 text-sm font-medium transition-colors rounded litepie-shortcuts lg:text-xs sm:leading-4 whitespace-nowrap text-litepie-primary-600 hover:text-litepie-primary-700 hover:bg-litepie-secondary-100 focus:bg-litepie-secondary-100 focus:text-litepie-primary-600 dark:hover:bg-litepie-secondary-700 dark:hover:text-litepie-primary-300 dark:text-litepie-primary-400 dark:focus:bg-litepie-secondary-700 dark:focus:text-litepie-primary-300",
onClick: _cache[6] || (_cache[6] = withModifiers((...args) => _ctx.setToLastMonth && _ctx.setToLastMonth(...args), ["prevent"]))
}, toDisplayString(_ctx.i18n.pastMonth), 1)])]))])) : createCommentVNode("", true);
}
script$5.render = render$5;
function __variableDynamicImportRuntime0__(path) {
switch (path) {
case './locale/af.js': return Promise.resolve().then(function () { return af; });
case './locale/am.js': return Promise.resolve().then(function () { return am; });
case './locale/ar-dz.js': return Promise.resolve().then(function () { return arDz; });
case './locale/ar-kw.js': return Promise.resolve().then(function () { return arKw; });
case './locale/ar-ly.js': return Promise.resolve().then(function () { return arLy; });
case './locale/ar-ma.js': return Promise.resolve().then(function () { return arMa; });
case './locale/ar-sa.js': return Promise.resolve().then(function () { return arSa; });
case './locale/ar-tn.js': return Promise.resolve().then(function () { return arTn; });
case './locale/ar.js': return Promise.resolve().then(function () { return ar; });
case './locale/az.js': return Promise.resolve().then(function () { return az; });
case './locale/be.js': return Promise.resolve().then(function () { return be; });
case './locale/bg.js': return Promise.resolve().then(function () { return bg; });
case './locale/bi.js': return Promise.resolve().then(function () { return bi; });
case './locale/bm.js': return Promise.resolve().then(function () { return bm; });
case './locale/bn.js': return Promise.resolve().then(function () { return bn; });
case './locale/bo.js': return Promise.resolve().then(function () { return bo; });
case './locale/br.js': return Promise.resolve().then(function () { return br; });
case './locale/bs.js': return Promise.resolve().then(function () { return bs; });
case './locale/ca.js': return Promise.resolve().then(function () { return ca; });
case './locale/cs.js': return Promise.resolve().then(function () { return cs; });
case './locale/cv.js': return Promise.resolve().then(function () { return cv; });
case './locale/cy.js': return Promise.resolve().then(function () { return cy; });
case './locale/da.js': return Promise.resolve().then(function () { return da; });
case './locale/de-at.js': return Promise.resolve().then(function () { return deAt; });
case './locale/de-ch.js': return Promise.resolve().then(function () { return deCh; });
case './locale/de.js': return Promise.resolve().then(function () { return de; });
case './locale/dv.js': return Promise.resolve().then(function () { return dv; });
case './locale/el.js': return Promise.resolve().then(function () { return el; });
case './locale/en-au.js': return Promise.resolve().then(function () { return enAu; });
case './locale/en-ca.js': return Promise.resolve().then(function () { return enCa; });
case './locale/en-gb.js': return Promise.resolve().then(function () { return enGb; });
case './locale/en-ie.js': return Promise.resolve().then(function () { return enIe; });
case './locale/en-il.js': return Promise.resolve().then(function () { return enIl; });
case './locale/en-in.js': return Promise.resolve().then(function () { return enIn; });
case './locale/en-nz.js': return Promise.resolve().then(function () { return enNz; });
case './locale/en-sg.js': return Promise.resolve().then(function () { return enSg; });
case './locale/en-tt.js': return Promise.resolve().then(function () { return enTt; });
case './locale/en.js': return Promise.resolve().then(function () { return en$1; });
case './locale/eo.js': return Promise.resolve().then(function () { return eo; });
case './locale/es-do.js': return Promise.resolve().then(function () { return esDo; });
case './locale/es-pr.js': return Promise.resolve().then(function () { return esPr; });
case './locale/es-us.js': return Promise.resolve().then(function () { return esUs; });
case './locale/es.js': return Promise.resolve().then(function () { return es; });
case './locale/et.js': return Promise.resolve().then(function () { return et; });
case './locale/eu.js': return Promise.resolve().then(function () { return eu; });
case './locale/fa.js': return Promise.resolve().then(function () { return fa; });
case './locale/fi.js': return Promise.resolve().then(function () { return fi; });
case './locale/fo.js': return Promise.resolve().then(function () { return fo; });
case './locale/fr-ca.js': return Promise.resolve().then(function () { return frCa; });
case './locale/fr-ch.js': return Promise.resolve().then(function () { return frCh; });
case './locale/fr.js': return Promise.resolve().then(function () { return fr; });
case './locale/fy.js': return Promise.resolve().then(function () { return fy; });
case './locale/ga.js': return Promise.resolve().then(function () { return ga; });
case './locale/gd.js': return Promise.resolve().then(function () { return gd; });
case './locale/gl.js': return Promise.resolve().then(function () { return gl; });
case './locale/gom-latn.js': return Promise.resolve().then(function () { return gomLatn; });
case './locale/gu.js': return Promise.resolve().then(function () { return gu; });
case './locale/he.js': return Promise.resolve().then(function () { return he; });
case './locale/hi.js': return Promise.resolve().then(function () { return hi; });
case './locale/hr.js': return Promise.resolve().then(function () { return hr; });
case './locale/ht.js': return Promise.resolve().then(function () { return ht; });
case './locale/hu.js': return Promise.resolve().then(function () { return hu; });
case './locale/hy-am.js': return Promise.resolve().then(function () { return hyAm; });
case './locale/id.js': return Promise.resolve().then(function () { return id; });
case './locale/is.js': return Promise.resolve().then(function () { return is; });
case './locale/it-ch.js': return Promise.resolve().then(function () { return itCh; });
case './locale/it.js': return Promise.resolve().then(function () { return it; });
case './locale/ja.js': return Promise.resolve().then(function () { return ja; });
case './locale/jv.js': return Promise.resolve().then(function () { return jv; });
case './locale/ka.js': return Promise.resolve().then(function () { return ka; });
case './locale/kk.js': return Promise.resolve().then(function () { return kk; });
case './locale/km.js': return Promise.resolve().then(function () { return km; });
case './locale/kn.js': return Promise.resolve().then(function () { return kn; });
case './locale/ko.js': return Promise.resolve().then(function () { return ko; });
case './locale/ku.js': return Promise.resolve().then(function () { return ku; });
case './locale/ky.js': return Promise.resolve().then(function () { return ky; });
case './locale/lb.js': return Promise.resolve().then(function () { return lb; });
case './locale/lo.js': return Promise.resolve().then(function () { return lo; });
case './locale/lt.js': return Promise.resolve().then(function () { return lt; });
case './locale/lv.js': return Promise.resolve().then(function () { return lv; });
case './locale/me.js': return Promise.resolve().then(function () { return me; });
case './locale/mi.js': return Promise.resolve().then(function () { return mi; });
case './locale/mk.js': return Promise.resolve().then(function () { return mk; });
case './locale/ml.js': return Promise.resolve().then(function () { return ml; });
case './locale/mn.js': return Promise.resolve().then(function () { return mn; });
case './locale/mr.js': return Promise.resolve().then(function () { return mr; });
case './locale/ms-my.js': return Promise.resolve().then(function () { return msMy; });
case './locale/ms.js': return Promise.resolve().then(function () { return ms; });
case './locale/mt.js': return Promise.resolve().then(function () { return mt; });
case './locale/my.js': return Promise.resolve().then(function () { return my; });
case './locale/nb.js': return Promise.resolve().then(function () { return nb; });
case './locale/ne.js': return Promise.resolve().then(function () { return ne; });
case './locale/nl-be.js': return Promise.resolve().then(function () { return nlBe; });
case './locale/nl.js': return Promise.resolve().then(function () { return nl; });
case './locale/nn.js': return Promise.resolve().then(function () { return nn; });
case './locale/oc-lnc.js': return Promise.resolve().then(function () { return ocLnc; });
case './locale/pa-in.js': return Promise.resolve().then(function () { return paIn; });
case './locale/pl.js': return Promise.resolve().then(function () { return pl; });
case './locale/pt-br.js': return Promise.resolve().then(function () { return ptBr; });
case './locale/pt.js': return Promise.resolve().then(function () { return pt; });
case './locale/ro.js': return Promise.resolve().then(function () { return ro; });
case './locale/ru.js': return Promise.resolve().then(function () { return ru; });
case './locale/rw.js': return Promise.resolve().then(function () { return rw; });
case './locale/sd.js': return Promise.resolve().then(function () { return sd; });
case './locale/se.js': return Promise.resolve().then(function () { return se; });
case './locale/si.js': return Promise.resolve().then(function () { return si; });
case './locale/sk.js': return Promise.resolve().then(function () { return sk; });
case './locale/sl.js': return Promise.resolve().then(function () { return sl; });
case './locale/sq.js': return Promise.resolve().then(function () { return sq; });
case './locale/sr-cyrl.js': return Promise.resolve().then(function () { return srCyrl; });
case './locale/sr.js': return Promise.resolve().then(function () { return sr; });
case './locale/ss.js': return Promise.resolve().then(function () { return ss; });
case './locale/sv.js': return Promise.resolve().then(function () { return sv; });
case './locale/sw.js': return Promise.resolve().then(function () { return sw; });
case './locale/ta.js': return Promise.resolve().then(function () { return ta; });
case './locale/te.js': return Promise.resolve().then(function () { return te; });
case './locale/tet.js': return Promise.resolve().then(function () { return tet; });
case './locale/tg.js': return Promise.resolve().then(function () { return tg; });
case './locale/th.js': return Promise.resolve().then(function () { return th; });
case './locale/tk.js': return Promise.resolve().then(function () { return tk; });
case './locale/tl-ph.js': return Promise.resolve().then(function () { return tlPh; });
case './locale/tlh.js': return Promise.resolve().then(function () { return tlh; });
case './locale/tr.js': return Promise.resolve().then(function () { return tr; });
case './locale/tzl.js': return Promise.resolve().then(function () { return tzl; });
case './locale/tzm-latn.js': return Promise.resolve().then(function () { return tzmLatn; });
case './locale/tzm.js': return Promise.resolve().then(function () { return tzm; });
case './locale/ug-cn.js': return Promise.resolve().then(function () { return ugCn; });
case './locale/uk.js': return Promise.resolve().then(function () { return uk; });
case './locale/ur.js': return Promise.resolve().then(function () { return ur; });
case './locale/uz-latn.js': return Promise.resolve().then(function () { return uzLatn; });
case './locale/uz.js': return Promise.resolve().then(function () { return uz; });
case './locale/vi.js': return Promise.resolve().then(function () { return vi; });
case './locale/x-pseudo.js': return Promise.resolve().then(function () { return xPseudo; });
case './locale/yo.js': return Promise.resolve().then(function () { return yo; });
case './locale/zh-cn.js': return Promise.resolve().then(function () { return zhCn; });
case './locale/zh-hk.js': return Promise.resolve().then(function () { return zhHk; });
case './locale/zh-tw.js': return Promise.resolve().then(function () { return zhTw; });
case './locale/zh.js': return Promise.resolve().then(function () { return zh; });
default: return Promise.reject(new Error("Unknown variable dynamic import: " + path));
}
}
dayjs.extend(localeData);
dayjs.extend(localizedFormat);
dayjs.extend(customParseFormat);
dayjs.extend(isToday);
dayjs.extend(isBetween);
dayjs.extend(duration);
var script$6 = /*#__PURE__*/defineComponent({
name: 'LitepieDatepicker',
// vue component name
components: {
LitepieHeader: script,
LitepieMonth: script$1,
LitepieWeek: script$2,
LitepieYear: script$3,
LitepieCalendar: script$4,
LitepieShortcut: script$5
},
directives: {
litepie: {
mounted: (el, binding) => {
useDirective(binding);
},
updated: (el, binding) => {
useDirective(binding);
}
}
},
props: {
overlay: Boolean,
asSingle: Boolean,
useRange: Boolean,
placeholder: {
type: [Boolean, String],
default: false
},
i18n: {
type: String,
default: 'en'
},
disableDate: {
type: [Boolean, Array, Function],
default: false
},
disableInRange: {
type: Boolean,
default: true
},
trigger: {
type: String,
default: null
},
autoApply: {
type: Boolean,
default: true
},
shortcuts: {
type: [Boolean, Function],
default: true
},
separator: {
type: String,
default: ' ~ '
},
formatter: {
type: Object,
default: () => ({
date: 'YYYY-MM-DD HH:mm:ss',
month: 'MMM'
})
},
modelValue: {
type: [Array, Object, String],
default: []
},
startFrom: {
type: [Object, String],
default: () => new Date()
},
options: {
type: Object,
default: () => ({
shortcuts: {
today: 'Today',
yesterday: 'Yesterday',
past: period => `Last ${period} Days`,
currentMonth: 'This Month',
pastMonth: 'Last Month'
},
footer: {
apply: 'Apply',
cancel: 'Cancel'
}
})
}
},
inheritAttrs: false,
emits: ['update:modelValue'],
setup(props, {
emit
}) {
const LitepieRef = ref(null);
const LitepieDatepickerRef = ref(null);
const LitepieInputRef = ref(null);
const isShow = ref(false);
const placement = ref(true);
const givenPlaceholder = ref('');
const selection = ref(null);
const pickerValue = ref('');
const hoverValue = ref([]);
const applyValue = ref([]);
const previous = ref(null);
const next = ref(null);
const panel = reactive({
previous: {
calendar: true,
month: false,
year: false
},
next: {
calendar: true,
month: false,
year: false
}
});
const datepicker = ref({
previous: dayjs(),
next: dayjs().add(1, 'month'),
year: {
previous: dayjs().year(),
next: dayjs().year()
},
weeks: dayjs.weekdaysShort(),
months: props.formatter.month === 'MMM' ? dayjs.monthsShort() : dayjs.months()
});
const weeks = computed(() => datepicker.value.weeks);
const months = computed(() => datepicker.value.months);
const calendar = computed(() => {
const {
previous,
next,
year
} = unref(datepicker);
return {
previous: {
date: () => {
return usePreviousDate(previous).concat(useCurrentDate(previous)).concat(useNextDate(previous)).map(v => {
v.today = v.isToday();
v.active = previous.month() === v.month();
v.off = previous.month() !== v.month();
v.sunday = v.day() === 0;
v.disabled = useDisableDate(v, props) && !v.isToday() && !inRangeDate(v);
v.inRange = () => {
if (props.asSingle && !props.useRange) {
return previous.month() !== v.month();
}
};
v.hovered = () => {
if (!asRange()) return false;
if (hoverValue.value.length > 1) {
return (v.isBetween(hoverValue.value[0], hoverValue.value[1], 'date', '()') || v.isBetween(hoverValue.value[1], hoverValue.value[0], 'date', '()')) && previous.month() === v.month();
}
return false;
};
v.duration = () => {
return false;
};
return v;
});
},
month: previous && previous.format(props.formatter.month),
year: previous && previous.year(),
years: () => {
return Array.from({
length: 12
}, (v, k) => year.previous + k);
},
onPrevious: () => {
datepicker.value.previous = previous.subtract(1, 'month');
},
onNext: () => {
datepicker.value.previous = previous.add(1, 'month');
if (previous.diff(next, 'month') === -1) {
datepicker.value.next = next.add(1, 'month');
}
},
onPreviousYear: () => {
datepicker.value.year.previous = datepicker.value.year.previous - 12;
},
onNextYear: () => {
datepicker.value.year.previous = datepicker.value.year.previous + 12;
},
openMonth: () => {
panel.previous.month = !panel.previous.month;
panel.previous.year = false;
panel.previous.calendar = !panel.previous.month;
},
setMount: $event => {
datepicker.value.previous = previous.month($event);
panel.previous.month = !panel.previous.month;
panel.previous.year = false;
panel.previous.calendar = !panel.previous.month;
nextTick(() => {
if (datepicker.value.next.isSame(datepicker.value.previous, 'month') || datepicker.value.next.isBefore(datepicker.value.previous)) {
datepicker.value.next = datepicker.value.previous.add(1, 'month');
}
datepicker.value.year.next = datepicker.value.next.year();
});
},
openYear: () => {
panel.previous.year = !panel.previous.year;
panel.previous.month = false;
panel.previous.calendar = !panel.previous.year;
},
setYear: ($event, asNext) => {
if (!asNext) {
datepicker.value.previous = previous.year($event);
panel.previous.year = !panel.previous.year;
panel.previous.calendar = !panel.previous.year;
nextTick(() => {
if (datepicker.value.next.isSame(datepicker.value.previous, 'month') || datepicker.value.next.isBefore(datepicker.value.previous)) {
datepicker.value.next = datepicker.value.previous.add(1, 'month');
}
datepicker.value.year.previous = datepicker.value.previous.year();
datepicker.value.year.next = datepicker.value.next.year();
});
}
}
},
next: {
date: () => {
return usePreviousDate(next).concat(useCurrentDate(next)).concat(useNextDate(next)).map(v => {
v.today = v.isToday();
v.active = next.month() === v.month();
v.off = next.month() !== v.month();
v.sunday = v.day() === 0;
v.disabled = useDisableDate(v, props) && !v.isToday() && !inRangeDate(v);
v.inRange = () => {
if (props.asSingle && !props.useRange) {
return next.month() !== v.month();
}
};
v.hovered = () => {
if (hoverValue.value.length > 1) {
return (v.isBetween(hoverValue.value[0], hoverValue.value[1], 'date', '()') || v.isBetween(hoverValue.value[1], hoverValue.value[0], 'date', '()')) && next.month() === v.month();
}
return false;
};
v.duration = () => {
return false;
};
return v;
});
},
month: next && next.format(props.formatter.month),
year: next && next.year(),
years: () => {
return Array.from({
length: 12
}, (v, k) => year.next + k);
},
onPrevious: () => {
datepicker.value.next = next.subtract(1, 'month');
if (next.diff(previous, 'month') === 1) {
datepicker.value.previous = previous.subtract(1, 'month');
}
},
onNext: () => {
datepicker.value.next = next.add(1, 'month');
},
onPreviousYear: () => {
datepicker.value.year.next = datepicker.value.year.next - 12;
},
onNextYear: () => {
datepicker.value.year.next = datepicker.value.year.next + 12;
},
openMonth: () => {
panel.next.month = !panel.next.month;
panel.next.year = false;
panel.next.calendar = !panel.next.month;
},
setMount: $event => {
datepicker.value.next = next.month($event);
panel.next.month = !panel.next.month;
panel.next.year = false;
panel.next.calendar = !panel.next.month;
nextTick(() => {
if (datepicker.value.previous.isSame(datepicker.value.next, 'month') || datepicker.value.previous.isAfter(datepicker.value.next)) {
datepicker.value.previous = datepicker.value.next.subtract(1, 'month');
}
datepicker.value.year.previous = datepicker.value.previous.year();
});
},
openYear: () => {
panel.next.year = !panel.next.year;
panel.next.month = false;
panel.next.calendar = !panel.next.year;
},
setYear: ($event, asNext) => {
if (asNext) {
datepicker.value.next = next.year($event);
panel.next.year = !panel.next.year;
panel.next.month = false;
panel.next.calendar = !panel.next.year;
nextTick(() => {
if (datepicker.value.previous.isSame(datepicker.value.next, 'month') || datepicker.value.previous.isAfter(datepicker.value.next)) {
datepicker.value.previous = datepicker.value.next.subtract(1, 'month');
}
datepicker.value.year.previous = datepicker.value.previous.year();
datepicker.value.year.next = datepicker.value.next.year();
});
}
}
}
};
});
const useArray = () => Array.isArray(props.modelValue);
const useObject = () => typeof props.modelValue === 'object';
const asRange = () => {
if (!props.useRange && !props.asSingle) {
return true;
} else if (!props.useRange && props.asSingle) {
return false;
} else if (props.useRange && !props.asSingle) {
return true;
} else return !!(props.useRange && props.asSingle);
};
const inRangeDate = date => {
if (props.disableInRange) return false;
if (pickerValue.value === '') return false;
let s, e;
if (useArray()) {
const [start, end] = props.modelValue;
s = start;
e = end;
} else if (useObject()) {
if (props.modelValue) {
const [start, end] = Object.values(props.modelValue);
s = start;
e = end;
}
} else {
const [start, end] = props.modelValue.split(props.separator);
s = start;
e = end;
}
return date.isBetween(dayjs(s, props.formatter.date, true), dayjs(e, props.formatter.date, true), 'date', '[]');
};
const show = () => {
isShow.value = true;
};
const hide = () => {
isShow.value = false;
};
const force = () => {
previous.value = null;
next.value = null;
hoverValue.value = [];
selection.value = null;
};
const clearPicker = () => {
pickerValue.value = '';
if (useArray()) {
emit('update:modelValue', []);
} else if (useObject()) {
const obj = {};
const [start, end] = Object.keys(props.modelValue);
obj[start] = '';
obj[end] = '';
emit('update:modelValue', obj);
} else {
emit('update:modelValue', '');
}
applyValue.value = [];
LitepieInputRef.value && LitepieInputRef.value.focus();
};
/**
* keyUp event
* @since v1.0.5
*/
const keyUp = () => {
if (asRange()) {
const [s, e] = pickerValue.value.split(props.separator);
const [sd, ed] = [dayjs(s, props.formatter.date, true), dayjs(e, props.formatter.date, true)];
if (sd.isValid() && ed.isValid()) {
setDate(sd);
setDate(ed);
if (useArray()) {
emit('update:modelValue', [s, e]);
} else if (useObject()) {
const obj = {};
const [start, end] = Object.keys(props.modelValue);
obj[start] = s;
obj[end] = e;
emit('update:modelValue', obj);
} else {
emit('update:modelValue', useToValueFromArray({
previous: sd,
next: ed
}, props));
}
}
} else {
const d = dayjs(pickerValue.value, props.formatter.date, true);
if (d.isValid()) {
setDate(d);
if (useArray()) {
emit('update:modelValue', [pickerValue.value]);
} else if (useObject()) {
const obj = {};
const [start] = Object.keys(props.modelValue);
obj[start] = pickerValue.value;
emit('update:modelValue', obj);
} else {
emit('update:modelValue', pickerValue.value);
}
}
}
};
const setDate = (date, asNext) => {
if (asRange()) {
if (previous.value) {
next.value = date;
if (props.autoApply) {
if (date.isBefore(previous.value)) {
pickerValue.value = useToValueFromArray({
previous: date,
next: previous.value
}, props);
} else {
pickerValue.value = useToValueFromArray({
previous: previous.value,
next: date
}, props);
}
const [s, e] = pickerValue.value.split(props.separator);
if (useArray()) {
emit('update:modelValue', [dayjs(s, props.formatter.date, true).format(props.formatter.date), dayjs(e, props.formatter.date, true).format(props.formatter.date)]);
} else if (useObject()) {
const obj = {};