@graupl/core 1.0.0-beta.21 → 1.0.0-beta.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graupl/core",
-  "version": "1.0.0-beta.21",
+  "version": "1.0.0-beta.23",
   "description": "The core module of Graupl, providing essential styles and utilities.",
   "main": "dist/js/graupl.cjs.js",
   "module": "dist/js/graupl.es.js",

package/src/js/disclosure/Disclosure.js

@@ -199,6 +199,15 @@ class Disclosure {
    */
   _prefix = "graupl-";
 
+  /**
+   * The key used to generate IDs throughout the disclosure.
+   *
+   * @protected
+   *
+   * @type {string}
+   */
+  _key = "";
+
   /**
    * An array of error messages generated by the disclosure.
    *
@@ -311,16 +320,15 @@ class Disclosure {
 
       // Set up the storage.
       storage.initializeStorage("disclosures");
-      storage.initializeStorage("disclosures");
       storage.pushToStorage("disclosures", this.dom.disclosure.id, this);
 
       if (
         this.dom.controller.getAttribute("aria-expanded") === "true" ||
         (this.shouldOpen && window.matchMedia(this.openQuery).matches)
       ) {
-        this._expand(false, false);
+        this._expand({ emit: false, transition: false });
       } else {
-        this._collapse(false, false);
+        this._collapse({ emit: false, transition: false });
       }
 
       requestAnimationFrame(() => {
@@ -702,6 +710,17 @@ class Disclosure {
     return check;
   }
 
+  /**
+   * The key used to generate IDs throughout the disclosure.
+   *
+   * @type {string}
+   *
+   * @see _key
+   */
+  get key() {
+    return this._key;
+  }
+
   /**
    * An array of error messages generated by the disclosure.
    *
@@ -737,12 +756,17 @@ class Disclosure {
     }
 
     // Query selector checks.
-    const querySelectorChecks = isQuerySelector({
-      disclosureContentSelector: this._selectors.content,
-    });
+    const querySelectors = {};
 
-    if (!querySelectorChecks.status) {
-      this._errors.push(querySelectorChecks.error.message);
+    for (const querySelector of Object.keys(this._selectors)) {
+      querySelectors[`${querySelector}Selector`] =
+        this._selectors[querySelector];
+    }
+
+    const querySelectorChecks = isQuerySelector(querySelectors);
+
+    if (!querySelectorChecks) {
+      this._errors.push(querySelectorChecks.message);
       check = false;
     }
 
@@ -790,13 +814,14 @@ class Disclosure {
   }
 
   /**
-   * Generates a key for the disclosure.
+   * Generates a key for the tabs.
    *
-   * @param {boolean} [regenerate = false] - A flag to determine if the key should be regenerated.
+   * @param {Object<boolean>} [options = {}]               - Options for generating the key.
+   * @param {boolean}         [options.regenerate = false] - A flag to determine if the key should be regenerated.
    */
-  _generateKey(regenerate = false) {
+  _generateKey({ regenerate = false } = {}) {
     if (this.key === "" || regenerate) {
-      this.key = Math.random()
+      this._key = Math.random()
         .toString(36)
         .replace(/[^a-z]+/g, "")
         .substring(0, 10);
@@ -985,38 +1010,28 @@ class Disclosure {
    *
    * @fires grauplDisclosureExpand
    *
-   * @param {boolean} [emit = true]       - Emit the expand event once expanded.
-   * @param {boolean} [transition = true] - Respect the transition class.
+   * @param {Object<boolean>} [options = {}]              - Options for expanding the disclosure.
+   * @param {boolean}         [options.emit = true]       - Emit the expand event once expanded.
+   * @param {boolean}         [options.transition = true] - Respect the transition class.
    */
-  _expand(emit = true, transition = true) {
+  _expand({ emit = true, transition = true } = {}) {
     this.dom.controller.setAttribute("aria-expanded", "true");
 
     // If we're dealing with transition classes, then we need to utilize
     // requestAnimationFrame to add the transition class, remove the close class,
     // add the open class, and finally remove the transition class.
     if (transition && this.transitionlass !== "") {
-      // this.dom.disclosure.style.height = `${this.dom.disclosure.getBoundingClientRect().height}px`;
-      // console.log(this.dom.disclosure.style.height);
       addClass(this.transitionClass, this.dom.disclosure);
 
       requestAnimationFrame(() => {
         removeClass(this.closeClass, this.dom.disclosure);
 
-        // this.dom.disclosure.style.height = `${this.dom.disclosure.getBoundingClientRect().height}px`;
-        // console.log(this.dom.disclosure.style.height);
-
         requestAnimationFrame(() => {
           addClass(this.openClass, this.dom.disclosure);
 
-          // this.dom.disclosure.style.height = `${this.dom.content.getBoundingClientRect().height}px`;
-          // console.log(this.dom.disclosure.style.height);
-
           requestAnimationFrame(() => {
             setTimeout(() => {
               removeClass(this.transitionClass, this.dom.disclosure);
-
-              // this.dom.disclosure.style.height = "";
-              // console.log(this.dom.disclosure.style.height);
             }, this.openDuration);
           });
         });
@@ -1046,41 +1061,30 @@ class Disclosure {
    *
    * @fires grauplDisclosureCollapse
    *
-   * @param {boolean} [emit = true]       - Emit the collapse event once collapsed.
-   * @param {boolean} [transition = true] - Respect the transition class.
+   * @param {Object<boolean>} [options = {}]              - Options for collapsing the disclosure.
+   * @param {boolean}         [options.emit = true]       - Emit the collapse event once collapsed.
+   * @param {boolean}         [options.transition = true] - Respect the transition class.
    */
-  _collapse(emit = true, transition = true) {
+  _collapse({ emit = true, transition = true } = {}) {
     this.dom.controller.setAttribute("aria-expanded", "false");
 
     // If we're dealing with transition classes, then we need to utilize
     // requestAnimationFrame to add the transition class, remove the open class,
     // add the close class, and finally remove the transition class.
     if (transition && this.transitionClass !== "") {
-      // this.dom.disclosure.style.height = `${this.dom.content.getBoundingClientRect().height}px`;
-      // console.log(this.dom.disclosure.style.height);
-
       addClass(this.transitionClass, this.dom.disclosure);
 
       requestAnimationFrame(() => {
         removeClass(this.openClass, this.dom.disclosure);
 
-        // this.dom.disclosure.style.height = `${this.dom.content.getBoundingClientRect().height}px`;
-        // console.log(this.dom.disclosure.style.height);
-
         requestAnimationFrame(() => {
           addClass(this.closeClass, this.dom.disclosure);
 
-          // this.dom.disclosure.style.height = `${this.dom.disclosure.getBoundingClientRect().height}px`;
-          // console.log(this.dom.disclosure.style.height);
-
           requestAnimationFrame(() => {
             setTimeout(() => {
               removeClass(this.transitionClass, this.dom.disclosure);
 
               this.dom.content.innert = true;
-
-              // this.dom.disclosure.style.height = "";
-              // console.log(this.dom.disclosure.style.height);
             }, this.closeDuration);
           });
         });

package/src/scss/_defaults.scss

@@ -34,10 +34,13 @@ $content-max-width: 96ch !default;
 // Screen sizes.
 $-screen-sizes: (
   xs: 0,
-  sm: 48ch,
-  md: 72ch,
-  lg: 108ch,
-  xl: 156ch,
+  sm: 576px,
+  md: 768px,
+  lg: 1024px,
+  xl: 1280px,
+  hd: 1500px,
+  qhd: 1921px,
+  uhd: 2561px,
 );
 $custom-screen-sizes: () !default;
 $screen-sizes: () !default;