vueless 0.0.13 → 0.0.15

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

@@ -1,277 +0,0 @@
-<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/ui.loader-top/index.vue

@@ -1,221 +0,0 @@
-<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>