+ el[key] = '';
+ el.removeAttribute(key);
+ } else {
+ // some properties perform value validation and throw
+ try {
+ el[key] = value;
+ } catch (e) {
+ {
+ warn("Failed setting prop \"".concat(key, "\" on <").concat(el.tagName.toLowerCase(), ">: ") + "value ".concat(value, " is invalid."), e);
+ }
+ }
+ }
+} // Async edge case fix requires storing an event listener's attach timestamp.
+
+
+var _getNow = Date.now; // Determine what event timestamp the browser is using. Annoyingly, the
+// timestamp can either be hi-res (relative to page load) or low-res
+// (relative to UNIX epoch), so in order to compare time we have to use the
+// same timestamp type when saving the flush timestamp.
+
+if (typeof document !== 'undefined' && _getNow() > document.createEvent('Event').timeStamp) {
+ // if the low-res timestamp which is bigger than the event timestamp
+ // (which is evaluated AFTER) it means the event is using a hi-res timestamp,
+ // and we need to use the hi-res version for event listeners as well.
+ _getNow = function _getNow() {
+ return performance.now();
+ };
+} // To avoid the overhead of repeatedly calling performance.now(), we cache
+// and use the same timestamp for all event listeners attached in the same tick.
+
+
+var cachedNow = 0;
+var p = Promise.resolve();
+
+var reset = function reset() {
+ cachedNow = 0;
+};
+
+var getNow = function getNow() {
+ return cachedNow || (p.then(reset), cachedNow = _getNow());
+};
+
+function addEventListener(el, event, handler, options) {
+ el.addEventListener(event, handler, options);
+}
+
+function removeEventListener(el, event, handler, options) {
+ el.removeEventListener(event, handler, options);
+}
+
+function patchEvent(el, rawName, prevValue, nextValue) {
+ var instance = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : null;
+ // vei = vue event invokers
+ var invokers = el._vei || (el._vei = {});
+ var existingInvoker = invokers[rawName];
+
+ if (nextValue && existingInvoker) {
+ // patch
+ existingInvoker.value = nextValue;
+ } else {
+ var _parseName = parseName(rawName),
+ _parseName2 = _slicedToArray(_parseName, 2),
+ name = _parseName2[0],
+ options = _parseName2[1];
+
+ if (nextValue) {
+ // add
+ var invoker = invokers[rawName] = createInvoker(nextValue, instance);
+ addEventListener(el, name, invoker, options);
+ } else if (existingInvoker) {
+ // remove
+ removeEventListener(el, name, existingInvoker, options);
+ invokers[rawName] = undefined;
+ }
+ }
+}
+
+var optionsModifierRE = /(?:Once|Passive|Capture)$/;
+
+function parseName(name) {
+ var options;
+
+ if (optionsModifierRE.test(name)) {
+ options = {};
+ var m;
+
+ while (m = name.match(optionsModifierRE)) {
+ name = name.slice(0, name.length - m[0].length);
+ options[m[0].toLowerCase()] = true;
+ }
+ }
+
+ return [name.slice(2).toLowerCase(), options];
+}
+
+function createInvoker(initialValue, instance) {
+ var invoker = function invoker(e) {
+ // async edge case #6566: inner click event triggers patch, event handler
+ // attached to outer element during patch, and triggered again. This
+ // happens because browsers fire microtask ticks between event propagation.
+ // the solution is simple: we save the timestamp when a handler is attached,
+ // and the handler would only fire if the event passed to it was fired
+ // AFTER it was attached.
+ var timeStamp = e.timeStamp || _getNow();
+
+ if (timeStamp >= invoker.attached - 1) {
+ callWithAsyncErrorHandling(patchStopImmediatePropagation(e, invoker.value), instance, 5
+ /* NATIVE_EVENT_HANDLER */
+ , [e]);
+ }
+ };
+
+ invoker.value = initialValue;
+ invoker.attached = getNow();
+ return invoker;
+}
+
+function patchStopImmediatePropagation(e, value) {
+ if (isArray(value)) {
+ var originalStop = e.stopImmediatePropagation;
+
+ e.stopImmediatePropagation = function () {
+ originalStop.call(e);
+ e._stopped = true;
+ };
+
+ return value.map(function (fn) {
+ return function (e) {
+ return !e._stopped && fn(e);
+ };
+ });
+ } else {
+ return value;
+ }
+}
+
+var nativeOnRE = /^on[a-z]/;
+
+var forcePatchProp = function forcePatchProp(_, key) {
+ return key === 'value';
+};
+
+var patchProp = function patchProp(el, key, prevValue, nextValue) {
+ var isSVG = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
+ var prevChildren = arguments.length > 5 ? arguments[5] : undefined;
+ var parentComponent = arguments.length > 6 ? arguments[6] : undefined;
+ var parentSuspense = arguments.length > 7 ? arguments[7] : undefined;
+ var unmountChildren = arguments.length > 8 ? arguments[8] : undefined;
+
+ switch (key) {
+ // special
+ case 'class':
+ patchClass(el, nextValue, isSVG);
+ break;
+
+ case 'style':
+ patchStyle(el, prevValue, nextValue);
+ break;
+
+ default:
+ if (isOn(key)) {
+ // ignore v-model listeners
+ if (!isModelListener(key)) {
+ patchEvent(el, key, prevValue, nextValue, parentComponent);
+ }
+ } else if (shouldSetAsProp(el, key, nextValue, isSVG)) {
+ patchDOMProp(el, key, nextValue, prevChildren, parentComponent, parentSuspense, unmountChildren);
+ } else {
+ // special case for
with
+ // :true-value & :false-value
+ // store value as dom properties since non-string values will be
+ // stringified.
+ if (key === 'true-value') {
+ el._trueValue = nextValue;
+ } else if (key === 'false-value') {
+ el._falseValue = nextValue;
+ }
+
+ patchAttr(el, key, nextValue, isSVG);
+ }
+
+ break;
+ }
+};
+
+function shouldSetAsProp(el, key, value, isSVG) {
+ if (isSVG) {
+ // most keys must be set as attribute on svg elements to work
+ // ...except innerHTML
+ if (key === 'innerHTML') {
+ return true;
+ } // or native onclick with function values
+
+
+ if (key in el && nativeOnRE.test(key) && isFunction(value)) {
+ return true;
+ }
+
+ return false;
+ } // spellcheck and draggable are numerated attrs, however their
+ // corresponding DOM properties are actually booleans - this leads to
+ // setting it with a string "false" value leading it to be coerced to
+ // `true`, so we need to always treat them as attributes.
+ // Note that `contentEditable` doesn't have this problem: its DOM
+ // property is also enumerated string values.
+
+
+ if (key === 'spellcheck' || key === 'draggable') {
+ return false;
+ } // #1787 form as an attribute must be a string, while it accepts an Element as
+ // a prop
+
+
+ if (key === 'form' && typeof value === 'string') {
+ return false;
+ } // #1526
must be set as attribute
+
+
+ if (key === 'list' && el.tagName === 'INPUT') {
+ return false;
+ } // native onclick with string value, must be set as attribute
+
+
+ if (nativeOnRE.test(key) && isString(value)) {
+ return false;
+ }
+
+ return key in el;
+}
+
+var systemModifiers = ['ctrl', 'shift', 'alt', 'meta'];
+var modifierGuards = {
+ stop: function stop(e) {
+ return e.stopPropagation();
+ },
+ prevent: function prevent(e) {
+ return e.preventDefault();
+ },
+ self: function self(e) {
+ return e.target !== e.currentTarget;
+ },
+ ctrl: function ctrl(e) {
+ return !e.ctrlKey;
+ },
+ shift: function shift(e) {
+ return !e.shiftKey;
+ },
+ alt: function alt(e) {
+ return !e.altKey;
+ },
+ meta: function meta(e) {
+ return !e.metaKey;
+ },
+ left: function left(e) {
+ return 'button' in e && e.button !== 0;
+ },
+ middle: function middle(e) {
+ return 'button' in e && e.button !== 1;
+ },
+ right: function right(e) {
+ return 'button' in e && e.button !== 2;
+ },
+ exact: function exact(e, modifiers) {
+ return systemModifiers.some(function (m) {
+ return e["".concat(m, "Key")] && !modifiers.includes(m);
+ });
+ }
+};
+/**
+ * @private
+ */
+
+var withModifiers = function withModifiers(fn, modifiers) {
+ return function (event) {
+ for (var i = 0; i < modifiers.length; i++) {
+ var guard = modifierGuards[modifiers[i]];
+ if (guard && guard(event, modifiers)) return;
+ }
+
+ for (var _len10 = arguments.length, args = new Array(_len10 > 1 ? _len10 - 1 : 0), _key23 = 1; _key23 < _len10; _key23++) {
+ args[_key23 - 1] = arguments[_key23];
+ }
+
+ return fn.apply(void 0, [event].concat(args));
+ };
+}; // Kept for 2.x compat.
+
+var vShow = {
+ beforeMount: function beforeMount(el, _ref37, _ref38) {
+ var value = _ref37.value;
+ var transition = _ref38.transition;
+ el._vod = el.style.display === 'none' ? '' : el.style.display;
+
+ if (transition && value) {
+ transition.beforeEnter(el);
+ } else {
+ setDisplay(el, value);
+ }
+ },
+ mounted: function mounted(el, _ref39, _ref40) {
+ var value = _ref39.value;
+ var transition = _ref40.transition;
+
+ if (transition && value) {
+ transition.enter(el);
+ }
+ },
+ updated: function updated(el, _ref41, _ref42) {
+ var value = _ref41.value,
+ oldValue = _ref41.oldValue;
+ var transition = _ref42.transition;
+ if (!value === !oldValue) return;
+
+ if (transition) {
+ if (value) {
+ transition.beforeEnter(el);
+ setDisplay(el, true);
+ transition.enter(el);
+ } else {
+ transition.leave(el, function () {
+ setDisplay(el, false);
+ });
+ }
+ } else {
+ setDisplay(el, value);
+ }
+ },
+ beforeUnmount: function beforeUnmount(el, _ref43) {
+ var value = _ref43.value;
+ setDisplay(el, value);
+ }
+};
+
+function setDisplay(el, value) {
+ el.style.display = value ? el._vod : 'none';
+}
+
+var rendererOptions = extend({
+ patchProp: patchProp,
+ forcePatchProp: forcePatchProp
+}, nodeOps); // lazy create the renderer - this makes core renderer logic tree-shakable
+// in case the user only imports reactivity utilities from Vue.
+
+var renderer;
+
+function ensureRenderer() {
+ return renderer || (renderer = createRenderer(rendererOptions));
+}
+
+var createApp = function createApp() {
+ var _ensureRenderer2;
+
+ var app = (_ensureRenderer2 = ensureRenderer()).createApp.apply(_ensureRenderer2, arguments);
+
+ {
+ injectNativeTagCheck(app);
+ }
+ var mount = app.mount;
+
+ app.mount = function (containerOrSelector) {
+ var container = normalizeContainer(containerOrSelector);
+ if (!container) return;
+ var component = app._component;
+
+ if (!isFunction(component) && !component.render && !component.template) {
+ component.template = container.innerHTML;
+ } // clear content before mounting
+
+
+ container.innerHTML = '';
+ var proxy = mount(container);
+ container.removeAttribute('v-cloak');
+ container.setAttribute('data-v-app', '');
+ return proxy;
+ };
+
+ return app;
+};
+
+function injectNativeTagCheck(app) {
+ // Inject `isNativeTag`
+ // this is used for component name validation (dev only)
+ Object.defineProperty(app.config, 'isNativeTag', {
+ value: function value(tag) {
+ return isHTMLTag(tag) || isSVGTag(tag);
+ },
+ writable: false
+ });
+}
+
+function normalizeContainer(container) {
+ if (isString(container)) {
+ var res = document.querySelector(container);
+
+ if (!res) {
+ warn("Failed to mount app: mount target selector returned null.");
+ }
+
+ return res;
+ }
+
+ return container;
+}
+
+function initDev() {
+ var target = getGlobalThis();
+ target.__VUE__ = true;
+ setDevtoolsHook(target.__VUE_DEVTOOLS_GLOBAL_HOOK__);
+ {
+ console.info("You are running a development build of Vue.\n" + "Make sure to use the production build (*.prod.js) when deploying for production.");
+ initCustomFormatter();
+ }
+} // This entry exports the runtime only, and is built as
+
+
+initDev();
+
+// import en from '@/components/datepicker/locale/translations/en';
+
+/**
+ * Returns the full year, using UTC or not
+ * @param {Date} date
+ */
+var getFullYear = function getFullYear(date) {
+ var useUtc = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+ return useUtc ? date.getUTCFullYear() : date.getFullYear();
+};
+/**
+ * Returns the month, using UTC or not
+ * @param {Date} date
+ */
+
+var getMonth = function getMonth(date) {
+ var useUtc = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+ return useUtc ? date.getUTCMonth() : date.getMonth();
+};
+/**
+ * Returns the date, using UTC or not
+ * @param {Date} date
+ */
+
+var getDate = function getDate(date) {
+ var useUtc = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+ return useUtc ? date.getUTCDate() : date.getDate();
+};
+/**
+ * Returns the day, using UTC or not
+ * @param {Date} date
+ */
+
+var getDay = function getDay(date) {
+ var useUtc = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+ return useUtc ? date.getUTCDay() : date.getDay();
+};
+/**
+ * Sets the full year, using UTC or not
+ * @param {Date} date
+ */
+
+var setFullYear = function setFullYear(date, value) {
+ var useUtc = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+ return useUtc ? date.setUTCFullYear(value) : date.setFullYear(value);
+};
+/**
+ * Sets the month, using UTC or not
+ * @param {Date} date
+ */
+
+var setMonth = function setMonth(date, value) {
+ var useUtc = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+ return useUtc ? date.setUTCMonth(value) : date.setMonth(value);
+};
+/**
+ * Sets the date, using UTC or not
+ * @param {Date} date
+ * @param {Number} value
+ */
+
+var setDate = function setDate(date, value) {
+ var useUtc = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+ return useUtc ? date.setUTCDate(value) : date.setDate(value);
+};
+/**
+ * Check if date1 is equivalent to date2, without comparing the time
+ * @see https://stackoverflow.com/a/6202196/4455925
+ * @param {Date} date1
+ * @param {Date} date2
+ */
+
+var compareDates = function compareDates(date1, date2) {
+ var useUtc = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+ var d1 = new Date(date1.getTime());
+ var d2 = new Date(date2.getTime());
+
+ if (useUtc) {
+ d1.setUTCHours(0, 0, 0, 0);
+ d2.setUTCHours(0, 0, 0, 0);
+ } else {
+ d1.setHours(0, 0, 0, 0);
+ d2.setHours(0, 0, 0, 0);
+ }
+
+ return d1.getTime() === d2.getTime();
+};
+/**
+ * Validates a date object
+ * @param {Date} date - an object instantiated with the new Date constructor
+ * @return {Boolean}
+ */
+
+var isValidDate = function isValidDate(date) {
+ if (Object.prototype.toString.call(date) !== '[object Date]') {
+ return false;
+ }
+
+ return !Number.isNaN(date.getTime());
+};
+/**
+ * Return abbreviated week day name
+ * @param {Date}
+ * @param {Array}
+ * @return {String}
+ */
+
+var getDayNameAbbr = function getDayNameAbbr(date, days) {
+ if (_typeof(date) !== 'object') {
+ throw TypeError('Invalid Type');
+ }
+
+ return days[getDay(date)];
+};
+/**
+ * Return name of the month
+ * @param {Number|Date}
+ * @param {Array}
+ * @return {String}
+ */
+
+var getMonthName = function getMonthName(month, months) {
+ if (!months) {
+ throw Error('missing 2nd parameter Months array');
+ }
+
+ if (_typeof(month) === 'object') {
+ return months[getMonth(month)];
+ }
+
+ if (typeof month === 'number') {
+ return months[month];
+ }
+
+ throw TypeError('Invalid type');
+};
+/**
+ * Return an abbreviated version of the month
+ * @param {Number|Date}
+ * @return {String}
+ */
+
+var getMonthNameAbbr = function getMonthNameAbbr(month, monthsAbbr) {
+ if (!monthsAbbr) {
+ throw Error('missing 2nd paramter Months array');
+ }
+
+ if (_typeof(month) === 'object') {
+ return monthsAbbr[getMonth(month)];
+ }
+
+ if (typeof month === 'number') {
+ return monthsAbbr[month];
+ }
+
+ throw TypeError('Invalid type');
+};
+/**
+ * Alternative get total number of days in month
+ * @param {Number} year
+ * @param {Number} m
+ * @return {Number}
+ */
+
+var daysInMonth = function daysInMonth(year, month) {
+ if (/8|3|5|10/.test(month)) {
+ return 30;
+ }
+
+ if (month === 1) {
+ if (!(year % 4) && year % 100 || !(year % 400)) {
+ return 29;
+ }
+
+ return 28;
+ }
+
+ return 31; // return /8|3|5|10/.test(month as string)
+ // ? 30
+ // : month === 1
+ // ? (!(year % 4) && year % 100) || !(year % 400)
+ // ? 29
+ // : 28
+ // : 31;
+};
+/**
+ * Get nth suffix for date
+ * @param {Number} day
+ * @return {String}
+ */
+
+var getNthSuffix = function getNthSuffix(day) {
+ switch (day) {
+ case 1:
+ case 21:
+ case 31:
+ return 'st';
+
+ case 2:
+ case 22:
+ return 'nd';
+
+ case 3:
+ case 23:
+ return 'rd';
+
+ default:
+ return 'th';
+ }
+};
+/**
+ * Formats date object
+ * @param {Date}
+ * @param {String}
+ * @param {Object}
+ * @return {String}
+ */
+
+var formatDate = function formatDate(date, format, translation) {
+ var year = getFullYear(date);
+ var month = getMonth(date) + 1;
+ var day = getDate(date);
+ var str = format.replace(/dd/, "0".concat(day).slice(-2)).replace(/d/, day).replace(/yyyy/, year).replace(/yy/, String(year).slice(2)).replace(/MMMM/, getMonthName(getMonth(date), translation.months)).replace(/MMM/, getMonthNameAbbr(getMonth(date), translation.monthsAbbr)).replace(/MM/, "0".concat(month).slice(-2)).replace(/M(?!a|ä|e)/, month.toString()).replace(/su/, getNthSuffix(getDate(date))).replace(/D(?!e|é|i)/, getDayNameAbbr(date, translation.days));
+ return str;
+};
+/**
+ * method used as a prop validator for input values
+ * @param {*} val
+ * @return {Boolean}
+ */
+
+var validateDateInput = function validateDateInput(val) {
+ return val === null || val instanceof Date || typeof val === 'string' || typeof val === 'number';
+};
+
+var script = defineComponent({
+ name: 'DateInput',
+ props: {
+ selectedDate: {
+ type: Date
+ },
+ resetTypedDate: {
+ type: [Date]
+ },
+ format: {
+ type: [String, Function]
+ },
+ translation: {
+ type: Object
+ },
+ inline: {
+ type: Boolean
+ },
+ id: {
+ type: String
+ },
+ name: {
+ type: String
+ },
+ openDate: {
+ type: Date
+ },
+ placeholder: {
+ type: String
+ },
+ inputClass: {
+ type: String
+ },
+ clearButton: {
+ type: Boolean
+ },
+ clearButtonIcon: {
+ type: String
+ },
+ calendarButton: {
+ type: Boolean
+ },
+ calendarButtonIcon: {
+ type: String
+ },
+ calendarButtonIconContent: {
+ type: String
+ },
+ disabled: {
+ type: Boolean
+ },
+ required: {
+ type: Boolean
+ },
+ typeable: {
+ type: Boolean
+ },
+ addBootstrapClass: {
+ type: Boolean
+ },
+ useUtc: {
+ type: Boolean
+ },
+ minimumView: {
+ type: String,
+ default: 'day'
+ },
+ maximumView: {
+ type: String,
+ default: 'year'
+ },
+ clearError: {
+ type: Function,
+ required: true
+ },
+ hideInput: {
+ type: Boolean,
+ default: true
+ }
+ },
+ emits: ['showCalendar', 'typedDate', 'clearDate', 'closeCalendar'],
+ setup: function setup(props, _ref) {
+ var emit = _ref.emit;
+ var typedDate = ref();
+ var inputRef = ref(null); // computed
+
+ var computedInputClass = computed$1(function () {
+ if (props.addBootstrapClass) {
+ if (typeof props.inputClass === 'string') {
+ return [props.inputClass, 'form-control'].join(' ');
+ } // tbd : need to add here props.inputClass
+
+
+ return {
+ 'form-control': true
+ };
+ }
+
+ return props.inputClass;
+ });
+ var formattedValue = computed$1(function () {
+ if (!props.selectedDate) {
+ return null;
+ }
+
+ if (typedDate.value) {
+ return typedDate.value;
+ }
+
+ var date = typeof props.format === 'function' ? props.format(props.selectedDate) : formatDate(new Date(props.selectedDate), props.format, props.translation);
+
+ if (props.minimumView === props.maximumView) {
+ var _date$split = date.split(' '),
+ _date$split2 = _slicedToArray(_date$split, 3),
+ y = _date$split2[1],
+ z = _date$split2[2];
+
+ if (props.maximumView === 'month') {
+ date = y;
+ } else if (props.maximumView === 'year') {
+ date = z;
+ }
+ }
+
+ return date;
+ }); // watchers
+
+ watch(function () {
+ return props.resetTypedDate;
+ }, function () {
+ typedDate.value = '';
+ });
+ /**
+ * open Calendar
+ */
+
+ function showCalendar() {
+ emit('showCalendar');
+ }
+ /**
+ * Attempt to parse a typed date
+ * @param {Event} event
+ */
+
+
+ function parseTypedDate(event) {
+ if ([27, 13 // enter
+ ].includes(event.keyCode)) {
+ inputRef.value.blur();
+ }
+
+ if (props.typeable) {
+ var value = inputRef.value.value;
+ var temptypedDate = Date.parse(value);
+
+ if (!isNaN(temptypedDate)) {
+ typedDate.value = value;
+ emit('typedDate', temptypedDate);
+ }
+ }
+ }
+ /**
+ * emit a clearDate event
+ */
+
+
+ function clearDate() {
+ emit('clearDate');
+ }
+ /**
+ * nullify the typed date to defer to regular formatting
+ * called once the input is blurred
+ */
+
+
+ function inputBlurred() {
+ if (props.typeable && Number.isNaN(Date.parse(inputRef.value.value))) {
+ clearDate(); // need to check this if required
+
+ inputRef.value.value = null;
+ typedDate.value = '';
+ }
+
+ emit('closeCalendar', true);
+ }
+ /**
+ * nullify the error
+ * called once the input is focused
+ */
+
+
+ function onFocus() {
+ props.clearError();
+ }
+
+ return {
+ typedDate: typedDate,
+ computedInputClass: computedInputClass,
+ formattedValue: formattedValue,
+ showCalendar: showCalendar,
+ parseTypedDate: parseTypedDate,
+ inputBlurred: inputBlurred,
+ onFocus: onFocus,
+ inputRef: inputRef
+ };
+ }
+});
+
+const img = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' height='16' width='16' role='img' aria-hidden='true' data-icon='calendarAlt'%3e%3cpath fill='currentColor' d='M400 64h-48V12c0-6.6-5.4-12-12-12h-8c-6.6 0-12 5.4-12 12v52H128V12c0-6.6-5.4-12-12-12h-8c-6.6 0-12 5.4-12 12v52H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM48 96h352c8.8 0 16 7.2 16 16v48H32v-48c0-8.8 7.2-16 16-16zm352 384H48c-8.8 0-16-7.2-16-16V192h384v272c0 8.8-7.2 16-16 16zM148 320h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm96 0h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm96 0h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm-96 96h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm-96 0h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm192 0h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12z'%3e%3c/path%3e%3c/svg%3e";
+
+const _hoisted_1 = { key: 0 };
+const _hoisted_2 = { key: 0 };
+const _hoisted_3 = /*#__PURE__*/createVNode("img", { src: img }, null, -1 /* HOISTED */);
+const _hoisted_4 = { key: 0 };
+const _hoisted_5 = /*#__PURE__*/createTextVNode("Default");
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+ return (openBlock(), createBlock("div", {
+ class: { 'input-group': _ctx.addBootstrapClass }
+ }, [
+ createCommentVNode(" Calendar Button "),
+ (_ctx.calendarButton)
+ ? (openBlock(), createBlock("span", {
+ key: 0,
+ class: ["vuejs3-datepicker__calendar-button", { 'input-group-prepend': _ctx.addBootstrapClass }],
+ onClick: _cache[1] || (_cache[1] = (...args) => (_ctx.showCalendar(...args))),
+ style: { 'cursor:not-allowed;': _ctx.disabled }
+ }, [
+ createVNode("span", {
+ class: { 'input-group-text': _ctx.addBootstrapClass }
+ }, [
+ createVNode("i", { class: _ctx.calendarButtonIcon }, [
+ createTextVNode(toDisplayString(_ctx.calendarButtonIconContent) + " ", 1 /* TEXT */),
+ (!_ctx.calendarButtonIcon)
+ ? (openBlock(), createBlock("span", _hoisted_1, "…"))
+ : createCommentVNode("v-if", true)
+ ], 2 /* CLASS */)
+ ], 2 /* CLASS */)
+ ], 6 /* CLASS, STYLE */))
+ : createCommentVNode("v-if", true),
+ createVNode("div", null, [
+ (!_ctx.inline)
+ ? (openBlock(), createBlock("span", _hoisted_2, [
+ _hoisted_3
+ ]))
+ : createCommentVNode("v-if", true),
+ createVNode("input", {
+ type: _ctx.inline ? 'hidden' : 'text',
+ class: _ctx.computedInputClass,
+ name: _ctx.name,
+ ref: "inputRef",
+ id: _ctx.id,
+ value: _ctx.formattedValue,
+ "open-date": _ctx.openDate,
+ placeholder: _ctx.placeholder,
+ "clear-button": _ctx.clearButton,
+ disabled: _ctx.disabled,
+ required: _ctx.required,
+ readonly: !_ctx.typeable,
+ onClick: _cache[2] || (_cache[2] = (...args) => (_ctx.showCalendar(...args))),
+ onKeyup: _cache[3] || (_cache[3] = (...args) => (_ctx.parseTypedDate(...args))),
+ onBlur: _cache[4] || (_cache[4] = (...args) => (_ctx.inputBlurred(...args))),
+ onFocus: _cache[5] || (_cache[5] = (...args) => (_ctx.onFocus(...args))),
+ autocomplete: "off"
+ }, null, 42 /* CLASS, PROPS, HYDRATE_EVENTS */, ["type", "name", "id", "value", "open-date", "placeholder", "clear-button", "disabled", "required", "readonly"])
+ ]),
+ createCommentVNode(" Clear Button "),
+ (_ctx.clearButton && _ctx.selectedDate)
+ ? (openBlock(), createBlock("span", {
+ key: 1,
+ class: ["vuejs3-datepicker__clear-button", { 'input-group-append': _ctx.addBootstrapClass }],
+ onClick: _cache[6] || (_cache[6] = $event => (_ctx.clearDate()))
+ }, [
+ createVNode("span", {
+ class: { 'input-group-text': _ctx.addBootstrapClass }
+ }, [
+ createVNode("i", { class: _ctx.clearButtonIcon }, [
+ (!_ctx.clearButtonIcon)
+ ? (openBlock(), createBlock("span", _hoisted_4, "×"))
+ : createCommentVNode("v-if", true)
+ ], 2 /* CLASS */)
+ ], 2 /* CLASS */)
+ ], 2 /* CLASS */))
+ : createCommentVNode("v-if", true),
+ renderSlot(_ctx.$slots, "afterDateInput", {}, () => [
+ _hoisted_5
+ ])
+ ], 2 /* CLASS */))
+}
+
+script.render = render;
+script.__file = "src/components/datepicker/DateInput.vue";
+
+var script$1 = defineComponent({
+ name: 'PickerDay',
+ props: {
+ showDayView: {
+ type: Boolean
+ },
+ selectedDate: {
+ type: Date,
+ default: new Date()
+ },
+ pageDate: {
+ type: Date,
+ default: new Date()
+ },
+ pageTimestamp: {
+ type: Number
+ },
+ fullMonthName: {
+ type: Boolean
+ },
+ allowedToShowView: {
+ type: Function
+ },
+ dayCellContent: {
+ type: Function,
+ default: function _default(day) {
+ return day.date;
+ }
+ },
+ disabledDates: {
+ type: Object
+ },
+ highlighted: {
+ type: Object
+ },
+ calendarClass: {
+ type: [String, Object, Array]
+ },
+ calendarStyle: {
+ type: Object
+ },
+ translation: {
+ type: Object
+ },
+ isRtl: {
+ type: Boolean
+ },
+ mondayFirst: {
+ type: Boolean
+ },
+ useUtc: {
+ type: Boolean
+ }
+ },
+ emits: ['show-year-calendar', 'changed-month', 'show-month-calendar', 'selected-disabled', 'select-date'],
+ setup: function setup(props, _ref) {
+ var emit = _ref.emit;
+
+ /** ********************************** Methods *********************************** */
+
+ /**
+ * Whether a day is highlighted and it is the first date
+ * in the highlighted range of dates
+ * @param {string | Date}
+ */
+ function selectDate(date) {
+ if (date.isDisabled) {
+ emit('selected-disabled', date);
+ }
+
+ emit('select-date', date);
+ }
+ /**
+ * Emit an event to show the month picker
+ */
+
+
+ function showMonthCalendar() {
+ emit('show-month-calendar');
+ }
+ /**
+ * Emit an event to show the year picker
+ */
+
+
+ function showYearCalendar() {
+ emit('show-year-calendar');
+ }
+ /**
+ * Change the page month
+ * @param {Number} incrementBy
+ */
+
+
+ function changeMonth(incrementBy) {
+ var date = props.pageDate;
+ setMonth(date, getMonth(date) + incrementBy);
+ emit('changed-month', date);
+ }
+ /**
+ * Is the previous month disabled?
+ * @return {Boolean}
+ */
+
+
+ function isPreviousMonthDisabled() {
+ var d = props.disabledDates;
+
+ if (!d || !d.to) {
+ return false;
+ }
+
+ var t = props.pageDate;
+ return getMonth(d.to) >= getMonth(t) && getFullYear(d.to) >= getFullYear(t);
+ }
+ /**
+ * Decrement the page month
+ */
+
+
+ function previousMonth() {
+ if (!isPreviousMonthDisabled()) {
+ changeMonth(-1);
+ }
+ }
+ /**
+ * Is the next month disabled?
+ * @return {Boolean}
+ */
+
+
+ function isNextMonthDisabled() {
+ var d = props.disabledDates;
+
+ if (!d || !d.from) {
+ return false;
+ }
+
+ var t = props.pageDate;
+ return getMonth(d.from) <= getMonth(t) && getFullYear(d.from) <= getFullYear(t);
+ }
+ /**
+ * Increment the current page month
+ */
+
+
+ function nextMonth() {
+ if (!isNextMonthDisabled()) {
+ changeMonth(+1);
+ }
+ }
+ /**
+ * Whether a day is selected
+ * @param {Date}
+ * @return {Boolean}
+ */
+
+
+ function isSelectedDate(dObj) {
+ return props.selectedDate ? compareDates(props.selectedDate, dObj) : false;
+ }
+ /**
+ * Whether a date is disabled
+ * @return {Boolean}
+ */
+
+
+ function isDisabledDate(date) {
+ var disabledDates = false;
+ var t = props.disabledDates;
+ if (!t) return disabledDates;
+
+ if (typeof t === 'undefined') {
+ return false;
+ }
+
+ if (typeof t.dates !== 'undefined') {
+ t.dates.forEach(function (d) {
+ if (compareDates(date, d)) {
+ disabledDates = true; // return true;
+ }
+ });
+ }
+
+ if (typeof t.to !== 'undefined' && t.to && date < t.to) {
+ disabledDates = true;
+ }
+
+ if (typeof t.from !== 'undefined' && t.from && date > t.from) {
+ disabledDates = true;
+ }
+
+ if (typeof t.ranges !== 'undefined') {
+ t.ranges.forEach(function (range) {
+ if (typeof range.from !== 'undefined' && range.from && typeof range.to !== 'undefined' && range.to) {
+ if (date < range.to && date > range.from) {
+ disabledDates = true; // return true;
+ }
+ }
+ });
+ }
+
+ if (typeof t.days !== 'undefined' && t.days.indexOf(getDay(date)) !== -1) {
+ disabledDates = true;
+ }
+
+ if (typeof t.daysOfMonth !== 'undefined' && t.daysOfMonth.indexOf(getDate(date)) !== -1) {
+ disabledDates = true;
+ }
+
+ if (typeof t.customPredictor === 'function' && t.customPredictor(date)) {
+ disabledDates = true;
+ }
+
+ return disabledDates;
+ }
+ /**
+ * Helper
+ * @param {mixed} prop
+ * @return {Boolean}
+ */
+
+
+ function isDefined(prop) {
+ return typeof prop !== 'undefined' && prop;
+ }
+ /**
+ * Whether a date is highlighted or not
+ * @return {Boolean}
+ */
+
+
+ function isHighlightedDate(date) {
+ var h = props.highlighted;
+
+ if (!(h && h.includeDisabled) && isDisabledDate(date)) {
+ return false;
+ }
+
+ var highlighted = false;
+
+ if (typeof h === 'undefined') {
+ return false;
+ }
+
+ if (typeof h.dates !== 'undefined') {
+ h.dates.forEach(function (d) {
+ if (compareDates(date, d)) {
+ highlighted = true; // return true;
+ }
+ });
+ }
+
+ if (isDefined(h.from) && isDefined(h.to)) {
+ highlighted = date >= h.from && date <= h.to;
+ }
+
+ if (typeof h.days !== 'undefined' && h.days.indexOf(getDay(date)) !== -1) {
+ highlighted = true;
+ }
+
+ if (typeof h.daysOfMonth !== 'undefined' && h.daysOfMonth.indexOf(getDate(date)) !== -1) {
+ highlighted = true;
+ }
+
+ if (typeof h.customPredictor === 'function' && h.customPredictor(date)) {
+ highlighted = true;
+ }
+
+ return highlighted;
+ }
+ /**
+ * Returns Css Classes for a day element
+ */
+
+
+ function dayClasses(day) {
+ return {
+ selected: day.isSelected,
+ disabled: day.isDisabled,
+ highlighted: day.isHighlighted,
+ today: day.isToday,
+ weekend: day.isWeekend,
+ sat: day.isSaturday,
+ sun: day.isSunday,
+ 'highlight-start': day.isHighlightStart,
+ 'highlight-end': day.isHighlightEnd
+ };
+ }
+ /**
+ * Whether a day is highlighted and it is the first date
+ * in the highlighted range of dates
+ * @param {Date}
+ * @return {Boolean}
+ */
+
+
+ function isHighlightStart(date) {
+ var h = props.highlighted;
+ if (!h) return false;
+ return isHighlightedDate(date) && h.from instanceof Date && getFullYear(h.from) === getFullYear(date) && getMonth(h.from) === getMonth(date) && getDate(h.from) === getDate(date);
+ }
+ /**
+ * Whether a day is highlighted and it is the first date
+ * in the highlighted range of dates
+ * @param {Date}
+ * @return {Boolean}
+ */
+
+
+ function isHighlightEnd(date) {
+ var h = props.highlighted;
+ if (!h) return false;
+ return isHighlightedDate(date) && h.to instanceof Date && getFullYear(h.to) === getFullYear(date) && getMonth(h.to) === getMonth(date) && getDate(h.to) === getDate(date);
+ }
+ /** ********************************** Computed *********************************** */
+
+ /**
+ * Returns an array of day names
+ * @return {String[]}
+ */
+
+
+ var daysOfWeek = computed$1(function () {
+ if (props.mondayFirst) {
+ var tempDays = props.translation && props.translation.days && props.translation.days.slice();
+ tempDays.push(tempDays.shift());
+ return tempDays;
+ }
+
+ return props.translation && props.translation.days;
+ });
+ var blankDays = computed$1(function () {
+ var d = props.pageDate;
+ var dObj = props.useUtc ? new Date(Date.UTC(d.getUTCFullYear(), d.getUTCMonth(), 1)) : new Date(d.getFullYear(), d.getMonth(), 1, d.getHours(), d.getMinutes());
+
+ if (props.mondayFirst) {
+ return getDay(dObj) > 0 ? getDay(dObj) - 1 : 6;
+ }
+
+ return getDay(dObj);
+ });
+ /**
+ * @return {Object[]}
+ */
+
+ var days = computed$1(function () {
+ var d = props.pageDate;
+ var tdays = []; // set up a new date object to the beginning of the current 'page'
+
+ var dObj = props.useUtc ? new Date(Date.UTC(d.getUTCFullYear(), d.getUTCMonth(), 1)) : new Date(d.getFullYear(), d.getMonth(), 1, d.getHours(), d.getMinutes());
+ var t = daysInMonth(getFullYear(dObj), getMonth(dObj));
+
+ for (var i = 0; i < t; i += 1) {
+ tdays.push({
+ date: getDate(dObj),
+ timestamp: dObj.getTime(),
+ isSelected: isSelectedDate(dObj),
+ isDisabled: isDisabledDate(dObj),
+ isHighlighted: isHighlightedDate(dObj),
+ isHighlightStart: isHighlightStart(dObj),
+ isHighlightEnd: isHighlightEnd(dObj),
+ isToday: compareDates(dObj, new Date()),
+ isWeekend: getDay(dObj) === 0 || getDay(dObj) === 6,
+ isSaturday: getDay(dObj) === 6,
+ isSunday: getDay(dObj) === 0
+ });
+ setDate(dObj, getDate(dObj) + 1);
+ }
+
+ return tdays;
+ });
+ /**
+ * Gets the name of the month the current page is on
+ * @return {String}
+ */
+
+ var currMonthName = computed$1(function () {
+ var monthName = props.fullMonthName ? props.translation && props.translation.months : props.translation && props.translation.monthsAbbr;
+ return getMonthNameAbbr(getMonth(props.pageDate), monthName);
+ });
+ /**
+ * Gets the name of the month the current page is on
+ * @return {String}
+ */
+
+ var monthName = computed$1(function () {
+ var tempName = props.translation && props.translation.months;
+ return getMonthName(getMonth(props.pageDate), tempName);
+ });
+ /**
+ * Gets the name of the year that current page is on
+ * @return {Number}
+ */
+
+ var currYearName = computed$1(function () {
+ var yearSuffix = props.translation && props.translation.yearSuffix;
+ return "".concat(getFullYear(props.pageDate)).concat(yearSuffix);
+ });
+ /**
+ * Is this translation using year/month/day format?
+ * @return {Boolean}
+ */
+
+ var isYmd = computed$1(function () {
+ return (props.translation && props.translation.ymd && props.translation && props.translation.ymd) === true;
+ });
+ /**
+ * Is the left hand navigation button disabled?
+ * @return {Boolean}
+ */
+
+ var isLeftNavDisabled = computed$1(function () {
+ return props.isRtl ? isNextMonthDisabled() : isPreviousMonthDisabled();
+ });
+ /**
+ * Is the right hand navigation button disabled?
+ * @return {Boolean}
+ */
+
+ var isRightNavDisabled = computed$1(function () {
+ return props.isRtl ? isPreviousMonthDisabled() : isNextMonthDisabled();
+ });
+ var getDayName = computed$1(function () {
+ return props.selectedDate ? getDayNameAbbr(props.selectedDate, props.translation && props.translation.daysNames) : null;
+ });
+ var getDisplayDate = computed$1(function () {
+ return props.selectedDate ? getDate(props.selectedDate) : null;
+ });
+ return {
+ isDefined: isDefined,
+ showMonthCalendar: showMonthCalendar,
+ daysOfWeek: daysOfWeek,
+ blankDays: blankDays,
+ isYmd: isYmd,
+ days: days,
+ currMonthName: currMonthName,
+ currYearName: currYearName,
+ isLeftNavDisabled: isLeftNavDisabled,
+ isRightNavDisabled: isRightNavDisabled,
+ selectDate: selectDate,
+ previousMonth: previousMonth,
+ nextMonth: nextMonth,
+ dayClasses: dayClasses,
+ monthName: monthName,
+ getDayName: getDayName,
+ getDisplayDate: getDisplayDate,
+ showYearCalendar: showYearCalendar
+ };
+ }
+});
+
+const _hoisted_1$1 = { key: 0 };
+
+function render$1(_ctx, _cache, $props, $setup, $data, $options) {
+ return withDirectives((openBlock(), createBlock("div", {
+ class: [_ctx.calendarClass, 'vuejs3-datepicker__calendar'],
+ style: _ctx.calendarStyle,
+ onMousedown: _cache[5] || (_cache[5] = withModifiers(() => {}, ["prevent"]))
+ }, [
+ renderSlot(_ctx.$slots, "beforeCalendarHeader"),
+ createVNode("section", null, [
+ createVNode("p", {
+ onClick: _cache[1] || (_cache[1] = (...args) => (_ctx.showYearCalendar(...args)))
+ }, toDisplayString(_ctx.currYearName), 1 /* TEXT */),
+ (_ctx.selectedDate)
+ ? (openBlock(), createBlock("p", _hoisted_1$1, toDisplayString(_ctx.getDayName) + " " + toDisplayString(_ctx.getDisplayDate) + " " + toDisplayString(_ctx.monthName), 1 /* TEXT */))
+ : createCommentVNode("v-if", true)
+ ]),
+ createVNode("header", null, [
+ createVNode("span", {
+ onClick: _cache[2] || (_cache[2] = $event => (_ctx.isRtl ? _ctx.nextMonth() : _ctx.previousMonth())),
+ class: ["prev", { disabled: _ctx.isLeftNavDisabled }]
+ }, "<", 2 /* CLASS */),
+ createVNode("span", {
+ class: ["day__month_btn", _ctx.allowedToShowView('month') ? 'up' : ''],
+ onClick: _cache[3] || (_cache[3] = (...args) => (_ctx.showMonthCalendar(...args)))
+ }, toDisplayString(_ctx.isYmd ? _ctx.currYearName : _ctx.currMonthName) + " " + toDisplayString(_ctx.isYmd ? _ctx.currMonthName : _ctx.currYearName), 3 /* TEXT, CLASS */),
+ createVNode("span", {
+ onClick: _cache[4] || (_cache[4] = $event => (_ctx.isRtl ? _ctx.previousMonth() : _ctx.nextMonth())),
+ class: ["next", { disabled: _ctx.isRightNavDisabled }]
+ }, ">", 2 /* CLASS */)
+ ]),
+ createVNode("div", {
+ class: _ctx.isRtl ? 'flex-rtl' : ''
+ }, [
+ (openBlock(true), createBlock(Fragment, null, renderList(_ctx.daysOfWeek, (d) => {
+ return (openBlock(), createBlock("span", {
+ class: "cell day-header",
+ key: d.timestamp
+ }, toDisplayString(d), 1 /* TEXT */))
+ }), 128 /* KEYED_FRAGMENT */)),
+ (_ctx.blankDays > 0)
+ ? (openBlock(true), createBlock(Fragment, { key: 0 }, renderList(_ctx.blankDays, (d) => {
+ return (openBlock(), createBlock("span", {
+ class: "cell day blank",
+ key: d.timestamp
+ }))
+ }), 128 /* KEYED_FRAGMENT */))
+ : createCommentVNode("v-if", true),
+ (openBlock(true), createBlock(Fragment, null, renderList(_ctx.days, (day) => {
+ return (openBlock(), createBlock("span", {
+ class: ["cell day", _ctx.dayClasses(day)],
+ key: day.timestamp,
+ innerHTML: _ctx.dayCellContent(day),
+ onClick: $event => (_ctx.selectDate(day))
+ }, null, 10 /* CLASS, PROPS */, ["innerHTML", "onClick"]))
+ }), 128 /* KEYED_FRAGMENT */))
+ ], 2 /* CLASS */)
+ ], 38 /* CLASS, STYLE, HYDRATE_EVENTS */)), [
+ [vShow, _ctx.showDayView]
+ ])
+}
+
+script$1.render = render$1;
+script$1.__file = "src/components/datepicker/PickerDay.vue";
+
+var script$2 = defineComponent({
+ name: 'PickerMonth',
+ props: {
+ showMonthView: {
+ type: Boolean
+ },
+ selectedDate: {
+ type: Date,
+ default: new Date()
+ },
+ pageDate: {
+ type: Date,
+ default: new Date()
+ },
+ pageTimestamp: {
+ type: Number
+ },
+ disabledDates: {
+ type: Object
+ },
+ calendarClass: {
+ type: [String, Object, Array]
+ },
+ calendarStyle: {
+ type: Object
+ },
+ translation: {
+ type: Object
+ },
+ isRtl: {
+ type: Boolean
+ },
+ allowedToShowView: {
+ type: Function
+ },
+ useUtc: {
+ type: Boolean
+ },
+ fullMonthName: {
+ type: Boolean
+ }
+ },
+ setup: function setup(props, _ref) {
+ var emit = _ref.emit;
+
+ /** ********************************** Methods *********************************** */
+
+ /**
+ * Emits a selectMonth event
+ * @param {Object} month
+ */
+ function selectMonth(month) {
+ if (!month.isDisabled) {
+ emit('select-month', month);
+ }
+ }
+ /**
+ * Changes the year up or down
+ * @param {Number} incrementBy
+ */
+
+
+ function changeYear(incrementBy) {
+ var date = props.pageDate;
+ setFullYear(date, getFullYear(date) + incrementBy);
+ emit('changed-year', date);
+ }
+ /**
+ * Checks if the previous year is disabled or not
+ * @return {Boolean}
+ */
+
+
+ function isPreviousYearDisabled() {
+ var d = props.disabledDates;
+
+ if (!d || !d.to) {
+ return false;
+ }
+
+ return getFullYear(d.to) >= getFullYear(props.pageDate);
+ }
+ /**
+ * Decrements the year
+ */
+
+
+ function previousYear() {
+ if (!isPreviousYearDisabled()) {
+ changeYear(-1);
+ }
+ }
+ /**
+ * Checks if the next year is disabled or not
+ * @return {Boolean}
+ */
+
+
+ function isNextYearDisabled() {
+ var d = props.disabledDates;
+
+ if (!d || !d.from) {
+ return false;
+ }
+
+ return getFullYear(d.from) <= getFullYear(props.pageDate);
+ }
+ /**
+ * Increments the year
+ */
+
+
+ function nextYear() {
+ if (!isNextYearDisabled()) {
+ changeYear(1);
+ }
+ }
+ /**
+ * Emits an event that shows the year calendar
+ */
+
+
+ function showYearCalendar() {
+ emit('show-year-calendar');
+ }
+ /**
+ * Whether the selected date is in this month
+ * @param {Date}
+ * @return {Boolean}
+ */
+
+
+ function isSelectedMonth(date) {
+ var d = props.selectedDate;
+ return d && getFullYear(d) === getFullYear(date) && getMonth(d) === getMonth(date);
+ }
+ /**
+ * Whether a month is disabled
+ * @param {Date}
+ * @return {Boolean}
+ */
+
+
+ function isDisabledMonth(date) {
+ var disabledDates = false;
+ var d = props.disabledDates;
+ if (!d) return false;
+
+ if (typeof d === 'undefined') {
+ return false;
+ }
+
+ if (typeof d.to !== 'undefined' && d.to) {
+ if (getMonth(date) < getMonth(d.to) && getFullYear(date) <= getFullYear(d.to) || getFullYear(date) < getFullYear(d.to)) {
+ disabledDates = true;
+ }
+ }
+
+ if (typeof d.from !== 'undefined' && d.from) {
+ if (getMonth(date) > getMonth(d.from) && getFullYear(date) >= getFullYear(d.from) || getFullYear(date) > getFullYear(d.from)) {
+ disabledDates = true;
+ }
+ }
+
+ if (typeof d.customPredictor === 'function' && d.customPredictor(date)) {
+ disabledDates = true;
+ }
+
+ return disabledDates;
+ }
+ /** ********************************** Computed *********************************** */
+
+
+ var months = computed$1(function () {
+ var d = props.pageDate;
+ var tmonths = []; // set up a new date object to the beginning of the current 'page'
+
+ var dObj = props.useUtc ? new Date(Date.UTC(d.getUTCFullYear(), 0, d.getUTCDate())) : new Date(d.getFullYear(), 0, d.getDate(), d.getHours(), d.getMinutes());
+
+ for (var i = 0; i < 12; i += 1) {
+ tmonths.push({
+ month: getMonthName(i, props.translation && props.translation.months),
+ timestamp: dObj.getTime(),
+ isSelected: isSelectedMonth(dObj),
+ isDisabled: isDisabledMonth(dObj)
+ });
+ setMonth(dObj, getMonth(dObj) + 1);
+ }
+
+ return tmonths;
+ });
+ /**
+ * Get year name on current page.
+ * @return {String}
+ */
+
+ var pageYearName = computed$1(function () {
+ var yearSuffix = props.translation && props.translation.yearSuffix;
+ return "".concat(getFullYear(props.pageDate)).concat(yearSuffix);
+ });
+ /**
+ * Is the left hand navigation disabled
+ * @return {Boolean}
+ */
+
+ var isLeftNavDisabled = computed$1(function () {
+ return props.isRtl ? isNextYearDisabled() : isPreviousYearDisabled();
+ });
+ /**
+ * Is the right hand navigation disabled
+ * @return {Boolean}
+ */
+
+ var isRightNavDisabled = computed$1(function () {
+ return props.isRtl ? isPreviousYearDisabled() : isNextYearDisabled();
+ });
+ /**
+ * Gets the name of the month the current page is on
+ * @return {String}
+ */
+
+ var monthName = computed$1(function () {
+ var tempName = props.translation && props.translation.months;
+ return getMonthName(getMonth(props.pageDate), tempName);
+ });
+ var getDisplayDate = computed$1(function () {
+ return props.selectedDate ? getDate(props.selectedDate) : null;
+ });
+ var getDayName = computed$1(function () {
+ return props.selectedDate ? getDayNameAbbr(props.selectedDate, props.translation && props.translation.daysNames) : null;
+ });
+ /**
+ * Gets the name of the year that current page is on
+ * @return {Number}
+ */
+
+ var currYearName = computed$1(function () {
+ var yearSuffix = props.translation && props.translation.yearSuffix;
+ return "".concat(getFullYear(props.pageDate)).concat(yearSuffix);
+ });
+ /**
+ * Gets the name of the month the current page is on
+ * @return {String}
+ */
+
+ var currMonthName = computed$1(function () {
+ var monthName = props.fullMonthName ? props.translation && props.translation.months : props.translation && props.translation.monthsAbbr;
+ return getMonthNameAbbr(getMonth(props.pageDate), monthName);
+ });
+ return {
+ isRightNavDisabled: isRightNavDisabled,
+ isLeftNavDisabled: isLeftNavDisabled,
+ pageYearName: pageYearName,
+ months: months,
+ selectMonth: selectMonth,
+ previousYear: previousYear,
+ nextYear: nextYear,
+ currYearName: currYearName,
+ getDisplayDate: getDisplayDate,
+ monthName: monthName,
+ showYearCalendar: showYearCalendar,
+ getDayName: getDayName
+ };
+ }
+});
+
+const _hoisted_1$2 = { key: 0 };
+
+function render$2(_ctx, _cache, $props, $setup, $data, $options) {
+ return withDirectives((openBlock(), createBlock("div", {
+ class: [_ctx.calendarClass, 'vuejs3-datepicker__calendar'],
+ style: _ctx.calendarStyle,
+ onMousedown: _cache[5] || (_cache[5] = withModifiers(() => {}, ["prevent"]))
+ }, [
+ renderSlot(_ctx.$slots, "beforeCalendarHeader"),
+ createVNode("section", null, [
+ createVNode("p", {
+ onClick: _cache[1] || (_cache[1] = (...args) => (_ctx.showYearCalendar(...args)))
+ }, toDisplayString(_ctx.currYearName), 1 /* TEXT */),
+ (_ctx.selectedDate)
+ ? (openBlock(), createBlock("p", _hoisted_1$2, toDisplayString(_ctx.getDayName) + " " + toDisplayString(_ctx.getDisplayDate) + " " + toDisplayString(_ctx.monthName), 1 /* TEXT */))
+ : createCommentVNode("v-if", true)
+ ]),
+ createVNode("header", null, [
+ createVNode("span", {
+ onClick: _cache[2] || (_cache[2] = $event => (_ctx.isRtl ? _ctx.nextYear() : _ctx.previousYear())),
+ class: ["prev", { disabled: _ctx.isLeftNavDisabled }]
+ }, "<", 2 /* CLASS */),
+ createVNode("span", {
+ class: ["month__year_btn", _ctx.allowedToShowView('year') ? 'up' : ''],
+ onClick: _cache[3] || (_cache[3] = (...args) => (_ctx.showYearCalendar(...args)))
+ }, toDisplayString(_ctx.pageYearName), 3 /* TEXT, CLASS */),
+ createVNode("span", {
+ onClick: _cache[4] || (_cache[4] = $event => (_ctx.isRtl ? _ctx.previousYear() : _ctx.nextYear())),
+ class: ["next", { disabled: _ctx.isRightNavDisabled }]
+ }, ">", 2 /* CLASS */)
+ ]),
+ (openBlock(true), createBlock(Fragment, null, renderList(_ctx.months, (month) => {
+ return (openBlock(), createBlock("span", {
+ class: ["cell month", { selected: month.isSelected, disabled: month.isDisabled }],
+ key: month.timestamp,
+ onClick: withModifiers($event => (_ctx.selectMonth(month)), ["stop"])
+ }, toDisplayString(month.month), 11 /* TEXT, CLASS, PROPS */, ["onClick"]))
+ }), 128 /* KEYED_FRAGMENT */))
+ ], 38 /* CLASS, STYLE, HYDRATE_EVENTS */)), [
+ [vShow, _ctx.showMonthView]
+ ])
+}
+
+script$2.render = render$2;
+script$2.__file = "src/components/datepicker/PickerMonth.vue";
+
+var script$3 = defineComponent({
+ name: 'PickerYear',
+ props: {
+ showYearView: {
+ type: Boolean
+ },
+ selectedDate: {
+ type: Date,
+ default: new Date()
+ },
+ pageDate: {
+ type: Date,
+ default: new Date()
+ },
+ pageTimestamp: {
+ type: Number
+ },
+ disabledDates: {
+ type: Object
+ },
+ highlighted: {
+ type: Object
+ },
+ calendarClass: {
+ type: [String, Object, Array]
+ },
+ calendarStyle: {
+ type: Object
+ },
+ translation: {
+ type: Object
+ },
+ isRtl: {
+ type: Boolean
+ },
+ allowedToShowView: {
+ type: Function
+ },
+ useUtc: {
+ type: Boolean
+ },
+ fullMonthName: {
+ type: Boolean
+ }
+ },
+ setup: function setup(props, _ref) {
+ var emit = _ref.emit;
+
+ /** ********************************** Methods *********************************** */
+
+ /**
+ * Select year
+ * @param {year}
+ */
+ function selectYear(year) {
+ if (!year.isDisabled) {
+ emit('select-year', year);
+ }
+ }
+ /**
+ * Change year (increment / decrement)
+ * @param {number}
+ */
+
+
+ function changeYear(incrementBy) {
+ var date = props.pageDate;
+ setFullYear(date, getFullYear(date) + incrementBy);
+ emit('changed-decade', date);
+ }
+ /**
+ * checks if previous decade is disabled
+ */
+
+
+ function isPreviousDecadeDisabled() {
+ var d = props.disabledDates;
+
+ if (!d || !d.to) {
+ return false;
+ }
+
+ var disabledYear = getFullYear(d.to);
+ var lastYearInPreviousPage = Math.floor(getFullYear(props.pageDate) / 10) * 10 - 1;
+ return disabledYear > lastYearInPreviousPage;
+ }
+ /**
+ * changes year to previous decade
+ */
+
+
+ function previousDecade() {
+ if (!isPreviousDecadeDisabled()) {
+ changeYear(-10);
+ }
+ }
+ /**
+ * check if next decade is disabled
+ */
+
+
+ function isNextDecadeDisabled() {
+ var d = props.disabledDates;
+
+ if (!d || !d.from) {
+ return false;
+ }
+
+ var disabledYear = getFullYear(d.from);
+ var firstYearInNextPage = Math.ceil(getFullYear(props.pageDate) / 10) * 10;
+ return disabledYear < firstYearInNextPage;
+ }
+ /**
+ * moves year to next decade
+ */
+
+
+ function nextDecade() {
+ if (!isNextDecadeDisabled()) {
+ changeYear(10);
+ }
+ }
+ /**
+ * Whether the selected date is in this year
+ * @param {Date}
+ * @return {Boolean}
+ */
+
+
+ function isSelectedYear(date) {
+ return props.selectedDate ? getFullYear(props.selectedDate) === getFullYear(date) : false;
+ }
+ /**
+ * Whether a year is disabled
+ * @param {Date}
+ * @return {Boolean}
+ */
+
+
+ function isDisabledYear(date) {
+ var disabledDates = false;
+
+ if (typeof props.disabledDates === 'undefined' || !props.disabledDates) {
+ return false;
+ }
+
+ if (typeof props.disabledDates.to !== 'undefined' && props.disabledDates.to) {
+ if (getFullYear(date) < getFullYear(props.disabledDates.to)) {
+ disabledDates = true;
+ }
+ }
+
+ if (typeof props.disabledDates.from !== 'undefined' && props.disabledDates.from) {
+ if (getFullYear(date) > getFullYear(props.disabledDates.from)) {
+ disabledDates = true;
+ }
+ }
+
+ if (typeof props.disabledDates.customPredictor === 'function' && props.disabledDates.customPredictor(date)) {
+ disabledDates = true;
+ }
+
+ return disabledDates;
+ }
+ /** ********************************** Computed *********************************** */
+
+
+ var years = computed$1(function () {
+ var d = props.pageDate;
+ var tyears = []; // set up a new date object to the beginning of the current 'page'7
+
+ var dObj = props.useUtc ? new Date(Date.UTC(Math.floor(d.getUTCFullYear() / 10) * 10, d.getUTCMonth(), d.getUTCDate())) : new Date(Math.floor(d.getFullYear() / 10) * 10, d.getMonth(), d.getDate(), d.getHours(), d.getMinutes());
+
+ for (var i = 0; i < 10; i += 1) {
+ tyears.push({
+ year: getFullYear(dObj),
+ timestamp: dObj.getTime(),
+ isSelected: isSelectedYear(dObj),
+ isDisabled: isDisabledYear(dObj)
+ });
+ setFullYear(dObj, getFullYear(dObj) + 1);
+ }
+
+ return tyears;
+ });
+ /**
+ * @return {String}
+ */
+
+ var getPageDecade = computed$1(function () {
+ var decadeStart = Math.floor(getFullYear(props.pageDate) / 10) * 10;
+ var decadeEnd = decadeStart + 9;
+ var yearSuffix = props.translation && props.translation.yearSuffix;
+ return "".concat(decadeStart, " - ").concat(decadeEnd).concat(yearSuffix);
+ });
+ /**
+ * Is the left hand navigation button disabled?
+ * @return {Boolean}
+ */
+
+ var isLeftNavDisabled = computed$1(function () {
+ return props.isRtl ? isNextDecadeDisabled() : isPreviousDecadeDisabled();
+ });
+ /**
+ * Is the right hand navigation button disabled?
+ * @return {Boolean}
+ */
+
+ var isRightNavDisabled = computed$1(function () {
+ return props.isRtl ? isPreviousDecadeDisabled() : isNextDecadeDisabled();
+ });
+ var getDayName = computed$1(function () {
+ return props.selectedDate ? getDayNameAbbr(props.selectedDate, props.translation && props.translation.daysNames) : null;
+ });
+ /**
+ * Gets the name of the month the current page is on
+ * @return {String}
+ */
+
+ var monthName = computed$1(function () {
+ var tempName = props.translation && props.translation.months;
+ return getMonthName(getMonth(props.pageDate), tempName);
+ });
+ var getDisplayDate = computed$1(function () {
+ return props.selectedDate ? getDate(props.selectedDate) : null;
+ });
+ /**
+ * Gets the name of the year that current page is on
+ * @return {Number}
+ */
+
+ var currYearName = computed$1(function () {
+ var yearSuffix = props.translation && props.translation.yearSuffix;
+ return "".concat(getFullYear(props.pageDate)).concat(yearSuffix);
+ });
+ /**
+ * Gets the name of the month the current page is on
+ * @return {String}
+ */
+
+ var currMonthName = computed$1(function () {
+ var monthName = props.fullMonthName ? props.translation && props.translation.months : props.translation && props.translation.monthsAbbr;
+ return getMonthNameAbbr(getMonth(props.pageDate), monthName);
+ });
+ return {
+ isRightNavDisabled: isRightNavDisabled,
+ isLeftNavDisabled: isLeftNavDisabled,
+ getPageDecade: getPageDecade,
+ years: years,
+ nextDecade: nextDecade,
+ previousDecade: previousDecade,
+ selectYear: selectYear,
+ getDayName: getDayName,
+ monthName: monthName,
+ getDisplayDate: getDisplayDate,
+ currYearName: currYearName,
+ currMonthName: currMonthName
+ };
+ }
+});
+
+const _hoisted_1$3 = { key: 0 };
+
+function render$3(_ctx, _cache, $props, $setup, $data, $options) {
+ return withDirectives((openBlock(), createBlock("div", {
+ class: [_ctx.calendarClass, 'vuejs3-datepicker__calendar'],
+ style: _ctx.calendarStyle,
+ onMousedown: _cache[3] || (_cache[3] = withModifiers(() => {}, ["prevent"]))
+ }, [
+ renderSlot(_ctx.$slots, "beforeCalendarHeader"),
+ createVNode("section", null, [
+ createVNode("p", null, toDisplayString(_ctx.currYearName), 1 /* TEXT */),
+ (_ctx.selectedDate)
+ ? (openBlock(), createBlock("p", _hoisted_1$3, toDisplayString(_ctx.getDayName) + " " + toDisplayString(_ctx.getDisplayDate) + " " + toDisplayString(_ctx.monthName), 1 /* TEXT */))
+ : createCommentVNode("v-if", true)
+ ]),
+ createVNode("header", null, [
+ createVNode("span", {
+ onClick: _cache[1] || (_cache[1] = $event => (_ctx.isRtl ? _ctx.nextDecade() : _ctx.previousDecade())),
+ class: ["prev", { disabled: _ctx.isLeftNavDisabled }]
+ }, "<", 2 /* CLASS */),
+ createVNode("span", null, toDisplayString(_ctx.getPageDecade), 1 /* TEXT */),
+ createVNode("span", {
+ onClick: _cache[2] || (_cache[2] = $event => (_ctx.isRtl ? _ctx.previousDecade() : _ctx.nextDecade())),
+ class: ["next", { disabled: _ctx.isRightNavDisabled }]
+ }, ">", 2 /* CLASS */)
+ ]),
+ (openBlock(true), createBlock(Fragment, null, renderList(_ctx.years, (year) => {
+ return (openBlock(), createBlock("span", {
+ class: ["cell year", { selected: year.isSelected, disabled: year.isDisabled }],
+ key: year.timestamp,
+ onClick: withModifiers($event => (_ctx.selectYear(year)), ["stop"])
+ }, toDisplayString(year.year), 11 /* TEXT, CLASS, PROPS */, ["onClick"]))
+ }), 128 /* KEYED_FRAGMENT */))
+ ], 38 /* CLASS, STYLE, HYDRATE_EVENTS */)), [
+ [vShow, _ctx.showYearView]
+ ])
+}
+
+script$3.render = render$3;
+script$3.__file = "src/components/datepicker/PickerYear.vue";
+
+var af = function af() {
+ var langName = 'Afrikaans';
+ var monthFullName = ['Januarie', 'Februarie', 'Maart', 'April', 'Mei', 'Junie', 'Julie', 'Augustus', 'September', 'Oktober', 'November', 'Desember'];
+ var shortName = ['Jan', 'Feb', 'Mrt', 'Apr', 'Mei', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Des'];
+ var days = ['So.', 'Ma.', 'Di.', 'Wo.', 'Do.', 'Vr.', 'Sa.'];
+ var rtl = false;
+ var ymd = false;
+ var yearSuffix = '';
+ return {
+ months: monthFullName,
+ monthsAbbr: shortName,
+ days: days,
+ yearSuffix: yearSuffix,
+ ymd: ymd,
+ rtl: rtl,
+ langName: langName,
+ // tbd: need fullName of days
+ daysNames: days
+ };
+};
+
+var en = function en() {
+ var langName = 'English';
+ var monthFullName = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+ var shortName = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+ var days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+ var daysNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+ var rtl = false;
+ var ymd = false;
+ var yearSuffix = '';
+ return {
+ months: monthFullName,
+ monthsAbbr: shortName,
+ days: days,
+ language: langName,
+ yearSuffix: yearSuffix,
+ ymd: ymd,
+ rtl: rtl,
+ langName: langName,
+ daysNames: daysNames
+ };
+};
+
+var data = {
+ af: af(),
+ en: en()
+};
+
+/**
+ * Returns true if data is null or undefined
+ * @param data
+ */
+var isNullUndefined = function isNullUndefined(data) {
+ return data === null || data === undefined;
+};
+
+var ValidationMessages;
+
+(function (ValidationMessages) {
+ ValidationMessages["required"] = "Please enter this value";
+})(ValidationMessages || (ValidationMessages = {}));
+
+var VALIDATORS;
+
+(function (VALIDATORS) {
+ VALIDATORS["REQUIRED"] = "required";
+})(VALIDATORS || (VALIDATORS = {}));
+
+var KeyName;
+
+(function (KeyName) {
+ KeyName["Enter"] = "Enter";
+ KeyName["ArrowUp"] = "ArrowUp";
+ KeyName["ArrowDown"] = "ArrowDown";
+ KeyName["Escape"] = "Escape";
+ KeyName["Tab"] = "Tab";
+})(KeyName || (KeyName = {}));
+
+/**
+ * Required validation
+ * @param value
+ */
+
+var required = function required(value) {
+ if (isNullUndefined(value)) {
+ return false;
+ }
+
+ if (_typeof(value) === 'object' && !Object.keys(value).length) {
+ if (Object.prototype.toString.call(value) === '[object Date]' && value) {
+ return true;
+ }
+
+ return false;
+ }
+
+ if (typeof value === 'string' && value.trim() === '') {
+ return false;
+ }
+
+ if (value.constructor === Array && value.length <= 0) {
+ return false;
+ }
+
+ return true;
+};
+
+var validationRules = {
+ required: required
+};
+/**
+ *
+ * @param validationName
+ * @param validationObj
+ * @param value
+ */
+
+var callValidator = function callValidator(validationName, validationObj, value) {
+ var isValid = true;
+
+ switch (validationName) {
+ default:
+ if (validationRules[validationName]) {
+ isValid = validationRules[validationName](value);
+ }
+
+ break;
+ }
+
+ return isValid;
+}; // helper validation functions
+
+/**
+ *
+ * @param value
+ * @param validationArray
+ */
+
+
+var validationHandler = function validationHandler(value, validationArray) {
+ var validationObject = {
+ isValid: true,
+ message: ''
+ };
+
+ var _iterator = _createForOfIteratorHelper(validationArray),
+ _step;
+
+ try {
+ for (_iterator.s(); !(_step = _iterator.n()).done;) {
+ var validation = _step.value;
+ validationObject.isValid = callValidator(validation.name, validation, value);
+ validationObject.message = '';
+
+ if (!validationObject.isValid) {
+ // checking if custom message is passed if not then use standard msgs
+ if (validation.message) {
+ validationObject.message = validation.message;
+ } else {
+ validationObject.message = ValidationMessages[validation.name];
+ } // break if any one validation is failed
+
+
+ break;
+ }
+ }
+ } catch (err) {
+ _iterator.e(err);
+ } finally {
+ _iterator.f();
+ }
+
+ return validationObject;
+};
+
+var script$4 = defineComponent({
+ name: 'Datepicker',
+ components: {
+ DateInput: script,
+ PickerDay: script$1,
+ PickerMonth: script$2,
+ PickerYear: script$3
+ },
+ props: {
+ modelValue: {
+ type: [Date, String]
+ },
+ value: {
+ type: [Date, String]
+ },
+ format: {
+ type: [String, Function],
+ default: 'dd MMM yyyy'
+ },
+ language: {
+ type: String,
+ default: 'en'
+ },
+ openDate: {
+ validator: function validator(val) {
+ return validateDateInput(val);
+ },
+ type: Date
+ },
+ minimumView: {
+ type: String,
+ default: 'day'
+ },
+ maximumView: {
+ type: String,
+ default: 'year'
+ },
+ name: {
+ type: String
+ },
+ id: {
+ type: String
+ },
+ dayCellContent: {
+ type: Function
+ },
+ fullMonthName: {
+ type: Boolean
+ },
+ disabledDates: {
+ type: Object
+ },
+ highlighted: {
+ type: Object
+ },
+ placeholder: {
+ type: String
+ },
+ inline: {
+ type: Boolean
+ },
+ calendarClass: {
+ type: [String, Object, Array]
+ },
+ inputClass: {
+ type: [String, Object, Array]
+ },
+ wrapperClass: {
+ type: [String, Object, Array]
+ },
+ mondayFirst: {
+ type: Boolean
+ },
+ clearButton: {
+ type: Boolean
+ },
+ clearButtonIcon: {
+ type: String
+ },
+ calendarButton: {
+ type: Boolean
+ },
+ calendarButtonIcon: {
+ type: String
+ },
+ calendarButtonIconContent: {
+ type: String
+ },
+ addBootstrapClass: {
+ type: Boolean
+ },
+ initialView: {
+ type: String
+ },
+ disabled: {
+ type: Boolean
+ },
+ required: {
+ type: Boolean
+ },
+ typeable: {
+ type: Boolean
+ },
+ useUtc: {
+ type: Boolean
+ },
+
+ /**
+ * Validations array of objects of type IValidationRule to valdiate the input
+ * @values IValidationRule[]
+ */
+ validations: {
+ type: Array,
+ default: function _default() {
+ return [];
+ }
+ },
+ autoValidate: {
+ type: Boolean,
+ default: false
+ },
+ hideInput: {
+ type: Boolean,
+ default: true
+ }
+ },
+ emits: ['input', 'cleared', 'update:modelValue', 'closed', 'changed-month', 'changed-year', 'changed-day', 'selected', 'selected-disabled'],
+ setup: function setup(props, _ref) {
+ var emit = _ref.emit;
+ var initmodelvalue = new Date(props.modelValue);
+ var pageTimestamp = ref(0);
+ var selectedDate = ref(null);
+
+ if (props.modelValue && isValidDate(initmodelvalue)) {
+ pageTimestamp.value = setDate(initmodelvalue, 1);
+ selectedDate.value = initmodelvalue;
+ } else {
+ pageTimestamp.value = setDate(new Date(), 1);
+ }
+
+ var showDayView = ref(false);
+ var showMonthView = ref(false);
+ var showYearView = ref(false);
+ var calendarHeight = ref(0);
+ var resetTypedDate = ref(new Date());
+ var validation = reactive({
+ isValid: true,
+ message: ''
+ });
+ /** ********************************** Computed *********************************** */
+
+ var computedInitialView = computed$1(function () {
+ if (!props.initialView) {
+ return props.minimumView;
+ }
+
+ return props.initialView;
+ });
+ var pageDate = computed$1(function () {
+ return new Date(pageTimestamp.value);
+ });
+ var translation = computed$1(function () {
+ var temp = data;
+ return temp[props.language];
+ });
+ var isInline = computed$1(function () {
+ return !!props.inline;
+ });
+ var calendarStyle = computed$1(function () {
+ return {
+ position: isInline.value ? 'static' : undefined
+ };
+ });
+ var isOpen = computed$1(function () {
+ return showDayView.value || showMonthView.value || showYearView.value;
+ });
+ var isRtl = computed$1(function () {
+ return translation.value && translation.value.rtl === true;
+ });
+ /** ********************************** Methods *********************************** */
+
+ /**
+ * Sets the date that the calendar should open on
+ */
+
+ function setPageDate(date) {
+ if (!date) {
+ if (props.openDate) {
+ date = new Date(props.openDate);
+ } else {
+ date = new Date();
+ }
+ }
+
+ pageTimestamp.value = setDate(new Date(date), 1);
+ }
+ /**
+ * Are we allowed to show a specific picker view?
+ * @param {String} view
+ * @return {Boolean}
+ */
+
+
+ function allowedToShowView(view) {
+ var views = ['day', 'month', 'year'];
+ var minimumViewIndex = views.indexOf(props.minimumView);
+ var maximumViewIndex = views.indexOf(props.maximumView);
+ var viewIndex = views.indexOf(view);
+ return viewIndex >= minimumViewIndex && viewIndex <= maximumViewIndex;
+ }
+ /**
+ * Close all calendar layers
+ * @param {Boolean} emitEvent - emit close event
+ */
+
+
+ function close(emitEvent) {
+ showDayView.value = false;
+ showMonthView.value = false;
+ showYearView.value = false;
+
+ if (!isInline.value) {
+ if (emitEvent) {
+ if (props.autoValidate) {
+ isValid();
+ }
+
+ emit('closed');
+ }
+ }
+ }
+ /**
+ * Show the day picker
+ * @return {Boolean}
+ */
+
+
+ function showDayCalendar() {
+ if (!allowedToShowView('day')) {
+ return false;
+ }
+
+ close();
+ showDayView.value = true;
+ return true;
+ }
+ /**
+ * Show the month picker
+ * @return {Boolean}
+ */
+
+
+ function showMonthCalendar() {
+ if (!allowedToShowView('month')) {
+ return false;
+ }
+
+ close();
+ showMonthView.value = true;
+ return true;
+ }
+ /**
+ * Show the year picker
+ * @return {Boolean}
+ */
+
+
+ function showYearCalendar() {
+ if (!allowedToShowView('year')) {
+ return false;
+ }
+
+ close();
+ showYearView.value = true;
+ return true;
+ }
+ /**
+ * Sets the initial picker page view: day, month or year
+ */
+
+
+ function setInitialView() {
+ var initialView = computedInitialView.value;
+
+ if (!allowedToShowView(initialView)) {
+ throw new Error("initialView '".concat(initialView, "' cannot be rendered based on minimum '").concat(props.minimumView, "' and maximum '").concat(props.maximumView, "'"));
+ }
+
+ switch (initialView) {
+ case 'year':
+ showYearCalendar();
+ break;
+
+ case 'month':
+ showMonthCalendar();
+ break;
+
+ default:
+ showDayCalendar();
+ break;
+ }
+ }
+ /**
+ * Effectively a toggle to show/hide the calendar
+ * @return {mixed}
+ */
+
+
+ function showCalendar() {
+ if (props.disabled || isInline.value) {
+ return false;
+ }
+
+ if (isOpen.value) {
+ return close(true);
+ }
+
+ setInitialView();
+ return true;
+ }
+ /**
+ * Set the selected date
+ * @param {Number} timestamp
+ */
+
+
+ function setDate1(timestamp) {
+ var date = new Date(timestamp);
+ selectedDate.value = date;
+ setPageDate(date);
+ emit('selected', date);
+
+ if (props.modelValue) {
+ emit('update:modelValue', date);
+ } else {
+ emit('input', date);
+ }
+ }
+ /**
+ * Clear the selected date
+ */
+
+
+ function clearDate() {
+ selectedDate.value = null;
+ setPageDate();
+ emit('selected', null);
+
+ if (props.modelValue) {
+ emit('update:modelValue', null);
+ } else {
+ emit('input', null);
+ }
+
+ emit('cleared');
+ }
+ /**
+ * @param {Object} date
+ */
+
+
+ function selectDate(date) {
+ setDate1(date.timestamp);
+
+ if (!isInline.value) {
+ close(true);
+ }
+
+ resetTypedDate.value = new Date();
+ }
+ /**
+ * @param {Object} date
+ */
+
+
+ function selectDisabledDate(date) {
+ emit('selected-disabled', date);
+ }
+ /**
+ * @param {Object} month
+ */
+
+
+ function selectMonth(month) {
+ var date = new Date(month.timestamp);
+
+ if (allowedToShowView('day')) {
+ setPageDate(date);
+ showDayCalendar();
+ } else {
+ selectDate(month);
+ }
+
+ emit('changed-month', month);
+ }
+ /**
+ * @param {Object} year
+ */
+
+
+ function selectYear(year) {
+ var date = new Date(year.timestamp);
+
+ if (allowedToShowView('month')) {
+ setPageDate(date);
+ showMonthCalendar();
+ } else {
+ selectDate(year);
+ }
+
+ emit('changed-year', year);
+ }
+ /**
+ * Set the datepicker value
+ * @param {Date|String|Number|null} date
+ */
+
+
+ function setValue(date) {
+ var tempDate = date;
+
+ if (typeof date === 'string' || typeof date === 'number') {
+ var parsed = new Date(date);
+ tempDate = Number.isNaN(parsed.valueOf()) ? null : parsed;
+ }
+
+ if (!tempDate) {
+ setPageDate();
+ selectedDate.value = null;
+ return;
+ }
+
+ selectedDate.value = date;
+ setPageDate(date);
+ }
+ /**
+ * Handles a month change from the day picker
+ */
+
+
+ function handleChangedMonthFromDayPicker(date) {
+ setPageDate(date);
+ emit('changed-month', date);
+ }
+ /**
+ * Set the date from a typedDate event
+ */
+
+
+ function setTypedDate(date) {
+ setDate1(date.getTime());
+ }
+ /**
+ * Initiate the component
+ */
+
+
+ function init() {
+ if (props.value) {
+ setValue(props.value);
+ }
+
+ if (isInline.value) {
+ setInitialView();
+ }
+ }
+ /**
+ * Calls the validationHandler to check the validations,
+ * whether the state of input is valid or not.
+ *
+ * @returns boolean whether current state of the input is valid or not
+ */
+
+
+ function isValid() {
+ var response = validationHandler(selectedDate.value, props.validations);
+ validation.isValid = response.isValid;
+ validation.message = response.message;
+ return validation.isValid;
+ }
+ /**
+ * Reset Validation Message
+ */
+
+
+ function clearError() {
+ validation.message = '';
+ validation.isValid = true;
+ }
+ /** ********************************** Watchers *********************************** */
+
+
+ watch(function () {
+ return props.modelValue;
+ }, function (curr) {
+ setValue(curr);
+ });
+ watch(function () {
+ return props.value;
+ }, function (curr) {
+ setValue(curr);
+ });
+ watch(function () {
+ return props.openDate;
+ }, function () {
+ setPageDate();
+ });
+ watch(function () {
+ return props.initialView;
+ }, function () {
+ setInitialView();
+ });
+ /**
+ * test
+ */
+
+ function onClose() {
+ debugger;
+ }
+
+ init();
+ return {
+ pageTimestamp: pageTimestamp,
+ selectedDate: selectedDate,
+ showDayView: showDayView,
+ showMonthView: showMonthView,
+ showYearView: showYearView,
+ calendarHeight: calendarHeight,
+ resetTypedDate: resetTypedDate,
+ // computed
+ pageDate: pageDate,
+ translation: translation,
+ calendarStyle: calendarStyle,
+ isOpen: isOpen,
+ isInline: isInline,
+ isRtl: isRtl,
+ // methods
+ setTypedDate: setTypedDate,
+ handleChangedMonthFromDayPicker: handleChangedMonthFromDayPicker,
+ selectYear: selectYear,
+ selectMonth: selectMonth,
+ selectDisabledDate: selectDisabledDate,
+ clearDate: clearDate,
+ showCalendar: showCalendar,
+ close: close,
+ allowedToShowView: allowedToShowView,
+ showYearCalendar: showYearCalendar,
+ showMonthCalendar: showMonthCalendar,
+ setPageDate: setPageDate,
+ selectDate: selectDate,
+ validation: validation,
+ isValid: isValid,
+ clearError: clearError,
+ onClose: onClose
+ };
+ }
+});
+
+const _hoisted_1$4 = {
+ key: 0,
+ class: "dp-error"
+};
+
+function render$4(_ctx, _cache, $props, $setup, $data, $options) {
+ const _component_date_input = resolveComponent("date-input");
+ const _component_picker_day = resolveComponent("picker-day");
+ const _component_picker_month = resolveComponent("picker-month");
+ const _component_picker_year = resolveComponent("picker-year");
+
+ return (openBlock(), createBlock("div", {
+ class: ["vuejs3-datepicker", [_ctx.wrapperClass, _ctx.isRtl ? 'rtl' : '']]
+ }, [
+ createVNode(_component_date_input, {
+ selectedDate: _ctx.selectedDate,
+ resetTypedDate: _ctx.resetTypedDate,
+ format: _ctx.format,
+ translation: _ctx.translation,
+ inline: _ctx.inline,
+ id: _ctx.id,
+ name: _ctx.name,
+ openDate: _ctx.openDate,
+ placeholder: _ctx.placeholder,
+ inputClass: _ctx.inputClass,
+ typeable: _ctx.typeable,
+ clearButton: _ctx.clearButton,
+ clearButtonIcon: _ctx.clearButtonIcon,
+ calendarButton: _ctx.calendarButton,
+ calendarButtonIcon: _ctx.calendarButtonIcon,
+ calendarButtonIconContent: _ctx.calendarButtonIconContent,
+ disabled: _ctx.disabled,
+ required: _ctx.required,
+ addBootstrapClass: _ctx.addBootstrapClass,
+ "use-utc": _ctx.useUtc,
+ onShowCalendar: _ctx.showCalendar,
+ onCloseCalendar: _ctx.close,
+ onTypedDate: _ctx.setTypedDate,
+ onClearDate: _ctx.clearDate,
+ minimumView: _ctx.minimumView,
+ maximumView: _ctx.maximumView,
+ clearError: _ctx.clearError,
+ hideInput: _ctx.hideInput
+ }, {
+ afterDateInput: withCtx(() => [
+ renderSlot(_ctx.$slots, "afterDateInput")
+ ]),
+ _: 1
+ }, 8 /* PROPS */, ["selectedDate", "resetTypedDate", "format", "translation", "inline", "id", "name", "openDate", "placeholder", "inputClass", "typeable", "clearButton", "clearButtonIcon", "calendarButton", "calendarButtonIcon", "calendarButtonIconContent", "disabled", "required", "addBootstrapClass", "use-utc", "onShowCalendar", "onCloseCalendar", "onTypedDate", "onClearDate", "minimumView", "maximumView", "clearError", "hideInput"]),
+ (!_ctx.validation.isValid)
+ ? (openBlock(), createBlock("div", _hoisted_1$4, toDisplayString(_ctx.validation.message), 1 /* TEXT */))
+ : createCommentVNode("v-if", true),
+ createCommentVNode("Day View "),
+ (_ctx.allowedToShowView('day'))
+ ? (openBlock(), createBlock(_component_picker_day, {
+ key: 1,
+ pageDate: _ctx.pageDate,
+ selectedDate: _ctx.selectedDate,
+ showDayView: _ctx.showDayView,
+ fullMonthName: _ctx.fullMonthName,
+ allowedToShowView: _ctx.allowedToShowView,
+ disabledDates: _ctx.disabledDates,
+ highlighted: _ctx.highlighted,
+ calendarClass: _ctx.calendarClass,
+ calendarStyle: _ctx.calendarStyle,
+ translation: _ctx.translation,
+ pageTimestamp: _ctx.pageTimestamp,
+ isRtl: _ctx.isRtl,
+ mondayFirst: _ctx.mondayFirst,
+ dayCellContent: _ctx.dayCellContent,
+ onChangedMonth: _ctx.handleChangedMonthFromDayPicker,
+ onSelectDate: _ctx.selectDate,
+ onShowMonthCalendar: _ctx.showMonthCalendar,
+ onSelectedDisabled: _ctx.selectDisabledDate,
+ onShowYearCalendar: _ctx.showYearCalendar
+ }, {
+ beforeCalendarHeader: withCtx(() => [
+ renderSlot(_ctx.$slots, "beforeCalendarHeader")
+ ]),
+ _: 1
+ }, 8 /* PROPS */, ["pageDate", "selectedDate", "showDayView", "fullMonthName", "allowedToShowView", "disabledDates", "highlighted", "calendarClass", "calendarStyle", "translation", "pageTimestamp", "isRtl", "mondayFirst", "dayCellContent", "onChangedMonth", "onSelectDate", "onShowMonthCalendar", "onSelectedDisabled", "onShowYearCalendar"]))
+ : createCommentVNode("v-if", true),
+ createCommentVNode("Month View "),
+ (_ctx.allowedToShowView('month'))
+ ? (openBlock(), createBlock(_component_picker_month, {
+ key: 2,
+ pageDate: _ctx.pageDate,
+ selectedDate: _ctx.selectedDate,
+ showMonthView: _ctx.showMonthView,
+ allowedToShowView: _ctx.allowedToShowView,
+ disabledDates: _ctx.disabledDates,
+ calendarClass: _ctx.calendarClass,
+ calendarStyle: _ctx.calendarStyle,
+ translation: _ctx.translation,
+ isRtl: _ctx.isRtl,
+ "use-utc": _ctx.useUtc,
+ onSelectMonth: _ctx.selectMonth,
+ onShowYearCalendar: _ctx.showYearCalendar,
+ onChangedYear: _ctx.setPageDate
+ }, {
+ beforeCalendarHeader: withCtx(() => [
+ renderSlot(_ctx.$slots, "beforeCalendarHeader")
+ ]),
+ _: 1
+ }, 8 /* PROPS */, ["pageDate", "selectedDate", "showMonthView", "allowedToShowView", "disabledDates", "calendarClass", "calendarStyle", "translation", "isRtl", "use-utc", "onSelectMonth", "onShowYearCalendar", "onChangedYear"]))
+ : createCommentVNode("v-if", true),
+ createCommentVNode(" Year View "),
+ (_ctx.allowedToShowView('year'))
+ ? (openBlock(), createBlock(_component_picker_year, {
+ key: 3,
+ pageDate: _ctx.pageDate,
+ selectedDate: _ctx.selectedDate,
+ showYearView: _ctx.showYearView,
+ allowedToShowView: _ctx.allowedToShowView,
+ disabledDates: _ctx.disabledDates,
+ calendarClass: _ctx.calendarClass,
+ calendarStyle: _ctx.calendarStyle,
+ translation: _ctx.translation,
+ isRtl: _ctx.isRtl,
+ "use-utc": _ctx.useUtc,
+ onSelectYear: _ctx.selectYear,
+ onChangedDecade: _ctx.setPageDate,
+ fullMonthName: _ctx.fullMonthName
+ }, {
+ beforeCalendarHeader: withCtx(() => [
+ renderSlot(_ctx.$slots, "beforeCalendarHeader")
+ ]),
+ _: 1
+ }, 8 /* PROPS */, ["pageDate", "selectedDate", "showYearView", "allowedToShowView", "disabledDates", "calendarClass", "calendarStyle", "translation", "isRtl", "use-utc", "onSelectYear", "onChangedDecade", "fullMonthName"]))
+ : createCommentVNode("v-if", true)
+ ], 2 /* CLASS */))
+}
+
+function styleInject(css, ref) {
+ if ( ref === void 0 ) ref = {};
+ var insertAt = ref.insertAt;
+
+ if (!css || typeof document === 'undefined') { return; }
+
+ var head = document.head || document.getElementsByTagName('head')[0];
+ var style = document.createElement('style');
+ style.type = 'text/css';
+
+ if (insertAt === 'top') {
+ if (head.firstChild) {
+ head.insertBefore(style, head.firstChild);
+ } else {
+ head.appendChild(style);
+ }
+ } else {
+ head.appendChild(style);
+ }
+
+ if (style.styleSheet) {
+ style.styleSheet.cssText = css;
+ } else {
+ style.appendChild(document.createTextNode(css));
+ }
+}
+
+var css_248z = ".rtl{direction:rtl}.vuejs3-datepicker{position:relative;text-align:left}.vuejs3-datepicker *{box-sizing:border-box}.vuejs3-datepicker input{border:1px solid}.vuejs3-datepicker__calendar{position:absolute;z-index:100;background:#fff;width:300px;border:1px solid #000}.vuejs3-datepicker__calendar header{display:block;line-height:40px}.vuejs3-datepicker__calendar header span{text-align:center;width:71.42857142857143%;float:left}.vuejs3-datepicker__calendar header .next,.vuejs3-datepicker__calendar header .prev{width:14.285714285714286%;float:left;text-indent:-10000px;position:relative}.vuejs3-datepicker__calendar header .next:after,.vuejs3-datepicker__calendar header .prev:after{content:\"\";position:absolute;left:50%;top:50%;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);border:6px solid transparent}.vuejs3-datepicker__calendar header .prev:after{border-right:10px solid #000;margin-left:-5px}.vuejs3-datepicker__calendar header .prev.disabled:after{border-right:10px solid #000}.vuejs3-datepicker__calendar header .next:after{border-left:10px solid #000;margin-left:5px}.vuejs3-datepicker__calendar header .next.disabled:after{border-left:10px solid #ddd}.vuejs3-datepicker__calendar header .next:not(.disabled),.vuejs3-datepicker__calendar header .prev:not(.disabled),.vuejs3-datepicker__calendar header .up:not(.disabled){cursor:pointer}.vuejs3-datepicker__calendar header .next:not(.disabled):hover,.vuejs3-datepicker__calendar header .prev:not(.disabled):hover,.vuejs3-datepicker__calendar header .up:not(.disabled):hover{background:#eee}.vuejs3-datepicker__calendar .disabled{color:#ddd;cursor:default}.vuejs3-datepicker__calendar .flex-rtl{display:-webkit-flex;display:-ms-flexbox;display:flex;width:inherit;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.vuejs3-datepicker__calendar .cell{display:inline-block;padding:0 5px;width:14.285714285714286%;height:40px;line-height:40px;text-align:center;vertical-align:middle;border:1px solid transparent}.vuejs3-datepicker__calendar .cell:not(.blank):not(.disabled).day,.vuejs3-datepicker__calendar .cell:not(.blank):not(.disabled).month,.vuejs3-datepicker__calendar .cell:not(.blank):not(.disabled).year{cursor:pointer}.vuejs3-datepicker__calendar .cell:not(.blank):not(.disabled).day:hover,.vuejs3-datepicker__calendar .cell:not(.blank):not(.disabled).month:hover,.vuejs3-datepicker__calendar .cell:not(.blank):not(.disabled).year:hover{border:1px solid #4bd}.vuejs3-datepicker__calendar .cell.selected,.vuejs3-datepicker__calendar .cell.selected.highlighted,.vuejs3-datepicker__calendar .cell.selected:hover{background:#4bd}.vuejs3-datepicker__calendar .cell.highlighted{background:#cae5ed}.vuejs3-datepicker__calendar .cell.highlighted.disabled{color:#a3a3a3}.vuejs3-datepicker__calendar .cell.grey{color:#888}.vuejs3-datepicker__calendar .cell.grey:hover{background:inherit}.vuejs3-datepicker__calendar .cell.day-header{font-size:75%;white-space:nowrap;cursor:inherit}.vuejs3-datepicker__calendar .cell.day-header:hover{background:inherit}.vuejs3-datepicker__calendar .month,.vuejs3-datepicker__calendar .year{width:33.333%}.vuejs3-datepicker__calendar-button,.vuejs3-datepicker__clear-button{cursor:pointer;font-style:normal}.vuejs3-datepicker__calendar-button.disabled,.vuejs3-datepicker__clear-button.disabled{color:#999;cursor:default}.dp-error{color:red;font-size:12px}.backdrop{position:fixed;display:none;width:100%;height:100%;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.5);z-index:2;cursor:pointer}";
+styleInject(css_248z);
+
+script$4.render = render$4;
+script$4.__file = "src/components/datepicker/Datepicker.vue";
+
+var script$5 = defineComponent({
+ name: 'App-Home',
+ components: {
+ 'appdate-picker': script$4
+ },
+ data: function data() {
+ return {
+ defaultValue: new Date(),
+ dateValue: new Date(),
+ disabledDates: {
+ to: new Date(2020, 11, 16),
+ from: new Date(2020, 10, 17)
+ },
+ highlightDates: {
+ to: new Date(2020, 12, 16),
+ from: new Date(2020, 11, 17)
+ },
+ initialDate: new Date(),
+ dateinput: new Date(),
+ validations: [{
+ name: 'required',
+ message: 'Oh, we can’t proceed without value. Do your bit?'
+ }],
+ emptyDate: null
+ };
+ },
+ computed: {},
+ methods: {
+ handleCalendarClose: function handleCalendarClose(payload) {
+ console.log('close', payload);
+ },
+ handleSelectDate: function handleSelectDate(payload) {
+ console.log('select', payload);
+ },
+ handleChangedMonth: function handleChangedMonth(payload) {
+ console.log(payload);
+ },
+ handleChangedYear: function handleChangedYear(payload) {
+ console.log(payload);
+ },
+ handleChangedDay: function handleChangedDay(payload) {
+ console.log(payload);
+ },
+ dateSelected: function dateSelected(payload) {
+ console.log(payload);
+ },
+ checkDatePicker: function checkDatePicker() {
+ var isValid = this.$refs.inputRef.isValid();
+ var selectedDate = this.$refs.inputRef.selectedDate;
+ console.log(isValid);
+ console.log(selectedDate);
+ },
+ changedVmodel: function changedVmodel() {
+ this.dateinput = new Date('2020-12-12');
+ },
+ changeDefaultValue: function changeDefaultValue() {
+ this.defaultValue = new Date('2021-10-10');
+ }
+ }
+});
+
+const _withId = /*#__PURE__*/withScopeId("data-v-7ba5bd90");
+
+pushScopeId("data-v-7ba5bd90");
+const _hoisted_1$5 = { id: "app" };
+const _hoisted_2$1 = { class: "ind" };
+const _hoisted_3$1 = /*#__PURE__*/createVNode("label", null, "Typeable", -1 /* HOISTED */);
+const _hoisted_4$1 = { class: "wrapper" };
+const _hoisted_5$1 = { class: "ind" };
+const _hoisted_6 = /*#__PURE__*/createVNode("label", null, "With Validations", -1 /* HOISTED */);
+const _hoisted_7 = { class: "ind" };
+const _hoisted_8 = /*#__PURE__*/createVNode("label", null, "With Programmatic Access", -1 /* HOISTED */);
+const _hoisted_9 = { class: "ind" };
+const _hoisted_10 = /*#__PURE__*/createVNode("label", null, "Default Value", -1 /* HOISTED */);
+const _hoisted_11 = { class: "ind" };
+const _hoisted_12 = /*#__PURE__*/createVNode("label", null, " Disabled: from-to ", -1 /* HOISTED */);
+const _hoisted_13 = { class: "ind" };
+const _hoisted_14 = /*#__PURE__*/createVNode("label", null, " Disabled Dates : Array ", -1 /* HOISTED */);
+const _hoisted_15 = { class: "ind" };
+const _hoisted_16 = /*#__PURE__*/createVNode("label", null, "Highlighted Dates", -1 /* HOISTED */);
+const _hoisted_17 = {
+ class: "ind",
+ style: {"flex-direction":"column"}
+};
+const _hoisted_18 = { style: {"justify-content":"space-between","display":"flex","width":"100%"} };
+const _hoisted_19 = /*#__PURE__*/createVNode("label", null, "V Model", -1 /* HOISTED */);
+const _hoisted_20 = /*#__PURE__*/createVNode("br", null, null, -1 /* HOISTED */);
+const _hoisted_21 = { class: "ind" };
+const _hoisted_22 = /*#__PURE__*/createVNode("label", null, "Inline ", -1 /* HOISTED */);
+const _hoisted_23 = { class: "ind" };
+const _hoisted_24 = /*#__PURE__*/createVNode("label", null, "Day View", -1 /* HOISTED */);
+const _hoisted_25 = { class: "ind" };
+const _hoisted_26 = /*#__PURE__*/createVNode("label", null, "Month View", -1 /* HOISTED */);
+const _hoisted_27 = { class: "ind" };
+const _hoisted_28 = /*#__PURE__*/createVNode("label", null, "Year View", -1 /* HOISTED */);
+const _hoisted_29 = { class: "ind" };
+const _hoisted_30 = /*#__PURE__*/createVNode("label", null, "Year View", -1 /* HOISTED */);
+popScopeId();
+
+const render$5 = /*#__PURE__*/_withId(function render(_ctx, _cache, $props, $setup, $data, $options) {
+ const _component_appdate_picker = resolveComponent("appdate-picker");
+
+ return (openBlock(), createBlock("div", _hoisted_1$5, [
+ createVNode("div", _hoisted_2$1, [
+ _hoisted_3$1,
+ createVNode(_component_appdate_picker, {
+ "full-month-name": true,
+ "input-class": "customClass",
+ placeholder: "select date",
+ typeable: true,
+ hideInput: false,
+ onInput: _ctx.dateSelected
+ }, null, 8 /* PROPS */, ["onInput"])
+ ]),
+ createVNode("div", _hoisted_4$1, [
+ createVNode("div", _hoisted_5$1, [
+ _hoisted_6,
+ createVNode(_component_appdate_picker, {
+ autoValidate: true,
+ onSelected: _ctx.handleSelectDate,
+ highlighted: _ctx.highlightDates,
+ value: _ctx.emptyDate,
+ onClosed: _ctx.handleCalendarClose,
+ validations: _ctx.validations
+ }, null, 8 /* PROPS */, ["onSelected", "highlighted", "value", "onClosed", "validations"])
+ ]),
+ createVNode("div", _hoisted_7, [
+ _hoisted_8,
+ createVNode(_component_appdate_picker, {
+ ref: "inputRef",
+ autoValidate: true,
+ onSelected: _ctx.handleSelectDate,
+ highlighted: _ctx.highlightDates,
+ value: _ctx.emptyDate,
+ onClosed: _ctx.handleCalendarClose,
+ validations: _ctx.validations
+ }, null, 8 /* PROPS */, ["onSelected", "highlighted", "value", "onClosed", "validations"]),
+ createVNode("button", {
+ onClick: _cache[1] || (_cache[1] = (...args) => (_ctx.checkDatePicker(...args)))
+ }, "Check DatePicker")
+ ]),
+ createVNode("div", _hoisted_9, [
+ _hoisted_10,
+ createVNode(_component_appdate_picker, {
+ onInput: _ctx.dateSelected,
+ value: _ctx.defaultValue,
+ "disabled-dates": {
+ dates: [new Date(2020, 10, 16), new Date(2020, 10, 17), new Date(2020, 10, 18)],
+ },
+ highlighted: {
+ to: new Date(2020, 12, 16),
+ from: new Date(2020, 11, 17),
+ }
+ }, null, 8 /* PROPS */, ["onInput", "value", "disabled-dates", "highlighted"]),
+ createVNode("button", {
+ onClick: _cache[2] || (_cache[2] = (...args) => (_ctx.changeDefaultValue(...args)))
+ }, "Change Default Value")
+ ]),
+ createVNode("div", _hoisted_11, [
+ _hoisted_12,
+ createVNode(_component_appdate_picker, {
+ onInput: _ctx.dateSelected,
+ "disabled-dates": {
+ to: new Date(2020, 10, 5),
+ from: new Date(2020, 10, 16),
+ }
+ }, null, 8 /* PROPS */, ["onInput", "disabled-dates"])
+ ]),
+ createVNode("div", _hoisted_13, [
+ _hoisted_14,
+ createVNode(_component_appdate_picker, {
+ onInput: _ctx.dateSelected,
+ "disabled-dates": {
+ dates: [new Date(2020, 11, 16), new Date(2020, 11, 17), new Date(2020, 11, 18),
+ new Date(2020, 11, 19),new Date(2020, 11, 20)],
+ }
+ }, null, 8 /* PROPS */, ["onInput", "disabled-dates"])
+ ])
+ ]),
+ createVNode("div", _hoisted_15, [
+ _hoisted_16,
+ createVNode(_component_appdate_picker, {
+ onInput: _ctx.dateSelected,
+ highlighted: {
+ to: new Date(2020, 11, 16),
+ from: new Date(2020, 10, 17),
+ }
+ }, null, 8 /* PROPS */, ["onInput", "highlighted"])
+ ]),
+ createVNode("div", _hoisted_17, [
+ createVNode("div", _hoisted_18, [
+ _hoisted_19,
+ createVNode(_component_appdate_picker, {
+ modelValue: _ctx.dateinput,
+ "onUpdate:modelValue": [
+ _cache[3] || (_cache[3] = $event => (_ctx.dateinput = $event)),
+ _ctx.dateSelected
+ ]
+ }, null, 8 /* PROPS */, ["modelValue", "onUpdate:modelValue"])
+ ]),
+ _hoisted_20,
+ createVNode("div", null, toDisplayString(_ctx.dateinput), 1 /* TEXT */),
+ createVNode("button", {
+ onClick: _cache[4] || (_cache[4] = (...args) => (_ctx.changedVmodel(...args)))
+ }, "Change Date Input")
+ ]),
+ createVNode("div", _hoisted_21, [
+ _hoisted_22,
+ createVNode(_component_appdate_picker, {
+ inline: true,
+ onInput: _ctx.dateSelected
+ }, null, 8 /* PROPS */, ["onInput"])
+ ]),
+ createVNode("div", _hoisted_23, [
+ _hoisted_24,
+ createVNode(_component_appdate_picker, {
+ "minimum-view": "day",
+ "maximum-view": "day",
+ onInput: _ctx.handleChangedDay
+ }, null, 8 /* PROPS */, ["onInput"])
+ ]),
+ createVNode("div", _hoisted_25, [
+ _hoisted_26,
+ createVNode(_component_appdate_picker, {
+ value: new Date(),
+ "minimum-view": "month",
+ "maximum-view": "month",
+ onChangedMonth: _ctx.handleChangedMonth
+ }, null, 8 /* PROPS */, ["value", "onChangedMonth"])
+ ]),
+ createVNode("div", _hoisted_27, [
+ _hoisted_28,
+ createVNode(_component_appdate_picker, {
+ value: new Date(),
+ "minimum-view": "year",
+ "maximum-view": "year",
+ onChangedYear: _ctx.handleChangedYear
+ }, null, 8 /* PROPS */, ["value", "onChangedYear"])
+ ]),
+ createVNode("div", _hoisted_29, [
+ _hoisted_30,
+ createVNode(_component_appdate_picker, {
+ value: new Date(),
+ "minimum-view": "year",
+ "maximum-view": "year",
+ onChangedYear: _ctx.handleChangedYear
+ }, null, 8 /* PROPS */, ["value", "onChangedYear"])
+ ])
+ ]))
+});
+
+var css_248z$1 = ".ind[data-v-7ba5bd90]{-webkit-align-items:center;-ms-flex-align:center;align-items:center;max-width:400px;padding:20px;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}.ind[data-v-7ba5bd90],.wrapper[data-v-7ba5bd90]{display:-webkit-flex;display:-ms-flexbox;display:flex}.wrapper[data-v-7ba5bd90]{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}";
+styleInject(css_248z$1);
+
+script$5.render = render$5;
+script$5.__scopeId = "data-v-7ba5bd90";
+script$5.__file = "src/App.vue";
+
+var app = createApp(script$5);
+app.mount('#app');
diff --git a/example/index.html b/example/index.html
new file mode 100644
index 0000000..5ee5aa6
--- /dev/null
+++ b/example/index.html
@@ -0,0 +1,11 @@
+
+
+
+
+
Vue.js Datepicker
+
+
+
+
+
+
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..566ac8d
--- /dev/null
+++ b/package.json
@@ -0,0 +1,104 @@
+{
+ "name": "vue3-datepicker",
+ "version": "0.0.1",
+ "files": [
+ "dist/*",
+ "src/*",
+ "types/*"
+ ],
+ "sideEffects": [
+ "*.css",
+ "*.scss"
+ ],
+ "main": "dist/datepicker.cjs.js",
+ "module": "dist/datepicker.esm.js",
+ "unpkg": "dist/datepicker.min.js",
+ "scripts": {
+ "serve": "vue-cli-service serve",
+ "lint": "vue-cli-service lint --fix",
+ "dev": "rollup -c build/rollup-dev.config.js --watch",
+ "build": "rimraf dist && rollup --config ./build/rollup.config.js",
+ "test": "jest --config tests/unit/jest.conf.js --coverage"
+ },
+ "dependencies": {
+ "vue": "^3.0.0"
+ },
+ "devDependencies": {
+ "@babel/preset-env": "^7.12.1",
+ "@babel/preset-typescript": "^7.12.0",
+ "@rollup/plugin-alias": "2.2.0",
+ "@rollup/plugin-babel": "^5.2.1",
+ "@rollup/plugin-commonjs": "^15.1.0",
+ "@rollup/plugin-image": "^2.0.5",
+ "@rollup/plugin-node-resolve": "^9.0.0",
+ "@rollup/plugin-replace": "^2.3.3",
+ "@rollup/plugin-url": "^5.0.1",
+ "@types/jest": "^24.0.19",
+ "@typescript-eslint/eslint-plugin": "^2.26.0",
+ "@typescript-eslint/parser": "^2.26.0",
+ "@vue/cli-plugin-babel": "~4.3.0",
+ "@vue/cli-plugin-e2e-cypress": "~4.5.0",
+ "@vue/cli-plugin-eslint": "~4.3.0",
+ "@vue/cli-plugin-pwa": "~4.5.0",
+ "@vue/cli-plugin-router": "~4.5.0",
+ "@vue/cli-plugin-typescript": "~4.3.0",
+ "@vue/cli-plugin-unit-jest": "~4.5.0",
+ "@vue/cli-service": "~4.3.0",
+ "@vue/compiler-sfc": "^3.0.0-beta.1",
+ "@vue/eslint-config-airbnb": "^5.0.2",
+ "@vue/eslint-config-prettier": "^6.0.0",
+ "@vue/eslint-config-typescript": "^5.0.2",
+ "@vue/test-utils": "^2.0.0-beta.8",
+ "autoprefixer": "^9.8.6",
+ "cross-env": "7.0.2",
+ "cssnano": "^4.1.10",
+ "eslint": "^6.7.2",
+ "eslint-plugin-import": "^2.20.2",
+ "eslint-plugin-prettier": "^3.1.3",
+ "eslint-plugin-vue": "^7.0.0-alpha.0",
+ "husky": "^4.3.0",
+ "jest": "^26.6.3",
+ "lint-staged": ">=10",
+ "postcss": "^8.1.1",
+ "postcss-import": "^12.0.1",
+ "postcss-nested": "^4.2.1",
+ "postcss-simple-vars": "^5.0.2",
+ "rimraf": "^3.0.2",
+ "rollup": "^2.30.0",
+ "rollup-plugin-analyzer": "^3.3.0",
+ "rollup-plugin-babel": "^4.4.0",
+ "rollup-plugin-commonjs": "^10.1.0",
+ "rollup-plugin-css-only": "^2.1.0",
+ "rollup-plugin-livereload": "^2.0.0",
+ "rollup-plugin-node-resolve": "^5.2.0",
+ "rollup-plugin-postcss": "^3.1.8",
+ "rollup-plugin-serve": "^1.1.0",
+ "rollup-plugin-terser": "^7.0.2",
+ "rollup-plugin-typescript": "^1.0.1",
+ "rollup-plugin-typescript2": "^0.28.0",
+ "rollup-plugin-vue": "^6.0.0-beta.10",
+ "typescript": "^3.9.5",
+ "url-loader": "^4.1.0",
+ "vue-cli-plugin-vue-next": "~0.1.4",
+ "vue-jest": "^5.0.0-alpha.5",
+ "vue-loader": "^15.9.3",
+ "webpack-cli": "^3.3.12"
+ },
+ "husky": {
+ "hooks": {
+ "pre-commit": "lint-staged"
+ }
+ },
+ "lint-staged": {
+ "*.ts": "eslint --cache --fix",
+ "*.vue": "eslint --cache --fix"
+ },
+ "keywords": [
+ "ui framework",
+ "component framework",
+ "ui library",
+ "component library",
+ "vue framework"
+ ],
+ "types": "./types/index.d.ts"
+}
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 0000000..39cfba1
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,15 @@
+const path = require('path');
+
+module.exports = {
+ plugins: [
+ require('postcss-import')({}),
+ require('postcss-simple-vars')({}),
+ require('postcss-nested')({}),
+ require('autoprefixer')({
+ overrideBrowserslist: '> 1%, IE 6, Explorer >= 10, Safari >= 7',
+ }),
+ require('cssnano')({
+ zindex: false,
+ }),
+ ],
+};
diff --git a/public/assets/icons/chevron-down.svg b/public/assets/icons/chevron-down.svg
new file mode 100644
index 0000000..278c6a3
--- /dev/null
+++ b/public/assets/icons/chevron-down.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/favicon.ico b/public/favicon.ico
new file mode 100644
index 0000000..df36fcf
Binary files /dev/null and b/public/favicon.ico differ
diff --git a/public/index.html b/public/index.html
new file mode 100644
index 0000000..4123528
--- /dev/null
+++ b/public/index.html
@@ -0,0 +1,17 @@
+
+
+
+
+
+
+
+
<%= htmlWebpackPlugin.options.title %>
+
+
+
+
+
+
+
diff --git a/src/App.vue b/src/App.vue
new file mode 100644
index 0000000..5477629
--- /dev/null
+++ b/src/App.vue
@@ -0,0 +1,193 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{{dateinput}}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/assets/calendar.svg b/src/assets/calendar.svg
new file mode 100644
index 0000000..d41af3b
--- /dev/null
+++ b/src/assets/calendar.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/components/datepicker/DateInput.vue b/src/components/datepicker/DateInput.vue
new file mode 100644
index 0000000..cb4e83f
--- /dev/null
+++ b/src/components/datepicker/DateInput.vue
@@ -0,0 +1,262 @@
+
+
+
+
+
+
+ {{ calendarButtonIconContent }}
+ …
+
+
+
+
+
+
+
+
+
+
+
+ ×
+
+
+
+
Default
+
+
+
diff --git a/src/components/datepicker/Datepicker.vue b/src/components/datepicker/Datepicker.vue
new file mode 100644
index 0000000..51334e1
--- /dev/null
+++ b/src/components/datepicker/Datepicker.vue
@@ -0,0 +1,661 @@
+
+
+
+
+
+
+
+
{{ validation.message }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/datepicker/PickerDay.vue b/src/components/datepicker/PickerDay.vue
new file mode 100644
index 0000000..0fd1fbc
--- /dev/null
+++ b/src/components/datepicker/PickerDay.vue
@@ -0,0 +1,515 @@
+
+
+
+
+ {{currYearName}}
+ {{getDayName}} {{getDisplayDate}} {{monthName}}
+
+
+ <
+ {{ isYmd ? currYearName : currMonthName }} {{ isYmd ? currMonthName : currYearName }}
+ >
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/datepicker/PickerMonth.vue b/src/components/datepicker/PickerMonth.vue
new file mode 100644
index 0000000..78a468c
--- /dev/null
+++ b/src/components/datepicker/PickerMonth.vue
@@ -0,0 +1,308 @@
+
+
+
+
+ {{currYearName}}
+ {{getDayName}} {{getDisplayDate}} {{monthName}}
+
+
+
+ <
+ {{
+ pageYearName
+ }}
+ >
+
+
{{ month.month }}
+
+
+
diff --git a/src/components/datepicker/PickerYear.vue b/src/components/datepicker/PickerYear.vue
new file mode 100644
index 0000000..6fec5fe
--- /dev/null
+++ b/src/components/datepicker/PickerYear.vue
@@ -0,0 +1,290 @@
+
+
+
+
+ {{currYearName}}
+ {{getDayName}} {{getDisplayDate}} {{monthName}}
+
+
+ <
+ {{ getPageDecade }}
+ >
+
+
{{ year.year }}
+
+
diff --git a/src/components/datepicker/datepicker.css b/src/components/datepicker/datepicker.css
new file mode 100644
index 0000000..55e002a
--- /dev/null
+++ b/src/components/datepicker/datepicker.css
@@ -0,0 +1,196 @@
+$black: #000;
+$blue: #4bd;
+$white: #fff;
+
+.rtl {
+ direction: rtl;
+}
+
+.vuejs3-datepicker {
+ position: relative;
+ text-align: left;
+}
+
+.vuejs3-datepicker * {
+ box-sizing: border-box;
+}
+
+.vuejs3-datepicker {
+ input {
+ border: 1px solid;
+ }
+}
+.vuejs3-datepicker__calendar {
+ position: absolute;
+ z-index: 100;
+ background: $white;
+ width: 300px;
+ border: 1px solid $black;
+}
+
+.vuejs3-datepicker__calendar header {
+ display: block;
+ line-height: 40px;
+}
+
+.vuejs3-datepicker__calendar header span {
+ text-align: center;
+ width: 71.42857142857143%;
+ float: left;
+}
+
+.vuejs3-datepicker__calendar header .prev,
+.vuejs3-datepicker__calendar header .next {
+ width: 14.285714285714286%;
+ float: left;
+ text-indent: -10000px;
+ position: relative;
+}
+
+.vuejs3-datepicker__calendar header .prev:after,
+.vuejs3-datepicker__calendar header .next:after {
+ content: '';
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ transform: translateX(-50%) translateY(-50%);
+ border: 6px solid transparent;
+}
+
+.vuejs3-datepicker__calendar header .prev:after {
+ border-right: 10px solid $black;
+ margin-left: -5px;
+}
+
+.vuejs3-datepicker__calendar header .prev.disabled:after {
+ border-right: 10px solid $black;
+}
+
+.vuejs3-datepicker__calendar header .next:after {
+ border-left: 10px solid $black;
+ margin-left: 5px;
+}
+
+.vuejs3-datepicker__calendar header .next.disabled:after {
+ border-left: 10px solid #ddd;
+}
+
+.vuejs3-datepicker__calendar header .prev:not(.disabled),
+.vuejs3-datepicker__calendar header .next:not(.disabled),
+.vuejs3-datepicker__calendar header .up:not(.disabled) {
+ cursor: pointer;
+}
+
+.vuejs3-datepicker__calendar header .prev:not(.disabled):hover,
+.vuejs3-datepicker__calendar header .next:not(.disabled):hover,
+.vuejs3-datepicker__calendar header .up:not(.disabled):hover {
+ background: #eee;
+}
+
+.vuejs3-datepicker__calendar .disabled {
+ color: #ddd;
+ cursor: default;
+}
+
+.vuejs3-datepicker__calendar .flex-rtl {
+ display: flex;
+ width: inherit;
+ flex-wrap: wrap;
+}
+
+.vuejs3-datepicker__calendar .cell {
+ display: inline-block;
+ padding: 0 5px;
+ width: 14.285714285714286%;
+ height: 40px;
+ line-height: 40px;
+ text-align: center;
+ vertical-align: middle;
+ border: 1px solid transparent;
+}
+
+.vuejs3-datepicker__calendar .cell:not(.blank):not(.disabled).day,
+.vuejs3-datepicker__calendar .cell:not(.blank):not(.disabled).month,
+.vuejs3-datepicker__calendar .cell:not(.blank):not(.disabled).year {
+ cursor: pointer;
+}
+
+.vuejs3-datepicker__calendar .cell:not(.blank):not(.disabled).day:hover,
+.vuejs3-datepicker__calendar .cell:not(.blank):not(.disabled).month:hover,
+.vuejs3-datepicker__calendar .cell:not(.blank):not(.disabled).year:hover {
+ border: 1px solid $blue;
+}
+
+.vuejs3-datepicker__calendar .cell.selected {
+ background: $blue;
+}
+
+.vuejs3-datepicker__calendar .cell.selected:hover {
+ background: $blue;
+}
+
+.vuejs3-datepicker__calendar .cell.selected.highlighted {
+ background: $blue;
+}
+
+.vuejs3-datepicker__calendar .cell.highlighted {
+ background: #cae5ed;
+}
+
+.vuejs3-datepicker__calendar .cell.highlighted.disabled {
+ color: #a3a3a3;
+}
+
+.vuejs3-datepicker__calendar .cell.grey {
+ color: #888;
+}
+
+.vuejs3-datepicker__calendar .cell.grey:hover {
+ background: inherit;
+}
+
+.vuejs3-datepicker__calendar .cell.day-header {
+ font-size: 75%;
+ white-space: nowrap;
+ cursor: inherit;
+}
+
+.vuejs3-datepicker__calendar .cell.day-header:hover {
+ background: inherit;
+}
+
+.vuejs3-datepicker__calendar .month,
+.vuejs3-datepicker__calendar .year {
+ width: 33.333%;
+}
+
+.vuejs3-datepicker__clear-button,
+.vuejs3-datepicker__calendar-button {
+ cursor: pointer;
+ font-style: normal;
+}
+
+.vuejs3-datepicker__clear-button.disabled,
+.vuejs3-datepicker__calendar-button.disabled {
+ color: #999;
+ cursor: default;
+}
+
+.dp-error {
+ color: red;
+ font-size: 12px
+}
+
+.backdrop{
+ position: fixed; /* Sit on top of the page content */
+ display: none; /* Hidden by default */
+ width: 100%; /* Full width (cover the whole page) */
+ height: 100%; /* Full height (cover the whole page) */
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: rgba(0,0,0,0.5); /* Black background with opacity */
+ z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
+ cursor: pointer; /* Add a pointer on hover */
+}
\ No newline at end of file
diff --git a/src/components/datepicker/locale/index.ts b/src/components/datepicker/locale/index.ts
new file mode 100644
index 0000000..9998b70
--- /dev/null
+++ b/src/components/datepicker/locale/index.ts
@@ -0,0 +1,74 @@
+
+const af = (): any => {
+ const langName = 'Afrikaans'
+ const monthFullName = [
+ 'Januarie',
+ 'Februarie',
+ 'Maart',
+ 'April',
+ 'Mei',
+ 'Junie',
+ 'Julie',
+ 'Augustus',
+ 'September',
+ 'Oktober',
+ 'November',
+ 'Desember',
+ ]
+ const shortName = ['Jan', 'Feb', 'Mrt', 'Apr', 'Mei', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Des']
+ const days = ['So.', 'Ma.', 'Di.', 'Wo.', 'Do.', 'Vr.', 'Sa.']
+ const rtl = false;
+ const ymd = false;
+ const yearSuffix = '';
+ return {
+ months: monthFullName,
+ monthsAbbr: shortName,
+ days,
+ yearSuffix,
+ ymd,
+ rtl,
+ langName,
+ // tbd: need fullName of days
+ daysNames: days
+ }
+};
+
+const en = (): any => {
+ const langName = 'English'
+ const monthFullName = [
+ 'January',
+ 'February',
+ 'March',
+ 'April',
+ 'May',
+ 'June',
+ 'July',
+ 'August',
+ 'September',
+ 'October',
+ 'November',
+ 'December',
+ ]
+ const shortName = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+ const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+ const daysNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
+ const rtl = false;
+ const ymd = false;
+ const yearSuffix = '';
+ return {
+ months: monthFullName,
+ monthsAbbr: shortName,
+ days,
+ language: langName,
+ yearSuffix,
+ ymd,
+ rtl,
+ langName,
+ daysNames
+ }
+}
+
+export const data = {
+ af: af(),
+ en: en()
+}
diff --git a/src/components/datepicker/utils/DateUtils.ts b/src/components/datepicker/utils/DateUtils.ts
new file mode 100644
index 0000000..f10267c
--- /dev/null
+++ b/src/components/datepicker/utils/DateUtils.ts
@@ -0,0 +1,279 @@
+// import en from '@/components/datepicker/locale/translations/en';
+
+/**
+ * Returns the full year, using UTC or not
+ * @param {Date} date
+ */
+export const getFullYear = (date: Date, useUtc = false): number => {
+ return useUtc ? date.getUTCFullYear() : date.getFullYear();
+};
+
+/**
+ * Returns the month, using UTC or not
+ * @param {Date} date
+ */
+export const getMonth = (date: Date, useUtc = false): number => {
+ return useUtc ? date.getUTCMonth() : date.getMonth();
+};
+
+/**
+ * Returns the date, using UTC or not
+ * @param {Date} date
+ */
+export const getDate = (date: Date, useUtc = false): number => {
+ return useUtc ? date.getUTCDate() : date.getDate();
+};
+
+/**
+ * Returns the day, using UTC or not
+ * @param {Date} date
+ */
+export const getDay = (date: Date, useUtc = false): number => {
+ return useUtc ? date.getUTCDay() : date.getDay();
+};
+
+/**
+ * Returns the hours, using UTC or not
+ * @param {Date} date
+ */
+export const getHours = (date: Date, useUtc = false): number => {
+ return useUtc ? date.getUTCHours() : date.getHours();
+};
+
+/**
+ * Returns the minutes, using UTC or not
+ * @param {Date} date
+ */
+export const getMinutes = (date: Date, useUtc = false): number => {
+ return useUtc ? date.getUTCMinutes() : date.getMinutes();
+};
+
+/**
+ * Sets the full year, using UTC or not
+ * @param {Date} date
+ */
+export const setFullYear = (date: Date, value: any, useUtc = false): number => {
+ return useUtc ? date.setUTCFullYear(value) : date.setFullYear(value);
+};
+
+/**
+ * Sets the month, using UTC or not
+ * @param {Date} date
+ */
+export const setMonth = (date: Date, value: any, useUtc = false): number => {
+ return useUtc ? date.setUTCMonth(value) : date.setMonth(value);
+};
+
+/**
+ * Sets the date, using UTC or not
+ * @param {Date} date
+ * @param {Number} value
+ */
+export const setDate = (date: Date, value: any, useUtc = false): number => {
+ return useUtc ? date.setUTCDate(value) : date.setDate(value);
+};
+
+/**
+ * Check if date1 is equivalent to date2, without comparing the time
+ * @see https://stackoverflow.com/a/6202196/4455925
+ * @param {Date} date1
+ * @param {Date} date2
+ */
+export const compareDates = (
+ date1: { getTime: () => string | number | Date },
+ date2: { getTime: () => string | number | Date },
+ useUtc = true
+): boolean => {
+ const d1 = new Date(date1.getTime());
+ const d2 = new Date(date2.getTime());
+
+ if (useUtc) {
+ d1.setUTCHours(0, 0, 0, 0);
+ d2.setUTCHours(0, 0, 0, 0);
+ } else {
+ d1.setHours(0, 0, 0, 0);
+ d2.setHours(0, 0, 0, 0);
+ }
+ return d1.getTime() === d2.getTime();
+};
+
+/**
+ * Validates a date object
+ * @param {Date} date - an object instantiated with the new Date constructor
+ * @return {Boolean}
+ */
+export const isValidDate = (date: { getTime: () => number }): boolean => {
+ if (Object.prototype.toString.call(date) !== '[object Date]') {
+ return false;
+ }
+ return !Number.isNaN(date.getTime());
+};
+
+/**
+ * Return abbreviated week day name
+ * @param {Date}
+ * @param {Array}
+ * @return {String}
+ */
+export const getDayNameAbbr = (date: any, days: { [x: string]: any }): number => {
+ if (typeof date !== 'object') {
+ throw TypeError('Invalid Type');
+ }
+ return days[getDay(date)];
+};
+
+/**
+ * Return name of the month
+ * @param {Number|Date}
+ * @param {Array}
+ * @return {String}
+ */
+export const getMonthName = (month: string | number, months: any[]): number => {
+ if (!months) {
+ throw Error('missing 2nd parameter Months array');
+ }
+ if (typeof month === 'object') {
+ return months[getMonth(month)];
+ }
+ if (typeof month === 'number') {
+ return months[month];
+ }
+ throw TypeError('Invalid type');
+};
+
+/**
+ * Return an abbreviated version of the month
+ * @param {Number|Date}
+ * @return {String}
+ */
+export const getMonthNameAbbr = (month: string | number, monthsAbbr: any[]): number => {
+ if (!monthsAbbr) {
+ throw Error('missing 2nd paramter Months array');
+ }
+ if (typeof month === 'object') {
+ return monthsAbbr[getMonth(month)];
+ }
+ if (typeof month === 'number') {
+ return monthsAbbr[month];
+ }
+ throw TypeError('Invalid type');
+};
+
+/**
+ * Alternative get total number of days in month
+ * @param {Number} year
+ * @param {Number} m
+ * @return {Number}
+ */
+
+export const daysInMonth = (year: number, month: string | number): number => {
+ if (/8|3|5|10/.test(month as string)) {
+ return 30;
+ }
+ if (month === 1) {
+ if ((!(year % 4) && year % 100) || !(year % 400)) {
+ return 29;
+ }
+ return 28;
+ }
+ return 31;
+
+ // return /8|3|5|10/.test(month as string)
+ // ? 30
+ // : month === 1
+ // ? (!(year % 4) && year % 100) || !(year % 400)
+ // ? 29
+ // : 28
+ // : 31;
+};
+
+/**
+ * Get nth suffix for date
+ * @param {Number} day
+ * @return {String}
+ */
+export const getNthSuffix = (day: any): string => {
+ switch (day) {
+ case 1:
+ case 21:
+ case 31:
+ return 'st';
+ case 2:
+ case 22:
+ return 'nd';
+ case 3:
+ case 23:
+ return 'rd';
+ default:
+ return 'th';
+ }
+};
+
+/**
+ * Formats date object
+ * @param {Date}
+ * @param {String}
+ * @param {Object}
+ * @return {String}
+ */
+export const formatDate = (
+ date: Date,
+ format: {
+ replace: (
+ arg0: RegExp,
+ arg1: string
+ ) => {
+ (): any;
+ new (): any;
+ replace: {
+ (arg0: RegExp, arg1: any): {
+ (): any;
+ new (): any;
+ replace: { (arg0: RegExp, arg1: number): string; new (): any };
+ };
+ new (): any;
+ };
+ };
+ },
+ translation: { months: any; monthsAbbr: any; days: any }
+): string => {
+ const year = getFullYear(date);
+ const month = getMonth(date) + 1;
+ const day = getDate(date);
+ const str = format
+ .replace(/dd/, `0${day}`.slice(-2))
+ .replace(/d/, day)
+ .replace(/yyyy/, year)
+ .replace(/yy/, String(year).slice(2))
+ .replace(/MMMM/, getMonthName(getMonth(date), translation.months) as any)
+ .replace(/MMM/, getMonthNameAbbr(getMonth(date), translation.monthsAbbr) as any)
+ .replace(/MM/, `0${month}`.slice(-2))
+ .replace(/M(?!a|ä|e)/, month.toString())
+ .replace(/su/, getNthSuffix(getDate(date)))
+ .replace(/D(?!e|é|i)/, getDayNameAbbr(date, translation.days) as any);
+ return str;
+};
+
+/**
+ * Creates an array of dates for each day in between two dates.
+ * @param {Date} start
+ * @param {Date} end
+ * @return {Array}
+ */
+export const createDateArray = (start: string | number | Date, end: number): Date[] => {
+ const dates = [];
+ while (start <= end) {
+ dates.push(new Date(start));
+ start = setDate(new Date(start), getDate(new Date(start)) + 1);
+ }
+ return dates;
+};
+
+/**
+ * method used as a prop validator for input values
+ * @param {*} val
+ * @return {Boolean}
+ */
+export const validateDateInput = (val: any): boolean => {
+ return val === null || val instanceof Date || typeof val === 'string' || typeof val === 'number';
+};
diff --git a/src/directives/click-outside.ts b/src/directives/click-outside.ts
new file mode 100644
index 0000000..7a1d6a3
--- /dev/null
+++ b/src/directives/click-outside.ts
@@ -0,0 +1,70 @@
+/* eslint-disable */
+const EVENTS = ['click'];
+
+const instances: any = [];
+
+const ClickOutside = {
+ instances,
+ beforeMount: bind,
+ update: (el : any, binding : any) => {
+ if (JSON.stringify(binding.value) === JSON.stringify(binding.oldValue)) return;
+ bind(el, binding);
+ },
+ unmounted: unbind,
+};
+
+function bind (el: any, { value }: {value : any}) {
+ unbind(el);
+
+ const bindingValue = value as any;
+ const isFunction = typeof bindingValue === 'function';
+ const isObject = typeof bindingValue === 'object';
+
+ if (!isFunction && !isObject) return;
+
+ const isActive = !(bindingValue.isActive === false);
+ if (!isActive) return;
+
+ const handler = isFunction ? bindingValue : bindingValue.handler;
+ const instance = createInstance({ el, handler });
+
+ instance.eventHandlers.forEach(({ event, handler }) =>
+ setTimeout(() => document.addEventListener(event, handler, false), 0),
+ );
+ instances.push(instance);
+}
+
+function unbind (el: HTMLElement) {
+ const instanceIndex = instances.findIndex(( instance : any) => instance.el === el);
+ if (instanceIndex === -1) return;
+
+ const instance = instances[instanceIndex];
+ instance.eventHandlers.forEach(({ event, handler }: { event: any, handler: any}) =>
+ document.removeEventListener(event as any, handler, false),
+ );
+ instances.splice(instanceIndex, 1);
+}
+
+// --------------------
+// Helpers
+// --------------------
+function createInstance ({ el, handler }: { el: HTMLElement, handler: any}) {
+ return {
+ el,
+ eventHandlers: EVENTS.map(eventName => ({
+ event: eventName,
+ handler: (event: Event) => onEvent({ event, el, handler }),
+ })),
+ };
+}
+
+function onEvent ({ event, el, handler }: { event: any, el: Element, handler: any }) {
+ debugger
+ const path = event.path || (event.composedPath ? event.composedPath() : undefined);
+ if (path ? path.indexOf(el) < 0 : !el.contains(event.target)) {
+ return handler(event, el);
+ }
+};
+
+export default ClickOutside;
+/* eslint-disable */
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
new file mode 100644
index 0000000..dc44b25
--- /dev/null
+++ b/src/main.ts
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './App.vue';
+const app = createApp(App)
+app.mount('#app');
diff --git a/src/shared/enum.ts b/src/shared/enum.ts
new file mode 100644
index 0000000..c882462
--- /dev/null
+++ b/src/shared/enum.ts
@@ -0,0 +1,15 @@
+export enum ValidationMessages {
+ required = 'Please enter this value',
+}
+
+export enum VALIDATORS {
+ REQUIRED = 'required',
+}
+
+export enum KeyName {
+ Enter = 'Enter',
+ ArrowUp = 'ArrowUp',
+ ArrowDown = 'ArrowDown',
+ Escape = 'Escape',
+ Tab = 'Tab',
+}
diff --git a/src/shared/interfaces.ts b/src/shared/interfaces.ts
new file mode 100644
index 0000000..885719a
--- /dev/null
+++ b/src/shared/interfaces.ts
@@ -0,0 +1,36 @@
+export interface IValidation {
+ isValid: boolean;
+ message: string;
+}
+
+export interface IValidationRules {
+ required: (value: any) => boolean;
+}
+
+export interface IValidationMessages {
+ required: string;
+ email: string;
+ mobile: string;
+ integer: string;
+ regex: string;
+ inverseRegex: string;
+ maxValue: string;
+ minValue: string;
+ maxLength: string;
+ minLength: string;
+ pan: string;
+ aadhar: string;
+ gstin: string;
+ pincode: string;
+ alphaNumeric: string;
+ alphaNumericWithSpace: string;
+ multipleOf: string;
+}
+
+export interface IValidationRule {
+ name: string;
+ message?: string;
+ minValue?: number;
+ maxValue?: number;
+ expression?: string;
+}
diff --git a/src/shared/utils.ts b/src/shared/utils.ts
new file mode 100644
index 0000000..cb0efd0
--- /dev/null
+++ b/src/shared/utils.ts
@@ -0,0 +1,7 @@
+/**
+ * Returns true if data is null or undefined
+ * @param data
+ */
+export const isNullUndefined = (data: any): boolean => {
+ return data === null || data === undefined;
+};
diff --git a/src/shared/validations.ts b/src/shared/validations.ts
new file mode 100644
index 0000000..0a35965
--- /dev/null
+++ b/src/shared/validations.ts
@@ -0,0 +1,76 @@
+/* eslint-disable comma-dangle */
+import { isNullUndefined } from './utils';
+import { ValidationMessages } from './enum';
+import { IValidation, IValidationRules, IValidationRule } from './interfaces';
+
+// rules
+/**
+ * Required validation
+ * @param value
+ */
+const required = (value: any): boolean => {
+ if (isNullUndefined(value)) {
+ return false;
+ }
+ if (typeof value === 'object' && !Object.keys(value).length) {
+ if (Object.prototype.toString.call(value) === '[object Date]' && value) {
+ return true;
+ }
+ return false;
+ }
+ if (typeof value === 'string' && value.trim() === '') {
+ return false;
+ }
+ if (value.constructor === Array && value.length <= 0) {
+ return false;
+ }
+ return true;
+};
+
+const validationRules: IValidationRules = {
+ required
+};
+
+/**
+ *
+ * @param validationName
+ * @param validationObj
+ * @param value
+ */
+const callValidator = (validationName: string, validationObj?: any, value?: any): boolean => {
+ let isValid = true;
+ switch (validationName) {
+ default:
+ if ((validationRules as any)[validationName]) {
+ isValid = (validationRules as any)[validationName](value);
+ }
+ break;
+ }
+ return isValid;
+};
+
+// helper validation functions
+/**
+ *
+ * @param value
+ * @param validationArray
+ */
+export const validationHandler = (value: any, validationArray: IValidationRule[]): IValidation => {
+ const validationObject: IValidation = { isValid: true, message: '' };
+
+ for (const validation of validationArray) {
+ validationObject.isValid = callValidator(validation.name, validation, value);
+ validationObject.message = '';
+ if (!validationObject.isValid) {
+ // checking if custom message is passed if not then use standard msgs
+ if (validation.message) {
+ validationObject.message = validation.message;
+ } else {
+ validationObject.message = (ValidationMessages as any)[validation.name];
+ }
+ // break if any one validation is failed
+ break;
+ }
+ }
+ return validationObject;
+};
diff --git a/src/shims-vue.d.ts b/src/shims-vue.d.ts
new file mode 100644
index 0000000..798e8fc
--- /dev/null
+++ b/src/shims-vue.d.ts
@@ -0,0 +1,5 @@
+declare module '*.vue' {
+ import { defineComponent } from 'vue';
+ const component: ReturnType
;
+ export default component;
+}
diff --git a/tests/unit/.eslintrc b/tests/unit/.eslintrc
new file mode 100644
index 0000000..54ee6a7
--- /dev/null
+++ b/tests/unit/.eslintrc
@@ -0,0 +1,9 @@
+{
+ "env": {
+ "jest": true
+ },
+ "globals": {
+ "expect": true,
+ "sinon": true
+ }
+}
diff --git a/tests/unit/jest.conf.js b/tests/unit/jest.conf.js
new file mode 100644
index 0000000..0fff168
--- /dev/null
+++ b/tests/unit/jest.conf.js
@@ -0,0 +1,18 @@
+const path = require('path');
+
+module.exports = {
+ preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel',
+ rootDir: path.resolve(__dirname, '../../'),
+ moduleFileExtensions: ['ts', 'tsx', 'js', 'json', 'vue'],
+ moduleNameMapper: {
+ '^@/(.*)$': '/src/$1',
+ },
+ transform: {
+ '^.+\\.js$': 'babel-jest',
+ '.*\\.(vue)$': 'vue-jest',
+ '^.+\\ts$': 'ts-jest',
+ },
+ setupFiles: ['/tests/unit/setup'],
+ coverageDirectory: '/tests/unit/coverage',
+ collectCoverageFrom: ['src/**/*.{ts,js,vue}', '!src/locale/translations/**/*.ts'],
+};
diff --git a/tests/unit/setup.js b/tests/unit/setup.js
new file mode 100644
index 0000000..4fb5c82
--- /dev/null
+++ b/tests/unit/setup.js
@@ -0,0 +1,3 @@
+// import Vue from 'vue'
+
+// Vue.config.productionTip = false
diff --git a/tests/unit/specs/DateUtils.spec.js b/tests/unit/specs/DateUtils.spec.js
new file mode 100644
index 0000000..e11ede8
--- /dev/null
+++ b/tests/unit/specs/DateUtils.spec.js
@@ -0,0 +1,200 @@
+import {
+ isValidDate,
+ getMonthName,
+ getMonthNameAbbr,
+ getDayNameAbbr,
+ setFullYear,
+ setMonth,
+ setDate,
+ getMinutes,
+ getHours,
+ getDay,
+ daysInMonth,
+ formatDate,
+ createDateArray,
+ getFullYear,
+ getMonth,
+ getDate,
+} from '@/components/appdatepicker/utils/DateUtils';
+import { en } from '@/components/appdatepicker/locale';
+
+describe('DateUtils', () => {
+ it('should detect invalid date object', () => {
+ expect(isValidDate(null)).toEqual(false);
+ expect(isValidDate(123)).toEqual(false);
+ expect(isValidDate('abc')).toEqual(false);
+ expect(isValidDate({})).toEqual(false);
+ expect(isValidDate(new Date())).toEqual(true);
+ });
+
+ it('should give correct days in a month', () => {
+ expect(daysInMonth(2020, 0)).toEqual(31);
+ expect(daysInMonth(2020, 1)).toEqual(29);
+ expect(daysInMonth(2015, 1)).toEqual(28);
+ expect(daysInMonth(2020, 2)).toEqual(31);
+ expect(daysInMonth(2020, 3)).toEqual(30);
+ expect(daysInMonth(2020, 4)).toEqual(31);
+ expect(daysInMonth(2020, 5)).toEqual(30);
+ expect(daysInMonth(2020, 6)).toEqual(31);
+ expect(daysInMonth(2020, 7)).toEqual(31);
+ expect(daysInMonth(2020, 8)).toEqual(30);
+ expect(daysInMonth(2020, 9)).toEqual(31);
+ expect(daysInMonth(2020, 10)).toEqual(30);
+ expect(daysInMonth(2020, 11)).toEqual(31);
+ });
+
+ it('should format date strings correctly in English', () => {
+ expect(formatDate(new Date(2020, 0, 1), 'd MMMM yyyy')).toEqual('1 January 2020');
+ expect(formatDate(new Date(2020, 0, 9), 'dd MMM yyyy')).toEqual('09 Jan 2020');
+ expect(formatDate(new Date(2020, 0, 9), 'dd MMM yy')).toEqual('09 Jan 20');
+ expect(formatDate(new Date(2020, 2, 9), 'yyyy-MM-dd')).toEqual('2020-03-09');
+ expect(formatDate(new Date(2020, 2, 9), 'dsu MMMM yyyy')).toEqual('9th March 2020');
+ expect(formatDate(new Date(2020, 2, 1), 'dsu MMMM yyyy')).toEqual('1st March 2020');
+ expect(formatDate(new Date(2020, 2, 2), 'dsu MMMM yyyy')).toEqual('2nd March 2020');
+ expect(formatDate(new Date(2020, 2, 3), 'dsu MMMM yyyy')).toEqual('3rd March 2020');
+ expect(formatDate(new Date(2020, 7, 2), 'D dsu MMMM yyyy')).toEqual('Sun 2nd August 2020');
+ expect(formatDate(new Date(2020, 8, 1), 'D dsu MMMM yyyy')).toEqual('Tue 1st September 2020');
+ expect(formatDate(new Date(2020, 7, 7), 'D dsu MMMM yyyy')).toEqual('Fri 7th August 2020');
+ expect(formatDate(new Date(2020, 11, 2), 'dd MMM yyyy')).toEqual('02 Dec 2020');
+ });
+
+ it('should give the correct day', () => {
+ expect(formatDate(new Date(2020, 0, 1), 'D')).toEqual('Wed');
+ });
+
+ it('can create an array of dates', () => {
+ const start = new Date(2020, 9, 12);
+ const end = new Date(2020, 9, 16);
+ const dates = createDateArray(start, end);
+ expect(dates.length).toEqual(5);
+ let day = 12;
+ dates.forEach((date) => {
+ expect(date.getDate()).toEqual(day);
+ day++;
+ });
+ });
+
+ it('gives days in a month', () => {
+ expect(daysInMonth(2020, 0)).toEqual(31);
+ expect(daysInMonth(2020, 1)).toEqual(29);
+ expect(daysInMonth(2020, 2)).toEqual(31);
+ });
+
+ it('getDayNameAbbr moans if date is not a Date object', () => {
+ expect(() => getDayNameAbbr(123, en.months)).toThrow(TypeError);
+ });
+
+ it('getMonthName moans if date is not a Date object', () => {
+ expect(() => getMonthName('string', en.months)).toThrow(TypeError);
+ });
+
+ it('getMonthName complains if missing months array', () => {
+ expect(() => getMonthName(new Date())).toThrow(Error);
+ });
+
+ it('getMonthName accepts a number', () => {
+ expect(getMonthName(3, en.months)).toEqual('April');
+ });
+
+ it('getMonthName accepts a Date object', () => {
+ expect(getMonthName(new Date(2016, 9, 10), en.months)).toEqual('October');
+ });
+
+ it('getMonthNameAbbr moans if date is not a Date object', () => {
+ expect(() => getMonthNameAbbr('abc', en.months)).toThrow(TypeError);
+ });
+
+ it('getMonthNameAbbr complains if missing months array', () => {
+ expect(() => getMonthNameAbbr(new Date())).toThrow(Error);
+ });
+
+ it('getMonthNameAbbr accepts a Date object', () => {
+ expect(getMonthNameAbbr(new Date(2016, 9, 10), en.monthsAbbr)).toEqual('Oct');
+ });
+
+ it('getMonthName accepts a number', () => {
+ expect(getMonthNameAbbr(3, en.monthsAbbr)).toEqual('Apr');
+ });
+});
+
+describe('daysInMonth', () => {
+ it('should give the correct days in a month', () => {
+ expect(daysInMonth(2017, 0)).toEqual(31); // Jan
+ expect(daysInMonth(2017, 1)).toEqual(28); // Feb
+ expect(daysInMonth(2017, 2)).toEqual(31); // Mar
+ expect(daysInMonth(2017, 3)).toEqual(30); // Apr
+ expect(daysInMonth(2017, 4)).toEqual(31); // May
+ expect(daysInMonth(2017, 5)).toEqual(30); // Jun
+ expect(daysInMonth(2017, 6)).toEqual(31); // Jul
+ expect(daysInMonth(2017, 7)).toEqual(31); // Aug
+ expect(daysInMonth(2017, 8)).toEqual(30); // Sep
+ expect(daysInMonth(2017, 9)).toEqual(31); // Oct
+ expect(daysInMonth(2017, 10)).toEqual(30); // Nov
+ expect(daysInMonth(2017, 11)).toEqual(31); // Dec
+ });
+});
+
+const getAmbiguousDate = (_) => {
+ const timezoneOffset = new Date().getTimezoneOffset() / 60;
+ const ambiguousHour = 25 - timezoneOffset;
+ const ambiguousDate = new Date(2018, 11, 31, ambiguousHour);
+ return ambiguousDate;
+};
+
+describe('UTC functions', () => {
+ // const utcUtils = makeDateUtils(true)
+
+ it('getFullYear', () => {
+ const date = getAmbiguousDate();
+ expect(getFullYear(date)).toEqual(date.getFullYear());
+ expect(getFullYear(date, true)).toEqual(date.getUTCFullYear());
+ });
+
+ it('getMonth', () => {
+ const date = getAmbiguousDate();
+ expect(getMonth(date)).toEqual(date.getMonth());
+ expect(getMonth(date, true)).toEqual(date.getUTCMonth());
+ });
+
+ it('getDate', () => {
+ const date = getAmbiguousDate();
+ expect(getDate(date)).toEqual(date.getDate());
+ expect(getDate(date, true)).toEqual(date.getUTCDate());
+ });
+
+ it('getDay', () => {
+ const date = getAmbiguousDate();
+ expect(getDay(date)).toEqual(date.getDay());
+ expect(getDay(date, true)).toEqual(date.getUTCDay());
+ });
+
+ it('getHours', () => {
+ const date = getAmbiguousDate();
+ expect(getHours(date)).toEqual(date.getHours());
+ expect(getHours(date, true)).toEqual(date.getUTCHours());
+ });
+
+ it('getMinutes', () => {
+ const date = getAmbiguousDate();
+ expect(getMinutes(date)).toEqual(date.getMinutes());
+ expect(getMinutes(date, true)).toEqual(date.getUTCMinutes());
+ });
+
+ it('setFullYear', () => {
+ const date = getAmbiguousDate();
+ expect(setFullYear(date, 2018)).toEqual(date.setFullYear(2018));
+ expect(setFullYear(date, 2018, true)).toEqual(date.setUTCFullYear(2018));
+ });
+
+ it('setMonth', () => {
+ const date = getAmbiguousDate();
+ expect(setMonth(date, 11)).toEqual(date.setMonth(11));
+ expect(setMonth(date, 11, true)).toEqual(date.setUTCMonth(11));
+ });
+
+ it('setDate', () => {
+ const date = getAmbiguousDate();
+ expect(setDate(date, 31)).toEqual(date.setDate(31));
+ expect(setDate(date, 31, true)).toEqual(date.setUTCDate(31));
+ });
+});
diff --git a/testumdbuild/app.js b/testumdbuild/app.js
new file mode 100644
index 0000000..18af9be
--- /dev/null
+++ b/testumdbuild/app.js
@@ -0,0 +1,43 @@
+const disabledDates = {
+ dates: [new Date(2020, 11, 16), new Date(2020, 11, 17), new Date(2020, 11, 18)],
+}
+const highlightDates = {
+ to: new Date(2020, 12, 16),
+ from: new Date(2020, 11, 17),
+}
+const initialDate = new Date()
+
+const app = Vue.createApp({
+ data() {
+ return {
+ courseGoalA: 'Finish the course and learn Vue!',
+ courseGoalB: 'Master Vue and build amazing apps!',
+ vueLink: 'https://vuejs.org/',
+ disabledDates: disabledDates,
+ initialDate: initialDate,
+ highlightDates:highlightDates,
+ month: "month"
+ };
+ },
+ methods: {
+ selectMonth(payload){
+ debugger
+ },
+ outputGoal() {
+ const randomNumber = Math.random();
+ if (randomNumber < 0.5) {
+ return this.courseGoalA;
+ } else {
+ return this.courseGoalB;
+ }
+ }
+ },
+ mounted() {
+ document.addEventListener('changed-month', ()=>{
+ debugger
+ })
+ },
+ });
+
+ app.component('appdate-picker',Appdatepicker);
+ app.mount('#user-goal');
\ No newline at end of file
diff --git a/testumdbuild/appdatepicker.min.js b/testumdbuild/appdatepicker.min.js
new file mode 100644
index 0000000..c3400f2
--- /dev/null
+++ b/testumdbuild/appdatepicker.min.js
@@ -0,0 +1 @@
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("vue")):"function"==typeof define&&define.amd?define(["vue"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).Appdatepicker=t(e.Vue)}(this,(function(e){"use strict";function t(e){return(t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function a(e,t){for(var a=0;a1&&void 0!==arguments[1]&&arguments[1];return t?e.getUTCFullYear():e.getFullYear()},o=function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1];return t?e.getUTCMonth():e.getMonth()},l=function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1];return t?e.getUTCDate():e.getDate()},i=function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1];return t?e.getUTCDay():e.getDay()},d=function(e,t){var a=arguments.length>2&&void 0!==arguments[2]&&arguments[2];return a?e.setUTCFullYear(t):e.setFullYear(t)},c=function(e,t){var a=arguments.length>2&&void 0!==arguments[2]&&arguments[2];return a?e.setUTCMonth(t):e.setMonth(t)},s=function(e,t){var a=arguments.length>2&&void 0!==arguments[2]&&arguments[2];return a?e.setUTCDate(t):e.setDate(t)},u=function(e,t){var a=!(arguments.length>2&&void 0!==arguments[2])||arguments[2],n=new Date(e.getTime()),r=new Date(t.getTime());return a?(n.setUTCHours(0,0,0,0),r.setUTCHours(0,0,0,0)):(n.setHours(0,0,0,0),r.setHours(0,0,0,0)),n.getTime()===r.getTime()},p=function(e,a){if(!a)throw Error("missing 2nd parameter Months array");if("object"===t(e))return a[o(e)];if("number"==typeof e)return a[e];throw TypeError("Invalid type")},h=function(e,a){if(!a)throw Error("missing 2nd paramter Months array");if("object"===t(e))return a[o(e)];if("number"==typeof e)return a[e];throw TypeError("Invalid type")},f=function(e,a,d){d=d||n;var c=r(e),s=o(e)+1,u=l(e);return a.replace(/dd/,"0".concat(u).slice(-2)).replace(/d/,u).replace(/yyyy/,c).replace(/yy/,String(c).slice(2)).replace(/MMMM/,p(o(e),d.months)).replace(/MMM/,h(o(e),d.monthsAbbr)).replace(/MM/,"0".concat(s).slice(-2)).replace(/M(?!a|ä|e)/,s.toString()).replace(/su/,function(e){switch(e){case 1:case 21:case 31:return"st";case 2:case 22:return"nd";case 3:case 23:return"rd";default:return"th"}}(l(e))).replace(/D(?!e|é|i)/,function(e,a){if("object"!==t(e))throw TypeError("Invalid Type");return a[i(e)]}(e,d.days))},y=e.defineComponent({name:"DateInput",props:{selectedDate:{type:Date},resetTypedDate:{type:[Date]},format:{type:[String,Function]},translation:{type:Object},inline:{type:Boolean},id:{type:String},name:{type:String},refName:{type:String},openDate:{type:Date},placeholder:{type:String},inputClass:{type:String},clearButton:{type:Boolean},clearButtonIcon:{type:String},calendarButton:{type:Boolean},calendarButtonIcon:{type:String},calendarButtonIconContent:{type:String},disabled:{type:Boolean},required:{type:Boolean},typeable:{type:Boolean},bootstrapStyling:{type:Boolean},useUtc:{type:Boolean}},setup:function(t,a){var n=a.emit,r=e.ref(!1),o=e.computed((function(){return t.bootstrapStyling?"string"==typeof t.inputClass?[t.inputClass,"form-control"].join(" "):{"form-control":!0}:t.inputClass})),l=e.computed((function(){return t.selectedDate?"function"==typeof t.format?t.format(t.selectedDate):f(new Date(t.selectedDate),t.format,t.translation):null}));return e.watch((function(){return t.resetTypedDate}),(function(){r.value=!1})),e.onMounted((function(){})),{typedDate:r,computedInputClass:o,formattedValue:l,showCalendar:function(){n("show-calendar")},parseTypedDate:function(e){if([27,13].includes(e.keyCode),t.typeable){var a=Date.parse(l.value);Number.isNaN(a)||(r.value=!0,n("typed-date",new Date(l.value)))}},inputBlurred:function(){t.typeable&&Number.isNaN(Date.parse(l.value))&&(n("clear-date"),r.value=!1),n("close-calendar",!0)}}}});const m={key:0},g={key:0};y.render=function(t,a,n,r,o,l){return e.openBlock(),e.createBlock("div",{class:{"input-group":t.bootstrapStyling}},[e.createCommentVNode(" Calendar Button "),t.calendarButton?(e.openBlock(),e.createBlock("span",{key:0,class:["vdp-datepicker__calendar-button",{"input-group-prepend":t.bootstrapStyling}],onClick:a[1]||(a[1]=(...e)=>t.showCalendar(...e)),style:{"cursor:not-allowed;":t.disabled}},[e.createVNode("span",{class:{"input-group-text":t.bootstrapStyling}},[e.createVNode("i",{class:t.calendarButtonIcon},[e.createTextVNode(e.toDisplayString(t.calendarButtonIconContent)+" ",1),t.calendarButtonIcon?e.createCommentVNode("v-if",!0):(e.openBlock(),e.createBlock("span",m,"…"))],2)],2)],6)):e.createCommentVNode("v-if",!0),e.createCommentVNode(" Input "),e.createVNode("input",{type:t.inline?"hidden":"text",class:t.computedInputClass,name:t.name,ref:t.refName,id:t.id,value:t.formattedValue,"open-date":t.openDate,placeholder:t.placeholder,"clear-button":t.clearButton,disabled:t.disabled,required:t.required,readonly:!t.typeable,onClick:a[2]||(a[2]=(...e)=>t.showCalendar(...e)),onKeyup:a[3]||(a[3]=(...e)=>t.parseTypedDate(...e)),onBlur:a[4]||(a[4]=(...e)=>t.inputBlurred(...e)),autocomplete:"off"},null,42,["type","name","id","value","open-date","placeholder","clear-button","disabled","required","readonly"]),e.createCommentVNode(" Clear Button "),t.clearButton&&t.selectedDate?(e.openBlock(),e.createBlock("span",{key:1,class:["vdp-datepicker__clear-button",{"input-group-append":t.bootstrapStyling}],onClick:a[5]||(a[5]=e=>t.clearDate())},[e.createVNode("span",{class:{"input-group-text":t.bootstrapStyling}},[e.createVNode("i",{class:t.clearButtonIcon},[t.clearButtonIcon?e.createCommentVNode("v-if",!0):(e.openBlock(),e.createBlock("span",g,"×"))],2)],2)],2)):e.createCommentVNode("v-if",!0),e.renderSlot(t.$slots,"afterDateInput")],2)},y.__file="src/components/appdatepicker/DateInput.vue";var v=e.defineComponent({name:"PickerDay",props:{showDayView:{type:Boolean},selectedDate:{type:Date,default:new Date},pageDate:{type:Date,default:new Date},pageTimestamp:{type:Number},fullMonthName:{type:Boolean},allowedToShowView:{type:Function},dayCellContent:{type:Function,default:function(e){return e.date}},disabledDates:{type:Object},highlighted:{type:Object},calendarClass:{type:[String,Object,Array]},calendarStyle:{type:Object},translation:{type:Object},isRtl:{type:Boolean},mondayFirst:{type:Boolean},useUtc:{type:Boolean}},setup:function(t,a){var n=a.emit;function d(e){var a=t.pageDate;c(a,o(a)+e),n("changed-month",a)}function p(){var e=t.disabledDates;if(!e||!e.to)return!1;var a=t.pageDate;return o(e.to)>=o(a)&&r(e.to)>=r(a)}function f(){var e=t.disabledDates;if(!e||!e.from)return!1;var a=t.pageDate;return o(e.from)<=o(a)&&r(e.from)<=r(a)}function y(e){return!!t.selectedDate&&u(t.selectedDate,e)}function m(e){var a=!1,n=t.disabledDates;return n?void 0!==n&&(void 0!==n.dates&&n.dates.forEach((function(t){u(e,t)&&(a=!0)})),void 0!==n.to&&n.to&&en.from&&(a=!0),void 0!==n.ranges&&n.ranges.forEach((function(t){void 0!==t.from&&t.from&&void 0!==t.to&&t.to&&et.from&&(a=!0)})),void 0!==n.days&&-1!==n.days.indexOf(i(e))&&(a=!0),void 0!==n.daysOfMonth&&-1!==n.daysOfMonth.indexOf(l(e))&&(a=!0),"function"==typeof n.customPredictor&&n.customPredictor(e)&&(a=!0),a):a}function g(e){return void 0!==e&&e}function v(e){var a=t.highlighted;if((!a||!a.includeDisabled)&&m(e))return!1;var n=!1;return void 0!==a&&(void 0!==a.dates&&a.dates.forEach((function(t){u(e,t)&&(n=!0)})),g(a.from)&&g(a.to)&&(n=e>=a.from&&e<=a.to),void 0!==a.days&&-1!==a.days.indexOf(i(e))&&(n=!0),void 0!==a.daysOfMonth&&-1!==a.daysOfMonth.indexOf(l(e))&&(n=!0),"function"==typeof a.customPredictor&&a.customPredictor(e)&&(n=!0),n)}function D(e){var a=t.highlighted;return!!a&&(v(e)&&a.to instanceof Date&&r(a.to)===r(e)&&o(a.to)===o(e)&&l(a.to)===l(e))}var b=e.computed((function(){if(t.mondayFirst){var e=t.translation&&t.translation.days&&t.translation.days.slice();return e.push(e.shift()),e}return t.translation&&t.translation.days})),w=e.computed((function(){var e=t.pageDate,a=t.useUtc?new Date(Date.UTC(e.getUTCFullYear(),e.getUTCMonth(),1)):new Date(e.getFullYear(),e.getMonth(),1,e.getHours(),e.getMinutes());return t.mondayFirst?i(a)>0?i(a)-1:6:i(a)})),k=e.computed((function(){for(var e,a,n,d,c=t.pageDate,p=[],h=t.useUtc?new Date(Date.UTC(c.getUTCFullYear(),c.getUTCMonth(),1)):new Date(c.getFullYear(),c.getMonth(),1,c.getHours(),c.getMinutes()),f=(e=r(h),a=o(h),/8|3|5|10/.test(a)?30:1===a?(e%4||!(e%100))&&e%400?28:29:31),g=0;g{}),["prevent"]))},[e.renderSlot(t.$slots,"beforeCalendarHeader"),e.createVNode("header",null,[e.createVNode("span",{onClick:a[1]||(a[1]=e=>t.isRtl?t.nextMonth():t.previousMonth()),class:["prev",{disabled:t.isLeftNavDisabled}]},"<",2),e.createVNode("span",{class:["day__month_btn",t.allowedToShowView("month")?"up":""],onClick:a[2]||(a[2]=(...e)=>t.showMonthCalendar(...e))},e.toDisplayString(t.isYmd?t.currYearName:t.currMonthName)+" "+e.toDisplayString(t.isYmd?t.currMonthName:t.currYearName),3),e.createVNode("span",{onClick:a[3]||(a[3]=e=>t.isRtl?t.previousMonth():t.nextMonth()),class:["next",{disabled:t.isRightNavDisabled}]},">",2)]),e.createVNode("div",{class:t.isRtl?"flex-rtl":""},[(e.openBlock(!0),e.createBlock(e.Fragment,null,e.renderList(t.daysOfWeek,(t=>(e.openBlock(),e.createBlock("span",{class:"cell day-header",key:t.timestamp},e.toDisplayString(t),1)))),128)),t.blankDays>0?(e.openBlock(!0),e.createBlock(e.Fragment,{key:0},e.renderList(t.blankDays,(t=>(e.openBlock(),e.createBlock("span",{class:"cell day blank",key:t.timestamp})))),128)):e.createCommentVNode("v-if",!0),(e.openBlock(!0),e.createBlock(e.Fragment,null,e.renderList(t.days,(a=>(e.openBlock(),e.createBlock("span",{class:["cell day",t.dayClasses(a)],key:a.timestamp,innerHTML:t.dayCellContent(a),onClick:e=>t.selectDate(a)},null,10,["innerHTML","onClick"])))),128))],2)],38)),[[e.vShow,t.showDayView]])},v.__file="src/components/appdatepicker/PickerDay.vue";var D=e.defineComponent({name:"PickerMonth",props:{showMonthView:{type:Boolean},selectedDate:{type:Date,default:new Date},pageDate:{type:Date,default:new Date},pageTimestamp:{type:Number},disabledDates:{type:Object},calendarClass:{type:[String,Object,Array]},calendarStyle:{type:Object},translation:{type:Object},isRtl:{type:Boolean},allowedToShowView:{type:Function},useUtc:{type:Boolean}},setup:function(t,a){var n=a.emit;function l(e){var a=t.pageDate;d(a,r(a)+e),n("changed-year",a)}function i(){var e=t.disabledDates;return!(!e||!e.to)&&r(e.to)>=r(t.pageDate)}function s(){var e=t.disabledDates;return!(!e||!e.from)&&r(e.from)<=r(t.pageDate)}function u(e){var a=t.selectedDate;return a&&r(a)===r(e)&&o(a)===o(e)}function h(e){var a=!1,n=t.disabledDates;return!!n&&(void 0!==n&&(void 0!==n.to&&n.to&&(o(e)o(n.from)&&r(e)>=r(n.from)||r(e)>r(n.from))&&(a=!0),"function"==typeof n.customPredictor&&n.customPredictor(e)&&(a=!0),a))}var f=e.computed((function(){for(var e=t.pageDate,a=[],n=t.useUtc?new Date(Date.UTC(e.getUTCFullYear(),0,e.getUTCDate())):new Date(e.getFullYear(),0,e.getDate(),e.getHours(),e.getMinutes()),r=0;r<12;r+=1)a.push({month:p(r,t.translation&&t.translation.months),timestamp:n.getTime(),isSelected:u(n),isDisabled:h(n)}),c(n,o(n)+1);return a})),y=e.computed((function(){var e=t.translation&&t.translation.yearSuffix;return"".concat(r(t.pageDate)).concat(e)})),m=e.computed((function(){return t.isRtl?s():i()}));return{isRightNavDisabled:e.computed((function(){return t.isRtl?i():s()})),isLeftNavDisabled:m,pageYearName:y,months:f,selectMonth:function(e){e.isDisabled||n("select-month",e)},previousYear:function(){i()||l(-1)},nextYear:function(){s()||l(1)},showYearCalendar:function(){n("show-year-calendar")}}}});D.render=function(t,a,n,r,o,l){return e.withDirectives((e.openBlock(),e.createBlock("div",{class:[t.calendarClass,"vdp-datepicker__calendar"],style:t.calendarStyle,onMousedown:a[4]||(a[4]=e.withModifiers((()=>{}),["prevent"]))},[e.renderSlot(t.$slots,"beforeCalendarHeader"),e.createVNode("header",null,[e.createVNode("span",{onClick:a[1]||(a[1]=e=>t.isRtl?t.nextYear():t.previousYear()),class:["prev",{disabled:t.isLeftNavDisabled}]},"<",2),e.createVNode("span",{class:["month__year_btn",t.allowedToShowView("year")?"up":""],onClick:a[2]||(a[2]=(...e)=>t.showYearCalendar(...e))},e.toDisplayString(t.pageYearName),3),e.createVNode("span",{onClick:a[3]||(a[3]=e=>t.isRtl?t.previousYear():t.nextYear()),class:["next",{disabled:t.isRightNavDisabled}]},">",2)]),(e.openBlock(!0),e.createBlock(e.Fragment,null,e.renderList(t.months,(a=>(e.openBlock(),e.createBlock("span",{class:["cell month",{selected:a.isSelected,disabled:a.isDisabled}],key:a.timestamp,onClick:e.withModifiers((e=>t.selectMonth(a)),["stop"])},e.toDisplayString(a.month),11,["onClick"])))),128))],38)),[[e.vShow,t.showMonthView]])},D.__file="src/components/appdatepicker/PickerMonth.vue";var b=e.defineComponent({name:"PickerYear",props:{showYearView:{type:Boolean},selectedDate:{type:Date,default:new Date},pageDate:{type:Date,default:new Date},pageTimestamp:{type:Number},disabledDates:{type:Object},highlighted:{type:Object},calendarClass:{type:[String,Object,Array]},calendarStyle:{type:Object},translation:{type:Object},isRtl:{type:Boolean},allowedToShowView:{type:Function},useUtc:{type:Boolean}},setup:function(t,a){var n=a.emit;function o(e){var a=t.pageDate;d(a,r(a)+e),n("changed-decade",a)}function l(){var e=t.disabledDates;return!(!e||!e.to)&&r(e.to)>10*Math.floor(r(t.pageDate)/10)-1}function i(){var e=t.disabledDates;return!(!e||!e.from)&&r(e.from)<10*Math.ceil(r(t.pageDate)/10)}function c(e){var a=!1;return!(void 0===t.disabledDates||!t.disabledDates)&&(void 0!==t.disabledDates.to&&t.disabledDates.to&&r(e)r(t.disabledDates.from)&&(a=!0),"function"==typeof t.disabledDates.customPredictor&&t.disabledDates.customPredictor(e)&&(a=!0),a)}var s=e.computed((function(){for(var e,a=t.pageDate,n=[],o=t.useUtc?new Date(Date.UTC(10*Math.floor(a.getUTCFullYear()/10),a.getUTCMonth(),a.getUTCDate())):new Date(10*Math.floor(a.getFullYear()/10),a.getMonth(),a.getDate(),a.getHours(),a.getMinutes()),l=0;l<10;l+=1)n.push({year:r(o),timestamp:o.getTime(),isSelected:(e=o,!!t.selectedDate&&r(t.selectedDate)===r(e)),isDisabled:c(o)}),d(o,r(o)+1);return n})),u=e.computed((function(){var e=10*Math.floor(r(t.pageDate)/10),a=e+9,n=t.translation&&t.translation.yearSuffix;return"".concat(e," - ").concat(a).concat(n)})),p=e.computed((function(){return t.isRtl?i():l()}));return{isRightNavDisabled:e.computed((function(){return t.isRtl?l():i()})),isLeftNavDisabled:p,getPageDecade:u,years:s,nextDecade:function(){i()||o(10)},previousDecade:function(){l()||o(-10)},selectYear:function(e){e.isDisabled||n("select-year",e)}}}});b.render=function(t,a,n,r,o,l){return e.withDirectives((e.openBlock(),e.createBlock("div",{class:[t.calendarClass,"vdp-datepicker__calendar"],style:t.calendarStyle,onMousedown:a[3]||(a[3]=e.withModifiers((()=>{}),["prevent"]))},[e.renderSlot(t.$slots,"beforeCalendarHeader"),e.createVNode("header",null,[e.createVNode("span",{onClick:a[1]||(a[1]=e=>t.isRtl?t.nextDecade():t.previousDecade()),class:["prev",{disabled:t.isLeftNavDisabled}]},"<",2),e.createVNode("span",null,e.toDisplayString(t.getPageDecade),1),e.createVNode("span",{onClick:a[2]||(a[2]=e=>t.isRtl?t.previousDecade():t.nextDecade()),class:["next",{disabled:t.isRightNavDisabled}]},">",2)]),(e.openBlock(!0),e.createBlock(e.Fragment,null,e.renderList(t.years,(a=>(e.openBlock(),e.createBlock("span",{class:["cell year",{selected:a.isSelected,disabled:a.isDisabled}],key:a.timestamp,onClick:e.withModifiers((e=>t.selectYear(a)),["stop"])},e.toDisplayString(a.year),11,["onClick"])))),128))],38)),[[e.vShow,t.showYearView]])},b.__file="src/components/appdatepicker/PickerYear.vue";var w=e.defineComponent({name:"AppDatepicker",components:{DateInput:y,PickerDay:v,PickerMonth:D,PickerYear:b},props:{value:{type:[Date,String]},format:{type:[String,Function],default:"dd MMM yyyy"},language:{type:Object,default:function(){return n}},openDate:{validator:function(e){return function(e){return null===e||e instanceof Date||"string"==typeof e||"number"==typeof e}(e)},type:Date},minimumView:{type:String,default:"day"},maximumView:{type:String,default:"year"},name:{type:String},refName:{type:String},id:{type:String},dayCellContent:{type:Function},fullMonthName:{type:Boolean},disabledDates:{type:Object},highlighted:{type:Object},placeholder:{type:String},inline:{type:Boolean},calendarClass:{type:[String,Object,Array]},inputClass:{type:[String,Object,Array]},wrapperClass:{type:[String,Object,Array]},mondayFirst:{type:Boolean},clearButton:{type:Boolean},clearButtonIcon:{type:String},calendarButton:{type:Boolean},calendarButtonIcon:{type:String},calendarButtonIconContent:{type:String},bootstrapStyling:{type:Boolean},initialView:{type:String},disabled:{type:Boolean},required:{type:Boolean},typeable:{type:Boolean},useUtc:{type:Boolean}},setup:function(t,a){var n=a.emit,r=e.ref(s(new Date,1)),o=e.ref(null),l=e.ref(!1),i=e.ref(!1),d=e.ref(!1),c=e.ref(0),u=e.ref(new Date),p=e.computed((function(){return t.initialView?t.initialView:t.minimumView})),h=e.computed((function(){return new Date(r.value)})),f=e.computed((function(){return t.language})),y=e.computed((function(){return!!t.inline})),m=e.computed((function(){return{position:y.value?"static":void 0}})),g=e.computed((function(){return l.value||i.value||d.value})),v=e.computed((function(){return f.value&&!0===f.value.rtl}));function D(e){e||(e=t.openDate?new Date(t.openDate):new Date),r.value=s(new Date(e),1)}function b(e){var a=["day","month","year"],n=a.indexOf(t.minimumView),r=a.indexOf(t.maximumView),o=a.indexOf(e);return o>=n&&o<=r}function w(e){l.value=!1,i.value=!1,d.value=!1,y.value||e&&n("closed")}function k(){return!!b("day")&&(w(),l.value=!0,!0)}function C(){return!!b("month")&&(w(),i.value=!0,!0)}function S(){return!!b("year")&&(w(),d.value=!0,!0)}function B(){var e=p.value;if(!b(e))throw new Error("initialView '".concat(e,"' cannot be rendered based on minimum '").concat(t.minimumView,"' and maximum '").concat(t.maximumView,"'"));switch(e){case"year":S();break;case"month":C();break;default:k()}}function _(e){var t=new Date(e);o.value=t,D(t),n("selected",t),n("input",t)}function M(e){_(e.timestamp),y.value||w(!0),u.value=new Date}function T(e){var t=e;if("string"==typeof e||"number"==typeof e){var a=new Date(e);t=Number.isNaN(a.valueOf())?null:a}if(!t)return D(),void(o.value=null);o.value=e,D(e)}return e.watch((function(){return t.value}),(function(e){T(e)})),e.watch((function(){return t.openDate}),(function(){D()})),e.watch((function(){return t.initialView}),(function(){B()})),t.value&&T(t.value),y.value&&B(),{pageTimestamp:r,selectedDate:o,showDayView:l,showMonthView:i,showYearView:d,calendarHeight:c,resetTypedDate:u,pageDate:h,translation:f,calendarStyle:m,isOpen:g,isInline:y,isRtl:v,setTypedDate:function(e){_(e.getTime())},handleChangedMonthFromDayPicker:function(e){D(e),n("changed-month",e)},selectYear:function(e){var t=new Date(e.timestamp);b("month")?(D(t),n("changed-year",e),C()):M(e)},selectMonth:function(e){var t=new Date(e.timestamp);b("day")?(D(t),n("changed-month",e),k()):M(e)},selectDisabledDate:function(e){n("selected-disabled",e)},clearDate:function(){o.value=null,D(),n("selected",null),n("input",null),n("cleared")},showCalendar:function(){return!t.disabled&&!y.value&&(g.value?w(!0):(B(),!0))},close:w,allowedToShowView:b,showYearCalendar:S,showMonthCalendar:C,setPageDate:D,selectDate:M}}});return function(e,t){void 0===t&&(t={});var a=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===a&&n.firstChild?n.insertBefore(r,n.firstChild):n.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}('.rtl{direction:rtl}.vdp-datepicker{position:relative;text-align:left}.vdp-datepicker *{box-sizing:border-box}.vdp-datepicker input{border:1px solid}.vdp-datepicker__calendar{position:absolute;z-index:100;background:#fff;width:300px;border:1px solid #000}.vdp-datepicker__calendar header{display:block;line-height:40px}.vdp-datepicker__calendar header span{text-align:center;width:71.42857142857143%;float:left}.vdp-datepicker__calendar header .next,.vdp-datepicker__calendar header .prev{width:14.285714285714286%;float:left;text-indent:-10000px;position:relative}.vdp-datepicker__calendar header .next:after,.vdp-datepicker__calendar header .prev:after{content:"";position:absolute;left:50%;top:50%;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);border:6px solid transparent}.vdp-datepicker__calendar header .prev:after{border-right:10px solid #000;margin-left:-5px}.vdp-datepicker__calendar header .prev.disabled:after{border-right:10px solid #000}.vdp-datepicker__calendar header .next:after{border-left:10px solid #000;margin-left:5px}.vdp-datepicker__calendar header .next.disabled:after{border-left:10px solid #ddd}.vdp-datepicker__calendar header .next:not(.disabled),.vdp-datepicker__calendar header .prev:not(.disabled),.vdp-datepicker__calendar header .up:not(.disabled){cursor:pointer}.vdp-datepicker__calendar header .next:not(.disabled):hover,.vdp-datepicker__calendar header .prev:not(.disabled):hover,.vdp-datepicker__calendar header .up:not(.disabled):hover{background:#eee}.vdp-datepicker__calendar .disabled{color:#ddd;cursor:default}.vdp-datepicker__calendar .flex-rtl{display:-webkit-flex;display:-ms-flexbox;display:flex;width:inherit;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.vdp-datepicker__calendar .cell{display:inline-block;padding:0 5px;width:14.285714285714286%;height:40px;line-height:40px;text-align:center;vertical-align:middle;border:1px solid transparent}.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).day,.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).month,.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).year{cursor:pointer}.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).day:hover,.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).month:hover,.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).year:hover{border:1px solid #4bd}.vdp-datepicker__calendar .cell.selected,.vdp-datepicker__calendar .cell.selected.highlighted,.vdp-datepicker__calendar .cell.selected:hover{background:#4bd}.vdp-datepicker__calendar .cell.highlighted{background:#cae5ed}.vdp-datepicker__calendar .cell.highlighted.disabled{color:#a3a3a3}.vdp-datepicker__calendar .cell.grey{color:#888}.vdp-datepicker__calendar .cell.grey:hover{background:inherit}.vdp-datepicker__calendar .cell.day-header{font-size:75%;white-space:nowrap;cursor:inherit}.vdp-datepicker__calendar .cell.day-header:hover{background:inherit}.vdp-datepicker__calendar .month,.vdp-datepicker__calendar .year{width:33.333%}.vdp-datepicker__calendar-button,.vdp-datepicker__clear-button{cursor:pointer;font-style:normal}.vdp-datepicker__calendar-button.disabled,.vdp-datepicker__clear-button.disabled{color:#999;cursor:default}'),w.render=function(t,a,n,r,o,l){const i=e.resolveComponent("date-input"),d=e.resolveComponent("picker-day"),c=e.resolveComponent("picker-month"),s=e.resolveComponent("picker-year");return e.openBlock(),e.createBlock("div",{class:["vdp-datepicker",[t.wrapperClass,t.isRtl?"rtl":""]]},[e.createVNode(i,{selectedDate:t.selectedDate,resetTypedDate:t.resetTypedDate,format:t.format,translation:t.translation,inline:t.inline,id:t.id,name:t.name,refName:t.refName,openDate:t.openDate,placeholder:t.placeholder,inputClass:t.inputClass,typeable:t.typeable,clearButton:t.clearButton,clearButtonIcon:t.clearButtonIcon,calendarButton:t.calendarButton,calendarButtonIcon:t.calendarButtonIcon,calendarButtonIconContent:t.calendarButtonIconContent,disabled:t.disabled,required:t.required,bootstrapStyling:t.bootstrapStyling,"use-utc":t.useUtc,onShowCalendar:t.showCalendar,onCloseCalendar:t.close,onTypedDate:t.setTypedDate,onClearDate:t.clearDate},null,8,["selectedDate","resetTypedDate","format","translation","inline","id","name","refName","openDate","placeholder","inputClass","typeable","clearButton","clearButtonIcon","calendarButton","calendarButtonIcon","calendarButtonIconContent","disabled","required","bootstrapStyling","use-utc","onShowCalendar","onCloseCalendar","onTypedDate","onClearDate"]),e.createCommentVNode("Day View "),t.allowedToShowView("day")?(e.openBlock(),e.createBlock(d,{key:0,pageDate:t.pageDate,selectedDate:t.selectedDate,showDayView:t.showDayView,fullMonthName:t.fullMonthName,allowedToShowView:t.allowedToShowView,disabledDates:t.disabledDates,highlighted:t.highlighted,calendarClass:t.calendarClass,calendarStyle:t.calendarStyle,translation:t.translation,pageTimestamp:t.pageTimestamp,isRtl:t.isRtl,mondayFirst:t.mondayFirst,dayCellContent:t.dayCellContent,onChangedMonth:t.handleChangedMonthFromDayPicker,onSelectDate:t.selectDate,onShowMonthCalendar:t.showMonthCalendar,onSelectedDisabled:t.selectDisabledDate},null,8,["pageDate","selectedDate","showDayView","fullMonthName","allowedToShowView","disabledDates","highlighted","calendarClass","calendarStyle","translation","pageTimestamp","isRtl","mondayFirst","dayCellContent","onChangedMonth","onSelectDate","onShowMonthCalendar","onSelectedDisabled"])):e.createCommentVNode("v-if",!0),e.createCommentVNode("Month View "),t.allowedToShowView("month")?(e.openBlock(),e.createBlock(c,{key:1,pageDate:t.pageDate,selectedDate:t.selectedDate,showMonthView:t.showMonthView,allowedToShowView:t.allowedToShowView,disabledDates:t.disabledDates,calendarClass:t.calendarClass,calendarStyle:t.calendarStyle,translation:t.translation,isRtl:t.isRtl,"use-utc":t.useUtc,onSelectMonth:t.selectMonth,onShowYearCalendar:t.showYearCalendar,onChangedYear:t.setPageDate},null,8,["pageDate","selectedDate","showMonthView","allowedToShowView","disabledDates","calendarClass","calendarStyle","translation","isRtl","use-utc","onSelectMonth","onShowYearCalendar","onChangedYear"])):e.createCommentVNode("v-if",!0),e.createCommentVNode(" Year View "),t.allowedToShowView("year")?(e.openBlock(),e.createBlock(s,{key:2,pageDate:t.pageDate,selectedDate:t.selectedDate,showYearView:t.showYearView,allowedToShowView:t.allowedToShowView,disabledDates:t.disabledDates,calendarClass:t.calendarClass,calendarStyle:t.calendarStyle,translation:t.translation,isRtl:t.isRtl,"use-utc":t.useUtc,onSelectYear:t.selectYear,onChangedDecade:t.setPageDate},null,8,["pageDate","selectedDate","showYearView","allowedToShowView","disabledDates","calendarClass","calendarStyle","translation","isRtl","use-utc","onSelectYear","onChangedDecade"])):e.createCommentVNode("v-if",!0)],2)},w.__file="src/components/appdatepicker/AppDatepicker.vue",w}));
diff --git a/testumdbuild/index.html b/testumdbuild/index.html
new file mode 100644
index 0000000..1f73cf4
--- /dev/null
+++ b/testumdbuild/index.html
@@ -0,0 +1,53 @@
+
+
+
+
+
+ Vue Basics
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+