@themesberg/flowbite - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

package.json

 {
   "name": "@themesberg/flowbite",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Open-source library of Tailwind CSS components and elements.",
@@ -30,3 +30,3 @@ "keywords": [
     "build:css": "NPM_ENV=development npx postcss src/flowbite.css  > dist/flowbite.css",
-    "build:js": "run-s build:webpack && copyfiles --flat static/js/flowbite.bundle.js dist && copyfiles --flat static/js/flowbite.bundle.js.map dist",
+    "build:js": "run-s build:webpack && copyfiles --flat static/flowbite.bundle.js dist && copyfiles --flat static/flowbite.bundle.js.map dist",
     "build:npm": "run-s build:css:min build:css build:js"
@@ -42,2 +42,3 @@ },
     "css-loader": "^5.2.7",
+    "css-minimizer-webpack-plugin": "^3.0.2",
     "cssnano": "^5.0.8",
@@ -51,2 +52,3 @@ "file-loader": "^6.2.0",
     "postcss-preset-env": "^6.7.0",
+    "prismjs": "^1.24.1",
     "sass": "^1.30.0",
@@ -59,4 +61,3 @@ "sass-loader": "^10.1.0",
     "webpack-cli": "^4.7.2",
-    "webpack-dev-server": "^3.11.2",
-    "prismjs": "^1.24.1"
+    "webpack-dev-server": "^3.11.2"
   },
@@ -63,0 +64,0 @@ "dependencies": {

src/flowbite.js

@@ -6,44 +6,84 @@ import tippy from 'tippy.js';
 
-function toggleCollapse(collapseId) {
-    const menu = document.getElementById(collapseId);
-    if (menu.classList.contains("hidden")) {
-        menu.classList.remove("hidden");
-    } else {
-        menu.classList.add("hidden");
-    }
-}
-window.toggleCollapse = toggleCollapse;
+// 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);
 
-function toggleDropdown(event, dropdownID) {
-    let element = event.target;
-    while (element.nodeName !== "BUTTON") {
-        element = element.parentNode;
-    }
-    createPopper(element, document.getElementById(dropdownID), {
-        placement: 'bottom-start',
-        modifiers: [
-            {
-                name: 'offset',
-                options: {
-                    offset: [0, 10],
+    collapseToggleEl.addEventListener('click', function() {
+        if (collapseEl.classList.contains("hidden")) {
+            collapseEl.classList.remove("hidden");
+        } else {
+            collapseEl.classList.add("hidden");
+        }
+    });
+});
+
+// Toggle dropdown elements using [data-dropdown-toggle]
+document.querySelectorAll('[data-dropdown-toggle]').forEach(function (dropdownToggleEl) {
+    var dropdownMenuId = dropdownToggleEl.getAttribute('data-dropdown-toggle');
+    var dropdownMenuEl = document.getElementById(dropdownMenuId);
+
+    dropdownToggleEl.addEventListener('click', function (event) {
+        var element = event.target;
+        while (element.nodeName !== "BUTTON") {
+            element = element.parentNode;
+        }
+        createPopper(element, dropdownMenuEl, {
+            placement: 'bottom-start',
+            modifiers: [
+                {
+                    name: 'offset',
+                    options: {
+                        offset: [0, 10],
+                    },
                 },
-            },
-        ]
+            ]
+        });
+
+        // toggle when click on the button
+        dropdownMenuEl.classList.toggle("hidden");
+        dropdownMenuEl.classList.toggle("block");
+
+        function handleDropdownOutsideClick(event) {
+            var targetElement = event.target; // clicked element
+            if (targetElement !== dropdownMenuEl && targetElement !== dropdownToggleEl && !dropdownToggleEl.contains(targetElement)) {
+                dropdownMenuEl.classList.add("hidden");
+                dropdownMenuEl.classList.remove("block");
+                document.body.removeEventListener('click', handleDropdownOutsideClick, true);
+            }
+        }
+
+        // hide popper when clicking outside the element
+        document.body.addEventListener('click', handleDropdownOutsideClick, true);
     });
-    document.getElementById(dropdownID).classList.toggle("hidden");
-    document.getElementById(dropdownID).classList.toggle("block");
-}
-window.toggleDropdown = toggleDropdown;
+});
 
-function toggleModal(modalID) {
-    document.getElementById(modalID).classList.toggle("hidden");
-    document.getElementById(modalID + "-backdrop").classList.toggle("hidden");
-    document.getElementById(modalID).classList.toggle("flex");
-    document.getElementById(modalID + "-backdrop").classList.toggle("flex");
-}
+document.querySelectorAll('[data-modal-toggle]').forEach(function (modalToggleEl) {
+    var modalId = modalToggleEl.getAttribute('data-modal-toggle');
+    var modalEl = document.getElementById(modalId);
 
-window.toggleModal = toggleModal;
+    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);
+    });
+});
+
 document.addEventListener("DOMContentLoaded", function () {
     tippy('[data-tippy-content]');
 });

tailwind.config.js

 module.exports = {
-  mode: process.env.NODE_ENV === "development" ? true : false,
   purge: {
-    enabled: process.env.NODE_ENV === "production" ? true : false,
+    // enabled: process.env.NODE_ENV === "production" ? true : false,
+    // enabled: true,
     content: ["./layouts/**/*.html", "./content/**/*.md", "./content/**/*.html"],
@@ -6,0 +6,0 @@ },

webpack.config.js

 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
 const { SourceMapDevToolPlugin } = require("webpack");
@@ -12,3 +13,3 @@ const path = require('path');
     filename: '[name].bundle.js',
-    path: path.resolve(__dirname, 'static/js/'),
+    path: path.resolve(__dirname, 'static/'),
   },
@@ -29,3 +30,3 @@ module: {
         test: /\.css$/,
-        use: ['style-loader', 'css-loader', 'postcss-loader'],
+        use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'],
       },
@@ -56,2 +57,9 @@ {
   ],
+  optimization: {
+    minimizer: [
+      // For webpack@5 you can use the `...` syntax to extend existing minimizers (i.e. `terser-webpack-plugin`), uncomment the next line
+      // `...`,
+      new CssMinimizerPlugin(),
+    ],
+  }
 };

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

8620587

1.49%

Lines of code

4927

243.11%

Number of low supply chain risk alerts

1

-66.67%

Worsened metrics

Dev dependency count

25

4.17%

Number of medium supply chain risk alerts

1

Infinity%

No dependency changes