vueless 0.0.50 → 0.0.52

package/ui.notify/index.vue

@@ -1,248 +1,230 @@
 <template>
-  <notifications
-    group="notify"
-    class="vueless-notify mt-safe-top !top-3 !w-full px-3 max-md:!left-0 md:!w-[22rem] md:px-0 lg:!top-4 lg:!mt-0"
-    :position="position"
+  <TransitionGroup
+    ref="notificationsWrapperRef"
+    :style="notifyPositionStyles"
+    tag="div"
+    v-bind="{ ...config.transitionGroup, ...wrapperAttrs }"
   >
-    <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
+      v-for="notification in notifications"
+      :key="notification.id"
+      v-bind="bodyAttrs"
+      :class="getNotificationClasses(notification)"
+    >
+      <UIcon
+        v-if="notification.type === NOTIFY_TYPE.success"
+        data-cy="type-notify"
+        color="green"
+        variant="light"
+        size="md"
+        :name="config.iconSuccessName"
+        v-bind="iconSuccessAttrs"
+      />
+
+      <UIcon
+        v-else-if="notification.type === NOTIFY_TYPE.warning"
+        data-cy="type-notify"
+        color="orange"
+        variant="light"
+        size="md"
+        :name="config.iconWarningName"
+        v-bind="iconWarningAttrs"
+      />
+
+      <UIcon
+        v-else-if="notification.type === NOTIFY_TYPE.error"
+        data-cy="type-notify"
+        color="red"
+        variant="light"
+        size="md"
+        :name="config.iconErrorName"
+        v-bind="iconErrorAttrs"
+      />
+
+      <div v-bind="contentAttrs">
+        <template v-if="vHtml">
+          <span v-bind="labelAttrs" v-html="notification.label" />
+          <span v-bind="descriptionAttrs" v-html="getText(notification.text, notification.type)" />
+        </template>
+        <template v-else>
+          <span v-bind="labelAttrs" v-text="notification.label" />
+          <span v-bind="descriptionAttrs" v-text="getText(notification.text, notification.type)" />
+        </template>
       </div>
-    </template>
-  </notifications>
+
+      <UIcon
+        color="gray"
+        variant="light"
+        size="xs"
+        interactive
+        :name="config.iconCloseName"
+        v-bind="iconCloseAttrs"
+        @click="onClickClose(notification)"
+      />
+    </div>
+  </TransitionGroup>
 </template>
 
-<script>
-import { globalComponentConfig } from "../service.ui";
+<script setup>
+import { computed, onBeforeUnmount, onMounted, ref } from "vue";
+import { merge } from "lodash-es";
 
-import UIcon from "../ui.image-icon";
+import UIService, { globalComponentConfig, cx } from "../service.ui";
 
-const NOTIFY_TYPE = {
-  success: "success",
-  warning: "warning",
-  error: "error",
-};
+import { useLocale } from "../composable.locale";
+import { useAttrs } from "./composables/attrs.composable";
 
-export default {
-  name: "UNotify",
-  components: {
-    UIcon,
-  },
+import defaultConfig from "./configs/default.config";
+import { UNotify, NOTIFY_TYPE, POSITION } from "./constants";
 
-  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",
-    },
-  },
+import UIcon from "../ui.image-icon";
 
-  data() {
-    return {
-      type: null,
-    };
+/* Should be a string for correct web-types gen */
+defineOptions({ name: "UNotify", inheritAttrs: false });
+
+const props = defineProps({
+  /**
+   * A position on the x-axis.
+   * @values left, center, right
+   */
+  xPosition: {
+    type: String,
+    default: UIService.get(defaultConfig, UNotify).default.xPosition,
   },
 
-  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];
-    },
+  /**
+   * A position on the y-axis.
+   * @values top, bottom
+   */
+  yPosition: {
+    type: String,
+    default: UIService.get(defaultConfig, UNotify).default.yPosition,
   },
 
-  created() {
-    window.addEventListener("resize", this.setPosition, { passive: true });
+  /**
+   * Use v-html to render notification label and description content.
+   */
+  vHtml: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UNotify).default.vHtml,
   },
 
-  beforeUnmount() {
-    window.removeEventListener("resize", this.setPosition);
+  /**
+   * Sets component ui config object.
+   */
+  config: {
+    type: Object,
+    default: () => ({}),
   },
+});
+
+const {
+  config,
+  wrapperAttrs,
+  bodyAttrs,
+  contentAttrs,
+  labelAttrs,
+  descriptionAttrs,
+  iconSuccessAttrs,
+  iconWarningAttrs,
+  iconErrorAttrs,
+  iconCloseAttrs,
+} = useAttrs(props);
+
+const { tm } = useLocale();
+
+const notifications = ref([]);
+const notifyPositionStyles = ref({});
+
+const notificationsWrapperRef = ref(null);
+
+const currentLocale = computed(() => merge(tm("UNotify"), props.config.i18n));
+
+onMounted(() => {
+  window.addEventListener("resize", setPosition, { passive: true });
+  window.addEventListener("notifyStart", onNotifyStart);
+  window.addEventListener("notifyEnd", onNotifyEnd);
+  window.addEventListener("notifyClearAll", onClearAll);
+
+  setPosition();
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener("resize", setPosition);
+  window.removeEventListener("notifyStart", onNotifyStart);
+  window.removeEventListener("notifyEnd", onNotifyEnd);
+  window.removeEventListener("notifyClearAll", onClearAll);
+});
+
+function onNotifyStart(event) {
+  notifications.value.push({ ...event.detail });
+}
 
-  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 || "UNotifyPage");
-      const asideWidth = getOffsetWidth(classes.aside || "UNotifyAside");
-      const notifyWidth = getOffsetWidth(NOTIFY_CLASS);
+function onNotifyEnd(event) {
+  notifications.value = notifications.value.filter(
+    (notification) => notification.id !== event.detail.id,
+  );
+}
 
-      if (!pageWidth) return;
+function onClearAll() {
+  notifications.value = [];
+}
 
-      const leftShift = asideWidth + pageWidth / 2 - notifyWidth / 2;
+function onClickClose(targetNotification) {
+  notifications.value = notifications.value.filter(
+    (notification) => notification.id !== targetNotification.id,
+  );
+}
 
-      document.querySelector(`.${NOTIFY_CLASS}`).style.setProperty("left", `${leftShift}px`);
-    },
-  },
-};
-</script>
+function getOffsetWidth(selector) {
+  return document.querySelector(selector)?.offsetWidth || 0;
+}
 
-<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;
+function setPosition() {
+  const positionClasses = globalComponentConfig.UNotify?.positionClasses;
+  const pageClass = positionClasses?.page || config.value.positionClasses.page;
+  const asideClass = positionClasses?.aside || config.value.positionClasses.aside;
+  const pageWidth = getOffsetWidth(`${pageClass}`);
+  const asideWidth = getOffsetWidth(`${asideClass}`);
+  const notifyWidth = notificationsWrapperRef.value.$el?.offsetWidth || 0;
+
+  const styles = {
+    left: "auto",
+    top: "auto",
+    right: "auto",
+    bottom: "auto",
+  };
+
+  styles[props.yPosition] = "0px";
+
+  if (props.xPosition === POSITION.center) {
+    styles.left = `calc(50% - ${notifyWidth / 2}px)`;
+  } else {
+    styles[props.xPosition] = "0px";
   }
 
-  :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;
-      }
-    }
+  if (pageWidth && props.xPosition !== POSITION.right) {
+    styles.left = `${asideWidth + pageWidth / 2 - notifyWidth / 2}px`;
   }
 
-  :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;
-    }
-  }
+  notifyPositionStyles.value = styles;
+}
 
-  :deep(.success) {
-    background: radial-gradient(
-      100.16% 500.78% at 0% 50%,
-      rgba(74, 222, 128, 0.1) 2.17%,
-      transparent
-    );
+function getText(notificationText, type) {
+  return notificationText || currentLocale.value[type];
+}
 
-    .type-icon path {
-      @apply fill-current text-green-400;
-    }
+function getNotificationClasses(notification) {
+  if (notification.type === NOTIFY_TYPE.success) {
+    return cx([bodyAttrs.value.class, config.value.bodySuccess]);
   }
 
-  :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;
-    }
+  if (notification.type === NOTIFY_TYPE.warning) {
+    return cx([bodyAttrs.value.class, config.value.bodyWarning]);
   }
 
-  /*
-    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;
+  if (notification.type === NOTIFY_TYPE.error) {
+    return cx([bodyAttrs.value.class, config.value.bodyError]);
   }
 }
-</style>
+</script>

package/ui.notify/services/index.js

@@ -1,87 +1,89 @@
-import Vue3Notify, { notify as VueNotify } from "@kyvg/vue3-notification";
-import { globalComponentConfig } from "../../service.ui";
+import { globalComponentConfig, getRandomId } from "../../service.ui";
+
+import { NOTIFY_TYPE } from "../constants";
+
+const delayBetweenClones = 1000;
+
+let lastMessageTime = undefined;
+let lastMessage = undefined;
 
 const defaultDuration = {
   short: 4000,
   medium: 8000,
   long: 12000,
-  permanent: 300000,
 };
 
-export default class NotifyServiceDefault {
-  notifyInstance = Vue3Notify;
+const notifyClearAllEvent = new Event("notifyClearAll");
 
-  #lastMessageTime = 0;
-  #lastMessageCode = "";
+export function notify(settings) {
+  const { type, label, text, duration, delayDuplicates } = settings;
+  const currentNotifyDuration =
+    duration || globalComponentConfig.UNotify?.duration?.short || defaultDuration.short;
+  const isSameMessage = lastMessage === text && new Date() - lastMessageTime < delayBetweenClones;
 
-  notify(settings) {
-    const { type, title, text, code, duration, ignoreDuplicates, closeOnClick, data } = settings;
-    const isSameMessage =
-      this.#lastMessageCode === code && new Date() - this.#lastMessageTime < 1000;
+  if ((isSameMessage || !text) && delayDuplicates) {
+    return;
+  }
 
-    if (isSameMessage || !code) return;
+  lastMessageTime = new Date();
+  lastMessage = text;
 
-    this.#lastMessageTime = new Date();
-    this.#lastMessageCode = code;
+  const detail = {
+    type,
+    id: getRandomId(),
+    label: label || "",
+    text: text || "",
+    duration: currentNotifyDuration,
+  };
 
-    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 },
-    });
-  }
+  const notifyStart = new CustomEvent("notifyStart", { detail });
+  const notifyEnd = new CustomEvent("notifyEnd", { detail });
 
-  success(code, duration = globalComponentConfig.UNotify?.duration?.short) {
-    this.notify({
-      type: "success",
-      code: code,
-      duration: duration,
-    });
-  }
+  window.dispatchEvent(notifyStart);
 
-  warning(code, duration = globalComponentConfig.UNotify?.duration?.medium) {
-    this.notify({
-      type: "warning",
-      code: code,
-      duration: duration,
-    });
-  }
+  setTimeout(() => window.dispatchEvent(notifyEnd), currentNotifyDuration);
+}
 
-  error(code, duration = globalComponentConfig.UNotify?.duration?.long) {
-    this.notify({
-      type: "error",
-      code: code,
-      duration: duration,
-    });
-  }
+export function notifySuccess(text, duration = globalComponentConfig.UNotify?.duration?.short) {
+  notify({
+    type: NOTIFY_TYPE.success,
+    text,
+    duration,
+  });
+}
 
-  clearAll() {
-    VueNotify({
-      group: "notify",
-      clean: true,
-    });
-  }
+export function notifyWarning(text, duration = globalComponentConfig.UNotify?.duration?.medium) {
+  notify({
+    type: NOTIFY_TYPE.warning,
+    text,
+    duration,
+  });
+}
 
-  setDelayed(type, message) {
-    localStorage.setItem("notify", JSON.stringify({ type, message }));
-  }
+export function notifyError(text, duration = globalComponentConfig.UNotify?.duration?.long) {
+  notify({
+    type: NOTIFY_TYPE.error,
+    text,
+    duration,
+  });
+}
+
+export function clearAllNotifications() {
+  window.dispatchEvent(notifyClearAllEvent);
+}
 
-  getDelayed() {
-    const notifyData = JSON.parse(localStorage.getItem("notify"));
+export function setDelayedNotify(settings) {
+  localStorage.setItem("notify", JSON.stringify(settings));
+}
 
-    this.clearAll();
+export function getDelayedNotify() {
+  const notifyData = JSON.parse(localStorage.getItem("notify"));
 
-    if (notifyData) {
-      const { type, message } = notifyData;
+  clearAllNotifications();
 
-      this[type](message);
+  if (notifyData) {
+    notify(notifyData);
 
-      localStorage.removeItem("notify");
-    }
+    localStorage.removeItem("notify");
   }
 }

package/ui.other-loader-top/composables/useLoaderTop.js

@@ -0,0 +1,57 @@
+import { ref, readonly } from "vue";
+
+const isLoading = ref(false);
+const requestQueue = ref([]);
+const loaderRequestQueue = ref([]);
+const loaderRequestTimeout = ref(0);
+const componentLoaderRequestQueue = ref([]);
+
+function setLoadingOn(url) {
+  loaderRequestQueue.value.push(url);
+
+  isLoading.value = true;
+
+  clearTimeout(loaderRequestTimeout.value);
+}
+
+function setLoadingOff(url) {
+  loaderRequestQueue.value = url ? loaderRequestQueue.value.filter((item) => item !== url) : [];
+
+  loaderRequestTimeout.value = setTimeout(() => {
+    if (!loaderRequestQueue.value.length) {
+      isLoading.value = false;
+    }
+  }, 50);
+}
+
+function addRequestUrl(url) {
+  requestQueue.value.push(url);
+}
+
+function removeRequestUrl(url) {
+  requestQueue.value = requestQueue.value.filter((item) => item !== url);
+}
+
+function setComponentRequestQueue(requests) {
+  componentLoaderRequestQueue.value = [...componentLoaderRequestQueue, ...requests];
+}
+
+function removeComponentRequestQueue() {
+  componentLoaderRequestQueue.value = [];
+}
+
+export default function useLoaderTop() {
+  return {
+    isLoading: readonly(isLoading),
+    requestQueue: readonly(requestQueue),
+    loaderRequestQueue: readonly(loaderRequestQueue),
+    loaderRequestTimeout: readonly(loaderRequestTimeout),
+    componentLoaderRequestQueue: readonly(componentLoaderRequestQueue),
+    setLoadingOn,
+    setLoadingOff,
+    addRequestUrl,
+    removeRequestUrl,
+    setComponentRequestQueue,
+    removeComponentRequestQueue,
+  };
+}