slicejs-web-framework 1.0.5 → 1.0.7

package/src/Components/Visual/Button/Button.js

@@ -0,0 +1,70 @@
+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.querySelector('.slice_button_container').addEventListener(
+            'click',
+            async () => await this.onClickCallback()
+         );
+         //revisar esta verga por si habria q deletear o no
+      }
+
+      slice.controller.setComponentProps(this, props);
+      this.debuggerProps = ['value', 'onClickCallback', 'customColor'];
+   }
+
+   async init() {
+      if (this.icon) {
+         this.$icon = await slice.build('Icon', {
+            name: this.icon,
+            size: '25px',
+            color: 'var(--primary-color-contrast)',
+            // iconStyle: this._icon.iconStyle,
+         });
+         this.$button.appendChild(this.$icon);
+      }
+   }
+
+   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 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;
+      if (value.button) {
+         this.style = `--primary-color: ${value.button};`;
+      }
+      if (value.label) {
+         this.$button.style = `--primary-color-contrast: ${value.label};`;
+      }
+   }
+
+   handleButtonClick() {
+      this.onClickCallback();
+   }
+}
+window.customElements.define('slice-button', Button);

package/src/Components/Visual/Card/Card.css

@@ -0,0 +1,68 @@
+.title {
+  font-size: 20px;
+  font-weight: bold;
+  color: var(--font-primary-color);
+  text-align: center;
+}
+
+.slice-card {
+  height: 220px;
+  position: relative;
+  font-family: var(--font-family);
+  background-color: var(--seconday-background-color);
+  border-radius: var(--border-radius-slice);
+  transition: all 300ms;
+}
+
+.slice-card:hover {
+  .card_cover {
+    height: auto;
+    transform: translateY(-70%);
+    box-shadow: 0px 10px 10px #00000050;
+  }
+  .card_info {
+    height: 100%;
+    transform: translateY(20%);
+    box-shadow: 0px -10px 10px #00000050;
+  }
+}
+.card_cover {
+  width: 100%;
+  height: 90%;
+  background: var(--primary-color);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  z-index: 1;
+  transition: all 400ms ease;
+  border-radius: var(--border-radius-slice);
+}
+
+.card_info {
+  width: 100%;
+  height: 200px;
+  bottom: 0;
+  color: var(--font-secondary-color);
+  background: var(--secondary-background-color);
+  position: absolute;
+  font-size: 20px;
+  transition: all 400ms cubic-bezier(0.5, 0, 0, 1);
+  border-radius: var(--border-radius-slice);
+}
+
+.card_info p {
+  text-align: center;
+  color: var(--font-secondary-color);
+  padding: 0px 20px 20px 20px;
+  font-size: 15px;
+  display: -webkit-box;
+  display: -moz-box;
+  display: box;
+  -webkit-box-orient: vertical;
+  -moz-box-orient: vertical;
+  box-orient: vertical;
+  -webkit-line-clamp: 5;
+  line-clamp: 5;
+  overflow: hidden;
+}

package/src/Components/Visual/Card/Card.html

@@ -0,0 +1,7 @@
+<div class="slice-card">
+  <div class="card_cover"></div>
+  <div class="card_info">
+    <h1 class="title">Slice Card Title</h1>
+    <p class="text">Slice Card text</p>
+  </div>
+</div>

package/src/Components/Visual/Card/Card.js

@@ -0,0 +1,107 @@
+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/src/Components/Visual/Checkbox/Checkbox.css

@@ -0,0 +1,87 @@
+.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/src/Components/Visual/Checkbox/Checkbox.html

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

package/src/Components/Visual/Checkbox/Checkbox.js

@@ -0,0 +1,86 @@
+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/src/Components/Visual/Details/Details.css

@@ -0,0 +1,70 @@
+slice-details {
+   font-family: var(--font-family);
+   color: var(--font-primary-color);
+}
+.details_summary {
+   cursor: pointer;
+   display: flex;
+   align-items: center;
+   border-bottom: var(--slice-border) solid var(--primary-color);
+   padding: 10px;
+}
+.details_summary .caret {
+   transform: rotate(-90deg);
+   margin-right: 10px;
+   color: var(--primary-color);
+}
+.details_title {
+   width: 100%;
+   font-weight: bold;
+}
+.details_text {
+   color: var(--font-secondary-color);
+}
+.details_container {
+   padding-left: 5px;
+   padding: 10px;
+   background-color: var(--secondary-background-color);
+   border-radius: var(--border-radius-slice);
+   visibility: hidden;
+   display: block;
+   height: 0; /* Inicia con altura 0 */
+   overflow: hidden;
+   transition:
+      height 0.3s ease,
+      visibility 0.3s ease; /* Agrega transición a height */
+}
+
+.details_open {
+   height: auto; /* Altura se ajustará automáticamente después de la transición */
+   visibility: visible;
+}
+
+.symbol {
+   border-radius: 5px;
+   width: 20px;
+   height: 20px;
+   position: relative;
+   transition: transform 0.3s ease;
+}
+
+.symbol::before,
+.symbol::after {
+   content: '';
+   position: absolute;
+   background-color: var(--primary-color);
+   width: 15px;
+   height: 2px;
+   top: 50%;
+   left: 0;
+   transition: transform 0.5s ease;
+}
+
+.symbol.plus::after {
+   transform: rotate(90deg);
+}
+
+.symbol.minus::before,
+.symbol.minus::after {
+   transform: rotate(360deg);
+}

package/src/Components/Visual/Details/Details.html

@@ -0,0 +1,9 @@
+<div class="details_summary">
+   <div class="symbol plus"></div>
+   <span class="details_title"></span>
+</div>
+<div class="details_container">
+   <div class="full_details">
+      <div class="details_text"></div>
+   </div>
+</div>

package/src/Components/Visual/Details/Details.js

@@ -0,0 +1,76 @@
+export default class Details extends HTMLElement {
+   constructor(props) {
+      super();
+      slice.attachTemplate(this);
+
+      this.$detailsTitle = this.querySelector('.details_title');
+      this.$detailsText = this.querySelector('.details_text');
+      this.$details = this.querySelector('.full_details');
+      this.$summary = this.querySelector('.details_summary');
+      this.$container = this.querySelector('.details_container'); // Referencia al contenedor
+
+      this.$summary.addEventListener('click', () => {
+         this.toggleDetails();
+      });
+
+      slice.controller.setComponentProps(this, props);
+      this.debuggerProps = ['title', 'text'];
+   }
+
+   toggleDetails() {
+      const isOpen = this.$container.classList.toggle('details_open');
+      const symbol = this.$summary.querySelector('.symbol');
+
+      if (isOpen) {
+         symbol.classList.remove('plus');
+         symbol.classList.add('minus');
+
+         // Obtener la altura total del contenedor
+         const fullHeight = this.$container.scrollHeight + 'px';
+
+         // Establecer la altura para iniciar la animación
+         this.$container.style.height = fullHeight;
+
+         // Después de la transición, ajustar la altura a 'auto'
+         this.$container.addEventListener('transitionend', function onTransitionEnd() {
+            this.style.height = 'auto';
+            this.removeEventListener('transitionend', onTransitionEnd);
+         });
+      } else {
+         symbol.classList.remove('minus');
+         symbol.classList.add('plus');
+
+         // 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';
+         });
+      }
+   }
+
+   get title() {
+      return this._title;
+   }
+
+   set title(value) {
+      this._title = value;
+      this.$detailsTitle.textContent = value;
+   }
+
+   get text() {
+      return this._text;
+   }
+
+   set text(value) {
+      this._text = value;
+      this.$detailsText.textContent = value;
+   }
+
+   addDetail(value) {
+      this.$details.appendChild(value);
+   }
+}
+
+customElements.define('slice-details', Details);

package/src/Components/Visual/DropDown/DropDown.css

@@ -0,0 +1,60 @@
+.slice_dropdown_label {
+  cursor: pointer;
+}
+.slice_dropdown {
+  cursor: pointer;
+  user-select: none;
+  display: flex;
+  justify-content: center;
+  display: flex;
+  border-radius: var(--border-radius-slice);
+  border: var(--slice-border) solid var(--primary-color);
+  align-items: center;
+}
+.slice_dropdown .caret {
+  margin-left: 10px;
+  border-top-color: var(--primary-color-contrast);
+}
+.slice_dropbox {
+  display: flex;
+  flex-direction: column;
+  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%;
+  z-index: 1;
+  background-color: var(--primary-color);
+  border-radius: var(--border-radius-slice);
+  box-shadow: 0 0 10px 0 #00000050;
+}
+.slice_dropbox_open {
+  overflow-y: scroll;
+  min-height: min-content;
+  max-height: 200px;
+  visibility: visible;
+  opacity: 1;
+}
+.slice_dropbox_open::-webkit-scrollbar {
+  width: 5px;
+}
+.slice_dropbox_open::-webkit-scrollbar-thumb {
+  background: var(--secondary-color);
+  border-radius: var(--border-radius-slice);
+}
+.slice_dropbox {
+  width: 100%;
+}
+.slice_dropbox_open div a {
+  text-decoration: none;
+  color: var(--primary-color-contrast);
+  width: 100%;
+}
+.slice_dropbox_open div {
+  width: 100%;
+  padding: 5px;
+}

package/src/Components/Visual/DropDown/DropDown.html

@@ -0,0 +1,5 @@
+<div class="slice_dropdown">
+  <label class="slice_dropdown_label"></label>
+  <div class="caret"></div>
+</div>
+<div class="slice_dropbox"></div>