blue-react 7.8.3 → 7.10.1

package/dist/styles/_switch.scss

@@ -1,21 +1,21 @@
-$width: 2.188rem;
-$height: 1.25rem;
-$padding: 0.188rem;
-
-$switch-active-color: $success;
-
-.switch {
-    @include switch();
-
-    &.lg {
-        @include switch(100px, 30px);
-    }
-}
-
-/* Rounded sliders */
-.slider.round {
-    border-radius: $height;
-}
-.slider.round:before {
-    border-radius: 50%;
-}
+$width: 2.188rem;
+$height: 1.25rem;
+$padding: 0.188rem;
+
+$switch-active-color: $success;
+
+.switch {
+    @include switch();
+
+    &.lg {
+        @include switch(100px, 30px);
+    }
+}
+
+/* Rounded sliders */
+.slider.round {
+    border-radius: $height;
+}
+.slider.round:before {
+    border-radius: 50%;
+}

package/dist/styles/mixins/_actions.scss

@@ -1,14 +1,14 @@
 @mixin actions-break($width) {
     @media screen and (max-width: $width) {
         top: 0;
-        border-radius: $blue-actions-indicator-height / 2;
+        border-radius: $blue-actions-indicator-height * 0.5;
         box-shadow: $box-shadow;
         background-color: $header-bg;
 
         .blue-actions-controls {
             & > * {
-                margin-top: $spacer / 2;
-                margin-bottom: $spacer / 2;
+                margin-top: $spacer * 0.5;
+                margin-bottom: $spacer * 0.5;
             }
         }
 
@@ -31,13 +31,13 @@
         .blue-actions-controls {
             background: transparent;
             display: flex;
-            margin-left: -$spacer / 2;
-            margin-right: -$spacer / 2;
+            margin-left: -$spacer * 0.5;
+            margin-right: -$spacer * 0.5;
             padding-right: $spacer;
 
             & > * {
-                margin-left: $spacer / 2;
-                margin-right: $spacer / 2;
+                margin-left: $spacer * 0.5;
+                margin-right: $spacer * 0.5;
             }
         }
 

package/dist/styles/mixins/_custom-property.scss

@@ -1,10 +1,10 @@
-@mixin customProperty($name, $value) {
-    // fallback for older browser who do not support custom properties / css variables
-    #{$name}: #{$value};
-
-    // create a css variable (this might override the variable on any of the ancestor elements)
-    --#{$name}: #{$value};
-
-    // use the css variable on the property
-    #{$name}: var(--#{$name}, #{$value});
-}
+@mixin customProperty($name, $value) {
+    // fallback for older browser who do not support custom properties / css variables
+    #{$name}: #{$value};
+
+    // create a css variable (this might override the variable on any of the ancestor elements)
+    --#{$name}: #{$value};
+
+    // use the css variable on the property
+    #{$name}: var(--#{$name}, #{$value});
+}

package/dist/styles/mixins/_misc.scss

@@ -1,33 +1,33 @@
-@mixin custom-scrollbar($thumb-color, $bg-color, $track-border-radius: 0) {
-    ::-webkit-scrollbar-thumb {
-        background-color: rgba($thumb-color, 0.4);
-        box-shadow: inset 1px 1px 0 rgba($thumb-color, 0.1),
-            inset 0 -1px 0 rgba($thumb-color, 0.07);
-    }
-    ::-webkit-scrollbar-thumb:hover {
-        background-color: rgba($thumb-color, 0.5);
-    }
-    ::-webkit-scrollbar-thumb:active {
-        background-color: rgba($thumb-color, 0.6);
-    }
-
-    ::-webkit-scrollbar-track {
-        background-color: $bg-color;
-        border-radius: $track-border-radius;
-    }
-}
-
-@mixin slide-transition() {
-    $slide-transition: width 0.5s;
-    transition: $slide-transition;
-}
-
-@mixin header-bg() {
-    background-color: rgba($header-bg, $shimmering);
-    background-image: linear-gradient(
-        0deg,
-        rgba($header-bg, 0.8),
-        rgba($header-bg, 0.7)
-    );
-    backdrop-filter: blur(3px) saturate(125%);
-}
+@mixin custom-scrollbar($thumb-color, $bg-color, $track-border-radius: 0) {
+    ::-webkit-scrollbar-thumb {
+        background-color: rgba($thumb-color, 0.4);
+        box-shadow: inset 1px 1px 0 rgba($thumb-color, 0.1),
+            inset 0 -1px 0 rgba($thumb-color, 0.07);
+    }
+    ::-webkit-scrollbar-thumb:hover {
+        background-color: rgba($thumb-color, 0.5);
+    }
+    ::-webkit-scrollbar-thumb:active {
+        background-color: rgba($thumb-color, 0.6);
+    }
+
+    ::-webkit-scrollbar-track {
+        background-color: $bg-color;
+        border-radius: $track-border-radius;
+    }
+}
+
+@mixin slide-transition() {
+    $slide-transition: width 0.5s;
+    transition: $slide-transition;
+}
+
+@mixin header-bg() {
+    background-color: rgba($header-bg, $shimmering);
+    background-image: linear-gradient(
+        0deg,
+        rgba($header-bg, 0.8),
+        rgba($header-bg, 0.7)
+    );
+    backdrop-filter: blur(3px) saturate(125%);
+}

package/dist/styles/mixins/_scroll-shadow.scss

@@ -1,9 +1,9 @@
-@mixin scroll-shadow($bg, $light-base: white) {
-    background: linear-gradient($bg 30%, rgba($light-base, 0)),
-        linear-gradient(rgba($light-base, 0) 10px, $bg 70%) bottom,
-        radial-gradient(at top, rgba(0, 0, 0, 0.2), transparent 70%),
-        radial-gradient(at bottom, rgba(0, 0, 0, 0.2), transparent 70%) bottom;
-    background-repeat: no-repeat;
-    background-size: 100% 20px, 100% 20px, 100% 10px, 100% 10px;
-    background-attachment: local, local, scroll, scroll;
-}
+@mixin scroll-shadow($bg, $light-base: white) {
+    background: linear-gradient($bg 30%, rgba($light-base, 0)),
+        linear-gradient(rgba($light-base, 0) 10px, $bg 70%) bottom,
+        radial-gradient(at top, rgba(0, 0, 0, 0.2), transparent 70%),
+        radial-gradient(at bottom, rgba(0, 0, 0, 0.2), transparent 70%) bottom;
+    background-repeat: no-repeat;
+    background-size: 100% 20px, 100% 20px, 100% 10px, 100% 10px;
+    background-attachment: local, local, scroll, scroll;
+}

package/dist/styles/mixins/_switch.scss

@@ -1,85 +1,85 @@
-@mixin switch(
-    $width: 35px,
-    $height: 20px,
-    $padding: 3px,
-    $color: $body-color,
-    $color-active: $success
-) {
-    $slider-size: $height - ($padding * 2);
-
-    & {
-        position: relative;
-        display: inline-block;
-        width: $width;
-        height: $height;
-
-        input {
-            display: none;
-        }
-
-        &.disabled {
-            opacity: 0.8;
-        }
-
-        &:not(.disabled) {
-            .slider {
-                cursor: pointer;
-            }
-        }
-
-        .slider {
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background-color: $input-group-addon-bg;
-            transition: 0.4s;
-            box-shadow: inset 0 0 0 1px rgba($color, 0.5);
-
-            &::before {
-                content: "";
-                position: absolute;
-                height: $slider-size;
-                width: $slider-size;
-                left: $padding;
-                bottom: $padding;
-                background-color: $color;
-                transition: 0.4s;
-            }
-
-            &::after {
-                content: attr(data-label);
-                position: absolute;
-                top: 50%;
-                left: 50%;
-                transform: translate(-50%, -50%);
-                margin-left: ($slider-size / 2);
-                transition: margin-left 0.4s;
-                color: $color;
-            }
-        }
-
-        input:checked {
-            & + .slider {
-                background-color: $color-active;
-                box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.3);
-
-                &::before {
-                    transform: translateX(
-                        $width - $slider-size - ($padding * 2)
-                    );
-                    background-color: white;
-                }
-
-                &::after {
-                    color: white;
-                    margin-left: ($slider-size / 2) * -1;
-                }
-            }
-        }
-        input:focus + .slider {
-            box-shadow: 0 0 1px $color-active;
-        }
-    }
-}
+@mixin switch(
+    $width: 35px,
+    $height: 20px,
+    $padding: 3px,
+    $color: $body-color,
+    $color-active: $success
+) {
+    $slider-size: $height - ($padding * 2);
+
+    & {
+        position: relative;
+        display: inline-block;
+        width: $width;
+        height: $height;
+
+        input {
+            display: none;
+        }
+
+        &.disabled {
+            opacity: 0.8;
+        }
+
+        &:not(.disabled) {
+            .slider {
+                cursor: pointer;
+            }
+        }
+
+        .slider {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-color: $input-group-addon-bg;
+            transition: 0.4s;
+            box-shadow: inset 0 0 0 1px rgba($color, 0.5);
+
+            &::before {
+                content: "";
+                position: absolute;
+                height: $slider-size;
+                width: $slider-size;
+                left: $padding;
+                bottom: $padding;
+                background-color: $color;
+                transition: 0.4s;
+            }
+
+            &::after {
+                content: attr(data-label);
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+                margin-left: ($slider-size * 0.5);
+                transition: margin-left 0.4s;
+                color: $color;
+            }
+        }
+
+        input:checked {
+            & + .slider {
+                background-color: $color-active;
+                box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.3);
+
+                &::before {
+                    transform: translateX(
+                        $width - $slider-size - ($padding * 2)
+                    );
+                    background-color: white;
+                }
+
+                &::after {
+                    color: white;
+                    margin-left: ($slider-size * 0.5) * -1;
+                }
+            }
+        }
+        input:focus + .slider {
+            box-shadow: 0 0 1px $color-active;
+        }
+    }
+}

package/dist/types/components/Grid.d.ts

@@ -70,16 +70,23 @@ export interface GridState {
 }
 /**
  * The main component. As soon this component is mounted, it is globally available under `window.blueGridRef`.
- * Also you can append your own event listeners with `blueGridRef.addEventListener(eventName, (prevProps, prevState) => { })`.
+ * You can also append your own event listeners.
  *
- * Allowed event listeners:
+ * Allowed events:
  *
  * * **componentDidUpdate** - Component was updated.
- *   Example: `blueGridRef.addEventListener("componentDidUpdate", (prevProps, prevState) => { })`
+ *   Example: `window.blueGridRef.addEventListener("componentDidUpdate", (prevProps, prevState) => { })`
  * * **pageDidShowAgain** - Page appeared again with the same old state. In the callback function you can reinitialize things.
- *   Example: `blueGridRef.addEventListener("pageDidShowAgain", "home", (prevProps, prevState) => { })`
+ *   Example: `window.blueGridRef.addEventListener("pageDidShowAgain", "home", (prevProps, prevState) => { })`
  * * **pageDidHide** - This page disappeared and another page appears instead.
- *   Example: `blueGridRef.addEventListener("pageDidHide", "home", (prevProps, prevState) => { })`
+ *   Example: `window.blueGridRef.addEventListener("pageDidHide", "home", (prevProps, prevState) => { })`
+ *
+ * Method to add event listeners:
+ * * `window.blueGridRef.`**addEventListener**`(eventName: string, param2: any, param3: any, listenerId?: string)`
+ *
+ * Methods to remove event listeners:
+ * * `window.blueGridRef.`**removeEventListener**`(eventName: string, listenerId: string)`
+ * * `window.blueGridRef.`**removeDuplicatedEventListeners**`()` - Will automatically be called when running `addEventListener`
  */
 export default class Grid extends Component<GridProps, GridState> {
     defaultMatch: string[];
@@ -105,6 +112,8 @@ export default class Grid extends Component<GridProps, GridState> {
     toggleSidebar(event: any): void;
     hideSidebar(e: any): void;
     initMatch(): void;
-    addEventListener(param1: any, param2: any, param3: any): void;
+    addEventListener(param1: any, param2: any, param3: any, listenerId?: string): void;
+    removeEventListener(type: string, listenerId: string): void;
+    removeDuplicatedEventListeners(): void;
     render(): JSX.Element;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "blue-react",
-    "version": "7.8.3",
+    "version": "7.10.1",
     "description": "Blue React Components",
     "license": "LGPL-3.0-or-later",
     "main": "index.js",