slicejs-web-framework 2.3.4 → 2.4.0

package/src/Components/Visual/Route/Route.js

@@ -1,93 +1,93 @@
-export default class Route extends HTMLElement {
-   constructor(props) {
-      super();
-      this.props = props;
-      this.rendered = false;
-   }
-
-   init() {
-      if (!this.props.path) {
-         this.props.path = ' ';
-      }
-
-      if (!this.props.component) {
-         this.props.component = slice.router.pathToRouteMap.get(this.props.path).component || ' ';
-      }
-
-      //this.props.innerHTML = this.innerHTML;
-   }
-
-   get path() {
-      return this.props.path;
-   }
-
-   set path(value) {
-      this.props.path = value;
-   }
-
-   get component() {
-      return this.props.component;
-   }
-
-   set component(value) {
-      this.props.component = value;
-   }
-
-   async render() {
-      if (Route.componentCache[this.props.component]) {
-         const cachedComponent = Route.componentCache[this.props.component];
-         this.innerHTML = '';
-
-         if (cachedComponent.update) {
-            await cachedComponent.update();
-         }
-
-         this.appendChild(cachedComponent);
-      } else {
-         if (!this.props.component) {
-            return;
-         }
-
-         if (!slice.controller.componentCategories.has(this.props.component)) {
-            slice.logger.logError(`${this.sliceId}`, `Component ${this.props.component} not found`);
-            return;
-         }
-
-         const component = await slice.build(this.props.component, {
-            sliceId: this.props.component,
-         });
-
-         this.innerHTML = '';
-         this.appendChild(component);
-         Route.componentCache[this.props.component] = component;
-      }
-      this.rendered = true;
-   }
-
-   async renderIfCurrentRoute() {
-      if (this.props.path === window.location.pathname) {
-         if (this.rendered) {
-            if (Route.componentCache[this.props.component]) {
-               const cachedComponent = Route.componentCache[this.props.component];
-               if (cachedComponent.update) {
-                  await cachedComponent.update();
-               }
-               return true;
-            }
-         }
-         await this.render();
-         return true;
-      }
-      return false;
-   }
-
-   removeComponent() {
-      delete Route.componentCache[this.props.component];
-      this.innerHTML = '';
-      this.rendered = false;
-   }
-}
-
-Route.componentCache = {};
-
-customElements.define('slice-route', Route);
+export default class Route extends HTMLElement {
+   constructor(props) {
+      super();
+      this.props = props;
+      this.rendered = false;
+   }
+
+   init() {
+      if (!this.props.path) {
+         this.props.path = ' ';
+      }
+
+      if (!this.props.component) {
+         this.props.component = slice.router.pathToRouteMap.get(this.props.path).component || ' ';
+      }
+
+      //this.props.innerHTML = this.innerHTML;
+   }
+
+   get path() {
+      return this.props.path;
+   }
+
+   set path(value) {
+      this.props.path = value;
+   }
+
+   get component() {
+      return this.props.component;
+   }
+
+   set component(value) {
+      this.props.component = value;
+   }
+
+   async render() {
+      if (Route.componentCache[this.props.component]) {
+         const cachedComponent = Route.componentCache[this.props.component];
+         this.innerHTML = '';
+
+         if (cachedComponent.update) {
+            await cachedComponent.update();
+         }
+
+         this.appendChild(cachedComponent);
+      } else {
+         if (!this.props.component) {
+            return;
+         }
+
+         if (!slice.controller.componentCategories.has(this.props.component)) {
+            slice.logger.logError(`${this.sliceId}`, `Component ${this.props.component} not found`);
+            return;
+         }
+
+         const component = await slice.build(this.props.component, {
+            sliceId: this.props.component,
+         });
+
+         this.innerHTML = '';
+         this.appendChild(component);
+         Route.componentCache[this.props.component] = component;
+      }
+      this.rendered = true;
+   }
+
+   async renderIfCurrentRoute() {
+      if (this.props.path === window.location.pathname) {
+         if (this.rendered) {
+            if (Route.componentCache[this.props.component]) {
+               const cachedComponent = Route.componentCache[this.props.component];
+               if (cachedComponent.update) {
+                  await cachedComponent.update();
+               }
+               return true;
+            }
+         }
+         await this.render();
+         return true;
+      }
+      return false;
+   }
+
+   removeComponent() {
+      delete Route.componentCache[this.props.component];
+      this.innerHTML = '';
+      this.rendered = false;
+   }
+}
+
+Route.componentCache = {};
+
+customElements.define('slice-route', Route);

package/src/Components/Visual/Select/Select.css

@@ -1,84 +1,84 @@
-.slice_select_dropdown {
-  font-family: var(--font-family);
-  max-width: 100%;
-  margin-bottom: 25px;
-  margin-top: 25px;
-  position: relative;
-}
-.slice_select_container {
-  cursor: pointer;
-  display: flex;
-  padding: 10px;
-  border-radius: var(--border-radius-slice);
-  border: var(--slice-border) solid var(--primary-color);
-  background-color: var(--primary-background-color);
-  justify-content: space-between;
-  align-items: center;
-}
-.slice_select {
-  pointer-events: none;
-  color: var(--font-primary-color);
-  width: 100%;
-  background: none;
-  outline: none;
-  border: none;
-}
-.slice_select_label {
-  color: var(--primary-color);
-  position: absolute;
-  transition: all 0.5s;
-  user-select: none;
-}
-.slice_select_value {
-  scale: 0.8;
-  transform: translateY(-200%);
-  transition: all 0.5s;
-}
-.slice_select_menu {
-  display: none;
-  border: var(--slice-border) solid var(--primary-color);
-  list-style: none;
-  font-family: var(--font-family);
-  visibility: hidden;
-  overflow: hidden;
-  position: absolute;
-  opacity: 0;
-  transition: 0s, opacity 0.3s;
-  top: 100%;
-  width: 100%;
-  z-index: 1;
-  background-color: var(--primary-background-color);
-  border-radius: var(--border-radius-slice);
-  box-shadow: 0 0 10px 0 #00000050;
-  div {
-    color: var(--font-primary-color);
-    cursor: pointer;
-    padding: 10px;
-    &:hover {
-      color: var(--secondary-color-contrast);
-      background-color: var(--secondary-color);
-    }
-  }
-}
-.menu_open {
-  display: block;
-  overflow-y: scroll;
-  min-height: min-content;
-  max-height: 400%;
-  visibility: visible;
-  opacity: 1;
-}
-.menu_open::-webkit-scrollbar {
-  width: 5px;
-}
-.menu_open::-webkit-scrollbar-thumb {
-  background: var(--secondary-color);
-  border-radius: var(--border-radius-slice);
-}
-.active {
-  /* color: var(--primary-color); */
-  background-color: var(--secondary-background-color);
-}
-.slice_select_container .caret {
-  border-top-color: var(--primary-color);
-}
+.slice_select_dropdown {
+  font-family: var(--font-family);
+  max-width: 100%;
+  margin-bottom: 25px;
+  margin-top: 25px;
+  position: relative;
+}
+.slice_select_container {
+  cursor: pointer;
+  display: flex;
+  padding: 10px;
+  border-radius: var(--border-radius-slice);
+  border: var(--slice-border) solid var(--primary-color);
+  background-color: var(--primary-background-color);
+  justify-content: space-between;
+  align-items: center;
+}
+.slice_select {
+  pointer-events: none;
+  color: var(--font-primary-color);
+  width: 100%;
+  background: none;
+  outline: none;
+  border: none;
+}
+.slice_select_label {
+  color: var(--primary-color);
+  position: absolute;
+  transition: all 0.5s;
+  user-select: none;
+}
+.slice_select_value {
+  scale: 0.8;
+  transform: translateY(-200%);
+  transition: all 0.5s;
+}
+.slice_select_menu {
+  display: none;
+  border: var(--slice-border) solid var(--primary-color);
+  list-style: none;
+  font-family: var(--font-family);
+  visibility: hidden;
+  overflow: hidden;
+  position: absolute;
+  opacity: 0;
+  transition: 0s, opacity 0.3s;
+  top: 100%;
+  width: 100%;
+  z-index: 1;
+  background-color: var(--primary-background-color);
+  border-radius: var(--border-radius-slice);
+  box-shadow: 0 0 10px 0 #00000050;
+  div {
+    color: var(--font-primary-color);
+    cursor: pointer;
+    padding: 10px;
+    &:hover {
+      color: var(--secondary-color-contrast);
+      background-color: var(--secondary-color);
+    }
+  }
+}
+.menu_open {
+  display: block;
+  overflow-y: scroll;
+  min-height: min-content;
+  max-height: 400%;
+  visibility: visible;
+  opacity: 1;
+}
+.menu_open::-webkit-scrollbar {
+  width: 5px;
+}
+.menu_open::-webkit-scrollbar-thumb {
+  background: var(--secondary-color);
+  border-radius: var(--border-radius-slice);
+}
+.active {
+  /* color: var(--primary-color); */
+  background-color: var(--secondary-background-color);
+}
+.slice_select_container .caret {
+  border-top-color: var(--primary-color);
+}

package/src/Components/Visual/Select/Select.html

@@ -1,8 +1,8 @@
-<div class="slice_select_dropdown">
-  <div class="slice_select_container">
-    <label class="slice_select_label"></label>
-    <input class="slice_select" />
-    <div class="caret"></div>
-  </div>
-  <div class="slice_select_menu"></div>
-</div>
+<div class="slice_select_dropdown">
+  <div class="slice_select_container">
+    <label class="slice_select_label"></label>
+    <input class="slice_select" />
+    <div class="caret"></div>
+  </div>
+  <div class="slice_select_menu"></div>
+</div>