vueless 0.0.3 → 0.0.4

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/src/ui.notify/index.vue

@@ -0,0 +1,248 @@
+<template>
+  <notifications
+    group="notify"
+    class="vueless-notify !top-3 mt-safe-top !w-full px-3 max-md:!left-0 md:!w-[22rem] md:px-0 lg:!top-4 lg:!mt-0"
+    :position="position"
+  >
+    <template #body="{ item, close: onClickClose }">
+      <div :data-cy="`${item.type}-notify`" class="notify-body" :class="[item.type]">
+        <UIcon
+          v-if="isSuccessType"
+          data-cy="type-notify"
+          class="type-icon"
+          name="check_circle"
+          size="md"
+        />
+
+        <UIcon
+          v-else-if="isWarningType"
+          data-cy="type-notify"
+          class="type-icon"
+          name="warning"
+          size="md"
+        />
+
+        <UIcon
+          v-else-if="isErrorType"
+          data-cy="type-notify"
+          class="type-icon"
+          name="error"
+          size="md"
+        />
+
+        <div class="color-white w-full max-w-full px-3 text-sm text-gray-200">
+          <div v-if="item.title" class="mb-1 font-medium" v-text="$t(item.title)" />
+          <div
+            class="break-words font-normal leading-5"
+            v-html="prepareMessage(item.data.code, item.type, item.text)"
+          />
+        </div>
+
+        <UIcon
+          data-cy="close-notify"
+          class="icon icon-close"
+          name="close"
+          size="xs"
+          interactive
+          @click="onClickClose"
+        />
+      </div>
+    </template>
+  </notifications>
+</template>
+
+<script>
+import { globalComponentConfig } from "../service.ui";
+
+import UIcon from "../ui.image-icon";
+
+const NOTIFY_TYPE = {
+  success: "success",
+  warning: "warning",
+  error: "error",
+};
+
+export default {
+  name: "UNotify",
+  components: {
+    UIcon,
+  },
+
+  props: {
+    /**
+     * A position on the x-axis.
+     * @values left, center, right
+     */
+    xPosition: {
+      type: String,
+      default: "center",
+    },
+
+    /**
+     * A position on the y-axis.
+     * @values top, bottom
+     */
+    yPosition: {
+      type: String,
+      default: "top",
+    },
+  },
+
+  data() {
+    return {
+      type: null,
+    };
+  },
+
+  computed: {
+    isSuccessType() {
+      return this.type === NOTIFY_TYPE.success;
+    },
+
+    isWarningType() {
+      return this.type === NOTIFY_TYPE.warning;
+    },
+
+    isErrorType() {
+      return this.type === NOTIFY_TYPE.error;
+    },
+
+    i18n() {
+      return {
+        message: `${this.type}.default`,
+      };
+    },
+
+    position() {
+      return [this.yPosition, this.xPosition];
+    },
+  },
+
+  created() {
+    window.addEventListener("resize", this.setPosition, { passive: true });
+  },
+
+  beforeUnmount() {
+    window.removeEventListener("resize", this.setPosition);
+  },
+
+  methods: {
+    prepareMessage(code, type, text) {
+      this.setPosition();
+
+      this.type = type;
+
+      if (text) {
+        return text;
+      }
+
+      return this.i18n.message;
+    },
+
+    setPosition() {
+      const getOffsetWidth = (className) =>
+        className ? document.querySelector(`.${className}`)?.offsetWidth : 0;
+
+      const NOTIFY_CLASS = "vueless-notify";
+      const classes = globalComponentConfig.UNotify?.positionClasses;
+      const pageWidth = getOffsetWidth(classes.page);
+      const asideWidth = getOffsetWidth(classes.aside);
+      const notifyWidth = getOffsetWidth(NOTIFY_CLASS);
+
+      if (!pageWidth) return;
+
+      const leftShift = asideWidth + pageWidth / 2 - notifyWidth / 2;
+
+      document.querySelector(`.${NOTIFY_CLASS}`).style.setProperty("left", `${leftShift}px`);
+    },
+  },
+};
+</script>
+
+<i18n>
+en:
+  success:
+    default: "Operation successful."
+  error:
+    default: "Operation error."
+  warning:
+    default: "Operation warning."
+ru:
+  success:
+    default: "Произошла ошибка."
+  error:
+    default: "Операция успешна."
+  warning:
+    default: "Предупреждение."
+ua:
+  success:
+    default: "Операція успішна."
+  error:
+    default: "Сталася помилка."
+  warning:
+    default: "Попередження."
+</i18n>
+
+<style lang="postcss" scoped>
+.vueless-notify {
+  :deep(.vue-notification-wrapper) {
+    @apply overflow-visible;
+  }
+
+  :deep(.notify-body) {
+    @apply rounded-2xl backdrop-blur-md;
+    @apply flex items-center;
+    @apply mb-3 p-4 shadow-[0_4px_16px_rgba(17,24,39,0.5)] md:shadow-[0_0px_12px_rgba(0,0,0,0.25)];
+
+    .icon-close {
+      path {
+        @apply fill-current text-gray-400;
+      }
+    }
+  }
+
+  :deep(.warning) {
+    background: radial-gradient(
+      100.16% 500.78% at 0% 50%,
+      rgba(251, 146, 60, 0.2) 2.17%,
+      transparent
+    );
+
+    .type-icon path {
+      @apply fill-current text-orange-400;
+    }
+  }
+
+  :deep(.success) {
+    background: radial-gradient(
+      100.16% 500.78% at 0% 50%,
+      rgba(74, 222, 128, 0.1) 2.17%,
+      transparent
+    );
+
+    .type-icon path {
+      @apply fill-current text-green-400;
+    }
+  }
+
+  :deep(.error) {
+    background: radial-gradient(
+      100.16% 500.78% at 0% 50%,
+      rgba(251, 113, 133, 0.2) 2.17%,
+      transparent
+    );
+
+    .type-icon path {
+      @apply fill-current text-red-400;
+    }
+  }
+
+  /*
+    NOTE! This expression should be declared after all subclasses,
+    otherwise we will get gradient with white background
+  */
+  :deep(.notify-body) {
+    @apply bg-gray-900 bg-opacity-90;
+  }
+}
+</style>

package/src/ui.notify/services/index.js

@@ -0,0 +1,87 @@
+import Vue3Notify, { notify as VueNotify } from "@kyvg/vue3-notification";
+import { globalComponentConfig } from "../../service.ui";
+
+const defaultDuration = {
+  short: 4000,
+  medium: 8000,
+  long: 12000,
+  permanent: 300000,
+};
+
+export default class NotifyServiceDefault {
+  notifyInstance = Vue3Notify;
+
+  #lastMessageTime = 0;
+  #lastMessageCode = "";
+
+  notify(settings) {
+    const { type, title, text, code, duration, ignoreDuplicates, closeOnClick, data } = settings;
+    const isSameMessage =
+      this.#lastMessageCode === code && new Date() - this.#lastMessageTime < 1000;
+
+    if (isSameMessage || !code) return;
+
+    this.#lastMessageTime = new Date();
+    this.#lastMessageCode = code;
+
+    VueNotify({
+      group: "notify",
+      type,
+      title: title || "",
+      text: text || "",
+      duration: duration || globalComponentConfig.UNotify?.duration?.short || defaultDuration.short,
+      ignoreDuplicates: ignoreDuplicates || false,
+      closeOnClick: closeOnClick || false,
+      data: { ...data, code },
+    });
+  }
+
+  success(code, duration = globalComponentConfig.UNotify?.duration?.short) {
+    this.notify({
+      type: "success",
+      code: code,
+      duration: duration,
+    });
+  }
+
+  warning(code, duration = globalComponentConfig.UNotify?.duration?.medium) {
+    this.notify({
+      type: "warning",
+      code: code,
+      duration: duration,
+    });
+  }
+
+  error(code, duration = globalComponentConfig.UNotify?.duration?.long) {
+    this.notify({
+      type: "error",
+      code: code,
+      duration: duration,
+    });
+  }
+
+  clearAll() {
+    VueNotify({
+      group: "notify",
+      clean: true,
+    });
+  }
+
+  setDelayed(type, message) {
+    localStorage.setItem("notify", JSON.stringify({ type, message }));
+  }
+
+  getDelayed() {
+    const notifyData = JSON.parse(localStorage.getItem("notify"));
+
+    this.clearAll();
+
+    if (notifyData) {
+      const { type, message } = notifyData;
+
+      this[type](message);
+
+      localStorage.removeItem("notify");
+    }
+  }
+}