vueless 0.0.2 → 0.0.3

package/layout-ui.loader/index.vue

@@ -1,61 +0,0 @@
-<template>
-  <transition name="loader">
-    <div v-if="isRenderingPage" class="app-loader">
-      <div class="lds-ripple">
-        <div></div>
-        <div></div>
-      </div>
-    </div>
-  </transition>
-</template>
-
-<script>
-import { mapState } from "vuex";
-
-export default {
-  name: "ULoader",
-
-  computed: {
-    ...mapState("loader", ["isRenderingPage"]),
-  },
-};
-</script>
-
-<style lang="postcss" scoped>
-.app-loader {
-  @apply flex justify-center;
-  @apply fixed left-0 top-0 z-50 h-screen w-screen;
-  @apply bg-gray-800;
-  @apply transition-all duration-300;
-
-  .lds-ripple {
-    @apply relative top-1/3 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/layout-ui.loader/store/index.js

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

package/layout-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: 350,
-    },
-
-    color: {
-      type: String,
-      default: "#29d",
-    },
-
-    colorShadow: {
-      type: String,
-      default: "",
-    },
-
-    errorColor: {
-      type: String,
-      default: "#f44336",
-    },
-
-    trickle: {
-      type: Boolean,
-      default: true,
-    },
-
-    trickleSpeed: {
-      type: Number,
-      default: 250,
-    },
-
-    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/layout-ui.loader-top/index.vue

@@ -1,218 +0,0 @@
-<template>
-  <TopProgress
-    ref="topProgress"
-    :color="loaderColor"
-    class="mono-top-loader"
-    :class="topLoaderClasses"
-  />
-</template>
-
-<script>
-import { mapGetters, mapMutations, mapState } from "vuex";
-import { globalComponentConfig, isMobileApp, tailwindConfig } from "vueless/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.UTopLoader?.color || "blue",
-    },
-  },
-
-  computed: {
-    ...mapState("loaderTop", ["loaderRequestQueue", "componentLoaderRequestQueue", "isLoading"]),
-    ...mapGetters({ hexColor: globalComponentConfig.UTopLoader?.colorGetter }),
-
-    loaderColor() {
-      const isExistHexColorGetter = globalComponentConfig.UTopLoader?.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);
-
-      if (!isColorHex && !colorSet) {
-        return "blue";
-      }
-
-      return isColorHex ? color : colorSet[colorNumber];
-    },
-
-    resourceNamesArray() {
-      return Array.isArray(this.resourceNames) ? [...this.resourceNames] : [this.resourceNames];
-    },
-
-    topLoaderClasses() {
-      const zIndex = {
-        auto: "mono-top-loader-z-auto",
-        50: "mono-top-loader-z-50",
-        100: "mono-top-loader-z-100",
-      };
-      const position = `mono-top-loader-position-${this.position}`;
-      const mobileApp = isMobileApp ? "mono-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>
-.mono-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/layout-ui.loader-top/store/index.js

@@ -1,55 +0,0 @@
-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) => {
-      state.loaderRequestQueue.forEach((item, index) => {
-        if (item === url) {
-          state.loaderRequestQueue.splice(index, 1);
-        }
-      });
-
-      state.requestTimeout = 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 = [];
-    },
-  },
-};