slicejs-web-framework 1.0.17 → 1.0.20

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

@@ -9,11 +9,11 @@ export default class Debugger extends HTMLElement {
    }
 
    async enableDebugMode() {
-      const html = await slice.controller.fetchText('Debugger', 'html');
+      const html = await slice.controller.fetchText('Debugger', true, true, "/Slice/Components/Structural/Debugger/Debugger.html" );
       this.innerHTML = html;
-      const css = await slice.controller.fetchText('Debugger', 'css');
+      const css = await slice.controller.fetchText('Debugger', true, true, "/Slice/Components/Structural/Debugger/Debugger.css" );
       slice.stylesManager.registerComponentStyles('Debugger', css);
-
+      
       this.debuggerContainer = this.querySelector('#debugger-container');
       this.closeDebugger = this.querySelector('#close-debugger');
       this.componentDetails = this.querySelector('#component-details');

package/Slice/Slice.js

@@ -212,12 +212,13 @@ async function init() {
    await window.slice.router.init();
    
 
+   /*
    if (sliceConfig.translator.enabled) {
       const translator = await window.slice.build('Translator');
       window.slice.translator = translator;
       window.slice.logger.logInfo('Slice', 'Translator succesfuly enabled');
    }
-
+   */
 
 }
 

package/package.json

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

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

@@ -0,0 +1,203 @@
+/* Home page styles */
+slice-home-page {
+  display: block;
+  width: 100%;
+  font-family: var(--font-family);
+  color: var(--font-primary-color);
+}
+
+/* Hero section styles */
+.hero-section {
+  position: relative;
+  min-height: 80vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 2rem;
+  background-color: var(--primary-background-color);
+  overflow: hidden;
+}
+
+.hero-content {
+  max-width: 800px;
+  z-index: 1;
+}
+
+.hero-logo-container {
+  margin-bottom: 1.5rem;
+}
+
+.hero-logo {
+  max-width: 150px;
+  height: auto;
+}
+
+.hero-title {
+  font-size: 3rem;
+  margin-bottom: 1rem;
+  color: var(--font-primary-color);
+}
+
+.hero-title .highlight {
+  color: var(--primary-color);
+}
+
+.hero-subtitle {
+  font-size: 1.5rem;
+  margin-bottom: 1.5rem;
+  color: var(--font-secondary-color);
+}
+
+.hero-description {
+  font-size: 1.1rem;
+  margin-bottom: 2rem;
+  line-height: 1.6;
+}
+
+.cta-buttons {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+  margin-top: 2rem;
+}
+
+/* Features section styles */
+.features-section {
+  padding: 5rem 2rem;
+  background-color: var(--secondary-background-color);
+}
+
+.section-title {
+  text-align: center;
+  font-size: 2.5rem;
+  margin-bottom: 3rem;
+  color: var(--primary-color);
+}
+
+.feature-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 2rem;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.feature-item {
+  padding: 2rem;
+  background-color: var(--primary-background-color);
+  border-radius: var(--border-radius-slice);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.feature-item:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+}
+
+.feature-title {
+  font-size: 1.5rem;
+  margin-bottom: 1rem;
+  color: var(--primary-color);
+}
+
+.feature-description {
+  color: var(--font-secondary-color);
+  line-height: 1.6;
+}
+
+/* Example section styles */
+.example-section {
+  padding: 5rem 2rem;
+  background-color: var(--primary-background-color);
+}
+
+.section-description {
+  text-align: center;
+  max-width: 800px;
+  margin: 0 auto 3rem auto;
+  color: var(--font-secondary-color);
+  font-size: 1.2rem;
+}
+
+.examples-container {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 3rem;
+  max-width: 1000px;
+  margin: 0 auto;
+}
+
+.example-item {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 2rem;
+  background-color: var(--secondary-background-color);
+  border-radius: var(--border-radius-slice);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.example-item h3 {
+  margin: 0;
+  font-size: 1.3rem;
+  color: var(--primary-color);
+}
+
+/* Getting started section styles */
+.getting-started-section {
+  padding: 5rem 2rem;
+  background-color: var(--secondary-background-color);
+  text-align: center;
+}
+
+.code-sample {
+  max-width: 800px;
+  margin: 0 auto;
+  text-align: left;
+}
+
+/* Footer styles */
+.home-footer {
+  padding: 3rem 2rem;
+  text-align: center;
+  background-color: var(--primary-color);
+  color: var(--primary-color-contrast);
+}
+
+.copyright {
+  margin-top: 1rem;
+  font-size: 0.9rem;
+  opacity: 0.8;
+}
+
+/* Responsive styles */
+@media (max-width: 992px) {
+  .feature-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  
+  .examples-container {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 768px) {
+  .hero-title {
+    font-size: 2.5rem;
+  }
+  
+  .hero-subtitle {
+    font-size: 1.3rem;
+  }
+  
+  .feature-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .cta-buttons {
+    flex-direction: column;
+    align-items: center;
+  }
+}

package/src/Components/AppComponents/HomePage/HomePage.html

@@ -0,0 +1,49 @@
+<div class="home-page-container">
+  <div class="hero-section">
+    <div class="hero-content">
+      <div class="hero-logo-container">
+        <img src="/images/Slice.js-logo.png" alt="Slice.js Logo" class="hero-logo" />
+      </div>
+      <h1 class="hero-title">Welcome to <span class="highlight">Slice.js</span></h1>
+      <p class="hero-subtitle">Build Your Web App One Slice at a Time</p>
+      <p class="hero-description">
+        A modern, lightweight component-based framework for building web applications using vanilla JavaScript and web standards.
+      </p>
+      <div class="cta-buttons"></div>
+    </div>
+  </div>
+
+  <section class="features-section">
+    <h2 class="section-title">Why Choose Slice.js?</h2>
+    <div class="feature-grid"></div>
+  </section>
+
+  <section class="example-section">
+    <h2 class="section-title">Component Showcase</h2>
+    <p class="section-description">
+      Explore some of the ready-to-use components that come with Slice.js
+    </p>
+    <div class="examples-container"></div>
+  </section>
+
+  <section class="getting-started-section">
+    <h2 class="section-title">Get Started Now</h2>
+    <div class="code-sample">
+      <pre><code>
+// Initialize a new Slice.js project
+npm run slice:init
+
+// Create a new component
+npm run slice:create
+
+// Start your application
+npm run slice:start
+      </code></pre>
+    </div>
+  </section>
+
+  <footer class="home-footer">
+    <p>Made with ❤️ using Slice.js</p>
+    <p class="copyright">© 2025 Slice.js Framework</p>
+  </footer>
+</div>

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

@@ -0,0 +1,196 @@
+export default class HomePage extends HTMLElement {
+   constructor(props) {
+      super();
+      slice.attachTemplate(this);
+      
+      this.$examplesContainer = this.querySelector('.examples-container');
+      
+      slice.controller.setComponentProps(this, props);
+      this.debuggerProps = [];
+   }
+
+   async init() {
+      // Crear la barra de navegación
+      const navbar = await slice.build('Navbar', {
+         position: 'fixed',
+         logo: {
+            src: '/images/Slice.js-logo.png',
+            path: '/',
+         },
+         items: [
+            { text: 'Home', path: '/' },
+            { text: 'Documentation', path: '/Documentation' },
+            { text: 'Playground', path: '/Playground' },
+            { text: 'Contributors', path: '/Team' }
+         ],
+         buttons: [
+            {
+               value: 'Change Theme',
+               onClickCallback: async () => {
+                  const currentTheme = slice.stylesManager.themeManager.currentTheme;
+                  if (currentTheme === 'Slice') {
+                     await slice.setTheme('Light');
+                  } else if (currentTheme === 'Light') {
+                     await slice.setTheme('Dark');
+                  } else {
+                     await slice.setTheme('Slice');
+                  }
+               },
+            },
+         ],
+      });
+      
+      // 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'),
+         customColor: {
+            button: 'var(--primary-color)',
+            label: 'var(--primary-color-contrast)'
+         }
+      });
+      
+      const componentsButton = await slice.build('Button', {
+         value: 'Components Library',
+         onClickCallback: () => slice.router.navigate('/Documentation/Visual'),
+         customColor: {
+            button: 'var(--secondary-color)',
+            label: 'var(--secondary-color-contrast)'
+         }
+      });
+      
+      // Añadir botones a la sección CTA
+      this.querySelector('.cta-buttons').appendChild(docsButton);
+      this.querySelector('.cta-buttons').appendChild(componentsButton);
+      
+      // Crear features section con un enfoque diferente (sin usar Cards)
+      await this.createFeatures();
+      
+      // Crear ejemplos de componentes
+      await this.createComponentExamples();
+      
+      // Configurar la sección de código de inicio
+      await this.setupGettingStartedSection();
+      
+      // Añadir la barra de navegación al inicio del componente
+      this.insertBefore(navbar, this.firstChild);
+   }
+   
+   async createFeatures() {
+      // Definir características
+      const features = [
+         {
+            title: 'Component-Based',
+            description: 'Build your app using modular, reusable components following web standards.'
+         },
+         {
+            title: 'Zero Dependencies',
+            description: 'Built with vanilla JavaScript. No external libraries required.'
+         },
+         {
+            title: 'Easy Routing',
+            description: 'Simple and powerful routing system for single page applications.'
+         },
+         {
+            title: 'Theme System',
+            description: 'Built-in theme support with easy customization through CSS variables.'
+         },
+         {
+            title: 'Developer Tools',
+            description: 'Integrated debugging and logging for faster development.'
+         },
+         {
+            title: 'Performance Focused',
+            description: 'Lightweight and optimized for fast loading and execution.'
+         }
+      ];
+      
+      const featureGrid = this.querySelector('.feature-grid');
+      
+      // Crear y añadir cada feature como un elemento HTML simple
+      for (const feature of features) {
+         const featureElement = document.createElement('div');
+         featureElement.classList.add('feature-item');
+         
+         const featureTitle = document.createElement('h3');
+         featureTitle.textContent = feature.title;
+         featureTitle.classList.add('feature-title');
+         
+         const featureDescription = document.createElement('p');
+         featureDescription.textContent = feature.description;
+         featureDescription.classList.add('feature-description');
+         
+         featureElement.appendChild(featureTitle);
+         featureElement.appendChild(featureDescription);
+         
+         featureGrid.appendChild(featureElement);
+      }
+   }
+   
+   async createComponentExamples() {
+      // Crear ejemplos para demostrar componentes
+      const inputExample = await slice.build('Input', {
+         placeholder: 'Try typing here...',
+         type: 'text'
+      });
+      
+      const switchExample = await slice.build('Switch', {
+         label: 'Toggle me',
+         checked: true
+      });
+      
+      const checkboxExample = await slice.build('Checkbox', {
+         label: 'Check me',
+         labelPlacement: 'right'
+      });
+      
+      const detailsExample = await slice.build('Details', {
+         title: 'Click to expand',
+         text: 'This is a collapsible details component that can contain any content.'
+      });
+      
+      // Crear sección para cada ejemplo
+      const exampleSections = [
+         { title: 'Input Component', component: inputExample },
+         { title: 'Switch Component', component: switchExample },
+         { title: 'Checkbox Component', component: checkboxExample },
+         { title: 'Details Component', component: detailsExample }
+      ];
+      
+      // Añadir cada ejemplo a la sección de ejemplos
+      for (const section of exampleSections) {
+         const container = document.createElement('div');
+         container.classList.add('example-item');
+         
+         const title = document.createElement('h3');
+         title.textContent = section.title;
+         
+         container.appendChild(title);
+         container.appendChild(section.component);
+         
+         this.$examplesContainer.appendChild(container);
+      }
+   }
+   
+   async setupGettingStartedSection() {
+      // Opcionalmente podríamos mejorar esta sección usando el CodeVisualizer component
+      // en lugar del código HTML estático en el template
+      const codeVisualizer = await slice.build('CodeVisualizer', {
+         value: `// Initialize a new Slice.js project
+npm run slice:init
+
+// Create a new component
+npm run slice:create
+
+// Start your application
+npm run slice:start`,
+         language: 'bash'
+      });
+      
+      const codeSample = this.querySelector('.code-sample');
+      codeSample.innerHTML = ''; // Clear the static code sample
+      codeSample.appendChild(codeVisualizer);
+   }
+}
+
+customElements.define('slice-home-page', HomePage);

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

@@ -21,18 +21,6 @@ export default class Playground extends HTMLElement {
                text: 'Home',
                path: '/',
             },
-            {
-               text: 'Documentation',
-               path: '/Documentation',
-            },
-            {
-               text: 'Playground',
-               path: '/Playground',
-            },
-            {
-               text: 'Our Team',
-               path: '/Team',
-            }
          ],
          buttons: [
             {
@@ -58,13 +46,6 @@ export default class Playground extends HTMLElement {
 
       const sliceButton = await slice.build('Button', {
          value: 'Slice',
-         onClickCallback: () => {
-            if (slice.translator.currentLanguage == 'es') {
-               slice.translator.changeLanguage('en');
-            } else {
-               slice.translator.changeLanguage('es');
-            }
-         },
       });
       const sliceInput = await slice.build('Input', {
          placeholder: 'Enter text here...',

package/src/Themes/Slice.css

@@ -1,47 +1,47 @@
 :root {
   /* Tipografía */
-  --font-primary-color: #6D2323; /* Rojo profundo para los textos principales */
-  --font-secondary-color: #A31D1D; /* Rojo más intenso para destacar */
-  
-  /** Primary - Colores cálidos **/
-  --primary-color: #A31D1D; /* Rojo oscuro pero sofisticado */
-  --primary-color-rgb: 163, 29, 29;
-  --primary-background-color: #FEF9E1; /* Beige suave para el fondo, cálido y acogedor */
-  --primary-color-contrast: #ffffff; /* Contraste blanco para claridad */
-  --primary-color-shade: #6D2323; /* Rojo más oscuro para énfasis */
-
-  /** Secondary - Color cálido y elegante **/
-  --secondary-color: #E5D0AC; /* Beige cálido y suave */
-  --secondary-color-rgb: 229, 208, 172;
-  --secondary-background-color: #FEF9E1; /* Fondo claro para resaltar los elementos */
-  --secondary-color-contrast: #6D2323; /* Contraste con el rojo más oscuro */
-
-  /** Tertiary - Colores neutros pero sofisticados **/
-  --tertiary-background-color: #F5E0C7; /* Beige un poco más oscuro para balancear el diseño */
-
-  /** Success - Verde suave para mensajes positivos **/
-  --success-color: #4CAF50; /* Verde natural para dar un toque de frescura */
+  --font-primary-color: #2E1A47; /* Uva oscuro, elegante para lectura */
+  --font-secondary-color: #7D3AC1; /* Uva brillante para títulos y resaltes */
+
+  /** Primary - Uva intenso **/
+  --primary-color: #7D3AC1;
+  --primary-color-rgb: 125, 58, 193;
+  --primary-background-color: #F8F4FF; /* Lila muy claro como fondo principal */
+  --primary-color-contrast: #ffffff;
+  --primary-color-shade: #4E2279;
+
+  /** Secondary - Lima vibrante **/
+  --secondary-color: #C6FF00; /* Amarillo lima brillante, capta la atención */
+  --secondary-color-rgb: 198, 255, 0;
+  --secondary-background-color: #F9FFE1;
+  --secondary-color-contrast: #2E2E2E;
+
+  /** Tertiary - Turquesa suave **/
+  --tertiary-background-color: #D0F4F2; /* Fondo suave, fresco y moderno */
+
+  /** Success - Verde esmeralda claro **/
+  --success-color: #00B894;
   --success-contrast: #ffffff;
 
-  /** Warning - Amarillo suave para advertencias sutiles **/
-  --warning-color: #FFB74D;
-  --warning-contrast: #4e342e;
+  /** Warning - Amarillo más tradicional pero suave **/
+  --warning-color: #FFD54F;
+  --warning-contrast: #3E2723;
 
-  /** Danger - Rojo más suave para alertas pero no tan fuerte **/
-  --danger-color: #6D2323; /* Rojo profundo para peligros o advertencias */
+  /** Danger - Coral vibrante (sin caer en rojo tradicional) **/
+  --danger-color: #FF6F61;
   --danger-contrast: #ffffff;
 
-  /** Medium - Gris cálido para textos secundarios **/
-  --medium-color: #A89F91;
+  /** Medium - Gris lavanda para texto secundario **/
+  --medium-color: #A89FB5;
   --medium-contrast: #000000;
 
-  /* Disabled - Un color claro para elementos deshabilitados */
-  --disabled-color: #E6E0B9;
+  /** Disabled - Gris pastel lavanda **/
+  --disabled-color: #E6E0F1;
 
-  /** Accent - Un toque cálido y sutil **/
-  --accent-color: #C75B5B;
+  /** Accent - Turquesa brillante para detalles elegantes **/
+  --accent-color: #00CFC1;
 
-  /* Sombras suaves para dar profundidad */
-  --box-shadow-primary: 0px 4px 10px rgba(163, 29, 29, 0.1);
-  --box-shadow-secondary: 0px 3px 8px rgba(109, 35, 35, 0.1);
+  /* Sombras */
+  --box-shadow-primary: 0px 4px 12px rgba(125, 58, 193, 0.15);
+  --box-shadow-secondary: 0px 3px 8px rgba(198, 255, 0, 0.1);
 }