Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
bulma-extensions
Advanced tools
bulma-extensions - npm Package Compare versions
Comparing version 4.1.1 to 6.0.0
| ready(function () { | ||
| bulmaCalendar.attach('#datepickerDemoRange'); | ||
| bulmaCalendar.attach('#datepickerDemoInline'); | ||
| bulmaCalendar.attach('#datepickerDemoInlineInfo'); | ||
| bulmaCalendar.attach('#datepickerDemoInlineSuccess'); | ||
| bulmaCalendar.attach('#datepickerDemoInlineWarning'); | ||
| bulmaCalendar.attach('#datepickerDemoInlineDanger'); | ||
| bulmaCalendar.attach('#datepickerDemoInlineGrey'); | ||
| bulmaCalendar.attach('#datepickerDemoInlineBlack'); | ||
| bulmaCalendar.attach('#datepickerDemoInlineRange'); | ||
| bulmaCalendar.attach('#datepickerDemoRangeDialog', { | ||
| displayMode: 'dialog' | ||
| bulmaCalendar.attach('#datepickerDemoRangeLabels', { | ||
| labelFrom: 'Check-in', | ||
| labelTo: 'Check-out' | ||
| }); | ||
| calendars = [bulmaCalendar.attach('#datepickerDemoDefault', { | ||
| dateFormat: 'DD/MM/YYYY', | ||
| clearButton: false | ||
| })]; | ||
| // console.log(calendars); | ||
| [].forEach.call(calendars, function (calendar) { | ||
| var calendars = bulmaCalendar.attach('#datepickerDemoDefault'); | ||
| [].forEach.call(calendars, function(calendar) { | ||
| calendar.on('select', function (datePicker) { | ||
@@ -22,6 +25,6 @@ console.log('Selected date: ' + datePicker.data.value()); | ||
| displayMode: 'dialog', | ||
| dateFormat: 'D/M/YYYY', | ||
| startDate: new Date(), | ||
| startDate: new Date('02/11/2018'), | ||
| minDate: '01/01/2018', | ||
| maxDate: '12/31/2018' | ||
| maxDate: '12/31/2018', | ||
| lang: 'fr' | ||
| }); | ||
@@ -31,3 +34,2 @@ | ||
| displayMode: 'dialog', | ||
| startDate: new Date(), | ||
| disabledDates: [ | ||
@@ -41,3 +43,2 @@ new Date(new Date().getTime() - 24 * 60 * 60 * 1000), | ||
| displayMode: 'dialog', | ||
| startDate: new Date(), | ||
| disabledWeekDays: '0,6' | ||
@@ -48,3 +49,2 @@ }); | ||
| displayMode: 'dialog', | ||
| startDate: new Date(), | ||
| weekStart: 1 | ||
@@ -69,3 +69,3 @@ }); | ||
| trigger.addEventListener('click', function (e) { | ||
| datepicker.show(); | ||
| datepicker[0].show(); | ||
| }); | ||
@@ -84,5 +84,5 @@ } | ||
| trigger2.addEventListener('click', function (e) { | ||
| datepicker2.show(); | ||
| datepicker2[0].show(); | ||
| }); | ||
| } | ||
| }); |
@@ -14,3 +14,2 @@ const defaultOptions = { | ||
| dateFormat: 'MM/DD/YYYY', | ||
| weekDaysFormat: 'ddd', | ||
| enableMonthSwitch: true, | ||
@@ -17,0 +16,0 @@ enableYearSwitch: true |
@@ -13,10 +13,2 @@ import * as utils from '../utils'; | ||
| const onPreviousDatePicker = Symbol('onPreviousDatePicker'); | ||
| const onNextDatePicker = Symbol('onNextDatePicker'); | ||
| const onSelectMonthDatePicker = Symbol('onSelectMonthDatePicker'); | ||
| const onMonthClickDatePicker = Symbol('onMonthClickDatePicker'); | ||
| const onSelectYearDatePicker = Symbol('onSelectYearDatePicker'); | ||
| const onYearClickDatePicker = Symbol('onYearClickDatePicker'); | ||
| const onDateClickDatePicker = Symbol('onDateClickDatePicker'); | ||
| export default class datePicker extends EventEmitter { | ||
@@ -36,9 +28,9 @@ constructor(options = {}) { | ||
| this[onPreviousDatePicker] = this[onPreviousDatePicker].bind(this); | ||
| this[onNextDatePicker] = this[onNextDatePicker].bind(this); | ||
| this[onSelectMonthDatePicker] = this[onSelectMonthDatePicker].bind(this); | ||
| this[onMonthClickDatePicker] = this[onMonthClickDatePicker].bind(this); | ||
| this[onSelectYearDatePicker] = this[onSelectYearDatePicker].bind(this); | ||
| this[onYearClickDatePicker] = this[onYearClickDatePicker].bind(this); | ||
| this[onDateClickDatePicker] = this[onDateClickDatePicker].bind(this); | ||
| this.onPreviousDatePicker = this.onPreviousDatePicker.bind(this); | ||
| this.onNextDatePicker = this.onNextDatePicker.bind(this); | ||
| this.onSelectMonthDatePicker = this.onSelectMonthDatePicker.bind(this); | ||
| this.onMonthClickDatePicker = this.onMonthClickDatePicker.bind(this); | ||
| this.onSelectYearDatePicker = this.onSelectYearDatePicker.bind(this); | ||
| this.onYearClickDatePicker = this.onYearClickDatePicker.bind(this); | ||
| this.onDateClickDatePicker = this.onDateClickDatePicker.bind(this); | ||
@@ -139,3 +131,3 @@ this._init(); | ||
| ****************************************************/ | ||
| [onPreviousDatePicker](e) { | ||
| onPreviousDatePicker(e) { | ||
| if (!this._supportsPassive) { | ||
@@ -153,3 +145,3 @@ e.preventDefault(); | ||
| [onNextDatePicker](e) { | ||
| onNextDatePicker(e) { | ||
| if (!this._supportsPassive) { | ||
@@ -167,3 +159,3 @@ e.preventDefault(); | ||
| [onSelectMonthDatePicker](e) { | ||
| onSelectMonthDatePicker(e) { | ||
| e.stopPropagation(); | ||
@@ -180,3 +172,3 @@ | ||
| [onSelectYearDatePicker](e) { | ||
| onSelectYearDatePicker(e) { | ||
| e.stopPropagation(); | ||
@@ -198,3 +190,3 @@ | ||
| [onMonthClickDatePicker](e) { | ||
| onMonthClickDatePicker(e) { | ||
| if (!this._supportsPassive) { | ||
@@ -212,3 +204,3 @@ e.preventDefault(); | ||
| [onYearClickDatePicker](e) { | ||
| onYearClickDatePicker(e) { | ||
| if (!this._supportsPassive) { | ||
@@ -226,3 +218,3 @@ e.preventDefault(); | ||
| [onDateClickDatePicker](e) { | ||
| onDateClickDatePicker(e) { | ||
| if (!this._supportsPassive) { | ||
@@ -237,11 +229,3 @@ e.preventDefault(); | ||
| this.refresh(); | ||
| // if ((!this.options.isRange || (this.start && this._isValidDate(this.start) && this.end && this._isValidDate(this.end))) && this.options.closeOnSelect) { | ||
| // this.hide(); | ||
| // } | ||
| } | ||
| // this.emit('select', { | ||
| // date: this.date, | ||
| // instance: this | ||
| // }); | ||
| } | ||
@@ -337,6 +321,6 @@ | ||
| if (type.isObject(value) || type.isDate(value)) { | ||
| this._select(value, false); | ||
| this._select(value); | ||
| } | ||
| } else { | ||
| this._select(value, false); | ||
| this._select(value); | ||
| } | ||
@@ -376,3 +360,3 @@ } else { | ||
| this._clickEvents.forEach(clickEvent => { | ||
| month.addEventListener(clickEvent, this[onMonthClickDatePicker]); | ||
| month.addEventListener(clickEvent, this.onMonthClickDatePicker); | ||
| }); | ||
@@ -398,3 +382,3 @@ month.classList.remove('is-active'); | ||
| this._clickEvents.forEach(clickEvent => { | ||
| year.addEventListener(clickEvent, this[onYearClickDatePicker]); | ||
| year.addEventListener(clickEvent, this.onYearClickDatePicker); | ||
| }); | ||
@@ -410,3 +394,3 @@ year.classList.remove('is-active'); | ||
| // the 7 days of the week (Sun-Sat) | ||
| const weekdayLabels = new Array(7).fill(dateFns.startOfWeek(this._visibleDate)).map((d, i) => dateFns.format(dateFns.addDays(d, i + this.options.weekStart), this.options.weekDaysFormat, { | ||
| const weekdayLabels = new Array(7).fill(dateFns.startOfWeek(this._visibleDate)).map((d, i) => dateFns.format(dateFns.addDays(d, i + this.options.weekStart), 'ddd', { | ||
| locale: this.locale | ||
@@ -489,4 +473,4 @@ })); | ||
| this.disabledWeekDays = type.isString(this.options.disabledWeekDays) ? this.options.disabledWeekDays.split(',') : (Array.isArray(this.options.disabledWeekDays) ? this.options.disabledWeekDays : []); | ||
| this.min = this.options.minDate; | ||
| this.max = this.options.maxDate; | ||
| this.min = this.options.min; | ||
| this.max = this.options.max; | ||
| this._date = { | ||
@@ -535,6 +519,6 @@ start: this.options.startDate, | ||
| case 37: | ||
| this[onPreviousDatePicker](e); | ||
| this.onPreviousDatePicker(e); | ||
| break; | ||
| case 39: | ||
| this[onNextDatePicker](e); | ||
| this.onNextDatePicker(e); | ||
| break; | ||
@@ -548,3 +532,3 @@ } | ||
| this._clickEvents.forEach(clickEvent => { | ||
| this._ui.navigation.previous.addEventListener(clickEvent, this[onPreviousDatePicker]); | ||
| this._ui.navigation.previous.addEventListener(clickEvent, this.onPreviousDatePicker); | ||
| }); | ||
@@ -554,3 +538,3 @@ } | ||
| this._clickEvents.forEach(clickEvent => { | ||
| this._ui.navigation.next.addEventListener(clickEvent, this[onNextDatePicker]); | ||
| this._ui.navigation.next.addEventListener(clickEvent, this.onNextDatePicker); | ||
| }); | ||
@@ -561,3 +545,3 @@ } | ||
| this._clickEvents.forEach(clickEvent => { | ||
| this._ui.navigation.month.addEventListener(clickEvent, this[onSelectMonthDatePicker]); | ||
| this._ui.navigation.month.addEventListener(clickEvent, this.onSelectMonthDatePicker); | ||
| }); | ||
@@ -567,3 +551,3 @@ } | ||
| this._clickEvents.forEach(clickEvent => { | ||
| this._ui.navigation.year.addEventListener(clickEvent, this[onSelectYearDatePicker]); | ||
| this._ui.navigation.year.addEventListener(clickEvent, this.onSelectYearDatePicker); | ||
| }); | ||
@@ -575,3 +559,3 @@ } | ||
| this._clickEvents.forEach(clickEvent => { | ||
| month.addEventListener(clickEvent, this[onMonthClickDatePicker]); | ||
| month.addEventListener(clickEvent, this.onMonthClickDatePicker); | ||
| }); | ||
@@ -583,3 +567,3 @@ }); | ||
| this._clickEvents.forEach(clickEvent => { | ||
| year.addEventListener(clickEvent, this[onYearClickDatePicker]); | ||
| year.addEventListener(clickEvent, this.onYearClickDatePicker); | ||
| }); | ||
@@ -600,3 +584,3 @@ }); | ||
| // if out of this month, jump to the date | ||
| const onClick = !this._isValidDate(new Date(day.dataset.date), this.min, this.max) ? null : this[onDateClickDatePicker]; | ||
| const onClick = !this._isValidDate(new Date(day.dataset.date), this.min, this.max) ? null : this.onDateClickDatePicker; | ||
| day.addEventListener(clickEvent, onClick); | ||
@@ -667,3 +651,3 @@ }); | ||
| _select(date = undefined, withEvents = true) { | ||
| _select(date = undefined) { | ||
| this.snapshot(); | ||
@@ -674,4 +658,3 @@ date = type.isDate(date) ? date : new Date(date); | ||
| this.end = undefined; | ||
| if (withEvents) | ||
| this.emit('select:start', this); | ||
| this.emit('select:start', this); | ||
| } else if (this.options.isRange && !this._isValidDate(this.end)) { | ||
@@ -681,20 +664,13 @@ if (dateFns.isBefore(date, this.start)) { | ||
| this.start = date; | ||
| if (withEvents) { | ||
| this.emit('select', this); | ||
| } | ||
| this.emit('select', this); | ||
| } else if (dateFns.isAfter(date, this.start)) { | ||
| this.end = date; | ||
| if (withEvents) { | ||
| this.emit('select', this); | ||
| } | ||
| this.emit('select', this); | ||
| } else if (this.options.allowSameDayRange) { | ||
| this.end = date; | ||
| if (withEvents) { | ||
| this.emit('select', this); | ||
| } | ||
| this.emit('select', this); | ||
| } else { | ||
| this.start = date; | ||
| this.end = undefined; | ||
| if (withEvents) | ||
| this.emit('select:start', this); | ||
| this.emit('select:start', this); | ||
| } | ||
@@ -704,4 +680,3 @@ } else { | ||
| this.end = undefined; | ||
| if (withEvents) | ||
| this.emit('select', this); | ||
| this.emit('select', this); | ||
| } | ||
@@ -734,5 +709,2 @@ this._visibleDate = this._isValidDate(this.start) ? this.start : this._visibleDate; | ||
| } | ||
| if (!dateFns.isDate(date)) { | ||
| date = dateFns.parse(date); | ||
| } | ||
| if (dateFns.isValid(date)) { | ||
@@ -739,0 +711,0 @@ if (!min && !max) { |
| export default (data) => { | ||
| return `<div class="datepicker"> | ||
| <div class="datepicker-nav"> | ||
| <button class="datepicker-nav-previous button is-small is-text" type="button">${data.icons.previous}</button> | ||
| <button class="datepicker-nav-previous button is-small is-text">${data.icons.previous}</button> | ||
| <div class="datepicker-nav-month-year"> | ||
@@ -10,3 +10,3 @@ <div class="datepicker-nav-month"></div> | ||
| </div> | ||
| <button class="datepicker-nav-next button is-small is-text" type="button">${data.icons.next}</button> | ||
| <button class="datepicker-nav-next button is-small is-text">${data.icons.next}</button> | ||
| </div> | ||
@@ -13,0 +13,0 @@ <div class="datepicker-body"> |
| const defaultOptions = { | ||
| startDate: undefined, | ||
| endDate: undefined, | ||
| minDate: null, | ||
| maxDate: null, | ||
| type: 'datetime', | ||
| color: 'primary', | ||
| isRange: false, | ||
| allowSameDayRange: true, | ||
| disabledDates: [], | ||
| disabledWeekDays: undefined, | ||
| lang: 'en', // internationalization | ||
| lang: navigator.language.substring(0, 2) || 'en', // internationalization | ||
| dateFormat: 'MM/DD/YYYY', | ||
| timeFormat: 'HH:mm', | ||
| displayMode: 'default', | ||
| position: 'auto', | ||
| showHeader: true, | ||
| headerPosition: 'top', | ||
| showFooter: true, | ||
| todayButton: true, | ||
| clearButton: true, | ||
| showButtons: true, | ||
| showTodayButton: true, | ||
| showClearButton: true, | ||
| cancelLabel: 'Cancel', | ||
@@ -22,9 +22,20 @@ clearLabel: 'Clear', | ||
| validateLabel: 'Validate', | ||
| enableMonthSwitch: true, | ||
| enableYearSwitch: true, | ||
| startDate: undefined, | ||
| endDate: undefined, | ||
| minDate: null, | ||
| maxDate: null, | ||
| disabledDates: [], | ||
| disabledWeekDays: undefined, | ||
| weekStart: 0, | ||
| startTime: undefined, | ||
| endTime: undefined, | ||
| minuteSteps: 5, | ||
| labelFrom: '', | ||
| labelTo: '', | ||
| weekStart: 0, | ||
| weekDaysFormat: 'ddd', | ||
| closeOnOverlayClick: true, | ||
| closeOnSelect: true, | ||
| toggleOnInputClick: true, | ||
| onReady: null, | ||
| icons: { | ||
@@ -36,2 +47,14 @@ previous: `<svg viewBox="0 0 50 80" xml:space="preserve"> | ||
| <polyline fill="none" stroke-width=".5em" stroke-linecap="round" stroke-linejoin="round" points="0.375,0.375 45.63,38.087 0.375,75.8 "/> | ||
| </svg>`, | ||
| time: `<svg version="1.1" x="0px" y="0px" viewBox="0 0 60 60" xml:space="preserve"> | ||
| <g> | ||
| <path fill="currentcolor" d="M30,0C13.458,0,0,13.458,0,30s13.458,30,30,30s30-13.458,30-30S46.542,0,30,0z M30,58C14.561,58,2,45.439,2,30S14.561,2,30,2s28,12.561,28,28S45.439,58,30,58z"/> | ||
| <path fill="currentcolor" d="M30,6c-0.552,0-1,0.447-1,1v23H14c-0.552,0-1,0.447-1,1s0.448,1,1,1h16c0.552,0,1-0.447,1-1V7C31,6.447,30.552,6,30,6z"/> | ||
| </g> | ||
| </svg>`, | ||
| date: `<svg version="1.1" x="0px" y="0px" viewBox="0 0 60 60" xml:space="preserve"> | ||
| <g> | ||
| <path d="M57,4h-7V1c0-0.553-0.447-1-1-1h-7c-0.553,0-1,0.447-1,1v3H19V1c0-0.553-0.447-1-1-1h-7c-0.553,0-1,0.447-1,1v3H3C2.447,4,2,4.447,2,5v11v43c0,0.553,0.447,1,1,1h54c0.553,0,1-0.447,1-1V16V5C58,4.447,57.553,4,57,4z M43,2h5v3v3h-5V5V2z M12,2h5v3v3h-5V5V2z M4,6h6v3c0,0.553,0.447,1,1,1h7c0.553,0,1-0.447,1-1V6h22v3c0,0.553,0.447,1,1,1h7c0.553,0,1-0.447,1-1V6h6v9H4V6zM4,58V17h52v41H4z"/> | ||
| <path d="M38,23h-7h-2h-7h-2h-9v9v2v7v2v9h9h2h7h2h7h2h9v-9v-2v-7v-2v-9h-9H38z M31,25h7v7h-7V25z M38,41h-7v-7h7V41z M22,34h7v7h-7V34z M22,25h7v7h-7V25z M13,25h7v7h-7V25z M13,34h7v7h-7V34z M20,50h-7v-7h7V50z M29,50h-7v-7h7V50z M38,50h-7v-7h7V50z M47,50h-7v-7h7V50z M47,41h-7v-7h7V41z M47,25v7h-7v-7H47z"/> | ||
| </g> | ||
| </svg>` | ||
@@ -38,0 +61,0 @@ } |
@@ -7,2 +7,3 @@ import * as utils from './utils/index'; | ||
| import datePicker from './datePicker'; | ||
| import timePicker from './timePicker'; | ||
@@ -42,12 +43,23 @@ import defaultOptions from './defaultOptions'; | ||
| this._id = utils.uuid('bulmaDatePicker'); | ||
| switch (this.element.getAttribute('type')) { | ||
| case 'date': | ||
| this.options.type = 'date'; | ||
| break; | ||
| case 'time': | ||
| this.options.type = 'time'; | ||
| break; | ||
| default: | ||
| this.options.type = 'datetime'; | ||
| break; | ||
| } | ||
| this._id = utils.uuid('datetimePicker'); | ||
| this._onToggle = this._onToggle.bind(this); | ||
| this._onClose = this._onClose.bind(this); | ||
| this._onDocumentClick = this._onDocumentClick.bind(this); | ||
| this._onValidateClick = this._onValidateClick.bind(this); | ||
| this._onTodayClick = this._onTodayClick.bind(this); | ||
| this._onClearClick = this._onClearClick.bind(this); | ||
| this._onCancelClick = this._onCancelClick.bind(this); | ||
| this._onSelectDate = this._onSelectDate.bind(this); | ||
| this.onToggleDateTimePicker = this.onToggleDateTimePicker.bind(this); | ||
| this.onCloseDateTimePicker = this.onCloseDateTimePicker.bind(this); | ||
| this.onDocumentClickDateTimePicker = this.onDocumentClickDateTimePicker.bind(this); | ||
| this.onValidateClickDateTimePicker = this.onValidateClickDateTimePicker.bind(this); | ||
| this.onTodayClickDateTimePicker = this.onTodayClickDateTimePicker.bind(this); | ||
| this.onClearClickDateTimePicker = this.onClearClickDateTimePicker.bind(this); | ||
| this.onCancelClickDateTimePicker = this.onCancelClickDateTimePicker.bind(this); | ||
| this.onSelectDateTimePicker = this.onSelectDateTimePicker.bind(this); | ||
@@ -63,14 +75,11 @@ // Initiate plugin | ||
| */ | ||
| static attach(selector = '.bulma-datepicker', options = {}) { | ||
| let instances = []; | ||
| static attach(selector = 'input[type="date"]', options = {}) { | ||
| let instances = new Array(); | ||
| const elements = types.isString(selector) ? document.querySelectorAll(selector) : Array.isArray(selector) ? selector : [selector]; | ||
| if (elements.length > 1) { | ||
| [].forEach.call(elements, ement => { | ||
| instances.push(new bulmaCalendar(ement, options)); | ||
| }); | ||
| return instances; | ||
| } else if (elements.length === 1) { | ||
| return new bulmaCalendar(elements[0], options); | ||
| } | ||
| const datetimepickers = types.isString(selector) ? document.querySelectorAll(selector) : Array.isArray(selector) ? selector : [selector]; | ||
| [].forEach.call(datetimepickers, datetimepicker => { | ||
| instances.push(new bulmaCalendar(datetimepicker, options)); | ||
| }); | ||
| return instances; | ||
| } | ||
@@ -101,2 +110,3 @@ | ||
| this.datePicker.lang = lang; | ||
| this.timePicker.lang = lang; | ||
| return this; | ||
@@ -183,2 +193,62 @@ } | ||
| /** | ||
| * * Time setter and getter | ||
| */ | ||
| set time(time = null) { | ||
| this.timePicker.time = time; | ||
| return this; | ||
| } | ||
| // Get time object | ||
| get time() { | ||
| return this.timePicker.time; | ||
| } | ||
| set startTime(time = undefined) { | ||
| this.timePicker.start = time; | ||
| return this; | ||
| } | ||
| get startTime() { | ||
| return this.timePicker.start; | ||
| } | ||
| set endTime(time = undefined) { | ||
| this.timePicker.end = time; | ||
| return this; | ||
| } | ||
| get endTime() { | ||
| return this.timePicker.end; | ||
| } | ||
| /** | ||
| * minTime getter and setters | ||
| */ | ||
| set minTime(time = undefined) { | ||
| this.timePicker.minTime = time; | ||
| return this; | ||
| } | ||
| // Get minTime | ||
| get minTime() { | ||
| return this.timePicker.minTime; | ||
| } | ||
| // Set maxTime | ||
| set maxTime(time = undefined) { | ||
| this.timePicker.maxTime = time; | ||
| return this; | ||
| } | ||
| // Get maxTime | ||
| get maxTime() { | ||
| return this.timePicker.maxTime; | ||
| } | ||
| // Set timeFormat (set to HH:MM:SS by default) | ||
| set timeFormat(timeFormat) { | ||
| this.timePicker.dateFormat = timeFormat; | ||
| return this; | ||
| } | ||
| // Get timeFormat | ||
| get timeFormat() { | ||
| return this.timePicker.timeFormat; | ||
| } | ||
| /**************************************************** | ||
@@ -189,3 +259,3 @@ * * | ||
| ****************************************************/ | ||
| _onSelectDate(e) { | ||
| onSelectDateTimePicker(e) { | ||
| this.refresh(); | ||
@@ -196,10 +266,6 @@ this.save(); | ||
| } | ||
| this.emit(e.type, e.data); | ||
| this.emit(e.type, this); | ||
| } | ||
| _onDocumentClick(e) { | ||
| if (!this._open) { | ||
| return; | ||
| } | ||
| onDocumentClickDateTimePicker(e) { | ||
| if (!this._supportsPassive) { | ||
@@ -212,8 +278,8 @@ e.preventDefault(); | ||
| const target = e.target || e.srcElement; | ||
| if (!this._ui.wrapper.contains(target) && this.options.displayMode !== 'inline') { | ||
| this._onClose(e); | ||
| if (!this._ui.wrapper.contains(target) && this.options.displayMode !== 'inline' && this._open) { | ||
| this.onCloseDateTimePicker(e); | ||
| } | ||
| } | ||
| _onToggle(e) { | ||
| onToggleDateTimePicker(e) { | ||
| if (!this._supportsPassive) { | ||
@@ -231,3 +297,3 @@ e.preventDefault(); | ||
| _onValidateClick(e) { | ||
| onValidateClickDateTimePicker(e) { | ||
| if (!this._supportsPassive) { | ||
@@ -239,9 +305,10 @@ e.preventDefault(); | ||
| this.save(); | ||
| this.emit('select', this); | ||
| if (this.options.displayMode !== 'inline') { | ||
| this._onClose(e); | ||
| this.onCloseDateTimePicker(e); | ||
| } | ||
| } | ||
| _onTodayClick(e) { | ||
| onTodayClickDateTimePicker(e) { | ||
| if (!this._supportsPassive) { | ||
@@ -255,2 +322,5 @@ e.preventDefault(); | ||
| this.timePicker.value(new Date()); | ||
| this.timePicker.refresh(); | ||
| // TODO: check if closeOnSelect | ||
@@ -260,3 +330,3 @@ this.save(); | ||
| _onClearClick(e) { | ||
| onClearClickDateTimePicker(e) { | ||
| if (!this._supportsPassive) { | ||
@@ -270,3 +340,3 @@ e.preventDefault(); | ||
| _onCancelClick(e) { | ||
| onCancelClickDateTimePicker(e) { | ||
| if (!this._supportsPassive) { | ||
@@ -279,10 +349,11 @@ e.preventDefault(); | ||
| this.datePicker = this._snapshots[0].datePicker; | ||
| this.timePicker = this._snapshots[0].timePicker; | ||
| } | ||
| this.save(); | ||
| if (this.options.displayMode !== 'inline') { | ||
| this._onClose(e); | ||
| this.onCloseDateTimePicker(e); | ||
| } | ||
| } | ||
| _onClose(e) { | ||
| onCloseDateTimePicker(e) { | ||
| if (!this._supportsPassive) { | ||
@@ -315,3 +386,3 @@ e.preventDefault(); | ||
| /** | ||
| * Get / Set ement value | ||
| * Get / Set datetimePicker value | ||
| * @param {*} date | ||
@@ -322,5 +393,29 @@ */ | ||
| this.datePicker.value(value); | ||
| this.refresh(); | ||
| this.timePicker.value(value); | ||
| } else { | ||
| return this.datePicker.value(); | ||
| let string = ''; | ||
| switch (this.options.type) { | ||
| case 'date': | ||
| string = this.datePicker.value(); | ||
| break; | ||
| case 'time': | ||
| string = this.timePicker.value(); | ||
| break; | ||
| case 'datetime': | ||
| let start = this.datePicker.start ? dateFns.getTime(dateFns.addMinutes(dateFns.addHours(this.datePicker.start, dateFns.getHours(this.timePicker.start)), dateFns.getMinutes(this.timePicker.start))) : undefined; | ||
| let end = this.datePicker.end ? dateFns.getTime(this.datePicker.end) : undefined; | ||
| if (end && this.options.isRange) { | ||
| end = dateFns.getTime(dateFns.addMinutes(dateFns.addHours(this.datePicker.end, dateFns.getHours(this.timePicker.end)), dateFns.getMinutes(this.timePicker.end))); | ||
| } | ||
| string = start ? dateFns.format(new Date(start), this.format, { | ||
| locale: this.locale | ||
| }) : ''; | ||
| if (end) { | ||
| string += ` - ${end ? dateFns.format(new Date(end), this.format, { locale: this.locale }) : ''}`; | ||
| } | ||
| break; | ||
| } | ||
| return string; | ||
| } | ||
@@ -345,2 +440,8 @@ } | ||
| if (this._ui.header.start.hour) { | ||
| this._ui.header.start.hour.innerHTML = this.timePicker.start ? dateFns.format(this.timePicker.start, 'HH:mm', { | ||
| locale: this.locale | ||
| }) : '--:--'; | ||
| } | ||
| if (this._ui.header.end) { | ||
@@ -361,4 +462,9 @@ this._ui.header.end.day.innerHTML = this.options.isRange && this.datePicker.end ? dateFns.format(this.datePicker.end, 'DD', { | ||
| } | ||
| if (this._ui.header.end && this._ui.header.end.hour) { | ||
| this._ui.header.end.hour.innerHTML = this.timePicker.end ? dateFns.format(this.timePicker.end, 'HH:mm', { | ||
| locale: this.locale | ||
| }) : '--:--'; | ||
| } | ||
| } | ||
| this.datePicker.refresh(); | ||
| this.emit('refresh', this); | ||
@@ -369,5 +475,10 @@ } | ||
| this.datePicker.clear(); | ||
| this.timePicker.clear(); | ||
| this.refresh(); | ||
| this.element.value = ''; | ||
| this._ui.dummy.dummy_1.value = ''; | ||
| if (this._ui.dummy.dummy_2) { | ||
| this._ui.dummy.dummy_2.value = ''; | ||
| } | ||
| this.emit('clear', this); | ||
@@ -387,6 +498,7 @@ } | ||
| this.datePicker.value(this.element.value); | ||
| this.refresh(); | ||
| this.timePicker.value(this.element.value); | ||
| } | ||
| this.datePicker.show(); | ||
| this.timePicker.hide(); | ||
@@ -419,3 +531,8 @@ if (this._ui.modal) { | ||
| const date = this.value(); | ||
| const [start, end] = date.split(' - '); | ||
| this.element.value = date; | ||
| this._ui.dummy.dummy_1.value = start ? start : ''; | ||
| if (this._ui.dummy.dummy_2) { | ||
| this._ui.dummy.dummy_2.value = end ? end : ''; | ||
| } | ||
| } | ||
@@ -452,2 +569,5 @@ | ||
| this._snapshots = []; // Use to revert selection | ||
| // Set component type (date / time / datetime) | ||
| this.options.type = (['date', 'time', 'datetime'].indexOf(this.element.getAttribute('type').toLowerCase()) > -1) ? this.element.getAttribute('type').toLowerCase() : this.options.type; | ||
| this._type = (['date', 'time', 'datetime'].indexOf(this.options.type.toLowerCase()) > -1) ? this.options.type.toLowerCase() : 'date'; | ||
| // Change element type to prevent browser default type="date" behavior | ||
@@ -459,5 +579,9 @@ this.element.setAttribute('type', 'text'); | ||
| }); | ||
| this.timePicker = new timePicker({ | ||
| ...this.options, | ||
| lang: this.lang | ||
| }); | ||
| if (this.element.value) { | ||
| this.datePicker.value(this.element.value); | ||
| this.timePicker.value(this.element.value); | ||
| } | ||
@@ -467,3 +591,3 @@ | ||
| // Set export format based on component type | ||
| this.format = this._type === 'date' ? this.options.dateFormat : `${this.options.dateFormat}`; | ||
| this.format = this._type === 'date' ? this.options.dateFormat : (this._type === 'time' ? this.options.timeFormat : `${this.options.dateFormat} ${this.options.timeFormat}`); | ||
@@ -485,2 +609,5 @@ // Force dialog display mode on mobile devices | ||
| if (types.isFunction(this.options.onReady)) { | ||
| this.on('ready', this.options.onReady); | ||
| } | ||
| this.emit('ready', this); | ||
@@ -490,3 +617,3 @@ } | ||
| /** | ||
| * Build datePicker HTML component and bulmaCalendarend it to the DOM | ||
| * Build datePicker HTML component and append it to the DOM | ||
| * @method _build | ||
@@ -499,6 +626,7 @@ * @return {datePicker} Current plugin instance | ||
| type: this._type, | ||
| datePicker: this.options.type !== 'time' | ||
| datePicker: this.options.type !== 'time', | ||
| timePicker: this.options.type !== 'date' | ||
| })); | ||
| const footerNode = document.createRange().createContextualFragment(templateFooter(this.options)); | ||
| const elementNode = document.createRange().createContextualFragment(template({ | ||
| const datetimePickerNode = document.createRange().createContextualFragment(template({ | ||
| ...this.options, | ||
@@ -510,39 +638,45 @@ id: this.id | ||
| this._ui = { | ||
| modal: elementNode.querySelector('.modal'), | ||
| wrapper: elementNode.querySelector('.bulma-datepicker'), | ||
| container: elementNode.querySelector('.bulma-datepicker-container'), | ||
| calendar: elementNode.querySelector('.ement'), | ||
| modal: datetimePickerNode.querySelector('.modal'), | ||
| wrapper: datetimePickerNode.querySelector('.datetimepicker'), | ||
| container: datetimePickerNode.querySelector('.datetimepicker-container'), | ||
| dummy: { | ||
| container: datetimePickerNode.querySelector('.datetimepicker-dummy'), | ||
| wrapper: datetimePickerNode.querySelector('.datetimepicker-dummy-wrapper'), | ||
| dummy_1: datetimePickerNode.querySelector('.datetimepicker-dummy .datetimepicker-dummy-input:nth-child(1)'), | ||
| dummy_2: datetimePickerNode.querySelector('.datetimepicker-dummy .datetimepicker-dummy-input:nth-child(2)'), | ||
| clear: datetimePickerNode.querySelector('.datetimepicker-dummy .datetimepicker-clear-button') | ||
| }, | ||
| calendar: datetimePickerNode.querySelector('.datetimepicker'), | ||
| overlay: this.options.displayMode === 'dialog' ? { | ||
| background: elementNode.querySelector('.modal-background'), | ||
| close: elementNode.querySelector('.modal-close') | ||
| background: datetimePickerNode.querySelector('.modal-background'), | ||
| close: datetimePickerNode.querySelector('.modal-close') | ||
| } : undefined, | ||
| header: { | ||
| container: headerNode.querySelector('.bulma-datepicker-header'), | ||
| container: headerNode.querySelector('.datetimepicker-header'), | ||
| start: { | ||
| container: headerNode.querySelector('.bulma-datepicker-selection-start'), | ||
| day: headerNode.querySelector('.bulma-datepicker-selection-start .bulma-datepicker-selection-day'), | ||
| month: headerNode.querySelector('.bulma-datepicker-selection-start .bulma-datepicker-selection-month'), | ||
| weekday: headerNode.querySelector('.bulma-datepicker-selection-start .bulma-datepicker-selection-weekday'), | ||
| empty: headerNode.querySelector('.bulma-datepicker-selection-start .empty') | ||
| container: headerNode.querySelector('.datetimepicker-selection-start'), | ||
| day: headerNode.querySelector('.datetimepicker-selection-start .datetimepicker-selection-day'), | ||
| month: headerNode.querySelector('.datetimepicker-selection-start .datetimepicker-selection-month'), | ||
| weekday: headerNode.querySelector('.datetimepicker-selection-start .datetimepicker-selection-weekday'), | ||
| hour: headerNode.querySelector('.datetimepicker-selection-start .datetimepicker-selection-hour'), | ||
| empty: headerNode.querySelector('.datetimepicker-selection-start .empty') | ||
| }, | ||
| end: this.options.isRange ? { | ||
| container: headerNode.querySelector('.bulma-datepicker-selection-end'), | ||
| day: headerNode.querySelector('.bulma-datepicker-selection-end .bulma-datepicker-selection-day'), | ||
| month: headerNode.querySelector('.bulma-datepicker-selection-end .bulma-datepicker-selection-month'), | ||
| weekday: headerNode.querySelector('.bulma-datepicker-selection-end .bulma-datepicker-selection-weekday'), | ||
| empty: headerNode.querySelector('.bulma-datepicker-selection-start .empty') | ||
| container: headerNode.querySelector('.datetimepicker-selection-end'), | ||
| day: headerNode.querySelector('.datetimepicker-selection-end .datetimepicker-selection-day'), | ||
| month: headerNode.querySelector('.datetimepicker-selection-end .datetimepicker-selection-month'), | ||
| weekday: headerNode.querySelector('.datetimepicker-selection-end .datetimepicker-selection-weekday'), | ||
| hour: headerNode.querySelector('.datetimepicker-selection-end .datetimepicker-selection-hour'), | ||
| empty: headerNode.querySelector('.datetimepicker-selection-start .empty') | ||
| } : undefined | ||
| }, | ||
| footer: { | ||
| container: footerNode.querySelector('.bulma-datepicker-footer'), | ||
| validate: footerNode.querySelector('.bulma-datepicker-footer-validate'), | ||
| today: footerNode.querySelector('.bulma-datepicker-footer-today'), | ||
| clear: footerNode.querySelector('.bulma-datepicker-footer-clear'), | ||
| cancel: footerNode.querySelector('.bulma-datepicker-footer-cancel'), | ||
| container: footerNode.querySelector('.datetimepicker-footer'), | ||
| validate: footerNode.querySelector('.datetimepicker-footer-validate'), | ||
| today: footerNode.querySelector('.datetimepicker-footer-today'), | ||
| clear: footerNode.querySelector('.datetimepicker-footer-clear'), | ||
| cancel: footerNode.querySelector('.datetimepicker-footer-cancel'), | ||
| } | ||
| }; | ||
| if (!this.options.showHeader) { | ||
| this._ui.header.container.classList.add('is-hidden'); | ||
| } | ||
| if (!this.options.showFooter) { | ||
@@ -563,18 +697,39 @@ this._ui.footer.container.classList.add('is-hidden'); | ||
| this._ui.container.appendChild(headerNode); | ||
| this._ui.container.appendChild(this.datePicker.render()); | ||
| switch (this._type) { | ||
| case 'date': | ||
| this._ui.container.appendChild(this.datePicker.render()); | ||
| break; | ||
| case 'time': | ||
| this._ui.container.appendChild(this.timePicker.render()); | ||
| if (this._ui.footer.validate) { | ||
| this._ui.footer.validate.classList.remove('is-hidden'); | ||
| } | ||
| if (this._ui.footer.today) { | ||
| this._ui.footer.today.classList.add('is-hidden'); | ||
| } | ||
| break; | ||
| case 'datetime': | ||
| this.options.closeOnSelect = false; | ||
| if (this._ui.footer.validate) { | ||
| this._ui.footer.validate.classList.remove('is-hidden'); | ||
| } | ||
| this._ui.container.appendChild(this.datePicker.render()); | ||
| this._ui.container.appendChild(this.timePicker.render()); | ||
| break; | ||
| } | ||
| this._ui.wrapper.appendChild(footerNode); | ||
| this._ui.wrapper.classList.add(`is-${this.options.color}`); | ||
| this._ui.dummy.container.classList.add(`is-${this.options.color}`); | ||
| // Add datepicker HTML element to Document Body | ||
| this.element.parentNode.insertBefore(elementNode, this.element.nextSibling); | ||
| // this.element.classList.add('is-hidden'); | ||
| this.element.parentNode.insertBefore(datetimePickerNode, this.element.nextSibling); | ||
| this._ui.dummy.wrapper.appendChild(this.element); | ||
| this.element.classList.add('is-hidden'); | ||
| // this.element.style.visibility = 'hidden'; | ||
| // this.element.style.position = 'absolute'; | ||
| if (this.element.getAttribute('type') === 'date') { | ||
| this.element.setAttributes('type', 'text'); | ||
| } | ||
| if (this.options.displayMode === 'inline') { | ||
| this._ui.wrapper.classList.add('is-active'); | ||
| this.element.classList.add('is-hidden'); | ||
| } else { | ||
| this._ui.dummy.container.classList.remove('is-hidden'); | ||
| this._ui.wrapper.style.position = 'absolute'; | ||
@@ -593,8 +748,11 @@ this._ui.wrapper.classList.add('is-datetimepicker-default'); | ||
| this._clickEvents.forEach(clickEvent => { | ||
| document.body.addEventListener(clickEvent, this._onDocumentClick); | ||
| document.body.addEventListener(clickEvent, this.onDocumentClickDateTimePicker); | ||
| }); | ||
| this.datePicker.on('select', this._onSelectDate); | ||
| this.datePicker.on('select:start', this._onSelectDate); | ||
| this.datePicker.on('select:end', this._onSelectDate); | ||
| this.datePicker.on('select', this.onSelectDateTimePicker); | ||
| this.datePicker.on('select:start', this.onSelectDateTimePicker); | ||
| this.datePicker.on('select:end', this.onSelectDateTimePicker); | ||
| this.timePicker.on('select', this.onSelectDateTimePicker); | ||
| this.timePicker.on('select:start', this.onSelectDateTimePicker); | ||
| this.timePicker.on('select:end', this.onSelectDateTimePicker); | ||
@@ -604,3 +762,4 @@ // Bind event to element in order to display/hide datePicker on click | ||
| this._clickEvents.forEach(clickEvent => { | ||
| this.element.addEventListener(clickEvent, this._onToggle); | ||
| this._ui.dummy.wrapper.addEventListener(clickEvent, this.onToggleDateTimePicker); | ||
| this.element.addEventListener(clickEvent, this.onToggleDateTimePicker); | ||
| }); | ||
@@ -613,3 +772,3 @@ } | ||
| this._clickEvents.forEach(clickEvent => { | ||
| this.this._ui.overlay.close.addEventListener(clickEvent, this._onClose); | ||
| this.this._ui.overlay.close.addEventListener(clickEvent, this.onCloseDateTimePicker); | ||
| }); | ||
@@ -620,3 +779,3 @@ } | ||
| this._clickEvents.forEach(clickEvent => { | ||
| this._ui.overlay.background.addEventListener(clickEvent, this._onClose); | ||
| this._ui.overlay.background.addEventListener(clickEvent, this.onCloseDateTimePicker); | ||
| }); | ||
@@ -628,3 +787,3 @@ } | ||
| this._clickEvents.forEach(clickEvent => { | ||
| this._ui.footer.validate.addEventListener(clickEvent, this._onValidateClick); | ||
| this._ui.footer.validate.addEventListener(clickEvent, this.onValidateClickDateTimePicker); | ||
| }); | ||
@@ -634,3 +793,3 @@ } | ||
| this._clickEvents.forEach(clickEvent => { | ||
| this._ui.footer.today.addEventListener(clickEvent, this._onTodayClick); | ||
| this._ui.footer.today.addEventListener(clickEvent, this.onTodayClickDateTimePicker); | ||
| }); | ||
@@ -640,14 +799,14 @@ } | ||
| this._clickEvents.forEach(clickEvent => { | ||
| this._ui.footer.clear.addEventListener(clickEvent, this._onClearClick); | ||
| this._ui.footer.clear.addEventListener(clickEvent, this.onClearClickDateTimePicker); | ||
| }); | ||
| } | ||
| this._clickEvents.forEach(clickEvent => { | ||
| // this._ui.dummy.clear.addEventListener(clickEvent, this._onClearClick); | ||
| this._ui.dummy.clear.addEventListener(clickEvent, this.onClearClickDateTimePicker); | ||
| }); | ||
| if (this._ui.footer.cancel) { | ||
| this._clickEvents.forEach(clickEvent => { | ||
| this._ui.footer.cancel.addEventListener(clickEvent, this._onCancelClick); | ||
| this._ui.footer.cancel.addEventListener(clickEvent, this.onCancelClickDateTimePicker); | ||
| }); | ||
| } | ||
| } | ||
| } | ||
| } |
| export default (data) => { | ||
| return `<div class="bulma-datepicker-footer"> | ||
| <button class="bulma-datepicker-footer-validate has-text-success button is-small is-text ${data.displayMode === 'inline' ? 'is-hidden' : ''}" type="button">${data.icons.validate ? data.icons.validate : ''}${data.validateLabel} </button> | ||
| <button class="bulma-datepicker-footer-today has-text-warning button is-small is-text" type="button">${data.icons.today ? data.icons.today : ''}${data.todayLabel}</button> | ||
| <button class="bulma-datepicker-footer-clear has-text-danger button is-small is-text" type="button">${data.icons.clear ? data.icons.clear : ''}${data.clearLabel}</button> | ||
| <button class="bulma-datepicker-footer-cancel button is-small is-text ${data.displayMode === 'inline' ? 'is-hidden' : ''}" type="button">${data.icons.cancel ? data.icons.cancel : ''}${data.cancelLabel}</button> | ||
| return `<div class="datetimepicker-footer"> | ||
| <button class = "datetimepicker-footer-validate has-text-success button is-small is-text ${data.displayMode === 'inline' ? 'is-hidden' : ''}">${data.icons.validate ? data.icons.validate : ''}${data.validateLabel} </button> | ||
| <button class = "datetimepicker-footer-today has-text-warning button is-small is-text">${data.icons.today ? data.icons.today : ''}${data.todayLabel}</button> | ||
| <button class = "datetimepicker-footer-clear has-text-danger button is-small is-text">${data.icons.clear ? data.icons.clear : ''}${data.clearLabel}</button> | ||
| <button class = "datetimepicker-footer-cancel button is-small is-text ${data.displayMode === 'inline' ? 'is-hidden' : ''}">${data.icons.cancel ? data.icons.cancel : ''}${data.cancelLabel}</button> | ||
| </div>`; | ||
| }; |
| export default (data) => { | ||
| return `<div class="bulma-datepicker-header${data.type === 'time' ? ' is-hidden' : ''}${data.type === 'date' ? ' is-date-only' : ''}"> | ||
| <div class="bulma-datepicker-selection-details"> | ||
| <div class="bulma-datepicker-selection-from${data.labelFrom === '' ? ' is-hidden' : ''}">${data.labelFrom}</div> | ||
| <div class="bulma-datepicker-selection-start${data.isRange ? '' : ' is-centered'}"> | ||
| <div class="bulma-datepicker-selection-wrapper"> | ||
| <div class="bulma-datepicker-selection-day"></div> | ||
| <div class="bulma-datepicker-selection-date"> | ||
| <div class="bulma-datepicker-selection-month"></div> | ||
| <div class="bulma-datepicker-selection-weekday"></div> | ||
| return `<div class="datetimepicker-header${data.type === 'time' ? ' is-hidden' : ''}${data.type === 'date' ? ' is-date-only' : ''}"> | ||
| <div class="datetimepicker-selection-details"> | ||
| <div class="datetimepicker-selection-from${data.labelFrom === '' ? ' is-hidden' : ''}">${data.labelFrom}</div> | ||
| <div class="datetimepicker-selection-start${data.isRange ? '' : ' is-centered'}"> | ||
| <div class="datetimepicker-selection-wrapper"> | ||
| <div class="datetimepicker-selection-day"></div> | ||
| <div class="datetimepicker-selection-date"> | ||
| <div class="datetimepicker-selection-month"></div> | ||
| <div class="datetimepicker-selection-weekday"></div> | ||
| </div> | ||
| </div> | ||
| ${data.type !== 'date' ? `<div class="datetimepicker-selection-time"> | ||
| <div class="datetimepicker-selection-time-icon"> | ||
| <figure class="image is-16x16"> | ||
| ${data.icons ? data.icons.time : ''} | ||
| </figure> | ||
| </div> | ||
| <div class="datetimepicker-selection-hour"></div> | ||
| </div>` : ''} | ||
| </div> | ||
| </div> | ||
| ${data.isRange ? ` | ||
| <div class="bulma-datepicker-selection-details"> | ||
| <div class="bulma-datepicker-selection-to${data.labelTo === '' ? ' is-hidden' : ''}">${data.labelTo}</div> | ||
| <div class="bulma-datepicker-selection-end"> | ||
| <div class="bulma-datepicker-selection-wrapper"> | ||
| <div class="bulma-datepicker-selection-day"></div> | ||
| <div class="bulma-datepicker-selection-date"> | ||
| <div class="bulma-datepicker-selection-month"></div> | ||
| <div class="bulma-datepicker-selection-weekday"></div> | ||
| <div class="datetimepicker-selection-details"> | ||
| <div class="datetimepicker-selection-to${data.labelTo === '' ? ' is-hidden' : ''}">${data.labelTo}</div> | ||
| <div class="datetimepicker-selection-end"> | ||
| <div class="datetimepicker-selection-wrapper"> | ||
| <div class="datetimepicker-selection-day"></div> | ||
| <div class="datetimepicker-selection-date"> | ||
| <div class="datetimepicker-selection-month"></div> | ||
| <div class="datetimepicker-selection-weekday"></div> | ||
| </div> | ||
| </div> | ||
| ${data.type !== 'date' ? `<div class="datetimepicker-selection-time"> | ||
| <div class="datetimepicker-selection-time-icon"> | ||
| <figure class="image is-16x16"> | ||
| ${data.icons ? data.icons.time : ''} | ||
| </figure> | ||
| </div> | ||
| <div class="datetimepicker-selection-hour"></div> | ||
| </div>` : ''} | ||
| </div> | ||
@@ -27,0 +43,0 @@ </div>` : ''} |
| export default (data) => { | ||
| return `<div id='${data.id}'> | ||
| <div class="bulma-datepicker-wrapper${data.displayMode === 'dialog' ? ' modal' : ''}"> | ||
| <div class="datetimepicker-dummy is-hidden"> | ||
| <div class="datetimepicker-dummy-wrapper"> | ||
| <input placeholder="${data.labelFrom}" readonly="readonly" class="datetimepicker-dummy-input${data.isRange ? ' is-datetimepicker-range' : ''}" type="text"> | ||
| ${data.isRange ? `<input placeholder="${data.labelTo}" readonly="readonly" class="datetimepicker-dummy-input" type="text">`: ''} | ||
| </div> | ||
| <button class="datetimepicker-clear-button">＋</button> | ||
| </div> | ||
| <div class="dateimepicker-wrapper${data.displayMode === 'dialog' ? ' modal' : ''}"> | ||
| <div class="modal-background${data.displayMode === 'dialog' ? '' : ' is-hidden'}"></div> | ||
| <div class="bulma-datepicker"> | ||
| <div class="bulma-datepicker-container${data.headerPosition === 'top' ? '' : ' has-header-bottom'}"></div> | ||
| <div class="datetimepicker"> | ||
| <div class="datetimepicker-container${data.headerPosition === 'top' ? '' : ' has-header-bottom'}"></div> | ||
| </div> | ||
@@ -8,0 +15,0 @@ </div> |
| export default (data) => { | ||
| return `<div class="bulma-datepicker-selection${data.type === 'time' ? ' is-hidden' : ''}${data.type === 'date' ? ' is-date-only' : ''}"> | ||
| <div class="bulma-datepicker-selection-details"> | ||
| <div class="bulma-datepicker-selection-from${data.labels.from === '' ? ' is-hidden' : ''}">${data.labels.from}</div> | ||
| <div class="bulma-datepicker-selection-start${data.isRange ? '' : ' is-centered'}"> | ||
| <div class="bulma-datepicker-selection-wrapper"> | ||
| <div class="bulma-datepicker-selection-day"></div> | ||
| <div class="bulma-datepicker-selection-date"> | ||
| <div class="bulma-datepicker-selection-month"></div> | ||
| <div class="bulma-datepicker-selection-weekday"></div> | ||
| return `<div class="datetimepicker-selection${data.type === 'time' ? ' is-hidden' : ''}${data.type === 'date' ? ' is-date-only' : ''}"> | ||
| <div class="datetimepicker-selection-details"> | ||
| <div class="datetimepicker-selection-from${data.labels.from === '' ? ' is-hidden' : ''}">${data.labels.from}</div> | ||
| <div class="datetimepicker-selection-start${data.isRange ? '' : ' is-centered'}"> | ||
| <div class="datetimepicker-selection-wrapper"> | ||
| <div class="datetimepicker-selection-day"></div> | ||
| <div class="datetimepicker-selection-date"> | ||
| <div class="datetimepicker-selection-month"></div> | ||
| <div class="datetimepicker-selection-weekday"></div> | ||
| </div> | ||
| </div> | ||
| ${data.type !== 'date' ? `<div class="datetimepicker-selection-time"> | ||
| <div class="datetimepicker-selection-time-icon"> | ||
| <figure class="image is-16x16"> | ||
| ${data.icons ? data.icons.time : ''} | ||
| </figure> | ||
| </div> | ||
| </div>` : ''} | ||
| </div> | ||
| </div> | ||
| ${data.isRange ? ` | ||
| <div class="bulma-datepicker-selection-details"> | ||
| <div class="bulma-datepicker-selection-to${data.labels.to === '' ? ' is-hidden' : ''}">${data.labels.to}</div> | ||
| <div class="bulma-datepicker-selection-end"> | ||
| <div class="bulma-datepicker-selection-wrapper"> | ||
| <div class="bulma-datepicker-selection-day"></div> | ||
| <div class="bulma-datepicker-selection-date"> | ||
| <div class="bulma-datepicker-selection-month"></div> | ||
| <div class="bulma-datepicker-selection-weekday"></div> | ||
| <div class="datetimepicker-selection-details"> | ||
| <div class="datetimepicker-selection-to${data.labels.to === '' ? ' is-hidden' : ''}">${data.labels.to}</div> | ||
| <div class="datetimepicker-selection-end"> | ||
| <div class="datetimepicker-selection-wrapper"> | ||
| <div class="datetimepicker-selection-day"></div> | ||
| <div class="datetimepicker-selection-date"> | ||
| <div class="datetimepicker-selection-month"></div> | ||
| <div class="datetimepicker-selection-weekday"></div> | ||
| </div> | ||
| </div> | ||
| ${data.type !== 'date' ? `<div class="datetimepicker-selection-time"> | ||
| <div class="datetimepicker-selection-time-icon"> | ||
| <figure class="image is-16x16"> | ||
| ${data.icons ? data.icons.time : ''} | ||
| </figure> | ||
| </div> | ||
| </div>` : ''} | ||
| </div> | ||
@@ -27,0 +41,0 @@ </div>` : ''} |
@@ -120,3 +120,3 @@ export default class EventEmitter { | ||
| type: name, | ||
| timestamp: (new Date()).getTime(), | ||
| timeStamp: (new Date()).getTime(), | ||
| data: data | ||
@@ -123,0 +123,0 @@ }); |
| export const uuid = (prefix = '') => prefix + ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c => (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)); | ||
| export const deepMerge = (...sources) => { | ||
| let acc = {} | ||
| for (const source of sources) { | ||
| if (source instanceof Array) { | ||
| if (!(acc instanceof Array)) { | ||
| acc = [] | ||
| } | ||
| acc = [...acc, ...source] | ||
| } else if (source instanceof Object) { | ||
| for (let [key, value] of Object.entries(source)) { | ||
| if (value instanceof Object && key in acc) { | ||
| value = deepMerge(acc[key], value) | ||
| } | ||
| acc = { ...acc, | ||
| [key]: value | ||
| } | ||
| } | ||
| } | ||
| } | ||
| return acc; | ||
| }; | ||
@@ -3,0 +24,0 @@ export const detectSupportsPassive = () => { |
| export const isFunction = unknown => typeof unknown === 'function'; | ||
| export const isString = unknown => (typeof unknown === 'string' || ((!!unknown && typeof unknown === 'object') && Object.prototype.toString.call(unknown) === '[object String]')); | ||
| export const isDate = unknown => (Object.prototype.toString.call(unknown) === '[object Date]' || unknown instanceof Date) && !isNaN(unknown.valueOf()); | ||
| export const isObject = unknown => ((typeof unknown === 'function' || (typeof unknown === 'object' && !!unknown)) && !Array.isArray(unknown)); |
@@ -6,3 +6,3 @@ { | ||
| "style": "./dist/css/bulma-extensions.min.css", | ||
| "version": "4.1.1", | ||
| "version": "6.0.0", | ||
| "scripts": { | ||
@@ -9,0 +9,0 @@ "build": "gulp", |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by5.76%
3285929
- Number of package files
- increased by6.88%
202
- Lines of code
- increased by3.11%
57054
Worsened metrics
- Number of low supply chain risk alerts
- increased by33.33%
4
No dependency changes