slicejs-web-framework 3.4.4 → 3.5.0

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

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

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

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

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

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

@@ -1,20 +0,0 @@
-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);