@themesberg/flowbite - npm Package Compare versions

Comparing version 1.0.2 to 1.0.3

package.json

 {
   "name": "@themesberg/flowbite",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Open-source library of Tailwind CSS components and elements.",
@@ -63,6 +63,6 @@ "keywords": [
     "@tailwindcss/forms": "^0.3.3",
+    "@themesberg/tailwind-datepicker": "^1.0.1",
     "tippy.js": "^6.3.1",
-    "@themesberg/tailwind-datepicker": "^1.0.0",
     "yarn": "^1.22.10"
   }
 }

src/flowbite.js

@@ -9,16 +9,22 @@ import './flowbite.css';
 
+const toggleCollapse = (elementId, show = true) => {
+    const collapseEl = document.getElementById(elementId);
+    if (show) {
+        collapseEl.classList.remove("hidden");
+    } else {
+        collapseEl.classList.add("hidden");
+    }
+}
+
 // Toggle target elements using [data-collapse-toggle]
 document.querySelectorAll('[data-collapse-toggle]').forEach(function (collapseToggleEl) {
     var collapseId = collapseToggleEl.getAttribute('data-collapse-toggle');
-    var collapseEl = document.getElementById(collapseId);
 
     collapseToggleEl.addEventListener('click', function() {
-        if (collapseEl.classList.contains("hidden")) {
-            collapseEl.classList.remove("hidden");
-        } else {
-            collapseEl.classList.add("hidden");
-        }
+        toggleCollapse(collapseId, document.getElementById(collapseId).classList.contains('hidden'));
     });
 });
 
+window.toggleCollapse = toggleCollapse;
+
 // Toggle dropdown elements using [data-dropdown-toggle]
@@ -64,2 +70,31 @@ document.querySelectorAll('[data-dropdown-toggle]').forEach(function (dropdownToggleEl) {
 
+const toggleModal = (modalId, show = true) => {
+
+    const modalEl = document.getElementById(modalId);
+
+    if (show) {
+        modalEl.classList.add('flex');
+        modalEl.classList.remove('hidden');
+        modalEl.setAttribute('aria-modal', 'true');
+        modalEl.setAttribute('role', 'dialog');
+        modalEl.removeAttribute('aria-hidden');
+
+        // create backdrop element
+        var backdropEl = document.createElement('div');
+        backdropEl.setAttribute('modal-backdrop', '');
+        backdropEl.classList.add('bg-gray-900', 'bg-opacity-50', 'fixed', 'inset-0', 'z-40');
+        document.querySelector('body').append(backdropEl);
+    } else {
+        modalEl.classList.add('hidden');
+        modalEl.classList.remove('flex');
+        modalEl.setAttribute('aria-hidden', 'true');
+        modalEl.removeAttribute('aria-modal');
+        modalEl.removeAttribute('role');
+        document.querySelector('[modal-backdrop]').remove();
+    }
+
+}
+
+window.toggleModal = toggleModal;
+
 document.querySelectorAll('[data-modal-toggle]').forEach(function (modalToggleEl) {
@@ -69,21 +104,8 @@ var modalId = modalToggleEl.getAttribute('data-modal-toggle');
 
+    if (!modalEl.hasAttribute('aria-hidden') && !modalEl.hasAttribute('aria-modal')) {
+        modalEl.setAttribute('aria-hidden', 'true');
+    }
+
     modalToggleEl.addEventListener('click', function() {
-        modalEl.classList.toggle("hidden");
-        document.getElementById(modalId + "-backdrop").classList.toggle("hidden");
-        modalEl.classList.toggle("flex");
-        document.getElementById(modalId + "-backdrop").classList.toggle("flex");
-
-        function handleModalOutsideClick(event) {
-            var targetElement = event.target; // clicked element
-            if (targetElement !== modalEl && !modalEl.contains(targetElement)) {
-                modalEl.classList.add("hidden");
-                document.getElementById(modalId + "-backdrop").classList.add("hidden");
-                modalEl.classList.remove("flex");
-                document.getElementById(modalId + "-backdrop").classList.remove("flex");
-                document.body.removeEventListener('click', handleModalOutsideClick, true);
-            }
-        }
-
-        // hide popper when clicking outside the element
-        document.body.addEventListener('click', handleModalOutsideClick, true);
+        toggleModal(modalId, modalEl.hasAttribute('aria-hidden', 'true'));
     });
@@ -90,0 +112,0 @@ });

tailwind.config.js

@@ -5,3 +5,3 @@ module.exports = {
     // enabled: true,
-    content: ["./layouts/**/*.html", "./content/**/*.md", "./content/**/*.html"],
+    content: ["./layouts/**/*.html", "./content/**/*.md", "./content/**/*.html", "./src/**/*.js"],
     options: {
@@ -20,3 +20,4 @@ // safelist classes generated by plugins like the datepicker
         'h-9',
-        'leading-9'
+        'leading-9',
+        'shadow-lg'
       ],
@@ -30,2 +31,5 @@ }
         '2xs': '16rem',
+      },
+      height: {
+        'modal': 'calc(100% - 2rem)'
       }
@@ -39,2 +43,3 @@ },
     colors: {
+      transparent: 'transparent',
       white: "#ffffff",
@@ -41,0 +46,0 @@ black: "#000000",

No alert changes

Improved metrics

Total package byte prevSize

8873388

0.45%

Lines of code

7608

0.45%

Dependency changes

• Updated

  @themesberg/tailwind-datepicker@^1.0.1