slicejs-web-framework 1.0.21 → 1.0.23

package/README.md

@@ -38,10 +38,10 @@
   <p align="center">
     Component-Based Web Development Framework
     <br />
-    <a href="https://slice-js.vercel.app/src/App/Documentation/"><strong>Explore the docs »</strong></a>
+    <a href="https://slice-js-docs.vercel.app/Documentation"><strong>Explore the docs »</strong></a>
     <br />
     <br />
-    <a href="https://slice-js.vercel.app/src/App/LandingPage/">View Demo</a>
+    <a href="https://slice-js-docs.vercel.app/">View Demo</a>
     ·
     <a href="https://github.com/VKneider/slice.js/issues/new?labels=bug&template=bug-report---.md">Report Bug</a>
     ·
@@ -77,7 +77,7 @@
 <!-- ABOUT THE PROJECT -->
 ## About The Project
 
-[![Product Name Screen Shot][product-screenshot]](https://slice-js.vercel.app/src/App/LandingPage/)
+[![Product Name Screen Shot][product-screenshot]](https://slice-js-docs.vercel.app/)
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 
@@ -87,30 +87,21 @@
 This is an example of how you may give instructions on setting up your project locally.
 To get a local copy up and running follow these simple example steps.
 
-### Prerequisites
-
-This is an example of how to list things you need to use the software and how to install them.
-* npm
-  ```sh
-  npm install npm@latest -g
-  ```
-
 ### Installation
 
 _Below is an example of how you can instruct your audience on installing and setting up your app. This template doesn't rely on any external dependencies or services._
 
-1. Get a free API Key at [https://example.com](https://example.com)
-2. Clone the repo
+1. Install slicejs cli dependencies
    ```sh
-   git clone https://github.com/your_username_/Project-Name.git
+   npm i slicejs-cli
    ```
-3. Install NPM packages
+2. Initialize slice project
    ```sh
-   npm install
+   npm run slice:init
    ```
-4. Enter your API in `config.js`
-   ```js
-   const API_KEY = 'ENTER YOUR API';
+3. Start web server
+   ```sh
+   npm run slice:start
    ```
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
@@ -121,12 +112,9 @@ _Below is an example of how you can instruct your audience on installing and set
 ## Roadmap
 
 - [x] Add Changelog
-- [x] Add Image visual component
-- [ ] Add Router structural component
-- [ ] Add "components" document to easily copy & paste sections of the readme
-- [ ] Multi-language Support
-    - [ ] Chinese
-    - [ ] Spanish
+- [ ] Add Image visual component
+- [ ] Modify Slice Card Visual Component
+- [ ] Create internationalization Translator Service component.
 
 See the [open issues](https://github.com/VKneider/slice.js/issues) for a full list of proposed features (and known issues).
 
@@ -137,16 +125,7 @@ See the [open issues](https://github.com/VKneider/slice.js/issues) for a full li
 <!-- CONTRIBUTING -->
 ## Contributing
 
-Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
-
-If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".
-Don't forget to give the project a star! Thanks again!
-
-1. Fork the Project
-2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
-3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
-4. Push to the Branch (`git push origin feature/AmazingFeature`)
-5. Open a Pull Request
+We welcome contributions to the project! Please make sure to review the guidelines in the [CONTRIBUTING.md](docs/CONTRIBUTING.md) file before submitting any changes.
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 
@@ -159,21 +138,6 @@ Distributed under the MIT License. See `LICENSE` for more information.
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 
-
-
-<!-- CONTACT -->
-## Contact
-
-Your Name - [@your_twitter](https://twitter.com/your_username) - email@example.com
-
-Project Link: [https://github.com/VKneider/slice.js](https://github.com/VKneider/slice.js)
-
-<p align="right">(<a href="#readme-top">back to top</a>)</p>
-
-
-
-
-
 <!-- MARKDOWN LINKS & IMAGES -->
 <!-- https://www.markdownguide.org/basic-syntax/#reference-style-links -->
 [contributors-shield]: https://img.shields.io/github/contributors/VKneider/slice.js.svg?style=for-the-badge
@@ -189,19 +153,4 @@ Project Link: [https://github.com/VKneider/slice.js](https://github.com/VKneider
 [linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge&logo=linkedin&colorB=555
 [linkedin-url]: https://linkedin.com/in/VKneider
 [product-screenshot]: readme_images/screenshot.JPG
-[Next.js]: https://img.shields.io/badge/next.js-000000?style=for-the-badge&logo=nextdotjs&logoColor=white
-[Next-url]: https://nextjs.org/
-[React.js]: https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB
-[React-url]: https://reactjs.org/
-[Vue.js]: https://img.shields.io/badge/Vue.js-35495E?style=for-the-badge&logo=vuedotjs&logoColor=4FC08D
-[Vue-url]: https://vuejs.org/
-[Angular.io]: https://img.shields.io/badge/Angular-DD0031?style=for-the-badge&logo=angular&logoColor=white
-[Angular-url]: https://angular.io/
-[Svelte.dev]: https://img.shields.io/badge/Svelte-4A4A55?style=for-the-badge&logo=svelte&logoColor=FF3E00
-[Svelte-url]: https://svelte.dev/
-[Laravel.com]: https://img.shields.io/badge/Laravel-FF2D20?style=for-the-badge&logo=laravel&logoColor=white
-[Laravel-url]: https://laravel.com
-[Bootstrap.com]: https://img.shields.io/badge/Bootstrap-563D7C?style=for-the-badge&logo=bootstrap&logoColor=white
-[Bootstrap-url]: https://getbootstrap.com
-[JQuery.com]: https://img.shields.io/badge/jQuery-0769AD?style=for-the-badge&logo=jquery&logoColor=white
-[JQuery-url]: https://jquery.com 
+

package/Slice/Components/Structural/Debugger/Debugger.js

@@ -9,11 +9,127 @@ export default class Debugger extends HTMLElement {
    }
 
    async enableDebugMode() {
-      const html = await slice.controller.fetchText('Debugger', true, true, "/Slice/Components/Structural/Debugger/Debugger.html" );
+      //const html = await slice.controller.fetchText('Debugger', true, true, "/Slice/Components/Structural/Debugger/Debugger.html" );
+
+      const html = `
+      <div id="debugger-container">
+  <div class="debugger-header">
+    <div id="close-debugger">[×]</div>
+    <h3>Component Details</h3>
+  </div>
+  <div id="component-details">
+    <ul class="component-details-list"></ul>
+    <div class="component-details-table"></div>
+  </div>
+</div>`
+
+
+
+
+
       this.innerHTML = html;
-      const css = await slice.controller.fetchText('Debugger', true, true, "/Slice/Components/Structural/Debugger/Debugger.css" );
+      //const css = await slice.controller.fetchText('Debugger', true, true, "/Slice/Components/Structural/Debugger/Debugger.css");
+      const css = `
+         #debugger-container {
+  font-family: var(--font-family);
+  display: none;
+  position: fixed;
+  top: 20px;
+  left: 20px;
+  padding: 10px;
+  border: var(--slice-border) solid var(--primary-color);
+  background-color: var(--primary-background-color);
+  z-index: 1000;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+}
+
+#debugger-container.active {
+  display: block;
+}
+
+.slice_thead td {
+  font-weight: bold;
+  background-color: var(--primary-color);
+  color: var(--primary-color-contrast);
+}
+
+#close-debugger {
+  cursor: pointer;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  font-size: 14px;
+  color: var(--danger-color);
+}
+
+h3 {
+  color: var(--primary-color);
+  margin-bottom: 10px;
+}
+
+#component-details {
+  color: var(--font-primary-color);
+}
+.component-details-table {
+  overflow: scroll;
+  input {
+    outline: none;
+    border-bottom: 1px solid var(--tertiary-background-color);
+  }
+}
+.component-details-table::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+}
+.component-details-table::-webkit-scrollbar-thumb {
+  background: var(--secondary-color);
+  border-radius: var(--border-radius-slice);
+}
+
+#component-details table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-top: 10px;
+  /* border: 1px solid var(--primary-color); */
+}
+
+.debugger-header {
+  border-bottom: 1px solid var(--primary-color);
+  user-select: none;
+  cursor: grab;
+}
+
+.debugger-header:active {
+  cursor: grabbing;
+}
+
+#component-details th,
+#component-details td {
+  padding: 10px;
+  text-align: left;
+  border-bottom: 1px solid var(--primary-color);
+}
+
+input {
+  border: 0px;
+}
+
+.slice_component-details td,
+input {
+  background-color: var(--secondary-background-color);
+  color: var(--font-primary-color);
+}
+
+/* Estilo para las filas impares, solo para mejorar la legibilidad */
+#component-details tr:nth-child(odd) {
+  background-color: #f9f9f9;
+}
+
+      `
+
       slice.stylesManager.registerComponentStyles('Debugger', css);
-      
+
       this.debuggerContainer = this.querySelector('#debugger-container');
       this.closeDebugger = this.querySelector('#close-debugger');
       this.componentDetails = this.querySelector('#component-details');

package/package.json

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

package/src/Components/AppComponents/HomePage/HomePage.css

@@ -31,6 +31,8 @@ slice-home-page {
 .hero-logo {
   max-width: 150px;
   height: auto;
+  /* Convertir el logo a una silueta */
+  filter: brightness(0) drop-shadow(0 0 8px var(--primary-color));
 }
 
 .hero-title {