slicejs-web-framework 3.2.3 → 3.3.0

package/src/Components/components.js

@@ -1,27 +1,15 @@
-const components = {
-  "HomePage": "AppComponents",
-  "Playground": "AppComponents",
-  "Button": "Visual",
-  "Card": "Visual",
-  "Checkbox": "Visual",
-  "CodeVisualizer": "Visual",
-  "Details": "Visual",
-  "DropDown": "Visual",
-  "Grid": "Visual",
-  "Icon": "Visual",
-  "Input": "Visual",
-  "Layout": "Visual",
-  "Loading": "Visual",
-  "MultiRoute": "Visual",
-  "Navbar": "Visual",
-  "NotFound": "Visual",
-  "Route": "Visual",
-  "Link": "Visual",
-  "Select": "Visual",
-  "Switch": "Visual",
-  "TreeItem": "Visual",
-  "TreeView": "Visual",
-  "FetchManager": "Service",
-  "IndexedDbManager": "Service",
-  "LocalStorageManager": "Service"
-}; export default components;
+const components = {
+  "AppShell": "AppComponents",
+  "HomeSection": "AppComponents",
+  "AboutSection": "AppComponents",
+  "Button": "Visual",
+  "Link": "Visual",
+  "Loading": "Visual",
+  "MultiRoute": "Visual",
+  "Navbar": "Visual",
+  "NotFound": "Visual",
+  "Route": "Visual",
+  "FetchManager": "Service",
+  "IndexedDbManager": "Service",
+  "LocalStorageManager": "Service"
+}; export default components;

package/src/Styles/sliceStyles.css

@@ -1,34 +1,34 @@
-@import url("https://fonts.googleapis.com/css2?family=Montserrat&family=Poppins&family=Roboto&display=swap");
-
-:root {
-  --font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
-    Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
-  --border-radius-slice: 5px;
-  --slice-border: 1px;
-}
-body {
-  margin: 0;
-  background-color: var(--primary-background-color);
-}
-.caret {
-  cursor: pointer;
-  width: 0;
-  height: 0;
-  border-left: 5px solid transparent;
-  border-right: 5px solid transparent;
-  border-top: 6px solid;
-  transition: transform 0.3s;
-}
-.caret_open {
-  transform: rotate(180deg);
-}
-*::-webkit-scrollbar {
-  width: 5px;
-}
-*::-webkit-scrollbar:horizontal {
-  height: 3px;
-}
-*::-webkit-scrollbar-thumb {
-  background: var(--secondary-color);
-  border-radius: var(--border-radius-slice);
-}
+@import url("https://fonts.googleapis.com/css2?family=Montserrat&family=Poppins&family=Roboto&display=swap");
+
+:root {
+  --font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+    Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --border-radius-slice: 5px;
+  --slice-border: 1px;
+}
+body {
+  margin: 0;
+  background-color: var(--primary-background-color);
+}
+.caret {
+  cursor: pointer;
+  width: 0;
+  height: 0;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-top: 6px solid;
+  transition: transform 0.3s;
+}
+.caret_open {
+  transform: rotate(180deg);
+}
+*::-webkit-scrollbar {
+  width: 5px;
+}
+*::-webkit-scrollbar:horizontal {
+  height: 3px;
+}
+*::-webkit-scrollbar-thumb {
+  background: var(--secondary-color);
+  border-radius: var(--border-radius-slice);
+}

package/src/Themes/Dark.css

@@ -1,42 +1,42 @@
-:root {
-  --font-primary-color: #fff;
-
-  /** primary **/
-  --primary-color: #0066ff;
-  --primary-color-rgb: rgb(0, 102, 255);
-  /* Se reemplaza el negro puro por un gris muy oscuro, más cálido y agradable */
-  --primary-background-color: #282828; /* antes: #000 */
-  --primary-color-contrast: #000;
-  /* Ajustamos la sombra para que armonice con el fondo aclarado */
-  --primary-color-shade: #383838; /* antes: #222 */
-
-  /** secondary **/
-  --secondary-color: #63ccfd;
-  --secondary-color-rgb: rgb(99, 204, 253);
-  /* Se aclara el fondo secundario para suavizar el efecto general */
-  --secondary-background-color: #333333; /* antes: #222 */
-  --secondary-color-contrast: #fff;
-
-  /** tertiary **/
-  /* Se levanta ligeramente el fondo terciario para mantener la coherencia visual */
-  --tertiary-background-color: #555555; /* antes: #444 */
-
-  /** success **/
-  --success-color: #00ff40;
-  --success-contrast: #000;
-
-  /** warning **/
-  --warning-color: #ffff40;
-  --warning-contrast: #000;
-
-  /** danger **/
-  --danger-color: #ff0000;
-  --danger-contrast: #000;
-
-  /** medium **/
-  --medium-color: #92949c;
-  --medium-contrast: #fff;
-
-  /* Disabled color */
-  --disabled-color: #7f7f7f;
-}
+:root {
+  --font-primary-color: #fff;
+
+  /** primary **/
+  --primary-color: #0066ff;
+  --primary-color-rgb: rgb(0, 102, 255);
+  /* Se reemplaza el negro puro por un gris muy oscuro, más cálido y agradable */
+  --primary-background-color: #282828; /* antes: #000 */
+  --primary-color-contrast: #000;
+  /* Ajustamos la sombra para que armonice con el fondo aclarado */
+  --primary-color-shade: #383838; /* antes: #222 */
+
+  /** secondary **/
+  --secondary-color: #63ccfd;
+  --secondary-color-rgb: rgb(99, 204, 253);
+  /* Se aclara el fondo secundario para suavizar el efecto general */
+  --secondary-background-color: #333333; /* antes: #222 */
+  --secondary-color-contrast: #fff;
+
+  /** tertiary **/
+  /* Se levanta ligeramente el fondo terciario para mantener la coherencia visual */
+  --tertiary-background-color: #555555; /* antes: #444 */
+
+  /** success **/
+  --success-color: #00ff40;
+  --success-contrast: #000;
+
+  /** warning **/
+  --warning-color: #ffff40;
+  --warning-contrast: #000;
+
+  /** danger **/
+  --danger-color: #ff0000;
+  --danger-contrast: #000;
+
+  /** medium **/
+  --medium-color: #92949c;
+  --medium-contrast: #fff;
+
+  /* Disabled color */
+  --disabled-color: #7f7f7f;
+}

package/src/Themes/Light.css

@@ -1,31 +1,31 @@
-:root {
-  --font-primary-color: #000;
-  --font-secondary-color: #474747;
-  /** primary **/
-  --primary-color: #0066ff;
-  --primary-color-rgb: rgb(0, 102, 255);
-  --primary-background-color: #fff;
-  --primary-color-contrast: #fff;
-  --primary-color-shade: #ddd;
-  /** secondary **/
-  --secondary-color: #63ccfd;
-  --secondary-color-rgb: rgb(99, 204, 253);
-  --secondary-background-color: #ddd;
-  --secondary-color-contrast: #fff;
-  /** tertiary **/
-  --tertiary-background-color: #c4c4c4;
-  /** success **/
-  --success-color: #00ff40;
-  --success-contrast: #fff;
-  /** warning **/
-  --warning-color: #ffff40;
-  --warning-contrast: #000;
-  /** danger **/
-  --danger-color: #ff0000;
-  --danger-contrast: #fff;
-  /** medium **/
-  --medium-color: #92949c;
-  --medium--contrast: #000;
-
-  --disabled-color: #7f7f7f;
-}
+:root {
+  --font-primary-color: #000;
+  --font-secondary-color: #474747;
+  /** primary **/
+  --primary-color: #0066ff;
+  --primary-color-rgb: rgb(0, 102, 255);
+  --primary-background-color: #fff;
+  --primary-color-contrast: #fff;
+  --primary-color-shade: #ddd;
+  /** secondary **/
+  --secondary-color: #63ccfd;
+  --secondary-color-rgb: rgb(99, 204, 253);
+  --secondary-background-color: #ddd;
+  --secondary-color-contrast: #fff;
+  /** tertiary **/
+  --tertiary-background-color: #c4c4c4;
+  /** success **/
+  --success-color: #00ff40;
+  --success-contrast: #fff;
+  /** warning **/
+  --warning-color: #ffff40;
+  --warning-contrast: #000;
+  /** danger **/
+  --danger-color: #ff0000;
+  --danger-contrast: #fff;
+  /** medium **/
+  --medium-color: #92949c;
+  --medium--contrast: #000;
+
+  --disabled-color: #7f7f7f;
+}

package/src/Themes/Slice.css

@@ -1,47 +1,47 @@
-:root {
-  /* Tipografía */
-  --font-primary-color: #2E1A47; /* Uva oscuro, elegante para lectura */
-  --font-secondary-color: #7D3AC1; /* Uva brillante para títulos y resaltes */
-
-  /** Primary - Uva intenso **/
-  --primary-color: #7D3AC1;
-  --primary-color-rgb: 125, 58, 193;
-  --primary-background-color: #F8F4FF; /* Lila muy claro como fondo principal */
-  --primary-color-contrast: #ffffff;
-  --primary-color-shade: #4E2279;
-
-  /** Secondary - Lima vibrante **/
-  --secondary-color: #C6FF00; /* Amarillo lima brillante, capta la atención */
-  --secondary-color-rgb: 198, 255, 0;
-  --secondary-background-color: #F9FFE1;
-  --secondary-color-contrast: #2E2E2E;
-
-  /** Tertiary - Turquesa suave **/
-  --tertiary-background-color: #D0F4F2; /* Fondo suave, fresco y moderno */
-
-  /** Success - Verde esmeralda claro **/
-  --success-color: #00B894;
-  --success-contrast: #ffffff;
-
-  /** Warning - Amarillo más tradicional pero suave **/
-  --warning-color: #FFD54F;
-  --warning-contrast: #3E2723;
-
-  /** Danger - Coral vibrante (sin caer en rojo tradicional) **/
-  --danger-color: #FF6F61;
-  --danger-contrast: #ffffff;
-
-  /** Medium - Gris lavanda para texto secundario **/
-  --medium-color: #A89FB5;
-  --medium-contrast: #000000;
-
-  /** Disabled - Gris pastel lavanda **/
-  --disabled-color: #E6E0F1;
-
-  /** Accent - Turquesa brillante para detalles elegantes **/
-  --accent-color: #00CFC1;
-
-  /* Sombras */
-  --box-shadow-primary: 0px 4px 12px rgba(125, 58, 193, 0.15);
-  --box-shadow-secondary: 0px 3px 8px rgba(198, 255, 0, 0.1);
-}
+:root {
+  /* Tipografía */
+  --font-primary-color: #2E1A47; /* Uva oscuro, elegante para lectura */
+  --font-secondary-color: #7D3AC1; /* Uva brillante para títulos y resaltes */
+
+  /** Primary - Uva intenso **/
+  --primary-color: #7D3AC1;
+  --primary-color-rgb: 125, 58, 193;
+  --primary-background-color: #F8F4FF; /* Lila muy claro como fondo principal */
+  --primary-color-contrast: #ffffff;
+  --primary-color-shade: #4E2279;
+
+  /** Secondary - Lima vibrante **/
+  --secondary-color: #C6FF00; /* Amarillo lima brillante, capta la atención */
+  --secondary-color-rgb: 198, 255, 0;
+  --secondary-background-color: #F9FFE1;
+  --secondary-color-contrast: #2E2E2E;
+
+  /** Tertiary - Turquesa suave **/
+  --tertiary-background-color: #D0F4F2; /* Fondo suave, fresco y moderno */
+
+  /** Success - Verde esmeralda claro **/
+  --success-color: #00B894;
+  --success-contrast: #ffffff;
+
+  /** Warning - Amarillo más tradicional pero suave **/
+  --warning-color: #FFD54F;
+  --warning-contrast: #3E2723;
+
+  /** Danger - Coral vibrante (sin caer en rojo tradicional) **/
+  --danger-color: #FF6F61;
+  --danger-contrast: #ffffff;
+
+  /** Medium - Gris lavanda para texto secundario **/
+  --medium-color: #A89FB5;
+  --medium-contrast: #000000;
+
+  /** Disabled - Gris pastel lavanda **/
+  --disabled-color: #E6E0F1;
+
+  /** Accent - Turquesa brillante para detalles elegantes **/
+  --accent-color: #00CFC1;
+
+  /* Sombras */
+  --box-shadow-primary: 0px 4px 12px rgba(125, 58, 193, 0.15);
+  --box-shadow-secondary: 0px 3px 8px rgba(198, 255, 0, 0.1);
+}

package/src/routes.js

@@ -1,16 +1,10 @@
-const routes = [
-   // Rutas principales
-   { path: '/', component: 'HomePage' },
-   { path: '/404', component: 'NotFound' },
-   {
-      path: '/Docum/${category}/${id}',
-      component: 'LandingPage',
-   },
-   {
-      path: "/Playground",
-      component: "Playground",
-   }
-
-];
-
+// App Shell + MultiRoute starter.
+// Every section URL renders AppShell, which swaps the content area via a MultiRoute.
+// Dynamic params use ${name} (NOT :name). Keep the 404 route last.
+const routes = [
+   { path: '/',      component: 'AppShell', metadata: { title: 'Home' } },
+   { path: '/about', component: 'AppShell', metadata: { title: 'About' } },
+   { path: '/404',   component: 'NotFound', metadata: { title: 'Not Found' } }
+];
+
 export default routes;

package/src/sliceConfig.json

@@ -1,73 +1,74 @@
-{
-   "server": {
-      "port": 3001,
-      "host": "localhost"
-   },
-   "debugger": {
-      "enabled": false,
-      "click": "right"
-   },
-   "events": {
-      "enabled": true,
-      "ui": {
-         "enabled": true,
-         "shortcut": "alt+shift+e"
-      }
-   },
-   "context": {
-      "enabled": true,
-      "ui": {
-         "enabled": true,
-         "shortcut": "alt+shift+c"
-      }
-   },
-   "stylesManager": {
-      "requestedStyles": ["sliceStyles"]
-   },
-   "themeManager": {
-      "enabled": true,
-      "defaultTheme": "Slice",
-      "saveThemeLocally": false,
-      "useBrowserTheme": false
-   },
-   "logger": {
-      "enabled": true,
-      "showLogs": {
-         "console": {
-            "error": true,
-            "warning": true,
-            "info": false
-         }
-      }
-   },
-   "paths": {
-      "components": {
-         "AppComponents": {
-            "path": "/Components/AppComponents",
-            "type": "Visual"
-         },
-         "Visual": {
-            "path": "/Components/Visual",
-            "type": "Visual"
-         },
-         "Service": {
-            "path": "/Components/Service",
-            "type": "Service"
-         }
-      },
-      "themes": "/Themes",
-      "styles": "/Styles",
-      "routesFile": "/routes.js"
-   },
-   "router": {
-      "defaultRoute": "/"
-   },
-  "loading": {
-     "enabled": true
-  },
-  "publicFolders": [
-     "/Themes",
-     "/Styles",
-     "/assets"
-  ]
-}
+{
+   "server": {
+      "port": 3001,
+      "host": "localhost"
+   },
+   "debugger": {
+      "enabled": false,
+      "click": "right"
+   },
+   "events": {
+      "enabled": true,
+      "ui": {
+         "enabled": true,
+         "shortcut": "alt+shift+e"
+      }
+   },
+   "context": {
+      "enabled": true,
+      "ui": {
+         "enabled": true,
+         "shortcut": "alt+shift+c"
+      }
+   },
+   "stylesManager": {
+      "requestedStyles": ["sliceStyles"]
+   },
+   "themeManager": {
+      "enabled": true,
+      "defaultTheme": "Slice",
+      "saveThemeLocally": false,
+      "useBrowserTheme": false
+   },
+   "logger": {
+      "enabled": true,
+      "showLogs": {
+         "console": {
+            "error": true,
+            "warning": true,
+            "info": false
+         }
+      }
+   },
+   "paths": {
+      "components": {
+         "AppComponents": {
+            "path": "/Components/AppComponents",
+            "type": "Visual"
+         },
+         "Visual": {
+            "path": "/Components/Visual",
+            "type": "Visual"
+         },
+         "Service": {
+            "path": "/Components/Service",
+            "type": "Service"
+         }
+      },
+      "themes": "/Themes",
+      "styles": "/Styles",
+      "routesFile": "/routes.js"
+   },
+   "router": {
+      "defaultRoute": "/"
+   },
+  "loading": {
+     "enabled": true
+  },
+  "publicFolders": [
+     "/Themes",
+     "/Styles",
+     "/assets",
+     "/images"
+  ]
+}