slicejs-cli 2.0.6 → 2.0.7

package/ProjectTemplate/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>

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

@@ -1,315 +0,0 @@
-export default class InputDocumentation extends HTMLElement {
-   constructor(props) {
-      super();
-      slice.attachTemplate(this);
-
-      slice.controller.setComponentProps(this, props);
-      this.debuggerProps = [];
-   }
-
-   async init() {
-      await this.createInput(this.querySelector('.myInput'), {});
-      //Props
-      await this.createInput(
-         this.querySelector('.inputPlaceholder'),
-         { placeholder: 'Enter text here' },
-         `{
-        placeholder: "Enter text here"
-      }`
-      );
-      await this.createInput(
-         this.querySelector('.requiredProp'),
-         {
-            placeholder: 'Enter text here',
-            required: true,
-         },
-         `{
-        placeholder: "Enter text here",
-        required: true
-      }`
-      );
-      await this.createInput(
-         this.querySelector('.disabledProp'),
-         {
-            placeholder: 'Enter text here',
-            disabled: true,
-         },
-         `{
-        placeholder: "Enter text here",
-        disabled: true
-      }`
-      );
-      //Types
-      await this.createInput(
-         this.querySelector('.typeText'),
-         {
-            placeholder: 'Enter text here',
-            type: 'text',
-         },
-         `{
-        placeholder: "Enter text here",
-        type: "text"
-      }`
-      );
-      await this.createInput(
-         this.querySelector('.typeNumber'),
-         {
-            placeholder: 'Enter numbers here',
-            type: 'number',
-         },
-         `{
-        placeholder: "Enter numbers here",
-        type: "number"
-      }`
-      );
-      await this.createInput(
-         this.querySelector('.typePassword'),
-         {
-            placeholder: 'Password',
-            type: 'password',
-         },
-         `{
-        placeholder: "Password",
-        type: "password"
-      }`
-      );
-      await this.createInput(
-         this.querySelector('.secretProp'),
-         {
-            placeholder: 'Password',
-            type: 'password',
-            secret: true,
-         },
-         `{
-        placeholder: "Password",
-        type: "password", 
-        secret: true
-      }`
-      );
-      await this.createInput(
-         this.querySelector('.emailType'),
-         { placeholder: 'Email', type: 'email' },
-         `{
-        placeholder: "Email",
-        type: "email"
-      }`
-      );
-      await this.createInput(
-         this.querySelector('.dateType'),
-         { placeholder: 'Date', type: 'date' },
-         `{
-        placeholder: "Date",
-        type: "date"
-      }`
-      );
-      const conditionsInput = await this.createInput(
-         this.querySelector('.inputConditions'),
-         {
-            placeholder: 'Password',
-            type: 'password',
-            secret: true,
-            conditions: {
-               // regex: "^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d)(?=.*[\\W_]).{8,}$",
-               minLength: 8,
-               maxLength: 10,
-               minMinusc: 1,
-               maxMinusc: 4,
-               minMayusc: 1,
-               maxMayusc: 6,
-               minNumber: 1,
-               maxNumber: 6,
-               minSymbol: 1,
-               maxSymbol: 10,
-            },
-         },
-         `{
-        placeholder: "Password",
-        type: "password",
-        secret: true,
-        conditions: {
-          // regex: "^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d)(?=.*[\\W_]).{8,}$",
-          minLength: 8,
-          maxLength: 10,
-          minMinusc: 1,
-          maxMinusc: 4,
-          minMayusc: 1,
-          maxMayusc: 6,
-          minNumber: 1,
-          maxNumber: 6,
-          minSymbol: 1,
-          maxSymbol: 10,
-        },
-      }`,
-         'Validate Conditions'
-      );
-      const regexInput = await this.createInput(
-         this.querySelector('.inputRegex'),
-         {
-            placeholder: 'Password with regex',
-            type: 'password',
-            secret: true,
-            conditions: {
-               // regex: "^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d)(?=.*[\\W_]).{8,}$",
-               minLength: 8,
-               maxLength: 10,
-               minMinusc: 1,
-               maxMinusc: 4,
-               minMayusc: 1,
-               maxMayusc: 6,
-               minNumber: 1,
-               maxNumber: 6,
-               minSymbol: 1,
-               maxSymbol: 10,
-            },
-         },
-         `{
-        placeholder: "Password with regex",
-        type: "password",
-        secret: true,
-        conditions: {
-          regex: "^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d)(?=.*[\\W_]).{8,}$",
-          // minLength: 8,
-          // maxLength: 10,
-          // minMinusc: 1,
-          // maxMinusc: 4,
-          // minMayusc: 1,
-          // maxMayusc: 6,
-          // minNumber: 1,
-          // maxNumber: 6,
-          // minSymbol: 1,
-          // maxSymbol: 10,
-        },
-      }`,
-         'Validate Regex'
-      );
-      await this.inputMethos(
-         this.querySelector('.inputMethods'),
-         {
-            placeholder: 'Methods',
-            conditions: {
-               minLength: 8,
-               minNumber: 1,
-               minSymbol: 1,
-            },
-         },
-         `{
-        placeholder: "Methods",
-        conditions: {
-          minLength: 8,
-          minNumber: 1,
-          minSymbol: 1,
-        }
-      }`
-      );
-   }
-
-   async createInput(appendTo, inputProps, codeProps, validate) {
-      if (!codeProps) {
-         codeProps = '{}';
-      }
-      const myInput = await slice.build('Input', inputProps);
-
-      const componentCode = await slice.build('CodeVisualizer', {
-         value: `const myInput = await slice.build("Input", ${codeProps});
-
-`,
-         language: 'javascript',
-      });
-
-      const div = document.createElement('div');
-      const inputDiv = document.createElement('div');
-      inputDiv.classList.add('inputs');
-      inputDiv.appendChild(myInput);
-
-      div.classList.add('inputsContainer');
-      div.appendChild(inputDiv);
-      if (validate) {
-         const validateButton = await slice.build('Button', {
-            value: validate,
-            onClickCallback: () => {
-               myInput.validateValue();
-            },
-         });
-         div.appendChild(validateButton);
-      }
-      div.appendChild(componentCode);
-
-      appendTo.appendChild(div);
-
-      return myInput;
-   }
-
-   async inputMethos(appendTo, inputProps, codeProps) {
-      if (!codeProps) {
-         codeProps = '{}';
-      }
-      const myInput = await slice.build('Input', inputProps);
-
-      const componentCode = await slice.build('CodeVisualizer', {
-         value: `const myInput = await slice.build("Input", ${codeProps});
-          
-myInput.validateValue();
-myInput.clear();
-myInput.triggerError();
-myInput.triggerSuccess();      
-
-`,
-         language: 'javascript',
-      });
-
-      const div = document.createElement('div');
-      const inputDiv = document.createElement('div');
-      inputDiv.classList.add('inputs');
-      inputDiv.appendChild(myInput);
-
-      div.classList.add('inputsContainer');
-      div.appendChild(inputDiv);
-      const buttons = document.createElement('div');
-      buttons.classList.add('inputButtons');
-      const validateButton = await slice.build('Button', {
-         value: 'Validate',
-         onClickCallback: () => {
-            myInput.validateValue();
-         },
-      });
-      const clearButton = await slice.build('Button', {
-         value: 'Clear',
-         customColor: {
-            button: 'var(--medium-color)',
-         },
-         onClickCallback: () => {
-            myInput.clear();
-         },
-      });
-      const errorButton = await slice.build('Button', {
-         value: 'Error',
-         customColor: {
-            button: 'var(--danger-color)',
-         },
-         onClickCallback: () => {
-            myInput.triggerError();
-         },
-      });
-      const successButton = await slice.build('Button', {
-         value: 'Success',
-         customColor: {
-            button: 'var(--success-color)',
-         },
-         onClickCallback: () => {
-            myInput.triggerSuccess();
-         },
-      });
-      buttons.appendChild(validateButton);
-      buttons.appendChild(clearButton);
-      buttons.appendChild(errorButton);
-      buttons.appendChild(successButton);
-      div.appendChild(buttons);
-      div.appendChild(componentCode);
-
-      appendTo.appendChild(div);
-
-      return myInput;
-   }
-}
-
-customElements.define('slice-inputdocumentation', InputDocumentation);

package/ProjectTemplate/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/ProjectTemplate/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/ProjectTemplate/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/ProjectTemplate/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/ProjectTemplate/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);