vueless 0.0.178 → 0.0.179

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.178",
+  "version": "0.0.179",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",

package/ui.form-date-picker-range/index.vue

@@ -3,6 +3,7 @@
     <UInput
       v-if="isVariant.input"
       :id="id"
+      ref="inputRef"
       v-model="userFormatDate"
       :label="label"
       :placeholder="placeholder"
@@ -421,6 +422,7 @@ const rangeInputEndRef = ref(null);
 const buttonRef = ref(null);
 const buttonPrevRef = ref(null);
 const buttonNextRef = ref(null);
+const inputRef = ref(null);
 
 const { isTop, isRight, adjustPositionY, adjustPositionX } = useAdjustElementPosition(
   wrapperRef,
@@ -463,10 +465,6 @@ const i18nGlobal = tm(UDatePickerRange);
 
 const currentLocale = computed(() => merge(defaultConfig.i18n, i18nGlobal, props.config.i18n));
 
-const clickOutsideOptions = computed(() => ({
-  ignore: [buttonRef.value.buttonRef, buttonPrevRef.value.buttonRef, buttonNextRef.value.buttonRef],
-}));
-
 const locale = computed(() => {
   const { months, weekdays } = currentLocale.value;
 
@@ -610,6 +608,20 @@ const isVariant = computed(() => ({
   input: props.variant === DATE_PICKER_INPUT_TYPE,
 }));
 
+const clickOutsideOptions = computed(() => {
+  if (isVariant.value.input) {
+    return { ignore: [inputRef.value.input] };
+  }
+
+  return {
+    ignore: [
+      buttonRef.value.buttonRef,
+      buttonPrevRef.value.buttonRef,
+      buttonNextRef.value.buttonRef,
+    ],
+  };
+});
+
 const userFormatDate = computed(() => {
   if ((!localValue.value.from && !localValue.value.to) || !localValue.value.from) return "";
 

package/ui.loader-top/Docs.mdx

@@ -25,9 +25,8 @@ const {
   loaderTopOn,
   loaderTopOff,
   requestQueue,
-  componentRequestQueue,
-  setComponentRequestQueue,
-  removeComponentRequestQueue
+  addRequestUrl
+  removeRequestUrl
 } = useLoaderTop();
 
 // get loader state
@@ -42,14 +41,13 @@ loaderTopOff("/transactions");
 // get current resource array
 console.log(requestQueue.value);
 
-// get current resource array for component relayed loaders (UTable)
-console.log(componentRequestQueue.value);
+// add resource into loader queue
+addRequestUrl("/transactions");
+addRequestUrl(["/transactions", "/products"]);
 
-// add resource into component related loader queue
-setComponentRequestQueue("/transactions");
-
-// remove resource from component related loader queue
-removeComponentRequestQueue("/transactions");
+// remove resource from loader queue
+removeRequestUrl("/transactions");
+removeRequestUrl(["/transactions", "/products"]);
 `} language="jsx" dark />
 
 ## Using loader outside Vue components

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

@@ -1,21 +1,25 @@
 import { inject, readonly, ref } from "vue";
 
+import { getRequestWithoutQuery } from "../services/loaderTop.service";
+
 export const LoaderTopSymbol = Symbol.for("vueless:loader-top");
 
-const isLoading = ref(true);
+const isLoading = ref(false);
 const requestQueue = ref([]);
 const requestTimeout = ref(0);
-const componentRequestQueue = ref([]);
 
 function loaderTopOn(url) {
-  requestQueue.value.push(url);
+  addRequestUrl(url);
+
   isLoading.value = true;
 
   clearTimeout(requestTimeout.value);
 }
 
 function loaderTopOff(url) {
-  requestQueue.value = url ? requestQueue.value.filter((item) => item !== url) : [];
+  requestQueue.value = url
+    ? requestQueue.value.filter((item) => item !== getRequestWithoutQuery(url))
+    : [];
 
   requestTimeout.value = setTimeout(() => {
     if (!requestQueue.value.length) {
@@ -24,23 +28,30 @@ function loaderTopOff(url) {
   }, 50);
 }
 
-function setComponentRequestQueue(requests) {
-  componentRequestQueue.value = [...componentRequestQueue.value, ...requests];
+function addRequestUrl(url) {
+  Array.isArray(url)
+    ? requestQueue.value.push(...url.map(getRequestWithoutQuery))
+    : requestQueue.value.push(getRequestWithoutQuery(url));
 }
 
-function removeComponentRequestQueue() {
-  componentRequestQueue.value = [];
+function removeRequestUrl(url) {
+  if (Array.isArray(url)) {
+    url.map(getRequestWithoutQuery).forEach(removeRequestUrl);
+
+    return;
+  }
+
+  requestQueue.value = requestQueue.value.filter((item) => item !== getRequestWithoutQuery(url));
 }
 
 export function createLoaderTop() {
   return {
     isLoading: readonly(isLoading),
     requestQueue: readonly(requestQueue),
-    componentRequestQueue: readonly(componentRequestQueue),
     loaderTopOn,
     loaderTopOff,
-    setComponentRequestQueue,
-    removeComponentRequestQueue,
+    addRequestUrl,
+    removeRequestUrl,
   };
 }
 

package/ui.loader-top/index.vue

@@ -8,7 +8,7 @@
 import { computed, onBeforeUnmount, watch, ref, onMounted, onUnmounted } from "vue";
 
 import UIService, { isMobileApp } from "../service.ui";
-import { clamp, queue } from "./services/loaderTop.service";
+import { clamp, queue, getRequestWithoutQuery } from "./services/loaderTop.service";
 import { useLoaderTop } from "./composables/useLoaderTop";
 
 import { ULoaderTop, MAXIMUM, SPEED } from "./constants";
@@ -43,15 +43,7 @@ const progress = ref(0);
 const opacity = ref(1);
 const status = ref(null);
 
-const {
-  isLoading,
-  requestQueue,
-  loaderTopOn,
-  loaderTopOff,
-  loaderRequestQueue,
-  setComponentRequestQueue,
-  removeComponentRequestQueue,
-} = useLoaderTop();
+const { requestQueue, removeRequestUrl, isLoading, loaderTopOff, loaderTopOn } = useLoaderTop();
 const { progressAttrs } = useAttrs(props, { error, isMobileApp });
 
 const isStarted = computed(() => {
@@ -66,27 +58,27 @@ const barStyle = computed(() => {
 });
 
 const resourceNamesArray = computed(() => {
-  return Array.isArray(props.resources) ? [...props.resources] : [props.resources];
+  return Array.isArray(props.resources)
+    ? props.resources.map(getRequestWithoutQuery)
+    : [getRequestWithoutQuery(props.resources)];
 });
 
-watch(requestQueue, onChangeRequestsQueue, { deep: true });
-watch(isLoading, onChangeLoadingState, { deep: true });
-
-if (props.resources) {
-  setComponentRequestQueue(resourceNamesArray.value);
-}
+watch(() => requestQueue.value.length, onChangeRequestsQueue);
+watch(isLoading, onChangeLoadingState);
 
 onMounted(() => {
   window.addEventListener("loaderTopOn", setLoaderOnHandler);
   window.addEventListener("loaderTopOff", setLoaderOffHandler);
-});
 
-onBeforeUnmount(() => {
   if (props.resources) {
-    removeComponentRequestQueue();
+    onChangeRequestsQueue();
   }
 });
 
+onBeforeUnmount(() => {
+  removeRequestUrl(resourceNamesArray.value);
+});
+
 onUnmounted(() => {
   window.removeEventListener("loaderTopOn", setLoaderOnHandler);
   window.removeEventListener("loaderTopOff", setLoaderOffHandler);
@@ -100,12 +92,6 @@ function setLoaderOffHandler(event) {
   loaderTopOff(event.detail.resource);
 }
 
-function requestWithoutQuery(request) {
-  const [requestWithoutQuery] = request.split("?");
-
-  return requestWithoutQuery;
-}
-
 function onChangeLoadingState() {
   if (!props.resources && isStarted.value && show.value && !isLoading.value) {
     done();
@@ -116,13 +102,11 @@ function onChangeRequestsQueue() {
   let isActiveRequests = false;
 
   if (props.resources) {
-    resourceNamesArray.value.forEach((item) => {
+    resourceNamesArray.value.forEach((resource) => {
       if (!isActiveRequests) {
-        const activeRequest = requestQueue.value.find(
-          (request) => requestWithoutQuery(request) === item,
-        );
+        const activeRequest = requestQueue.value.find((request) => request === resource);
 
-        isActiveRequests = !!activeRequest;
+        isActiveRequests = Boolean(activeRequest);
       }
     });
 
@@ -132,10 +116,8 @@ function onChangeRequestsQueue() {
       done();
     }
   } else {
-    requestQueue.value.forEach((item) => {
-      const activeRequest = loaderRequestQueue.value.find(
-        (request) => request === requestWithoutQuery(item),
-      );
+    resourceNamesArray.value.forEach((resource) => {
+      const activeRequest = requestQueue.value.find((request) => request === resource);
 
       isActiveRequests = !activeRequest;
     });

package/ui.loader-top/services/loaderTop.service.js

@@ -41,3 +41,9 @@ export function loaderTopOff(resource) {
 
   window.dispatchEvent(loaderTopOfEvent);
 }
+
+export function getRequestWithoutQuery(request) {
+  const [requestWithoutQuery] = request.split("?");
+
+  return requestWithoutQuery;
+}

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.178",
+  "version": "0.0.179",
   "contributions": {
     "html": {
       "description-markup": "markdown",