slicejs-web-framework 3.2.3 → 3.3.0

package/src/Components/Visual/Switch/Switch.js

@@ -1,102 +1,102 @@
-export default class Switch extends HTMLElement {
-   constructor(props) {
-      super();
-      slice.attachTemplate(this);
-      this.$switch = this.querySelector('.slice_switch');
-      this.$checkbox = this.querySelector('input');
-      this.toggle = props.toggle;
-      if (this.toggle) {
-         this.$checkbox.addEventListener('click', () => this.toggle());
-      }
-
-      slice.controller.setComponentProps(this, props);
-      this.debuggerProps = ['checked', 'disabled', 'label', 'customColor', 'labelPlacement'];
-   }
-
-   init() {
-      if (this._checked === undefined) {
-         this.checked = false;
-      }
-      if (this.labelPlacement === undefined) {
-         this.labelPlacement = 'right';
-      }
-
-      if (!this.disabled) {
-         this._disabled = false;
-      }
-
-      this.querySelector('input').addEventListener('change', (e) => {
-         this.checked = e.target.checked;
-      });
-   }
-
-   get checked() {
-      return this._checked;
-   }
-
-   set checked(value) {
-      this._checked = value;
-      this.$checkbox.checked = value;
-   }
-
-   get label() {
-      return this._label;
-   }
-
-   set label(value) {
-      this._label = value;
-      if (this.querySelector('.switch_label')) {
-         this.querySelector('.switch_label').textContent = value;
-      } else {
-         const label = document.createElement('label');
-         label.classList.add('switch_label');
-         label.textContent = value;
-         this.$switch.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.$switch.style = ` flex-direction: row-reverse;`;
-      }
-      if (value === 'right') {
-         this.$switch.style = `flex-direction: row;`;
-      }
-      if (value === 'top') {
-         this.$switch.style = `flex-direction: column-reverse;`;
-      }
-      if (value === 'bottom') {
-         this.$switch.style = `flex-direction: column;`;
-      }
-      this._labelPlacement = value;
-   }
-
-   get disabled() {
-      return this._disabled;
-   }
-
-   set disabled(value) {
-      this._disabled = value;
-      this.$checkbox.disabled = value;
-      if (value === true) {
-         this.querySelector('.slider').classList.add('disabled');
-      } else {
-         this.querySelector('.slider').classList.remove('disabled');
-      }
-   }
-}
-
-customElements.define('slice-switch', Switch);
+export default class Switch extends HTMLElement {
+   constructor(props) {
+      super();
+      slice.attachTemplate(this);
+      this.$switch = this.querySelector('.slice_switch');
+      this.$checkbox = this.querySelector('input');
+      this.toggle = props.toggle;
+      if (this.toggle) {
+         this.$checkbox.addEventListener('click', () => this.toggle());
+      }
+
+      slice.controller.setComponentProps(this, props);
+      this.debuggerProps = ['checked', 'disabled', 'label', 'customColor', 'labelPlacement'];
+   }
+
+   init() {
+      if (this._checked === undefined) {
+         this.checked = false;
+      }
+      if (this.labelPlacement === undefined) {
+         this.labelPlacement = 'right';
+      }
+
+      if (!this.disabled) {
+         this._disabled = false;
+      }
+
+      this.querySelector('input').addEventListener('change', (e) => {
+         this.checked = e.target.checked;
+      });
+   }
+
+   get checked() {
+      return this._checked;
+   }
+
+   set checked(value) {
+      this._checked = value;
+      this.$checkbox.checked = value;
+   }
+
+   get label() {
+      return this._label;
+   }
+
+   set label(value) {
+      this._label = value;
+      if (this.querySelector('.switch_label')) {
+         this.querySelector('.switch_label').textContent = value;
+      } else {
+         const label = document.createElement('label');
+         label.classList.add('switch_label');
+         label.textContent = value;
+         this.$switch.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.$switch.style = ` flex-direction: row-reverse;`;
+      }
+      if (value === 'right') {
+         this.$switch.style = `flex-direction: row;`;
+      }
+      if (value === 'top') {
+         this.$switch.style = `flex-direction: column-reverse;`;
+      }
+      if (value === 'bottom') {
+         this.$switch.style = `flex-direction: column;`;
+      }
+      this._labelPlacement = value;
+   }
+
+   get disabled() {
+      return this._disabled;
+   }
+
+   set disabled(value) {
+      this._disabled = value;
+      this.$checkbox.disabled = value;
+      if (value === true) {
+         this.querySelector('.slider').classList.add('disabled');
+      } else {
+         this.querySelector('.slider').classList.remove('disabled');
+      }
+   }
+}
+
+customElements.define('slice-switch', Switch);

package/src/Components/Visual/TreeItem/TreeItem.css

@@ -1,36 +1,36 @@
-.slice_tree_item,
-.container_open .slice_tree_item {
-   color: var(--font-primary-color);
-   user-select: none;
-   cursor: pointer;
-   width: fit-content;
-   display: flex;
-   flex-direction: row-reverse;
-   align-items: center;
-   padding: 10px;
-   border-radius: var(--border-radius-slice);
-}
-.slice_tree_item .caret {
-   color: var(--primary-color);
-   margin-right: 5px;
-   transform: rotate(-90deg);
-}
-.slice_tree_item .caret_open {
-   transform: rotate(0deg);
-}
-.container {
-   margin-left: 14px;
-   border-left: 2px solid var(--primary-color);
-   height: 0;
-   overflow: hidden;
-   transition: height 0.3s ease;
-}
-
-.container_open {
-   height: auto; /* Esto se ajustará después de la transición */
-}
-
-.slice_tree_item:hover {
-   background-color: #ffffff25;
-   color: var(--primary-color);
-}
+.slice_tree_item,
+.container_open .slice_tree_item {
+   color: var(--font-primary-color);
+   user-select: none;
+   cursor: pointer;
+   width: fit-content;
+   display: flex;
+   flex-direction: row-reverse;
+   align-items: center;
+   padding: 10px;
+   border-radius: var(--border-radius-slice);
+}
+.slice_tree_item .caret {
+   color: var(--primary-color);
+   margin-right: 5px;
+   transform: rotate(-90deg);
+}
+.slice_tree_item .caret_open {
+   transform: rotate(0deg);
+}
+.container {
+   margin-left: 14px;
+   border-left: 2px solid var(--primary-color);
+   height: 0;
+   overflow: hidden;
+   transition: height 0.3s ease;
+}
+
+.container_open {
+   height: auto; /* Esto se ajustará después de la transición */
+}
+
+.slice_tree_item:hover {
+   background-color: #ffffff25;
+   color: var(--primary-color);
+}

package/src/Components/Visual/TreeItem/TreeItem.html

@@ -1 +1 @@
-<label class="slice_tree_item"></label>
+<label class="slice_tree_item"></label>

package/src/Components/Visual/TreeItem/TreeItem.js

@@ -1,126 +1,126 @@
-export default class TreeItem extends HTMLElement {
-   constructor(props) {
-      super();
-      slice.attachTemplate(this);
-
-      this.$item = this.querySelector('.slice_tree_item');
-
-      this.debuggerProps = ['value', 'path', 'onClickCallback'];
-      slice.controller.setComponentProps(this, props);
-
-      if (props.onClickCallback) {
-         this.onClickCallback = props.onClickCallback;
-         this.$item.addEventListener('click', async () => {
-            await this.onClickCallback(this);
-         });
-      }
-   }
-
-   async init() {
-      if (this._items) {
-         for (let i = 0; i < this._items.length; i++) {
-            await this.setItem(this._items[i], this.$container);
-         }
-      }
-      // Restaurar el estado del contenedor desde el localStorage
-      this.restoreState();
-   }
-
-   set value(value) {
-      this.$item.textContent = value;
-      this._value = value;
-   }
-
-   get value() {
-      return this._value;
-   }
-
-   set path(value) {
-      this.$item.path = value;
-      this._path = value;
-   }
-
-   get path() {
-      return this._path;
-   }
-
-   set items(values) {
-      this._items = values;
-      const caret = document.createElement('div');
-      caret.classList.add('caret');
-      // Crear un contenedor para items
-      const container = document.createElement('div');
-      container.classList.add('container');
-      this.appendChild(container);
-      // Añadir
-      this.$container = container;
-
-      const toggleContainer = () => {
-         const isOpen = caret.classList.toggle('caret_open');
-      
-         if (isOpen) {
-            // Calcular la altura completa del contenedor
-            const fullHeight = this.$container.scrollHeight + 'px';
-      
-            // Establecer la altura para iniciar la animación
-            this.$container.style.height = fullHeight;
-      
-            // Después de que la animación termine, ajustar la altura a 'auto'
-            this.$container.addEventListener('transitionend', function onTransitionEnd() {
-               this.style.height = 'auto';
-               this.removeEventListener('transitionend', onTransitionEnd);
-            });
-         } else {
-            // Establecer la altura para iniciar la animación de cierre
-            this.$container.style.height = this.$container.scrollHeight + 'px';
-      
-            // Forzar el reflujo para que la transición funcione
-            requestAnimationFrame(() => {
-               this.$container.style.height = '0';
-            });
-         }
-      
-         // Alternar la clase container_open
-         this.$container.classList.toggle('container_open');
-      
-         // Guardar el estado en localStorage
-         localStorage.setItem(this.getContainerKey(), isOpen ? 'open' : 'closed');
-      };
-      
-      caret.addEventListener('click', toggleContainer);
-
-      if (!this.path) {
-         this.$item.addEventListener('click', toggleContainer);
-      }
-
-      this.$item.appendChild(caret);
-   }
-
-   getContainerKey() {
-      return `treeitem-${this._value}`;
-   }
-
-   restoreState() {
-      const state = localStorage.getItem(this.getContainerKey());
-      if (state === 'open') {
-         const caret = this.$item.querySelector('.caret');
-         if (caret) {
-            caret.classList.add('caret_open');
-         }
-         if (this.$container) {
-            this.$container.classList.add('container_open');
-         }
-      }
-   }
-
-   async setItem(value, addTo) {
-      if (this.onClickCallback) {
-         value.onClickCallback = this.onClickCallback;
-      }
-
-      const item = await slice.build('TreeItem', value);
-      addTo.appendChild(item);
-   }
-}
-
-customElements.define('slice-treeitem', TreeItem);
+export default class TreeItem extends HTMLElement {
+   constructor(props) {
+      super();
+      slice.attachTemplate(this);
+
+      this.$item = this.querySelector('.slice_tree_item');
+
+      this.debuggerProps = ['value', 'path', 'onClickCallback'];
+      slice.controller.setComponentProps(this, props);
+
+      if (props.onClickCallback) {
+         this.onClickCallback = props.onClickCallback;
+         this.$item.addEventListener('click', async () => {
+            await this.onClickCallback(this);
+         });
+      }
+   }
+
+   async init() {
+      if (this._items) {
+         for (let i = 0; i < this._items.length; i++) {
+            await this.setItem(this._items[i], this.$container);
+         }
+      }
+      // Restaurar el estado del contenedor desde el localStorage
+      this.restoreState();
+   }
+
+   set value(value) {
+      this.$item.textContent = value;
+      this._value = value;
+   }
+
+   get value() {
+      return this._value;
+   }
+
+   set path(value) {
+      this.$item.path = value;
+      this._path = value;
+   }
+
+   get path() {
+      return this._path;
+   }
+
+   set items(values) {
+      this._items = values;
+      const caret = document.createElement('div');
+      caret.classList.add('caret');
+      // Crear un contenedor para items
+      const container = document.createElement('div');
+      container.classList.add('container');
+      this.appendChild(container);
+      // Añadir
+      this.$container = container;
+
+      const toggleContainer = () => {
+         const isOpen = caret.classList.toggle('caret_open');
+      
+         if (isOpen) {
+            // Calcular la altura completa del contenedor
+            const fullHeight = this.$container.scrollHeight + 'px';
+      
+            // Establecer la altura para iniciar la animación
+            this.$container.style.height = fullHeight;
+      
+            // Después de que la animación termine, ajustar la altura a 'auto'
+            this.$container.addEventListener('transitionend', function onTransitionEnd() {
+               this.style.height = 'auto';
+               this.removeEventListener('transitionend', onTransitionEnd);
+            });
+         } else {
+            // Establecer la altura para iniciar la animación de cierre
+            this.$container.style.height = this.$container.scrollHeight + 'px';
+      
+            // Forzar el reflujo para que la transición funcione
+            requestAnimationFrame(() => {
+               this.$container.style.height = '0';
+            });
+         }
+      
+         // Alternar la clase container_open
+         this.$container.classList.toggle('container_open');
+      
+         // Guardar el estado en localStorage
+         localStorage.setItem(this.getContainerKey(), isOpen ? 'open' : 'closed');
+      };
+      
+      caret.addEventListener('click', toggleContainer);
+
+      if (!this.path) {
+         this.$item.addEventListener('click', toggleContainer);
+      }
+
+      this.$item.appendChild(caret);
+   }
+
+   getContainerKey() {
+      return `treeitem-${this._value}`;
+   }
+
+   restoreState() {
+      const state = localStorage.getItem(this.getContainerKey());
+      if (state === 'open') {
+         const caret = this.$item.querySelector('.caret');
+         if (caret) {
+            caret.classList.add('caret_open');
+         }
+         if (this.$container) {
+            this.$container.classList.add('container_open');
+         }
+      }
+   }
+
+   async setItem(value, addTo) {
+      if (this.onClickCallback) {
+         value.onClickCallback = this.onClickCallback;
+      }
+
+      const item = await slice.build('TreeItem', value);
+      addTo.appendChild(item);
+   }
+}
+
+customElements.define('slice-treeitem', TreeItem);

package/src/Components/Visual/TreeView/TreeView.css

@@ -1,8 +1,8 @@
-.simple_treeview {
-  font-family: var(--font-family);
-  display: flex;
-  flex-direction: column;
-  max-height: 100vh;
-  overflow-y: scroll;
-  overflow-x: hidden;
-}
+.simple_treeview {
+  font-family: var(--font-family);
+  display: flex;
+  flex-direction: column;
+  max-height: 100vh;
+  overflow-y: scroll;
+  overflow-x: hidden;
+}

package/src/Components/Visual/TreeView/TreeView.html

@@ -1 +1 @@
-<div class="simple_treeview"></div>
+<div class="simple_treeview"></div>

package/src/Components/Visual/TreeView/TreeView.js

@@ -1,48 +1,48 @@
-export default class TreeView extends HTMLElement {
-   constructor(props) {
-      super();
-      slice.attachTemplate(this);
-
-      console.log(props);
-      this.$treeView = this.querySelector('.simple_treeview');
-      slice.controller.setComponentProps(this, props);
-
-      if (props.onClickCallback) {
-         this.onClickCallback = props.onClickCallback;
-      }
-
-      this.debuggerProps = [];
-   }
-
-   async init() {
-      if (this.items) {
-         await this.setTreeItems(this.items);
-      }
-   }
-
-   set items(values) {
-      this._items = values;
-   }
-
-   get items() {
-      return this._items;
-   }
-
-   async setTreeItem(item) {
-      if (this.onClickCallback) {
-         item.onClickCallback = this.onClickCallback;
-      }
-
-      const treeItem = await slice.build('TreeItem', item);
-      treeItem.classList.add('tree_item');
-      this.$treeView.appendChild(treeItem);
-   }
-
-   async setTreeItems(items) {
-      for (let i = 0; i < items.length; i++) {
-         await this.setTreeItem(items[i]);
-      }
-   }
-}
-
-customElements.define('slice-treeview', TreeView);
+export default class TreeView extends HTMLElement {
+   constructor(props) {
+      super();
+      slice.attachTemplate(this);
+
+      console.log(props);
+      this.$treeView = this.querySelector('.simple_treeview');
+      slice.controller.setComponentProps(this, props);
+
+      if (props.onClickCallback) {
+         this.onClickCallback = props.onClickCallback;
+      }
+
+      this.debuggerProps = [];
+   }
+
+   async init() {
+      if (this.items) {
+         await this.setTreeItems(this.items);
+      }
+   }
+
+   set items(values) {
+      this._items = values;
+   }
+
+   get items() {
+      return this._items;
+   }
+
+   async setTreeItem(item) {
+      if (this.onClickCallback) {
+         item.onClickCallback = this.onClickCallback;
+      }
+
+      const treeItem = await slice.build('TreeItem', item);
+      treeItem.classList.add('tree_item');
+      this.$treeView.appendChild(treeItem);
+   }
+
+   async setTreeItems(items) {
+      for (let i = 0; i < items.length; i++) {
+         await this.setTreeItem(items[i]);
+      }
+   }
+}
+
+customElements.define('slice-treeview', TreeView);