blue-react 9.0.0-alpha1 → 9.0.0

package/dist/components/Utilities.js

@@ -1,221 +1,212 @@
-(function (global, factory) {
-  if (typeof define === "function" && define.amd) {
-    define(["exports"], factory);
-  } else if (typeof exports !== "undefined") {
-    factory(exports);
-  } else {
-    var mod = {
-      exports: {}
-    };
-    factory(mod.exports);
-    global.Utilities = mod.exports;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.addClass = addClass;
+exports.default = void 0;
+exports.fetchData = fetchData;
+exports.finishLoading = finishLoading;
+exports.guid = void 0;
+exports.hasClass = hasClass;
+exports.hideSuccess = hideSuccess;
+exports.removeClass = removeClass;
+exports.resetAlertMessage = resetAlertMessage;
+exports.scrollToTop = scrollToTop;
+exports.setAlertMessage = setAlertMessage;
+exports.showSuccess = showSuccess;
+exports.startLoading = startLoading;
+exports.toggleActions = toggleActions;
+exports.toggleClass = toggleClass;
+
+function hasClass(el, className) {
+  if (el.classList) return el.classList.contains(className);else return !!el.className.match(new RegExp("(\\s|^)" + className + "(\\s|$)"));
+}
+
+function addClass(el, className) {
+  if (el.classList) el.classList.add(className);else if (!hasClass(el, className)) el.className += " " + className;
+}
+
+function removeClass(el, className) {
+  if (el.classList) el.classList.remove(className);else if (hasClass(el, className)) el.className = el.className.replace(new RegExp("(\\s|^)" + className + "(\\s|$)"), " ");
+}
+/**
+ * @deprecated Use (el as HTMLElement).classList.toggle("my-class") instead.
+ */
+
+
+function toggleClass(element, className) {
+  if (!element || !className) {
+    return;
   }
-})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports) {
-  "use strict";
 
-  Object.defineProperty(_exports, "__esModule", {
-    value: true
-  });
-  _exports.addClass = addClass;
-  _exports.default = void 0;
-  _exports.fetchData = fetchData;
-  _exports.finishLoading = finishLoading;
-  _exports.guid = void 0;
-  _exports.hasClass = hasClass;
-  _exports.hideSuccess = hideSuccess;
-  _exports.removeClass = removeClass;
-  _exports.resetAlertMessage = resetAlertMessage;
-  _exports.scrollToTop = scrollToTop;
-  _exports.setAlertMessage = setAlertMessage;
-  _exports.showSuccess = showSuccess;
-  _exports.startLoading = startLoading;
-  _exports.toggleActions = toggleActions;
-  _exports.toggleClass = toggleClass;
-
-  function hasClass(el, className) {
-    if (el.classList) return el.classList.contains(className);else return !!el.className.match(new RegExp("(\\s|^)" + className + "(\\s|$)"));
-  }
+  var classString = element.className,
+      nameIndex = classString.indexOf(className);
 
-  function addClass(el, className) {
-    if (el.classList) el.classList.add(className);else if (!hasClass(el, className)) el.className += " " + className;
+  if (nameIndex === -1) {
+    classString += " " + className;
+  } else {
+    classString = classString.substr(0, nameIndex) + classString.substr(nameIndex + className.length);
   }
 
-  function removeClass(el, className) {
-    if (el.classList) el.classList.remove(className);else if (hasClass(el, className)) el.className = el.className.replace(new RegExp("(\\s|^)" + className + "(\\s|$)"), " ");
-  }
-  /**
-   * @deprecated Use (el as HTMLElement).classList.toggle("my-class") instead.
-   */
+  element.className = classString;
+}
 
+function startLoading() {
+  ;
+  document.querySelector(".blue-loading").style.display = "block";
+}
 
-  function toggleClass(element, className) {
-    if (!element || !className) {
-      return;
-    }
+function finishLoading() {
+  ;
+  document.querySelector(".blue-loading").style.display = "";
+}
 
-    var classString = element.className,
-        nameIndex = classString.indexOf(className);
+function showSuccess() {
+  ;
+  document.querySelector(".blue-status-success").style.display = "flex";
+}
 
-    if (nameIndex === -1) {
-      classString += " " + className;
-    } else {
-      classString = classString.substr(0, nameIndex) + classString.substr(nameIndex + className.length);
-    }
+function hideSuccess() {
+  ;
+  document.querySelector(".blue-status-success").style.display = "";
+}
 
-    element.className = classString;
-  }
-
-  function startLoading() {
-    ;
-    document.querySelector(".blue-loading").style.display = "block";
-  }
+function toggleActions() {
+  toggleClass(document.querySelector(".blue-wrapper"), "active");
+  toggleClass(document.querySelector(".blue-layout"), "wrapper-in");
+  var els = document.querySelectorAll(".blue-actions");
 
-  function finishLoading() {
-    ;
-    document.querySelector(".blue-loading").style.display = "";
+  for (var i = 0; i < els.length; i++) {
+    toggleClass(els[i], "open");
   }
+}
+/**
+ * Resets alert messages that was set with `setAlertMessage`.
+ * When using React, you should use `StatusProvider` instead: https://bruegmann.github.io/blue-react/v8/component/StatusProvider
+ * @param alertClassName Leave empty to reset messages of any status type
+ */
 
-  function showSuccess() {
-    ;
-    document.querySelector(".blue-status-success").style.display = "flex";
-  }
 
-  function hideSuccess() {
+function resetAlertMessage(alertClassName) {
+  if (!alertClassName) {
     ;
-    document.querySelector(".blue-status-success").style.display = "";
-  }
-
-  function toggleActions() {
-    toggleClass(document.querySelector(".blue-wrapper"), "active");
-    toggleClass(document.querySelector(".blue-layout"), "wrapper-in");
-    var els = document.querySelectorAll(".blue-actions");
-
-    for (var i = 0; i < els.length; i++) {
-      toggleClass(els[i], "open");
-    }
-  }
-  /**
-   * Resets alert messages that was set with `setAlertMessage`.
-   * @param alertClassName Leave empty to reset messages of any status type
-   */
-
-
-  function resetAlertMessage(alertClassName) {
-    if (!alertClassName) {
-      ;
-      ["loading", "success", "info", "warning", "danger"].forEach(function (status) {
-        resetAlertMessage(status);
-      });
-    } else {
-      var alertElement = document.querySelector(".blue-status-alert");
-      var statusElement = document.querySelector(".blue-status-" + alertClassName);
-      if (statusElement) statusElement.style.display = "";
-
-      if (alertElement) {
-        alertElement.style.display = "";
-        removeClass(alertElement, "alert-" + (alertClassName === "loading" ? "info" : alertClassName));
-      }
-    }
-  }
-
-  function setAlertMessage(message) {
-    var alertClassName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "info";
-    var close = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-    var detailText = arguments.length > 3 ? arguments[3] : undefined;
+    ["loading", "success", "info", "warning", "danger"].forEach(function (status) {
+      resetAlertMessage(status);
+    });
+  } else {
     var alertElement = document.querySelector(".blue-status-alert");
     var statusElement = document.querySelector(".blue-status-" + alertClassName);
-    if (statusElement) statusElement.style.display = "flex";
+    if (statusElement) statusElement.style.display = "";
 
     if (alertElement) {
-      alertElement.style.display = "block";
-      addClass(alertElement, "alert-" + (alertClassName === "loading" ? "info" : alertClassName));
-      alertElement.querySelector(".alert-body").innerHTML = "<h2>" + message + "</h2>";
-
-      if (detailText) {
-        alertElement.querySelector(".alert-body").innerHTML += "<span>" + detailText + "</span>";
-      }
+      alertElement.style.display = "";
+      removeClass(alertElement, "alert-" + (alertClassName === "loading" ? "info" : alertClassName));
+    }
+  }
+}
+/**
+ * When using React, you should use `StatusProvider` instead: https://bruegmann.github.io/blue-react/v8/component/StatusProvider
+ */
+
+
+function setAlertMessage(message) {
+  var alertClassName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "info";
+  var close = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  var detailText = arguments.length > 3 ? arguments[3] : undefined;
+  var alertElement = document.querySelector(".blue-status-alert");
+  var statusElement = document.querySelector(".blue-status-" + alertClassName);
+  if (statusElement) statusElement.style.display = "flex";
+
+  if (alertElement) {
+    alertElement.style.display = "block";
+    addClass(alertElement, "alert-" + (alertClassName === "loading" ? "info" : alertClassName));
+    alertElement.querySelector(".alert-body").innerHTML = "<h2>" + message + "</h2>";
+
+    if (detailText) {
+      alertElement.querySelector(".alert-body").innerHTML += "<span>" + detailText + "</span>";
+    }
 
-      var btnCloseElement = alertElement.querySelector(".btn-close");
+    var btnCloseElement = alertElement.querySelector(".btn-close");
 
-      if (close) {
-        btnCloseElement.style.display = "inline-block";
+    if (close) {
+      btnCloseElement.style.display = "inline-block";
 
-        btnCloseElement.onclick = function () {
-          resetAlertMessage(alertClassName);
-        };
-      } else {
-        btnCloseElement.style.display = "none";
-      }
+      btnCloseElement.onclick = function () {
+        resetAlertMessage(alertClassName);
+      };
+    } else {
+      btnCloseElement.style.display = "none";
     }
   }
+}
 
-  function s4() {
-    return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
-  }
-
-  var guid = function guid() {
-    return s4() + s4() + "-" + s4() + "-" + s4() + "-" + s4() + "-" + s4() + s4() + s4();
-  };
+function s4() {
+  return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
+}
 
-  _exports.guid = guid;
+var guid = function guid() {
+  return s4() + s4() + "-" + s4() + "-" + s4() + "-" + s4() + "-" + s4() + s4() + s4();
+};
 
-  function scrollToTop() {
-    var routerPage = document.querySelector(".router-page.active");
-    routerPage.scroll({
-      behavior: "smooth",
-      left: 0,
-      top: 0
-    });
-  }
+exports.guid = guid;
 
-  var httpStatusCodes = {
-    400: "Bad Request",
-    401: "Unauthorized",
-    403: "Forbidden",
-    404: "Not Found",
-    405: "Method Not Allowed",
-    408: "Request Timeout",
-    409: "Conflict",
-    500: "Internal Server Error",
-    502: "Bad Gateway"
-  };
-
-  function fetchData(input, init) {
-    var showErrorDetail = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
-    var onError = arguments.length > 3 ? arguments[3] : undefined;
-    return fetch(input, init).then(function (response) {
-      if (!response.ok) throw response;
-      return response;
-    }).catch(function (reason) {
-      if (reason.text) {
-        reason.text().then(function (errorMessage) {
-          setAlertMessage("".concat(reason.status, " - ").concat(reason.statusText || httpStatusCodes[reason.status] || "Error"), "danger", true, showErrorDetail ? errorMessage.toString().replace(/(<style[\w\W]+style>)/g, "").replace(/<[^>]+>/g, "") : undefined);
-
-          if (onError) {
-            onError(errorMessage, reason);
-          }
-        });
-      }
-
-      throw reason;
-    });
-  }
+function scrollToTop() {
+  var routerPage = document.querySelector(".router-page.active");
+  routerPage.scroll({
+    behavior: "smooth",
+    left: 0,
+    top: 0
+  });
+}
+
+var httpStatusCodes = {
+  400: "Bad Request",
+  401: "Unauthorized",
+  403: "Forbidden",
+  404: "Not Found",
+  405: "Method Not Allowed",
+  408: "Request Timeout",
+  409: "Conflict",
+  500: "Internal Server Error",
+  502: "Bad Gateway"
+};
+
+function fetchData(input, init) {
+  var showErrorDetail = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+  var onError = arguments.length > 3 ? arguments[3] : undefined;
+  return fetch(input, init).then(function (response) {
+    if (!response.ok) throw response;
+    return response;
+  }).catch(function (reason) {
+    if (reason.text) {
+      reason.text().then(function (errorMessage) {
+        setAlertMessage("".concat(reason.status, " - ").concat(reason.statusText || httpStatusCodes[reason.status] || "Error"), "danger", true, showErrorDetail ? errorMessage.toString().replace(/(<style[\w\W]+style>)/g, "").replace(/<[^>]+>/g, "") : undefined);
+
+        if (onError) {
+          onError(errorMessage, reason);
+        }
+      });
+    }
 
-  var _default = {
-    hasClass: hasClass,
-    addClass: addClass,
-    removeClass: removeClass,
-    toggleClass: toggleClass,
-    startLoading: startLoading,
-    finishLoading: finishLoading,
-    showSuccess: showSuccess,
-    hideSuccess: hideSuccess,
-    toggleActions: toggleActions,
-    resetAlertMessage: resetAlertMessage,
-    setAlertMessage: setAlertMessage,
-    guid: guid,
-    scrollToTop: scrollToTop,
-    fetchData: fetchData
-  };
-  _exports.default = _default;
-});
+    throw reason;
+  });
+}
+
+var _default = {
+  hasClass: hasClass,
+  addClass: addClass,
+  removeClass: removeClass,
+  toggleClass: toggleClass,
+  startLoading: startLoading,
+  finishLoading: finishLoading,
+  showSuccess: showSuccess,
+  hideSuccess: hideSuccess,
+  toggleActions: toggleActions,
+  resetAlertMessage: resetAlertMessage,
+  setAlertMessage: setAlertMessage,
+  guid: guid,
+  scrollToTop: scrollToTop,
+  fetchData: fetchData
+};
+exports.default = _default;

package/dist/components/shared.js

@@ -1,45 +1,32 @@
-(function (global, factory) {
-  if (typeof define === "function" && define.amd) {
-    define(["exports"], factory);
-  } else if (typeof exports !== "undefined") {
-    factory(exports);
-  } else {
-    var mod = {
-      exports: {}
-    };
-    factory(mod.exports);
-    global.shared = mod.exports;
-  }
-})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports) {
-  "use strict";
+"use strict";
 
-  Object.defineProperty(_exports, "__esModule", {
-    value: true
-  });
-  _exports.getPhrase = getPhrase;
-  var phrases = {
-    Cancel: ["Cancel", "Abbrechen"],
-    Yes: ["Yes", "Ja"],
-    No: ["No", "Nein"],
-    Message: ["Message", "Nachricht"]
-  };
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getPhrase = getPhrase;
+var phrases = {
+  Cancel: ["Cancel", "Abbrechen"],
+  Yes: ["Yes", "Ja"],
+  No: ["No", "Nein"],
+  Message: ["Message", "Nachricht"],
+  "Toggle menu": ["Toggle menu", "Menü umschalten"]
+};
 
-  function getPhrase(keyword) {
-    var countryCode = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : undefined;
+function getPhrase(keyword) {
+  var countryCode = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : undefined;
 
-    var _phrases = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : undefined;
+  var _phrases = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : undefined;
 
-    countryCode = countryCode || navigator.language.toLowerCase().indexOf("de") > -1 ? "de-DE" : "en-US";
-    _phrases = _phrases || phrases;
+  countryCode = countryCode || navigator.language.toLowerCase().indexOf("de") > -1 ? "de-DE" : "en-US";
+  _phrases = _phrases || phrases;
 
-    if (_phrases[keyword]) {
-      if (countryCode.indexOf("de-") > -1) {
-        return _phrases[keyword][1];
-      } else {
-        return _phrases[keyword][0];
-      }
+  if (_phrases[keyword]) {
+    if (countryCode.indexOf("de-") > -1) {
+      return _phrases[keyword][1];
     } else {
-      return keyword;
+      return _phrases[keyword][0];
     }
+  } else {
+    return keyword;
   }
-});
+}

package/dist/neu.scss

@@ -0,0 +1,76 @@
+$theme: #e5dff4 !default;
+
+@function neu-shadow($multiplicate: 1, $inset: false, $switch: false) {
+    $preset: "";
+    $bg-suffix: "";
+
+    @if $inset {
+        $preset: "inset";
+        $bg-suffix: "-inset";
+    }
+
+    @if $switch {
+        @return $preset calc(var(--neu-distance) * #{$multiplicate}) calc(var(--neu-distance) * #{$multiplicate})
+                calc(var(--neu-blur) * #{$multiplicate}) var(--neu-shadow-high#{$bg-suffix}),
+            $preset calc(var(--neu-distance) * -#{$multiplicate}) calc(var(--neu-distance) * -#{$multiplicate})
+                calc(var(--neu-blur) * #{$multiplicate}) var(--neu-shadow-low#{$bg-suffix});
+    }
+
+    @return $preset calc(var(--neu-distance) * -#{$multiplicate}) calc(var(--neu-distance) * -#{$multiplicate})
+            calc(var(--neu-blur) * #{$multiplicate}) var(--neu-shadow-high#{$bg-suffix}),
+        $preset calc(var(--neu-distance) * #{$multiplicate}) calc(var(--neu-distance) * #{$multiplicate})
+            calc(var(--neu-blur) * #{$multiplicate}) var(--neu-shadow-low#{$bg-suffix});
+}
+
+$neu-steps: (
+    1: 0.25,
+    2: 0.5,
+    3: 1,
+    4: 1.5,
+    5: 3
+);
+
+@mixin neu($bg: $theme, $bg-inset: $theme) {
+    --neu-bg: #{$bg};
+    --neu-bg-inset: #{$bg-inset};
+
+    --neu-shadow-high: #{lighten($bg, 3%)};
+    --neu-shadow-low: #{darken($bg, 4%)};
+    --neu-shadow-high-inset: #{lighten($bg-inset, 4%)};
+    --neu-shadow-low-inset: #{darken($bg-inset, 4%)};
+
+    --neu-distance: 0.37rem;
+    --neu-blur: 0.7rem;
+
+    @each $unit, $value in $neu-steps {
+        --neu-shadow-#{$unit}: #{neu-shadow($value)};
+        --neu-shadow-inset-#{$unit}: #{neu-shadow($value, true)};
+
+        --neu-shadow-switch-#{$unit}: #{neu-shadow($value, false, true)};
+        --neu-shadow-inset-switch-#{$unit}: #{neu-shadow($value, true, true)};
+    }
+}
+
+@mixin neu-define-utility-classes() {
+    @each $unit, $value in $neu-steps {
+        .neu-shadow-#{$unit} {
+            box-shadow: var(--neu-shadow-#{$unit}) !important;
+        }
+        .neu-shadow-inset-#{$unit} {
+            box-shadow: var(--neu-shadow-inset-#{$unit}) !important;
+        }
+
+        .neu-shadow-switch-#{$unit} {
+            box-shadow: var(--neu-shadow-switch-#{$unit}) !important;
+        }
+        .neu-shadow-inset-switch-#{$unit} {
+            box-shadow: var(--neu-shadow-inset-switch-#{$unit}) !important;
+        }
+    }
+}
+
+:root {
+    @include neu();
+}
+
+@include neu-define-utility-classes();