npm - slicejs-web-framework - Versions diffs - 1.0.5 → 1.0.7 - Mend

slicejs-web-framework 1.0.5 → 1.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1161) hide show

package/api/index.js CHANGED Viewed

@@ -17,11 +17,13 @@ const isProduction = sliceConfig.production === true;
 const folderDeployed = isProduction ? 'dist' : 'src';
 // Servir archivos estáticos desde la carpeta 'Slice'
-app.use('/Slice/', express.static(path.join(__dirname,'..','Slice')));
+app.use('/Slice/', express.static(path.join(__dirname, '..', 'node_modules', 'slicejs-web-framework', 'Slice')));
 // Servir archivos estáticos desde la carpeta 'App'
 app.get('/testing1', (req, res) => {
    res.send(` Actual route in server: __dirname: ${__dirname} __filename: ${__filename} - checking if file exists: ${path.join(__dirname, '..', 'src','App', 'index.html')}`);
 });

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "slicejs-web-framework",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "description": "",
   "engines": {
     "node": "20.x"
@@ -17,16 +17,12 @@
     "development": "npm run",
     "slice:modify": "node node_modules/slicejs-cli/client.js modify"
   },
-  "bin": {
-    "slice": "./node_modules/slicejs-cli/client.js"
-  },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "type": "module",
   "dependencies": {
-    "express": "^4.19.2",
-    "slicejs-cli": "^2.0.1"
+    "express": "^4.19.2"
   },
   "devDependencies": {
     "prettier": "3.3.3"

package/src/App/index.html ADDED Viewed

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Slice - Documentation</title>
+    <link rel="icon" type="image/x-icon" href="/../../images/favicon.ico" />
+    <link rel="stylesheet" type="text/css" href="/App/style.css" />
+    <!-- Prism -->
+    <!-- Eliminar Prism despues-->
+  </head>
+  <body>
+    <div id="app">
+      <script src="/App/index.js" type="module"></script>
+    </div>
+  </body>
+</html>

package/src/App/index.js ADDED Viewed

@@ -0,0 +1,63 @@
+import Slice from '/Slice/Slice.js';
+const CACHE_NAME = 'slice-cache-v1';
+const urlsToCache = [
+   // Añade aquí las rutas de los archivos que deseas almacenar
+   './Slice/Slice.js',
+   './Slice/Components/Structural/Logger/Logger.js',
+   './Slice/Components/Structural/Debugger/Debugger.js',
+   './Slice/Components/Structural/Router/Router.js',
+   './Slice/Components/Structural/Router/routes.js',
+   './Slice/Components/Structural/Controller/Controller.js',
+   './Slice/Components/Structural/StylesManager/StylesManager.js',
+   './Slice/Components/Structural/StylesManager/ThemeManager/ThemeManager.js',
+];
+self.addEventListener('install', (event) => {
+   event.waitUntil(
+      caches.open(CACHE_NAME).then((cache) => {
+         console.log('Opened cache');
+         return cache.addAll(urlsToCache);
+      })
+   );
+});
+self.addEventListener('fetch', (event) => {
+   event.respondWith(
+      caches.match(event.request).then((response) => {
+         if (response) {
+            return response;
+         }
+         return fetch(event.request);
+      })
+   );
+});
+self.addEventListener('activate', (event) => {
+   const cacheWhitelist = [CACHE_NAME];
+   event.waitUntil(
+      caches.keys().then((cacheNames) => {
+         return Promise.all(
+            cacheNames.map((cacheName) => {
+               if (cacheWhitelist.indexOf(cacheName) === -1) {
+                  return caches.delete(cacheName);
+               }
+            })
+         );
+      })
+   );
+});
+if ('serviceWorker' in navigator) {
+   window.addEventListener('load', () => {
+      navigator.serviceWorker
+         .register('/service-worker.js')
+         .then((registration) => {
+            console.log('Service Worker registrado con éxito:', registration);
+         })
+         .catch((error) => {
+            console.log('Error al registrar el Service Worker:', error);
+         });
+   });
+}

package/src/App/style.css ADDED Viewed

@@ -0,0 +1,40 @@
+/* :root {
+  --docs-width: 64%;
+}
+slice-layout {
+  display: flex;
+  justify-content: center;
+}
+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);
+}
+.docs_container {
+  color: var(--font-primary-color);
+  margin-top: 100px;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  width: var(--docs-width);
+  padding-left: 10px;
+  padding-right: 10px;
+  padding-bottom: 25px;
+} */

package/src/Components/AppComponents/ButtonDocumentation/ButtonDocumentation.css ADDED Viewed

@@ -0,0 +1,16 @@
+.buttonsGrid {
+  width: 100%;
+}
+.buttons {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+.buttonsContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
+  /* width: 100%; */
+}

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

@@ -0,0 +1,22 @@
+<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 ADDED Viewed

@@ -0,0 +1,102 @@
+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 ADDED Viewed

@@ -0,0 +1,15 @@
+: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 ADDED Viewed

@@ -0,0 +1,38 @@
+<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 ADDED Viewed

@@ -0,0 +1,113 @@
+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 ADDED Viewed

@@ -0,0 +1,21 @@
+.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 ADDED Viewed

@@ -0,0 +1,35 @@
+<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 ADDED Viewed

@@ -0,0 +1,103 @@
+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/CodeVisualizer/CodeVisualizer.css ADDED Viewed

@@ -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/src/Components/AppComponents/CodeVisualizer/CodeVisualizer.html ADDED Viewed

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