slicejs-web-framework 1.0.19 → 1.0.21

package/src/Components/AppComponents/ButtonDocumentation/ButtonDocumentation.html

@@ -1,22 +0,0 @@
-<h1 id="sliceButton">Slice Button</h1>
-<div class="myButton">
-  <p>
-    To build a simple Slice Button you only need to use the "slice.build"
-    method, just like that you have a Slice Button that you can customize with a
-    value prop.
-  </p>
-</div>
-<div class="colorButton">
-  <h2 id="customization">Customization</h2>
-  <p>
-    You can also cutomize your Slice Button specifying it's background color
-    with "customColor.button" and it's font color with "customColor.label".
-  </p>
-</div>
-<div class="onClick">
-  <h2 id="onClickCallback">onClickCallback</h2>
-  <p>
-    At last but not least you can add a function to your button with the prop
-    "onClickCallback".
-  </p>
-</div>

package/src/Components/AppComponents/ButtonDocumentation/ButtonDocumentation.js

@@ -1,102 +0,0 @@
-export default class ButtonDocumentation extends HTMLElement {
-   constructor(props) {
-      super();
-      slice.attachTemplate(this);
-
-      slice.controller.setComponentProps(this, props);
-      this.debuggerProps = [];
-   }
-
-   async init() {
-      const grid = await slice.build('Grid', { columns: 2, rows: 1 });
-      grid.classList.add('buttonsGrid');
-
-      const simpleButton = await this.createButton(null, {});
-      const myButton = await this.createButton(
-         null,
-         {
-            value: 'Slice Button',
-         },
-         `{
-        value: "Slice Button",
-      }`
-      );
-
-      if (window.screen.width <= 770) {
-         grid.columns = 1;
-      }
-
-      await grid.setItem(simpleButton);
-      await grid.setItem(myButton);
-
-      this.querySelector('.myButton').appendChild(grid);
-
-      await this.createButton(
-         this.querySelector('.colorButton'),
-         {
-            value: 'Color Button',
-            customColor: { label: 'black', button: 'red' },
-         },
-         `{
-        value: "Color Button",
-        customColor: { label: "black", button: "red" },
-      }`
-      );
-      const clickButton = await this.createButton(
-         this.querySelector('.onClick'),
-         {
-            value: 'Click',
-            onClickCallback: () => {
-               if (clickButton.value === 'Click') {
-                  clickButton.value = 'Clicked';
-               } else {
-                  clickButton.value = 'Click';
-               }
-            },
-         },
-         `{
-        value: "Click",
-        onClickCallback: () => {
-          if (myButton.value === "Click") {
-            myButton.value = "Clicked";
-          } else {
-            myButton.value = "Click";
-          }
-        },
-      }`
-      );
-   }
-
-   async createButton(appendTo, buttonProps, codeProps) {
-      if (!codeProps) {
-         codeProps = '{}';
-      }
-      const myButton = await slice.build('Button', buttonProps);
-
-      const componentCode = await slice.build('CodeVisualizer', {
-         value: `const myButton = await slice.build("Button", ${codeProps});
-
-`,
-         language: 'javascript',
-      });
-
-      const div = document.createElement('div');
-      const buttonDiv = document.createElement('div');
-      buttonDiv.classList.add('buttons');
-      buttonDiv.appendChild(myButton);
-      div.classList.add('buttonsContainer');
-      div.appendChild(buttonDiv);
-      div.appendChild(componentCode);
-
-      if (appendTo) {
-         appendTo.appendChild(div);
-      }
-      if (buttonProps.onClickCallback) {
-         return myButton;
-      }
-
-      return div;
-   }
-}
-
-customElements.define('slice-buttondocumentation', ButtonDocumentation);

package/src/Components/AppComponents/CardDocumentation/CardDocumentation.css

@@ -1,15 +0,0 @@
-:root {
-  --cards-padding: 30%;
-}
-.cards {
-  padding-left: var(--cards-padding);
-  padding-right: var(--cards-padding);
-  margin-top: 50px;
-  margin-bottom: 50px;
-}
-
-@media only screen and (max-width: 770px) {
-  :root {
-    --cards-padding: 20px;
-  }
-}

package/src/Components/AppComponents/CardDocumentation/CardDocumentation.html

@@ -1,38 +0,0 @@
-<h1 id="sliceCard">Slice Card</h1>
-<div class="sliceCard">
-  <p>
-    When building a "Card" component, by default it's created with the Slice
-    logo, and with a default title and text.
-  </p>
-</div>
-<div class="myCard">
-  <h2 id="myCard">Title and Text</h2>
-  <p>
-    To build your own Slice Card with your information it's as simple as just
-    adding "title" and "text" props to your component.
-  </p>
-</div>
-<div class="cardClick">
-  <h2 id="cardClick">Click Event | "isOpen" prop</h2>
-  <p>
-    The Slice Card component has an click eventListener. While the card is
-    uncovered and shows the information inside, it's cover can be clicked to
-    keep open. Changing it's "isOpen" prop to true. That same eventListener can
-    change it back to false, and cover up the card again.
-  </p>
-</div>
-<h1 id="customization">Customization</h1>
-<div class="cardIcon">
-  <h2 id="icon">Icon</h2>
-  <p>
-    You can start your Slice Card customization by assignin another icon to it.
-  </p>
-</div>
-<div class="cardColor">
-  <h2 id="customColor">Custom Color</h2>
-  <p>
-    You can also change card color by using "customColor" props, using
-    "customColor.card" to change it's background, and "customColor.icon" to
-    change the icon's color.
-  </p>
-</div>

package/src/Components/AppComponents/CardDocumentation/CardDocumentation.js

@@ -1,113 +0,0 @@
-export default class CardDocumentation extends HTMLElement {
-   constructor(props) {
-      super();
-      slice.attachTemplate(this);
-
-      slice.controller.setComponentProps(this, props);
-      this.debuggerProps = [];
-   }
-
-   async init() {
-      await this.createCard(this.querySelector('.sliceCard'), {});
-      await this.createCard(
-         this.querySelector('.myCard'),
-         {
-            title: 'My Slice Card',
-            text: "My Slice Card's information.",
-         },
-         `{
-        title: "My Slice Card",
-        text: "My Slice Card's information.",
-      }`
-      );
-      await this.createCard(
-         this.querySelector('.cardClick'),
-         {
-            title: 'Uncover Slice Card',
-            text: 'isOpen is true.',
-            isOpen: true,
-         },
-         `{
-        title: "Uncover Slice Card",
-        text: "isOpen is true",
-        isOpen: true
-      }`
-      );
-      await this.createCard(
-         this.querySelector('.cardIcon'),
-         {
-            title: 'Discord',
-            text: 'This card has Discord Icon.',
-            icon: {
-               name: 'discord',
-               iconStyle: 'filled',
-            },
-         },
-         `{
-        title: "Discord",
-        text: "This card has Discord Icon.",
-        icon: {
-          name: "discord",
-          iconStyle: "filled",
-        }
-      }`
-      );
-      await this.createCard(
-         this.querySelector('.cardColor'),
-         {
-            title: 'Github',
-            text: 'This card has customized colors.',
-            icon: {
-               name: 'github',
-               iconStyle: 'filled',
-            },
-            customColor: {
-               card: 'darkblue',
-               icon: 'white',
-            },
-         },
-         `{
-        title: "Github",
-        text: "This card has customized colors.",
-        icon: {
-          name: "github",
-          iconStyle: "filled",
-        },
-        customColor: {
-          card: "darkblue",
-          icon: "white",
-        },
-      }`
-      );
-   }
-
-   async createCard(appendTo, cardProps, codeProps) {
-      if (!codeProps) {
-         codeProps = '{}';
-      }
-      const myCard = await slice.build('Card', cardProps);
-
-      const componentCode = await slice.build('CodeVisualizer', {
-         value: `const myCard = await slice.build("Card", ${codeProps});
-
-`,
-         language: 'javascript',
-      });
-
-      const div = document.createElement('div');
-      const cardDiv = document.createElement('div');
-      cardDiv.classList.add('cards');
-      cardDiv.appendChild(myCard);
-      div.classList.add('cards_container');
-      div.appendChild(cardDiv);
-      div.appendChild(componentCode);
-
-      if (appendTo) {
-         appendTo.appendChild(div);
-      }
-
-      return div;
-   }
-}
-
-customElements.define('slice-carddocumentation', CardDocumentation);

package/src/Components/AppComponents/CheckboxDocumentation/CheckboxDocumentation.css

@@ -1,21 +0,0 @@
-.checkboxs {
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-}
-.labelCheckbox {
-  display: grid;
-  align-items: end;
-  grid-template-columns: repeat(2, 1fr);
-  grid-template-rows: repeat(1, 1fr);
-  gap: 10px;
-  margin: 0 auto;
-}
-
-@media only screen and (max-width: 770px) {
-  .labelCheckbox {
-    grid-template-columns: repeat(1, 1fr);
-  }
-}

package/src/Components/AppComponents/CheckboxDocumentation/CheckboxDocumentation.html

@@ -1,35 +0,0 @@
-<h1 id="sliceCheckbox">Slice CheckBox</h1>
-<div class="myCheckbox">
-  <p>This is a Slice Checkbox.</p>
-</div>
-<div class="colorCheckbox">
-  <h2 id="customColor">Custom color</h2>
-  <p>
-    You cand customize your Slice Checkbox by changing it's color with the color
-    prop
-  </p>
-</div>
-<h1 id="label">Label</h1>
-<div class="label">
-  <p>You can set a label to your checkbox.</p>
-</div>
-<h2 id="labelPlacement">Label Placement</h2>
-<p>You can also set in wich position to put the label to.</p>
-<div class="labelCheckbox">
-  <div class="labelLeft">
-    <h2>Left</h2>
-    <p>This label is positioned at left.</p>
-  </div>
-  <div class="labelTop">
-    <h2>Top</h2>
-    <p>This label is positioned at top.</p>
-  </div>
-  <div class="labelRight">
-    <h2>Right (default)</h2>
-    <p>This label is positioned at right.</p>
-  </div>
-  <div class="labelBottom">
-    <h2>Bottom</h2>
-    <p>This label is positioned at bottom.</p>
-  </div>
-</div>

package/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/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/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/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;
-}