slicejs-web-framework 2.3.4 → 2.3.5

package/api/index.js

@@ -97,12 +97,6 @@ function bundlesDirectoryExists() {
   return fs.existsSync(bundleDir) && fs.statSync(bundleDir).isDirectory();
 }
 
-// Capturar todas las peticiones a bundles para debugging
-app.use('/bundles/', (req, res, next) => {
-  console.log(`🔍 Bundle request: ${req.method} ${req.originalUrl}`);
-  next();
-});
-
 // Middleware personalizado para archivos de bundles con MIME types correctos
 // ⚠️ DEBE IR ANTES del middleware general para tener prioridad
 app.use('/bundles/', (req, res, next) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slicejs-web-framework",
-  "version": "2.3.4",
+  "version": "2.3.5",
   "description": "",
   "engines": {
     "node": ">=20"

package/src/Components/Visual/Link/Link.css

@@ -0,0 +1,8 @@
+slice-link {
+  display: inline-flex;
+}
+
+slice-link .slice-link {
+  color: inherit;
+  text-decoration: none;
+}

package/src/Components/Visual/Link/Link.html

@@ -0,0 +1 @@
+<a href="#" class="slice-link" data-route></a>

package/src/Components/Visual/Link/Link.js

@@ -0,0 +1,63 @@
+export default class Link extends HTMLElement {
+  static props = {
+    path: { type: 'string', default: '#' },
+    classes: { type: 'string', default: '' },
+    text: { type: 'string', default: '' }
+  };
+
+  constructor(props = {}) {
+    super();
+    slice.attachTemplate(this);
+    this.$anchor = this.querySelector('.slice-link');
+
+    slice.controller.setComponentProps(this, props);
+    this.debuggerProps = ['path', 'classes', 'text'];
+  }
+
+  async init() {
+    this.updateLink();
+    this.addEventListener('click', this.onClick.bind(this));
+  }
+
+  updateLink() {
+    if (!this.$anchor) return;
+    this.$anchor.setAttribute('href', this.path || '#');
+    this.$anchor.textContent = this.text || '';
+    this.$anchor.className = `slice-link ${this.classes || ''}`.trim();
+  }
+
+  async onClick(event) {
+    event.preventDefault();
+    const path = this.path || this.$anchor?.getAttribute('href') || '#';
+    slice.router.navigate(path);
+  }
+
+  set path(value) {
+    this._path = value;
+    this.updateLink();
+  }
+
+  get path() {
+    return this._path;
+  }
+
+  set classes(value) {
+    this._classes = value;
+    this.updateLink();
+  }
+
+  get classes() {
+    return this._classes;
+  }
+
+  set text(value) {
+    this._text = value;
+    this.updateLink();
+  }
+
+  get text() {
+    return this._text;
+  }
+}
+
+customElements.define('slice-link', Link);

package/src/Components/components.js

@@ -16,12 +16,12 @@ const components = {
   "Navbar": "Visual",
   "NotFound": "Visual",
   "Route": "Visual",
+  "Link": "Visual",
   "Select": "Visual",
   "Switch": "Visual",
   "TreeItem": "Visual",
   "TreeView": "Visual",
   "FetchManager": "Service",
   "IndexedDbManager": "Service",
-  "Link": "Service",
   "LocalStorageManager": "Service"
-}; export default components;
+}; export default components;

package/src/sliceConfig.json

@@ -1,60 +1,68 @@
-{
-   "server": {
-      "port": 3001,
-      "host": "localhost"
-   },
-   "debugger": {
-      "enabled": false,
-      "click": "right"
-   },
-   "events": {
-      "enabled": true
-   },
-   "context": {
-      "enabled": true
-   },
-   "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
-   }
-}
+{
+   "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
+   }
+}

package/src/Components/Service/Link/Link.js

@@ -1,26 +0,0 @@
-export default class Link extends HTMLElement {
-   constructor(props = {}) {
-      super();
-      this.props = props;
-      this.innerHTML = this.getTemplate(props);
-      this.init();
-   }
-
-   init() {
-      this.addEventListener('click', this.onClick);
-   }
-
-   async onClick(event) {
-      event.preventDefault();
-      const path = this.querySelector('a').getAttribute('href');
-      const routeTargets = document.querySelectorAll('slice-routetarget');
-      slice.router.navigate(path);
-   }
-
-   getTemplate(props = {}) {
-      const { path = '#', classes = '', text = '' } = props;
-      return `<a href="${path}" class="${classes}" data-route>${text}</a>`;
-   }
-}
-
-customElements.define('slice-link', Link);