slicejs-web-framework 1.0.5 → 1.0.7

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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