slicejs-web-framework 2.3.5 → 2.4.0

package/src/Components/Visual/MultiRoute/MultiRoute.js

@@ -1,93 +1,93 @@
-export default class MultiRoute extends HTMLElement {
-   constructor(props) {
-      super();
-      this.props = props;
-      this.renderedComponents = new Map(); // Cache para componentes renderizados
-   }
-
-   init() {
-      if (!this.props.routes || !Array.isArray(this.props.routes)) {
-         slice.logger.logError('MultiRoute', 'No valid routes array provided in props.');
-         return;
-      }
-
-      /*
-      this.props.routes.forEach(route => {
-         if (!route.path || !route.component) {
-            slice.logger.logError('MultiRoute', 'Route must have a path and a component.');
-         }
-
-         console.log(route)
-
-         slice.router.verifyDynamicRouteExistence(route)
-      });
-
-      // verify if the current route is registered in the routes.js file
-      slice.router.verifyDynamicRouteExistence(this.props.routes)
-      */
-   }
-
-   async render() {
-      const currentPath = window.location.pathname;
-      const routeMatch = this.props.routes.find((route) => route.path === currentPath);
-
-      if (routeMatch) {
-         const { component } = routeMatch;
-
-         if (this.renderedComponents.has(component)) {
-            const cachedComponent = this.renderedComponents.get(component);
-
-            // Aquí nos aseguramos de que el contenido se limpie antes de insertar el componente en caché.
-            this.innerHTML = '';
-
-            // Si el componente en caché tiene un método update, lo ejecutamos
-            if (cachedComponent.update) {
-               await cachedComponent.update();
-            }
-
-            // Insertamos el componente en caché en el DOM
-            this.appendChild(cachedComponent);
-         } else {
-            if (!slice.controller.componentCategories.has(component)) {
-               slice.logger.logError(`${this.sliceId}`, `Component ${component} not found`);
-               return;
-            }
-
-            // Si el componente no está en caché, lo construimos y lo almacenamos en la caché
-            const newComponent = await slice.build(component, { sliceId: component });
-            this.innerHTML = '';
-            this.appendChild(newComponent);
-
-            // Guardamos el componente recién construido en la caché
-            this.renderedComponents.set(component, newComponent);
-         }
-      } else {
-         // Limpiamos el contenido si no hay una coincidencia de ruta
-         this.innerHTML = '';
-      }
-   }
-
-   async renderIfCurrentRoute() {
-      const currentPath = window.location.pathname;
-      const routeMatch = this.props.routes.find((route) => route.path === currentPath);
-
-      if (routeMatch) {
-         await this.render(); // Llamamos a render() para manejar el renderizado desde la caché si es necesario
-         return true;
-      }
-      return false;
-   }
-
-   removeComponent() {
-      const currentPath = window.location.pathname;
-      const routeMatch = this.props.routes.find((route) => route.path === currentPath);
-
-      if (routeMatch) {
-         const { component } = routeMatch;
-         this.renderedComponents.delete(component);
-         this.innerHTML = '';
-      }
-   }
-}
-
-customElements.define('slice-multi-route', MultiRoute);
+export default class MultiRoute extends HTMLElement {
+   constructor(props) {
+      super();
+      this.props = props;
+      this.renderedComponents = new Map(); // Cache para componentes renderizados
+   }
+
+   init() {
+      if (!this.props.routes || !Array.isArray(this.props.routes)) {
+         slice.logger.logError('MultiRoute', 'No valid routes array provided in props.');
+         return;
+      }
+
+      /*
+      this.props.routes.forEach(route => {
+         if (!route.path || !route.component) {
+            slice.logger.logError('MultiRoute', 'Route must have a path and a component.');
+         }
+
+         console.log(route)
+
+         slice.router.verifyDynamicRouteExistence(route)
+      });
+
+      // verify if the current route is registered in the routes.js file
+      slice.router.verifyDynamicRouteExistence(this.props.routes)
+      */
+   }
+
+   async render() {
+      const currentPath = window.location.pathname;
+      const routeMatch = this.props.routes.find((route) => route.path === currentPath);
+
+      if (routeMatch) {
+         const { component } = routeMatch;
+
+         if (this.renderedComponents.has(component)) {
+            const cachedComponent = this.renderedComponents.get(component);
+
+            // Aquí nos aseguramos de que el contenido se limpie antes de insertar el componente en caché.
+            this.innerHTML = '';
+
+            // Si el componente en caché tiene un método update, lo ejecutamos
+            if (cachedComponent.update) {
+               await cachedComponent.update();
+            }
+
+            // Insertamos el componente en caché en el DOM
+            this.appendChild(cachedComponent);
+         } else {
+            if (!slice.controller.componentCategories.has(component)) {
+               slice.logger.logError(`${this.sliceId}`, `Component ${component} not found`);
+               return;
+            }
+
+            // Si el componente no está en caché, lo construimos y lo almacenamos en la caché
+            const newComponent = await slice.build(component, { sliceId: component });
+            this.innerHTML = '';
+            this.appendChild(newComponent);
+
+            // Guardamos el componente recién construido en la caché
+            this.renderedComponents.set(component, newComponent);
+         }
+      } else {
+         // Limpiamos el contenido si no hay una coincidencia de ruta
+         this.innerHTML = '';
+      }
+   }
+
+   async renderIfCurrentRoute() {
+      const currentPath = window.location.pathname;
+      const routeMatch = this.props.routes.find((route) => route.path === currentPath);
+
+      if (routeMatch) {
+         await this.render(); // Llamamos a render() para manejar el renderizado desde la caché si es necesario
+         return true;
+      }
+      return false;
+   }
+
+   removeComponent() {
+      const currentPath = window.location.pathname;
+      const routeMatch = this.props.routes.find((route) => route.path === currentPath);
+
+      if (routeMatch) {
+         const { component } = routeMatch;
+         this.renderedComponents.delete(component);
+         this.innerHTML = '';
+      }
+   }
+}
+
+customElements.define('slice-multi-route', MultiRoute);

package/src/Components/Visual/Navbar/Navbar.css

@@ -1,115 +1,115 @@
-.slice_nav_header {
-  font-family: var(--font-family);
-  width: 100%;
-  z-index: 1;
-  box-shadow: 0px 0px 10px #00000050;
-  background-color: var(--primary-color);
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-}
-.direction-row-reverse {
-  flex-direction: row-reverse;
-}
-.nav_bar_fixed {
-  z-index: 100;
-  width: 100%;
-  left: 0;
-  top: 0;
-  position: fixed;
-}
-.slice_nav_bar {
-  transition: transform 0.3s ease;
-  width: 100%;
-  justify-content: center;
-  display: flex;
-  align-items: center;
-  left: 0;
-  top: 0;
-}
-.nav_bar_menu {
-  width: 100%;
-  overflow-y: hidden;
-  overflow-x: scroll;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  list-style: none;
-}
-.slice_nav_header .item {
-  cursor: pointer;
-  font-weight: bold;
-  text-decoration: none;
-  color: var(--primary-color-contrast);
-  border-radius: var(--border-radius-slice);
-}
-.anim-item {
-  position: absolute;
-  top: 100%;
-  left: 50%;
-  width: 0%;
-  height: 2.5px;
-  border-radius: 5px;
-  background-color: var(--primary-color-contrast);
-  transition: width 0.3s ease, left 0.3s ease;
-}
-.slice_nav_header li {
-  margin: 25px;
-  display: flex;
-  justify-content: center;
-  position: relative;
-}
-
-.slice_nav_header li:hover .anim-item {
-  width: 100%;
-  left: 0;
-}
-.slice_nav_header .logo_container {
-  padding: 10px;
-}
-.logo_container img {
-  pointer-events: none;
-  user-select: none;
-  max-height: 50px;
-  max-width: 200px;
-}
-.nav_bar_buttons {
-  justify-content: flex-end;
-  display: flex;
-}
-
-.mobile_menu_button,
-.mobile_close_menu {
-  visibility: hidden;
-  position: absolute;
-  right: 0px;
-  margin-right: 25px;
-}
-.mobile_close_menu {
-  top: 25px;
-}
-@media only screen and (max-width: 1020px) {
-  .slice_nav_bar {
-    z-index: 1;
-    list-style: none;
-    width: 100%;
-    height: 100%;
-    position: fixed;
-    top: 0;
-    left: 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    background-color: var(--primary-color);
-    transform: translateX(100%);
-  }
-  .nav_bar_menu,
-  .nav_bar_buttons {
-    flex-direction: column;
-  }
-  .mobile_menu_button,
-  .mobile_close_menu {
-    visibility: visible;
-  }
-}
+.slice_nav_header {
+  font-family: var(--font-family);
+  width: 100%;
+  z-index: 1;
+  box-shadow: 0px 0px 10px #00000050;
+  background-color: var(--primary-color);
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+.direction-row-reverse {
+  flex-direction: row-reverse;
+}
+.nav_bar_fixed {
+  z-index: 100;
+  width: 100%;
+  left: 0;
+  top: 0;
+  position: fixed;
+}
+.slice_nav_bar {
+  transition: transform 0.3s ease;
+  width: 100%;
+  justify-content: center;
+  display: flex;
+  align-items: center;
+  left: 0;
+  top: 0;
+}
+.nav_bar_menu {
+  width: 100%;
+  overflow-y: hidden;
+  overflow-x: scroll;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  list-style: none;
+}
+.slice_nav_header .item {
+  cursor: pointer;
+  font-weight: bold;
+  text-decoration: none;
+  color: var(--primary-color-contrast);
+  border-radius: var(--border-radius-slice);
+}
+.anim-item {
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  width: 0%;
+  height: 2.5px;
+  border-radius: 5px;
+  background-color: var(--primary-color-contrast);
+  transition: width 0.3s ease, left 0.3s ease;
+}
+.slice_nav_header li {
+  margin: 25px;
+  display: flex;
+  justify-content: center;
+  position: relative;
+}
+
+.slice_nav_header li:hover .anim-item {
+  width: 100%;
+  left: 0;
+}
+.slice_nav_header .logo_container {
+  padding: 10px;
+}
+.logo_container img {
+  pointer-events: none;
+  user-select: none;
+  max-height: 50px;
+  max-width: 200px;
+}
+.nav_bar_buttons {
+  justify-content: flex-end;
+  display: flex;
+}
+
+.mobile_menu_button,
+.mobile_close_menu {
+  visibility: hidden;
+  position: absolute;
+  right: 0px;
+  margin-right: 25px;
+}
+.mobile_close_menu {
+  top: 25px;
+}
+@media only screen and (max-width: 1020px) {
+  .slice_nav_bar {
+    z-index: 1;
+    list-style: none;
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    background-color: var(--primary-color);
+    transform: translateX(100%);
+  }
+  .nav_bar_menu,
+  .nav_bar_buttons {
+    flex-direction: column;
+  }
+  .mobile_menu_button,
+  .mobile_close_menu {
+    visibility: visible;
+  }
+}

package/src/Components/Visual/Navbar/Navbar.html

@@ -1,44 +1,44 @@
-<header class="slice_nav_header">
-  <a class="logo_container"></a>
-  <nav class="slice_nav_bar">
-    <div class="nav_bar_menu"></div>
-    <div class="nav_bar_buttons"></div>
-    <div class="mobile_close_menu">
-      <svg
-        class="w-6 h-6 text-gray-800 dark:text-white"
-        aria-hidden="true"
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        fill="none"
-        viewBox="0 0 24 24"
-      >
-        <path
-          stroke="var(--primary-color-contrast)"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M6 18 17.94 6M18 18 6.06 6"
-        />
-      </svg>
-    </div>
-  </nav>
-  <div class="mobile_menu_button">
-    <svg
-      class="w-6 h-6 text-gray-800 dark:text-white"
-      aria-hidden="true"
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      fill="none"
-      viewBox="0 0 24 24"
-    >
-      <path
-        stroke="var(--primary-color-contrast)"
-        stroke-linecap="round"
-        stroke-width="3"
-        d="M12 6h.01M12 12h.01M12 18h.01"
-      />
-    </svg>
-  </div>
-</header>
+<header class="slice_nav_header">
+  <a class="logo_container"></a>
+  <nav class="slice_nav_bar">
+    <div class="nav_bar_menu"></div>
+    <div class="nav_bar_buttons"></div>
+    <div class="mobile_close_menu">
+      <svg
+        class="w-6 h-6 text-gray-800 dark:text-white"
+        aria-hidden="true"
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        fill="none"
+        viewBox="0 0 24 24"
+      >
+        <path
+          stroke="var(--primary-color-contrast)"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M6 18 17.94 6M18 18 6.06 6"
+        />
+      </svg>
+    </div>
+  </nav>
+  <div class="mobile_menu_button">
+    <svg
+      class="w-6 h-6 text-gray-800 dark:text-white"
+      aria-hidden="true"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      fill="none"
+      viewBox="0 0 24 24"
+    >
+      <path
+        stroke="var(--primary-color-contrast)"
+        stroke-linecap="round"
+        stroke-width="3"
+        d="M12 6h.01M12 12h.01M12 18h.01"
+      />
+    </svg>
+  </div>
+</header>