slicejs-web-framework 1.0.19 → 1.0.21

package/src/Components/AppComponents/LandingMenu/LandingMenu.css

@@ -1,108 +0,0 @@
-slice-landing-menu {
-  h1 {
-    z-index: 0;
-  }
-
-  h2{
-    color: var(--font-primary-color);
-  }
-
-  .sliceLogo {
-    position: absolute;
-    z-index: -1;
-  }
-  .intro {
-    height: 85vh;
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  .intro h1 {
-    /* font-family: "Ubuntu", sans-serif; */
-    font-weight: bold;
-    font-style: normal;
-    color: var(--font-primary-color);
-    animation: fade-in 3s ease;
-    text-shadow: black 1px 0 100px;
-  }
-  .intro .sliceLogo {
-    opacity: 0.75;
-    color: var(--primary-color);
-    animation: fade-in-logo 5s ease, beat 10s ease infinite 5s;
-  }
-  .info {
-    bottom: 0;
-    position: absolute;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-  .info p a {
-    color: var(--primary-color);
-    text-decoration: none;
-    transition: all 0.3s ease;
-  }
-  .info p a:hover {
-    text-shadow: white 1px 0 10px;
-    text-decoration: underline;
-  }
-  .goToDocs {
-    margin-top: 50px;
-    color: var(--font-primary-color);
-  }
-  .goToDocs p {
-    text-align: justify;
-  }
-  @media screen and (min-width: 770px) {
-    .goToDocs {
-      padding-left: 30%;
-      padding-right: 30%;
-    }
-    h1 {
-      font-size: 100px;
-    }
-  }
-}
-@media screen and (max-width: 770px) {
-  .goToDocs {
-    padding: 10px;
-  }
-
-  .info {
-    bottom: 20;
-  }
-
-
-}
-@keyframes fade-in {
-  0% {
-    opacity: 0;
-    scale: 0.5;
-  }
-  100% {
-    opacity: 1;
-    scale: 1;
-  }
-}
-@keyframes fade-in-logo {
-  0% {
-    opacity: 0;
-    scale: 0.5;
-  }
-  100% {
-    opacity: 0.75;
-    scale: 1;
-  }
-}
-@keyframes beat {
-  0% {
-    scale: 1;
-  }
-  50% {
-    scale: 0.9;
-  }
-  100% {
-    scale: 1;
-  }
-}

package/src/Components/AppComponents/LandingMenu/LandingMenu.html

@@ -1,16 +0,0 @@
-<div class="intro">
-  <h1>Slice Framework</h1>
-  <div class="info">
-    <h2 style="text-align: center; padding-top: 10px;">Slice.js: Build Your Web App One Slice at a Time.</h2>
-  </div>
-</div>
-<div class="goToDocs">
-  <p>
-    Introducing Slice.js, a revolutionary frontend framework built on modern web standards and powered by the simplicity of vanilla JavaScript. 
-    With its modular, component-based architecture, Slice.js streamlines web development, enabling developers who know the core technologies—HTML, CSS, and JavaScript—to build robust, well-organized web applications with ease.
-  </p>
-  <p>
-    Dive into our comprehensive documentation to learn how Slice.js leverages native web components and a clean, 
-    standards-based syntax to simplify your workflow. 
-  </p>
-</div>

package/src/Components/AppComponents/LandingMenu/LandingMenu.js

@@ -1,33 +0,0 @@
-export default class LandingMenu extends HTMLElement {
-   constructor(props) {
-      super();
-      slice.attachTemplate(this);
-
-      slice.controller.setComponentProps(this, props);
-      this.debuggerProps = [];
-   }
-
-   async init() {
-      let logoSize = '500px';
-      if (window.screen.width <= 770) {
-         logoSize = '300px';
-      }
-      const sliceLogo = await slice.build('Icon', {
-         name: 'sliceJs',
-         size: logoSize,
-         color: 'var(--font-primary-color)',
-         iconStyle: 'filled',
-      });
-      sliceLogo.classList.add('sliceLogo');
-      this.querySelector('.intro').appendChild(sliceLogo);
-      const goToDocs = await slice.build('Button', {
-         value: 'Go to Documentation',
-         onClickCallback: async () => {
-            await slice.router.navigate('/Documentation');
-         },
-      });
-      this.querySelector('.goToDocs').appendChild(goToDocs);
-   }
-}
-
-customElements.define('slice-landing-menu', LandingMenu);

package/src/Components/AppComponents/LandingPage/LandingPage.css

@@ -1,14 +0,0 @@
-slice-landingpage slice-layout {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}
-.landing_page {
-  font-family: var(--font-family);
-  color: var(--font-primary-color);
-  overflow-y: scroll;
-  overflow-x: hidden;
-  padding-left: 10px;
-  padding-right: 10px;
-  padding-bottom: 25px;
-}

package/src/Components/AppComponents/LandingPage/LandingPage.js

@@ -1,53 +0,0 @@
-export default class LandingPage extends HTMLElement {
-   constructor(props) {
-      super();
-      slice.attachTemplate(this);
-
-      slice.controller.setComponentProps(this, props);
-      this.debuggerProps = [];
-   }
-
-   async init() {
-      const div = document.createElement('div');
-      let theme = slice.stylesManager.themeManager.currentTheme;
-
-      const navBar = await slice.build('Navbar', {
-         logo: {
-            src: '/images/Slice.js-logo.png',
-            path: '',
-         },
-         buttons: [
-            {
-               value: 'Change Theme',
-               onClickCallback: async () => {
-                  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';
-                  }
-               },
-            },
-         ],
-      });
-
-      div.appendChild(navBar);
-      const divView = document.createElement('div');
-      divView.classList.add('landing_page');
-
-      const landingMenu = await slice.build('LandingMenu', {});
-      divView.appendChild(landingMenu);
-      const layOut = await slice.build('Layout', {
-         layout: div,
-         view: divView,
-      });
-
-      this.appendChild(layOut);
-   }
-}
-
-customElements.define('slice-landingpage', LandingPage);

package/src/Components/AppComponents/MainMenu/MainMenu.css

@@ -1,80 +0,0 @@
-slice-mainmenu {
-  position: fixed;
-  top: 0;
-  left: 0;
-  font-family: var(--font-family);
-  background-color: var(--primary-background-color);
-  border-right: 1px solid var(--primary-color-shade);
-  display: flex;
-  align-items: flex-start;
-  height: 100%;
-  width: 17%;
-  transition: transform 0.3s ease, width 0.3s ease;
-  overflow-x: hidden;
-}
-.slice_menu {
-  margin-top: 175px;
-  width: 100%;
-  height: 100%;
-  overflow-y: scroll;
-  overflow-x: hidden;
-  padding: 10px;
-}
-
-.slice_menu_button {
-  position: fixed;
-  top: 0;
-  left: 0;
-  visibility: hidden;
-  width: min-content;
-  cursor: pointer;
-  padding: 20px;
-}
-
-.menu_title {
-  visibility: hidden;
-}
-
-.slice_close_menu {
-  visibility: hidden;
-  position: absolute;
-  padding: 20px;
-  top: 0;
-  right: 0;
-}
-
-slice-treeview .simple_treeview::-webkit-scrollbar,
-slice-mainmenu::-webkit-scrollbar {
-  width: 0px;
-}
-slice-treeview .simple_treeview::-webkit-scrollbar:horizontal,
-slice-mainmenu::-webkit-scrollbar:horizontal  {
-  height: 0px;
-}
-
-@media only screen and (max-width: 770px) {
-  slice-mainmenu {
-    top: 0px;
-    position: fixed;
-    z-index: 100000;
-    display: flex;
-    width: 0%;
-  }
-
-  .slice_menu_button {
-    right: 100%;
-    visibility: visible;
-  }
-
-  .menu_title {
-    visibility: visible;
-  }
-
-  .slice_menu_open {
-    width: 80%;
-  }
-
-  .slice_close_menu {
-    visibility: visible;
-  }
-}

package/src/Components/AppComponents/MainMenu/MainMenu.html

@@ -1,39 +0,0 @@
-  <div class="slice_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="2.3"
-        d="M5 7h14M5 12h14M5 17h14"
-      />
-    </svg>
-  </div>
-  <div class="slice_menu">
-    <div class="slice_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)"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M6 18 17.94 6M18 18 6.06 6"
-        />
-      </svg>
-    </div>
-  </div>

package/src/Components/AppComponents/MainMenu/MainMenu.js

@@ -1,42 +0,0 @@
-export default class MainMenu extends HTMLElement {
-   constructor(props) {
-      super();
-      slice.attachTemplate(this);
-
-      this.$menuButton = this.querySelector('.slice_menu_button');
-      this.$closeButton = this.querySelector('.slice_close_menu');
-      this.$menu = this.querySelector('.slice_menu');
-
-      this.$menuButton.addEventListener('click', () => {
-         this.handleOpenMenu();
-      });
-      this.$closeButton.addEventListener('click', () => {
-         this.handleCloseMenu();
-      });
-
-      slice.controller.setComponentProps(this, props);
-      this.debuggerProps = [];
-   }
-
-   init() {
-      this.addEventListener('mouseleave', () => {
-         if (this.querySelector('.slice_menu_open')) {
-            this.handleCloseMenu();
-         }
-      });
-   }
-
-   add(value) {
-      this.$menu.appendChild(value);
-   }
-
-   handleOpenMenu() {
-      this.classList.add('slice_menu_open');
-   }
-
-   handleCloseMenu() {
-      this.classList.remove('slice_menu_open');
-   }
-}
-
-customElements.define('slice-mainmenu', MainMenu);

package/src/Components/AppComponents/MyLayout/MyLayout.js

@@ -1,13 +0,0 @@
-export default class MyLayout extends HTMLElement {
-   constructor(props) {
-      super();
-      slice.attachTemplate(this);
-
-      slice.controller.setComponentProps(this, props);
-      this.debuggerProps = [];
-   }
-
-   init() {}
-}
-
-customElements.define('slice-mylayout', MyLayout);

package/src/Components/AppComponents/MyNavigation/MyNavigation.css

@@ -1,49 +0,0 @@
-slice-mynavigation {
-  position: fixed;
-  top: 0;
-  right: 0;
-  font-family: var(--font-family);
-  background-color: var(--primary-background-color);
-  border-left: 1px solid var(--primary-color-shade);
-  display: flex;
-  align-items: flex-start;
-  height: 100%;
-  width: 17%;
-  transition: transform 0.3s ease, width 0.3s ease;
-  overflow-x: hidden;
-}
-.my_navigation {
-  display: flex;
-  flex-direction: column;
-  margin-top: 80px;
-}
-.my_navigation a {
-  padding: 10px;
-}
-
-@media only screen and (max-width: 770px) {
-  slice-mynavigation {
-    visibility: hidden;
-  }
-}
-a[class^="nav-"] {
-  text-decoration: none;
-  color: var(--font-primary-color);
-}
-a[class^="nav-"]:hover{
-  color: var(--primary-color);
-}
-a[class$="1"] {
-  font-weight: 700;
-  margin-left: 0%;
-}
-a[class$="2"] {
-  margin-left: 5%;
-}
-a[class$="3"] {
-  margin-left: 10%;
-}
-a[class$="4"] {
-  margin-left: 15%;
-}
-

package/src/Components/AppComponents/MyNavigation/MyNavigation.html

@@ -1 +0,0 @@
-<div class="my_navigation"></div>

package/src/Components/AppComponents/MyNavigation/MyNavigation.js

@@ -1,60 +0,0 @@
-export default class MyNavigation extends HTMLElement {
-   constructor(props) {
-      super();
-      slice.attachTemplate(this);
-
-      this.$navigation = this.querySelector('.my_navigation');
-
-      slice.controller.setComponentProps(this, props);
-      this.debuggerProps = ['page'];
-   }
-
-   set page(value) {
-      this._page = value;
-      this.updateNavigation();
-   }
-
-   get page() {
-      return this._page;
-   }
-
-   init() {
-      if (this.page) {
-         this.updateNavigation();
-      }
-   }
-
-   updateNavigation() {
-      this.$navigation.innerHTML = '';
-      const idElements = this.page.querySelectorAll('[id]');
-
-      idElements.forEach((element) => {
-         const a = document.createElement('a');
-         a.textContent = element.innerHTML;
-
-         // Obtener la jerarquía del elemento, por ejemplo 'h1', 'h2', etc.
-         const tagName = element.tagName.toLowerCase();
-
-         // Iterar desde h1 hasta h6 para aplicar clases basadas en la jerarquía
-         for (let i = 1; i <= 6; i++) {
-            if (tagName === `h${i}`) {
-               a.classList.add(`nav-h${i}`);
-               break; // Si ya encontró la coincidencia, no sigue iterando
-            }
-         }
-
-         if (element.id) {
-            a.href = `#${element.id}`;
-            a.addEventListener('click', (event) => {
-               event.preventDefault();
-               document.getElementById(element.id).scrollIntoView({ behavior: 'smooth', block: 'center' });
-            });
-         } else {
-            a.href = ``;
-         }
-         this.$navigation.appendChild(a);
-      });
-   }
-}
-
-customElements.define('slice-mynavigation', MyNavigation);

package/src/Components/AppComponents/RoutingDocumentation/RoutingDocumentation.css

@@ -1,89 +0,0 @@
-slice-routingdocumentation {
-  color: var(--font-primary-color);
-  font-family: var(--font-family);
-}
-
-slice-routingdocumentation .routes-config-example,
-slice-routingdocumentation .route-component-example,
-slice-routingdocumentation .multi-route-example,
-slice-routingdocumentation .dynamic-routes-example,
-slice-routingdocumentation .programmatic-nav-example,
-slice-routingdocumentation .nested-routes-example {
-  margin: 20px 0;
-}
-
-slice-routingdocumentation code {
-  background-color: var(--secondary-background-color);
-  padding: 2px 5px;
-  border-radius: 3px;
-  font-family: monospace;
-}
-
-slice-routingdocumentation h2 {
-  margin-top: 30px;
-  border-bottom: 1px solid var(--primary-color-shade);
-  padding-bottom: 8px;
-}
-
-slice-routingdocumentation ul li,
-slice-routingdocumentation ol li {
-  margin-bottom: 10px;
-}
-
-/* Route visualization styles */
-slice-routingdocumentation .route-visualization {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-around;
-  gap: 20px;
-  margin: 30px 0;
-}
-
-slice-routingdocumentation .visualization-route,
-slice-routingdocumentation .visualization-multiroute {
-  border: 2px solid var(--primary-color);
-  border-radius: var(--border-radius-slice);
-  padding: 15px;
-  min-width: 300px;
-  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
-  transition: transform 0.3s ease;
-}
-
-slice-routingdocumentation .visualization-route:hover,
-slice-routingdocumentation .visualization-multiroute:hover {
-  transform: translateY(-5px);
-}
-
-slice-routingdocumentation .vis-route-path {
-  background-color: var(--primary-color);
-  color: var(--primary-color-contrast);
-  padding: 8px 12px;
-  margin-bottom: 10px;
-  border-radius: var(--border-radius-slice);
-  font-family: monospace;
-  font-weight: bold;
-}
-
-slice-routingdocumentation .visualization-multiroute .vis-route-path {
-  margin-bottom: 5px;
-  opacity: 0.8;
-}
-
-slice-routingdocumentation .visualization-multiroute .vis-route-path:first-child {
-  opacity: 1;
-}
-
-slice-routingdocumentation .vis-route-component {
-  background-color: var(--secondary-background-color);
-  padding: 15px;
-  border-radius: var(--border-radius-slice);
-  margin-top: 10px;
-  text-align: center;
-  font-weight: bold;
-}
-
-@media (max-width: 768px) {
-  slice-routingdocumentation .route-visualization {
-    flex-direction: column;
-  }
-}