npm - slicejs-web-framework - Versions diffs - 2.4.8 → 3.1.0 - Mend

slicejs-web-framework 2.4.8 → 3.1.0

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 (229) hide show

package/.worktrees/public-env-browser-exposure/sliceConfig.schema.json ADDED Viewed

@@ -0,0 +1,109 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://slicejs.local/sliceConfig.schema.json",
+  "title": "Slice.js Config",
+  "type": "object",
+  "additionalProperties": true,
+  "properties": {
+    "debugger": {
+      "type": "object",
+      "additionalProperties": true,
+      "properties": {
+        "enabled": { "type": "boolean" },
+        "click": { "type": "string", "enum": ["right", "left"] }
+      }
+    },
+    "stylesManager": {
+      "type": "object",
+      "additionalProperties": true,
+      "properties": {
+        "requestedStyles": { "type": "array", "items": { "type": "string" } }
+      }
+    },
+    "themeManager": {
+      "type": "object",
+      "additionalProperties": true,
+      "properties": {
+        "enabled": { "type": "boolean" },
+        "defaultTheme": { "type": "string" },
+        "saveThemeLocally": { "type": "boolean" },
+        "useBrowserTheme": { "type": "boolean" }
+      }
+    },
+    "logger": {
+      "type": "object",
+      "additionalProperties": true,
+      "properties": {
+        "enabled": { "type": "boolean" },
+        "showLogs": { "type": "object", "additionalProperties": true }
+      }
+    },
+    "events": {
+      "type": "object",
+      "additionalProperties": true,
+      "properties": {
+        "enabled": { "type": "boolean" },
+        "ui": {
+          "type": "object",
+          "additionalProperties": true,
+          "properties": {
+            "enabled": { "type": "boolean" },
+            "shortcut": { "type": "string" }
+          }
+        }
+      }
+    },
+    "context": {
+      "type": "object",
+      "additionalProperties": true,
+      "properties": {
+        "enabled": { "type": "boolean" },
+        "ui": {
+          "type": "object",
+          "additionalProperties": true,
+          "properties": {
+            "enabled": { "type": "boolean" },
+            "shortcut": { "type": "string" }
+          }
+        }
+      }
+    },
+    "paths": {
+      "type": "object",
+      "additionalProperties": true,
+      "properties": {
+        "components": { "type": "object", "additionalProperties": true },
+        "themes": { "type": "string" },
+        "styles": { "type": "string" },
+        "routesFile": { "type": "string" }
+      },
+      "required": ["components", "themes", "styles", "routesFile"]
+    },
+    "router": {
+      "type": "object",
+      "additionalProperties": true,
+      "properties": {
+        "defaultRoute": { "type": "string" }
+      }
+    },
+    "loading": {
+      "type": "object",
+      "additionalProperties": true,
+      "properties": {
+        "enabled": { "type": "boolean" }
+      }
+    },
+    "publicFolders": {
+      "type": "array",
+      "items": { "type": "string" }
+    },
+    "server": {
+      "type": "object",
+      "additionalProperties": true,
+      "properties": {
+        "port": { "type": "number" },
+        "host": { "type": "string" }
+      }
+    }
+  }
+}

package/.worktrees/public-env-browser-exposure/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/.worktrees/public-env-browser-exposure/src/App/index.js ADDED Viewed

@@ -0,0 +1,23 @@
+import Slice from '/Slice/Slice.js';
+/*
+slice.router.beforeEach(async (to, from, next) => {
+   if(to.metadata.private){
+      const isAuthenticated = await //fetchlogic for validation
+      if(!isAuthenticated){
+         return next({ path: '/login', replace: true });
+      }
+      return next();
+   }
+   return next();
+});
+If any beforeEach or afterEach is defined, start the router after defining them
+await slice.router.start();
+*/

package/.worktrees/public-env-browser-exposure/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/.worktrees/public-env-browser-exposure/src/Components/AppComponents/HomePage/HomePage.css ADDED Viewed

@@ -0,0 +1,201 @@
+/* Home page styles */
+slice-home-page {
+  display: block;
+  width: 100%;
+  font-family: var(--font-family);
+  color: var(--font-primary-color);
+}
+/* ── HERO ── */
+.hero-section {
+  min-height: 80vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 7rem 2rem 5rem;
+  background-color: var(--primary-background-color);
+  position: relative;
+  overflow: hidden;
+}
+.hero-section::before {
+  content: '';
+  position: absolute;
+  top: -150px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 700px;
+  height: 700px;
+  background: radial-gradient(
+    circle,
+    rgba(var(--primary-color-rgb), 0.07) 0%,
+    transparent 70%
+  );
+  pointer-events: none;
+}
+.hero-content {
+  max-width: 640px;
+  position: relative;
+  z-index: 1;
+}
+.hero-badge {
+  display: inline-block;
+  background: rgba(var(--primary-color-rgb), 0.1);
+  color: var(--primary-color);
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  padding: 0.3rem 0.85rem;
+  border-radius: 20px;
+  margin-bottom: 1.5rem;
+}
+.hero-title {
+  font-size: 3rem;
+  font-weight: 800;
+  color: var(--font-primary-color);
+  line-height: 1.1;
+  margin-bottom: 1rem;
+  letter-spacing: -0.03em;
+}
+.hero-title .highlight {
+  color: var(--primary-color);
+}
+.hero-sub {
+  font-size: 1.05rem;
+  color: var(--font-secondary-color);
+  margin-bottom: 2rem;
+  line-height: 1.6;
+}
+.hero-cta {
+  display: flex;
+  gap: 0.75rem;
+  justify-content: center;
+  margin-bottom: 2.5rem;
+}
+.hero-chips {
+  display: flex;
+  gap: 0.5rem;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+.hero-chip {
+  background: white;
+  border: 1px solid var(--disabled-color);
+  color: var(--primary-color);
+  font-size: 0.75rem;
+  font-weight: 600;
+  padding: 0.3rem 0.75rem;
+  border-radius: 20px;
+  box-shadow: var(--box-shadow-primary);
+}
+/* ── FEATURES ── */
+.features-section {
+  padding: 5rem 2rem;
+  background: white;
+  border-top: 1px solid var(--disabled-color);
+}
+.section-header {
+  text-align: center;
+  margin-bottom: 2.5rem;
+}
+.section-label {
+  font-size: 0.72rem;
+  font-weight: 700;
+  color: var(--accent-color);
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  margin-bottom: 0.4rem;
+}
+.section-title {
+  font-size: 1.9rem;
+  font-weight: 800;
+  color: var(--font-primary-color);
+  letter-spacing: -0.02em;
+}
+.feature-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1.2rem;
+  max-width: 820px;
+  margin: 0 auto;
+}
+.feature-item {
+  background: var(--primary-background-color);
+  border-radius: 10px;
+  padding: 1.4rem 1.2rem;
+  border: 1px solid var(--disabled-color);
+  transition: box-shadow 0.2s, transform 0.15s;
+}
+.feature-item:hover {
+  box-shadow: var(--box-shadow-primary);
+  transform: translateY(-2px);
+}
+.feature-title {
+  font-size: 0.9rem;
+  font-weight: 700;
+  color: var(--font-primary-color);
+  margin-bottom: 0.35rem;
+}
+.feature-description {
+  font-size: 0.78rem;
+  color: var(--medium-color);
+  line-height: 1.5;
+}
+/* ── SHOWCASE ── */
+.showcase-section {
+  padding: 5rem 2rem;
+  background: var(--primary-background-color);
+  border-top: 1px solid var(--disabled-color);
+}
+.showcase-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 1rem;
+  max-width: 860px;
+  margin: 0 auto;
+}
+.comp-card {
+  background: white;
+  border-radius: 10px;
+  padding: 1.3rem 1.2rem;
+  border: 1px solid var(--disabled-color);
+  box-shadow: 0 2px 8px rgba(var(--primary-color-rgb), 0.06);
+}
+.comp-label {
+  font-size: 0.65rem;
+  font-weight: 700;
+  color: var(--medium-color);
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  margin-bottom: 0.75rem;
+}
+.comp-demo {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  flex-wrap: wrap;
+}

package/.worktrees/public-env-browser-exposure/src/Components/AppComponents/HomePage/HomePage.html ADDED Viewed

@@ -0,0 +1,37 @@
+<div class="home-page-container">
+  <section class="hero-section">
+    <div class="hero-content">
+      <div class="hero-badge">v2.4 · Vanilla JS Framework</div>
+      <h1 class="hero-title">Build your web app<br>one <span class="highlight">Slice</span> at a time</h1>
+      <p class="hero-sub">A lightweight, component-based framework for building web applications with vanilla JavaScript and web standards.</p>
+      <div class="hero-cta"></div>
+      <div class="hero-chips">
+        <span class="hero-chip">Button</span>
+        <span class="hero-chip">Input</span>
+        <span class="hero-chip">Switch</span>
+        <span class="hero-chip">Navbar</span>
+        <span class="hero-chip">Grid</span>
+        <span class="hero-chip">Card</span>
+        <span class="hero-chip">+ more</span>
+      </div>
+    </div>
+  </section>
+  <section class="features-section">
+    <div class="section-header">
+      <p class="section-label">Why Slice.js</p>
+      <h2 class="section-title">Everything you need, nothing you don't</h2>
+    </div>
+    <div class="feature-grid"></div>
+  </section>
+  <section class="showcase-section">
+    <div class="section-header">
+      <p class="section-label">Component Showcase</p>
+      <h2 class="section-title">Ready-to-use components</h2>
+    </div>
+    <div class="showcase-grid"></div>
+  </section>
+</div>

package/.worktrees/public-env-browser-exposure/src/Components/AppComponents/HomePage/HomePage.js ADDED Viewed

@@ -0,0 +1,210 @@
+export default class HomePage extends HTMLElement {
+   constructor(props) {
+      super();
+      slice.attachTemplate(this);
+      slice.controller.setComponentProps(this, props);
+      this.debuggerProps = [];
+   }
+   async init() {
+      await Promise.all([
+         this._buildNavbar(),
+         this._buildHeroCta(),
+         this._buildFeatures(),
+         this._buildShowcase(),
+      ]);
+   }
+   async _buildNavbar() {
+      const navbar = await slice.build('Navbar', {
+         position: 'fixed',
+         logo: {
+            src: '/images/Slice.js-logo.png',
+            path: '/',
+         },
+         items: [
+            { text: 'Home', path: '/' },
+            { text: 'Playground', path: '/Playground' },
+         ],
+         buttons: [
+            {
+               value: 'Change Theme',
+               onClickCallback: async () => {
+                  const current = slice.stylesManager.themeManager.currentTheme;
+                  const next = current === 'Slice' ? 'Light'
+                             : current === 'Light' ? 'Dark'
+                             : 'Slice';
+                  await slice.setTheme(next);
+               },
+            },
+         ],
+      });
+      this.insertBefore(navbar, this.firstChild);
+   }
+   async _buildHeroCta() {
+      const docsBtn = await slice.build('Button', {
+         value: 'Documentation',
+         onClickCallback: () =>
+            window.open('https://slice-js-docs.vercel.app/Documentation', '_blank'),
+         customColor: {
+            button: 'var(--primary-color)',
+            label: 'var(--primary-color-contrast)',
+         },
+      });
+      const componentsBtn = await slice.build('Button', {
+         value: 'Components Library',
+         onClickCallback: () =>
+            window.open('https://slice-js-docs.vercel.app/Documentation/Visual', '_blank'),
+         customColor: {
+            button: 'var(--secondary-background-color)',
+            label: 'var(--primary-color)',
+         },
+      });
+      const cta = this.querySelector('.hero-cta');
+      cta.appendChild(docsBtn);
+      cta.appendChild(componentsBtn);
+   }
+   async _buildFeatures() {
+      const features = [
+         {
+            title: 'Component-Based',
+            description: 'Build your app using modular, reusable components following web standards.',
+         },
+         {
+            title: 'Themeable',
+            description: 'Swap themes at runtime. Ships with Slice, Light, Dark and more.',
+         },
+         {
+            title: 'Lightweight',
+            description: 'No heavy runtime. Just vanilla JavaScript and web standards.',
+         },
+         {
+            title: 'Built-in Router',
+            description: 'Client-side routing with MultiRoute — no extra libraries needed.',
+         },
+         {
+            title: 'CLI Tools',
+            description: 'Scaffold projects, create components and build bundles from the command line.',
+         },
+         {
+            title: 'Services',
+            description: 'Built-in FetchManager, LocalStorage and IndexedDB integrations.',
+         },
+      ];
+      const grid = this.querySelector('.feature-grid');
+      for (const { title, description } of features) {
+         const item = document.createElement('div');
+         item.classList.add('feature-item');
+         const h3 = document.createElement('h3');
+         h3.classList.add('feature-title');
+         h3.textContent = title;
+         const p = document.createElement('p');
+         p.classList.add('feature-description');
+         p.textContent = description;
+         item.appendChild(h3);
+         item.appendChild(p);
+         grid.appendChild(item);
+      }
+   }
+   async _buildShowcase() {
+      const grid = this.querySelector('.showcase-grid');
+      // Helper: wrap built components in a labeled card and append to grid
+      const addCard = (label, ...components) => {
+         const card = document.createElement('div');
+         card.classList.add('comp-card');
+         const labelEl = document.createElement('p');
+         labelEl.classList.add('comp-label');
+         labelEl.textContent = label;
+         const demo = document.createElement('div');
+         demo.classList.add('comp-demo');
+         components.forEach(c => demo.appendChild(c));
+         card.appendChild(labelEl);
+         card.appendChild(demo);
+         grid.appendChild(card);
+      };
+      // Button — primary + secondary variants
+      const [btnPrimary, btnSecondary] = await Promise.all([
+         slice.build('Button', {
+            value: 'Primary',
+            onClickCallback: () => {},
+            customColor: {
+               button: 'var(--primary-color)',
+               label: 'var(--primary-color-contrast)',
+            },
+         }),
+         slice.build('Button', {
+            value: 'Secondary',
+            onClickCallback: () => {},
+            customColor: {
+               button: 'var(--secondary-background-color)',
+               label: 'var(--primary-color)',
+            },
+         }),
+      ]);
+      addCard('Button', btnPrimary, btnSecondary);
+      // Input
+      const input = await slice.build('Input', {
+         placeholder: 'Type something...',
+         type: 'text',
+      });
+      addCard('Input', input);
+      // Switch
+      const sw = await slice.build('Switch', {
+         label: 'Toggle me',
+         checked: true,
+      });
+      addCard('Switch', sw);
+      // Select — theme chooser
+      const themeOptions = [
+         { name: 'Slice Theme' },
+         { name: 'Light Theme' },
+         { name: 'Dark Theme' },
+         { name: 'Purple Theme' },
+      ];
+      const select = await slice.build('Select', {
+         label: 'Pick a theme',
+         options: themeOptions,
+         visibleProp: 'name',
+         onOptionSelect: async (option) => {
+            if (!option) return;
+            const themeName = option.name.replace(' Theme', '');
+            await slice.setTheme(themeName);
+         },
+      });
+      addCard('Select', select);
+      // Loading — triggered by a demo button (Loading appends to document.body)
+      const loading = await slice.build('Loading', {});
+      const demoBtn = await slice.build('Button', {
+         value: 'Demo Loading',
+         onClickCallback: () => {
+            loading.start();
+            setTimeout(() => loading.stop(), 1500);
+         },
+         customColor: {
+            button: 'var(--primary-color)',
+            label: 'var(--primary-color-contrast)',
+         },
+      });
+      addCard('Loading', demoBtn);
+   }
+}
+customElements.define('slice-home-page', HomePage);

package/.worktrees/public-env-browser-exposure/src/Components/AppComponents/Playground/Playground.css ADDED Viewed

@@ -0,0 +1,12 @@
+.indexGrid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: repeat(1, 1fr);
+    gap: 10px;
+    margin: 0 auto;
+  }
+  .indexGridItem {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }

package/.worktrees/public-env-browser-exposure/src/Components/AppComponents/Playground/Playground.html ADDED Viewed

File without changes