slicejs-web-framework 1.0.17 → 1.0.20

package/src/Components/AppComponents/SwitchDocumentation/SwitchDocumentation.js

@@ -1,103 +0,0 @@
-export default class SwitchDocumentation extends HTMLElement {
-   constructor(props) {
-      super();
-      slice.attachTemplate(this);
-
-      slice.controller.setComponentProps(this, props);
-      this.debuggerProps = [];
-   }
-
-   async init() {
-      await this.createSwitch(this.querySelector('.mySwitch'), {}, `{}`);
-      await this.createSwitch(
-         this.querySelector('.colorSwitch'),
-         { customColor: 'gold' },
-         `{ 
-        customColor: "gold" 
-      }`
-      );
-      await this.createSwitch(
-         this.querySelector('.label'),
-         {
-            label: 'Switch',
-         },
-         `{
-        label: "Switch",
-      }`
-      );
-      await this.createSwitch(
-         this.querySelector('.labelLeft'),
-         {
-            label: 'Left',
-            labelPlacement: 'left',
-         },
-         `{
-        label: "Left",
-        labelPlacement: "left",
-      }`
-      );
-      await this.createSwitch(
-         this.querySelector('.labelTop'),
-         {
-            label: 'Top',
-            labelPlacement: 'top',
-         },
-         `{
-        label: "Top",
-        labelPlacement: "top",
-      }`
-      );
-      await this.createSwitch(
-         this.querySelector('.labelRight'),
-         {
-            label: 'Right',
-            labelPlacement: 'right',
-         },
-         `{
-        label: "Right",
-        labelPlacement: "right",
-      }`
-      );
-      await this.createSwitch(
-         this.querySelector('.labelBottom'),
-         {
-            label: 'Bottom',
-            labelPlacement: 'bottom',
-         },
-         `{
-        label: "Bottom",
-        labelPlacement: "bottom",
-      }`
-      );
-   }
-
-   async createSwitch(appendTo, switchProps, codeProps) {
-      if (!codeProps) {
-         codeProps = '{}';
-      }
-      const mySwitch = await slice.build('Switch', switchProps);
-
-      const componentCode = await slice.build('CodeVisualizer', {
-         value: `const mySwitch = await slice.build("Switch", ${codeProps});
-
-`,
-         language: 'javascript',
-      });
-
-      const div = document.createElement('div');
-      const switchDiv = document.createElement('div');
-      switchDiv.classList.add('switchs');
-      switchDiv.appendChild(mySwitch);
-      div.classList.add('switchs_container');
-      div.appendChild(switchDiv);
-      div.appendChild(componentCode);
-
-      if (appendTo) {
-         appendTo.appendChild(div);
-      }
-
-      return div;
-   }
-}
-
-customElements.define('slice-switchdocumentation', SwitchDocumentation);

package/src/Components/AppComponents/TheBuildMethod/TheBuildMethod.css

@@ -1,122 +0,0 @@
-slice-the-build-method {
-  font-family: var(--font-family);
-  color: var(--font-primary-color);
-}
-
-slice-the-build-method .build-method-container {
-  max-width: 90%;
-  margin: 0 auto;
-  padding: 20px;
-}
-
-slice-the-build-method h1 {
-  font-size: 2.2rem;
-  margin-bottom: 1.5rem;
-  color: var(--primary-color);
-  border-bottom: 2px solid var(--secondary-background-color);
-  padding-bottom: 0.5rem;
-}
-
-slice-the-build-method h2 {
-  font-size: 1.8rem;
-  margin-top: 2rem;
-  margin-bottom: 1rem;
-  color: var(--primary-color);
-}
-
-slice-the-build-method h3 {
-  font-size: 1.5rem;
-  margin-top: 1.5rem;
-  margin-bottom: 0.75rem;
-  color: var(--font-primary-color);
-}
-
-slice-the-build-method p {
-  margin-bottom: 1rem;
-  line-height: 1.6;
-  text-align: justify;
-}
-
-slice-the-build-method code {
-  font-family: monospace;
-  background-color: var(--secondary-background-color);
-  padding: 2px 5px;
-  border-radius: 4px;
-  font-size: 0.9em;
-}
-
-slice-the-build-method .syntax-box {
-  background-color: var(--secondary-background-color);
-  padding: 15px;
-  border-radius: var(--border-radius-slice);
-  margin: 20px 0;
-  overflow-x: auto;
-}
-
-slice-the-build-method .syntax-box code {
-  font-size: 1.1em;
-  background: none;
-}
-
-slice-the-build-method .parameters-list,
-slice-the-build-method .best-practices-list,
-slice-the-build-method .lifecycle-steps {
-  margin-left: 20px;
-  margin-bottom: 1.5rem;
-  line-height: 1.6;
-}
-
-slice-the-build-method .parameters-list li,
-slice-the-build-method .best-practices-list li,
-slice-the-build-method .lifecycle-steps li {
-  margin-bottom: 0.75rem;
-}
-
-
-slice-the-build-method .lifecycle-steps li {
-  counter-increment: step-counter;
-  position: relative;
-  padding-left: 10px;
-}
-
-slice-the-build-method .lifecycle-steps li::before {
-  font-weight: bold;
-  margin-right: 8px;
-  color: var(--primary-color);
-}
-
-slice-the-build-method .method-examples div[class$="-container"] {
-  margin-bottom: 2rem;
-  border-radius: var(--border-radius-slice);
-  overflow: hidden;
-}
-
-slice-the-build-method .method-syntax,
-slice-the-build-method .method-examples,
-slice-the-build-method .method-lifecycle,
-slice-the-build-method .method-best-practices {
-  margin-bottom: 3rem;
-}
-
-slice-the-build-method section {
-  padding-top: 10px;
-}
-
-@media only screen and (max-width: 770px) {
-  slice-the-build-method .build-method-container {
-    max-width: 100%;
-    padding: 10px;
-  }
-
-  slice-the-build-method h1 {
-    font-size: 1.8rem;
-  }
-
-  slice-the-build-method h2 {
-    font-size: 1.5rem;
-  }
-
-  slice-the-build-method h3 {
-    font-size: 1.3rem;
-  }
-}

package/src/Components/AppComponents/TheBuildMethod/TheBuildMethod.html

@@ -1,70 +0,0 @@
-<div class="build-method-container">
-   <h1 id="build-method">The Build Method</h1>
-   
-   <section class="method-introduction">
-      <p>
-         The <code>build</code> method is the cornerstone of Slice.js component creation. It's an asynchronous method that instantiates and configures components, handling all of the necessary resource loading, template attachment, and initialization.
-      </p>
-   </section>
-
-   <section class="method-syntax">
-      <h2 id="syntax">Syntax</h2>
-      <div class="syntax-box">
-         <code>await slice.build(componentName, props);</code>
-      </div>
-      <h3>Parameters</h3>
-      <ul class="parameters-list">
-         <li><strong>componentName</strong>: <em>string</em> - The name of the component to build as registered in components.js</li>
-         <li><strong>props</strong>: <em>object</em> - (Optional) An object containing properties to set on the component</li>
-      </ul>
-      <h3>Return Value</h3>
-      <p>A Promise that resolves to the constructed component instance, or null if construction fails.</p>
-   </section>
-
-   <section class="method-examples">
-      <h2 id="examples">Examples</h2>
-      
-      <h3 id="basic-usage">Basic Usage</h3>
-      <p>Creating a simple button component and adding it to the DOM:</p>
-      <div class="basic-example-container"></div>
-      
-      <h3 id="advanced-props">Advanced Properties</h3>
-      <p>Building a component with more complex properties:</p>
-      <div class="advanced-example-container"></div>
-      
-      <h3 id="nested-components">Building Nested Components</h3>
-      <p>Creating a structure of components that contain other components:</p>
-      <div class="nested-components-container"></div>
-      
-      <h3 id="error-handling">Error Handling</h3>
-      <p>Proper error handling when building components:</p>
-      <div class="error-handling-container"></div>
-   </section>
-
-   <section class="method-lifecycle">
-      <h2 id="build-lifecycle">Build Lifecycle</h2>
-      <p>When <code>slice.build()</code> is called, the following steps occur:</p>
-      <ol class="lifecycle-steps">
-         <li>Verify that the component exists in the component registry</li>
-         <li>Load the component's template (HTML) if not already cached</li>
-         <li>Load the component's class (JS) if not already cached</li>
-         <li>Load the component's styles (CSS) if not already cached</li>
-         <li>Create an instance of the component with the provided properties</li>
-         <li>Call the component's <code>init()</code> method if it exists</li>
-         <li>Attach debug mode if enabled in configuration</li>
-         <li>Register the component in the controller's active components registry</li>
-         <li>Return the fully initialized component instance</li>
-      </ol>
-   </section>
-
-   <section class="method-best-practices">
-      <h2 id="best-practices">Best Practices</h2>
-      <ul class="best-practices-list">
-         <li>Always use <code>await</code> with <code>slice.build()</code> since it returns a Promise</li>
-         <li>Provide a unique <code>sliceId</code> for components that need to be referenced later</li>
-         <li>Implement proper error handling around component building</li>
-         <li>Use the component's <code>init()</code> method for additional setup rather than the constructor</li>
-         <li>Remember that component properties are set after construction but before initialization</li>
-      </ul>
-   </section>
-</div>

package/src/Components/AppComponents/TheBuildMethod/TheBuildMethod.js

@@ -1,86 +0,0 @@
-export default class TheBuildMethod extends HTMLElement {
-   constructor(props) {
-      super();
-      slice.attachTemplate(this);
-
-      slice.controller.setComponentProps(this, props);
-      this.debuggerProps = [];
-   }
-
-   async init() {
-      // Crear ejemplos de código para la documentación
-      const basicBuildExample = await slice.build('CodeVisualizer', {
-         value: `// Construir un componente básico
-const myButton = await slice.build("Button", {
-   value: "Click me!"
-});
-
-// Añadir el componente al DOM
-document.querySelector("#container").appendChild(myButton);`,
-         language: 'javascript'
-      });
-
-      const advancedBuildExample = await slice.build('CodeVisualizer', {
-         value: `// Componente con propiedades más avanzadas
-const customCard = await slice.build("Card", {
-   title: "Custom Card",
-   text: "This is a custom card with specific styling",
-   icon: {
-      name: "github",
-      iconStyle: "filled"
-   },
-   customColor: {
-      card: "#3a0ca3",
-      icon: "#f72585"
-   },
-   sliceId: "my-custom-card" // ID personalizado para referencia futura
-});`,
-         language: 'javascript'
-      });
-
-      const nestedComponentsExample = await slice.build('CodeVisualizer', {
-         value: `// Construcción de componentes anidados
-const grid = await slice.build("Grid", { 
-   columns: 2, 
-   rows: 1 
-});
-
-// Construir componentes hijos
-const card1 = await slice.build("Card", { 
-   title: "First Card" 
-});
-const card2 = await slice.build("Card", { 
-   title: "Second Card" 
-});
-
-// Añadir componentes hijos al grid
-await grid.setItem(card1);
-await grid.setItem(card2);
-
-// Añadir el grid al DOM
-document.body.appendChild(grid);`,
-         language: 'javascript'
-      });
-
-      const errorHandlingExample = await slice.build('CodeVisualizer', {
-         value: `// Manejo de errores al construir componentes
-try {
-   const component = await slice.build("NonExistentComponent", {});
-   if (!component) {
-      console.error("Component could not be built");
-   }
-} catch (error) {
-   console.error("Error building component:", error);
-}`,
-         language: 'javascript'
-      });
-
-      // Añadir los ejemplos al DOM
-      this.querySelector('.basic-example-container').appendChild(basicBuildExample);
-      this.querySelector('.advanced-example-container').appendChild(advancedBuildExample);
-      this.querySelector('.nested-components-container').appendChild(nestedComponentsExample);
-      this.querySelector('.error-handling-container').appendChild(errorHandlingExample);
-   }
-}
-
-customElements.define('slice-the-build-method', TheBuildMethod);

package/src/Components/AppComponents/TheSliceTeam/TheSliceTeam.css

@@ -1,23 +0,0 @@
-.slice_team {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 2rem;
-  margin-top: 80px;  /* Ajusta este valor según la altura de tu navbar */
-  width: 100%;
-}
-
-.slice_team_title {
-  font-size: 2rem;
-  color: var(--font-primary-color);
-  margin-bottom: 1rem;
-  text-align: center;
-}
-
-.slice_team_container {
-  display: flex;
-  flex-direction: column; /* Cambiado para que estén en columna */
-  align-items: center; /* Centrar las tarjetas */
-  gap: 1.5rem;
-  width: 100%;
-}

package/src/Components/AppComponents/TheSliceTeam/TheSliceTeam.html

@@ -1,6 +0,0 @@
- <div class="slice_team">
-      <h2 class="slice_team_title">Our Team</h2>
-      <div class="slice_team_container"></div>
-    </div>
- 
-  

package/src/Components/AppComponents/TheSliceTeam/TheSliceTeam.js

@@ -1,129 +0,0 @@
-export default class TheSliceTeam extends HTMLElement {
-  constructor(props) {
-     super();
-     slice.attachTemplate(this);
-
-     this.$container = this.querySelector('.slice_team_container');
-     this.$title = this.querySelector('.slice_team_title');
-
-     slice.controller.setComponentProps(this, props);
-     this.debuggerProps = ['members'];
-  }
-
-  async init() {
-
-
-
-   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: 'Our Team',
-            path: '/Team',
-         }
-
-      ],
-      buttons: [
-         {
-            value: 'Change Theme',
-            // color:
-            onClickCallback: async () => {
-
-               let theme = slice.stylesManager.themeManager.currentTheme;
-               if (theme === 'Slice') {
-                  await slice.setTheme('Light');
-                  //theme = 'Light';
-               } else if (theme === 'Light') {
-                  await slice.setTheme('Dark');
-                  //theme = 'Dark';
-               } else if (theme === 'Dark') {
-                  await slice.setTheme('Slice');
-                  //theme = 'Slice';
-               }
-            },
-         },
-      ],
-   });
-
-
-   this.appendChild(navBar);
-   
-    const Victor = {
-      name: "Victor Kneider",
-      role: "Founder. Lead Developer. Software Architect.",
-      image:"https://avatars.githubusercontent.com/u/103617388?v=4",
-      description: "Computer Engineer passionate and ethusiast about technology and Component-Based Development. He is the creator of Slice.js and the main developer of the project.",
-      links: [
-         {label: "Github", href: "https://github.com/VKneider" },
-         {label: "Linkedin", href:"https://www.linkedin.com/in/vkneider/"}
-      ]
-   
-       
-
-      
-    }
-
-
-    const Julio = {
-      name: "Julio Graterol",
-      role: "Frontend Developer. Visual Components Library Creator and Designer",
-      image:"https://avatars.githubusercontent.com/u/99130732?v=4",
-      //julio is a frontend developer and designer, he is the creator of the visual components library and the designer of the Slice.js logo and website.
-      description: "Frontend Developer and Designer. He is the creator of the Visual Components Library and the designer of the Slice.js logo and website.",
-      links: [
-         {label: "Github", href: "https://github.com/juliograterol"},
-         {label: "Linkedin", href:"https://www.linkedin.com/in/julio-graterol-187589289/"}
-      ]
-
-     
-    }
-
-    const members = [Victor, Julio];  
-
-    await this.addMembers(members);
-     
-  }
-
-  async addMembers(members) {
-     for (let i = 0; i < members.length; i++) {
-        await this.addMember(members[i]);
-     }
-  }
-
-  async addMember(member) {
-     const card = await slice.build('SliceTeamCard', {
-        name: member.name,
-        role: member.role,
-        image: member.image,
-        description: member.description,
-        links: member.links
-     });
-     this.$container.appendChild(card);
-  }
-
-  get members() {
-     return this._members;
-  }
-
-  set members(values) {
-     this._members = values;
-  }
-}
-
-window.customElements.define('slice-team', TheSliceTeam);

package/src/Components/AppComponents/ThemesDocumentation/ThemesDocumentation.css

@@ -1,61 +0,0 @@
-slice-themesdocumentation {
-  color: var(--font-primary-color);
-  font-family: var(--font-family);
-}
-
-slice-themesdocumentation .theme-samples {
-  margin: 20px 0;
-}
-
-slice-themesdocumentation .theme-sample {
-  padding: 20px;
-  margin: 10px;
-  border-radius: var(--border-radius-slice);
-  border: 2px solid;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  transition: transform 0.3s ease;
-}
-
-slice-themesdocumentation .theme-sample:hover {
-  transform: translateY(-5px);
-}
-
-slice-themesdocumentation .theme-sample h3 {
-  margin-top: 0;
-  margin-bottom: 15px;
-}
-
-slice-themesdocumentation code {
-  background-color: var(--secondary-background-color);
-  padding: 2px 5px;
-  border-radius: 3px;
-  font-family: monospace;
-}
-
-slice-themesdocumentation .theme-config-example,
-slice-themesdocumentation .theme-apply-example,
-slice-themesdocumentation .css-vars-example,
-slice-themesdocumentation .custom-theme-example {
-  margin: 20px 0;
-}
-
-slice-themesdocumentation ul li {
-  margin-bottom: 10px;
-}
-
-slice-themesdocumentation h2 {
-  margin-top: 30px;
-  border-bottom: 1px solid var(--primary-color-shade);
-  padding-bottom: 8px;
-}
-
-slice-themesdocumentation .theme-transition-example {
-  background-color: var(--secondary-background-color);
-  padding: 15px;
-  border-radius: var(--border-radius-slice);
-  margin: 20px 0;
-}

package/src/Components/AppComponents/ThemesDocumentation/ThemesDocumentation.html

@@ -1,80 +0,0 @@
-<h1 id="themes">Themes in Slice.js</h1>
-<p>
-  Slice.js includes a powerful theming system that allows you to easily customize the appearance of your entire application.
-  Slice.js themes are based on CSS variables that control colors, fonts, borders, and other visual styles.
-</p>
-
-<h2 id="theme-system">How the Theme System Works</h2>
-<p>
-  The Slice.js theme system uses the ThemeManager, a structural component that manages the application
-  and runtime theme switching. Themes are defined as separate CSS files located in the
-  <code>/src/Themes/</code> folder.
-</p>
-
-<h2 id="default-themes">Default Themes</h2>
-<p>
-  Slice.js comes with three built-in themes:
-</p>
-<ul>
-  <li><strong>Light</strong>: A light theme with blue as the primary color.</li>
-  <li><strong>Dark</strong>: A dark theme that reduces eye strain.</li>
-  <li><strong>Slice</strong>: The default Slice.js theme.</li>
-</ul>
-
-<div class="theme-samples"></div>
-
-<h2 id="theme-configuration">Theme Configuration</h2>
-<p>
-  You can configure the theme behavior in the <code>sliceConfig.json</code> file:
-</p>
-<div class="theme-config-example"></div>
-
-<p>The configuration options are:</p>
-<ul>
-  <li><strong>enabled</strong>: Enables or disables the theme system.</li>
-  <li><strong>defaultTheme</strong>: Sets the default theme to be applied when the application starts.</li>
-  <li><strong>saveThemeLocally</strong>: If enabled, saves the user's theme preference in localStorage.</li>
-  <li><strong>useBrowserTheme</strong>: If enabled, uses the user's system preference (light/dark).</li>
-</ul>
-
-<h2 id="using-themes">Changing Themes at Runtime</h2>
-<p>
-  Slice.js allows you to change themes dynamically at runtime through its API:
-</p>
-<div class="theme-apply-example"></div>
-
-<h2 id="theme-variables">CSS Variables Used in Themes</h2>
-<p>
-  Slice.js themes use a consistent set of CSS variables to control appearance.
-  These are some of the main variables:
-</p>
-<div class="css-vars-example"></div>
-
-<h2 id="custom-themes">Creating Custom Themes</h2>
-<p>
-  To create your own custom theme, simply create a new CSS file in the <code>/src/Themes/</code> folder
-  and define the necessary CSS variables. For example:
-</p>
-<div class="custom-theme-example"></div>
-
-<h2 id="theme-best-practices">Best Practices for Using Themes</h2>
-<p>
-  When developing components for Slice.js, follow these practices to ensure they work correctly with the theme system:
-</p>
-<ul>
-  <li>Always use the CSS variables defined in the themes instead of hardcoded colors.</li>
-  <li>For elements with different states (hover, active, etc.), create CSS rules that respect the theme's color scheme.</li>
-  <li>Test your components with different themes to ensure they look good in all of them.</li>
-  <li>If your component needs specific styles based on the current theme, you can add classes based on the current theme.</li>
-</ul>
-
-<h2 id="theme-transitions">Theme Transitions</h2>
-<p>
-  When changing from one theme to another, styles are updated immediately. If you want to add smooth transitions
-  when changing themes, you can add CSS transition rules to your elements:
-</p>
-<div class="theme-transition-example">
-  <pre><code class="language-css">* {
-  transition: background-color 0.3s ease, color 0.3s ease;
-}</code></pre>
-</div>