slicejs-web-framework 3.2.3 → 3.3.0

package/src/Components/Visual/Layout/Layout.js

@@ -1,49 +1,49 @@
-export default class Layout extends HTMLElement {
-   constructor(props) {
-      super();
-      slice.attachTemplate(this);
-
-      slice.controller.setComponentProps(this, props);
-      this.debuggerProps = [];
-      this.currentView = null;
-   }
-
-   async init() {
-      if (this.layout) {
-         await this.onLayOut(this.layout);
-      }
-      if (this.view) {
-         await this.showing(this.view);
-      }
-   }
-
-   get layout() {
-      return this._layout;
-   }
-
-   set layout(value) {
-      this._layout = value;
-   }
-
-   get view() {
-      return this._view;
-   }
-
-   set view(value) {
-      this._view = value;
-   }
-
-   async showing(view) {
-      if (this.currentView) {
-         this.removeChild(this.currentView);
-      }
-      this.appendChild(view);
-      this.currentView = view;
-   }
-
-   async onLayOut(view) {
-      this.appendChild(view);
-   }
-}
-
-customElements.define('slice-layout', Layout);
+export default class Layout extends HTMLElement {
+   constructor(props) {
+      super();
+      slice.attachTemplate(this);
+
+      slice.controller.setComponentProps(this, props);
+      this.debuggerProps = [];
+      this.currentView = null;
+   }
+
+   async init() {
+      if (this.layout) {
+         await this.onLayOut(this.layout);
+      }
+      if (this.view) {
+         await this.showing(this.view);
+      }
+   }
+
+   get layout() {
+      return this._layout;
+   }
+
+   set layout(value) {
+      this._layout = value;
+   }
+
+   get view() {
+      return this._view;
+   }
+
+   set view(value) {
+      this._view = value;
+   }
+
+   async showing(view) {
+      if (this.currentView) {
+         this.removeChild(this.currentView);
+      }
+      this.appendChild(view);
+      this.currentView = view;
+   }
+
+   async onLayOut(view) {
+      this.appendChild(view);
+   }
+}
+
+customElements.define('slice-layout', Layout);

package/src/Components/Visual/Link/Link.css

@@ -1,8 +1,8 @@
-slice-link {
-  display: inline-flex;
-}
-
-slice-link .slice-link {
-  color: inherit;
-  text-decoration: none;
-}
+slice-link {
+  display: inline-flex;
+}
+
+slice-link .slice-link {
+  color: inherit;
+  text-decoration: none;
+}

package/src/Components/Visual/Link/Link.html

@@ -1 +1 @@
-<a href="#" class="slice-link" data-route></a>
+<a href="#" class="slice-link" data-route></a>

package/src/Components/Visual/Link/Link.js

@@ -1,63 +1,63 @@
-export default class Link extends HTMLElement {
-  static props = {
-    path: { type: 'string', default: '#' },
-    classes: { type: 'string', default: '' },
-    text: { type: 'string', default: '' }
-  };
-
-  constructor(props = {}) {
-    super();
-    slice.attachTemplate(this);
-    this.$anchor = this.querySelector('.slice-link');
-
-    slice.controller.setComponentProps(this, props);
-    this.debuggerProps = ['path', 'classes', 'text'];
-  }
-
-  async init() {
-    this.updateLink();
-    this.addEventListener('click', this.onClick.bind(this));
-  }
-
-  updateLink() {
-    if (!this.$anchor) return;
-    this.$anchor.setAttribute('href', this.path || '#');
-    this.$anchor.textContent = this.text || '';
-    this.$anchor.className = `slice-link ${this.classes || ''}`.trim();
-  }
-
-  async onClick(event) {
-    event.preventDefault();
-    const path = this.path || this.$anchor?.getAttribute('href') || '#';
-    slice.router.navigate(path);
-  }
-
-  set path(value) {
-    this._path = value;
-    this.updateLink();
-  }
-
-  get path() {
-    return this._path;
-  }
-
-  set classes(value) {
-    this._classes = value;
-    this.updateLink();
-  }
-
-  get classes() {
-    return this._classes;
-  }
-
-  set text(value) {
-    this._text = value;
-    this.updateLink();
-  }
-
-  get text() {
-    return this._text;
-  }
-}
-
-customElements.define('slice-link', Link);
+export default class Link extends HTMLElement {
+  static props = {
+    path: { type: 'string', default: '#' },
+    classes: { type: 'string', default: '' },
+    text: { type: 'string', default: '' }
+  };
+
+  constructor(props = {}) {
+    super();
+    slice.attachTemplate(this);
+    this.$anchor = this.querySelector('.slice-link');
+
+    slice.controller.setComponentProps(this, props);
+    this.debuggerProps = ['path', 'classes', 'text'];
+  }
+
+  async init() {
+    this.updateLink();
+    this.addEventListener('click', this.onClick.bind(this));
+  }
+
+  updateLink() {
+    if (!this.$anchor) return;
+    this.$anchor.setAttribute('href', this.path || '#');
+    this.$anchor.textContent = this.text || '';
+    this.$anchor.className = `slice-link ${this.classes || ''}`.trim();
+  }
+
+  async onClick(event) {
+    event.preventDefault();
+    const path = this.path || this.$anchor?.getAttribute('href') || '#';
+    slice.router.navigate(path);
+  }
+
+  set path(value) {
+    this._path = value;
+    this.updateLink();
+  }
+
+  get path() {
+    return this._path;
+  }
+
+  set classes(value) {
+    this._classes = value;
+    this.updateLink();
+  }
+
+  get classes() {
+    return this._classes;
+  }
+
+  set text(value) {
+    this._text = value;
+    this.updateLink();
+  }
+
+  get text() {
+    return this._text;
+  }
+}
+
+customElements.define('slice-link', Link);

package/src/Components/Visual/Loading/Loading.css

@@ -1,56 +1,56 @@
-.pizza-container {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: absolute;
-  z-index: 499;
-}
-
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes fade {
-  0% {
-    opacity: 0;
-  }
-
-  50% {
-    opacity: 1;
-  }
-
-  100% {
-    opacity: 0;
-  }
-}
-
-.slice_logo {
-  animation: spin 0.1s linear infinite;
-  height: 50px;
-  width: 50px;
-  position: absolute;
-
-  path {
-    fill: var(--primary-color);
-  }
-}
-
-.full-screen {
-  height: 100%;
-  width: 100%;
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background: rgba(90, 90, 90, 0.5);
-  z-index: 500;
-}
+.pizza-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  z-index: 499;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes fade {
+  0% {
+    opacity: 0;
+  }
+
+  50% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+.slice_logo {
+  animation: spin 0.1s linear infinite;
+  height: 50px;
+  width: 50px;
+  position: absolute;
+
+  path {
+    fill: var(--primary-color);
+  }
+}
+
+.full-screen {
+  height: 100%;
+  width: 100%;
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: rgba(90, 90, 90, 0.5);
+  z-index: 500;
+}