slicejs-cli 1.0.45 → 1.0.47

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

@@ -1,11 +1,12 @@
 import sliceConfig from "../../../sliceConfig.json" assert { type: "json" };
 
 export default class Debugger extends HTMLElement {
-  constructor(slice) {
+  constructor() {
     super();
-    this.enabled = sliceConfig.debugger.enabled;
     this.toggleClick = sliceConfig.debugger.click;
     this.toggle = "click";
+    this.selectedComponentSliceId = null;
+    this.isActive = false;
   }
 
   async enableDebugMode() {
@@ -16,9 +17,25 @@ export default class Debugger extends HTMLElement {
 
     this.debuggerContainer = this.querySelector("#debugger-container");
     this.closeDebugger = this.querySelector("#close-debugger");
-    this.componentDetailsList = this.querySelector("#component-details");
+    this.componentDetails = this.querySelector("#component-details");
+    this.componentDetailsTable = this.querySelector(".component-details-table");
+    this.componentDetailsList = this.querySelector(".component-details-list");
 
-    this.closeDebugger.addEventListener("click", () => this.hideDebugger());
+    this.closeDebugger.addEventListener("click", () => {
+      this.hideDebugger();
+      this.isActive = false;
+    });
+
+    this.debuggerContainer.addEventListener("keypress", (event) => {
+      if (event.key === "Enter") {
+        this.applyChanges();
+      }
+    });
+
+    this.applyChangesButton = await slice.build("Button", {
+      value: "Apply Changes",
+      onClickCallback: () => this.applyChanges(),
+    });
 
     // Arrastrar y soltar
     this.makeDraggable();
@@ -38,98 +55,100 @@ export default class Debugger extends HTMLElement {
     );
   }
 
-  // VISUAL
-
   makeDraggable() {
-    let offsetX, offsetY;
+    let offset = {
+      x: 0,
+      y: 0,
+    };
     let isDragging = false;
 
-    this.debuggerContainer.addEventListener("mousedown", (event) => {
+    const header = this.querySelector(".debugger-header");
+
+    header.addEventListener("mousedown", (event) => {
       isDragging = true;
-      offsetX =
+      offset.x =
         event.clientX - this.debuggerContainer.getBoundingClientRect().left;
-      offsetY =
+      offset.y =
         event.clientY - this.debuggerContainer.getBoundingClientRect().top;
     });
 
     document.addEventListener("mousemove", (event) => {
       if (isDragging) {
-        const x = event.clientX - offsetX;
-        const y = event.clientY - offsetY;
+        const x = event.clientX - offset.x;
+        const y = event.clientY - offset.y;
 
         this.debuggerContainer.style.left = `${x}px`;
         this.debuggerContainer.style.top = `${y}px`;
       }
     });
 
-    document.addEventListener("mouseup", () => {
+    header.addEventListener("mouseup", () => {
       isDragging = false;
     });
   }
 
   handleDebugClick(event, component) {
     event.preventDefault();
+
+    if (event.clientX > window.screen.width / 2) {
+      this.debuggerContainer.style.left = `calc(${event.clientX}px - 25%)`;
+    } else {
+      this.debuggerContainer.style.left = `${event.clientX}px`;
+    }
+
+    if (event.clientY > window.screen.height / 2) {
+      this.debuggerContainer.style.top = `calc(${event.clientY}px - 75%)`;
+    } else {
+      this.debuggerContainer.style.top = `${event.clientY}px`;
+    }
+
     const sliceId = component.sliceId;
+    this.isActive = true;
 
     const componentDetails = {
       SliceId: sliceId,
       ClassName: component.constructor.name,
-      ObservedAttributes: {},
+      ComponentProps: {},
     };
+    this.selectedComponentSliceId = component.sliceId; // Almacena el sliceId del componente seleccionado
 
     const realComponentProps = component.debuggerProps;
 
     realComponentProps.forEach((attr) => {
-      //verify if the attr doesnt exist in the component, assign the value of _attr
       if (component[attr] === undefined) {
-        componentDetails.ObservedAttributes[attr] = component[`_${attr}`];
+        componentDetails.ComponentProps[attr] = component[`_${attr}`];
       } else {
-        componentDetails.ObservedAttributes[attr] = component[attr];
+        componentDetails.ComponentProps[attr] = component[attr];
       }
     });
 
-    // Mostrar observedAttributes y sus valores
     this.showComponentDetails(componentDetails);
   }
 
   showComponentDetails(details) {
     this.componentDetailsList.innerHTML = "";
 
-    // Mostrar información general
     Object.entries(details).forEach(([key, value]) => {
+      if (key === "ComponentProps") return;
       const listItem = document.createElement("li");
       listItem.textContent = `${key}: ${value}`;
       this.componentDetailsList.appendChild(listItem);
     });
 
-    // Mostrar observedAttributes y sus valores
-    const observedAttributesWithValues = this.getAttributesWithValues(
-      details.ObservedAttributes
-    );
-    const observedAttributesWithoutValues = this.getAttributesWithoutValues(
-      details.ObservedAttributes
+    const ComponentPropsWithValues = this.getAttributesWithValues(
+      details.ComponentProps
     );
 
-    if (observedAttributesWithValues.length > 0) {
-      this.createTable(
-        "Attributes with Values",
-        observedAttributesWithValues,
-        details
-      );
-    }
-
-    if (observedAttributesWithoutValues.length > 0) {
-      this.createTable(
-        "Attributes without Values",
-        observedAttributesWithoutValues,
-        details
-      );
+    if (ComponentPropsWithValues.length > 0) {
+      this.createTable("", ComponentPropsWithValues, details);
     }
 
     this.debuggerContainer.classList.add("active");
+    this.debuggerContainer.appendChild(this.applyChangesButton); // Agregar el botón al debugger
   }
 
   createTable(title, attributes, details) {
+    this.componentDetailsTable.innerHTML = "";
     const tableContainer = document.createElement("div");
     tableContainer.classList.add("table-container");
 
@@ -140,6 +159,8 @@ export default class Debugger extends HTMLElement {
     const table = document.createElement("table");
     const thead = table.createTHead();
     const tbody = table.createTBody();
+    thead.classList.add("slice_thead");
+    tbody.classList.add("slice_component-details");
 
     const headerRow = thead.insertRow();
     const headerCell1 = headerRow.insertCell(0);
@@ -154,11 +175,23 @@ export default class Debugger extends HTMLElement {
       const cell2 = row.insertCell(1);
 
       cell1.textContent = attr;
-      cell2.textContent = details.ObservedAttributes[attr];
+
+      // Crear un elemento editable para la celda de valor
+      const valueInput = document.createElement("input");
+      valueInput.value = details.ComponentProps[attr]; // Asignar el valor actual
+      if (typeof details.ComponentProps[attr] === "function") {
+        valueInput.disabled = true;
+      }
+      cell2.appendChild(valueInput);
+
+      // Agregar evento de doble clic para permitir la edición
+      cell2.addEventListener("dblclick", () => {
+        valueInput.readOnly = false;
+      });
     });
 
     tableContainer.appendChild(table);
-    this.componentDetailsList.appendChild(tableContainer);
+    this.componentDetailsTable.appendChild(tableContainer);
   }
 
   getAttributesWithValues(attributes) {
@@ -169,6 +202,46 @@ export default class Debugger extends HTMLElement {
     return Object.keys(attributes).filter((attr) => attributes[attr] === null);
   }
 
+  applyChanges() {
+    const inputCells = this.componentDetailsTable.querySelectorAll("td input");
+    const selectedComponent = slice.controller.getComponent(
+      this.selectedComponentSliceId
+    );
+    inputCells.forEach((inputCell) => {
+      const attributeName =
+        inputCell.parentElement.previousElementSibling.textContent;
+      let newValue = inputCell.value;
+      const oldValue = slice.controller.getComponent(
+        this.selectedComponentSliceId
+      )[attributeName];
+
+      // Verificar si el valor anterior y el nuevo valor son iguales como cadenas
+      if (String(newValue) !== String(oldValue)) {
+        //Verificar si es funcion para que no lo vuelva a guardar sin cambios
+        /*
+        if (typeof selectedComponent[attributeName] === 'function') {
+          try {
+            newValue = eval(`(${newValue})`);
+          } catch (error) {
+            console.error(`Error al analizar la función: ${error}`);
+            return;
+          }
+        }
+*/
+        if (typeof selectedComponent[attributeName] === "function") {
+          return;
+        }
+        console.log(
+          `Changing ${attributeName} from ${oldValue} to ${newValue}`
+        );
+        if (newValue === "true") newValue = true;
+        if (newValue === "false") newValue = false;
+
+        selectedComponent[attributeName] = newValue;
+      }
+    });
+  }
+
   hideDebugger() {
     this.debuggerContainer.classList.remove("active");
   }

package/PROJECT_TEMPLATES/Basic/Slice/Components/Structural/Logger/Logger.js

@@ -7,12 +7,12 @@ export default class Logger {
         this.logs = [];
         this.logEnabled = sliceConfig.logger.enabled;
         this.showLogsConfig = sliceConfig.logger.showLogs;
-        
+
         this.showLog = function showLog(log) {
             if (!this.showLogsConfig) return;
-        
+
             const logType = log.logType;
-            
+
             Object.keys(this.showLogsConfig).forEach(logConfig => {
                 if (this.showLogsConfig[logConfig][logType] === true) {
                     switch (logConfig) {
@@ -38,7 +38,7 @@ export default class Logger {
                 }
             });
         }
-        
+
 
     }
 
@@ -47,14 +47,14 @@ export default class Logger {
         let componentName;
 
         try {
-           componentName = slice.controller.activeComponents.get(componentSliceId).constructor.name
+            componentName = slice.controller.activeComponents.get(componentSliceId).constructor.name
         } catch (error) {
-           componentName = componentSliceId;
+            componentName = componentSliceId;
         }
 
-        
+
         let componentCategory = slice.controller.getComponentCategory(componentName);
-        if(componentSliceId === "Slice") componentCategory = "Structural"
+        if (componentSliceId === "Slice") componentCategory = "Structural"
         const log = new Log(logType, componentCategory, componentSliceId, message, error);
         this.logs.push(log);
         this.showLog(log);
@@ -82,11 +82,11 @@ export default class Logger {
         this.logs = [];
     }
 
-    getLogsByType(type) {
+    getLogsByLogType(type) {
         return this.logs.filter(log => log.logType === type);
     }
 
-    getLogsByCategory(componentCategory) {
+    getLogsByComponentCategory(componentCategory) {
         return this.logs.filter(log => log.componentCategory === componentCategory);
     }
 
@@ -94,7 +94,7 @@ export default class Logger {
         return this.logs.filter(log => log.componentSliceId === componentSliceId);
     }
 
-   
+
 
 
 }

package/PROJECT_TEMPLATES/Basic/Slice/Components/Structural/StylesManager/StylesManager.js

@@ -1,38 +1,42 @@
-import CustomStylesManager from "./CustomStylesManager/CustomStylesManager.js"
-import ThemeManager from "./ThemeManager/ThemeManager.js"
+import CustomStylesManager from "./CustomStylesManager/CustomStylesManager.js";
+import ThemeManager from "./ThemeManager/ThemeManager.js";
 
 export default class StylesManager {
-    constructor() {
-      this.componentStyles = document.createElement("style");
-      this.componentStyles.id = "slice-component-styles";
-      document.head.appendChild(this.componentStyles);
-      
-      this.customStylesManager = new CustomStylesManager();
-      this.themeManager = new ThemeManager();
-    }  
+  constructor() {
+    this.componentStyles = document.createElement("style");
+    this.componentStyles.id = "slice-component-styles";
+    document.head.appendChild(this.componentStyles);
 
-    handleInstanceStyles(instance, props) {
-      if(props.customCSS){
-        this.customStylesManager.proccess(instance, props); 
-      }
-    }
-
-    setTheme(themeName){
-      this.themeManager.applyTheme(themeName);
-    }
+    this.customStylesManager = new CustomStylesManager();
+    this.themeManager = new ThemeManager();
+  }
 
-    //add a method that will add css as text to the componentStyles element
-    appendComponentStyles(cssText) {
-      this.componentStyles.appendChild(document.createTextNode(cssText));
-    }
+  async init() {
+    const sliceStyles = await slice.controller.fetchText(
+      "sliceStyles",
+      "styles"
+    );
+    this.componentStyles.innerText += sliceStyles;
+    slice.logger.logInfo("StylesManager", "sliceStyles loaded");
+  }
 
-    registerComponentStyles(componentName, cssText) {
-      slice.controller.requestedStyles.add(componentName);
-      this.appendComponentStyles(cssText);
+  handleInstanceStyles(instance, props) {
+    if (props.customCSS) {
+      this.customStylesManager.proccess(instance, props);
     }
+  }
 
+  setTheme(themeName) {
+    this.themeManager.applyTheme(themeName);
+  }
 
+  //add a method that will add css as text to the componentStyles element
+  appendComponentStyles(cssText) {
+    this.componentStyles.appendChild(document.createTextNode(cssText));
+  }
 
-
+  registerComponentStyles(componentName, cssText) {
+    slice.controller.requestedStyles.add(componentName);
+    this.appendComponentStyles(cssText);
   }
-  
+}

package/PROJECT_TEMPLATES/Basic/Slice/Components/Visual/Button/Button.css

@@ -0,0 +1,44 @@
+.slice_button_container {
+  padding: 10px;
+}
+.slice_button_value {
+  user-select: none;
+  cursor: pointer;
+}
+.slice_button {
+  cursor: pointer;
+  overflow: hidden;
+  position: relative;
+  max-width: fit-content;
+  background-color: var(--primary-color);
+  color: var(--primary-color-contrast);
+  border-radius: var(--border-radius-slice);
+  border: var(--slice-border) solid var(--primary-color);
+  font-weight: 800;
+  min-width: 100%;
+  padding: 10px 0;
+  -webkit-transition-duration: 0.4s; /* Safari */
+  transition-duration: 0.4s;
+}
+.slice_button:after {
+  content: "";
+  width: 100%;
+  height: 100%;
+  border-radius: 100%;
+  background: #ffffff50;
+  position: absolute;
+  display: block;
+  opacity: 0;
+  scale: 10;
+  transition: all 1s;
+}
+.slice_button:active {
+  transform: translateY(5px);
+}
+.slice_button:active:after {
+  scale: 0;
+  padding: 0;
+  margin: 0;
+  opacity: 1;
+  transition: 0s;
+}

package/PROJECT_TEMPLATES/Basic/Slice/Components/Visual/Button/Button.html

@@ -0,0 +1,5 @@
+<div class="slice_button_container">
+  <button class="slice_button">
+    <label class="slice_button_value"></label>
+  </button>
+</div>

package/PROJECT_TEMPLATES/Basic/Slice/Components/Visual/Button/Button.js

@@ -0,0 +1,39 @@
+export default class Button extends HTMLElement {
+  constructor(props) {
+    super();
+    slice.attachTemplate(this);
+    this.$value = this.querySelector(".slice_button_value");
+    this.$button = this.querySelector(".slice_button");
+    if (props.onClickCallback) {
+      this.onClickCallback = props.onClickCallback;
+      this.$button.addEventListener("click", () => this.onClickCallback());
+      //revisar esta verga por si habria q deletear o no
+    }
+
+    slice.controller.setComponentProps(this, props);
+    this.debuggerProps = ["value", "onClickCallback", "customColor"];
+  }
+
+  get value() {
+    return this._value;
+  }
+
+  set value(value) {
+    this._value = value;
+    this.$value.textContent = value;
+  }
+
+  get customColor() {
+    return this._customColor;
+  }
+
+  set customColor(value) {
+    this._customColor = value;
+    this.$button.style = `--primary-color: ${value};`;
+  }
+
+  handleButtonClick() {
+    this.onClickCallback();
+  }
+}
+window.customElements.define("slice-button", Button);

package/PROJECT_TEMPLATES/Basic/Slice/Components/Visual/Card/Card.css

@@ -0,0 +1,63 @@
+.title {
+  font-size: 20px;
+  font-weight: bold;
+  color: var(--font-primary-color);
+  text-align: center;
+}
+
+.slice-card {
+  width: 300px;
+  position: relative;
+  font-family: var(--font-family);
+  transition: all 300ms;
+}
+
+.slice-card:hover {
+  .card_cover {
+    transform: translateY(-90%);
+    box-shadow: 0px 10px 10px #00000050;
+  }
+  .card_info {
+    /* transform: translateY(20%); */
+    box-shadow: 0px -10px 10px #00000050;
+  }
+}
+
+.card_cover {
+  width: 100%;
+  height: 220px;
+  background: var(--primary-color);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  z-index: 1;
+  transition: all 400ms ease;
+  border-radius: var(--border-radius-slice);
+}
+
+.card_info {
+  width: 100%;
+  margin-top: 20px;
+  height: 220px;
+  color: var(--font-secondary-color);
+  background: var(--secondary-background-color);
+  position: absolute;
+  font-size: 20px;
+  transition: all 400ms cubic-bezier(0.5, 0, 0, 1);
+  border-radius: var(--border-radius-slice);
+}
+
+.card_info p {
+  padding: 0px 20px 20px 20px;
+  font-size: 20px;
+  display: -webkit-box;
+  display: -moz-box;
+  display: box;
+  -webkit-box-orient: vertical;
+  -moz-box-orient: vertical;
+  box-orient: vertical;
+  -webkit-line-clamp: 5;
+  line-clamp: 5;
+  overflow: hidden;
+}

package/PROJECT_TEMPLATES/Basic/Slice/Components/Visual/Card/Card.html

@@ -0,0 +1,7 @@
+<div class="slice-card">
+  <div class="card_cover"></div>
+  <div class="card_info">
+    <h1 class="title">Slice Card Title</h1>
+    <p class="text">Slice Card text</p>
+  </div>
+</div>

package/PROJECT_TEMPLATES/Basic/Slice/Components/Visual/Card/Card.js

@@ -0,0 +1,110 @@
+export default class Card extends HTMLElement {
+  constructor(props) {
+    super();
+    slice.attachTemplate(this);
+    this.$card = this.querySelector(".slice-card");
+    this.$title = this.querySelector(".title");
+    this.$text = this.querySelector(".text");
+    this.$cover = this.querySelector(".card_cover");
+    slice.controller.setComponentProps(this, props);
+
+    this.$card.addEventListener("click", () => {
+      this.isOpen = !this.isOpen;
+    });
+
+    this.$card.addEventListener("mouseover", () => {
+      this.$cover.style.backgroundColor = this.$color.icon;
+      this.$icon.color = this.$color.card;
+    });
+    this.$card.addEventListener("mouseout", () => {
+      this.$cover.style.backgroundColor = this.$color.card;
+      this.$icon.color = this.$color.icon;
+    });
+
+    this.debuggerProps = ["title", "text", "icon", "customColor", "isOpen"];
+  }
+
+  async init() {
+    if (this.isOpen === undefined) {
+      this.isOpen = false;
+    }
+
+    if (!this.customColor) {
+      this.$color = {
+        icon: "var(--primary-color-contrast)",
+        card: "var(--primary-color)",
+      };
+    }
+
+    if (!this._icon) {
+      this.icon.name = "youtube";
+      this.icon.iconStyle = "filled";
+    }
+
+    this.$icon = await slice.build("Icon", {
+      name: this.icon.name,
+      size: "150px",
+      color: this.$color.icon,
+      iconStyle: this._icon.iconStyle,
+    });
+    this.$cover.appendChild(this.$icon);
+  }
+
+  get title() {
+    return this._title;
+  }
+
+  set title(value) {
+    this._title = value;
+    this.$title.textContent = value;
+  }
+
+  get text() {
+    return this._text;
+  }
+
+  set text(value) {
+    this._text = value;
+    this.$text.textContent = value;
+  }
+
+  get icon() {
+    return this._icon;
+  }
+
+  set icon(value) {
+    this._icon = value;
+    if (!this.$icon) return;
+    this.$icon.name = value.name;
+    this.$icon.iconStyle = value.iconStyle;
+
+
+  }
+
+  get isOpen() {
+    return this._isOpen;
+  }
+
+  set isOpen(boolean) {
+    this._isOpen = boolean;
+    if (boolean) {
+      this.$cover.style.zIndex = 0;
+    } else {
+      this.$cover.style.zIndex = 1;
+    }
+  }
+
+  get customColor() {
+    return this._customColor;
+  }
+
+  set customColor(value) {
+    this._customColor = value;
+    this.$color = value;
+    if (value.card) {
+      this.$cover.style.backgroundColor = value.card;
+    }
+  }
+}
+
+customElements.define("slice-card", Card);