new datepicker

9f107202 · codecalm · 7a97b942 · 9f107202 · 9f107202 · 9f107202
15 changed file
--- a/package.json
+++ b/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"

--- a/src/js/dropdown.js
+++ b/src/js/dropdown.js
-// 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);


--- a/src/js/popover.js
+++ b/src/js/popover.js
+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);
+});
\ No newline at end of file
--- a/src/js/switch-icon.js
+++ b/src/js/switch-icon.js
+/*
+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');
+	});
+});
\ No newline at end of file
--- a/src/js/tabler.js
+++ b/src/js/tabler.js
 //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);
-	});
-
-})();
--- a/src/js/toast.js
+++ b/src/js/toast.js
+import { Toast } from 'bootstrap';
+
+/*
+Toasts
+ */
+let toastsTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="toast"]'));
+toastsTriggerList.map(function (toastTriggerEl) {
+	return new Toast(toastTriggerEl);
+});
\ No newline at end of file
--- a/src/js/tooltip.js
+++ b/src/js/tooltip.js
+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);
+});
\ No newline at end of file
--- a/src/pages/_data/libs.json
+++ b/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"
  }

--- a/src/pages/_includes/forms/form-elements-6.html
+++ b/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">

--- a/src/pages/_includes/ui/form/calendar.html
+++ b/src/pages/_includes/ui/form/calendar.html
-{% 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' %}
+{% assign id = include.id %}
+
+{% if id %}

 {% capture input %}
-<input id="calendar-{{ id }}" type="{{ type }}" value="{{ value }}" class="form-control{% if include.class %} {{ include.class }}{% endif %}"{% if placeholder %} placeholder="{{ placeholder }}"{% endif %} />
+<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 id="calendar-{{ id }}"></div>
+	<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, '' }}
@@ -23,18 +25,34 @@
 	{{ input }}
 {% endif %}

-{% capture_global scripts %}
+{% capture script %}
 <script>
+	// @formatter:off
 	document.addEventListener("DOMContentLoaded", function () {
 		{% if jekyll.environment == 'development' %}
-		window.tabler_calendar = window.tabler_calendar || {};
+		window.tabler_datepicker = window.tabler_datepicker || {};
 		{% endif %}

-		{% if jekyll.environment == 'development' %}window.tabler_calendar["chart-{{ id }}"] = {% endif %}flatpickr(document.getElementById('calendar-{{ id }}'), {
-			{% if include.inline %}
-			inline: true,
-			{% 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_global %}
\ No newline at end of file
+{% endcapture %}
+
+{% if include.show-scripts %}
+{{ script }}
+{% else %}
+{% capture_global scripts %}
+{{ script }}
+{% endcapture_global %}
+{% endif %}
+
+{% endif %}
\ No newline at end of file
--- a/src/pages/form-elements.html
+++ b/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">

--- a/src/scss/_dark.scss
+++ b/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;

--- a/src/scss/tabler-vendors.scss
+++ b/src/scss/tabler-vendors.scss
@@ -2,5 +2,5 @@

 @import "vendor/apexcharts";
 @import "vendor/fullcalendar";
-@import "vendor/flatpickr";
-@import "vendor/nouislider";
\ No newline at end of file
+@import "vendor/nouislider";
+@import "vendor/litepicker";
\ No newline at end of file
--- a/src/scss/vendor/_flatpickr.scss
+++ b/src/scss/vendor/_flatpickr.scss
-.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;
-}
\ No newline at end of file
--- a/src/scss/vendor/_litepicker.scss
+++ b/src/scss/vendor/_litepicker.scss
+.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;
+  }
+}
+