slicejs-web-framework 3.1.1 → 3.1.3

package/.worktrees/public-env-browser-exposure/src/Components/Visual/Card/Card.js

@@ -1,107 +0,0 @@
-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.$cover.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: 'sliceJs', 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);

package/.worktrees/public-env-browser-exposure/src/Components/Visual/Checkbox/Checkbox.css

@@ -1,87 +0,0 @@
-.slice_checkbox input {
-  position: absolute;
-  opacity: 0;
-  cursor: pointer;
-  height: 0;
-  width: 0;
-}
-
-.slice_checkbox_container {
-  width: fit-content;
-}
-.slice_checkbox {
-  display: flex;
-  align-items: center;
-  user-select: none;
-  margin-top: 25px;
-  margin-bottom: 25px;
-  position: relative;
-  user-select: none;
-}
-.checkbox_label {
-  margin: 5px;
-  font-family: var(--font-family);
-  color: var(--font-primary-color);
-}
-.checkmark {
-  position: relative;
-  top: 0;
-  left: 0;
-  height: 1.3em;
-  width: 1.3em;
-  background-color: var(--secondary-background-color);
-  border: var(--slice-border) solid var(--primary-color);
-  transition: all 0.3s;
-  border-radius: var(--border-radius-slice);
-  cursor: pointer;
-}
-.slice_checkbox input:checked ~ .checkmark {
-  border: var(--slice-border) solid var(--success-color);
-  background-color: var(--success-color);
-  animation: pop 0.5s;
-  animation-direction: alternate;
-}
-
-.checkmark:after {
-  content: "";
-  position: absolute;
-  display: none;
-}
-
-.slice_checkbox input:checked ~ .checkmark:after {
-  display: block;
-}
-
-.slice_checkbox .checkmark:after {
-  left: 0.45em;
-  top: 0.25em;
-  width: 0.25em;
-  height: 0.5em;
-  border: solid white;
-  border-width: 0 0.15em 0.15em 0;
-  transform: rotate(45deg);
-}
-.disabled {
-  border-color: var(--disabled-color);
-  background-color: var(--primary-color-shade);
-  color: var(--disabled-color);
-  cursor: not-allowed;
-}
-@keyframes pop {
-  0% {
-    transform: scale(1);
-  }
-
-  50% {
-    transform: scale(0.9);
-  }
-
-  100% {
-    transform: scale(1);
-  }
-}
-.checkbox_label {
-  margin-left: 5px;
-  font-family: var(--font-family);
-  color: var(--font-primary-color);
-}

package/.worktrees/public-env-browser-exposure/src/Components/Visual/Checkbox/Checkbox.html

@@ -1,8 +0,0 @@
-<div class="slice_checkbox_container">
-  <div class="slice_checkbox">
-    <label>
-      <input type="checkbox" />
-      <div class="checkmark"></div>
-    </label>
-  </div>
-</div>

package/.worktrees/public-env-browser-exposure/src/Components/Visual/Checkbox/Checkbox.js

@@ -1,86 +0,0 @@
-export default class Checkbox extends HTMLElement {
-   constructor(props) {
-      super();
-      slice.attachTemplate(this);
-      this.$checkbox = this.querySelector('.slice_checkbox');
-      this.$checkmark = this.querySelector('.checkmark');
-
-      slice.controller.setComponentProps(this, props);
-      this.debuggerProps = ['checked', 'disabled', 'customColor', 'labelPlacement'];
-   }
-
-   init() {
-      if (this._checked === undefined) {
-         this.checked = false;
-      }
-
-      if (!this.disabled) {
-         this._disabled = false;
-      }
-   }
-
-   get checked() {
-      return this._checked;
-   }
-
-   set checked(value) {
-      this._checked = value;
-      this.querySelector('input').checked = value;
-   }
-
-   get label() {
-      return this._label;
-   }
-
-   set label(value) {
-      this._label = value;
-      if (this.querySelector('.checkbox_label')) {
-         this.querySelector('.checkbox_label').textContent = value;
-      } else {
-         const label = document.createElement('label');
-         label.classList.add('checkbox_label');
-         label.textContent = value;
-         this.$checkbox.appendChild(label);
-      }
-   }
-
-   get customColor() {
-      return this._customColor;
-   }
-
-   set customColor(value) {
-      this._customColor = value;
-      this.style = `--success-color: ${value};`;
-   }
-
-   get labelPlacement() {
-      return this._labelPlacement;
-   }
-
-   set labelPlacement(value) {
-      if (value === 'left') {
-         this.$checkbox.style = ` flex-direction: row-reverse;`;
-      }
-      if (value === 'right') {
-         this.$checkbox.style = `flex-direction: row;`;
-      }
-      if (value === 'top') {
-         this.$checkbox.style = `flex-direction: column-reverse;`;
-      }
-      if (value === 'bottom') {
-         this.$checkbox.style = `flex-direction: column;`;
-      }
-   }
-
-   get disabled() {
-      return this._disabled;
-   }
-
-   set disabled(value) {
-      this._disabled = value;
-      this.querySelector('input').disabled = value;
-      this.$checkmark.classList.add('disabled');
-   }
-}
-
-customElements.define('slice-checkbox', Checkbox);

package/.worktrees/public-env-browser-exposure/src/Components/Visual/CodeVisualizer/CodeVisualizer.css

@@ -1,130 +0,0 @@
-slice-codevisualizer {
-  display: block;
-  width: 100%;
-}
-
-.codevisualizer_container {
-  position: relative;
-  font-size: smaller;
-  max-width: 100%;
-  background-color: var(--secondary-background-color);
-  border: 1px solid var(--primary-color);
-  padding: 15px 10px 10px;
-  border-radius: var(--border-radius-slice, 10px);
-  overflow-x: auto;
-  margin: 15px 0;
-}
-
-.codevisualizer pre {
-  margin: 0;
-  padding: 0;
-  font-family: 'Courier New', Courier, monospace;
-  line-height: 1.5;
-  white-space: pre;
-  tab-size: 2;
-}
-
-.codevisualizer code {
-  display: block;
-  color: var(--font-primary-color);
-  overflow-wrap: normal;
-  word-break: normal;
-}
-
-/* Botón de copiar */
-.copy-button {
-  position: absolute;
-  top: 5px;
-  right: 10px;
-  padding: 4px 8px;
-  font-size: 12px;
-  background-color: var(--primary-color);
-  color: var(--primary-color-contrast);
-  border: none;
-  border-radius: var(--border-radius-slice, 4px);
-  cursor: pointer;
-  opacity: 0.7;
-  transition: opacity 0.2s ease, background-color 0.2s ease;
-  z-index: 1;
-}
-
-.copy-button:hover {
-  opacity: 1;
-}
-
-.copy-button.copied {
-  background-color: var(--success-color);
-  color: var(--success-contrast);
-  opacity: 1;
-}
-
-/* Temas para resaltado de sintaxis adaptados a las variables de Slice */
-.codevisualizer .code-keyword {
-  color: var(--primary-color); /* Palabras clave en color primario */
-}
-
-.codevisualizer .code-string {
-  color: var(--success-color); /* Strings en color de éxito */
-}
-
-.codevisualizer .code-number {
-  color: var(--warning-color); /* Números en color de advertencia */
-}
-
-.codevisualizer .code-comment {
-  color: var(--medium-color); /* Comentarios en color medio */
-  font-style: italic;
-}
-
-.codevisualizer .code-function {
-  color: var(--secondary-color); /* Funciones en color secundario */
-}
-
-.codevisualizer .code-method {
-  color: var(--secondary-color); /* Métodos en color secundario */
-}
-
-.codevisualizer .code-builtin {
-  color: var(--secondary-color); /* Objetos integrados en color secundario */
-}
-
-.codevisualizer .code-tag {
-  color: var(--primary-color); /* Tags HTML en color primario */
-}
-
-.codevisualizer .code-attribute {
-  color: var(--warning-color); /* Atributos HTML en color de advertencia */
-}
-
-.codevisualizer .code-selector {
-  color: var(--primary-color); /* Selectores CSS en color primario */
-}
-
-.codevisualizer .code-property {
-  color: var(--secondary-color); /* Propiedades CSS en color secundario */
-}
-
-.codevisualizer .code-value {
-  color: var(--success-color); /* Valores CSS en color de éxito */
-}
-
-.codevisualizer .code-unit {
-  color: var(--warning-color); /* Unidades CSS en color de advertencia */
-}
-
-.codevisualizer .code-color {
-  color: var(--font-primary-color); /* Colores CSS en color primario */
-}
-
-/* Media query para diseño responsivo */
-@media screen and (max-width: 768px) {
-  .codevisualizer_container {
-    font-size: 12px;
-    padding: 25px 8px 8px;
-  }
-  
-  .copy-button {
-    font-size: 10px;
-    padding: 3px 6px;
-  }
-}

package/.worktrees/public-env-browser-exposure/src/Components/Visual/CodeVisualizer/CodeVisualizer.html

@@ -1,4 +0,0 @@
-<div class="codevisualizer_container">
-  <button class="copy-button" title="Copy to clipboard">Copy</button>
-  <pre class="codevisualizer"><code></code></pre>
-</div>

package/.worktrees/public-env-browser-exposure/src/Components/Visual/CodeVisualizer/CodeVisualizer.js

@@ -1,262 +0,0 @@
-export default class CodeVisualizer extends HTMLElement {
-   constructor(props) {
-      super();
-      slice.attachTemplate(this);
-
-      this.$container = this.querySelector('.codevisualizer_container');
-      this.$code = this.querySelector('.codevisualizer');
-      this.$copyButton = this.querySelector('.copy-button');
-
-      // Configurar el botón de copiado
-      this.$copyButton.addEventListener('click', () => this.copyCodeToClipboard());
-
-      slice.controller.setComponentProps(this, props);
-      this.debuggerProps = ['language', 'value'];
-   }
-
-   set value(value) {
-      this._value = value;
-   }
-
-   get value() {
-      return this._value;
-   }
-
-   set language(value) {
-      this._language = value;
-   }
-
-   get language() {
-      return this._language;
-   }
-
-   init() {
-      this.visualizeCode();
-   }
-
-   visualizeCode() {
-      if (this._value && this._language) {
-         const highlightedCode = this.highlightCode(this._value, this._language);
-         this.$code.innerHTML = `<pre><code class="language-${this._language}">${highlightedCode}</code></pre>`;
-      }
-   }
-
-   copyCodeToClipboard() {
-      // Obtenemos el texto sin formato (sin las etiquetas HTML de resaltado)
-      const textToCopy = this._value;
-      
-      // Utilizar el API de clipboard
-      navigator.clipboard.writeText(textToCopy)
-         .then(() => {
-            // Cambiar el texto del botón temporalmente para indicar éxito
-            this.$copyButton.textContent = '✓ Copiado!';
-            this.$copyButton.classList.add('copied');
-            
-            // Restaurar el texto original después de 1.5 segundos
-            setTimeout(() => {
-               this.$copyButton.textContent = 'Copiar';
-               this.$copyButton.classList.remove('copied');
-            }, 1500);
-         })
-         .catch(err => {
-            console.error('Error al copiar al portapapeles: ', err);
-            this.$copyButton.textContent = '❌ Error!';
-            
-            setTimeout(() => {
-               this.$copyButton.textContent = 'Copiar';
-            }, 1500);
-         });
-   }
-
-   highlightCode(code, language) {
-      // Escape HTML to prevent XSS
-      const escapedCode = this.escapeHtml(code);
-      
-      switch (language.toLowerCase()) {
-         case 'javascript':
-         case 'js':
-            return this.highlightJavaScript(escapedCode);
-         case 'html':
-            return this.highlightHtml(escapedCode);
-         case 'css':
-            return this.highlightCss(escapedCode);
-         default:
-            return escapedCode;
-      }
-   }
-
-   escapeHtml(text) {
-      return text
-         .replace(/&/g, '&amp;')
-         .replace(/</g, '&lt;')
-         .replace(/>/g, '&gt;')
-         .replace(/"/g, '&quot;');
-   }
-
-   highlightJavaScript(code) {
-      // Este método fue rediseñado por completo para evitar problemas de superposición
-      let tokenizedCode = code;
-      
-      // Creamos una estructura para almacenar todos los tokens y luego reemplazarlos de una sola vez
-      const tokens = [];
-      
-      // Función para generar un ID único para cada token
-      const generateTokenId = (index) => `__TOKEN_${index}__`;
-      
-      // Función para extraer tokens y reemplazarlos con marcadores
-      const extractTokens = (regex, className) => {
-         tokenizedCode = tokenizedCode.replace(regex, (match) => {
-            const tokenId = generateTokenId(tokens.length);
-            tokens.push({ id: tokenId, content: match, className });
-            return tokenId;
-         });
-      };
-      
-      // Extraer los tokens en orden específico para evitar interferencias
-      
-      // 1. Primero los comentarios
-      extractTokens(/\/\/.*$/gm, 'code-comment');
-      extractTokens(/\/\*[\s\S]*?\*\//g, 'code-comment');
-      
-      // 2. Luego las cadenas de texto
-      extractTokens(/(['"`])(?:\\.|[^\\])*?\1/g, 'code-string');
-      
-      // 3. Luego los números
-      extractTokens(/\b(\d+(?:\.\d+)?)\b/g, 'code-number');
-      
-      // 4. Palabras clave
-      const keywords = [
-         'await', 'async', 'break', 'case', 'catch', 'class', 'const', 'continue',
-         'debugger', 'default', 'delete', 'do', 'else', 'export', 'extends', 'false',
-         'finally', 'for', 'function', 'if', 'import', 'in', 'instanceof', 'new',
-         'null', 'return', 'super', 'switch', 'this', 'throw', 'true', 'try',
-         'typeof', 'var', 'void', 'while', 'with', 'yield', 'let'
-      ];
-      extractTokens(new RegExp(`\\b(${keywords.join('|')})\\b`, 'g'), 'code-keyword');
-      
-      // 5. Objetos y métodos integrados
-      const builtins = [
-         'Array', 'Boolean', 'Date', 'Error', 'Function', 'JSON', 'Math',
-         'Number', 'Object', 'Promise', 'RegExp', 'String', 'console', 'document',
-         'window', 'slice', 'Map', 'Set', 'Symbol', 'setTimeout', 'setInterval'
-      ];
-      extractTokens(new RegExp(`\\b(${builtins.join('|')})\\b`, 'g'), 'code-builtin');
-      
-      // 6. Métodos y llamadas a funciones (esto debe ir después de extraer las palabras clave)
-      extractTokens(/(\.)([a-zA-Z_$][\w$]*)\s*(?=\()/g, 'code-method');
-      
-      // Reemplazar los tokens con el HTML resaltado
-      tokens.forEach(token => {
-         tokenizedCode = tokenizedCode.replace(
-            token.id, 
-            `<span class="${token.className}">${token.content}</span>`
-         );
-      });
-      
-      return tokenizedCode;
-   }
-
-   highlightHtml(code) {
-      // Utilizamos un enfoque similar al de JavaScript para HTML
-      let tokenizedCode = code;
-      const tokens = [];
-      const generateTokenId = (index) => `__TOKEN_${index}__`;
-      
-      const extractTokens = (regex, className) => {
-         tokenizedCode = tokenizedCode.replace(regex, (match) => {
-            const tokenId = generateTokenId(tokens.length);
-            tokens.push({ id: tokenId, content: match, className });
-            return tokenId;
-         });
-      };
-      
-      // Extraer tokens HTML en orden
-      
-      // 1. Comentarios HTML
-      extractTokens(/&lt;!--[\s\S]*?--&gt;/g, 'code-comment');
-      
-      // 2. Etiquetas HTML
-      extractTokens(/(&lt;\/?[a-zA-Z0-9-]+)(\s|&gt;)/g, (match, tag, end) => {
-         const tokenId = generateTokenId(tokens.length);
-         tokens.push({ 
-            id: tokenId, 
-            content: `<span class="code-tag">${tag}</span>${end}`,
-            className: 'no-class' // Ya incluye su propio elemento span
-         });
-         return tokenId;
-      });
-      
-      // 3. Atributos HTML
-      extractTokens(/\s([a-zA-Z0-9-]+)=(&quot;|')/g, (match, attr, quote) => {
-         const tokenId = generateTokenId(tokens.length);
-         tokens.push({ 
-            id: tokenId, 
-            content: ` <span class="code-attribute">${attr}</span>=${quote}`,
-            className: 'no-class' // Ya incluye su propio elemento span
-         });
-         return tokenId;
-      });
-      
-      // Reemplazar los tokens con el HTML resaltado
-      tokens.forEach(token => {
-         tokenizedCode = tokenizedCode.replace(
-            token.id, 
-            token.className === 'no-class' ? token.content : `<span class="${token.className}">${token.content}</span>`
-         );
-      });
-      
-      return tokenizedCode;
-   }
-
-   highlightCss(code) {
-      // Utilizamos el mismo enfoque para CSS
-      let tokenizedCode = code;
-      const tokens = [];
-      const generateTokenId = (index) => `__TOKEN_${index}__`;
-      
-      const extractTokens = (regex, className, processor = null) => {
-         tokenizedCode = tokenizedCode.replace(regex, (match, ...groups) => {
-            const tokenId = generateTokenId(tokens.length);
-            const content = processor ? processor(match, ...groups) : match;
-            tokens.push({ id: tokenId, content, className });
-            return tokenId;
-         });
-      };
-      
-      // Comentarios CSS
-      extractTokens(/\/\*[\s\S]*?\*\//g, 'code-comment');
-      
-      // Selectores CSS
-      extractTokens(/([^\{\}]+)(?=\{)/g, 'code-selector');
-      
-      // Propiedad y valor CSS (manipulando la coincidencia para preservar la estructura)
-      tokenizedCode = tokenizedCode.replace(/(\s*)([a-zA-Z-]+)(\s*):(\s*)([^;\{\}]+)(?=;)/g, (match, space1, prop, space2, space3, value) => {
-         const propTokenId = generateTokenId(tokens.length);
-         tokens.push({ id: propTokenId, content: prop, className: 'code-property' });
-         
-         const valueTokenId = generateTokenId(tokens.length);
-         tokens.push({ id: valueTokenId, content: value, className: 'code-value' });
-         
-         return `${space1}<span class="code-property">${prop}</span>${space2}:${space3}<span class="code-value">${value}</span>`;
-      });
-      
-      // Colores CSS
-      extractTokens(/#([a-fA-F0-9]{3,6})\b/g, 'code-color');
-      
-      // Reemplazar los tokens restantes
-      tokens.forEach(token => {
-         if (token.className !== 'no-replace') {
-            tokenizedCode = tokenizedCode.replace(
-               token.id, 
-               `<span class="${token.className}">${token.content}</span>`
-            );
-         }
-      });
-      
-      return tokenizedCode;
-   }
-}
-
-customElements.define('slice-codevisualizer', CodeVisualizer);
-
-