slicejs-web-framework 3.2.3 → 3.3.1

package/src/Components/Visual/Select/Select.css

@@ -1,84 +0,0 @@
-.slice_select_dropdown {
-  font-family: var(--font-family);
-  max-width: 100%;
-  margin-bottom: 25px;
-  margin-top: 25px;
-  position: relative;
-}
-.slice_select_container {
-  cursor: pointer;
-  display: flex;
-  padding: 10px;
-  border-radius: var(--border-radius-slice);
-  border: var(--slice-border) solid var(--primary-color);
-  background-color: var(--primary-background-color);
-  justify-content: space-between;
-  align-items: center;
-}
-.slice_select {
-  pointer-events: none;
-  color: var(--font-primary-color);
-  width: 100%;
-  background: none;
-  outline: none;
-  border: none;
-}
-.slice_select_label {
-  color: var(--primary-color);
-  position: absolute;
-  transition: all 0.5s;
-  user-select: none;
-}
-.slice_select_value {
-  scale: 0.8;
-  transform: translateY(-200%);
-  transition: all 0.5s;
-}
-.slice_select_menu {
-  display: none;
-  border: var(--slice-border) solid var(--primary-color);
-  list-style: none;
-  font-family: var(--font-family);
-  visibility: hidden;
-  overflow: hidden;
-  position: absolute;
-  opacity: 0;
-  transition: 0s, opacity 0.3s;
-  top: 100%;
-  width: 100%;
-  z-index: 1;
-  background-color: var(--primary-background-color);
-  border-radius: var(--border-radius-slice);
-  box-shadow: 0 0 10px 0 #00000050;
-  div {
-    color: var(--font-primary-color);
-    cursor: pointer;
-    padding: 10px;
-    &:hover {
-      color: var(--secondary-color-contrast);
-      background-color: var(--secondary-color);
-    }
-  }
-}
-.menu_open {
-  display: block;
-  overflow-y: scroll;
-  min-height: min-content;
-  max-height: 400%;
-  visibility: visible;
-  opacity: 1;
-}
-.menu_open::-webkit-scrollbar {
-  width: 5px;
-}
-.menu_open::-webkit-scrollbar-thumb {
-  background: var(--secondary-color);
-  border-radius: var(--border-radius-slice);
-}
-.active {
-  /* color: var(--primary-color); */
-  background-color: var(--secondary-background-color);
-}
-.slice_select_container .caret {
-  border-top-color: var(--primary-color);
-}

package/src/Components/Visual/Select/Select.html

@@ -1,8 +0,0 @@
-<div class="slice_select_dropdown">
-  <div class="slice_select_container">
-    <label class="slice_select_label"></label>
-    <input class="slice_select" />
-    <div class="caret"></div>
-  </div>
-  <div class="slice_select_menu"></div>
-</div>

package/src/Components/Visual/Select/Select.js

@@ -1,195 +0,0 @@
-export default class Select extends HTMLElement {
-   constructor(props) {
-      super();
-      slice.attachTemplate(this);
-      this.$dropdown = this.querySelector('.slice_select_dropdown');
-      this.$selectContainer = this.querySelector('.slice_select_container');
-      this.$label = this.querySelector('.slice_select_label');
-      this.$select = this.querySelector('.slice_select');
-      this.$menu = this.querySelector('.slice_select_menu');
-      this.$caret = this.querySelector('.caret');
-
-      this.$selectContainer.addEventListener('click', () => {
-         this.$menu.classList.toggle('menu_open');
-         this.$caret.classList.toggle('caret_open');
-      });
-      this.$dropdown.addEventListener('mouseleave', () => {
-         this.$menu.classList.remove('menu_open');
-         this.$caret.classList.remove('caret_open');
-      });
-
-      if (props.visibleProp) {
-         this.visibleProp = props.visibleProp;
-      }
-      this._value = [];
-
-      if (props.onOptionSelect) {
-         this.onOptionSelect = props.onOptionSelect;
-      }
-      slice.controller.setComponentProps(this, props);
-      this.debuggerProps = ['options', 'disabled', 'label', 'multiple', 'visibleProp'];
-   }
-
-   init() {
-      if (!this.disabled) {
-         this._disabled = false;
-      }
-
-      if (!this._multiple) {
-         this._multiple = false;
-      }
-   }
-
-   get options() {
-      return this._options;
-   }
-
-   removeOptionFromValue(option) {
-      const optionIndex = this.isObjectInArray(option, this._value).index;
-      if (optionIndex !== -1) {
-         this._value.splice(optionIndex, 1);
-         // Actualizar la representación visual en el elemento select
-         this.updateSelectLabel();
-      }
-
-      if (this._value.length === 0) {
-         this.$label.classList.remove('slice_select_value');
-      }
-   }
-
-   updateSelectLabel() {
-      // Limpiar el contenido actual del elemento select
-      this.$select.value = '';
-
-      // Volver a agregar los valores seleccionados
-      if (this._value.length > 0) {
-         this.$select.value = this._value.map((option) => option[this.visibleProp]).join(', ');
-         this.$label.classList.add('slice_select_value');
-      } else {
-         this.$label.classList.remove('slice_select_value');
-      }
-   }
-
-   addSelectedOption(option) {
-      this._value.push(option);
-      this.updateSelectLabel();
-      this.$label.classList.add('slice_select_value');
-      if (!this.multiple) {
-         this.$menu.classList.remove('menu_open');
-      }
-   }
-
-   set options(values) {
-      this._options = values;
-      values.forEach((option) => {
-         const opt = document.createElement('div');
-         opt.textContent = option[this.visibleProp];
-         opt.addEventListener('click', async () => {
-            if (this.$menu.querySelector('.active') && !this.multiple) {
-               this.$menu.querySelector('.active').classList.remove('active');
-            }
-
-            if (this._value.length === 1 && !this.multiple) {
-               this.removeOptionFromValue(this._value[0]);
-               this.addSelectedOption(option);
-               if (this.onOptionSelect) await this.onOptionSelect();
-               return;
-            }
-
-            if (this.isObjectInArray(option, this._value).found) {
-               this.removeOptionFromValue(option);
-               opt.classList.remove('active');
-            } else {
-               this.addSelectedOption(option);
-               opt.classList.add('active');
-            }
-            if (this.onOptionSelect) await this.onOptionSelect();
-         });
-         this.$menu.appendChild(opt);
-      });
-   }
-
-   get value() {
-      if (this._value.length === 1) {
-         return this._value[0];
-      }
-      return this._value;
-   }
-
-   set value(valueParam) {
-      this._value = [];
-
-      if (valueParam.length > 1 && !this.multiple) {
-         return console.error('Select is not multiple, you can only select one option');
-      }
-
-      const validOptions = valueParam.every((option) => this.isObjectInArray(option, this._options).found);
-
-      if (!validOptions) {
-         console.error('Error: Al menos una de las opciones proporcionadas no está en this.options.');
-         return;
-      }
-
-      // Agregar las opciones a _value
-      this.$label.classList.add('slice_select_value');
-      valueParam.forEach((option) => this.addSelectedOption(option));
-   }
-
-   get label() {
-      return this._label;
-   }
-
-   set label(value) {
-      this._label = value;
-      this.$label.textContent = value;
-   }
-
-   get multiple() {
-      return this._multiple;
-   }
-   set multiple(value) {
-      this._multiple = value;
-   }
-
-   get disabled() {
-      return this._disabled;
-   }
-
-   set disabled(value) {
-      this._disabled = value;
-   }
-
-   isObjectInArray(objeto, arreglo) {
-      for (let i = 0; i < arreglo.length; i++) {
-         if (this.sameObject(arreglo[i], objeto)) {
-            return { found: true, index: i };
-         }
-      }
-      return { found: false, index: -1 };
-   }
-   sameObject(objetoA, objetoB) {
-      const keysA = Object.keys(objetoA);
-      const keysB = Object.keys(objetoB);
-
-      if (keysA.length !== keysB.length) {
-         return false;
-      }
-
-      for (const key of keysA) {
-         const valueA = objetoA[key];
-         const valueB = objetoB[key];
-
-         if (typeof valueA === 'object' && typeof valueB === 'object') {
-            if (!this.sameObject(valueA, valueB)) {
-               return false;
-            }
-         } else if (valueA !== valueB) {
-            return false;
-         }
-      }
-
-      return true;
-   }
-}
-
-customElements.define('slice-select', Select);

package/src/Components/Visual/Switch/Switch.css

@@ -1,76 +0,0 @@
-.slice_switch {
-  --button-width: calc(var(--button-height) * 2);
-  --button-height: 1.8em;
-  --toggle-diameter: calc(var(--button-width) / 3);
-  --button-toggle-offset: calc(
-    (var(--button-height) - var(--toggle-diameter)) / 2
-  );
-  --toggle-shadow-offset: 10px;
-  --toggle-wider: 1.8em;
-}
-
-.slice_switch_container {
-  width: fit-content;
-}
-
-.slice_switch {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  user-select: none;
-}
-
-.switch_label {
-  margin: 5px;
-  font-family: var(--font-family);
-  color: var(--font-primary-color);
-}
-
-.slider {
-  cursor: pointer;
-  display: inline-block;
-  width: var(--button-width);
-  height: var(--button-height);
-  background-color: var(--secondary-background-color);
-  border: var(--slice-border) solid var(--primary-color);
-  border-radius: calc(var(--button-height) / 2);
-  position: relative;
-  transition: 0.3s all ease-in-out;
-}
-
-.slider::after {
-  content: "";
-  display: inline-block;
-  width: var(--toggle-diameter);
-  height: var(--toggle-diameter);
-  background-color: #fff;
-  border-radius: calc(var(--toggle-diameter) / 2);
-  position: absolute;
-  top: var(--button-toggle-offset);
-  transform: translateX(var(--button-toggle-offset));
-  transition: 0.3s all ease-in-out;
-}
-
-.slice_switch input[type="checkbox"]:checked + .slider {
-  background-color: var(--success-color);
-  border: var(--slice-border) solid var(--success-color);
-}
-
-.slice_switch input[type="checkbox"]:checked + .slider::after {
-  transform: translateX(
-    calc(
-      var(--button-width) - var(--toggle-diameter) - var(--button-toggle-offset)
-    )
-  );
-}
-
-.slice_switch input[type="checkbox"] {
-  display: none;
-}
-
-.disabled {
-  border-color: var(--disabled-color);
-  background-color: var(--primary-color-shade);
-  color: var(--disabled-color);
-  cursor: not-allowed;
-}

package/src/Components/Visual/Switch/Switch.html

@@ -1,8 +0,0 @@
-<div class="slice_switch_container">
-  <div class="slice_switch">
-    <label>
-      <input type="checkbox" />
-      <span class="slider"></span>
-    </label>
-  </div>
-</div>

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

@@ -1,102 +0,0 @@
-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 +0,0 @@
-.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 +0,0 @@
-<label class="slice_tree_item"></label>

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

@@ -1,126 +0,0 @@
-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 +0,0 @@
-.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 +0,0 @@
-<div class="simple_treeview"></div>

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

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