vueless 0.0.1

package/index.js

@@ -0,0 +1,151 @@
+/* Buttons & Links */
+import UButton from "./ui.button";
+import UButtonGroup from "./ui.button-group";
+import UButtonGroupItem from "./ui.button-group-item";
+import UButtonExpand from "./ui.button-expand";
+import UButtonExpandItem from "./ui.button-expand-item";
+import ULink from "./ui.button-link";
+
+/* Dropdowns */
+import UDropdownButton from "./ui.dropdown-button";
+import UDropdownTag from "./ui.dropdown-tag";
+import UDropdownLink from "./ui.dropdown-link";
+import UDropdownItem from "./ui.dropdown-item";
+
+/* Form Inputs & Controls */
+import UInput from "./ui.form-input";
+import UInputFile from "./ui.form-input-file";
+import UInputMoney from "./ui.form-input-money";
+import UInputSearch from "./ui.form-input-search";
+import UInputNumber from "./ui.form-input-number";
+import UInputRating from "./ui.form-input-rating";
+import UTextarea from "./ui.form-textarea";
+import USelect from "./ui.form-select";
+import UMultiselect from "./ui.form-select-multi";
+import UCheckbox from "./ui.form-checkbox";
+import UCheckboxGroup from "./ui.form-checkbox-group";
+import UCheckboxMultiState from "./ui.form-checkbox-multi-state";
+import USwitch from "./ui.form-switch";
+import URadio from "./ui.form-radio";
+import URadioCard from "./ui.form-radio-card";
+import URadioGroup from "./ui.form-radio-group";
+import UDatePicker from "./ui.form-date-picker";
+import UDatePickerRange from "./ui.form-date-picker-range";
+
+/* Text & Content */
+import UHeader from "./ui.text-header";
+import UText from "./ui.text-block";
+import UAlert from "./ui.text-alert";
+import UMoney from "./ui.text-money";
+import UFile from "./ui.text-file";
+import UFiles from "./ui.text-files";
+import UField from "./ui.text-field";
+import UEmpty from "./ui.text-empty";
+import UTag from "./ui.text-tag";
+
+/* Containers */
+import UDivider from "./ui.container-divider";
+import URow from "./ui.container-row";
+import UGroup from "./ui.container-group";
+import UGroups from "./ui.container-groups";
+import UAccordion from "./ui.container-accordion";
+import UCard from "./ui.container-card";
+import UModal from "./ui.container-modal";
+import UModalConfirm from "./ui.container-modal-confirm";
+import UPage from "./ui.container-page";
+
+/* Images and Icons */
+import UIcon from "./ui.image-icon";
+import ULogo from "./ui.image-logo";
+import UAvatar from "./ui.image-avatar";
+
+/* Data */
+import UTable from "./ui.data-table";
+import UDataList from "./ui.data-list";
+
+/* Navigation */
+import UTab from "./ui.navigation-tab";
+import UTabs from "./ui.navigation-tabs";
+import UStepper from "./ui.navigation-stepper";
+import UPagination from "./ui.navigation-pagination";
+
+/* Other */
+import UDot from "./ui.other-dot";
+import ULoader from "./ui.other-loader";
+
+export {
+  /* Buttons & Links */
+  UButton,
+  UButtonGroup,
+  UButtonGroupItem,
+  UButtonExpand,
+  UButtonExpandItem,
+  ULink,
+
+  /* Dropdowns */
+  UDropdownButton,
+  UDropdownTag,
+  UDropdownLink,
+  UDropdownItem,
+
+  /* Form Inputs & Controls */
+  UInput,
+  UInputFile,
+  UInputMoney,
+  UInputSearch,
+  UInputNumber,
+  UInputRating,
+  UTextarea,
+  USelect,
+  UMultiselect,
+  UCheckbox,
+  UCheckboxGroup,
+  UCheckboxMultiState,
+  USwitch,
+  URadio,
+  URadioCard,
+  URadioGroup,
+  UDatePicker,
+  UDatePickerRange,
+
+  /* Text & Content */
+  UHeader,
+  UText,
+  UAlert,
+  UMoney,
+  UFile,
+  UFiles,
+  UField,
+  UEmpty,
+  UTag,
+
+  /* Containers */
+  UDivider,
+  URow,
+  UGroup,
+  UGroups,
+  UAccordion,
+  UCard,
+  UModal,
+  UModalConfirm,
+  UPage,
+
+  /* Images and Icons */
+  UIcon,
+  ULogo,
+  UAvatar,
+
+  /* Data */
+  UTable,
+  UDataList,
+
+  /* Navigation */
+  UTab,
+  UTabs,
+  UStepper,
+  UPagination,
+
+  /* Other */
+  UDot,
+  ULoader,
+};

package/layout-ui.loader/index.vue

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

@@ -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/layout-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: 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

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