docs: update documentation

Author: mrholek

dist/js/coreui.min.js.map

@@ -22,11 +22,13 @@
       // Configuration for fenced code blocks goes with the override for
       // the code block's virtual filename, for example:
       "parserOptions": {
+        "sourceType": "module",
         "ecmaFeatures": {
           "impliedStrict": true
         }
       },
       "rules": {
+        "import/no-unresolved": "off",
         "no-array-for-each": "off",
         "no-undef": "off",
         "no-unused-vars": "off",

docs/.eslintrc.json

@@ -149,4 +149,185 @@
       }, false)
     })
   }
+
+  // -------------------------------
+  // Loading Buttons
+  // -------------------------------
+  // 'Loading Buttons components' example in docs only
+  const myLoadingButton = document.querySelectorAll('.docs-example .btn-loading')
+  if (myLoadingButton) {
+    myLoadingButton.forEach(button => {
+      new coreui.LoadingButton(button)
+      button.addEventListener('click', event => {
+        const myBtn = coreui.LoadingButton.getInstance(event.target)
+        myBtn.start()
+      })
+    })
+  }
+
+  // -------------------------------
+  // Multi Selects
+  // -------------------------------
+  // 'Multi Selects components' example in docs only
+  const myMultiSelect = document.getElementById('multiSelect')
+
+  if (myMultiSelect) {
+    const cuiMultiSelect = new coreui.MultiSelect(myMultiSelect, {
+      name: 'multiSelect',
+      options: [
+        {
+          value: 0,
+          text: 'Angular'
+        },
+        {
+          value: 1,
+          text: 'Bootstrap',
+          selected: true
+        },
+        {
+          value: 2,
+          text: 'React.js',
+          selected: true
+        },
+        {
+          value: 3,
+          text: 'Vue.js'
+        },
+        {
+          label: 'backend',
+          options: [
+            {
+              value: 4,
+              text: 'Django'
+            },
+            {
+              value: 5,
+              text: 'Laravel'
+            },
+            {
+              value: 6,
+              text: 'Node.js',
+              selected: true
+            }
+          ]
+        }
+      ],
+      search: true
+    })
+    cuiMultiSelect.update({
+      options: [
+        {
+          value: 0,
+          text: 'Angular2'
+        },
+        {
+          value: 1,
+          text: 'Bootstrap2',
+          selected: true
+        },
+        {
+          value: 2,
+          text: 'React.js',
+          selected: true
+        },
+        {
+          value: 3,
+          text: 'Vue.js'
+        },
+        {
+          label: 'backend',
+          options: [
+            {
+              value: 4,
+              text: 'Django'
+            },
+            {
+              value: 5,
+              text: 'Laravel'
+            },
+            {
+              value: 6,
+              text: 'Node.js',
+              selected: true
+            }
+          ]
+        }
+      ]
+    })
+  }
+
+  // -------------------------------
+  // Date Pickers
+  // -------------------------------
+  // 'Date Pickers components' example in docs only
+
+  if (document.getElementById('myDatePickerDisabledDates')) {
+    const optionsDatePickerDisabledDates = {
+      locale: 'en-US',
+      calendarDate: new Date(2022, 2, 1),
+      disabledDates: [
+        [new Date(2022, 2, 4), new Date(2022, 2, 7)],
+        new Date(2022, 2, 16),
+        new Date(2022, 3, 16),
+        [new Date(2022, 4, 2), new Date(2022, 4, 8)]
+      ],
+      maxDate: new Date(2022, 5, 0),
+      minDate: new Date(2022, 1, 1)
+    }
+    // eslint-disable-next-line no-unused-vars
+    const myDatePickerDisabledDates = new coreui.DatePicker(document.getElementById('myDatePickerDisabledDates'), optionsDatePickerDisabledDates)
+  }
+
+  // -------------------------------
+  // Date Range Pickers
+  // -------------------------------
+  // 'Date Range Pickers components' example in docs only
+
+  if (document.getElementById('myDateRangePickerDisabledDates')) {
+    const optionsDateRangePickerDisabledDates = {
+      locale: 'en-US',
+      calendarDate: new Date(2022, 2, 1),
+      disabledDates: [
+        [new Date(2022, 2, 4), new Date(2022, 2, 7)],
+        new Date(2022, 2, 16),
+        new Date(2022, 3, 16),
+        [new Date(2022, 4, 2), new Date(2022, 4, 8)]
+      ],
+      maxDate: new Date(2022, 5, 0),
+      minDate: new Date(2022, 1, 1)
+    }
+    // eslint-disable-next-line no-unused-vars
+    const myDateRangePickerDisabledDates = new coreui.DateRangePicker(document.getElementById('myDateRangePickerDisabledDates'), optionsDateRangePickerDisabledDates)
+  }
+
+  if (document.getElementById('myDateRangePickerCustomRanges')) {
+    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))
+        ],
+        'Last 7 Days': [
+          new Date(new Date().setDate(new Date().getDate() - 6)),
+          new Date(new Date())
+        ],
+        'Last 30 Days': [
+          new Date(new Date().setDate(new Date().getDate() - 29)),
+          new Date(new Date())
+        ],
+        'This Month': [
+          new Date(new Date().setDate(1)),
+          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)
+        ]
+      }
+    }
+    // eslint-disable-next-line no-unused-vars
+    const myDateRangePickerCustomRanges = new coreui.DateRangePicker(document.getElementById('myDateRangePickerCustomRanges'), optionsCustomRanges)
+  }
 })()

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

@@ -46,7 +46,7 @@ const alert = (message, type) => {
   wrapper.innerHTML = [
     `<div class="alert alert-${type} alert-dismissible" role="alert">`,
     `   <div>${message}</div>`,
-    '   <button type="button" class="btn-close" data-cui-dismiss="alert" aria-label="Close"></button>',
+    '   <button type="button" class="btn-close" data-coreui-dismiss="alert" aria-label="Close"></button>',
     '</div>'
   ].join('')
 

docs/assets/js/snippets.js

@@ -499,7 +499,7 @@ If no tab was already active, the `hide.coreui.tab` and `hidden.coreui.tab` even
 {{< /bs-table >}}
 
 ```js
-const tabElms = document.querySelectorAll('a[data-cui-toggle="list"]')
+const tabElms = document.querySelectorAll('a[data-coreui-toggle="list"]')
 tabElms.forEach(tabElm => {
   tabElm.addEventListener('shown.coreui.tab', event => {
     event.target // newly activated tab