new datepicker

package.json

@@ -83,18 +83,19 @@
     "@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",
     "countup.js": "^2.0.7",
     "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/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/nouislider";
+@import "vendor/litepicker";