slicejs-cli 1.0.54 → 1.0.56

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

@@ -1,95 +0,0 @@
-#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;
-}

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

@@ -1,10 +0,0 @@
-<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>

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

@@ -1,250 +0,0 @@
-import sliceConfig from "../../../sliceConfig.json" assert { type: "json" };
-
-export default class Debugger extends HTMLElement {
-  constructor() {
-    super();
-    this.toggleClick = sliceConfig.debugger.click;
-    this.toggle = "click";
-    this.selectedComponentSliceId = null;
-    this.isActive = false;
-  }
-
-  async enableDebugMode() {
-    const html = await slice.controller.fetchText("Debugger", "html");
-    this.innerHTML = html;
-    const css = await slice.controller.fetchText("Debugger", "css");
-    slice.stylesManager.registerComponentStyles("Debugger", css);
-
-    this.debuggerContainer = this.querySelector("#debugger-container");
-    this.closeDebugger = this.querySelector("#close-debugger");
-    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.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();
-
-    slice.logger.logInfo("Logger", "Debug mode enabled");
-    return true;
-  }
-
-  attachDebugMode(component) {
-    if (this.toggleClick === "right") {
-      this.toggle = "contextmenu";
-    } else {
-      this.toggle = "click";
-    }
-    component.addEventListener(this.toggle, (event) =>
-      this.handleDebugClick(event, component)
-    );
-  }
-
-  makeDraggable() {
-    let offset = {
-      x: 0,
-      y: 0,
-    };
-    let isDragging = false;
-
-    const header = this.querySelector(".debugger-header");
-
-    header.addEventListener("mousedown", (event) => {
-      isDragging = true;
-      offset.x =
-        event.clientX - this.debuggerContainer.getBoundingClientRect().left;
-      offset.y =
-        event.clientY - this.debuggerContainer.getBoundingClientRect().top;
-    });
-
-    document.addEventListener("mousemove", (event) => {
-      if (isDragging) {
-        const x = event.clientX - offset.x;
-        const y = event.clientY - offset.y;
-
-        this.debuggerContainer.style.left = `${x}px`;
-        this.debuggerContainer.style.top = `${y}px`;
-      }
-    });
-
-    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,
-      ComponentProps: {},
-    };
-    this.selectedComponentSliceId = component.sliceId; // Almacena el sliceId del componente seleccionado
-
-    const realComponentProps = component.debuggerProps;
-
-    realComponentProps.forEach((attr) => {
-      if (component[attr] === undefined) {
-        componentDetails.ComponentProps[attr] = component[`_${attr}`];
-      } else {
-        componentDetails.ComponentProps[attr] = component[attr];
-      }
-    });
-
-    this.showComponentDetails(componentDetails);
-  }
-
-  showComponentDetails(details) {
-    this.componentDetailsList.innerHTML = "";
-
-    Object.entries(details).forEach(([key, value]) => {
-      if (key === "ComponentProps") return;
-      const listItem = document.createElement("li");
-      listItem.textContent = `${key}: ${value}`;
-      this.componentDetailsList.appendChild(listItem);
-    });
-
-    const ComponentPropsWithValues = this.getAttributesWithValues(
-      details.ComponentProps
-    );
-
-    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");
-
-    const titleElement = document.createElement("h4");
-    titleElement.textContent = title;
-    tableContainer.appendChild(titleElement);
-
-    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);
-    const headerCell2 = headerRow.insertCell(1);
-
-    headerCell1.textContent = "Attribute";
-    headerCell2.textContent = "Value";
-
-    attributes.forEach((attr) => {
-      const row = tbody.insertRow();
-      const cell1 = row.insertCell(0);
-      const cell2 = row.insertCell(1);
-
-      cell1.textContent = 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.componentDetailsTable.appendChild(tableContainer);
-  }
-
-  getAttributesWithValues(attributes) {
-    return Object.keys(attributes).filter((attr) => attributes[attr] !== null);
-  }
-
-  getAttributesWithoutValues(attributes) {
-    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");
-  }
-}
-
-customElements.define("slice-debugger", Debugger);

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

@@ -1,10 +0,0 @@
-export default class Log {
-    constructor(logType, componentCategory, componentSliceId, message, error = null) {
-        this.logType = logType;
-        this.componentCategory = componentCategory;
-        this.componentSliceId = componentSliceId;
-        this.message = message;
-        this.error = error;
-        this.timestamp = new Date();
-    }
-}

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

@@ -1,112 +0,0 @@
-import Log from "./Log.js";
-import sliceConfig from "../../../sliceConfig.json" assert { type: "json" };
-
-
-export default class Logger {
-    constructor() {
-        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) {
-                        case "console":
-                            switch (logType) {
-                                case logTypes.ERROR:
-                                    console.error(`\x1b[31mERROR\x1b[0m - ${log.componentCategory} - ${log.componentSliceId} - ${log.message} - ${log.error}`);
-                                    break;
-                                case logTypes.WARNING:
-                                    console.warn(`\x1b[33m⚠ WARNING\x1b[0m - ${log.componentCategory} - ${log.componentSliceId} - ${log.message}`);
-                                    break;
-                                case logTypes.INFO:
-                                    console.log(`\x1b[32m✔ INFO\x1b[0m - ${log.componentCategory} - ${log.componentSliceId} - ${log.message}`);
-                                    break;
-                                default:
-                                    console.log(`\x1b[37mUNKNOWN\x1b[0m - ${log.componentCategory} - ${log.componentSliceId} - ${log.message}`);
-                            }
-                            break;
-                        case "toast":
-                            // TODO: Implement displaying a ToastAlert with the log message for each log type
-                            break;
-                    }
-                }
-            });
-        }
-
-
-    }
-
-    createLog(logType, componentSliceId, message, error = null) {
-        if (!this.logEnabled) return;
-        let componentName;
-
-        try {
-            componentName = slice.controller.activeComponents.get(componentSliceId).constructor.name
-        } catch (error) {
-            componentName = componentSliceId;
-        }
-
-
-        let componentCategory = slice.controller.getComponentCategory(componentName);
-        if (componentSliceId === "Slice") componentCategory = "Structural"
-        const log = new Log(logType, componentCategory, componentSliceId, message, error);
-        this.logs.push(log);
-        this.showLog(log);
-    }
-
-
-
-    logError(componentSliceId, message, error) {
-        this.createLog(logTypes.ERROR, componentSliceId, message, error);
-    }
-
-    logWarning(componentSliceId, message) {
-        this.createLog(logTypes.WARNING, componentSliceId, message);
-    }
-
-    logInfo(componentSliceId, message) {
-        this.createLog(logTypes.INFO, componentSliceId, message);
-    }
-
-    getLogs() {
-        return this.logs;
-    }
-
-    clearLogs() {
-        this.logs = [];
-    }
-
-    getLogsByLogType(type) {
-        return this.logs.filter(log => log.logType === type);
-    }
-
-    getLogsByComponentCategory(componentCategory) {
-        return this.logs.filter(log => log.componentCategory === componentCategory);
-    }
-
-    getLogsByComponent(componentSliceId) {
-        return this.logs.filter(log => log.componentSliceId === componentSliceId);
-    }
-
-
-
-
-}
-
-
-// En esta misma idea, se tiene que tomar en cuenta que el componente de ToastAlert será un toastProvider y que solo debe
-// haber un toastProvider en la página, por lo que se debe implementar un Singleton para el ToastProvider
-
-
-
-const logTypes = {
-    ERROR: 'error',
-    WARNING: 'warning',
-    INFO: 'info'
-};

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

@@ -1,52 +0,0 @@
-export default class CustomStylesComponent {
-  constructor() {
-    this.styles = document.createElement('style');
-    document.head.appendChild(this.styles);
-    this.cachedStyles = new Set();
-  }
-
-  async proccess(instance,props){
-    
-    const { customCSS } = props;
-    if(customCSS.url){
-      await this.loadStyles(customCSS.url);
-    }
-    if(customCSS.classNames){
-      
-      this.removeClasses(instance);
-      await this.applyStyles(instance, customCSS.classNames);
-    }
-
-  }
-
-  async loadStyles(url) {
-    if (!this.cachedStyles.has(url)) {
-      try {
-        const response = await fetch(url);
-        const cssText = await response.text();
-
-        // Almacenar en caché el estilo
-        this.cachedStyles.add(url);
-
-        // Agregar los estilos del archivo CSS personalizado a la propiedad "styles"
-        this.styles.appendChild(document.createTextNode(cssText));
-      } catch (error) {
-        console.error(`Error al cargar el estilo personalizado: ${url}`, error);
-      }
-    }
-  }
-
-  async applyStyles(instance, classNames) {    
-    classNames.forEach(className => {
-      instance.classList.add(className);
-    });
-  }
-    
-    removeClasses(instance){
-      while (instance.classList.length > 0) {
-        instance.classList.remove(instance.classList.item(0));
-      }
-    }
-
-  
-}

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

@@ -1,42 +0,0 @@
-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();
-  }
-
-  async init() {
-    const sliceStyles = await slice.controller.fetchText(
-      "sliceStyles",
-      "styles"
-    );
-    this.componentStyles.innerText += sliceStyles;
-    slice.logger.logInfo("StylesManager", "sliceStyles loaded");
-  }
-
-  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/Structural/StylesManager/ThemeManager/ThemeManager.js

@@ -1,25 +0,0 @@
-export default class ThemeManager {
-  constructor() {
-    this.currentThemeLink = null;
-  }
-
-  async applyTheme(themeName) {
-    // Eliminar el tema actual
-    this.removeCurrentTheme();
-
-    // Crear un nuevo link y agregarlo al head
-    const themeLink = document.createElement("link");
-    themeLink.setAttribute("rel", "stylesheet");
-    themeLink.setAttribute("href", `Slice/${slice.paths.themes}/${themeName}.css`);
-    document.head.appendChild(themeLink);
-
-    // Establecer el nuevo link como el tema actual
-    this.currentThemeLink = themeLink;
-  }
-
-  removeCurrentTheme() {
-    if (this.currentThemeLink) {
-      this.currentThemeLink.parentNode.removeChild(this.currentThemeLink);
-    }
-  }
-}

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

@@ -1,44 +0,0 @@
-.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

@@ -1,5 +0,0 @@
-<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

@@ -1,39 +0,0 @@
-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);