slicejs-web-framework 1.0.19 → 1.0.21

package/src/Components/AppComponents/DocumentationPage/DocumentationPage.js

@@ -1,283 +0,0 @@
-export default class DocumentationPage extends HTMLElement {
-   constructor(props) {
-      super();
-      slice.attachTemplate(this);
-
-      slice.controller.setComponentProps(this, props);
-      this.debuggerProps = [];
-   }
-
-   async init() {
-      // Centralizar las rutas de documentación
-      const routesConfig = {
-         introduction: {
-            title: 'Introduction',
-            items: [
-               {
-                  title: 'What is Slice.js?',
-                  path: '/Documentation/Slice',
-                  component: 'WhatIsSlice'
-               },
-               {
-                  title: 'Installation',
-                  path: '/Documentation/Installation',
-                  component: 'Installation'
-               }
-            ]
-         },
-         gettingStarted: {
-            title: 'Getting Started',
-            items: [
-               {
-                  title: 'Components',
-                  items: [
-                     {
-                        title: 'The build method',
-                        path: '/Documentation/The-build-method',
-                        component: 'TheBuildMethod'
-                     },
-                     {
-                        title: 'Visual',
-                        path: '/Documentation/Visual',
-                        component: 'VisualDocumentation'
-                     },
-                     {
-                        title: 'Structural',
-                        path: '/Documentation/Structural',
-                        component: 'StructuralDocumentation'
-                     },
-                     {
-                        title: 'Services',
-                        path: '/Documentation/Service',
-                        component: 'ServiceDocumentation'
-                     },
-                     {
-                        title: 'Lifecycle methods',
-                        path: '/Documentation/Lifecycle-methods',
-                        component: 'LifecycleMethods'
-                     }
-                  ]
-               },
-               {
-                  title: 'Routing',
-                  path: '/Documentation/Routing',
-                  component: 'RoutingDocumentation'
-               },
-               {
-                  title: 'Themes',
-                  path: '/Documentation/Themes',
-                  component: 'ThemesDocumentation'
-               },
-               {
-                  title: 'Slice Styles',
-                  path: '/Documentation/Slice-Styles',
-                  component: 'SliceStylesDocumentation'
-               }
-            ]
-         },
-         componentsLibrary: {
-            title: 'Components Library',
-            items: [
-             /*  {
-                  title: 'Services',
-                  items: [
-                     {
-                        title: 'FetchManager',
-                        path: '/Documentation/SliceComponents/FetchManager'
-                     }
-                  ]
-               },*/
-               {
-                  title: 'Visual',
-                  path: '/Documentation/Visual',
-                  items: [
-                     { title: 'Button', path: '/Documentation/Components/Visual/Button', component: 'ButtonDocumentation' },
-                     { title: 'Card', path: '/Documentation/Components/Visual/Card', component: 'CardDocumentation' },
-                     { title: 'Checkbox', path: '/Documentation/Components/Visual/Checkbox', component: 'CheckboxDocumentation' },
-                     { title: 'Input', path: '/Documentation/Components/Visual/Input', component: 'InputDocumentation' },
-                     { title: 'Switch', path: '/Documentation/Components/Visual/Switch', component: 'SwitchDocumentation' }
-                  ]
-               }
-            ]
-         },
-         defaultRoute: {
-            path: '/Documentation',
-            component: 'Documentation'
-         }
-      };
-
-      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',
-               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';
-                  }
-               },
-            },
-         ],
-      });
-
-      // Función para extraer todas las rutas para MultiRoute
-      const getAllRoutes = (routesObj) => {
-         const allRoutes = [];
-         
-         const processItems = (items) => {
-            if (!items) return;
-            
-            items.forEach(item => {
-               if (item.path && item.component) {
-                  allRoutes.push({
-                     path: item.path,
-                     component: item.component
-                  });
-               }
-               
-               if (item.items) {
-                  processItems(item.items);
-               }
-            });
-         };
-         
-         // Procesar cada sección principal
-         Object.values(routesObj).forEach(section => {
-            if (section.path && section.component) {
-               allRoutes.push({
-                  path: section.path,
-                  component: section.component
-               });
-            }
-            
-            if (section.items) {
-               processItems(section.items);
-            }
-         });
-         
-         return allRoutes;
-      };
-
-      // Función para convertir el config de rutas al formato del TreeView
-      const createTreeViewItems = (routesConfig) => {
-         return [
-            {
-               value: routesConfig.introduction.title,
-               items: routesConfig.introduction.items.map(item => ({
-                  value: item.title,
-                  path: item.path,
-                  component: item.component
-               }))
-            },
-            {
-               value: routesConfig.gettingStarted.title,
-               items: routesConfig.gettingStarted.items.map(item => {
-                  if (item.items) {
-                     return {
-                        value: item.title,
-                        items: item.items.map(subItem => ({
-                           value: subItem.title,
-                           path: subItem.path,
-                           component: subItem.component
-                        }))
-                     };
-                  }
-                  return {
-                     value: item.title,
-                     path: item.path,
-                     component: item.component
-                  };
-               })
-            },
-            {
-               value: routesConfig.componentsLibrary.title,
-               items: routesConfig.componentsLibrary.items.map(item => {
-                  if (item.items) {
-                     return {
-                        value: item.title,
-                        items: item.items.map(subItem => ({
-                           value: subItem.title,
-                           path: subItem.path,
-                           component: subItem.component
-                        }))
-                     };
-                  }
-                  return {
-                     value: item.title,
-                     path: item.path,
-                     component: item.component
-                  };
-               })
-            }
-         ];
-      };
-
-      // Obtener todas las rutas planas para el MultiRoute
-      const multiRouteItems = getAllRoutes(routesConfig);
-      
-      // Asegurarse que la ruta por defecto esté incluida
-      if (!multiRouteItems.some(route => route.path === routesConfig.defaultRoute.path)) {
-         multiRouteItems.push(routesConfig.defaultRoute);
-      }
-
-      console.log('MultiRoute items:', multiRouteItems);
-
-      // Crear el MultiRoute con todas las rutas
-      const VisualComponentsMultiRoute = await slice.build('MultiRoute', {
-         routes: multiRouteItems
-      });
-
-      // Crear el TreeView con la estructura jerárquica
-      const treeviewItems = createTreeViewItems(routesConfig);
-      const treeview = await slice.build('TreeView', {
-         items: treeviewItems,
-         onClickCallback: async (item) => {
-            if (item.path) {
-               await slice.router.navigate(item.path);
-               myNavigation.page = VisualComponentsMultiRoute;
-            }
-         },
-      });
-
-      const mainMenu = await slice.build('MainMenu', {});
-      mainMenu.add(treeview);
-
-      const myNavigation = await slice.build('MyNavigation', {
-         page: VisualComponentsMultiRoute,
-      });
-
-      const layOut = await slice.build('Layout', {
-         view: VisualComponentsMultiRoute,
-      });
-
-      layOut.onLayOut(mainMenu);
-      layOut.onLayOut(navBar);
-      layOut.onLayOut(myNavigation);
-
-      if (window.location.pathname === '/Documentation') {
-         await VisualComponentsMultiRoute.renderIfCurrentRoute();
-      }
-      
-      this.appendChild(layOut);
-   }
-}
-
-customElements.define('slice-documentation-page', DocumentationPage);

package/src/Components/AppComponents/InputDocumentation/InputDocumentation.css

@@ -1,41 +0,0 @@
-.inputs {
-  display: flex;
-  justify-content: center;
-  width: 100%;
-}
-.typeText,
-.typeNumber {
-  width: 100%;
-}
-.inputGrid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  grid-template-rows: repeat(1, 1fr);
-  gap: 10px;
-}
-ul li::marker,
-ul span {
-  color: var(--primary-color);
-}
-.validateConditions {
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-}
-.inputButtons {
-  display: flex;
-  justify-content: center;
-  slice-button {
-    width: 100%;
-  }
-}
-@media only screen and (max-width: 770px) {
-  .inputs {
-    width: 100%;
-  }
-  .inputGrid {
-    display: block;
-  }
-}

package/src/Components/AppComponents/InputDocumentation/InputDocumentation.html

@@ -1,95 +0,0 @@
-<h1 id="sliceInput">Slice Input</h1>
-<div class="myInput">
-  <p>
-    A Slice Input is build with a type default prop of text, that can be used by
-    to enter any data the user wants to.
-  </p>
-</div>
-<h1 id="props">Props</h1>
-<div class="inputPlaceholder">
-  <h2 id="placeholder">Placeholder</h2>
-  <p></p>
-</div>
-<div class="requiredProp">
-  <h2 id="required">Required Prop</h2>
-  <p>The required prop triggers error if there is no value.</p>
-</div>
-<div class="disabledProp">
-  <h2 id="disabled">Disabled Prop</h2>
-  <p>The disabled prop cancels all kind of interaction with the input.</p>
-</div>
-<h1 id="types">Types</h1>
-<div class="inputTypes">
-  <div class="typeText">
-    <h2 id="typeText">Text</h2>
-    <p>
-      As said before, the text type is the default type to a Slice Input. can be
-      field with text, numbers, and symbols.
-    </p>
-  </div>
-  <div class="typeNumber">
-    <h2 id="typeText">Number</h2>
-    <p>
-      In text type an user can enter as much of text as numbers, but with number
-      type it can only be enter numbers.
-    </p>
-  </div>
-  <div class="password">
-    <h2 id="password">Password & Secret Prop</h2>
-    <p>
-      The password type for a Slice Input automatically sets all the information
-      into secret. With secret prop being true the data entered can be revealed
-      at will by the user.
-    </p>
-    <div class="inputGrid">
-      <div class="typePassword"></div>
-      <div class="secretProp"></div>
-    </div>
-  </div>
-</div>
-<div class="emailType">
-  <h2 id="typeEmail">Email</h2>
-  <p>
-    The very own HTML Input tag can verify if the data entered is a valid email.
-  </p>
-</div>
-<div class="dateType">
-  <h2 id="typeDate">Date</h2>
-  <p>This type allows the user to enter a specific date of the calendar.</p>
-</div>
-<h1 id="conditions">Slice Input Conditions</h1>
-<div class="conditions">
-  <p>
-    The Slice Input cand have conditions set up by the developers. This is highly recomended for emails and passwords, but also can by used in the default text type.
-    <ul>
-      <li>regex <span>=</span> string <span>(optional)</span></li>
-      <li>minLength <span>=</span> number <span>(optional)</span></li>
-      <li>maxLength <span>=</span> number</li>
-      <li>minMinusc <span>=</span> number <span>(optional)</span></li>
-      <li>maxMinusc <span>=</span> number</li>
-      <li>minMayusc <span>=</span> number <span>(optional)</span></li>
-      <li>maxMayusc <span>=</span> number</li>
-      <li>minNumber <span>=</span> number <span>(optional)</span></li>
-      <li>maxNumber <span>=</span> number</li>
-      <li>minSymbol <span>=</span> number <span>(optional)</span></li>
-      <li>maxSymbol <span>=</span> number</li>
-    </ul>
-    The usage of "regex" makes the rest of conditions useless because it has to specify all conditions. Regex is only recomended for those who have the proper knowledge.
-  </p>
-  <div class="validateConditions"></div>
-  <!-- <div class="inputGrid"> -->
-    <div class="inputConditions"></div>
-    <div class="inputRegex"></div>
-  <!-- </div> -->
-</div>
-<h1 id="methods">Methods</h1>
-<div class="inputMethods">
-  <p>The Slice Input has it's own methods to validate if the entered data match the conditions, to trigger error (and success), and to clear the input.
-    <ul>
-      <li>validateValue();</li>
-      <li>clear();</li>
-      <li>triggerError();</li>
-      <li>triggerSuccess();</li>
-    </ul>
-  </p>
-</div>