refactor: fix eslint warnings

Author: mrholek

docs/assets/js/modal-first-visit-discount.js

@@ -1,33 +1,37 @@
+/* eslint-disable strict */
 // Get Cookie
 
 const getCookie = cname => {
   const name = `${cname}=`
   const decodedCookie = decodeURIComponent(document.cookie)
   const ca = decodedCookie.split(';')
-  for(let i = 0; i <ca.length; i++) {
-    var c = ca[i]
-    while (c.charAt(0) == ' ') {
-      c = c.substring(1)
+  for (let c of ca) {
+    while (c.charAt(0) === ' ') {
+      c = c.slice(1)
     }
+
     if (c.indexOf(name) == 0) {
+      // eslint-disable-next-line unicorn/prefer-string-slice
       return c.substring(name.length, c.length)
     }
   }
-  return '';
+
+  return ''
 }
 
 // Set Cookie
 const setCookie = (cname, cvalue, exdays) => {
   const d = new Date()
-  d.setTime(d.getTime() + (exdays*24*60*60*1000))
-  var expires = 'expires='+ d.toUTCString()
+  // eslint-disable-next-line no-mixed-operators
+  d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000)
+  const expires = `expires=${d.toUTCString()}`
+  // eslint-disable-next-line unicorn/no-document-cookie
   document.cookie = `${cname}=${cvalue};${expires};path=/`
 }
 
 const checkIfFirstVisit = () => {
   const modalContainerEl = document.createElement('div')
-  modalContainerEl.innerHTML =
-  `
+  modalContainerEl.innerHTML = `
   <div class="modal fade" id="modal-first-visit" tabindex="-1" role="dialog" aria-label="Downloads" aria-hidden="true">
     <div class="modal-dialog modal-xl" role="document">
       <div class="modal-content">
@@ -101,17 +105,20 @@ const checkIfFirstVisit = () => {
     </div>
   </div>
   `
-  document.body.appendChild(modalContainerEl);
+  document.body.append(modalContainerEl)
 
   setTimeout(() => {
-    const myModalEl = new coreui.Modal(document.getElementById('modal-first-visit'))
+    // eslint-disable-next-line no-undef
+    const myModalEl = new coreui.Modal(
+      document.getElementById('modal-first-visit')
+    )
     myModalEl.toggle()
     setCookie('firstVisit', true, 365)
   }, 2500)
 }
 
-window.onload = function() {
+window.addEventListener('load', () => {
   if (getCookie('firstVisit') !== 'true') {
     checkIfFirstVisit()
   }
-};
+})

docs/content/components/loading-buttons.md

@@ -116,8 +116,8 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
 </table>
 
 ```js
-var myBtnLoading = document.getElementById('btn-loading')
-var myBtn = new coreui.LoadingButton(myBtnLoading)
+const myBtnLoading = document.getElementById('btn-loading')
+const myBtn = new coreui.LoadingButton(myBtnLoading)
 myBtn.start()
 ```
 
@@ -153,8 +153,8 @@ Multi Select component exposes a few events for hooking into multi select functi
 </table>
 
 ```js
-var myBtnLoading = document.getElementById('myBtnLoading')
-myBtnLoading.addEventListener('stop.coreui.loading-button', function () {
+const myBtnLoading = document.getElementById('myBtnLoading')
+myBtnLoading.addEventListener('stop.coreui.loading-button', () => {
   // do something...
 })
 ```

docs/content/forms/date-picker.md

@@ -97,7 +97,7 @@ Add the `data-coreui-input-read-only="true"` boolean attribute to prevent modifi
 {{< /example >}}
 
 ```js
-var options = {
+const options = {
   locale: 'en-US',
   calendarDate: new Date(2022, 2, 1),
   disabledDates: [
@@ -110,7 +110,7 @@ var options = {
   minDate: new Date(2022, 1, 1)
 }
 
-var myDatePickerDisabledDates = new coreui.DatePicker(document.getElementById('myDatePickerDisabledDates'), options)
+const myDatePickerDisabledDates = new coreui.DatePicker(document.getElementById('myDatePickerDisabledDates'), options)
 ```
 
 ## Non-english locale
@@ -198,8 +198,8 @@ Call the time picker via JavaScript:
 ```
 
 ```js
-var datePickerElementList = Array.prototype.slice.call(document.querySelectorAll('.date-picker'))
-var datePickerList = datePickerElementList.map(function (datePickerEl) {
+const datePickerElementList = Array.prototype.slice.call(document.querySelectorAll('.date-picker'))
+const datePickerList = datePickerElementList.map(function (datePickerEl) {
   return new coreui.DatePicker(datePickerEl)
 })
 ```
@@ -448,7 +448,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
 </table>
 
 ```js
-var myDatePicker = document.getElementById('myDatePicker')
+const myDatePicker = document.getElementById('myDatePicker')
 myDatePicker.addEventListener('dateChange.coreui.date-picker', function (date) {
   // do something...
 })

docs/content/forms/date-range-picker.md

@@ -124,7 +124,7 @@ Add the `data-coreui-input-read-only="true"` boolean attribute to prevent modifi
 {{< /example >}}
 
 ```js
-var options = {
+const options = {
   locale: 'en-US',
   calendarDate: new Date(2022, 2, 1),
   disabledDates: [
@@ -137,7 +137,7 @@ var options = {
   minDate: new Date(2022, 1, 1)
 }
 
-var myDateRangePickerDisabledDates = new coreui.DateRangePicker(document.getElementById('myDateRangePickerDisabledDates'), options)
+const myDateRangePickerDisabledDates = new coreui.DateRangePicker(document.getElementById('myDateRangePickerDisabledDates'), options)
 ```
 
 ## Custom ranges
@@ -151,34 +151,34 @@ var myDateRangePickerDisabledDates = new coreui.DateRangePicker(document.getElem
 {{< /example >}}
 
 ```js
-var optionsCustomRanges = {
+const optionsCustomRanges = {
   locale: 'en-US',
   ranges: {
     Today: [new Date(), new Date()],
     Yesterday: [
       new Date(new Date().setDate(new Date().getDate() - 1)),
-      new Date(new Date().setDate(new Date().getDate() - 1)),
+      new Date(new Date().setDate(new Date().getDate() - 1))
     ],
     'Last 7 Days': [
       new Date(new Date().setDate(new Date().getDate() - 6)),
-      new Date(new Date()),
+      new Date(new Date())
     ],
     'Last 30 Days': [
       new Date(new Date().setDate(new Date().getDate() - 29)),
-      new Date(new Date()),
+      new Date(new Date())
     ],
     'This Month': [
       new Date(new Date().setDate(1)),
-      new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0),
+      new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0)
     ],
     'Last Month': [
       new Date(new Date().getFullYear(), new Date().getMonth() - 1, 1),
-      new Date(new Date().getFullYear(), new Date().getMonth(), 0),
+      new Date(new Date().getFullYear(), new Date().getMonth(), 0)
     ]
   }
 }
 
-var myDateRangePickerCustomRanges = new coreui.DateRangePicker(document.getElementById('myDateRangePickerCustomRanges'), optionsCustomRanges)
+const myDateRangePickerCustomRanges = new coreui.DateRangePicker(document.getElementById('myDateRangePickerCustomRanges'), optionsCustomRanges)
 ```
 
 ## Non-english locale
@@ -266,8 +266,8 @@ Call the time picker via JavaScript:
 ```
 
 ```js
-var dateRangePickerElementList = Array.prototype.slice.call(document.querySelectorAll('.date-range-picker'))
-var dateRangePickerList = dateRangePickerElementList.map(function (dateRangePickerEl) {
+const dateRangePickerElementList = Array.prototype.slice.call(document.querySelectorAll('.date-range-picker'))
+const dateRangePickerList = dateRangePickerElementList.map(dateRangePickerEl => {
   return new coreui.DateRangePicker(dateRangePickerEl)
 })
 ```
@@ -554,8 +554,8 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
 </div>
 
 ```js
-var myDateRangePicker = document.getElementById('myDateRangePicker')
-myDateRangePicker.addEventListener('endDateChange.coreui.date-range-picker', function (date) {
+const myDateRangePicker = document.getElementById('myDateRangePicker')
+myDateRangePicker.addEventListener('endDateChange.coreui.date-range-picker', date => {
   // do something...
 })
 ```

docs/content/forms/multi-select.md

@@ -67,8 +67,8 @@ toc: true
 <select id="multiSelect"></select>
 
 <script type="text/javascript">
-  var myMultiSelect = document.querySelector('#multiSelect')
-  var cuiMultiSelect = new coreui.MultiSelect(myMultiSelect, {
+  const myMultiSelect = document.querySelector('#multiSelect')
+  const cuiMultiSelect = new coreui.MultiSelect(myMultiSelect, {
     options: [
       {
         value: 0,
@@ -429,10 +429,10 @@ Multi Select component exposes a few events for hooking into multi select functi
 </table>
 
 ```js
-var myMutliSelect = document.getElementById('myMutliSelect')
-myMutliSelect.addEventListener('changed.coreui.multi-select', function (event) {
+const myMutliSelect = document.getElementById('myMutliSelect')
+myMutliSelect.addEventListener('changed.coreui.multi-select', event => {
   // Get the list of selected options.
-  var selected = event.value
+  const selected = event.value
 })
 ```
 

docs/content/forms/time-picker.md

@@ -145,8 +145,8 @@ Call the time picker via JavaScript:
 ```
 
 ```js
-var timePickerElementList = Array.prototype.slice.call(document.querySelectorAll('.time-picker'))
-var timePickerList = timePickerElementList.map(function (timePickerEl) {
+const timePickerElementList = Array.prototype.slice.call(document.querySelectorAll('.time-picker'))
+const timePickerList = timePickerElementList.map(timePickerEl => {
   return new coreui.TimePicker(timePickerEl)
 })
 ```
@@ -330,8 +330,8 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
 </table>
 
 ```js
-var myTimePicker = document.getElementById('myTimePicker')
-myTimePicker.addEventListener('timeChange.coreui.time-picker', function (timeString, localeTimeString, date) {
+const myTimePicker = document.getElementById('myTimePicker')
+myTimePicker.addEventListener('timeChange.coreui.time-picker', (timeString, localeTimeString, date) => {
   // do something...
 })
 ```

js/src/calendar.js

@@ -365,9 +365,12 @@ class Calendar extends BaseComponent {
   _createCalendar() {
     const calendarsEl = document.createElement('div')
     calendarsEl.classList.add('calendars')
-    Array.from({ length: this._config.calendars }).forEach((_, index) => (
+    // eslint-disable-next-line no-unused-vars
+    for (const [index, _] of Array.from({ length: this._config.calendars }).entries()) {
+(
       calendarsEl.append(this._createCalendarPanel(index))
-    ))
+    )
+}
 
     this._element.classList.add(CLASS_NAME_CALENDAR)
     this._element.append(calendarsEl)
@@ -393,7 +396,7 @@ class Calendar extends BaseComponent {
       end: isEndDate(date, this._startDate, this._endDate)
     }
 
-    // eslint-disable-next-line unicorn/no-array-reduce, unicorn/prefer-object-from-entries
+    // eslint-disable-next-line unicorn/no-array-reduce
     const result = Object.keys(classNames).reduce((o, key) => {
       // eslint-disable-next-line no-unused-expressions
       classNames[key] === true && (o[key] = classNames[key])
@@ -451,9 +454,9 @@ class Calendar extends BaseComponent {
 */
 
 EventHandler.on(window, EVENT_LOAD_DATA_API, () => {
-  Array.from(document.querySelectorAll(SELECTOR_CALENDAR)).forEach(element => {
+  for (const element of Array.from(document.querySelectorAll(SELECTOR_CALENDAR))) {
     Calendar.calendarInterface(element)
-  })
+  }
 })
 
 /**

js/src/date-range-picker.js

@@ -251,7 +251,7 @@ class DateRangePicker extends Picker {
   }
 
   _addCalendarEventListeners() {
-    SelectorEngine.find('.calendar', this._element).forEach(calendar => {
+    for (const calendar of SelectorEngine.find('.calendar', this._element)) {
       EventHandler.on(calendar, 'startDateChange.coreui.calendar', event => {
         this._startDate = event.date
         this._selectEndDate = event.selectEndDate
@@ -292,7 +292,7 @@ class DateRangePicker extends Picker {
 
         this._startInput.value = event.date ? this._formatDate(event.date) : ''
       })
-    })
+    }
   }
 
   _convertStringToDate(date) {
@@ -436,7 +436,8 @@ class DateRangePicker extends Picker {
           this._updateCalendars()
         })
       } else {
-        Array.from({ length: this._config.calendars }).forEach((_, index) => {
+        // eslint-disable-next-line no-unused-vars
+        for (const [index, _] of Array.from({ length: this._config.calendars }).entries()) {
           const timePickerEl = document.createElement('div')
           timePickerEl.classList.add('time-picker')
 
@@ -462,7 +463,7 @@ class DateRangePicker extends Picker {
 
             this._updateCalendars()
           })
-        })
+        }
       }
     }
   }
@@ -481,7 +482,7 @@ class DateRangePicker extends Picker {
       const dateRangePickerRangesEl = document.createElement('div')
       dateRangePickerRangesEl.classList.add('date-picker-ranges')
 
-      Object.keys(this._config.ranges).forEach(key => {
+      for (const key of Object.keys(this._config.ranges)) {
         const buttonEl = document.createElement('button')
         buttonEl.classList.add(...this._getButtonClasses(this._config.rangesButtonsClasses))
         buttonEl.role = 'button'
@@ -495,7 +496,7 @@ class DateRangePicker extends Picker {
 
         buttonEl.innerHTML = key
         dateRangePickerRangesEl.append(buttonEl)
-      })
+      }
 
       dateRangePickerBodyEl.append(dateRangePickerRangesEl)
     }