slicejs-cli 2.0.3 → 2.0.6

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

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

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

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

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

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

@@ -0,0 +1,53 @@
+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/ProjectTemplate/src/Components/AppComponents/MainMenu/MainMenu.css

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

@@ -0,0 +1,39 @@
+  <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/ProjectTemplate/src/Components/AppComponents/MainMenu/MainMenu.js

@@ -0,0 +1,42 @@
+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);