vueless 1.2.10-beta.1 → 1.2.10-beta.11

package/ui.container-drawer/types.ts

@@ -0,0 +1,67 @@
+import defaultConfig from "./config";
+
+import type { ComponentConfig } from "../types";
+
+export type Config = typeof defaultConfig;
+
+export interface Props {
+  /**
+   * Drawer state (shown / hidden).
+   */
+  modelValue?: boolean;
+
+  /**
+   * Drawer title.
+   */
+  title?: string;
+
+  /**
+   * Drawer description.
+   */
+  description?: string;
+
+  /**
+   * Drawer position.
+   */
+  position?: "top" | "bottom" | "left" | "right";
+
+  /**
+   * Drawer variant.
+   */
+  variant?: "solid" | "outlined" | "subtle" | "soft";
+
+  /**
+   * Control whether the Drawer has a handle or not.
+   */
+  handle?: boolean;
+
+  /**
+   * Inset the drawer from the edges.
+   */
+  inset?: boolean;
+
+  /**
+   * Allow closing drawer by clicking on overlay.
+   */
+  closeOnOverlay?: boolean;
+
+  /**
+   * Allow closing drawer by pressing escape (esc) on the keyboard.
+   */
+  closeOnEsc?: boolean;
+
+  /**
+   * Unique element id.
+   */
+  id?: string;
+
+  /**
+   * Component config object.
+   */
+  config?: ComponentConfig<Config>;
+
+  /**
+   * Data-test attribute for automated testing.
+   */
+  dataTest?: string | null;
+}

package/ui.container-modal/storybook/stories.ts

@@ -25,7 +25,7 @@ import type { UnknownObject } from "../../types";
 
 interface UModalArgs extends Props {
   slotTemplate?: string;
-  enum: "size";
+  enum: "size" | "variant";
   modelValues?: UnknownObject;
 }
 
@@ -280,6 +280,9 @@ WithoutDivider.parameters = {
 export const Sizes = EnumTemplate.bind({});
 Sizes.args = { enum: "size", modelValues: {} };
 
+export const Variant = EnumTemplate.bind({});
+Variant.args = { enum: "variant", modelValues: {} };
+
 export const BackLink: StoryFn<UModalArgs> = (args: UModalArgs) => ({
   components: { UModal, UButton, UCheckbox, UCol, URow, UDivider, UInput, UInputPassword },
   setup() {

package/ui.container-modal-confirm/storybook/stories.ts

@@ -23,7 +23,7 @@ import type { UnknownObject } from "../../types";
 interface UModalConfirmArgs extends Props {
   width: string;
   slotTemplate?: string;
-  enum: "size" | "confirmColor";
+  enum: "size" | "variant" | "confirmColor";
   modelValues?: UnknownObject;
 }
 
@@ -83,6 +83,30 @@ const DefaultTemplate: StoryFn<UModalConfirmArgs> = (args: UModalConfirmArgs) =>
   `,
 });
 
+const EnumTemplate: StoryFn<UModalConfirmArgs> = (args: UModalConfirmArgs, { argTypes }) => ({
+  components: { UModalConfirm, UButton, URow },
+  setup: () => ({ args, argTypes, getArgs }),
+  template: `
+    <URow>
+      <UButton
+        v-for="option in argTypes?.[args.enum]?.options"
+        :key="option"
+        :label="option"
+        @click="args.modelValues[option] = !args.modelValues[option]"
+      />
+
+      <UModalConfirm
+        v-for="option in argTypes?.[args.enum]?.options"
+        :key="option"
+        v-bind="getArgs(args, option)"
+        v-model="args.modelValues[option]"
+      >
+        ${defaultTemplate}
+      </UModalConfirm>
+    </URow>
+  `,
+});
+
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
@@ -194,31 +218,12 @@ WithoutCancelButton.args = { cancelHidden: true };
 export const DisableConfirmButton = DefaultTemplate.bind({});
 DisableConfirmButton.args = { confirmDisabled: true };
 
-export const Sizes: StoryFn<UModalConfirmArgs> = (args: UModalConfirmArgs, { argTypes }) => ({
-  components: { UModalConfirm, UButton, URow },
-  setup: () => ({ args, argTypes, getArgs }),
-  template: `
-    <URow>
-      <UButton
-        v-for="option in argTypes?.[args.enum]?.options"
-        :key="option"
-        :label="option"
-        @click="args.modelValues[option] = !args.modelValues[option]"
-      />
-
-      <UModalConfirm
-        v-for="option in argTypes?.[args.enum]?.options"
-        :key="option"
-        v-bind="getArgs(args, option)"
-        v-model="args.modelValues[option]"
-      >
-        ${defaultTemplate}
-      </UModalConfirm>
-    </URow>
-  `,
-});
+export const Sizes = EnumTemplate.bind({});
 Sizes.args = { enum: "size", modelValues: {} };
 
+export const Variant = EnumTemplate.bind({});
+Variant.args = { enum: "variant", modelValues: {} };
+
 export const Colors: StoryFn<UModalConfirmArgs> = (args: UModalConfirmArgs, { argTypes }) => ({
   components: { UModalConfirm, UButton, URow },
   setup: () => ({ args, argTypes, getArgs }),

package/ui.form-calendar/UCalendarMonthView.vue

@@ -91,7 +91,7 @@ const { monthViewAttrs, monthAttrs, currentMonthAttrs, selectedMonthAttrs, activ
         size="md"
         v-bind="selectedMonthAttrs"
         :disabled="dateIsOutOfRange(month, minDate, maxDate, locale, dateFormat)"
-        :label="formatDate(month, 'F', props.locale)"
+        :label="formatDate(month, 'M', props.locale)"
         @click="onClickMonth(month)"
         @mousedown.prevent.capture
       />
@@ -102,7 +102,7 @@ const { monthViewAttrs, monthAttrs, currentMonthAttrs, selectedMonthAttrs, activ
         color="primary"
         v-bind="currentMonthAttrs"
         :disabled="dateIsOutOfRange(month, minDate, maxDate, locale, dateFormat)"
-        :label="formatDate(month, 'F', props.locale)"
+        :label="formatDate(month, 'M', props.locale)"
         @click="onClickMonth(month)"
         @mousedown.prevent.capture
       />
@@ -114,7 +114,7 @@ const { monthViewAttrs, monthAttrs, currentMonthAttrs, selectedMonthAttrs, activ
         size="md"
         v-bind="activeMonthAttrs"
         :disabled="dateIsOutOfRange(month, minDate, maxDate, locale, dateFormat)"
-        :label="formatDate(month, 'F', props.locale)"
+        :label="formatDate(month, 'M', props.locale)"
         @click="onClickMonth(month)"
         @mousedown.prevent.capture
       />
@@ -126,7 +126,7 @@ const { monthViewAttrs, monthAttrs, currentMonthAttrs, selectedMonthAttrs, activ
         size="md"
         v-bind="monthAttrs"
         :disabled="dateIsOutOfRange(month, minDate, maxDate, locale, dateFormat)"
-        :label="formatDate(month, 'F', props.locale)"
+        :label="formatDate(month, 'M', props.locale)"
         @click="onClickMonth(month)"
         @mousedown.prevent.capture
       />

package/ui.form-calendar/tests/UCalendar.test.ts

@@ -375,7 +375,7 @@ describe("UCalendar.vue", () => {
         },
       });
 
-      const nextPrevButtons = component.findAll('[vl-key="nextPrevButton"]');
+      const nextPrevButtons = component.findAll('button[vl-key="nextPrevButton"]');
 
       expect(nextPrevButtons.length).toBe(4);
     });
@@ -391,7 +391,7 @@ describe("UCalendar.vue", () => {
           },
         });
 
-        const nextPrevButtons = component.findAll('[vl-key="nextPrevButton"]');
+        const nextPrevButtons = component.findAll('button[vl-key="nextPrevButton"]');
 
         expect(nextPrevButtons.length).toBe(2);
       });
@@ -422,7 +422,7 @@ describe("UCalendar.vue", () => {
 
       const dayView = component.findComponent(DayView);
       const initialDays = dayView.findAll('[vl-key="day"]').map((day) => day.text());
-      const navButtons = component.findAll('[vl-key="nextPrevButton"]');
+      const navButtons = component.findAll('button[vl-key="nextPrevButton"]');
 
       expect(navButtons.length).toBe(4);
 
@@ -446,7 +446,7 @@ describe("UCalendar.vue", () => {
 
       const dayView = component.findComponent(DayView);
       const initialDays = dayView.findAll('[vl-key="day"]').map((day) => day.text());
-      const navButtons = component.findAll('[vl-key="nextPrevButton"]');
+      const navButtons = component.findAll('button[vl-key="nextPrevButton"]');
       const nextButton = navButtons[2];
 
       await nextButton.trigger("click");
@@ -585,10 +585,10 @@ describe("UCalendar.vue", () => {
     });
 
     it("Arrow Key Navigation – moves focus correctly in month view", async () => {
-      const expectedMonthAfterRight = "February";
-      const expectedMonthAfterLeft = "January";
-      const expectedMonthAfterDown = "April";
-      const expectedMonthAfterUp = "January";
+      const expectedMonthAfterRight = "Feb";
+      const expectedMonthAfterLeft = "Jan";
+      const expectedMonthAfterDown = "Apr";
+      const expectedMonthAfterUp = "Jan";
 
       const component = mount(UCalendar, {
         props: {

package/ui.form-calendar/tests/UCalendarMonthView.test.ts

@@ -205,7 +205,7 @@ describe("UCalendarMonthView.vue", () => {
 
       const allButtons = component.findAllComponents(UButton);
       const mayButton = allButtons.find((button) => button.props("label") === "May");
-      const decemberButton = allButtons.find((button) => button.props("label") === "December");
+      const decemberButton = allButtons.find((button) => button.props("label") === "Dec");
 
       expect(mayButton?.props("disabled")).toBe(true);
       expect(decemberButton?.props("disabled")).toBe(true);

package/ui.form-calendar/utilCalendar.ts

@@ -86,7 +86,7 @@ export function parseDate<TLocale extends DateLocale>(
   }
 
   if (!(parsedDate instanceof Date && !isNaN(parsedDate.getTime()))) {
-    throw new Error(`Invalid date provided: ${originalDate}`);
+    throw new Error(`[vueless] Invalid date provided: ${originalDate}`);
   }
 
   if (timeless === true) {
@@ -158,7 +158,7 @@ export function dateIsOutOfRange<TLocale extends DateLocale>(
   dateFormat: string | null = null,
 ) {
   if ((!dateFormat && typeof min === "string") || (!dateFormat && typeof max === "string")) {
-    throw new Error("strings needs a date format");
+    throw new Error("[vueless] strings needs a date format.");
   }
 
   const minDate =

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-overlay/useLoaderOverlay.ts

@@ -2,15 +2,15 @@ import { inject, readonly, ref } from "vue";
 
 import type { Ref, InjectionKey } from "vue";
 
-export const LoaderOverlaySymbol: InjectionKey<LoaderOverlay> =
-  Symbol.for("vueless:loader-overlay");
-
 interface LoaderOverlay {
   isLoading: Readonly<Ref<boolean, boolean>>;
   loaderOverlayOn: () => void;
   loaderOverlayOff: () => void;
 }
 
+export const LoaderOverlaySymbol: InjectionKey<LoaderOverlay> =
+  Symbol.for("vueless:loader-overlay");
+
 const isLoading = ref(true);
 
 function loaderOverlayOn(): void {
@@ -34,7 +34,7 @@ export function useLoaderOverlay(): LoaderOverlay {
 
   if (!loaderOverlay) {
     throw new Error(
-      "LoaderOverlay not provided. Ensure you are using `provide` with `LoaderOverlaySymbol`.",
+      "[vueless] LoaderOverlay not provided. Ensure you are using `provide` with `LoaderOverlaySymbol`.",
     );
   }
 

package/ui.loader-progress/ULoaderProgress.vue

@@ -3,9 +3,10 @@ import { computed, watch, ref, useTemplateRef, onBeforeMount, onBeforeUnmount }
 
 import useUI from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
+import { getRequestWithoutQuery } from "../utils/requestQueue";
 
-import { clamp, queue, getRequestWithoutQuery } from "./utilLoaderProgress";
 import { useLoaderProgress } from "./useLoaderProgress";
+import { clamp, queue } from "./utilLoaderProgress";
 
 import { COMPONENT_NAME, MAXIMUM, SPEED } from "./constants";
 import defaultConfig from "./config";
@@ -16,7 +17,7 @@ defineOptions({ inheritAttrs: false });
 
 const props = withDefaults(defineProps<Props>(), {
   ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
-  resources: () => "",
+  resources: "any",
 });
 
 const error = ref(false);
@@ -25,46 +26,9 @@ const progress = ref(0);
 const opacity = ref(1);
 const status = ref<number | null>(null);
 
+const { progressRequestQueue, loaderProgressOff, loaderProgressOn } = useLoaderProgress();
 const progressRef = useTemplateRef<HTMLDivElement>("progress-bar");
 
-const { requestQueue, loaderProgressOff, loaderProgressOn } = useLoaderProgress();
-
-onBeforeMount(() => {
-  if (window.__VuelessProgressLoaderInstance === undefined) {
-    window.__VuelessProgressLoaderInstance = 0;
-  }
-
-  if (!window.__VuelessProgressLoaderInstance) {
-    window.addEventListener("loaderProgressOn", onLoaderProgressOn as EventListener);
-    window.addEventListener("loaderProgressOff", onLoaderProgressOff as EventListener);
-  }
-
-  window.__VuelessProgressLoaderInstance += 1;
-});
-
-onBeforeUnmount(() => {
-  if (window.__VuelessProgressLoaderInstance === undefined) {
-    return;
-  }
-
-  window.__VuelessProgressLoaderInstance -= 1;
-
-  if (!window.__VuelessProgressLoaderInstance) {
-    delete window.__VuelessProgressLoaderInstance;
-
-    window.removeEventListener("loaderProgressOn", onLoaderProgressOn as EventListener);
-    window.removeEventListener("loaderProgressOff", onLoaderProgressOff as EventListener);
-  }
-});
-
-function onLoaderProgressOn(event: CustomEvent<{ resource: string }>) {
-  loaderProgressOn(event.detail.resource);
-}
-
-function onLoaderProgressOff(event: CustomEvent<{ resource: string }>) {
-  loaderProgressOff(event.detail.resource);
-}
-
 const isLoading = computed(() => {
   return typeof status.value === "number";
 });
@@ -85,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,
@@ -151,12 +115,10 @@ function start() {
 }
 
 function set(amount: number) {
-  let currentProgress;
+  let currentProgress = 0;
 
   if (isLoading.value) {
     currentProgress = amount < progress.value ? clamp(amount, 0, 100) : clamp(amount, 0.8, 100);
-  } else {
-    currentProgress = 0;
   }
 
   status.value = currentProgress === 100 ? null : currentProgress;
@@ -205,6 +167,39 @@ function stop() {
   set(100);
 }
 
+function onLoaderProgressOn(event: CustomEvent<{ request: string }>) {
+  loaderProgressOn(event.detail.request);
+}
+
+function onLoaderProgressOff(event: CustomEvent<{ request: string }>) {
+  loaderProgressOff(event.detail.request);
+}
+
+onBeforeMount(() => {
+  if (!window.__VuelessLoaderProgressInstanceCount) {
+    window.addEventListener("loaderProgressOn", onLoaderProgressOn as EventListener);
+    window.addEventListener("loaderProgressOff", onLoaderProgressOff as EventListener);
+  }
+
+  window.__VuelessLoaderProgressInstanceCount = window.__VuelessLoaderProgressInstanceCount ?? 0;
+  window.__VuelessLoaderProgressInstanceCount += 1;
+});
+
+onBeforeUnmount(() => {
+  if (window.__VuelessLoaderProgressInstanceCount === undefined) {
+    return;
+  }
+
+  window.__VuelessLoaderProgressInstanceCount -= 1;
+
+  if (!window.__VuelessLoaderProgressInstanceCount) {
+    delete window.__VuelessLoaderProgressInstanceCount;
+
+    window.removeEventListener("loaderProgressOn", onLoaderProgressOn as EventListener);
+    window.removeEventListener("loaderProgressOff", onLoaderProgressOff as EventListener);
+  }
+});
+
 defineExpose({
   /**
    * Start loading animation.

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

@@ -6,7 +6,6 @@ import UButton from "../../ui.button/UButton.vue";
 import URow from "../../ui.container-row/URow.vue";
 import UCol from "../../ui.container-col/UCol.vue";
 
-import { useLoaderProgress } from "../useLoaderProgress";
 import { loaderProgressOff, loaderProgressOn } from "../utilLoaderProgress";
 
 import type { Meta, StoryFn } from "@storybook/vue3-vite";
@@ -34,13 +33,6 @@ export default {
 const DefaultTemplate: StoryFn<ULoaderProgressArgs> = (args: ULoaderProgressArgs) => ({
   components: { ULoaderProgress, UButton, URow },
   setup() {
-    const loaderProgress = useLoaderProgress();
-
-    if (!loaderProgress) {
-      throw new Error("LoaderProgress is not provided. Ensure it is properly injected.");
-    }
-
-    const { loaderProgressOn, loaderProgressOff } = loaderProgress;
     const slots = getSlotNames(ULoaderProgress.__name);
 
     return { args, slots, loaderProgressOn, loaderProgressOff };
@@ -77,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/types.ts

@@ -3,7 +3,7 @@ import type { ComponentConfig } from "../types";
 
 declare global {
   interface Window {
-    __VuelessProgressLoaderInstance?: number;
+    __VuelessLoaderProgressInstanceCount?: number;
   }
 }
 
@@ -27,7 +27,7 @@ export interface Props {
   /**
    * API resource names (endpoint URIs).
    */
-  resources?: string | string[] | "any" | ["any"];
+  resources?: string | string[] | "any";
 
   /**
    * Loader progress size.