@milaboratories/uikit 2.10.15 → 2.10.17

package/src/composition/useScroll.ts

@@ -1,8 +1,12 @@
-import { type Ref, onMounted } from 'vue';
-import { useEventListener } from './useEventListener';
-import { requestTick } from '../helpers/utils';
+import { type Ref, onMounted } from "vue";
+import { useEventListener } from "./useEventListener";
+import { requestTick } from "../helpers/utils";
 
-export function useScroll($el: Ref<HTMLElement | undefined>, fadeHeight: number | null = null, fadeWidth: number | null = null) {
+export function useScroll(
+  $el: Ref<HTMLElement | undefined>,
+  fadeHeight: number | null = null,
+  fadeWidth: number | null = null,
+) {
   function getYMask(el: HTMLElement) {
     const { scrollTop, scrollHeight, clientHeight } = el;
 
@@ -14,7 +18,8 @@ export function useScroll($el: Ref<HTMLElement | undefined>, fadeHeight: number
 
     const scrollBottom = scrollHeight - scrollTop - clientHeight;
     const offsetTop = scrollTop > fadeHeight ? fadeHeight : 0;
-    const offsetBottom = scrollBottom > fadeHeight ? clientHeight - fadeHeight - offsetTop : clientHeight;
+    const offsetBottom =
+      scrollBottom > fadeHeight ? clientHeight - fadeHeight - offsetTop : clientHeight;
 
     return `linear-gradient(
         to bottom,
@@ -36,7 +41,8 @@ export function useScroll($el: Ref<HTMLElement | undefined>, fadeHeight: number
 
     const scrollRight = scrollWidth - scrollLeft - clientWidth;
     const offsetLeft = scrollLeft > fadeWidth ? fadeWidth : 0;
-    const offsetRight = scrollRight > fadeWidth ? clientWidth - fadeWidth - offsetLeft : clientWidth;
+    const offsetRight =
+      scrollRight > fadeWidth ? clientWidth - fadeWidth - offsetLeft : clientWidth;
 
     return `linear-gradient(
         to right,
@@ -55,17 +61,17 @@ export function useScroll($el: Ref<HTMLElement | undefined>, fadeHeight: number
     }
 
     const masks = [getYMask(el), getXMask(el)].filter((m) => m !== null);
-    el.style.setProperty('-webkit-mask-image', masks.join(','));
-    el.style.setProperty('mask-image', masks.join(','));
+    el.style.setProperty("-webkit-mask-image", masks.join(","));
+    el.style.setProperty("mask-image", masks.join(","));
     if (masks.length > 1) {
-      el.style.setProperty('-webkit-mask-composite', 'source-in');
-      el.style.setProperty('mask-composite', 'source-in');
+      el.style.setProperty("-webkit-mask-composite", "source-in");
+      el.style.setProperty("mask-composite", "source-in");
     }
   }
 
   const handle = requestTick(update);
 
   onMounted(update);
-  useEventListener(window, 'scroll', handle, true);
-  useEventListener(window, 'resize', handle, true);
+  useEventListener(window, "scroll", handle, true);
+  useEventListener(window, "resize", handle, true);
 }

package/src/composition/useSliderBreakpoints.ts

@@ -1,7 +1,9 @@
-import { clamp } from '../helpers/math';
-import type { ComputedRef } from 'vue';
-import { computed } from 'vue';
-export const useSliderBreakpoints = (props: ComputedRef<{ min: number; max: number; step: number }>) => {
+import { clamp } from "../helpers/math";
+import type { ComputedRef } from "vue";
+import { computed } from "vue";
+export const useSliderBreakpoints = (
+  props: ComputedRef<{ min: number; max: number; step: number }>,
+) => {
   return computed(() => {
     const result: number[] = [100];
     const { min, max, step } = props.value;

package/src/composition/useSortable.ts

@@ -1,6 +1,6 @@
-import type { Ref } from 'vue';
-import { computed, watchEffect } from 'vue';
-import { useEventListener } from './useEventListener';
+import type { Ref } from "vue";
+import { computed, watchEffect } from "vue";
+import { useEventListener } from "./useEventListener";
 
 type SortableItem = {
   el: HTMLElement;
@@ -18,8 +18,8 @@ export type SortableSettings = {
 };
 
 const classes = {
-  item: 'sortable__item',
-  animate: 'sortable__animate',
+  item: "sortable__item",
+  animate: "sortable__animate",
 };
 
 const getOffset = (el: HTMLElement) => {
@@ -100,7 +100,7 @@ export function useSortable(listRef: Ref<HTMLElement | undefined>, settings: Sor
 
   function updatePosition(item: SortableItem, y: number) {
     item.dy = y - item.y;
-    item.el.style.setProperty('transform', `translateY(${item.dy}px)`);
+    item.el.style.setProperty("transform", `translateY(${item.dy}px)`);
   }
 
   function changeOrder(reordered: HTMLElement[]) {
@@ -148,22 +148,22 @@ export function useSortable(listRef: Ref<HTMLElement | undefined>, settings: Sor
     state.item.y = state.item.y + dy;
     state.item.dy = state.item.dy - dy;
     state.item.orderChanged = true;
-    state.item.el.style.setProperty('transform', `translateY(${state.item.dy}px)`);
+    state.item.el.style.setProperty("transform", `translateY(${state.item.dy}px)`);
 
     toAnimate.forEach((o) => o.classList.remove(classes.animate));
 
     requestAnimationFrame(function () {
       toAnimate.forEach((option) => {
         option.classList.add(classes.animate);
-        option.style.transform = '';
-        option.addEventListener('transitionend', () => {
+        option.style.transform = "";
+        option.addEventListener("transitionend", () => {
           option.classList.remove(classes.animate);
         });
       });
     });
   }
 
-  useEventListener(window, 'mousemove', (e: { y: number }) => {
+  useEventListener(window, "mousemove", (e: { y: number }) => {
     if (!state.item) {
       return;
     }
@@ -195,7 +195,7 @@ export function useSortable(listRef: Ref<HTMLElement | undefined>, settings: Sor
     });
   });
 
-  useEventListener(window, 'mouseup', () => {
+  useEventListener(window, "mouseup", () => {
     if (!state.item) {
       return;
     }
@@ -203,9 +203,9 @@ export function useSortable(listRef: Ref<HTMLElement | undefined>, settings: Sor
     const { el, orderChanged } = state.item;
 
     el.classList.add(classes.animate);
-    el.style.removeProperty('transform');
+    el.style.removeProperty("transform");
 
-    el.addEventListener('transitionend', () => {
+    el.addEventListener("transitionend", () => {
       el.classList.remove(classes.animate, classes.item);
     });
 
@@ -214,7 +214,7 @@ export function useSortable(listRef: Ref<HTMLElement | undefined>, settings: Sor
         return;
       }
 
-      const newIndices = state.options().map((o) => Number(o.getAttribute('data-index')));
+      const newIndices = state.options().map((o) => Number(o.getAttribute("data-index")));
 
       const list = listRef.value;
 
@@ -236,9 +236,9 @@ export function useSortable(listRef: Ref<HTMLElement | undefined>, settings: Sor
 
   watchEffect(() => {
     optionsRef.value.forEach((child, i) => {
-      child.removeEventListener('mousedown', mouseDown);
-      child.addEventListener('mousedown', mouseDown);
-      child.setAttribute('data-index', String(i));
+      child.removeEventListener("mousedown", mouseDown);
+      child.addEventListener("mousedown", mouseDown);
+      child.setAttribute("data-index", String(i));
     });
   });
 }

package/src/composition/useSortable2.ts

@@ -1,6 +1,6 @@
-import type { Ref } from 'vue';
-import { computed, watch, watchEffect } from 'vue';
-import { useEventListener } from './useEventListener';
+import type { Ref } from "vue";
+import { computed, watch, watchEffect } from "vue";
+import { useEventListener } from "./useEventListener";
 
 type SortableItem = {
   el: HTMLElement;
@@ -19,8 +19,8 @@ export type SortableSettings = {
 };
 
 const classes = {
-  item: 'sortable__item',
-  animate: 'sortable__animate',
+  item: "sortable__item",
+  animate: "sortable__animate",
 };
 
 const getOffset = (el: HTMLElement) => {
@@ -55,13 +55,16 @@ export function useSortable2(listRef: Ref<HTMLElement | undefined>, settings: So
   };
   let oldScrollTop = 0;
 
-  watch(() => listRef.value, () => {
-    setTimeout(() => {
-      if (listRef.value) {
-        listRef.value.scrollTop = oldScrollTop;
-      }
-    }, 0);
-  });
+  watch(
+    () => listRef.value,
+    () => {
+      setTimeout(() => {
+        if (listRef.value) {
+          listRef.value.scrollTop = oldScrollTop;
+        }
+      }, 0);
+    },
+  );
 
   const optionsRef = computed(() => {
     return state.options();
@@ -122,7 +125,7 @@ export function useSortable2(listRef: Ref<HTMLElement | undefined>, settings: So
     const currentScrollTop = listRef.value?.scrollTop || 0;
     const scrollDiff = currentScrollTop - (item.initialScrollTop || 0);
     item.dy = y - item.y + scrollDiff;
-    item.el.style.setProperty('transform', `translateY(${item.dy}px)`);
+    item.el.style.setProperty("transform", `translateY(${item.dy}px)`);
   }
 
   function changeOrder(reordered: HTMLElement[]) {
@@ -170,22 +173,22 @@ export function useSortable2(listRef: Ref<HTMLElement | undefined>, settings: So
     state.item.y = state.item.y + dy;
     state.item.dy = state.item.dy - dy;
     state.item.orderChanged = true;
-    state.item.el.style.setProperty('transform', `translateY(${state.item.dy}px)`);
+    state.item.el.style.setProperty("transform", `translateY(${state.item.dy}px)`);
 
     toAnimate.forEach((o) => o.classList.remove(classes.animate));
 
     requestAnimationFrame(function () {
       toAnimate.forEach((option) => {
         option.classList.add(classes.animate);
-        option.style.transform = '';
-        option.addEventListener('transitionend', () => {
+        option.style.transform = "";
+        option.addEventListener("transitionend", () => {
           option.classList.remove(classes.animate);
         });
       });
     });
   }
 
-  useEventListener(window, 'mousemove', (e: { y: number }) => {
+  useEventListener(window, "mousemove", (e: { y: number }) => {
     if (!state.item) {
       return;
     }
@@ -231,7 +234,7 @@ export function useSortable2(listRef: Ref<HTMLElement | undefined>, settings: So
     }
   });
 
-  useEventListener(window, 'mouseup', () => {
+  useEventListener(window, "mouseup", () => {
     if (!state.item) {
       return;
     }
@@ -241,9 +244,9 @@ export function useSortable2(listRef: Ref<HTMLElement | undefined>, settings: So
     const { el, orderChanged } = state.item;
 
     el.classList.add(classes.animate);
-    el.style.removeProperty('transform');
+    el.style.removeProperty("transform");
 
-    el.addEventListener('transitionend', () => {
+    el.addEventListener("transitionend", () => {
       el.classList.remove(classes.animate, classes.item);
     });
 
@@ -252,7 +255,7 @@ export function useSortable2(listRef: Ref<HTMLElement | undefined>, settings: So
         return;
       }
 
-      const newIndices = state.options().map((o) => Number(o.getAttribute('data-index')));
+      const newIndices = state.options().map((o) => Number(o.getAttribute("data-index")));
 
       const list = listRef.value;
 
@@ -274,9 +277,9 @@ export function useSortable2(listRef: Ref<HTMLElement | undefined>, settings: So
 
   watchEffect(() => {
     optionsRef.value.forEach((child, i) => {
-      child.removeEventListener('mousedown', mouseDown);
-      child.addEventListener('mousedown', mouseDown);
-      child.setAttribute('data-index', String(i));
+      child.removeEventListener("mousedown", mouseDown);
+      child.addEventListener("mousedown", mouseDown);
+      child.setAttribute("data-index", String(i));
     });
   });
 }

package/src/composition/useTheme.ts

@@ -1,23 +1,24 @@
-import { computed, onMounted, onUnmounted, ref, unref, watch } from 'vue';
-import { mapIterable, toList } from '../helpers/iterators';
-import { useLocalStorage } from './useLocalStorage';
+import { computed, onMounted, onUnmounted, ref, unref, watch } from "vue";
+import { mapIterable, toList } from "../helpers/iterators";
+import { useLocalStorage } from "./useLocalStorage";
 
-type Theme = 'light' | 'dark';
+type Theme = "light" | "dark";
 
 type Callback = (mode: Theme) => void;
 
 const cm = new Set<Callback>();
 
 if (window.matchMedia) {
-  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
-    toList(mapIterable(cm.values(), (cb) => cb(e.matches ? 'dark' : 'light')));
+  window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (e) => {
+    toList(mapIterable(cm.values(), (cb) => cb(e.matches ? "dark" : "light")));
   });
 }
 
-const init = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+const init =
+  window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
 
 const browserTheme = ref<Theme>(init);
-const savedTheme = useLocalStorage<Theme>('theme');
+const savedTheme = useLocalStorage<Theme>("theme");
 
 export function useTheme(_cb?: Callback) {
   const theme = computed<Theme>(() => {
@@ -30,7 +31,8 @@ export function useTheme(_cb?: Callback) {
   };
 
   function toggleTheme() {
-    savedTheme.value = theme.value === 'light' ? 'dark' : theme.value === 'dark' ? 'light' : 'light';
+    savedTheme.value =
+      theme.value === "light" ? "dark" : theme.value === "dark" ? "light" : "light";
   }
 
   watch(theme, (v) => {

package/src/composition/useTransformedModel.ts

@@ -1,5 +1,5 @@
-import type { Ref, UnwrapNestedRefs } from 'vue';
-import { reactive, computed, ref } from 'vue';
+import type { Ref, UnwrapNestedRefs } from "vue";
+import { reactive, computed, ref } from "vue";
 
 /**
  * Creates a reactive local model with optional transformation and validation logic.
@@ -33,7 +33,10 @@ import { reactive, computed, ref } from 'vue';
  * });
  */
 
-export function useTransformedModel<T>(model: Ref<T>, options: { update?: (v: T) => boolean; parse?: (v: unknown) => T }) {
+export function useTransformedModel<T>(
+  model: Ref<T>,
+  options: { update?: (v: T) => boolean; parse?: (v: unknown) => T },
+) {
   const cached = ref<T | undefined>();
   const error = ref<string>();
 

package/src/composition/useWatchFetch.ts

@@ -1,6 +1,6 @@
-import type { WatchSource, WatchOptions, MaybeRef } from 'vue';
-import { reactive, watch, ref, computed, unref } from 'vue';
-import { delay, exclusiveRequest } from '@milaboratories/helpers';
+import type { WatchSource, WatchOptions, MaybeRef } from "vue";
+import { reactive, watch, ref, computed, unref } from "vue";
+import { delay, exclusiveRequest } from "@milaboratories/helpers";
 
 export type FetchResult<V, E = unknown> = {
   loading: boolean;

package/src/composition/utils.ts

@@ -1,4 +1,4 @@
-import { onMounted, onUpdated } from 'vue';
+import { onMounted, onUpdated } from "vue";
 
 export function onChanged(hook: () => unknown) {
   onMounted(hook);

package/src/composition/watchCached.ts

@@ -1,11 +1,5 @@
-import { deepClone, isJsonEqual } from '@milaboratories/helpers';
-import {
-  ref,
-  watch,
-  type WatchCallback,
-  type WatchHandle,
-  type WatchSource,
-} from 'vue';
+import { deepClone, isJsonEqual } from "@milaboratories/helpers";
+import { ref, watch, type WatchCallback, type WatchHandle, type WatchSource } from "vue";
 
 type MaybeUndefined<T, I> = I extends true ? T | undefined : T;
 export interface WatchCachedOptions<Immediate = boolean> {