vueless 1.2.10-beta.7 → 1.2.10-beta.9

package/index.d.ts

@@ -30,6 +30,7 @@ export { default as useUI } from "./composables/useUI";
 export { useDarkMode } from "./composables/useDarkMode";
 export { useRequestQueue } from "./composables/useRequestQueue";
 export { useLoaderOverlay } from "./ui.loader-overlay/useLoaderOverlay";
+export { useLoaderProgress } from "./ui.loader-progress/useLoaderProgress";
 export { useMutationObserver } from "./composables/useMutationObserver";
 export { Direction, useAutoPosition } from "./composables/useAutoPosition";
 export { useComponentLocaleMessages } from "./composables/useComponentLocaleMassages";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.2.10-beta.7",
+  "version": "1.2.10-beta.9",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",

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

@@ -27,26 +27,15 @@ const inputRangeToError = defineModel<string>("inputRangeToError", { required: t
 const rangeStart = defineModel<string>("rangeStart", { required: true });
 const rangeEnd = defineModel<string>("rangeEnd", { required: true });
 
-function isGraterThanTo(value: string) {
-  if (!value) return false;
+function isFromGreaterThanTo(fromValue: string, toValue: string) {
+  if (!fromValue || !toValue) return false;
 
-  const parsedValue = parseDate(value, INPUT_RANGE_FORMAT, props.locale);
-  const parsedTo = parseDate(localValue.value.to, props.dateFormat, props.locale);
+  const parsedFrom = parseDate(fromValue, INPUT_RANGE_FORMAT, props.locale);
+  const parsedTo = parseDate(toValue, INPUT_RANGE_FORMAT, props.locale);
 
-  if (!parsedValue || !parsedTo) return false;
+  if (!parsedFrom || !parsedTo) return false;
 
-  return parsedValue > parsedTo && !isSameDay(parsedValue, parsedTo);
-}
-
-function isSmallerThanFrom(value: string) {
-  if (!value) return false;
-
-  const parsedValue = parseDate(value, INPUT_RANGE_FORMAT, props.locale);
-  const parsedFrom = parseDate(localValue.value.from, props.dateFormat, props.locale);
-
-  if (!parsedValue || !parsedFrom) return false;
-
-  return parsedValue < parsedFrom && !isSameDay(parsedValue, parsedFrom);
+  return parsedFrom > parsedTo && !isSameDay(parsedFrom, parsedTo);
 }
 
 function validateInput(value: string, type: `${InputRangeType}`) {
@@ -60,18 +49,30 @@ function validateInput(value: string, type: `${InputRangeType}`) {
     error = props.locale.notCorrectMonthNumber;
   } else if (isWrongDayNumber(value) && value) {
     error = props.locale.notCorrectDayNumber;
-  } else if (isGraterThanTo(value) && type === InputRangeType.Start) {
+  } else if (type === InputRangeType.Start && isFromGreaterThanTo(value, rangeEnd.value)) {
     error = props.locale.fromDateGraterThanSecond;
-  } else if (isSmallerThanFrom(value) && type === InputRangeType.End) {
+  } else if (type === InputRangeType.End && isFromGreaterThanTo(rangeStart.value, value)) {
     error = props.locale.toDateSmallerThanFirst;
   }
 
   if (type === InputRangeType.Start) {
     inputRangeFromError.value = error;
+
+    if (!error && rangeEnd.value) {
+      inputRangeToError.value = isFromGreaterThanTo(value, rangeEnd.value)
+        ? props.locale.toDateSmallerThanFirst
+        : "";
+    }
   }
 
   if (type === InputRangeType.End) {
     inputRangeToError.value = error;
+
+    if (!error && rangeStart.value) {
+      inputRangeFromError.value = isFromGreaterThanTo(rangeStart.value, value)
+        ? props.locale.fromDateGraterThanSecond
+        : "";
+    }
   }
 }
 

package/ui.loader-progress/ULoaderProgress.vue

@@ -3,7 +3,6 @@ import { computed, watch, ref, useTemplateRef, onBeforeMount, onBeforeUnmount }
 
 import useUI from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
-import { useRequestQueue } from "../composables/useRequestQueue";
 import { getRequestWithoutQuery } from "../utils/requestQueue";
 
 import { useLoaderProgress } from "./useLoaderProgress";
@@ -18,7 +17,7 @@ defineOptions({ inheritAttrs: false });
 
 const props = withDefaults(defineProps<Props>(), {
   ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
-  resources: () => "",
+  resources: "any",
 });
 
 const error = ref(false);
@@ -27,8 +26,7 @@ const progress = ref(0);
 const opacity = ref(1);
 const status = ref<number | null>(null);
 
-const { requestQueue } = useRequestQueue();
-const { loaderProgressOff, loaderProgressOn } = useLoaderProgress();
+const { progressRequestQueue, loaderProgressOff, loaderProgressOn } = useLoaderProgress();
 const progressRef = useTemplateRef<HTMLDivElement>("progress-bar");
 
 const isLoading = computed(() => {
@@ -51,15 +49,15 @@ const resourceSubscriptions = computed(() => {
 });
 
 const isActiveRequests = computed(() => {
-  const isAnyRequestActive = props.resources === "any" && requestQueue.value.length;
+  const isAnyRequestActive = props.resources === "any" && progressRequestQueue.value.length;
   const isSubscribedRequestsActive = resourceSubscriptions.value.some((resource) =>
-    requestQueue.value.includes(resource),
+    progressRequestQueue.value.includes(resource),
   );
 
   return isAnyRequestActive || isSubscribedRequestsActive;
 });
 
-watch(() => requestQueue, onChangeRequestsQueue, { immediate: true, deep: true });
+watch(() => progressRequestQueue, onChangeRequestsQueue, { immediate: true, deep: true });
 
 watch(
   () => props.loading,

package/ui.loader-progress/storybook/docs.mdx

@@ -16,26 +16,33 @@ import defaultConfig from "../config?raw"
 To control the loader state in Vue components use `useLoaderProgress` composable.
 
 The loader uses queue of resources and will be shown until at least one item is present in a queue.
+The queue approach is useful if you want to implement global loading handling (for example in axios interceptors)
 
 <Source code={`
 import { useLoaderProgress } from "vueless";
 
 const {
+  isLoading,
   loaderProgressOn,
   loaderProgressOff,
-  requestQueue,
+  progressRequestQueue,
 } = useLoaderProgress();
 
-// show loader (add resource into queue)
-loaderProgressOn("/transactions");
-loaderProgressOff(["/transactions", "/products"]);
+/* get loader state */
+console.log(isLoading.value);
 
-// hide loader (remove resource from queue)
-loaderProgressOff("/transactions");
-loaderProgressOff(["/transactions", "/products"]);
+/* show loader */
+loaderProgressOn(); // simple
+loaderProgressOn("/transactions"); // single resource
+loaderProgressOff(["/transactions", "/products"]); // multiple resources
 
-// get current global resource queue
-console.log(requestQueue.value);
+/* hide loader */
+loaderProgressOff(); // simple
+loaderProgressOff("/transactions"); // single resource
+loaderProgressOff(["/transactions", "/products"]); // multiple resources
+
+/* access loader progress resource queue */
+console.log(progressRequestQueue.value);
 `} language="jsx" dark />
 
 ## Using loader outside Vue components
@@ -44,11 +51,15 @@ To control the loader state outside Vue components, use the following methods.
 <Source code={`
 import { loaderProgressOn, loaderProgressOff } from "vueless";
 
-// show loader
-loaderProgressOn("/transactions");
+/* show loader */
+loaderProgressOn(); // simple
+loaderProgressOn("/transactions"); // single resource
+loaderProgressOff(["/transactions", "/products"]); // multiple resources
 
-// hide loader
-loaderProgressOff("/transactions");
+/* hide loader */
+loaderProgressOff(); // simple
+loaderProgressOff("/transactions"); // single resource
+loaderProgressOff(["/transactions", "/products"]); // multiple resources
 `} language="jsx" dark />
 
 ## Default config

package/ui.loader-progress/storybook/stories.ts

@@ -69,7 +69,6 @@ const EnumTemplate: StoryFn<ULoaderProgressArgs> = (args: ULoaderProgressArgs, {
         v-for="option in argTypes?.[args.enum]?.options"
         :key="option"
         v-bind="getArgs(args, option)"
-        :resources="args.resources"
         class="static"
       />
     </UCol>

package/ui.loader-progress/useLoaderProgress.ts

@@ -2,33 +2,51 @@ import { inject, readonly, ref } from "vue";
 
 import type { Ref } from "vue";
 
-import { useRequestQueue } from "../composables/useRequestQueue";
+import { getRequestWithoutQuery } from "../utils/requestQueue";
 
 type LoaderProgress = {
   isLoading: Readonly<Ref<boolean, boolean>>;
   loaderProgressOn: (request: string | string[]) => void;
   loaderProgressOff: (request: string | string[]) => void;
+  progressRequestQueue: Readonly<Ref<readonly string[]>>;
 };
 
 export const LoaderProgressSymbol = Symbol.for("vueless:loader-progress");
 
-const { addToRequestQueue, removeFromRequestQueue } = useRequestQueue();
+const progressRequestQueue = ref<string[]>([]);
+
+function addToProgressRequestQueue(url: string | string[]): void {
+  Array.isArray(url)
+    ? progressRequestQueue.value.push(...url.map(getRequestWithoutQuery))
+    : progressRequestQueue.value.push(getRequestWithoutQuery(url));
+}
+
+function removeFromProgressRequestQueue(url: string | string[]): void {
+  if (Array.isArray(url)) {
+    url.map(getRequestWithoutQuery).forEach(removeFromProgressRequestQueue);
+  } else {
+    progressRequestQueue.value = progressRequestQueue.value.filter(
+      (item) => item !== getRequestWithoutQuery(url),
+    );
+  }
+}
 
 const isLoading = ref(true);
 
 function loaderProgressOn(request?: string | string[]): void {
-  request ? addToRequestQueue(request) : (isLoading.value = true);
+  request ? addToProgressRequestQueue(request) : (isLoading.value = true);
 }
 
 function loaderProgressOff(request?: string | string[]): void {
-  request ? removeFromRequestQueue(request) : (isLoading.value = false);
+  request ? removeFromProgressRequestQueue(request) : (isLoading.value = false);
 }
 
 export function createLoaderProgress(): LoaderProgress {
   return {
-    isLoading: readonly(isLoading),
     loaderProgressOn,
     loaderProgressOff,
+    isLoading: readonly(isLoading),
+    progressRequestQueue: readonly(progressRequestQueue) as Readonly<Ref<readonly string[]>>,
   };
 }