slicejs-cli 2.0.6 → 2.0.7

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

@@ -1,103 +0,0 @@
-export default class CheckboxDocumentation extends HTMLElement {
-   constructor(props) {
-      super();
-      slice.attachTemplate(this);
-
-      slice.controller.setComponentProps(this, props);
-      this.debuggerProps = [];
-   }
-
-   async init() {
-      await this.createCheckbox(this.querySelector('.myCheckbox'), {}, `{}`);
-      await this.createCheckbox(
-         this.querySelector('.colorCheckbox'),
-         { customColor: 'gold' },
-         `{ 
-        customColor: "gold" 
-      }`
-      );
-      await this.createCheckbox(
-         this.querySelector('.label'),
-         {
-            label: 'Checkbox',
-         },
-         `{
-        label: "Checkbox",
-      }`
-      );
-      await this.createCheckbox(
-         this.querySelector('.labelLeft'),
-         {
-            label: 'Left',
-            labelPlacement: 'left',
-         },
-         `{
-        label: "Left",
-        labelPlacement: "left",
-      }`
-      );
-      await this.createCheckbox(
-         this.querySelector('.labelTop'),
-         {
-            label: 'Top',
-            labelPlacement: 'top',
-         },
-         `{
-        label: "Top",
-        labelPlacement: "top",
-      }`
-      );
-      await this.createCheckbox(
-         this.querySelector('.labelRight'),
-         {
-            label: 'Right',
-            labelPlacement: 'right',
-         },
-         `{
-        label: "Right",
-        labelPlacement: "right",
-      }`
-      );
-      await this.createCheckbox(
-         this.querySelector('.labelBottom'),
-         {
-            label: 'Bottom',
-            labelPlacement: 'bottom',
-         },
-         `{
-        label: "Bottom",
-        labelPlacement: "bottom",
-      }`
-      );
-   }
-
-   async createCheckbox(appendTo, checkboxProps, codeProps) {
-      if (!codeProps) {
-         codeProps = '{}';
-      }
-      const myCheckbox = await slice.build('Checkbox', checkboxProps);
-
-      const componentCode = await slice.build('CodeVisualizer', {
-         value: `const myCheckbox = await slice.build("Checkbox", ${codeProps});
-
-`,
-         language: 'javascript',
-      });
-
-      const div = document.createElement('div');
-      const checkboxDiv = document.createElement('div');
-      checkboxDiv.classList.add('checkboxs');
-      checkboxDiv.appendChild(myCheckbox);
-      div.classList.add('checkboxs_container');
-      div.appendChild(checkboxDiv);
-      div.appendChild(componentCode);
-
-      if (appendTo) {
-         appendTo.appendChild(div);
-      }
-
-      return div;
-   }
-}
-
-customElements.define('slice-checkboxdocumentation', CheckboxDocumentation);

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

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

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

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

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

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

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

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

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

@@ -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;
-  }
-}