feat: add modal, collapse, and offcanvas components to Tabler

core/js/src/collapse.ts

@@ -0,0 +1,26 @@
+import { Collapse } from 'bootstrap'
+
+/*
+Core collapse
+ */
+const collapseTriggerList: HTMLElement[] = [].slice.call(document.querySelectorAll<HTMLElement>('[data-bs-toggle="collapse"]'))
+collapseTriggerList.map(function (collapseTriggerEl: HTMLElement) {
+  const target = collapseTriggerEl.getAttribute('data-bs-target') || collapseTriggerEl.getAttribute('href')
+  if (target === null) {
+    return
+  }
+
+  const collapseEl = document.querySelector<HTMLElement>(target)
+  if (collapseEl === null) {
+    return
+  }
+
+  const collapse = new Collapse(collapseEl, {
+    toggle: false,
+  })
+
+  collapseTriggerEl.addEventListener('click', (e) => {
+    e.preventDefault()
+    collapse.toggle()
+  })
+})

core/js/src/modal.ts

@@ -0,0 +1,24 @@
+import { Modal } from 'bootstrap'
+
+/*
+Core modals
+ */
+const modalTriggerList: HTMLElement[] = [].slice.call(document.querySelectorAll<HTMLElement>('[data-bs-toggle="modal"]'))
+modalTriggerList.map(function (modalTriggerEl: HTMLElement) {
+  const target = modalTriggerEl.getAttribute('data-bs-target') || modalTriggerEl.getAttribute('href')
+  if (target === null) {
+    return
+  }
+
+  const modalEl = document.querySelector<HTMLElement>(target)
+  if (modalEl === null) {
+    return
+  }
+
+  const modal = new Modal(modalEl)
+
+  modalTriggerEl.addEventListener('click', (e) => {
+    e.preventDefault()
+    modal.show()
+  })
+})

core/js/src/offcanvas.ts

@@ -0,0 +1,24 @@
+import { Offcanvas } from 'bootstrap'
+
+/*
+Core offcanvas
+ */
+const offcanvasTriggerList: HTMLElement[] = [].slice.call(document.querySelectorAll<HTMLElement>('[data-bs-toggle="offcanvas"]'))
+offcanvasTriggerList.map(function (offcanvasTriggerEl: HTMLElement) {
+  const target = offcanvasTriggerEl.getAttribute('data-bs-target') || offcanvasTriggerEl.getAttribute('href')
+  if (target === null) {
+    return
+  }
+
+  const offcanvasEl = document.querySelector<HTMLElement>(target)
+  if (offcanvasEl === null) {
+    return
+  }
+
+  const offcanvas = new Offcanvas(offcanvasEl)
+
+  offcanvasTriggerEl.addEventListener('click', (e) => {
+    e.preventDefault()
+    offcanvas.show()
+  })
+})

core/js/tabler.ts

@@ -3,6 +3,9 @@ import './src/tooltip'
 import './src/popover'
 import './src/tab'
 import './src/toast'
+import './src/modal'
+import './src/collapse'
+import './src/offcanvas'
 import './src/sortable'
 import './src/switch-icon'
 import './src/autosize'