slicejs-web-framework 1.0.20 → 1.0.22

package/Slice/Components/Structural/Debugger/Debugger.js

@@ -9,11 +9,127 @@ export default class Debugger extends HTMLElement {
    }
 
    async enableDebugMode() {
-      const html = await slice.controller.fetchText('Debugger', true, true, "/Slice/Components/Structural/Debugger/Debugger.html" );
+      //const html = await slice.controller.fetchText('Debugger', true, true, "/Slice/Components/Structural/Debugger/Debugger.html" );
+
+      const html = `
+      <div id="debugger-container">
+  <div class="debugger-header">
+    <div id="close-debugger">[×]</div>
+    <h3>Component Details</h3>
+  </div>
+  <div id="component-details">
+    <ul class="component-details-list"></ul>
+    <div class="component-details-table"></div>
+  </div>
+</div>`
+
+
+
+
+
       this.innerHTML = html;
-      const css = await slice.controller.fetchText('Debugger', true, true, "/Slice/Components/Structural/Debugger/Debugger.css" );
+      //const css = await slice.controller.fetchText('Debugger', true, true, "/Slice/Components/Structural/Debugger/Debugger.css");
+      const css = `
+         #debugger-container {
+  font-family: var(--font-family);
+  display: none;
+  position: fixed;
+  top: 20px;
+  left: 20px;
+  padding: 10px;
+  border: var(--slice-border) solid var(--primary-color);
+  background-color: var(--primary-background-color);
+  z-index: 1000;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+}
+
+#debugger-container.active {
+  display: block;
+}
+
+.slice_thead td {
+  font-weight: bold;
+  background-color: var(--primary-color);
+  color: var(--primary-color-contrast);
+}
+
+#close-debugger {
+  cursor: pointer;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  font-size: 14px;
+  color: var(--danger-color);
+}
+
+h3 {
+  color: var(--primary-color);
+  margin-bottom: 10px;
+}
+
+#component-details {
+  color: var(--font-primary-color);
+}
+.component-details-table {
+  overflow: scroll;
+  input {
+    outline: none;
+    border-bottom: 1px solid var(--tertiary-background-color);
+  }
+}
+.component-details-table::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+}
+.component-details-table::-webkit-scrollbar-thumb {
+  background: var(--secondary-color);
+  border-radius: var(--border-radius-slice);
+}
+
+#component-details table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-top: 10px;
+  /* border: 1px solid var(--primary-color); */
+}
+
+.debugger-header {
+  border-bottom: 1px solid var(--primary-color);
+  user-select: none;
+  cursor: grab;
+}
+
+.debugger-header:active {
+  cursor: grabbing;
+}
+
+#component-details th,
+#component-details td {
+  padding: 10px;
+  text-align: left;
+  border-bottom: 1px solid var(--primary-color);
+}
+
+input {
+  border: 0px;
+}
+
+.slice_component-details td,
+input {
+  background-color: var(--secondary-background-color);
+  color: var(--font-primary-color);
+}
+
+/* Estilo para las filas impares, solo para mejorar la legibilidad */
+#component-details tr:nth-child(odd) {
+  background-color: #f9f9f9;
+}
+
+      `
+
       slice.stylesManager.registerComponentStyles('Debugger', css);
-      
+
       this.debuggerContainer = this.querySelector('#debugger-container');
       this.closeDebugger = this.querySelector('#close-debugger');
       this.componentDetails = this.querySelector('#component-details');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slicejs-web-framework",
-  "version": "1.0.20",
+  "version": "1.0.22",
   "description": "",
   "engines": {
     "node": ">=20"

package/src/Components/AppComponents/HomePage/HomePage.css

@@ -31,6 +31,8 @@ slice-home-page {
 .hero-logo {
   max-width: 150px;
   height: auto;
+  /* Convertir el logo a una silueta */
+  filter: brightness(0) drop-shadow(0 0 8px var(--primary-color));
 }
 
 .hero-title {

package/src/Components/AppComponents/HomePage/HomePage.js

@@ -19,9 +19,8 @@ export default class HomePage extends HTMLElement {
          },
          items: [
             { text: 'Home', path: '/' },
-            { text: 'Documentation', path: '/Documentation' },
             { text: 'Playground', path: '/Playground' },
-            { text: 'Contributors', path: '/Team' }
+
          ],
          buttons: [
             {
@@ -43,7 +42,8 @@ export default class HomePage extends HTMLElement {
       // Crear botones para la sección de llamada a la acción
       const docsButton = await slice.build('Button', {
          value: 'Documentation',
-         onClickCallback: () => slice.router.navigate('/Documentation'),
+         onClickCallback: () => //redirect to https://slice-js-docs.vercel.app/Documentation
+         window.open('https://slice-js-docs.vercel.app/Documentation', '_blank'),
          customColor: {
             button: 'var(--primary-color)',
             label: 'var(--primary-color-contrast)'
@@ -52,7 +52,7 @@ export default class HomePage extends HTMLElement {
       
       const componentsButton = await slice.build('Button', {
          value: 'Components Library',
-         onClickCallback: () => slice.router.navigate('/Documentation/Visual'),
+         onClickCallback: () => window.open('https://slice-js-docs.vercel.app/Documentation/Visual', '_blank'),
          customColor: {
             button: 'var(--secondary-color)',
             label: 'var(--secondary-color-contrast)'

package/src/Components/AppComponents/Playground/Playground.js

@@ -21,6 +21,10 @@ export default class Playground extends HTMLElement {
                text: 'Home',
                path: '/',
             },
+            {
+               text: 'Playground',
+               path: '/Playground',
+            },
          ],
          buttons: [
             {

package/src/Components/Visual/CodeVisualizer/CodeVisualizer.css

@@ -0,0 +1,130 @@
+slice-codevisualizer {
+  display: block;
+  width: 100%;
+}
+
+.codevisualizer_container {
+  position: relative;
+  font-size: smaller;
+  max-width: 100%;
+  background-color: var(--secondary-background-color);
+  border: 1px solid var(--primary-color);
+  padding: 15px 10px 10px;
+  border-radius: var(--border-radius-slice, 10px);
+  overflow-x: auto;
+  margin: 15px 0;
+}
+
+.codevisualizer pre {
+  margin: 0;
+  padding: 0;
+  font-family: 'Courier New', Courier, monospace;
+  line-height: 1.5;
+  white-space: pre;
+  tab-size: 2;
+}
+
+.codevisualizer code {
+  display: block;
+  color: var(--font-primary-color);
+  overflow-wrap: normal;
+  word-break: normal;
+}
+
+/* Botón de copiar */
+.copy-button {
+  position: absolute;
+  top: 5px;
+  right: 10px;
+  padding: 4px 8px;
+  font-size: 12px;
+  background-color: var(--primary-color);
+  color: var(--primary-color-contrast);
+  border: none;
+  border-radius: var(--border-radius-slice, 4px);
+  cursor: pointer;
+  opacity: 0.7;
+  transition: opacity 0.2s ease, background-color 0.2s ease;
+  z-index: 1;
+}
+
+.copy-button:hover {
+  opacity: 1;
+}
+
+.copy-button.copied {
+  background-color: var(--success-color);
+  color: var(--success-contrast);
+  opacity: 1;
+}
+
+/* Temas para resaltado de sintaxis adaptados a las variables de Slice */
+.codevisualizer .code-keyword {
+  color: var(--primary-color); /* Palabras clave en color primario */
+}
+
+.codevisualizer .code-string {
+  color: var(--success-color); /* Strings en color de éxito */
+}
+
+.codevisualizer .code-number {
+  color: var(--warning-color); /* Números en color de advertencia */
+}
+
+.codevisualizer .code-comment {
+  color: var(--medium-color); /* Comentarios en color medio */
+  font-style: italic;
+}
+
+.codevisualizer .code-function {
+  color: var(--secondary-color); /* Funciones en color secundario */
+}
+
+.codevisualizer .code-method {
+  color: var(--secondary-color); /* Métodos en color secundario */
+}
+
+.codevisualizer .code-builtin {
+  color: var(--secondary-color); /* Objetos integrados en color secundario */
+}
+
+.codevisualizer .code-tag {
+  color: var(--primary-color); /* Tags HTML en color primario */
+}
+
+.codevisualizer .code-attribute {
+  color: var(--warning-color); /* Atributos HTML en color de advertencia */
+}
+
+.codevisualizer .code-selector {
+  color: var(--primary-color); /* Selectores CSS en color primario */
+}
+
+.codevisualizer .code-property {
+  color: var(--secondary-color); /* Propiedades CSS en color secundario */
+}
+
+.codevisualizer .code-value {
+  color: var(--success-color); /* Valores CSS en color de éxito */
+}
+
+.codevisualizer .code-unit {
+  color: var(--warning-color); /* Unidades CSS en color de advertencia */
+}
+
+.codevisualizer .code-color {
+  color: var(--font-primary-color); /* Colores CSS en color primario */
+}
+
+/* Media query para diseño responsivo */
+@media screen and (max-width: 768px) {
+  .codevisualizer_container {
+    font-size: 12px;
+    padding: 25px 8px 8px;
+  }
+  
+  .copy-button {
+    font-size: 10px;
+    padding: 3px 6px;
+  }
+}

package/src/Components/Visual/CodeVisualizer/CodeVisualizer.html

@@ -0,0 +1,4 @@
+<div class="codevisualizer_container">
+  <button class="copy-button" title="Copy to clipboard">Copy</button>
+  <pre class="codevisualizer"><code></code></pre>
+</div>

package/src/Components/Visual/CodeVisualizer/CodeVisualizer.js

@@ -0,0 +1,263 @@
+export default class CodeVisualizer extends HTMLElement {
+   constructor(props) {
+      super();
+      slice.attachTemplate(this);
+
+      this.$container = this.querySelector('.codevisualizer_container');
+      this.$code = this.querySelector('.codevisualizer');
+      this.$copyButton = this.querySelector('.copy-button');
+
+      // Configurar el botón de copiado
+      this.$copyButton.addEventListener('click', () => this.copyCodeToClipboard());
+
+      slice.controller.setComponentProps(this, props);
+      this.debuggerProps = ['language', 'value'];
+   }
+
+   set value(value) {
+      this._value = value;
+   }
+
+   get value() {
+      return this._value;
+   }
+
+   set language(value) {
+      this._language = value;
+   }
+
+   get language() {
+      return this._language;
+   }
+
+   init() {
+      this.visualizeCode();
+   }
+
+   visualizeCode() {
+      if (this._value && this._language) {
+         const highlightedCode = this.highlightCode(this._value, this._language);
+         this.$code.innerHTML = `<pre><code class="language-${this._language}">${highlightedCode}</code></pre>`;
+      }
+   }
+
+   copyCodeToClipboard() {
+      // Obtenemos el texto sin formato (sin las etiquetas HTML de resaltado)
+      const textToCopy = this._value;
+      
+      // Utilizar el API de clipboard
+      navigator.clipboard.writeText(textToCopy)
+         .then(() => {
+            // Cambiar el texto del botón temporalmente para indicar éxito
+            this.$copyButton.textContent = '✓ Copiado!';
+            this.$copyButton.classList.add('copied');
+            
+            // Restaurar el texto original después de 1.5 segundos
+            setTimeout(() => {
+               this.$copyButton.textContent = 'Copiar';
+               this.$copyButton.classList.remove('copied');
+            }, 1500);
+         })
+         .catch(err => {
+            console.error('Error al copiar al portapapeles: ', err);
+            this.$copyButton.textContent = '❌ Error!';
+            
+            setTimeout(() => {
+               this.$copyButton.textContent = 'Copiar';
+            }, 1500);
+         });
+   }
+
+   highlightCode(code, language) {
+      // Escape HTML to prevent XSS
+      const escapedCode = this.escapeHtml(code);
+      
+      switch (language.toLowerCase()) {
+         case 'javascript':
+         case 'js':
+            return this.highlightJavaScript(escapedCode);
+         case 'html':
+            return this.highlightHtml(escapedCode);
+         case 'css':
+            return this.highlightCss(escapedCode);
+         default:
+            return escapedCode;
+      }
+   }
+
+   escapeHtml(text) {
+      return text
+         .replace(/&/g, '&amp;')
+         .replace(/</g, '&lt;')
+         .replace(/>/g, '&gt;')
+         .replace(/"/g, '&quot;')
+         .replace(/'/g, '&#039;');
+   }
+
+   highlightJavaScript(code) {
+      // Este método fue rediseñado por completo para evitar problemas de superposición
+      let tokenizedCode = code;
+      
+      // Creamos una estructura para almacenar todos los tokens y luego reemplazarlos de una sola vez
+      const tokens = [];
+      
+      // Función para generar un ID único para cada token
+      const generateTokenId = (index) => `__TOKEN_${index}__`;
+      
+      // Función para extraer tokens y reemplazarlos con marcadores
+      const extractTokens = (regex, className) => {
+         tokenizedCode = tokenizedCode.replace(regex, (match) => {
+            const tokenId = generateTokenId(tokens.length);
+            tokens.push({ id: tokenId, content: match, className });
+            return tokenId;
+         });
+      };
+      
+      // Extraer los tokens en orden específico para evitar interferencias
+      
+      // 1. Primero los comentarios
+      extractTokens(/\/\/.*$/gm, 'code-comment');
+      extractTokens(/\/\*[\s\S]*?\*\//g, 'code-comment');
+      
+      // 2. Luego las cadenas de texto
+      extractTokens(/(['"`])(?:\\.|[^\\])*?\1/g, 'code-string');
+      
+      // 3. Luego los números
+      extractTokens(/\b(\d+(?:\.\d+)?)\b/g, 'code-number');
+      
+      // 4. Palabras clave
+      const keywords = [
+         'await', 'async', 'break', 'case', 'catch', 'class', 'const', 'continue',
+         'debugger', 'default', 'delete', 'do', 'else', 'export', 'extends', 'false',
+         'finally', 'for', 'function', 'if', 'import', 'in', 'instanceof', 'new',
+         'null', 'return', 'super', 'switch', 'this', 'throw', 'true', 'try',
+         'typeof', 'var', 'void', 'while', 'with', 'yield', 'let'
+      ];
+      extractTokens(new RegExp(`\\b(${keywords.join('|')})\\b`, 'g'), 'code-keyword');
+      
+      // 5. Objetos y métodos integrados
+      const builtins = [
+         'Array', 'Boolean', 'Date', 'Error', 'Function', 'JSON', 'Math',
+         'Number', 'Object', 'Promise', 'RegExp', 'String', 'console', 'document',
+         'window', 'slice', 'Map', 'Set', 'Symbol', 'setTimeout', 'setInterval'
+      ];
+      extractTokens(new RegExp(`\\b(${builtins.join('|')})\\b`, 'g'), 'code-builtin');
+      
+      // 6. Métodos y llamadas a funciones (esto debe ir después de extraer las palabras clave)
+      extractTokens(/(\.)([a-zA-Z_$][\w$]*)\s*(?=\()/g, 'code-method');
+      
+      // Reemplazar los tokens con el HTML resaltado
+      tokens.forEach(token => {
+         tokenizedCode = tokenizedCode.replace(
+            token.id, 
+            `<span class="${token.className}">${token.content}</span>`
+         );
+      });
+      
+      return tokenizedCode;
+   }
+
+   highlightHtml(code) {
+      // Utilizamos un enfoque similar al de JavaScript para HTML
+      let tokenizedCode = code;
+      const tokens = [];
+      const generateTokenId = (index) => `__TOKEN_${index}__`;
+      
+      const extractTokens = (regex, className) => {
+         tokenizedCode = tokenizedCode.replace(regex, (match) => {
+            const tokenId = generateTokenId(tokens.length);
+            tokens.push({ id: tokenId, content: match, className });
+            return tokenId;
+         });
+      };
+      
+      // Extraer tokens HTML en orden
+      
+      // 1. Comentarios HTML
+      extractTokens(/&lt;!--[\s\S]*?--&gt;/g, 'code-comment');
+      
+      // 2. Etiquetas HTML
+      extractTokens(/(&lt;\/?[a-zA-Z0-9-]+)(\s|&gt;)/g, (match, tag, end) => {
+         const tokenId = generateTokenId(tokens.length);
+         tokens.push({ 
+            id: tokenId, 
+            content: `<span class="code-tag">${tag}</span>${end}`,
+            className: 'no-class' // Ya incluye su propio elemento span
+         });
+         return tokenId;
+      });
+      
+      // 3. Atributos HTML
+      extractTokens(/\s([a-zA-Z0-9-]+)=(&quot;|&#039;)/g, (match, attr, quote) => {
+         const tokenId = generateTokenId(tokens.length);
+         tokens.push({ 
+            id: tokenId, 
+            content: ` <span class="code-attribute">${attr}</span>=${quote}`,
+            className: 'no-class' // Ya incluye su propio elemento span
+         });
+         return tokenId;
+      });
+      
+      // Reemplazar los tokens con el HTML resaltado
+      tokens.forEach(token => {
+         tokenizedCode = tokenizedCode.replace(
+            token.id, 
+            token.className === 'no-class' ? token.content : `<span class="${token.className}">${token.content}</span>`
+         );
+      });
+      
+      return tokenizedCode;
+   }
+
+   highlightCss(code) {
+      // Utilizamos el mismo enfoque para CSS
+      let tokenizedCode = code;
+      const tokens = [];
+      const generateTokenId = (index) => `__TOKEN_${index}__`;
+      
+      const extractTokens = (regex, className, processor = null) => {
+         tokenizedCode = tokenizedCode.replace(regex, (match, ...groups) => {
+            const tokenId = generateTokenId(tokens.length);
+            const content = processor ? processor(match, ...groups) : match;
+            tokens.push({ id: tokenId, content, className });
+            return tokenId;
+         });
+      };
+      
+      // Comentarios CSS
+      extractTokens(/\/\*[\s\S]*?\*\//g, 'code-comment');
+      
+      // Selectores CSS
+      extractTokens(/([^\{\}]+)(?=\{)/g, 'code-selector');
+      
+      // Propiedad y valor CSS (manipulando la coincidencia para preservar la estructura)
+      tokenizedCode = tokenizedCode.replace(/(\s*)([a-zA-Z-]+)(\s*):(\s*)([^;\{\}]+)(?=;)/g, (match, space1, prop, space2, space3, value) => {
+         const propTokenId = generateTokenId(tokens.length);
+         tokens.push({ id: propTokenId, content: prop, className: 'code-property' });
+         
+         const valueTokenId = generateTokenId(tokens.length);
+         tokens.push({ id: valueTokenId, content: value, className: 'code-value' });
+         
+         return `${space1}<span class="code-property">${prop}</span>${space2}:${space3}<span class="code-value">${value}</span>`;
+      });
+      
+      // Colores CSS
+      extractTokens(/#([a-fA-F0-9]{3,6})\b/g, 'code-color');
+      
+      // Reemplazar los tokens restantes
+      tokens.forEach(token => {
+         if (token.className !== 'no-replace') {
+            tokenizedCode = tokenizedCode.replace(
+               token.id, 
+               `<span class="${token.className}">${token.content}</span>`
+            );
+         }
+      });
+      
+      return tokenizedCode;
+   }
+}
+
+customElements.define('slice-codevisualizer', CodeVisualizer);
+
+   

package/src/Components/components.js

@@ -1,32 +1,10 @@
 const components = {
-  "ButtonDocumentation": "AppComponents",
-  "CardDocumentation": "AppComponents",
-  "CheckboxDocumentation": "AppComponents",
-  "CodeVisualizer": "AppComponents",
-  "Documentation": "AppComponents",
-  "DocumentationPage": "AppComponents",
-  "InputDocumentation": "AppComponents",
-  "Installation": "AppComponents",
-  "LandingMenu": "AppComponents",
-  "LandingPage": "AppComponents",
-  "MainMenu": "AppComponents",
-  "MyLayout": "AppComponents",
-  "MyNavigation": "AppComponents",
+  "HomePage": "AppComponents",
   "Playground": "AppComponents",
-  "RoutingDocumentation": "AppComponents",
-  "ServiceDocumentation": "AppComponents",
-  "SliceStylesDocumentation": "AppComponents",
-  "SliceTeamCard": "AppComponents",
-  "StructuralDocumentation": "AppComponents",
-  "SwitchDocumentation": "AppComponents",
-  "TheBuildMethod": "AppComponents",
-  "ThemesDocumentation": "AppComponents",
-  "TheSliceTeam": "AppComponents",
-  "VisualDocumentation": "AppComponents",
-  "WhatIsSlice": "AppComponents",
   "Button": "Visual",
   "Card": "Visual",
   "Checkbox": "Visual",
+  "CodeVisualizer": "Visual",
   "Details": "Visual",
   "DropDown": "Visual",
   "Grid": "Visual",

package/src/routes.js

@@ -6,6 +6,10 @@ const routes = [
       path: '/Docum/${category}/${id}',
       component: 'LandingPage',
    },
+   {
+      path: "/Playground",
+      component: "Playground",
+   }
 
 ];