vue3-tailwind-datepicker
Version:
A date range picker component for Vue3 and Tailwind CSS, dependent to day.js
979 lines (932 loc) • 298 kB
JavaScript
'use strict';var dayjs=require('dayjs'),localeData=require('dayjs/plugin/localeData'),localizedFormat=require('dayjs/plugin/localizedFormat'),customParseFormat=require('dayjs/plugin/customParseFormat'),isToday=require('dayjs/plugin/isToday'),isBetween=require('dayjs/plugin/isBetween'),duration=require('dayjs/plugin/duration'),vue=require('vue');function _interopDefaultLegacy(e){return e&&typeof e==='object'&&'default'in e?e:{'default':e}}var dayjs__default=/*#__PURE__*/_interopDefaultLegacy(dayjs);var localeData__default=/*#__PURE__*/_interopDefaultLegacy(localeData);var localizedFormat__default=/*#__PURE__*/_interopDefaultLegacy(localizedFormat);var customParseFormat__default=/*#__PURE__*/_interopDefaultLegacy(customParseFormat);var isToday__default=/*#__PURE__*/_interopDefaultLegacy(isToday);var isBetween__default=/*#__PURE__*/_interopDefaultLegacy(isBetween);var duration__default=/*#__PURE__*/_interopDefaultLegacy(duration);function _typeof(obj) {
"@babel/helpers - typeof";
if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
_typeof = function (obj) {
return typeof obj;
};
} else {
_typeof = function (obj) {
return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
};
}
return _typeof(obj);
}
function _slicedToArray(arr, i) {
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
}
function _arrayWithHoles(arr) {
if (Array.isArray(arr)) return arr;
}
function _iterableToArrayLimit(arr, i) {
if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
var _arr = [];
var _n = true;
var _d = false;
var _e = undefined;
try {
for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
_arr.push(_s.value);
if (i && _arr.length === i) break;
}
} catch (err) {
_d = true;
_e = err;
} finally {
try {
if (!_n && _i["return"] != null) _i["return"]();
} finally {
if (_d) throw _e;
}
}
return _arr;
}
function _unsupportedIterableToArray(o, minLen) {
if (!o) return;
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
var n = Object.prototype.toString.call(o).slice(8, -1);
if (n === "Object" && o.constructor) n = o.constructor.name;
if (n === "Map" || n === "Set") return Array.from(o);
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
}
function _arrayLikeToArray(arr, len) {
if (len == null || len > arr.length) len = arr.length;
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
return arr2;
}
function _nonIterableRest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}var usePreviousDate = function usePreviousDate(date) {
var display = [];
for (var i = 0; i <= date.date(0).day(); i++) {
display.push(date.date(0).subtract(i, 'day'));
}
return display.sort(function (a, b) {
return a.date() - b.date();
});
};
var useCurrentDate = function useCurrentDate(date) {
return Array.from({
length: date.daysInMonth()
}, function (v, k) {
return date.date(k + 1);
});
};
var useNextDate = function useNextDate(date) {
var display = [];
for (var i = 1; i <= 42 - (usePreviousDate(date).length + date.daysInMonth()); i++) {
display.push(date.date(i).month(date.month()).add(1, 'month'));
}
return display;
};
var useDisableDate = function useDisableDate(date, _ref) {
var disableDate = _ref.disableDate;
if (typeof disableDate === 'function') {
return disableDate(date.toDate());
} else {
return false;
}
};
var useBetweenRange = function useBetweenRange(date, _ref2) {
var previous = _ref2.previous,
next = _ref2.next;
var pattern;
if (previous.isAfter(next, 'date')) {
pattern = '(]';
} else {
pattern = '[)';
}
return !!(date.isBetween(previous, next, 'date', pattern) && !date.off);
};
var useToValueFromString = function useToValueFromString(date, _ref3) {
var formatter = _ref3.formatter;
return date.format(formatter.date);
};
var useToValueFromArray = function useToValueFromArray(_ref4, _ref5) {
var previous = _ref4.previous,
next = _ref4.next;
var formatter = _ref5.formatter,
separator = _ref5.separator;
return "".concat(previous.format(formatter.date)).concat(separator).concat(next.format(formatter.date));
};
var useDirective = function useDirective(binding) {
var instance = binding.instance,
arg = binding.arg,
value = binding.value;
document.body.addEventListener('click', function ($event) {
if ($event.target.classList.contains('litepie-datepicker-overlay')) {
return instance.isShow = false;
} else {
if (instance.LitepieDatepickerRef) {
var autoApply = instance.autoApply,
previous = instance.previous,
next = instance.next;
var target = $event.target.classList.contains('litepie-datepicker-date');
if (target && autoApply && !previous && !next) {
return instance.isShow = false;
}
if (!autoApply && $event.target.classList.contains("".concat(arg, "-apply-picker")) && instance.value !== '') {
return instance.isShow = false;
}
if ($event.target.classList.contains("".concat(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;
}
});
};
var useVisibleViewport = function useVisibleViewport(el) {
var _el$getBoundingClient = el.getBoundingClientRect(),
right = _el$getBoundingClient.right;
var vWidth = window.innerWidth || document.documentElement.clientWidth;
return right < vWidth;
};var script = vue.defineComponent({
name: 'LitepieHeader',
props: {
asPrevOrNext: Boolean,
panel: Object,
calendar: Object
},
inheritAttrs: false
});var _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"
};
var _hoisted_2 = {
class: "flex-shrink-0"
};
var _hoisted_3 = {
class: "inline-flex rounded-full"
};
var _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"
};
var _hoisted_5 = {
class: "px-1.5 space-x-1.5 flex flex-1"
};
var _hoisted_6 = {
class: "flex flex-1 rounded-md"
};
var _hoisted_7 = {
class: "flex flex-1 rounded-md"
};
var _hoisted_8 = {
class: "flex-shrink-0"
};
var _hoisted_9 = {
class: "inline-flex rounded-full"
};
var _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 vue.openBlock(), vue.createBlock("div", _hoisted_1, [vue.createVNode("div", _hoisted_2, [vue.withDirectives(vue.createVNode("span", _hoisted_3, [vue.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] = function ($event) {
return _ctx.panel.calendar ? _ctx.calendar.onPrevious() : _ctx.calendar.onPreviousYear();
})
}, [(vue.openBlock(), vue.createBlock("svg", _hoisted_4, [vue.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), [[vue.vShow, _ctx.panel.calendar || _ctx.panel.year]])]), vue.createVNode("div", _hoisted_5, [vue.createVNode("span", _hoisted_6, [vue.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: vue.toDisplayString(_ctx.calendar.month),
onClick: _cache[2] || (_cache[2] = function ($event) {
return _ctx.calendar.openMonth();
})
}, null, 8, ["textContent"])]), vue.createVNode("span", _hoisted_7, [vue.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: vue.toDisplayString(_ctx.calendar.year),
onClick: _cache[3] || (_cache[3] = function ($event) {
return _ctx.calendar.openYear();
})
}, null, 8, ["textContent"])])]), vue.createVNode("div", _hoisted_8, [vue.withDirectives(vue.createVNode("span", _hoisted_9, [vue.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] = function ($event) {
return _ctx.panel.calendar ? _ctx.calendar.onNext() : _ctx.calendar.onNextYear();
})
}, [(vue.openBlock(), vue.createBlock("svg", _hoisted_10, [vue.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), [[vue.vShow, _ctx.panel.calendar || _ctx.panel.year]])])]);
}script.render = render;var script$1 = vue.defineComponent({
name: 'LitepieMonth',
props: {
months: Array
},
inheritAttrs: false,
emits: ['update:month']
});var _hoisted_1$1 = {
class: "flex flex-wrap mt-1.5"
};
var _hoisted_2$1 = {
class: "flex rounded-md mt-1.5"
};
function render$1(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createBlock("div", _hoisted_1$1, [(vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList(_ctx.months, function (month, key) {
return vue.openBlock(), vue.createBlock("div", {
key: key,
class: "w-1/2 px-0.5"
}, [vue.createVNode("span", _hoisted_2$1, [vue.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: vue.toDisplayString(month),
onClick: function onClick($event) {
return _ctx.$emit('update:month', key);
}
}, null, 8, ["textContent", "onClick"])])]);
}), 128))]);
}script$1.render = render$1;var script$2 = vue.defineComponent({
name: 'LitepieWeek',
props: {
weeks: Array
},
inheritAttrs: false
});var _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 vue.openBlock(), vue.createBlock("div", _hoisted_1$2, [(vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList(_ctx.weeks, function (day, keyDay) {
return vue.openBlock(), vue.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"
}, [vue.createVNode("span", {
textContent: vue.toDisplayString(day)
}, null, 8, ["textContent"])]);
}), 128))]);
}script$2.render = render$2;var script$3 = vue.defineComponent({
name: 'LitepieYear',
props: {
asPrevOrNext: Boolean,
years: Array
},
inheritAttrs: false,
emits: ['update:year']
});var _hoisted_1$3 = {
class: "flex flex-wrap"
};
var _hoisted_2$2 = {
class: "flex rounded-md mt-1.5"
};
function render$3(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createBlock("div", _hoisted_1$3, [(vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList(_ctx.years, function (year, key) {
return vue.openBlock(), vue.createBlock("div", {
key: key,
class: "w-1/2 px-0.5"
}, [vue.createVNode("span", _hoisted_2$2, [vue.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: vue.toDisplayString(year),
onClick: function onClick($event) {
return _ctx.$emit('update:year', year, _ctx.asPrevOrNext);
}
}, null, 8, ["textContent", "onClick"])])]);
}), 128))]);
}script$3.render = render$3;var script$4 = vue.defineComponent({
name: 'LitepieCalendar',
props: {
asPrevOrNext: Boolean,
calendar: Object,
weeks: Array,
asRange: Boolean
},
inheritAttrs: false,
emits: ['update:date'],
setup: function setup() {
var isBetweenRange = vue.inject('isBetweenRange');
var betweenRangeClasses = vue.inject('betweenRangeClasses');
var datepickerClasses = vue.inject('datepickerClasses');
var atMouseOver = vue.inject('atMouseOver');
return {
isBetweenRange: isBetweenRange,
betweenRangeClasses: betweenRangeClasses,
datepickerClasses: datepickerClasses,
atMouseOver: atMouseOver
};
}
});var _hoisted_1$4 = {
class: "grid grid-cols-7 gap-y-0.5 my-1"
};
function render$4(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createBlock("div", _hoisted_1$4, [vue.createVNode(vue.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: vue.withCtx(function () {
return [(vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList(_ctx.calendar.date(), function (date, keyDate) {
return vue.openBlock(), vue.createBlock("div", {
key: keyDate,
class: ["relative", {
'litepie-tooltip': _ctx.asRange && date.duration()
}],
"data-tooltip": "".concat(date.duration())
}, [vue.createVNode(vue.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: vue.withCtx(function () {
return [_ctx.isBetweenRange(date) || date.hovered() ? (vue.openBlock(), vue.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)) : vue.createCommentVNode("", true)];
}),
_: 2
}, 1024), vue.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: function onClick($event) {
return _ctx.$emit('update:date', date, _ctx.asPrevOrNext);
},
onMouseenter: function onMouseenter($event) {
return _ctx.atMouseOver(date);
},
onFocusin: function onFocusin($event) {
return _ctx.atMouseOver(date);
},
textContent: vue.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 = vue.defineComponent({
name: 'LitepieShortcut',
props: {
shortcuts: [Boolean, Function],
asRange: Boolean,
asSingle: Boolean,
i18n: Object
},
inheritAttrs: false,
setup: function setup(props) {
var setToToday = vue.inject('setToToday');
var setToYesterday = vue.inject('setToYesterday');
var setToLastDay = vue.inject('setToLastDay');
var setToThisMonth = vue.inject('setToThisMonth');
var setToLastMonth = vue.inject('setToLastMonth');
var setToCustomShortcut = vue.inject('setToCustomShortcut');
var withShortcut = function withShortcut() {
if (typeof props.shortcuts === 'function') {
return props.shortcuts();
} else {
return false;
}
};
return {
setToToday: setToToday,
setToYesterday: setToYesterday,
setToLastDay: setToLastDay,
setToThisMonth: setToThisMonth,
setToLastMonth: setToLastMonth,
setToCustomShortcut: setToCustomShortcut,
withShortcut: withShortcut
};
}
});var _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"
};
var _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"
};
var _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 ? (vue.openBlock(), vue.createBlock("div", _hoisted_1$5, [_ctx.withShortcut() ? (vue.openBlock(), vue.createBlock("ol", _hoisted_2$3, [(vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList(_ctx.withShortcut(), function (item, i) {
return vue.openBlock(), vue.createBlock("li", {
key: i
}, [vue.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: vue.withModifiers(function ($event) {
return _ctx.setToCustomShortcut(item);
}, ["prevent"]),
textContent: vue.toDisplayString(item.label)
}, null, 8, ["onClick", "textContent"])]);
}), 128))])) : (vue.openBlock(), vue.createBlock("ol", _hoisted_3$1, [vue.createVNode("li", null, [vue.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] = vue.withModifiers(function () {
return _ctx.setToToday && _ctx.setToToday.apply(_ctx, arguments);
}, ["prevent"]))
}, vue.toDisplayString(_ctx.i18n.today), 1)]), vue.createVNode("li", null, [vue.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] = vue.withModifiers(function () {
return _ctx.setToYesterday && _ctx.setToYesterday.apply(_ctx, arguments);
}, ["prevent"]))
}, vue.toDisplayString(_ctx.i18n.yesterday), 1)]), vue.createVNode("li", null, [vue.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] = vue.withModifiers(function ($event) {
return _ctx.setToLastDay(7);
}, ["prevent"]))
}, vue.toDisplayString(_ctx.i18n.past(7)), 1)]), vue.createVNode("li", null, [vue.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] = vue.withModifiers(function ($event) {
return _ctx.setToLastDay(30);
}, ["prevent"]))
}, vue.toDisplayString(_ctx.i18n.past(30)), 1)]), vue.createVNode("li", null, [vue.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] = vue.withModifiers(function () {
return _ctx.setToThisMonth && _ctx.setToThisMonth.apply(_ctx, arguments);
}, ["prevent"]))
}, vue.toDisplayString(_ctx.i18n.currentMonth), 1)]), vue.createVNode("li", null, [vue.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] = vue.withModifiers(function () {
return _ctx.setToLastMonth && _ctx.setToLastMonth.apply(_ctx, arguments);
}, ["prevent"]))
}, vue.toDisplayString(_ctx.i18n.pastMonth), 1)])]))])) : vue.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__default['default'].extend(localeData__default['default']);
dayjs__default['default'].extend(localizedFormat__default['default']);
dayjs__default['default'].extend(customParseFormat__default['default']);
dayjs__default['default'].extend(isToday__default['default']);
dayjs__default['default'].extend(isBetween__default['default']);
dayjs__default['default'].extend(duration__default['default']);
var script$6 = /*#__PURE__*/vue.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: function mounted(el, binding) {
useDirective(binding);
},
updated: function 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: function _default() {
return {
date: 'YYYY-MM-DD HH:mm:ss',
month: 'MMM'
};
}
},
modelValue: {
type: [Array, Object, String],
default: []
},
startFrom: {
type: [Object, String],
default: function _default() {
return new Date();
}
},
options: {
type: Object,
default: function _default() {
return {
shortcuts: {
today: 'Today',
yesterday: 'Yesterday',
past: function past(period) {
return "Last ".concat(period, " Days");
},
currentMonth: 'This Month',
pastMonth: 'Last Month'
},
footer: {
apply: 'Apply',
cancel: 'Cancel'
}
};
}
}
},
inheritAttrs: false,
emits: ['update:modelValue'],
setup: function setup(props, _ref) {
var emit = _ref.emit;
var LitepieRef = vue.ref(null);
var LitepieDatepickerRef = vue.ref(null);
var LitepieInputRef = vue.ref(null);
var isShow = vue.ref(false);
var placement = vue.ref(true);
var givenPlaceholder = vue.ref('');
var selection = vue.ref(null);
var pickerValue = vue.ref('');
var hoverValue = vue.ref([]);
var applyValue = vue.ref([]);
var previous = vue.ref(null);
var next = vue.ref(null);
var panel = vue.reactive({
previous: {
calendar: true,
month: false,
year: false
},
next: {
calendar: true,
month: false,
year: false
}
});
var datepicker = vue.ref({
previous: dayjs__default['default'](),
next: dayjs__default['default']().add(1, 'month'),
year: {
previous: dayjs__default['default']().year(),
next: dayjs__default['default']().year()
},
weeks: dayjs__default['default'].weekdaysShort(),
months: props.formatter.month === 'MMM' ? dayjs__default['default'].monthsShort() : dayjs__default['default'].months()
});
var weeks = vue.computed(function () {
return datepicker.value.weeks;
});
var months = vue.computed(function () {
return datepicker.value.months;
});
var calendar = vue.computed(function () {
var _unref = vue.unref(datepicker),
previous = _unref.previous,
next = _unref.next,
year = _unref.year;
return {
previous: {
date: function date() {
return usePreviousDate(previous).concat(useCurrentDate(previous)).concat(useNextDate(previous)).map(function (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 = function () {
if (props.asSingle && !props.useRange) {
return previous.month() !== v.month();
}
};
v.hovered = function () {
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 = function () {
return false;
};
return v;
});
},
month: previous && previous.format(props.formatter.month),
year: previous && previous.year(),
years: function years() {
return Array.from({
length: 12
}, function (v, k) {
return year.previous + k;
});
},
onPrevious: function onPrevious() {
datepicker.value.previous = previous.subtract(1, 'month');
},
onNext: function onNext() {
datepicker.value.previous = previous.add(1, 'month');
if (previous.diff(next, 'month') === -1) {
datepicker.value.next = next.add(1, 'month');
}
},
onPreviousYear: function onPreviousYear() {
datepicker.value.year.previous = datepicker.value.year.previous - 12;
},
onNextYear: function onNextYear() {
datepicker.value.year.previous = datepicker.value.year.previous + 12;
},
openMonth: function openMonth() {
panel.previous.month = !panel.previous.month;
panel.previous.year = false;
panel.previous.calendar = !panel.previous.month;
},
setMount: function setMount($event) {
datepicker.value.previous = previous.month($event);
panel.previous.month = !panel.previous.month;
panel.previous.year = false;
panel.previous.calendar = !panel.previous.month;
vue.nextTick(function () {
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: function openYear() {
panel.previous.year = !panel.previous.year;
panel.previous.month = false;
panel.previous.calendar = !panel.previous.year;
},
setYear: function setYear($event, asNext) {
if (!asNext) {
datepicker.value.previous = previous.year($event);
panel.previous.year = !panel.previous.year;
panel.previous.calendar = !panel.previous.year;
vue.nextTick(function () {
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: function date() {
return usePreviousDate(next).concat(useCurrentDate(next)).concat(useNextDate(next)).map(function (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 = function () {
if (props.asSingle && !props.useRange) {
return next.month() !== v.month();
}
};
v.hovered = function () {
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 = function () {
return false;
};
return v;
});
},
month: next && next.format(props.formatter.month),
year: next && next.year(),
years: function years() {
return Array.from({
length: 12
}, function (v, k) {
return year.next + k;
});
},
onPrevious: function onPrevious() {
datepicker.value.next = next.subtract(1, 'month');
if (next.diff(previous, 'month') === 1) {
datepicker.value.previous = previous.subtract(1, 'month');
}
},
onNext: function onNext() {
datepicker.value.next = next.add(1, 'month');
},
onPreviousYear: function onPreviousYear() {
datepicker.value.year.next = datepicker.value.year.next - 12;
},
onNextYear: function onNextYear() {
datepicker.value.year.next = datepicker.value.year.next + 12;
},
openMonth: function openMonth() {
panel.next.month = !panel.next.month;
panel.next.year = false;
panel.next.calendar = !panel.next.month;
},
setMount: function setMount($event) {
datepicker.value.next = next.month($event);
panel.next.month = !panel.next.month;
panel.next.year = false;
panel.next.calendar = !panel.next.month;
vue.nextTick(function () {
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: function openYear() {
panel.next.year = !panel.next.year;
panel.next.month = false;
panel.next.calendar = !panel.next.year;
},
setYear: function setYear($event, asNext) {
if (asNext) {
datepicker.value.next = next.year($event);
panel.next.year = !panel.next.year;