slicejs-web-framework 3.2.2 → 3.2.3

package/src/Components/Visual/Navbar/Navbar.css

@@ -1,115 +1,115 @@
-.slice_nav_header {
-  font-family: var(--font-family);
-  width: 100%;
-  z-index: 1;
-  box-shadow: 0px 0px 10px #00000050;
-  background-color: var(--primary-color);
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-}
-.direction-row-reverse {
-  flex-direction: row-reverse;
-}
-.nav_bar_fixed {
-  z-index: 100;
-  width: 100%;
-  left: 0;
-  top: 0;
-  position: fixed;
-}
-.slice_nav_bar {
-  transition: transform 0.3s ease;
-  width: 100%;
-  justify-content: center;
-  display: flex;
-  align-items: center;
-  left: 0;
-  top: 0;
-}
-.nav_bar_menu {
-  width: 100%;
-  overflow-y: hidden;
-  overflow-x: scroll;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  list-style: none;
-}
-.slice_nav_header .item {
-  cursor: pointer;
-  font-weight: bold;
-  text-decoration: none;
-  color: var(--primary-color-contrast);
-  border-radius: var(--border-radius-slice);
-}
-.anim-item {
-  position: absolute;
-  top: 100%;
-  left: 50%;
-  width: 0%;
-  height: 2.5px;
-  border-radius: 5px;
-  background-color: var(--primary-color-contrast);
-  transition: width 0.3s ease, left 0.3s ease;
-}
-.slice_nav_header li {
-  margin: 25px;
-  display: flex;
-  justify-content: center;
-  position: relative;
-}
-
-.slice_nav_header li:hover .anim-item {
-  width: 100%;
-  left: 0;
-}
-.slice_nav_header .logo_container {
-  padding: 10px;
-}
-.logo_container img {
-  pointer-events: none;
-  user-select: none;
-  max-height: 50px;
-  max-width: 200px;
-}
-.nav_bar_buttons {
-  justify-content: flex-end;
-  display: flex;
-}
-
-.mobile_menu_button,
-.mobile_close_menu {
-  visibility: hidden;
-  position: absolute;
-  right: 0px;
-  margin-right: 25px;
-}
-.mobile_close_menu {
-  top: 25px;
-}
-@media only screen and (max-width: 1020px) {
-  .slice_nav_bar {
-    z-index: 1;
-    list-style: none;
-    width: 100%;
-    height: 100%;
-    position: fixed;
-    top: 0;
-    left: 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    background-color: var(--primary-color);
-    transform: translateX(100%);
-  }
-  .nav_bar_menu,
-  .nav_bar_buttons {
-    flex-direction: column;
-  }
-  .mobile_menu_button,
-  .mobile_close_menu {
-    visibility: visible;
-  }
-}
+.slice_nav_header {
+  font-family: var(--font-family);
+  width: 100%;
+  z-index: 1;
+  box-shadow: 0px 0px 10px #00000050;
+  background-color: var(--primary-color);
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+.direction-row-reverse {
+  flex-direction: row-reverse;
+}
+.nav_bar_fixed {
+  z-index: 100;
+  width: 100%;
+  left: 0;
+  top: 0;
+  position: fixed;
+}
+.slice_nav_bar {
+  transition: transform 0.3s ease;
+  width: 100%;
+  justify-content: center;
+  display: flex;
+  align-items: center;
+  left: 0;
+  top: 0;
+}
+.nav_bar_menu {
+  width: 100%;
+  overflow-y: hidden;
+  overflow-x: scroll;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  list-style: none;
+}
+.slice_nav_header .item {
+  cursor: pointer;
+  font-weight: bold;
+  text-decoration: none;
+  color: var(--primary-color-contrast);
+  border-radius: var(--border-radius-slice);
+}
+.anim-item {
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  width: 0%;
+  height: 2.5px;
+  border-radius: 5px;
+  background-color: var(--primary-color-contrast);
+  transition: width 0.3s ease, left 0.3s ease;
+}
+.slice_nav_header li {
+  margin: 25px;
+  display: flex;
+  justify-content: center;
+  position: relative;
+}
+
+.slice_nav_header li:hover .anim-item {
+  width: 100%;
+  left: 0;
+}
+.slice_nav_header .logo_container {
+  padding: 10px;
+}
+.logo_container img {
+  pointer-events: none;
+  user-select: none;
+  max-height: 50px;
+  max-width: 200px;
+}
+.nav_bar_buttons {
+  justify-content: flex-end;
+  display: flex;
+}
+
+.mobile_menu_button,
+.mobile_close_menu {
+  visibility: hidden;
+  position: absolute;
+  right: 0px;
+  margin-right: 25px;
+}
+.mobile_close_menu {
+  top: 25px;
+}
+@media only screen and (max-width: 1020px) {
+  .slice_nav_bar {
+    z-index: 1;
+    list-style: none;
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    background-color: var(--primary-color);
+    transform: translateX(100%);
+  }
+  .nav_bar_menu,
+  .nav_bar_buttons {
+    flex-direction: column;
+  }
+  .mobile_menu_button,
+  .mobile_close_menu {
+    visibility: visible;
+  }
+}

package/src/Components/Visual/Navbar/Navbar.html

@@ -1,44 +1,44 @@
-<header class="slice_nav_header">
-  <a class="logo_container"></a>
-  <nav class="slice_nav_bar">
-    <div class="nav_bar_menu"></div>
-    <div class="nav_bar_buttons"></div>
-    <div class="mobile_close_menu">
-      <svg
-        class="w-6 h-6 text-gray-800 dark:text-white"
-        aria-hidden="true"
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        fill="none"
-        viewBox="0 0 24 24"
-      >
-        <path
-          stroke="var(--primary-color-contrast)"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M6 18 17.94 6M18 18 6.06 6"
-        />
-      </svg>
-    </div>
-  </nav>
-  <div class="mobile_menu_button">
-    <svg
-      class="w-6 h-6 text-gray-800 dark:text-white"
-      aria-hidden="true"
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      fill="none"
-      viewBox="0 0 24 24"
-    >
-      <path
-        stroke="var(--primary-color-contrast)"
-        stroke-linecap="round"
-        stroke-width="3"
-        d="M12 6h.01M12 12h.01M12 18h.01"
-      />
-    </svg>
-  </div>
-</header>
+<header class="slice_nav_header">
+  <a class="logo_container"></a>
+  <nav class="slice_nav_bar">
+    <div class="nav_bar_menu"></div>
+    <div class="nav_bar_buttons"></div>
+    <div class="mobile_close_menu">
+      <svg
+        class="w-6 h-6 text-gray-800 dark:text-white"
+        aria-hidden="true"
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        fill="none"
+        viewBox="0 0 24 24"
+      >
+        <path
+          stroke="var(--primary-color-contrast)"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M6 18 17.94 6M18 18 6.06 6"
+        />
+      </svg>
+    </div>
+  </nav>
+  <div class="mobile_menu_button">
+    <svg
+      class="w-6 h-6 text-gray-800 dark:text-white"
+      aria-hidden="true"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      fill="none"
+      viewBox="0 0 24 24"
+    >
+      <path
+        stroke="var(--primary-color-contrast)"
+        stroke-linecap="round"
+        stroke-width="3"
+        d="M12 6h.01M12 12h.01M12 18h.01"
+      />
+    </svg>
+  </div>
+</header>

package/src/Components/Visual/Navbar/Navbar.js

@@ -1,141 +1,141 @@
-export default class Navbar extends HTMLElement {
-   constructor(props) {
-      super();
-      slice.attachTemplate(this);
-
-      this.$header = this.querySelector('.slice_nav_header');
-      this.$navBar = this.querySelector('.slice_nav_bar');
-      this.$menu = this.querySelector('.nav_bar_menu');
-      this.$buttonsContainer = this.querySelector('.nav_bar_buttons');
-      this.$logoContainer = this.querySelector('.logo_container');
-      this.$mobileMenu = this.querySelector('.slice_mobile_menu');
-      this.$mobileButton = this.querySelector('.mobile_menu_button');
-      this.$closeMenu = this.querySelector('.mobile_close_menu');
-
-      this.$mobileButton.addEventListener('click', () => {
-         this.$navBar.style.transform = 'translateX(0%)';
-      });
-
-      this.$closeMenu.addEventListener('click', () => {
-         this.$navBar.style.transform = 'translateX(100%)';
-      });
-
-      slice.controller.setComponentProps(this, props);
-      this.debuggerProps = ['logo', 'items'];
-   }
-
-   async init() {
-      if (this.items) {
-         await this.addItems(this.items);
-      }
-      if (this.buttons) {
-         this.buttons.forEach(async (item) => {
-            await this.addButton(item, this.$buttonsContainer);
-         });
-      }
-
-      if (window.screen.width >= 1020 && this.items && this.logo && this.buttons) {
-         this.$menu.style.maxWidth = '60%';
-      }
-   }
-
-   async addItems(items) {
-      for (let i = 0; i < items.length; i++) {
-         await this.addItem(items[i], this.$menu);
-      }
-   }
-
-   get position() {
-      return this._position;
-   }
-
-   set position(value) {
-      this._position = value;
-      if (value === 'fixed') {
-         this.classList.add('nav_bar_fixed');
-      }
-   }
-
-   get logo() {
-      return this._logo;
-   }
-
-   set logo(value) {
-      this._logo = value;
-      const img = document.createElement('img');
-      img.src = value.src;
-      this.$logoContainer.appendChild(img);
-      this.$logoContainer.href = value.path;
-   }
-
-   get items() {
-      return this._items;
-   }
-
-   set items(values) {
-      this._items = values;
-   }
-
-   get buttons() {
-      return this._buttons;
-   }
-
-   set buttons(values) {
-      this._buttons = values;
-   }
-
-   get direction() {
-      return this._direction;
-   }
-
-   set direction(value) {
-      this._direction = value;
-      if (value === 'reverse') {
-         this.$header.classList.add('direction-row-reverse');
-      }
-   }
-
-   async addItem(value, addTo) {
-      const item = document.createElement('li');
-      const hover = document.createElement('div');
-      hover.classList.add('anim-item');
-      if (!value.type) {
-         value.type = 'text';
-      }
-      if (value.type === 'text') {
-         const link = await slice.build('Link', {
-            text: value.text,
-            path: value.path,
-            classes: 'item',
-         });
-         item.appendChild(link);
-      }
-      if (value.type === 'dropdown') {
-         const d = await slice.build('DropDown', {
-            label: value.text,
-            options: value.options,
-         });
-         d.classList.add('item');
-         item.appendChild(d);
-      }
-      item.appendChild(hover);
-      addTo.appendChild(item);
-   }
-
-   async addButton(value, addTo) {
-      if (!value.color) {
-         value.color = {
-            label: 'var(--primary-color-rgb)',
-            button: 'var(--primary-background-color)',
-         };
-      }
-      const button = await slice.build('Button', {
-         value: value.value,
-         customColor: value.color,
-         icon: value.icon,
-         onClickCallback: value.onClickCallback,
-      });
-      addTo.appendChild(button);
-   }
-}
-window.customElements.define('slice-nav-bar', Navbar);
+export default class Navbar extends HTMLElement {
+   constructor(props) {
+      super();
+      slice.attachTemplate(this);
+
+      this.$header = this.querySelector('.slice_nav_header');
+      this.$navBar = this.querySelector('.slice_nav_bar');
+      this.$menu = this.querySelector('.nav_bar_menu');
+      this.$buttonsContainer = this.querySelector('.nav_bar_buttons');
+      this.$logoContainer = this.querySelector('.logo_container');
+      this.$mobileMenu = this.querySelector('.slice_mobile_menu');
+      this.$mobileButton = this.querySelector('.mobile_menu_button');
+      this.$closeMenu = this.querySelector('.mobile_close_menu');
+
+      this.$mobileButton.addEventListener('click', () => {
+         this.$navBar.style.transform = 'translateX(0%)';
+      });
+
+      this.$closeMenu.addEventListener('click', () => {
+         this.$navBar.style.transform = 'translateX(100%)';
+      });
+
+      slice.controller.setComponentProps(this, props);
+      this.debuggerProps = ['logo', 'items'];
+   }
+
+   async init() {
+      if (this.items) {
+         await this.addItems(this.items);
+      }
+      if (this.buttons) {
+         this.buttons.forEach(async (item) => {
+            await this.addButton(item, this.$buttonsContainer);
+         });
+      }
+
+      if (window.screen.width >= 1020 && this.items && this.logo && this.buttons) {
+         this.$menu.style.maxWidth = '60%';
+      }
+   }
+
+   async addItems(items) {
+      for (let i = 0; i < items.length; i++) {
+         await this.addItem(items[i], this.$menu);
+      }
+   }
+
+   get position() {
+      return this._position;
+   }
+
+   set position(value) {
+      this._position = value;
+      if (value === 'fixed') {
+         this.classList.add('nav_bar_fixed');
+      }
+   }
+
+   get logo() {
+      return this._logo;
+   }
+
+   set logo(value) {
+      this._logo = value;
+      const img = document.createElement('img');
+      img.src = value.src;
+      this.$logoContainer.appendChild(img);
+      this.$logoContainer.href = value.path;
+   }
+
+   get items() {
+      return this._items;
+   }
+
+   set items(values) {
+      this._items = values;
+   }
+
+   get buttons() {
+      return this._buttons;
+   }
+
+   set buttons(values) {
+      this._buttons = values;
+   }
+
+   get direction() {
+      return this._direction;
+   }
+
+   set direction(value) {
+      this._direction = value;
+      if (value === 'reverse') {
+         this.$header.classList.add('direction-row-reverse');
+      }
+   }
+
+   async addItem(value, addTo) {
+      const item = document.createElement('li');
+      const hover = document.createElement('div');
+      hover.classList.add('anim-item');
+      if (!value.type) {
+         value.type = 'text';
+      }
+      if (value.type === 'text') {
+         const link = await slice.build('Link', {
+            text: value.text,
+            path: value.path,
+            classes: 'item',
+         });
+         item.appendChild(link);
+      }
+      if (value.type === 'dropdown') {
+         const d = await slice.build('DropDown', {
+            label: value.text,
+            options: value.options,
+         });
+         d.classList.add('item');
+         item.appendChild(d);
+      }
+      item.appendChild(hover);
+      addTo.appendChild(item);
+   }
+
+   async addButton(value, addTo) {
+      if (!value.color) {
+         value.color = {
+            label: 'var(--primary-color-rgb)',
+            button: 'var(--primary-background-color)',
+         };
+      }
+      const button = await slice.build('Button', {
+         value: value.value,
+         customColor: value.color,
+         icon: value.icon,
+         onClickCallback: value.onClickCallback,
+      });
+      addTo.appendChild(button);
+   }
+}
+window.customElements.define('slice-nav-bar', Navbar);