@graupl/core 1.0.0-beta.10 → 1.0.0-beta.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graupl/core",
-  "version": "1.0.0-beta.10",
+  "version": "1.0.0-beta.11",
   "description": "The core module of Graupl, providing essential styles and utilities.",
   "main": "dist/js/graupl.cjs.js",
   "module": "dist/js/graupl.es.js",
@@ -22,14 +22,42 @@
     "./src/*.scss": {
       "sass": "./src/scss/*.scss"
     },
+    "./src/accordion": {
+      "import": "./src/js/accordion/Accordion.js"
+    },
+    "./src/alert": {
+      "import": "./src/js/alert/Alert.js"
+    },
+    "./src/carousel": {
+      "import": "./src/js/carousel/Carousel.js"
+    },
     "./accordion": {
-      "import": "./src/js/Accordion.js"
+      "import": "./dist/js/component/accordion.es.js",
+      "require": "./dist/js/component/accordion.cjs.js"
+    },
+    "./accordion/generator": {
+      "import": "./dist/js/generator/accordion.es.js",
+      "require": "./dist/js/generator/accordion.cjs.js"
     },
     "./alert": {
-      "import": "./src/js/Alert.js"
+      "import": "./dist/js/component/alert.es.js",
+      "require": "./dist/js/component/alert.cjs.js"
+    },
+    "./alert/generator": {
+      "import": "./dist/js/generator/alert.es.js",
+      "require": "./dist/js/generator/alert.cjs.js"
     },
     "./carousel": {
-      "import": "./src/js/Carousel.js"
+      "import": "./dist/js/component/carousel.es.js",
+      "require": "./dist/js/component/carousel.cjs.js"
+    },
+    "./carousel/generator": {
+      "import": "./dist/js/generator/carousel.es.js",
+      "require": "./dist/js/generator/carousel.cjs.js"
+    },
+    "./navigation/generator": {
+      "import": "./dist/js/generator/navigation.es.js",
+      "require": "./dist/js/generator/navigation.cjs.js"
     }
   },
   "repository": {
@@ -52,7 +80,14 @@
   },
   "license": "ISC",
   "homepage": "https://github.com/Graupl/graupl/tree/main/packages/core#readme",
-  "devDependencies": {
-    "sass": "^1.89.2"
+  "scripts": {
+    "presass": "rm -rf dist/css/*",
+    "sass": "sass scss:dist/css --pkg-importer=node",
+    "postcss": "postcss 'dist/css/**/*.css' --replace --config ./postcss.config.cjs",
+    "prerolldown": "rm -rf dist/js/*",
+    "rolldown": "rolldown --config ./rolldown.config.js",
+    "build": "npm-run-all build:*",
+    "build:css": "npm run sass && npm run postcss",
+    "build:js": "npm run rolldown"
   }
 }

package/src/js/accordion/generator.js

@@ -0,0 +1,27 @@
+import Accordion from "./Accordion.js";
+import once from "@drupal/once";
+
+export const generate = (
+  options = {},
+  context = document,
+  accordionSelector = ".accordion"
+) => {
+  once("graupl-accordion-generator", accordionSelector, context).forEach(
+    (accordionElement) => {
+      const accordionOptions = accordionElement.dataset.grauplAccordionOptions
+        ? JSON.parse(
+            accordionElement.dataset.grauplAccordionOptions.replace(/'/g, '"')
+          ) || {}
+        : {};
+
+      new Accordion({
+        accordionElement,
+        initialize: true,
+        ...options,
+        ...accordionOptions,
+      });
+    }
+  );
+};
+
+export default generate;

package/src/js/accordion/index.js

@@ -1,10 +1,5 @@
-import Accordion from "./Accordion.js";
+import generate from "./generator.js";
 
 document.addEventListener("DOMContentLoaded", () => {
-  document.querySelectorAll(".accordion").forEach((accordionElement) => {
-    new Accordion({
-      accordionElement,
-      initialize: true,
-    });
-  });
+  generate();
 });

package/src/js/alert/generator.js

@@ -0,0 +1,29 @@
+import Alert from "./Alert.js";
+import once from "@drupal/once";
+
+export const generate = (
+  options = {},
+  context = document,
+  alertSelector = ".alert"
+) => {
+  once("graupl-alert-generator", alertSelector, context).forEach(
+    (alertElement) => {
+      const alertOptions = alertElement.dataset.grauplAlertOptions
+        ? JSON.parse(
+            alertElement.dataset.grauplAlertOptions.replace(/'/g, '"')
+          ) || {}
+        : {};
+
+      new Alert({
+        alertElement,
+        controllerElement:
+          alertElement.querySelector(".alert-dismisser") || null,
+        initialize: true,
+        ...options,
+        ...alertOptions,
+      });
+    }
+  );
+};
+
+export default generate;

package/src/js/alert/index.js

@@ -1,11 +1,5 @@
-import Alert from "./Alert.js";
+import generate from "./generator.js";
 
 document.addEventListener("DOMContentLoaded", () => {
-  document.querySelectorAll(".alert").forEach((alertElement) => {
-    new Alert({
-      alertElement,
-      controllerElement: alertElement.querySelector(".alert-dismisser") || null,
-      initialize: true,
-    });
-  });
+  generate();
 });

package/src/js/carousel/generator.js

@@ -0,0 +1,27 @@
+import Carousel from "./Carousel.js";
+import once from "@drupal/once";
+
+export const generate = (
+  options = {},
+  context = document,
+  carouselSelector = ".carousel"
+) => {
+  once("graupl-carousel-generator", carouselSelector, context).forEach(
+    (carouselElement) => {
+      const carouselOptions = carouselElement.dataset.grauplCarouselOptions
+        ? JSON.parse(
+            carouselElement.dataset.grauplCarouselOptions.replace(/'/g, '"')
+          ) || {}
+        : {};
+
+      new Carousel({
+        carouselElement,
+        initialize: true,
+        ...options,
+        ...carouselOptions,
+      });
+    }
+  );
+};
+
+export default generate;

package/src/js/carousel/index.js

@@ -1,10 +1,5 @@
-import Carousel from "./Carousel.js";
+import generate from "./generator.js";
 
 document.addEventListener("DOMContentLoaded", () => {
-  document.querySelectorAll(".carousel").forEach((carouselElement) => {
-    new Carousel({
-      carouselElement,
-      initialize: true,
-    });
-  });
+  generate();
 });

package/src/js/main.js

@@ -0,0 +1,11 @@
+import accordionGenerator from "./accordion/generator.js";
+import alertGenerator from "./alert/generator.js";
+import carouselGenerator from "./carousel/generator.js";
+import navigationGenerator from "./navigation/generator.js";
+
+document.addEventListener("DOMContentLoaded", () => {
+  accordionGenerator();
+  alertGenerator();
+  carouselGenerator();
+  navigationGenerator();
+});

package/src/js/navigation/generator.js

@@ -0,0 +1,49 @@
+import storage from "../storage.js";
+import once from "@drupal/once";
+
+export const generate = (
+  options = {},
+  context = document,
+  navigationSelector = ".navigation"
+) => {
+  once("graupl-navigation-generator", navigationSelector, context).forEach(
+    (navigationElement) => {
+      const MenuConstructor =
+        navigationElement.dataset.grauplMenuType || DisclosureMenu;
+
+      if (window[MenuConstructor] === undefined) {
+        console.warn(
+          `Graupl navigation requires accessible-menu's ${MenuConstructor}. Please make sure to include it on this page.`
+        );
+
+        return;
+      }
+
+      const menuOptions = navigationElement.dataset.grauplMenuOptions
+        ? JSON.parse(
+            navigationElement.dataset.grauplMenuOptions.replace(/'/g, '"')
+          ) || {}
+        : {};
+      const menuElement = navigationElement.querySelector(".menu");
+      const controllerElement =
+        navigationElement.querySelector(".navigation-toggle") || null;
+      const containerElement = controllerElement ? navigationElement : null;
+      const menu = new window[MenuConstructor]({
+        menuElement,
+        menuItemSelector: ".menu-item",
+        menuLinkSelector: ".menu-link",
+        submenuItemSelector: ".submenu-item",
+        submenuToggleSelector: ".submenu-toggle",
+        controllerElement,
+        containerElement,
+        ...options,
+        ...menuOptions,
+      });
+
+      storage.initializeStorage("menus");
+      storage.pushToStorage("menus", menu.dom.menu.id, menu);
+    }
+  );
+};
+
+export default generate;

package/src/js/navigation/index.js

@@ -1,36 +1,5 @@
-import storage from "../storage.js";
+import generate from "./generator.js";
 
 document.addEventListener("DOMContentLoaded", function () {
-  const navs = document.querySelectorAll(".navigation");
-
-  navs.forEach((nav) => {
-    const MenuConstructor = nav.dataset.grauplMenuType || DisclosureMenu;
-
-    if (window[MenuConstructor] === undefined) {
-      console.warn(
-        `Graupl navigation requires accessible-menu's ${MenuConstructor}. Please make sure to include it on this page.`
-      );
-
-      return;
-    }
-
-    const menuOptions =
-      JSON.parse(nav.dataset.grauplMenuOptions.replace(/'/g, '"')) || {};
-    const menuElement = nav.querySelector(".menu");
-    const controllerElement = nav.querySelector(".navigation-toggle") || null;
-    const containerElement = controllerElement ? nav : null;
-    const menu = new window[MenuConstructor]({
-      menuElement,
-      menuItemSelector: ".menu-item",
-      menuLinkSelector: ".menu-link",
-      submenuItemSelector: ".submenu-item",
-      submenuToggleSelector: ".submenu-toggle",
-      controllerElement,
-      containerElement,
-      ...menuOptions,
-    });
-
-    storage.initializeStorage("menus");
-    storage.pushToStorage("menus", menu.dom.menu.id, menu);
-  });
+  generate();
 });

package/src/scss/base/form/_index.scss

@@ -197,10 +197,10 @@
     @each $selector in map.get(root-defaults.$state-selectors, "disabled") {
       // &:has(:disabled, .disabled)
       &:has(
-          + #{defaults.$input-selector-base}#{defaults.$input-selector}#{$selector},
-          + #{defaults.$textarea-selector-base}#{defaults.$textarea-selector}#{$selector},
-          + #{defaults.$select-selector-base}#{defaults.$select-selector}#{$selector}
-        ) {
+        + #{defaults.$input-selector-base}#{defaults.$input-selector}#{$selector},
+        + #{defaults.$textarea-selector-base}#{defaults.$textarea-selector}#{$selector},
+        + #{defaults.$select-selector-base}#{defaults.$select-selector}#{$selector}
+      ) {
         color: $label-disabled-color;
       }
     }