slicejs-cli 2.0.3 → 2.0.6

package/ProjectTemplate/src/Components/AppComponents/CodeVisualizer/CodeVisualizer.css

@@ -0,0 +1,14 @@
+.codevisualizer_container {
+   font-size: smaller;
+   max-width: 100%;
+   background-color: var(--primary-background-color);
+   border: 1px solid var(--primary-color);
+   padding: 10px;
+   border-radius: 10px;
+   overflow-x: scroll;
+}
+
+.codevisualizer pre code[class*='language-'],
+.codevisualizer pre pre[class*='language-'] {
+   color: var(--font-primary-color);
+}

package/ProjectTemplate/src/Components/AppComponents/CodeVisualizer/CodeVisualizer.html

@@ -0,0 +1,3 @@
+<div class="codevisualizer_container">
+  <pre class="codevisualizer"><code></code></pre>
+</div>

package/ProjectTemplate/src/Components/AppComponents/CodeVisualizer/CodeVisualizer.js

@@ -0,0 +1,45 @@
+export default class CodeVisualizer extends HTMLElement {
+   constructor(props) {
+      super();
+      slice.attachTemplate(this);
+
+      this.$container = this.querySelector('.codevisualizer_container');
+      this.$code = this.querySelector('.codevisualizer');
+
+      slice.controller.setComponentProps(this, props);
+      this.debuggerProps = ['language', 'value'];
+      this.editor = null;
+   }
+
+   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) {
+         this.$code.innerHTML = `<pre><code class="language-${this._language}">${Prism.highlight(
+            this._value,
+            Prism.languages[this._language],
+            this._language
+         )}</code></pre>`;
+      }
+   }
+}
+
+customElements.define('slice-codevisualizer', CodeVisualizer);

package/ProjectTemplate/src/Components/AppComponents/Documentation/Documentation.html

@@ -0,0 +1,30 @@
+<h1>Slice Documentation</h1>
+<p>
+  The Slice Framework is a modular system based on components, designed to simplify web client development. Its architecture allows functionality to be divided into reusable modules, making maintenance and expansion easier.
+</p>
+<p>
+  Components are classified into three main categories: <span>Visual</span>, <span>Structural</span>, and <span>Services</span>. Visual components build the user interface, structural components manage the framework’s core infrastructure, and service components handle business logic and integrations.
+</p>
+
+<div class="visualComponents">
+    <h2>Visual Components</h2>
+    <p>
+        These components define the web client interface using custom HTML tags powered by the Web Components API. They encapsulate logic for dynamic styling, UI interactions, and backend communication via HTTP requests.
+    </p>
+</div>
+
+<div class="structuralComponents">
+    <h2>Structural Components</h2>
+    <p>
+        Structural components provide the core framework infrastructure, managing instances, tracking activities, and optimizing performance. They ensure seamless control over application behavior and debugging.
+    </p>
+</div>
+
+<div class="serviceComponents">
+    <h2>Service Components</h2>
+    <p>
+        Services encapsulate business logic and facilitate integrations with technologies like HTTP requests, local storage, and IndexedDB. They promote code reusability and simplify application development.
+    </p>
+</div>
+
+<div class="qna"></div>

package/ProjectTemplate/src/Components/AppComponents/Documentation/Documentation.js

@@ -0,0 +1,75 @@
+export default class Documentation extends HTMLElement {
+   constructor(props) {
+      super();
+      slice.attachTemplate(this);
+
+      slice.controller.setComponentProps(this, props);
+      this.debuggerProps = [];
+   }
+
+   async init() {
+      const htmlCard = await slice.build('Card', {
+         title: 'HTML',
+         text: 'HyperText Markup Language is the most basic building block of the Web. It defines the meaning and structure of web content.',
+         icon: {
+            name: 'html',
+            iconStyle: 'filled',
+         },
+         customColor: {
+            card: '#E36A2F',
+            icon: 'white',
+         },
+      });
+      const jsCard = await slice.build('Card', {
+         title: 'JS',
+         text: 'JavaScript is a lightweight interpreted (or just-in-time compiled) programming language with first-class functions.',
+         icon: {
+            name: 'javascript',
+            iconStyle: 'filled',
+         },
+         customColor: {
+            card: 'gold',
+            icon: 'white',
+         },
+      });
+      const cssCard = await slice.build('Card', {
+         title: 'CSS',
+         text: 'Cascading Style Sheets is a stylesheet language used to describe the presentation of a document written in HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS describes how elements should be rendered on screen, on paper, in speech, or on other media.',
+         icon: {
+            name: 'css',
+            iconStyle: 'filled',
+         },
+         customColor: {
+            card: '#519ABA',
+            icon: 'white',
+         },
+      });
+      const grid = await slice.build('Grid', {
+         columns: 3,
+         rows: 1,
+         items: [htmlCard, jsCard, cssCard],
+      });
+
+      if (window.screen.width <= 770) {
+         grid.columns = 1;
+      }
+
+      this.querySelector('.visualComponents').appendChild(grid);
+
+      //Q & A
+      const buildQuestion = await slice.build('Details', {
+         title: 'How can i build a component?',
+         text: "To build a component you need to call the slice.build method with it's required props.",
+      });
+      const buildExample = await slice.build('CodeVisualizer', {
+         value: `const mySliceComponent = await slice.build("MySliceComponentName", props)`,
+         language: 'javascript',
+      });
+
+      buildQuestion.addDetail(buildExample);
+
+      this.querySelector('.qna').appendChild(buildQuestion);
+   }
+}
+
+customElements.define('slice-documentation', Documentation);

package/ProjectTemplate/src/Components/AppComponents/DocumentationPage/DocumentationPage.css

@@ -0,0 +1,62 @@
+.visualComponents p span {
+  color: var(--primary-color);
+}
+:root {
+  --docs-width: 64%;
+}
+slice-documentation-page slice-route,
+slice-documentation-page slice-multi-route {
+  display: flex;
+  justify-content: center;
+}
+
+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);
+  /* box-shadow: 10px 0 10px 0px #00000020; */
+  display: flex;
+  align-items: center;
+  height: 100%;
+  width: 17%;
+  transition: transform 0.3s ease, width 0.3s ease;
+  overflow-x: hidden;
+}
+
+p {
+  text-align: justify;
+}
+h1 {
+  padding-top: 10px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid var(--secondary-background-color);
+}
+h2 {
+  padding-top: 10px;
+}
+.grid-container {
+  overflow-x: auto;
+}
+@media only screen and (max-width: 770px) {
+  :root {
+    --docs-width: 100%;
+  }
+}
+* {
+  font-family: var(--font-family);
+}
+
+slice-multi-route > :first-child {
+  margin-top: 60px;
+  color: var(--font-primary-color);
+  margin-top: 60px;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  width: var(--docs-width);
+  padding-left: 10px;
+  padding-right: 10px;
+  padding-bottom: 25px;
+}

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

@@ -0,0 +1,241 @@
+export default class DocumentationPage extends HTMLElement {
+   constructor(props) {
+      super();
+      slice.attachTemplate(this);
+
+      slice.controller.setComponentProps(this, props);
+      this.debuggerProps = [];
+
+      this.components = ['Button', 'Card', 'Checkbox', 'Input', 'Switch'];
+   }
+
+   async init() {
+      await import('https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js');
+      await import('https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js');
+      const css = await fetch('https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css');
+      const cssText = await css.text();
+      const style = document.createElement('style');
+      style.innerHTML = cssText;
+      document.head.appendChild(style);
+
+      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 () => {
+                  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';
+                  }
+               },
+            },
+         ],
+      });
+
+      const components = {
+         Button: 'Visual',
+         Card: 'Visual',
+         Checkbox: 'Visual',
+         Input: 'Visual',
+         Switch: 'Visual',
+      };
+
+      let documentationRoutes = {
+         value: 'Visual',
+         items: [],
+      };
+
+      for (const name in components) {
+         const component = {
+            value: name,
+            path: `/Documentation/${name}`,
+            component: `${name}Documentation`,
+         };
+         if (components[name] === 'Visual') {
+            documentationRoutes.items.push(component);
+         }
+      }
+
+      const treeview = await slice.build('TreeView', {
+         items: [
+            {
+               value: 'Introduction',
+               items: [
+                  {
+                     value: 'What is Slice.js?',
+                     path: '/Documentation/What-is-Slice.js',
+                     component: 'WhatIsSlice',
+                  },
+                  {
+                     value: 'Installation',
+                     path: '/Documentation/Installation',
+                     component: 'Installation',
+                  },
+               ],
+            },
+            {
+               value: 'Getting Started',
+               items: [
+                  {
+                     value: 'Components',
+                     items: [
+                        {
+                           value: 'The build method',
+                           path: '/Documentation/The-build-method',
+                           component: 'TheBuildMethod',
+                        },
+                        {
+                           value: 'Visual',
+                           path: '/Documentation/Visual',
+                           component: 'VisualDocumentation',
+                        },
+                        {
+                           value: 'Structural',
+                           path: '/Documentation/Structural',
+                           component: 'StructuralDocumentation',
+                        },
+                        {
+                           value: 'Services',
+                           path: '/Documentation/Services',
+                           component: 'ServicesDocumentation',
+                        },
+                        {
+                           value: `Lifecycle methods`,
+                           path: '/Documentation/Lifecycle-methods',
+                           component: 'LifecycleMethods',
+                        },
+                     ],
+                  },
+                  {
+                     value: 'Routing',
+                     path: '/Documentation/Routing',
+                     component: 'RoutingDocumentation',
+                  },
+                  {
+                     value: 'Themes',
+                     path: '/Documentation/Themes',
+                     component: 'ThemesDocumentation',
+                  },
+                  {
+                     value: 'Slice Styles',
+                     path: '/Documentation/Slice-Styles',
+                     component: 'SliceStylesDocumentation',
+                  },
+               ],
+            },
+            {
+               value: 'Components Library',
+               items: [
+                  {
+                     value: 'Services',
+                     items: [
+                        {
+                           value: 'FetchManager',
+                           path: '/Documentation/SliceComponents/FetchManager',
+                        },
+                     ],
+                  },
+                  documentationRoutes,
+               ],
+            },
+         ],
+         onClickCallback: async (item) => {
+            if (item.path) {
+               //myRouteContainer.path = item.path;
+               //myRouteContainer.component = item.component;
+               await slice.router.navigate(item.path);
+               myNavigation.page = VisualComponentsMultiRoute;
+            }
+         },
+      });
+
+      const extraRoute = {
+         path: '/Documentation',
+         component: 'Documentation',
+      };
+
+      //add extra route to the routes
+      documentationRoutes.items.push(extraRoute);
+
+      function getRoutes(array) {
+         for (let i = 0; i < array.length; i++) {
+            if (array[i].items) {
+               getRoutes(array[i].items);
+            } else {
+               const exists = documentationRoutes.items.some(route => route.path === array[i].path);
+               if (!exists) {
+                  documentationRoutes.items.push(array[i]);
+               }
+            }
+         }
+      }      
+
+      
+
+      const VisualComponentsMultiRoute = await slice.build('MultiRoute', {
+         routes: documentationRoutes.items,
+      });
+
+
+
+      const mainMenu = await slice.build('MainMenu', {});
+      mainMenu.add(treeview);
+
+      const myNavigation = await slice.build('MyNavigation', {
+         page: VisualComponentsMultiRoute,
+      });
+
+      const layOut = await slice.build('Layout', {
+         // layout: div,
+         view: VisualComponentsMultiRoute,
+      });
+
+      layOut.onLayOut(mainMenu);
+      layOut.onLayOut(navBar);
+      layOut.onLayOut(myNavigation);
+
+      let theme = slice.stylesManager.themeManager.currentTheme;
+
+      if (window.location.pathname === '/Documentation') {
+         await VisualComponentsMultiRoute.renderIfCurrentRoute();
+      }
+      this.appendChild(layOut);
+
+      //if route is domain/Documentation 
+
+   }
+
+}
+
+customElements.define('slice-documentation-page', DocumentationPage);

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

@@ -0,0 +1,41 @@
+.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/ProjectTemplate/src/Components/AppComponents/InputDocumentation/InputDocumentation.html

@@ -0,0 +1,95 @@
+<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>