From 9f107202de0c5a8df945146464ef1385a123294c Mon Sep 17 00:00:00 2001 From: codecalm Date: Tue, 9 Feb 2021 00:50:24 +0100 Subject: [PATCH] new datepicker --- package.json | 7 +- src/js/dropdown.js | 14 +- src/js/popover.js | 15 ++ src/js/switch-icon.js | 11 ++ src/js/tabler.js | 52 +------ src/js/toast.js | 9 ++ src/js/tooltip.js | 11 ++ src/pages/_data/libs.json | 8 +- .../_includes/forms/form-elements-6.html | 7 +- src/pages/_includes/ui/datepicker.html | 58 ++++++++ src/pages/_includes/ui/form/calendar.html | 40 ------ src/pages/form-elements.html | 2 +- src/scss/_dark.scss | 4 +- src/scss/tabler-vendors.scss | 4 +- src/scss/vendor/_flatpickr.scss | 134 ------------------ src/scss/vendor/_litepicker.scss | 52 +++++++ 16 files changed, 187 insertions(+), 241 deletions(-) create mode 100644 src/js/popover.js create mode 100644 src/js/switch-icon.js create mode 100644 src/js/toast.js create mode 100644 src/js/tooltip.js create mode 100644 src/pages/_includes/ui/datepicker.html delete mode 100644 src/pages/_includes/ui/form/calendar.html delete mode 100644 src/scss/vendor/_flatpickr.scss create mode 100644 src/scss/vendor/_litepicker.scss diff --git a/package.json b/package.json index 01e29842..bda42481 100644 --- 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" diff --git a/src/js/dropdown.js b/src/js/dropdown.js index dfb5da89..51a80b13 100644 --- a/src/js/dropdown.js +++ b/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); diff --git a/src/js/popover.js b/src/js/popover.js new file mode 100644 index 00000000..1866f624 --- /dev/null +++ b/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); +}); \ No newline at end of file diff --git a/src/js/switch-icon.js b/src/js/switch-icon.js new file mode 100644 index 00000000..8ba95423 --- /dev/null +++ b/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'); + }); +}); \ No newline at end of file diff --git a/src/js/tabler.js b/src/js/tabler.js index 628cf656..fbc8beb2 100644 --- a/src/js/tabler.js +++ b/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); - }); - -})(); diff --git a/src/js/toast.js b/src/js/toast.js new file mode 100644 index 00000000..7eafb684 --- /dev/null +++ b/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); +}); \ No newline at end of file diff --git a/src/js/tooltip.js b/src/js/tooltip.js new file mode 100644 index 00000000..4e48d1ca --- /dev/null +++ b/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); +}); \ No newline at end of file diff --git a/src/pages/_data/libs.json b/src/pages/_data/libs.json index eeb3562b..e191cc06 100644 --- 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" } diff --git a/src/pages/_includes/forms/form-elements-6.html b/src/pages/_includes/forms/form-elements-6.html index 01f38011..5bb955a5 100644 --- a/src/pages/_includes/forms/form-elements-6.html +++ b/src/pages/_includes/forms/form-elements-6.html @@ -3,13 +3,14 @@
- {% 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" %}
- {% include ui/form/calendar.html id="inline" inline=true %} + {% include ui/datepicker.html id="inline" inline=true %}
diff --git a/src/pages/_includes/ui/datepicker.html b/src/pages/_includes/ui/datepicker.html new file mode 100644 index 00000000..1285b653 --- /dev/null +++ b/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 %} + +{% endcapture %} + + +{% if include.inline %} +
+{% elsif include.layout == 'icon' %} +
+ {{ input | replace: include.class, '' }} + {% include ui/icon.html icon="calendar" %} +
+{% elsif include.layout == 'icon-prepend' %} +
+ {% include ui/icon.html icon="calendar" %} + {{ input | replace: include.class, '' }} +
+{% else %} + {{ input }} +{% endif %} + +{% capture script %} + +{% endcapture %} + +{% if include.show-scripts %} +{{ script }} +{% else %} +{% capture_global scripts %} +{{ script }} +{% endcapture_global %} +{% endif %} + +{% endif %} \ No newline at end of file diff --git a/src/pages/_includes/ui/form/calendar.html b/src/pages/_includes/ui/form/calendar.html deleted file mode 100644 index bff6d6a6..00000000 --- a/src/pages/_includes/ui/form/calendar.html +++ /dev/null @@ -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 %} - -{% endcapture %} - -{% if include.inline %} -
-{% elsif include.layout == 'icon' %} -
- {{ input | replace: include.class, '' }} - {% include ui/icon.html icon="calendar" %} -
-{% elsif include.layout == 'icon-prepend' %} -
- {% include ui/icon.html icon="calendar" %} - {{ input | replace: include.class, '' }} -
-{% else %} - {{ input }} -{% endif %} - -{% capture_global scripts %} - -{% endcapture_global %} \ No newline at end of file diff --git a/src/pages/form-elements.html b/src/pages/form-elements.html index fcd1f973..3577971a 100644 --- 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 ---
diff --git a/src/scss/_dark.scss b/src/scss/_dark.scss index 1fcac3d4..24997012 100644 --- 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; diff --git a/src/scss/tabler-vendors.scss b/src/scss/tabler-vendors.scss index 0734cab7..1563385a 100644 --- 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 diff --git a/src/scss/vendor/_flatpickr.scss b/src/scss/vendor/_flatpickr.scss deleted file mode 100644 index 98355c38..00000000 --- a/src/scss/vendor/_flatpickr.scss +++ /dev/null @@ -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; -} \ No newline at end of file diff --git a/src/scss/vendor/_litepicker.scss b/src/scss/vendor/_litepicker.scss new file mode 100644 index 00000000..885b8326 --- /dev/null +++ b/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; + } +} + -- GitLab