vueless 0.0.51 → 0.0.52

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,
+  };
+}

package/ui.other-loader-top/index.vue

@@ -7,16 +7,16 @@
 <script setup>
 import { computed, onBeforeUnmount, watch, ref } from "vue";
 
-import { useStore } from "vuex";
-
 import UIService, { isMobileApp } from "../service.ui";
 import { clamp, queue } from "./services/loaderTop.service";
+import useLoaderTop from "./composables/useLoaderTop";
 
 import { ULoaderTop, MAXIMUM, SPEED } from "./constants";
 import defaultConfig from "./configs/default.config";
 import { useAttrs } from "./composables/attrs.composable";
 
-defineOptions({ name: "ULoaderTop" });
+/* Should be a string for correct web-types gen */
+defineOptions({ name: "ULoaderTop", inheritAttrs: false });
 
 const props = defineProps({
   /**
@@ -46,22 +46,21 @@ const props = defineProps({
   },
 });
 
-const store = useStore();
-
 const error = ref(false);
 const show = ref(false);
 const progress = ref(0);
 const opacity = ref(1);
 const status = ref(null);
 
+const {
+  loaderRequestQueue,
+  isLoading,
+  componentLoaderRequestQueue,
+  setComponentRequestQueue,
+  removeComponentRequestQueue,
+} = useLoaderTop();
 const { progressAttrs } = useAttrs(props, { error, isMobileApp });
 
-const loaderRequestQueue = computed(() => store.state.loaderTop.loaderRequestQueue);
-const isLoading = computed(() => store.state.loaderTop.isLoading);
-const componentLoaderRequestQueue = computed(
-  () => store.state.loaderTop.componentLoaderRequestQueue,
-);
-
 const isStarted = computed(() => {
   return typeof status.value === "number";
 });
@@ -81,12 +80,12 @@ watch(loaderRequestQueue, onChangeRequestsQueue, { deep: true });
 watch(isLoading, onChangeLoadingState, { deep: true });
 
 if (props.resourceNames) {
-  store.commit("loaderTop/SET_COMPONENT_REQUEST_QUEUE", resourceNamesArray.value);
+  setComponentRequestQueue(resourceNamesArray.value);
 }
 
 onBeforeUnmount(() => {
   if (props.resourceNames) {
-    store.commit("loaderTop/REMOVE_COMPONENT_REQUEST_QUEUE");
+    removeComponentRequestQueue();
   }
 });
 

package/ui.text-alert/composables/attrs.composable.js

@@ -30,7 +30,7 @@ export function useAttrs(props) {
     ),
   );
 
-  const bodyClasses = computed(() => cvaBody({ size: props.size }));
+  const bodyClasses = computed(() => setColor(cvaBody({ size: props.size }), props.color));
 
   const wrapperAttrs = getAttrs("wrapper", { classes: wrapperClasses });
   const bodyAttrs = getAttrs("body", { classes: bodyClasses });

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.51",
+  "version": "0.0.52",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -5027,7 +5027,7 @@
                 "kind": "expression",
                 "type": "'left' | 'center' | 'right'"
               },
-              "default": "\"center\""
+              "default": "center"
             },
             {
               "name": "yPosition",
@@ -5036,7 +5036,25 @@
                 "kind": "expression",
                 "type": "'top' | 'bottom'"
               },
-              "default": "\"top\""
+              "default": "top"
+            },
+            {
+              "name": "vHtml",
+              "description": "Use v-html to render notification label and description content.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "config",
+              "description": "Sets component ui config object.",
+              "value": {
+                "kind": "expression",
+                "type": "object"
+              },
+              "default": "{}"
             }
           ],
           "source": {

package/ui.loader-rendering/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/ui.notify/index.sto_ries.js

@@ -1,102 +0,0 @@
-import NotifyServiceDefault from "../ui.notify/services";
-
-import UNotify from "../ui.notify";
-import UButton from "../ui.button";
-
-import { getArgTypes } from "../service.storybook";
-
-const NotifyService = new NotifyServiceDefault();
-
-export default {
-  title: "Other / Notify",
-  component: UNotify,
-  args: {
-    type: "success",
-    code: "code",
-    title: "",
-    text: "",
-    duration: "short",
-    ignoreDuplicates: false,
-  },
-  argTypes: {
-    ...getArgTypes(UNotify.name),
-    type: {
-      description: "The type of notify.",
-      defaultValue: { summary: "success" },
-      options: ["success", "warning", "error"],
-      control: {
-        type: "radio",
-      },
-    },
-    code: {
-      description:
-        "Unique translation code, for ex. `categoryCreated`, " +
-        "which will be used in i18n translation path, for ex. `UNotify.success.categoryCreated`.",
-      defaultValue: { summary: "" },
-      control: {
-        type: "text",
-      },
-    },
-    title: {
-      description: "Notify title.",
-      defaultValue: { summary: "" },
-      control: {
-        type: "text",
-      },
-    },
-    text: {
-      description: "Notify text (description).",
-      defaultValue: { summary: "" },
-      control: {
-        type: "text",
-      },
-    },
-    duration: {
-      description: "The notify visibility duration.",
-      defaultValue: { summary: "short" },
-      options: ["short", "medium", "long", "permanent"], //4000, 8000, 12000, 300000
-      control: {
-        type: "radio",
-      },
-    },
-    ignoreDuplicates: {
-      description: "Show only 1 notify at once.",
-      defaultValue: { summary: false },
-      control: {
-        type: "boolean",
-      },
-    },
-  },
-};
-
-const DefaultTemplate = (args) => ({
-  components: { UNotify, UButton },
-  setup() {
-    return { args };
-  },
-  template: `
-    <div>
-      <UNotify v-bind="args"/>
-
-      <UButton label="show notify" @click="onClick"/>
-    </div>
- `,
-
-  methods: {
-    onClick() {
-      const settings = {
-        type: args.type,
-        code: args.code,
-        title: args.title,
-        text: args.text,
-        duration: args.duration,
-        ignoreDuplicates: args.ignoreDuplicates,
-      };
-
-      NotifyService.notify(settings);
-    },
-  },
-});
-
-export const Default = DefaultTemplate.bind({});
-Default.args = {};

package/ui.other-loader-top/store/index.js

@@ -1,59 +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) => {
-      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 = [];
-    },
-  },
-};