@vixcom/ui 1.0.0 → 1.2.0

package/{js → dist/js}/sidebar.min.js

@@ -1,50 +1,50 @@
-'use strict';
-
-(() => {
-  let p = $('.sidebar-container'),
-    t; // Global scope for 'sidebar-container' and 'sidebar'
-  // const _b = (t, p) => { // Observable callback
-  //     let b = p.find('.sidebar-overlay');
-  //     if (window.screen.width <= 576 && p && t) {
-  //       if (p.is('.sidebar-toggled')) {
-  //         if (b.length == 0) {
-  //           b = $(document.createElement('div'));
-  //           b.on('click', e => {
-  //             p.removeClass('sidebar-toggled');
-  //           });
-  //           p.append(b);
-  //         }
-  //         b.attr('class', t.is('[with-backdrop]') ? 'sidebar-backdrop sidebar-overlay' : 'sidebar-overlay');
-  //       } else {
-  //         b.remove();
-  //       }
-  //     }
-  // };
-  // const _mc = (mt, o) => {
-  //   for (var m of mt) {
-  //     if (m.type == 'attributes' && m.attributeName == 'class') {
-  //       _b(t, p);
-  //     }
-  //   }
-  // };
-  // const _m = new MutationObserver(_mc);
-  // for (const _p of p) _m.observe(_p, {
-  //   attributes: true
-  // }); // Observe change in 'sidebar-container' classList
-  $('.page-container').click(e => { // Close sidebar on page-container shadow clicked
-    if (window.screen.width <= 576 && p && p.is('.sidebar-toggled') && !$(e.target).is('[data-toggle="sidebar"]')) p.removeClass('sidebar-toggled');
-  });
-  $('[data-toggle="sidebar"]').click(e => { // Listen for click event on sidebar toggler button
-    t = $(e.target).data('target') && $($(e.target).data('target')) || !!$(e.target).parents('.sidebar').length && $(e.target).parent('.sidebar') || !!$(e.target).next('.sidebar').length && $(e.target).next('.sidebar');
-    if (!t.length) return;
-    p = t.parents('.sidebar-container');
-    p.toggleClass('sidebar-toggled');
-  });
-  document.addEventListener('keyup', e => { // Close sidebar on ESC key pressed
-    if (window.screen.width <= 576 && p && p.is('.sidebar-toggled') && e.keyCode === 27) {
-      e.preventDefault();
-      // Process event...
-      p.removeClass('sidebar-toggled');
-    }
-  }, false);
+'use strict';
+
+(() => {
+  let p = $('.sidebar-container'),
+    t; // Global scope for 'sidebar-container' and 'sidebar'
+  // const _b = (t, p) => { // Observable callback
+  //     let b = p.find('.sidebar-overlay');
+  //     if (window.screen.width <= 576 && p && t) {
+  //       if (p.is('.sidebar-toggled')) {
+  //         if (b.length == 0) {
+  //           b = $(document.createElement('div'));
+  //           b.on('click', e => {
+  //             p.removeClass('sidebar-toggled');
+  //           });
+  //           p.append(b);
+  //         }
+  //         b.attr('class', t.is('[with-backdrop]') ? 'sidebar-backdrop sidebar-overlay' : 'sidebar-overlay');
+  //       } else {
+  //         b.remove();
+  //       }
+  //     }
+  // };
+  // const _mc = (mt, o) => {
+  //   for (var m of mt) {
+  //     if (m.type == 'attributes' && m.attributeName == 'class') {
+  //       _b(t, p);
+  //     }
+  //   }
+  // };
+  // const _m = new MutationObserver(_mc);
+  // for (const _p of p) _m.observe(_p, {
+  //   attributes: true
+  // }); // Observe change in 'sidebar-container' classList
+  $('.page-container').click(e => { // Close sidebar on page-container shadow clicked
+    if (window.screen.width <= 576 && p && p.is('.sidebar-toggled') && !$(e.target).is('[data-toggle="sidebar"]')) p.removeClass('sidebar-toggled');
+  });
+  $('[data-toggle="sidebar"]').click(e => { // Listen for click event on sidebar toggler button
+    t = $(e.target).data('target') && $($(e.target).data('target')) || !!$(e.target).parents('.sidebar').length && $(e.target).parent('.sidebar') || !!$(e.target).next('.sidebar').length && $(e.target).next('.sidebar');
+    if (!t.length) return;
+    p = t.parents('.sidebar-container');
+    p.toggleClass('sidebar-toggled');
+  });
+  document.addEventListener('keyup', e => { // Close sidebar on ESC key pressed
+    if (window.screen.width <= 576 && p && p.is('.sidebar-toggled') && e.keyCode === 27) {
+      e.preventDefault();
+      // Process event...
+      p.removeClass('sidebar-toggled');
+    }
+  }, false);
 })();

package/firebase.json

@@ -1,55 +1,55 @@
-{
-  "hosting": [
-    {
-      "target": "prod",
-      "public": "./",
-      "ignore": [
-        "firebase.json",
-        "**/.git/**",
-        "**/.github/**",
-        "**/node_modules/**"
-      ],
-      "appAssociation": "AUTO",
-      "rewrites": [
-        {
-          "source": "**",
-          "destination": "/index.html"
-        }
-      ]
-    },
-    {
-      "target": "dashboard",
-      "public": "./",
-      "ignore": [
-        "**.map",
-        "firebase.json",
-        ".firebaserc",
-        "**/.git/**",
-        "**/.github/**",
-        "**/node_modules/**"
-      ],
-      "appAssociation": "AUTO",
-      "rewrites": [
-        {
-          "source": "/styles{,/**}",
-          "destination": "/pages/error/index.html"
-        },
-        {
-          "source": "**",
-          "destination": "/pages/error/index.html"
-        }
-      ],
-      "headers": [
-        {
-          "source": "**/*.@(eot|otf|ttf|ttc|woff)",
-          "headers": [
-            {
-              "key": "Access-Control-Allow-Origin",
-              "value": "*"
-            }
-          ]
-        }
-      ]
-    }
-  ]
+{
+  "hosting": [
+    {
+      "target": "prod",
+      "public": "./",
+      "ignore": [
+        "firebase.json",
+        "**/.git/**",
+        "**/.github/**",
+        "**/node_modules/**"
+      ],
+      "appAssociation": "AUTO",
+      "rewrites": [
+        {
+          "source": "**",
+          "destination": "/index.html"
+        }
+      ]
+    },
+    {
+      "target": "dashboard",
+      "public": "dist",
+      "ignore": [
+        "**.map",
+        "firebase.json",
+        ".firebaserc",
+        "**/.git/**",
+        "**/.github/**",
+        "**/node_modules/**"
+      ],
+      "appAssociation": "AUTO",
+      "rewrites": [
+        {
+          "source": "/styles{,/**}",
+          "destination": "/pages/401.html"
+        },
+        {
+          "source": "**",
+          "destination": "/pages/404.html"
+        }
+      ],
+      "headers": [
+        {
+          "source": "**/*.@(eot|otf|ttf|ttc|woff)",
+          "headers": [
+            {
+              "key": "Access-Control-Allow-Origin",
+              "value": "*"
+            }
+          ]
+        }
+      ]
+    }
+  ]
 }

package/http-server.sh

@@ -1,4 +1,4 @@
-@echo off
-read -p "Please enter the server address: " server_address
-http-server -a=$project_name -p=1400 -s --cors
+@echo off
+read -p "Please enter the server address: " server_address
+http-server -a=$project_name -p=1400 -s --cors
 read -p "Press [Enter] key to continue..."

package/package.json

@@ -1,11 +1,16 @@
-{
-  "name": "@vixcom/ui",
-  "version": "1.0.0",
-  "scripts": {
-    "start": "http-server -P=http://127.0.0.1 -p=1400 -s --cors",
-    "serve": "sass styles:css --watch",
-    "build": "sass styles:css",
-    "preview": "npm run build && firebase serve --only hosting:dashboard --port=9000",
-    "deploy": "npm run build && firebase deploy --only hosting:dashboard"
-  }
+{
+  "name": "@vixcom/ui",
+  "version": "1.2.0",
+  "scripts": {
+    "start": "http-server -P=http://127.0.0.1 src -p=1400 -s --cors",
+    "serve": "sass src/styles:src/css -w",
+    "build": "sass src/styles:dist/css",
+    "preview": "npm run build && firebase serve --only hosting:dashboard --port=9000",
+    "deploy": "npm run build && firebase deploy --only hosting:dashboard"
+  },
+  "devDependencies": {
+    "http-server": "^14.1.1",
+    "sass": "^1.58.3",
+    "tailwindcss": "^3.2.7"
+  }
 }

package/{css → src/css}/animations.css

@@ -1,175 +1,174 @@
-@charset "UTF-8";
-.loading {
-  overflow: hidden;
-}
-
-.loading::before,
-.loading::after {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 1;
-  border-radius: inherit;
-}
-
-.loading::before {
-  content: "";
-  background-color: inherit;
-  /* opacity: 0.75; */
-  backdrop-filter: blur(5px);
-  animation: fade-out-half 5s linear infinite alternate;
-}
-
-.loading::after {
-  content: "" !important;
-  /* font-size: 200%; */
-  font-family: "FontAwesome";
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  opacity: 1 !important;
-  background-color: unset !important;
-  animation: rotate-clockwise 0.25s linear infinite;
-}
-
-.loading-anim {
-  position: relative;
-  display: block;
-  text-align: center;
-  min-width: 100%;
-  opacity: 0.75;
-  font-size: 75%;
-}
-.loading-anim .animi {
-  width: 50%;
-  height: 50%;
-  object-fit: contain;
-}
-.loading-anim.has-logo::after {
-  content: "";
-  background-image: url("/assets/img/icon.png");
-  background-size: contain;
-  background-clip: border-box;
-  background-repeat: no-repeat;
-  background-position: center;
-}
-.loading-anim .ani-logo, .loading-anim.has-logo::after {
-  position: absolute;
-  display: block;
-  object-fit: contain;
-  top: 50%;
-  left: 50%;
-  width: 25%;
-  height: 25%;
-  transform-origin: center;
-  transform: translate(-50%, -50%);
-  animation: fade-out-half 5s linear infinite alternate;
-}
-
-.list-loading {
-  width: 100%;
-  height: 5rem;
-}
-
-.loading-anim-list {
-  height: 5rem;
-  text-align: center;
-}
-.loading-anim-list img {
-  height: 100%;
-  width: 100%;
-}
-
-.drop-down {
-  animation: drop-down 1.2s linear;
-}
-
-.ind-x {
-  animation: x-ind-move 1.2s ease-out backwards infinite;
-}
-
-.spin {
-  animation: rotate-clockwise 1.2s linear infinite;
-}
-
-.pulse {
-  animation: rotate-clockwise 1.2s steps(6) infinite;
-}
-
-.rotate-clockwise {
-  animation: rotate-clockwise 1.2s linear;
-}
-
-.infinite {
-  animation-iteration-count: infinite;
-}
-
-@keyframes fade-out-half {
-  from {
-    opacity: 0.5;
-  }
-  to {
-    opacity: 1;
-  }
-}
-@keyframes x-ind-move {
-  from {
-    transform: translateX(1rem);
-  }
-}
-@keyframes drop-down {
-  from {
-    transform: translateY(0);
-  }
-}
-@keyframes rotate-clockwise {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(1turn);
-  }
-}
-@-webkit-keyframes rotate-clockwise {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(1turn);
-  }
-}
-@keyframes zoom-in-logo {
-  from {
-    transform-origin: center;
-    transform: scale(0);
-  }
-  to {
-    transform: scale(1);
-  }
-}
-.page-loading {
-  display: none;
-  align-items: center;
-  justify-content: center;
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  background-color: #ffffffb0;
-  z-index: 1;
-}
-.page-loading.show {
-  display: flex;
-}
-
-.show[class*=collapse-icon],
-.show [class*=collapse-icon],
-.collapsed[class*=collapse-icon],
-.collapsed [class*=collapse-icon] {
-  transform: rotateX(-0.5turn);
-}
-
-/*# sourceMappingURL=animations.css.map */
+.loading {
+  overflow: hidden;
+}
+
+.loading::before,
+.loading::after {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  border-radius: inherit;
+}
+
+.loading::before {
+  content: "";
+  background-color: inherit;
+  /* opacity: 0.75; */
+  backdrop-filter: blur(5px);
+  animation: fade-out-half 5s linear infinite alternate;
+}
+
+.loading::after {
+  content: "\f110" !important;
+  /* font-size: 200%; */
+  font-family: "FontAwesome";
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 1 !important;
+  background-color: unset !important;
+  animation: rotate-clockwise 0.25s linear infinite;
+}
+
+.loading-anim {
+  position: relative;
+  display: block;
+  text-align: center;
+  min-width: 100%;
+  opacity: 0.75;
+  font-size: 75%;
+}
+.loading-anim .animi {
+  width: 50%;
+  height: 50%;
+  object-fit: contain;
+}
+.loading-anim.has-logo::after {
+  content: "";
+  background-image: url("/assets/img/icon.png");
+  background-size: contain;
+  background-clip: border-box;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+.loading-anim .ani-logo, .loading-anim.has-logo::after {
+  position: absolute;
+  display: block;
+  object-fit: contain;
+  top: 50%;
+  left: 50%;
+  width: 25%;
+  height: 25%;
+  transform-origin: center;
+  transform: translate(-50%, -50%);
+  animation: fade-out-half 5s linear infinite alternate;
+}
+
+.list-loading {
+  width: 100%;
+  height: 5rem;
+}
+
+.loading-anim-list {
+  height: 5rem;
+  text-align: center;
+}
+.loading-anim-list img {
+  height: 100%;
+  width: 100%;
+}
+
+.drop-down {
+  animation: drop-down 1.2s linear;
+}
+
+.ind-x {
+  animation: x-ind-move 1.2s ease-out backwards infinite;
+}
+
+.spin {
+  animation: rotate-clockwise 1.2s linear infinite;
+}
+
+.pulse {
+  animation: rotate-clockwise 1.2s steps(6) infinite;
+}
+
+.rotate-clockwise {
+  animation: rotate-clockwise 1.2s linear;
+}
+
+.infinite {
+  animation-iteration-count: infinite;
+}
+
+@keyframes fade-out-half {
+  from {
+    opacity: 0.5;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes x-ind-move {
+  from {
+    transform: translateX(1rem);
+  }
+}
+@keyframes drop-down {
+  from {
+    transform: translateY(0);
+  }
+}
+@keyframes rotate-clockwise {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(1turn);
+  }
+}
+@-webkit-keyframes rotate-clockwise {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(1turn);
+  }
+}
+@keyframes zoom-in-logo {
+  from {
+    transform-origin: center;
+    transform: scale(0);
+  }
+  to {
+    transform: scale(1);
+  }
+}
+.page-loading {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background-color: rgba(255, 255, 255, 0.6901960784);
+  z-index: 1;
+}
+.page-loading.show {
+  display: flex;
+}
+
+.show[class*=collapse-icon],
+.show [class*=collapse-icon],
+.collapsed[class*=collapse-icon],
+.collapsed [class*=collapse-icon] {
+  transform: rotateX(-0.5turn);
+}
+
+/*# sourceMappingURL=animations.css.map */

package/src/css/animations.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../styles/animations.scss"],"names":[],"mappings":"AAAA;EACE;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;AACA;EACA;EACA;;;AAGF;EACE;AACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;;AAIJ;EACE;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;IACA;;EAGF;IACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAOF;AAAA;AAAA;AAAA;EAEE","file":"animations.css"}