new datepicker

package.json

@@ -83,6 +83,8 @@
     "@fullcalendar/interaction": "^5.5.0",
     "@fullcalendar/list": "^5.5.0",
     "@fullcalendar/timegrid": "^5.5.1",
+    "@popperjs/core": "^2.6.0",
+    "@tabler/icons": "^1.39.1",
     "apexcharts": "^3.24.0",
     "autosize": "^4.0.2",
     "bootstrap": "twbs/bootstrap#c93d754d35eadf6cb81a8fccef9ce091ea4f28c9",
@@ -90,11 +92,10 @@
     "flatpickr": "^4.6.9",
     "fullcalendar": "^5.5.1",
     "imask": "^6.0.5",
+    "litepicker": "^2.0.3",
     "nouislider": "^14.6.3",
-    "popper.js": "^1.16.1",
     "rollup-plugin-cleanup": "^3.2.1",
-    "rollup-plugin-commonjs": "^10.1.0",
-    "@tabler/icons": "^1.39.1"
+    "rollup-plugin-commonjs": "^10.1.0"
   },
   "resolutions": {
     "**/**/node-gyp": "^5.0.0"

src/js/dropdown.js

@@ -1,5 +1,17 @@
-// Nested dropdowns
+import { Dropdown } from 'bootstrap';
 
+/*
+Core dropdowns
+ */
+let dropdownTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="dropdown"]'));
+dropdownTriggerList.map(function (dropdownTriggerEl) {
+	return new Dropdown(dropdownTriggerEl);
+});
+
+
+/*
+Nested dropdowns
+ */
 const selectors = '.dropdown, .dropup, .dropend, .dropstart',
 	dropdowns = document.querySelectorAll(selectors);
 

src/js/popover.js

@@ -0,0 +1,15 @@
+import { Popover } from 'bootstrap';
+
+
+/*
+Core popovers
+ */
+let popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
+popoverTriggerList.map(function (popoverTriggerEl) {
+	let options = {
+		delay: {show: 50, hide: 50},
+		html: popoverTriggerEl.getAttribute('data-bs-html') === "true" ?? false,
+		placement: popoverTriggerEl.getAttribute('data-bs-placement') ?? 'auto'
+	};
+	return new Popover(popoverTriggerEl, options);
+});

src/js/switch-icon.js

@@ -0,0 +1,11 @@
+/*
+Switch icons
+ */
+let switchesTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="switch-icon"]'));
+switchesTriggerList.map(function (switchTriggerEl) {
+	switchTriggerEl.addEventListener('click', (e) => {
+		e.stopPropagation();
+
+		switchTriggerEl.classList.toggle('active');
+	});
+});

src/js/tabler.js

@@ -1,54 +1,10 @@
 //Vendor
 
-import 'bootstrap/dist/js/bootstrap.bundle';
-
 import './autosize';
 import './input-mask';
 import './dropdown';
+import './tooltip';
+import './popover';
+import './switch-icon';
+import './toast';
 
-(function() {
-	/**
-	 */
-	let tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
-	tooltipTriggerList.map(function (tooltipTriggerEl) {
-		let options = {
-			delay: {show: 50, hide: 50},
-			html: tooltipTriggerEl.getAttribute("data-bs-html") === "true" ?? false,
-			placement: tooltipTriggerEl.getAttribute('data-bs-placement') ?? 'auto'
-		};
-		return new bootstrap.Tooltip(tooltipTriggerEl, options);
-	});
-
-	/**
-	 */
-	let popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
-	popoverTriggerList.map(function (popoverTriggerEl) {
-		let options = {
-			delay: {show: 50, hide: 50},
-			html: popoverTriggerEl.getAttribute('data-bs-html') === "true" ?? false,
-			placement: popoverTriggerEl.getAttribute('data-bs-placement') ?? 'auto'
-		};
-		return new bootstrap.Popover(popoverTriggerEl, options);
-	});
-
-	let dropdownTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="dropdown"]'));
-	dropdownTriggerList.map(function (dropdownTriggerEl) {
-		return new bootstrap.Dropdown(dropdownTriggerEl);
-	});
-
-
-	let switchesTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="switch-icon"]'));
-	switchesTriggerList.map(function (switchTriggerEl) {
-		switchTriggerEl.addEventListener('click', (e) => {
-			e.stopPropagation();
-
-			switchTriggerEl.classList.toggle('active');
-		});
-	});
-
-	let toastsTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="toast"]'));
-	toastsTriggerList.map(function (toastTriggerEl) {
-		return new bootstrap.Toast(toastTriggerEl);
-	});
-
-})();

src/js/toast.js

@@ -0,0 +1,9 @@
+import { Toast } from 'bootstrap';
+
+/*
+Toasts
+ */
+let toastsTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="toast"]'));
+toastsTriggerList.map(function (toastTriggerEl) {
+	return new Toast(toastTriggerEl);
+});

src/js/tooltip.js

@@ -0,0 +1,11 @@
+import { Tooltip } from 'bootstrap';
+
+let tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
+tooltipTriggerList.map(function (tooltipTriggerEl) {
+	let options = {
+		delay: {show: 50, hide: 50},
+		html: tooltipTriggerEl.getAttribute("data-bs-html") === "true" ?? false,
+		placement: tooltipTriggerEl.getAttribute('data-bs-placement') ?? 'auto'
+	};
+	return new Tooltip(tooltipTriggerEl, options);
+});

src/pages/_data/libs.json

@@ -8,19 +8,15 @@
   "js": {
     "bootstrap": "bootstrap/dist/js/bootstrap.bundle.min.js",
     "apexcharts": "apexcharts/dist/apexcharts.min.js",
-    "flatpickr": [
-      "flatpickr/dist/flatpickr.min.js",
-      "flatpickr/dist/plugins/rangePlugin.js"
-    ],
     "nouislider": "nouislider/distribute/nouislider.min.js",
     "countup": "countup.js/dist/countUp.js",
     "masonry": "https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js",
     "mapbox": "https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.js",
-    "google-maps": "https://maps.googleapis.com/maps/api/js?key=GOOGLE_MAPS_KEY"
+    "google-maps": "https://maps.googleapis.com/maps/api/js?key=GOOGLE_MAPS_KEY",
+    "litepicker": "litepicker/dist/litepicker.js"
   },
   "css": {
     "selectize": "selectize/dist/css/selectize.css",
-    "flatpickr": "flatpickr/dist/flatpickr.min.css",
     "nouislider": "nouislider/distribute/nouislider.min.css",
     "mapbox": "https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css"
   }

src/pages/_includes/forms/form-elements-6.html

@@ -3,13 +3,14 @@
 
 <div class="mb-3">
 	<label class="form-label">Datepicker</label>
-	{% include ui/form/calendar.html class="mb-2" %}
-	{% include ui/form/calendar.html id="time" layout="icon" %}
+	{% include ui/datepicker.html id="default" class="mb-2" %}
+	{% include ui/datepicker.html id="icon" layout="icon" class="mb-2" %}
+	{% include ui/datepicker.html id="icon-prepend" layout="icon-prepend" %}
 </div>
 
 <div class="mb-3">
 	<label class="form-label">Inline datepicker</label>
-	{% include ui/form/calendar.html id="inline" inline=true %}
+	{% include ui/datepicker.html id="inline" inline=true %}
 </div>
 
 <div class="mb-3">

src/pages/_includes/ui/datepicker.html

@@ -0,0 +1,58 @@
+{% assign value = include.value | default: '2020-06-20' %}
+{% assign placeholder = include.placeholder | default: 'Select a date' %}
+{% assign id = include.id %}
+
+{% if id %}
+
+{% capture input %}
+<input class="form-control{% if include.class %} {{ include.class }}{% endif %}"{% if placeholder %} placeholder="{{ placeholder }}"{% endif %} id="datepicker-{{ id }}" value="{{ value }}"/>
+{% endcapture %}
+
+
+{% if include.inline %}
+	<div class="datepicker-inline" id="datepicker-{{ id }}"></div>
+{% elsif include.layout == 'icon' %}
+	<div class="input-icon{% if include.class %} {{ include.class }}{% endif %}">
+		{{ input | replace: include.class, '' }}
+		<span class="input-icon-addon">{% include ui/icon.html icon="calendar" %}</span>
+	</div>
+{% elsif include.layout == 'icon-prepend' %}
+	<div class="input-icon{% if include.class %} {{ include.class }}{% endif %}">
+		<span class="input-icon-addon">{% include ui/icon.html icon="calendar" %}</span>
+		{{ input | replace: include.class, ''  }}
+	</div>
+{% else %}
+	{{ input }}
+{% endif %}
+
+{% capture script %}
+<script>
+	// @formatter:off
+	document.addEventListener("DOMContentLoaded", function () {
+		{% if jekyll.environment == 'development' %}
+		window.tabler_datepicker = window.tabler_datepicker || {};
+		{% endif %}
+
+		window.Litepicker && ({% if jekyll.environment == 'development' %}window.tabler_datepicker["datepicker-{{ id }}"] = {% endif %}new Litepicker({
+			element: document.getElementById('datepicker-{{ id }}'),
+			buttonText: {
+				previousMonth: '{% capture icon %}{% include ui/icon.html icon="chevron-left" %}{% endcapture %}{{ icon | strip }}',
+				nextMonth: '{% capture icon %}{% include ui/icon.html icon="chevron-right" %}{% endcapture %}{{ icon | strip }}',
+			},
+			{% if include.inline %}inlineMode: true,{% endif %}
+		}));
+
+	});
+	// @formatter:on
+</script>
+{% endcapture %}
+
+{% if include.show-scripts %}
+{{ script }}
+{% else %}
+{% capture_global scripts %}
+{{ script }}
+{% endcapture_global %}
+{% endif %}
+
+{% endif %}

src/pages/_includes/ui/form/calendar.html

@@ -1,40 +0,0 @@
-{% assign type = include.type | default: 'date' %}
-{% assign value = include.value | default: '2020-06-20' %}
-{% assign placeholder = include.placeholder | default: 'Select a date' %}
-{% assign id = include.id | default: 'simple' %}
-
-{% capture input %}
-<input id="calendar-{{ id }}" type="{{ type }}" value="{{ value }}" class="form-control{% if include.class %} {{ include.class }}{% endif %}"{% if placeholder %} placeholder="{{ placeholder }}"{% endif %} />
-{% endcapture %}
-
-{% if include.inline %}
-	<div id="calendar-{{ id }}"></div>
-{% elsif include.layout == 'icon' %}
-	<div class="input-icon{% if include.class %} {{ include.class }}{% endif %}">
-		{{ input | replace: include.class, '' }}
-		<span class="input-icon-addon">{% include ui/icon.html icon="calendar" %}</span>
-	</div>
-{% elsif include.layout == 'icon-prepend' %}
-	<div class="input-icon{% if include.class %} {{ include.class }}{% endif %}">
-		<span class="input-icon-addon">{% include ui/icon.html icon="calendar" %}</span>
-		{{ input | replace: include.class, ''  }}
-	</div>
-{% else %}
-	{{ input }}
-{% endif %}
-
-{% capture_global scripts %}
-<script>
-	document.addEventListener("DOMContentLoaded", function () {
-		{% if jekyll.environment == 'development' %}
-		window.tabler_calendar = window.tabler_calendar || {};
-		{% endif %}
-
-		{% if jekyll.environment == 'development' %}window.tabler_calendar["chart-{{ id }}"] = {% endif %}flatpickr(document.getElementById('calendar-{{ id }}'), {
-			{% if include.inline %}
-			inline: true,
-			{% endif %}
-		});
-	});
-</script>
-{% endcapture_global %}

src/pages/form-elements.html

@@ -2,7 +2,7 @@
 title: Form elements
 page-header: Form elements
 menu: forms
-libs: nouislider, autosize, flatpickr, tabler-flags, tabler-payments
+libs: nouislider, autosize, tabler-flags, tabler-payments, litepicker
 ---
 
 <div class="row row-cards">

src/scss/_dark.scss

@@ -12,8 +12,7 @@
   .footer:not(.footer-transparent),
   .modal-content,
   .modal-header,
-  .dropdown-menu,
-  .flatpickr-calendar {
+  .dropdown-menu {
     background-color: $dark;
     color: inherit;
   }
@@ -43,7 +42,6 @@
   .form-file-text,
   .form-control,
   .form-selectgroup-label,
-  .flatpickr-input.flatpickr-input,
   .form-selectgroup-check,
   .form-imagecheck-figure:before {
     background-color: $dark-mode-darken;

src/scss/tabler-vendors.scss

@@ -2,5 +2,5 @@
 
 @import "vendor/apexcharts";
 @import "vendor/fullcalendar";
-@import "vendor/flatpickr";
 @import "vendor/nouislider";
+@import "vendor/litepicker";

src/scss/vendor/_flatpickr.scss

@@ -1,134 +0,0 @@
-.flatpickr-input.flatpickr-input {
-  background: $input-bg;
-
-  &.active {
-    border-color: $input-focus-border-color;
-    box-shadow: $input-focus-box-shadow;
-  }
-}
-
-.flatpickr-calendar {
-  background: $white;
-  border: $input-border-width solid $input-border-color;
-  border-radius: $input-border-radius;
-  padding: .5rem;
-  font-size: inherit;
-  box-shadow: $dropdown-box-shadow;
-  user-select: none;
-  margin-top: -1px;
-
-  &:before,
-  &:after {
-    content: none;
-  }
-
-  .flatpickr-innerContainer,
-  .flatpickr-rContainer,
-  .dayContainer,
-  .flatpickr-days {
-    width: 100%;
-  }
-
-  .dayContainer,
-  .flatpickr-day {
-    max-width: 100%;
-    min-width: 0;
-  }
-
-  &.inline {
-    width: 100%;
-    box-shadow: none;
-    margin: 0;
-  }
-}
-
-.flatpickr-day {
-  color: inherit;
-  border-radius: $border-radius;
-  display: flex;
-  align-items: center;
-  line-height: 1;
-
-  &.flatpickr-disabled,
-  &.flatpickr-disabled:hover,
-  &.prevMonthDay,
-  &.nextMonthDay,
-  &.notAllowed,
-  &.notAllowed.prevMonthDay,
-  &.notAllowed.nextMonthDay {
-    color: inherit;
-    opacity: .2;
-  }
-
-  &.today {
-    border-color: $border-color;
-  }
-
-  &.selected {
-    background-color: $primary;
-  }
-}
-
-span.flatpickr-weekday {
-  @include subheader;
-}
-
-.flatpickr-months {
-  margin-bottom: .5rem;
-
-  .flatpickr-month {
-    color: currentColor;
-    fill: currentColor;
-  }
-
-  .flatpickr-current-month {
-    font-weight: $font-weight-normal;
-  }
-
-  .flatpickr-monthDropdown-months {
-    appearance: none;
-    font-weight: inherit;
-  }
-
-  .flatpickr-prev-month,
-  .flatpickr-next-month {
-    position: static;
-    color: $text-muted;
-
-    &:hover {
-      color: $body-color;
-    }
-
-    svg {
-      display: block;
-      fill: currentColor !important;
-    }
-  }
-
-  .numInputWrapper {
-    .cur-year {
-      font-weight: inherit;
-    }
-
-    .arrowUp,
-    .arrowDown {
-      display: none;
-    }
-  }
-}
-
-.flatpickr-day.inRange,
-.flatpickr-day.prevMonthDay.inRange,
-.flatpickr-day.nextMonthDay.inRange,
-.flatpickr-day.today.inRange,
-.flatpickr-day.prevMonthDay.today.inRange,
-.flatpickr-day.nextMonthDay.today.inRange,
-.flatpickr-day:hover,
-.flatpickr-day.prevMonthDay:hover,
-.flatpickr-day.nextMonthDay:hover,
-.flatpickr-day:focus,
-.flatpickr-day.prevMonthDay:focus,
-.flatpickr-day.nextMonthDay:focus {
-  background: $hover-bg;
-  border-color: transparent;
-}

src/scss/vendor/_litepicker.scss

@@ -0,0 +1,52 @@
+.litepicker {
+  --litepicker-month-weekday-color: #{$text-muted};
+  --litepicker-button-prev-month-color: #{$text-muted};
+  --litepicker-button-next-month-color: #{$text-muted};
+  --litepicker-button-prev-month-color-hover: #{$primary};
+  --litepicker-button-next-month-color-hover: #{$primary};
+  --litepicker-day-color-hover: #{$primary};
+  --litepicker-is-end-color-bg: #{$primary};
+  --litepicker-is-today-color: #{$primary};
+  font: inherit;
+  user-select: none;
+
+  svg {
+    fill: none !important;
+  }
+
+  .container__months {
+    border: 1px solid $border-color-transparent;
+    border-radius: $border-radius;
+    box-shadow: $dropdown-box-shadow;
+
+    .month-item-name,
+    .month-item-year {
+      font-weight: $font-weight-medium !important;
+    }
+
+    .button-next-month,
+    .button-prev-month {
+      cursor: pointer !important;
+    }
+
+    .month-item-weekdays-row {
+      > div {
+        padding: .5rem 0 !important;
+        font-size: $h5-font-size;
+      }
+    }
+  }
+
+  .container__days {
+    .day-item {
+      cursor: pointer !important;
+      padding: .5rem 0 !important;
+      transition: .3s color, .3s background-color, .3s border-color;
+    }
+  }
+
+  .datepicker-inline & .container__months {
+    box-shadow: none;
+  }
+}
+