vueless 0.0.3 → 0.0.5

package/{ui.image-logo → src/ui.image-logo}/index.vue

@@ -13,7 +13,7 @@
 <script setup>
 import { computed } from "vue";
 
-import UIService from "vueless/service.ui";
+import UIService from "../service.ui";
 
 import { useAttrs } from "./composables/attrs.composable";
 import defaultConfig from "./configs/default.config";

package/src/ui.loader-rendering/index.vue

@@ -0,0 +1,72 @@
+<template>
+  <transition name="loader">
+    <div v-if="showLoader" class="app-loader">
+      <div class="lds-ripple">
+        <div></div>
+        <div></div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+import { mapState } from "vuex";
+
+export default {
+  name: "ULoaderRendering",
+
+  props: {
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  computed: {
+    ...mapState("loader", ["isRenderingPage"]),
+
+    showLoader() {
+      return this.loading || this.isRenderingPage;
+    },
+  },
+};
+</script>
+
+<style lang="postcss" scoped>
+.app-loader {
+  @apply flex justify-center items-center;
+  @apply fixed left-0 top-0 z-[9999] h-screen w-screen;
+  @apply bg-gray-800;
+  @apply transition-all duration-300;
+
+  .lds-ripple {
+    @apply relative h-40 w-40;
+    @apply ml-auto mr-auto;
+
+    div {
+      @apply absolute opacity-100;
+      @apply rounded-full border-4 border-solid border-white;
+      animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
+
+      &:nth-child(2) {
+        animation-delay: -0.5s;
+      }
+    }
+  }
+
+  @keyframes lds-ripple {
+    0% {
+      @apply left-20 top-20 h-0 w-0 opacity-100;
+    }
+
+    100% {
+      @apply left-0 top-0 h-40 w-40 opacity-0;
+    }
+  }
+}
+
+.loader-enter-from .loader-container-loader,
+.loader-leave-active .loader-container-loader {
+  @apply scale-110 transform;
+}
+</style>

package/src/ui.loader-rendering/store/index.js

@@ -0,0 +1,17 @@
+export default {
+  namespaced: true,
+
+  state: {
+    isRenderingPage: true,
+  },
+
+  mutations: {
+    SET_RENDERING_STARTED(state) {
+      state.isRenderingPage = true;
+    },
+
+    SET_RENDERING_FINISHED(state) {
+      state.isRenderingPage = false;
+    },
+  },
+};

package/src/ui.loader-top/components/TopProgress.vue

@@ -0,0 +1,277 @@
+<template>
+  <transition :css="false" @beforeEnter="beforeEnter" @enter="enter" @afterEnter="afterEnter">
+    <div v-if="show" class="top-progress" :style="barStyle">
+      <div class="peg" :style="pegStyle"></div>
+    </div>
+  </transition>
+</template>
+
+<script>
+function clamp(n, min, max) {
+  if (n < min) {
+    return min;
+  }
+
+  if (n > max) {
+    return max;
+  }
+
+  return n;
+}
+
+let queue = (() => {
+  let pending = [];
+
+  function next() {
+    let fn = pending.shift();
+
+    if (fn) {
+      fn(next);
+    }
+  }
+
+  return (fn) => {
+    pending.push(fn);
+
+    if (pending.length === 1) {
+      next();
+    }
+  };
+})();
+
+export default {
+  name: "VueTopprogress",
+
+  props: {
+    speed: {
+      type: Number,
+      default: 150,
+    },
+
+    color: {
+      type: String,
+      default: "#29d",
+    },
+
+    colorShadow: {
+      type: String,
+      default: "",
+    },
+
+    errorColor: {
+      type: String,
+      default: "#f44336",
+    },
+
+    trickle: {
+      type: Boolean,
+      default: true,
+    },
+
+    trickleSpeed: {
+      type: Number,
+      default: 100,
+    },
+
+    easing: {
+      type: String,
+      default: "linear",
+    },
+
+    height: {
+      type: Number,
+      default: 3,
+    },
+
+    minimum: {
+      type: Number,
+      default: 0.8,
+    },
+
+    maximum: {
+      type: Number,
+      default: 97.5,
+    },
+
+    zIndex: {
+      type: Number,
+      default: 9999,
+    },
+  },
+
+  data() {
+    return {
+      error: false,
+      show: false,
+      progress: 0,
+      opacity: 1,
+      status: null,
+      isPaused: false,
+    };
+  },
+
+  computed: {
+    progressColor() {
+      return this.error ? this.errorColor : this.color;
+    },
+
+    isStarted() {
+      return typeof this.status === "number";
+    },
+
+    boxShadow() {
+      return this.colorShadow || this.progressColor;
+    },
+
+    barStyle() {
+      return {
+        position: "fixed",
+        top: "0",
+        left: "0",
+        right: "0",
+        width: `${this.progress}%`,
+        height: `${this.height}px`,
+        backgroundColor: this.progressColor,
+        transition: `all ${this.speed}ms ${this.easing}`,
+        opacity: `${this.opacity}`,
+        zIndex: `${this.zIndex}`,
+      };
+    },
+
+    pegStyle() {
+      return {
+        display: "block",
+        position: "absolute",
+        right: "0",
+        width: "100px",
+        height: "100%",
+        opacity: this.progress ? "1" : "0",
+        boxShadow: `0 0 10px ${this.boxShadow}, 0 0 5px ${this.boxShadow}`,
+        transform: "rotate(3deg) translate(0px, -4px)",
+      };
+    },
+  },
+
+  methods: {
+    beforeEnter() {
+      this.opacity = 0;
+      this.progress = 0;
+      this.width = 0;
+    },
+
+    enter(el, done) {
+      this.opacity = 1;
+      done();
+    },
+
+    afterEnter() {
+      this._runStart();
+    },
+
+    _work() {
+      setTimeout(() => {
+        if (!this.isStarted || this.isPaused) {
+          return;
+        }
+
+        this.increase();
+        this._work();
+      }, this.trickleSpeed);
+    },
+
+    _runStart() {
+      this.status = this.progress === 100 ? null : this.progress;
+
+      if (this.trickle) {
+        this._work();
+      }
+    },
+
+    start() {
+      this.isPaused = false;
+
+      if (this.show) {
+        this._runStart();
+      } else {
+        this.show = true;
+      }
+    },
+
+    set(amount) {
+      this.isPaused = false;
+
+      let o;
+
+      if (this.isStarted) {
+        o = amount < this.progress ? clamp(amount, 0, 100) : clamp(amount, this.minimum, 100);
+      } else {
+        o = 0;
+      }
+
+      this.status = o === 100 ? null : o;
+
+      queue((next) => {
+        this.progress = o;
+
+        if (o === 100) {
+          setTimeout(() => {
+            this.opacity = 0;
+            setTimeout(() => {
+              this.show = false;
+              this.error = false;
+              next();
+            }, this.speed);
+          }, this.speed);
+        } else {
+          setTimeout(next, this.speed);
+        }
+      });
+    },
+
+    increase(amount) {
+      let o = this.progress;
+
+      if (o < 100 && typeof amount !== "number") {
+        if (o >= 0 && o < 25) {
+          amount = Math.random() * 3 + 3;
+        } else if (o >= 25 && o < 50) {
+          amount = Math.random() * 3;
+        } else if (o >= 50 && o < 85) {
+          amount = Math.random() * 2;
+        } else if (o >= 85 && o < 99) {
+          amount = 0.5;
+        } else {
+          amount = 0;
+        }
+      }
+
+      this.set(clamp(o + amount, 0, this.maximum));
+    },
+
+    decrease(amount) {
+      if (this.progress === 0) {
+        return;
+      }
+
+      this.increase(-amount);
+    },
+
+    done() {
+      this.set(100);
+    },
+
+    getProgress() {
+      return this.status ? this.progress : 0;
+    },
+
+    pause() {
+      this.isPaused = true;
+    },
+
+    fail() {
+      this.error = true;
+      this.done();
+    },
+  },
+};
+</script>

package/src/ui.loader-top/index.vue

@@ -0,0 +1,221 @@
+<template>
+  <TopProgress
+    ref="topProgress"
+    :color="loaderColor"
+    class="vueless-top-loader"
+    :class="topLoaderClasses"
+  />
+</template>
+
+<script>
+import { mapGetters, mapMutations, mapState } from "vuex";
+import { globalComponentConfig, isMobileApp } from "../service.ui";
+
+import TopProgress from "./components/TopProgress.vue";
+
+export default {
+  name: "ULoaderTop",
+  components: {
+    TopProgress,
+  },
+
+  props: {
+    /**
+     * The name of API resource (endpoint URI).
+     */
+    resourceNames: {
+      type: [String, Array],
+      default: "",
+    },
+
+    /**
+     * The z-list of the loader stripe.
+     * @values auto, 50, 100
+     */
+    zIndex: {
+      type: String,
+      default: "auto",
+    },
+
+    /**
+     * Loader position.
+     * @values fixed, absolute, relative
+     */
+    position: {
+      type: String,
+      default: "fixed",
+    },
+
+    /**
+     * The color of the loader stripe.
+     * @values gray, red, orange, yellow, green, blue, violet, fuchsia
+     */
+    color: {
+      type: String,
+      default: globalComponentConfig.ULoaderTop?.color,
+    },
+  },
+
+  computed: {
+    ...mapState("loaderTop", ["loaderRequestQueue", "componentLoaderRequestQueue", "isLoading"]),
+    ...mapGetters({ hexColor: globalComponentConfig.ULoaderTop?.colorGetter }),
+
+    loaderColor() {
+      const isExistHexColorGetter = globalComponentConfig.ULoaderTop?.colorGetter;
+
+      const color = isExistHexColorGetter ? this.hexColor : this.color;
+      //const colorSet = tailwindConfig.theme.colors[this.color];
+      //const colorNumber = 500;
+
+      const colorHexRegex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
+      const isColorHex = colorHexRegex.test(color);
+
+      // TODO: Remove comments after refactoring
+      // if (!isColorHex && !colorSet) {
+      //   return "blue";
+      // }
+
+      return isColorHex ? color : "RoyalBlue";
+
+      //return isColorHex ? color : colorSet[colorNumber];
+    },
+
+    resourceNamesArray() {
+      return Array.isArray(this.resourceNames) ? [...this.resourceNames] : [this.resourceNames];
+    },
+
+    topLoaderClasses() {
+      const zIndex = {
+        auto: "vueless-top-loader-z-auto",
+        50: "vueless-top-loader-z-50",
+        100: "vueless-top-loader-z-100",
+      };
+      const position = `vueless-top-loader-position-${this.position}`;
+      const mobileApp = isMobileApp ? "vueless-top-loader-mobile-app" : "";
+
+      return [zIndex[this.zIndex], position, mobileApp];
+    },
+  },
+
+  watch: {
+    loaderRequestQueue: {
+      deep: true,
+      handler: "onChangeRequestsQuare",
+    },
+
+    isLoading: {
+      deep: true,
+      handler: "onChangeLoadingState",
+    },
+  },
+
+  created() {
+    if (this.resourceNames) {
+      this.SET_COMPONENT_REQUEST_QUEUE(this.resourceNamesArray);
+    }
+  },
+
+  beforeUnmount() {
+    if (this.resourceNames) {
+      this.REMOVE_COMPONENT_REQUEST_QUEUE();
+    }
+  },
+
+  methods: {
+    ...mapMutations("loaderTop", ["SET_COMPONENT_REQUEST_QUEUE", "REMOVE_COMPONENT_REQUEST_QUEUE"]),
+
+    requestWithoutQuery(request) {
+      const [requestWithoutQuery] = request.split("?");
+
+      return requestWithoutQuery;
+    },
+
+    onChangeLoadingState() {
+      if (!this.$refs.topProgress) return;
+
+      if (
+        !this.resourceNames &&
+        this.$refs.topProgress.isStarted &&
+        this.$refs.topProgress.show &&
+        !this.isLoading
+      ) {
+        this.$refs.topProgress.done();
+      }
+    },
+
+    onChangeRequestsQuare() {
+      if (!this.$refs.topProgress) return;
+
+      let isActiveRequests = false;
+
+      if (this.resourceNames) {
+        this.resourceNamesArray.forEach((item) => {
+          if (!isActiveRequests) {
+            const activeRequest = this.loaderRequestQueue.find(
+              (request) => this.requestWithoutQuery(request) === item,
+            );
+
+            isActiveRequests = !!activeRequest;
+          }
+        });
+
+        if (isActiveRequests && !this.$refs.topProgress.isStarted) {
+          this.$refs.topProgress.start();
+        } else if (
+          !isActiveRequests &&
+          this.$refs.topProgress.isStarted &&
+          this.$refs.topProgress.show
+        ) {
+          this.$refs.topProgress.done();
+        }
+      } else {
+        this.loaderRequestQueue.forEach((item) => {
+          const activeRequest = this.componentLoaderRequestQueue.find(
+            (request) => request === this.requestWithoutQuery(item),
+          );
+
+          isActiveRequests = !activeRequest;
+        });
+
+        if (this.isLoading && isActiveRequests && !this.$refs.topProgress.isStarted) {
+          this.$refs.topProgress.start();
+        }
+      }
+    },
+  },
+};
+</script>
+
+<style lang="postcss" scoped>
+.vueless-top-loader {
+  &-position {
+    &-fixed {
+      @apply !fixed;
+    }
+
+    &-absolute {
+      @apply !absolute;
+    }
+  }
+
+  &-z-auto {
+    @apply !z-auto;
+  }
+
+  &-z-50 {
+    @apply !z-50;
+  }
+
+  &-z-100 {
+    @apply !z-[100];
+  }
+
+  &-mobile-app {
+    @apply mt-safe-top mx-3 rounded max-w-[calc(100%-1.5rem)];
+  }
+
+  &:deep(.peg) {
+    @apply !hidden;
+  }
+}
+</style>

package/src/ui.loader-top/store/index.js

@@ -0,0 +1,59 @@
+export default {
+  namespaced: true,
+
+  state: {
+    isLoading: false,
+    requestQueue: [],
+    loaderRequestQueue: [],
+    loaderRequestTimeout: 0,
+    componentLoaderRequestQueue: [],
+  },
+
+  mutations: {
+    SET_LOADING_ON: (state, url) => {
+      state.loaderRequestQueue.push(url);
+
+      state.isLoading = true;
+
+      clearTimeout(state.loaderRequestTimeout);
+    },
+
+    SET_LOADING_OFF: (state, url) => {
+      if (url) {
+        state.loaderRequestQueue.forEach((item, index) => {
+          if (item === url) {
+            state.loaderRequestQueue.splice(index, 1);
+          }
+        });
+      } else {
+        state.loaderRequestQueue = [];
+      }
+
+      state.loaderRequestTimeout = setTimeout(() => {
+        if (!state.loaderRequestQueue.length) {
+          state.isLoading = false;
+        }
+      }, 50);
+    },
+
+    ADD_REQUEST_URL: (state, url) => {
+      state.requestQueue.push(url);
+    },
+
+    REMOVE_REQUEST_URL: (state, url) => {
+      state.requestQueue.forEach((item, index) => {
+        if (item === url) {
+          state.requestQueue.splice(index, 1);
+        }
+      });
+    },
+
+    SET_COMPONENT_REQUEST_QUEUE(state, requests) {
+      state.componentLoaderRequestQueue = [...state.componentLoaderRequestQueue, ...requests];
+    },
+
+    REMOVE_COMPONENT_REQUEST_QUEUE(state) {
+      state.componentLoaderRequestQueue = [];
+    },
+  },
+};

package/{ui.navigation-pagination → src/ui.navigation-pagination}/composables/attrs.composable.js

@@ -1,7 +1,7 @@
-import useUI from "vueless/composable.ui";
+import useUI from "../../composable.ui";
 
 import defaultConfig from "../configs/default.config";
-import { cx } from "vueless/service.ui";
+import { cx } from "../../service.ui";
 import { computed } from "vue";
 
 export function useAttrs(props) {

package/{ui.navigation-pagination → src/ui.navigation-pagination}/index.stories.js

@@ -1,6 +1,6 @@
-import { getArgTypes } from "vueless/service.storybook";
+import { getArgTypes } from "../service.storybook";
 
-import UPagination from "vueless/ui.navigation-pagination";
+import UPagination from "../ui.navigation-pagination";
 
 export default {
   id: "8040",

package/{ui.navigation-pagination → src/ui.navigation-pagination}/index.vue

@@ -79,8 +79,8 @@
 <script setup>
 import { computed } from "vue";
 
-import range from "lodash.range";
-import UIService from "vueless/service.ui";
+import { range } from "lodash-es";
+import UIService from "../service.ui";
 
 import defaultConfig from "./configs/default.config";
 import { UPagination, ELLIPSIS_LABEL } from "./constants";

package/{ui.navigation-stepper → src/ui.navigation-stepper}/composables/attrs.composable.js

@@ -1,4 +1,4 @@
-import useUI from "vueless/composable.ui";
+import useUI from "../../composable.ui";
 
 import defaultConfig from "../configs/default.config";
 

package/{ui.navigation-stepper → src/ui.navigation-stepper}/index.stories.js

@@ -1,6 +1,6 @@
-import { getArgTypes } from "vueless/service.storybook";
+import { getArgTypes } from "../service.storybook";
 
-import UStepper from "vueless/ui.navigation-stepper";
+import UStepper from "../ui.navigation-stepper";
 
 export default {
   id: "8030",