slicejs-web-framework 3.4.3 → 3.4.4

package/slicejs-cli/tests/e2e/fixtures/components/Visual/Loading/Loading.js

@@ -0,0 +1,164 @@
+// Warns once per deprecated prop name (kept module-scoped so each component
+// reports a given alias only once per session).
+const _sliceDeprecated = new Set();
+function deprecate(oldName, newName) {
+   if (_sliceDeprecated.has(oldName)) return;
+   _sliceDeprecated.add(oldName);
+   console.warn(`[Slice] "${oldName}" is deprecated; use "${newName}" instead.`);
+}
+
+export default class Loading extends HTMLElement {
+
+   static props = {
+      // Canonical busy-state flag. `isActive` is kept as a deprecated alias.
+      active: {
+         type: 'boolean',
+         default: false,
+         required: false
+      },
+      isActive: {
+         type: 'boolean',
+         default: false,
+         required: false
+      },
+      container: {
+         type: 'object',
+         default: null,
+         required: false
+      }
+   };
+
+   constructor(props) {
+      super();
+      slice.attachTemplate(this);
+      slice.controller.setComponentProps(this, props);
+      this._container = this.container || null;
+      this._isActive = false;
+      this._currentContainer = null;
+   }
+
+   init() {}
+
+   /**
+    * Muestra el loading spinner
+    * @param {HTMLElement} container - Opcional. Contenedor donde mostrar el loading.
+    *                                  Si no se proporciona, usa document.body (fullscreen)
+    */
+   start(container = null) {
+      // Determinar el contenedor
+      const targetContainer = container || this._container || document.body;
+      
+      // Si ya está activo en el mismo container, no hacer nada
+      if (this._isActive && this._currentContainer === targetContainer) {
+         return;
+      }
+      
+      // Si está activo en otro container, primero detenerlo
+      if (this._isActive) {
+         this.stop();
+      }
+      
+      // Configurar estilos según el contenedor
+      if (targetContainer !== document.body) {
+         // Para contenedores específicos
+         // Guardar el position original para restaurarlo después
+         this._originalPosition = targetContainer.style.position;
+         this._originalOverflow = targetContainer.style.overflow;
+         
+         // Solo cambiar si no tiene position definido o es static
+         const currentPosition = window.getComputedStyle(targetContainer).position;
+         if (currentPosition === 'static' || currentPosition === '') {
+            targetContainer.style.position = 'relative';
+         }
+         
+         // Ocultar overflow para que el loading no se salga
+         targetContainer.style.overflow = 'hidden';
+         
+         // Configurar el loading como absolute para que llene el container
+         this.style.position = 'absolute';
+         this.style.top = '0';
+         this.style.left = '0';
+         this.style.right = '0';
+         this.style.bottom = '0';
+         this.style.width = '100%';
+         this.style.height = '100%';
+      } else {
+         // Para document.body (fullscreen)
+         this.style.position = 'fixed';
+         this.style.top = '0';
+         this.style.left = '0';
+         this.style.right = '0';
+         this.style.bottom = '0';
+         this.style.width = '100%';
+         this.style.height = '100%';
+      }
+      
+      // Append al contenedor
+      targetContainer.appendChild(this);
+      this._isActive = true;
+      this._currentContainer = targetContainer;
+   }
+
+   /**
+    * Oculta el loading spinner
+    */
+   stop() {
+      if (!this._isActive) {
+         return;
+      }
+      
+      // Restaurar estilos originales del container si los modificamos
+      if (this._currentContainer && 
+          this._currentContainer !== document.body) {
+         if (this._originalPosition !== undefined) {
+            this._currentContainer.style.position = this._originalPosition;
+         }
+         if (this._originalOverflow !== undefined) {
+            this._currentContainer.style.overflow = this._originalOverflow;
+         }
+      }
+      
+      // Remover del DOM
+      if (this.parentNode) {
+         this.parentNode.removeChild(this);
+      }
+      
+      this._isActive = false;
+      this._currentContainer = null;
+      this._originalPosition = undefined;
+      this._originalOverflow = undefined;
+   }
+
+   // Canonical busy-state flag. Toggling it shows/hides the spinner.
+   get active() {
+      return this._isActive;
+   }
+
+   set active(value) {
+      if (value === true && !this._isActive) {
+         this.start();
+      } else if (value === false && this._isActive) {
+         this.stop();
+      }
+   }
+
+   // Deprecated alias for `active`.
+   get isActive() {
+      return this._isActive;
+   }
+
+   set isActive(value) {
+      if (value) deprecate('isActive', 'active');
+      this.active = value;
+   }
+
+   get container() {
+      return this._container;
+   }
+
+   set container(value) {
+      this._container = value;
+   }
+}
+
+customElements.define('slice-loading', Loading);

package/slicejs-cli/tests/e2e/fixtures/components/Visual/MultiRoute/MultiRoute.js

@@ -0,0 +1,167 @@
+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;
+      }
+      // NOTE: MultiRoute does NOT register its routes in the Router. `routes.js` is the single
+      // source of truth for what the Router knows. The Router resolves the URL on first load /
+      // refresh / deep-link BEFORE this component mounts, so a path that only lived inside a
+      // MultiRoute would 404 on a direct load — incoherent. Declare every section path in
+      // `routes.js` (pointing at the shell); MultiRoute just chooses which one to show.
+   }
+
+   /**
+    * Encuentra una ruta que coincida con el path actual
+    * Soporta rutas estáticas y dinámicas con parámetros ${param}
+    */
+   matchRoute(currentPath) {
+      // Normalize trailing slash so '/about/' behaves like '/about' (keep root '/').
+      currentPath = currentPath.length > 1 ? currentPath.replace(/\/+$/, '') : currentPath;
+
+      // 1. Match exacto, case-insensitive ('/About' coincide con '/about')
+      const lowerPath = currentPath.toLowerCase();
+      const exactMatch = this.props.routes.find(
+         (route) => (route.path.length > 1 ? route.path.replace(/\/+$/, '') : route.path).toLowerCase() === lowerPath
+      );
+      if (exactMatch) {
+         return { route: exactMatch, params: {} };
+      }
+
+      // 2. Si no hay match exacto, buscar rutas dinámicas
+      for (const route of this.props.routes) {
+         if (route.path.includes('${')) {
+            const { regex, paramNames } = this.compilePathPattern(route.path);
+            const match = currentPath.match(regex);
+            
+            if (match) {
+               // Extraer parámetros de la URL
+               const params = {};
+               paramNames.forEach((name, i) => {
+                  params[name] = match[i + 1];
+               });
+               
+               return { route, params };
+            }
+         }
+      }
+
+      // 3. No se encontró ninguna ruta
+      return { route: null, params: {} };
+   }
+
+   /**
+    * Convierte un patrón de ruta con ${param} en una expresión regular
+    * Ejemplo: "/user/${id}" -> /^\/user\/([^/]+)$/
+    */
+   compilePathPattern(pattern) {
+      const paramNames = [];
+      const regexPattern = '^' + pattern.replace(/\$\{([^}]+)\}/g, (_, paramName) => {
+         paramNames.push(paramName);
+         return '([^/]+)'; // Captura cualquier caracter excepto /
+      }) + '$';
+
+      return {
+         // 'i': case-insensitive path matching. Captured param values keep their original case.
+         regex: new RegExp(regexPattern, 'i'),
+         paramNames
+      };
+   }
+
+   async render() {
+      const currentPath = window.location.pathname;
+      const { route: routeMatch, params } = this.matchRoute(currentPath);
+
+      if (routeMatch) {
+         const { component, metadata } = routeMatch;
+
+         if (this.renderedComponents.has(component)) {
+            const cachedComponent = this.renderedComponents.get(component);
+            this.innerHTML = '';
+
+            // Actualizar props del componente cacheado
+            if (cachedComponent.props) {
+               cachedComponent.props = {
+                  ...cachedComponent.props,
+                  params: params,
+                  metadata: metadata || {} // ✅ Incluir metadata
+               };
+            }
+
+            // Si el componente en caché tiene un método update, lo ejecutamos
+            if (cachedComponent.update) {
+               await cachedComponent.update();
+            }
+
+            this.appendChild(cachedComponent);
+         } else {
+            if (!slice.controller.componentCategories.has(component)) {
+               slice.logger.logError(`${this.sliceId}`, `Component ${component} not found`);
+               return;
+            }
+
+            // Crear el componente con los parámetros y metadata de la ruta
+            const newComponent = await slice.build(component, {
+               params: params,
+               metadata: metadata || {}
+            });
+            
+            this.innerHTML = '';
+            this.appendChild(newComponent);
+            this.renderedComponents.set(component, newComponent);
+         }
+
+         // Emitir evento personalizado cuando el renderizado está completo
+         this.dispatchEvent(new CustomEvent('route-rendered', {
+            bubbles: true,
+            detail: { 
+               component, 
+               path: currentPath,
+               params: params,
+               metadata: metadata || {} // ✅ Incluir metadata en el evento
+            }
+         }));
+      } else {
+         // Limpiamos el contenido si no hay una coincidencia de ruta
+         this.innerHTML = '';
+      }
+   }
+
+   async renderIfCurrentRoute() {
+      const currentPath = window.location.pathname;
+      const { route: routeMatch } = this.matchRoute(currentPath);
+
+      if (routeMatch) {
+         await this.render();
+         return true;
+      }
+      return false;
+   }
+
+   removeComponent() {
+      const currentPath = window.location.pathname;
+      const { route: routeMatch } = this.matchRoute(currentPath);
+
+      if (routeMatch) {
+         const { component } = routeMatch;
+         this.renderedComponents.delete(component);
+         this.innerHTML = '';
+      }
+   }
+
+   /**
+    * Cleanup cuando el componente se destruye
+    */
+   destroy() {
+      this.renderedComponents.clear();
+      this.innerHTML = '';
+   }
+}
+
+customElements.define('slice-multi-route', MultiRoute);

package/slicejs-cli/tests/e2e/fixtures/components/Visual/Navbar/Navbar.css

@@ -0,0 +1,116 @@
+.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: auto;
+  -webkit-overflow-scrolling: touch;
+  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/slicejs-cli/tests/e2e/fixtures/components/Visual/Navbar/Navbar.html

@@ -0,0 +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>

package/slicejs-cli/tests/e2e/fixtures/components/Visual/Navbar/Navbar.js

@@ -0,0 +1,180 @@
+export default class Navbar extends HTMLElement {
+
+   static props = {
+      logo: { 
+         type: 'object', 
+         default: null, 
+         required: false 
+      },
+      items: { 
+         type: 'array', 
+         default: [], 
+         required: false 
+      },
+      buttons: { 
+         type: 'array', 
+         default: [], 
+         required: false 
+      },
+      position: { 
+         type: 'string', 
+         default: 'static', 
+         required: false 
+      },
+      direction: { 
+         type: 'string', 
+         default: 'normal', 
+         required: false 
+      }
+   };
+
+   constructor(props) {
+      super();
+      slice.attachTemplate(this);
+
+      this.$header = this.querySelector('.slice_nav_header');
+      this.$navBar = this.querySelector('.slice_nav_bar');
+      this.$menu = this.querySelector('.nav_bar_menu');
+      this.$buttonsContainer = this.querySelector('.nav_bar_buttons');
+      this.$logoContainer = this.querySelector('.logo_container');
+      this.$mobileMenu = this.querySelector('.slice_mobile_menu');
+      this.$mobileButton = this.querySelector('.mobile_menu_button');
+      this.$closeMenu = this.querySelector('.mobile_close_menu');
+
+      this.$mobileButton.addEventListener('click', () => {
+         this.$navBar.style.transform = 'translateX(0%)';
+      });
+
+      this.$closeMenu.addEventListener('click', () => {
+         this.$navBar.style.transform = 'translateX(100%)';
+      });
+
+      slice.controller.setComponentProps(this, props);
+   }
+
+   async init() {
+      if (this.items && this.items.length > 0) {
+         await this.addItems(this.items);
+      }
+      if (this.buttons && this.buttons.length > 0) {
+         this.buttons.forEach(async (item) => {
+            await this.addButton(item, this.$buttonsContainer);
+         });
+      }
+
+      if (window.screen.width >= 1020 && this.items && this.logo && this.buttons) {
+         this.$menu.style.maxWidth = '60%';
+      }
+   }
+
+   async addItems(items) {
+      for (let i = 0; i < items.length; i++) {
+         await this.addItem(items[i], this.$menu);
+      }
+   }
+
+   get position() {
+      return this._position;
+   }
+
+   set position(value) {
+      this._position = value;
+      if (value === 'fixed') {
+         this.classList.add('nav_bar_fixed');
+      }
+   }
+
+   get logo() {
+      return this._logo;
+   }
+
+   set logo(value) {
+      this._logo = value;
+      // ✅ CORREGIDO: Validar que value no sea null antes de usarlo
+      if (!value) return;
+      
+      const img = document.createElement('img');
+      img.src = value.src;
+      this.$logoContainer.appendChild(img);
+      this.$logoContainer.href = value.path;
+   }
+
+   get items() {
+      return this._items;
+   }
+
+   set items(values) {
+      this._items = values;
+   }
+
+   get buttons() {
+      return this._buttons;
+   }
+
+   set buttons(values) {
+      this._buttons = values;
+   }
+
+   get direction() {
+      return this._direction;
+   }
+
+   set direction(value) {
+      this._direction = value;
+      // ✅ MEJORADO: Validar valor antes de aplicar clase
+      if (value === 'reverse') {
+         this.$header.classList.add('direction-row-reverse');
+      }
+   }
+
+   async addItem(value, addTo) {
+      const item = document.createElement('li');
+      const hover = document.createElement('div');
+      hover.classList.add('anim-item');
+      
+      if (!value.type) {
+         value.type = 'text';
+      }
+      
+      if (value.type === 'text') {
+         const link = await slice.build('Link', {
+            text: value.text,
+            path: value.path,
+            classes: 'item',
+         });
+         item.appendChild(link);
+      }
+      
+      if (value.type === 'dropdown') {
+         const d = await slice.build('DropDown', {
+            label: value.text,
+            options: value.options,
+         });
+         d.classList.add('item');
+         item.appendChild(d);
+      }
+      
+      item.appendChild(hover);
+      addTo.appendChild(item);
+   }
+
+   async addButton(value, addTo) {
+      if (!value.color) {
+         value.color = {
+            text: 'var(--primary-color-rgb)',
+            background: 'var(--primary-background-color)',
+         };
+      }
+      
+      const button = await slice.build('Button', {
+         value: value.value,
+         customColor: value.color,
+         icon: value.icon,
+         onClick: value.onClick ?? value.onClickCallback,
+      });
+      
+      addTo.appendChild(button);
+   }
+}
+
+window.customElements.define('slice-nav-bar', Navbar);

package/slicejs-cli/tests/e2e/fixtures/components/Visual/NotFound/NotFound.js

@@ -0,0 +1,20 @@
+export default class NotFound extends HTMLElement {
+
+   static props = {
+      // No props needed for this component
+   };
+
+   constructor(props) {
+      super();
+      slice.attachTemplate(this);
+
+      slice.controller.setComponentProps(this, props);
+   }
+
+   init() {
+      //change title of the page
+      document.title = '404 - Not Found';
+   }
+}
+
+customElements.define('slice-notfound', NotFound);