@milaboratories/uikit 1.2.3

package/src/components/contextMenu/Menu.vue

@@ -0,0 +1,90 @@
+<script lang="ts" setup>
+import type { ContextOption } from './types';
+
+const emit = defineEmits(['close']);
+
+defineProps<{
+  options: readonly ContextOption[];
+}>();
+
+const onClickOption = (opt: ContextOption) => {
+  opt.cb();
+  emit('close');
+};
+</script>
+
+<template>
+  <div class="context-menu">
+    <div v-for="(opt, i) in options" :key="i" @click.stop="onClickOption(opt)">
+      <span>{{ opt.text }}</span>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.context-menu {
+  display: block;
+  position: absolute;
+  top: 50px;
+  left: 50px;
+  z-index: 1001;
+
+  margin: 0;
+  padding: 3px 0 4px;
+
+  background: rgba(255, 255, 255, 0.95);
+  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.35);
+  border-radius: 4px;
+
+  font-family:
+    Lucida Grande,
+    sans-serif;
+  font-size: 14px;
+  line-height: 15px;
+
+  &::before {
+    display: block;
+    position: absolute;
+    content: '';
+    top: -1px;
+    left: -1px;
+    bottom: -1px;
+    right: -1px;
+
+    border-radius: 4px;
+    border: 1px solid rgba(0, 0, 0, 0.125);
+    z-index: -1;
+  }
+
+  hr {
+    border: none;
+    height: 1px;
+    background: rgba(0, 0, 0, 0.1);
+    margin: 6px 1px 5px;
+    padding: 0;
+  }
+
+  > div {
+    display: block;
+    padding: 0 20px;
+    border-top: 1px solid rgba(0, 0, 0, 0);
+    border-bottom: 1px solid rgba(0, 0, 0, 0);
+
+    span {
+      vertical-align: 2px;
+      user-select: none;
+    }
+
+    &:hover {
+      background: -webkit-linear-gradient(top, #648bf5, #2866f2);
+      background: linear-gradient(to bottom, #648bf5 0%, #2866f2 100%);
+      border-top: 1px solid #5a82eb;
+      border-bottom: 1px solid #1758e7;
+    }
+
+    &:hover::after {
+      color: #fff;
+    }
+  }
+}
+</style>

package/src/components/contextMenu/index.ts

@@ -0,0 +1,33 @@
+import Menu from './Menu.vue';
+import { h, render } from 'vue';
+import type { ContextOption } from './types';
+
+export function showContextMenu(ev: MouseEvent, options: readonly ContextOption[]) {
+  ev.preventDefault();
+
+  const destroy = () => {
+    render(null, document.body);
+  };
+
+  const vNode = h(Menu, {
+    options,
+    onClose: () => {
+      destroy();
+    },
+  });
+
+  render(vNode, document.body);
+
+  const el = vNode.el as HTMLElement;
+
+  el.style.top = ev.clientY + 'px';
+  el.style.left = ev.clientX + 'px';
+
+  document.addEventListener('click', (ev: Event) => {
+    if (!el.contains(ev.target as HTMLElement)) {
+      destroy();
+    }
+  });
+
+  return destroy;
+}

package/src/components/contextMenu/types.ts

@@ -0,0 +1,4 @@
+export type ContextOption = {
+  text: string;
+  cb: () => void;
+};

package/src/composition/useClickOutside.ts

@@ -0,0 +1,16 @@
+import type { Ref } from 'vue';
+import { useEventListener } from '@/composition/useEventListener';
+import { flatValue } from '@/helpers/functions';
+
+type HtmlRef = Ref<HTMLElement | undefined>;
+
+export function useClickOutside(el: HtmlRef | HtmlRef[], cb: () => void) {
+  useEventListener(document, 'click', (event) => {
+    const values = flatValue(el)
+      .map((e) => e.value)
+      .filter((v) => !!v) as HTMLElement[];
+    if (!values.some((v) => v?.contains(event.target as HTMLElement))) {
+      cb();
+    }
+  });
+}

package/src/composition/useDraggable.ts

@@ -0,0 +1,58 @@
+import type { MaybeRef } from '@/types';
+import { onMounted, onUnmounted, unref } from 'vue';
+
+type Position = {
+  x: number;
+  y: number;
+};
+
+export function useDraggable<T extends HTMLElement>(elRef: MaybeRef<T | undefined>, cb: (ev: MouseEvent) => void) {
+  function onMove(down: Position, ev: MouseEvent) {
+    const el = unref(elRef);
+    if (!el) {
+      return;
+    }
+    const translate = `translate(${ev.x - down.x}px, ${ev.y - down.y}px)`;
+    el.style.setProperty('transform', translate);
+    cb(ev);
+  }
+
+  function onDown(down: Position) {
+    const listener = (e: MouseEvent) => onMove(down, e);
+
+    document.addEventListener('mousemove', listener);
+
+    document.addEventListener(
+      'mouseup',
+      () => {
+        const el = unref(elRef);
+
+        document.removeEventListener('mousemove', listener);
+
+        if (!el) {
+          return;
+        }
+
+        el.style.setProperty('transition', 'all .3s ease-in-out');
+
+        el.style.removeProperty('transform');
+
+        el.addEventListener('transitionend', () => {
+          el.style.removeProperty('transition');
+        });
+      },
+      { once: true },
+    );
+  }
+
+  function init() {
+    unref(elRef)?.addEventListener('mousedown', onDown);
+  }
+
+  function clear() {
+    unref(elRef)?.removeEventListener('mousedown', onDown);
+  }
+
+  onMounted(init);
+  onUnmounted(clear);
+}

package/src/composition/useEventListener.ts

@@ -0,0 +1,14 @@
+import { onMounted, onUnmounted, unref } from 'vue';
+import type { MaybeRef } from '@/types';
+
+type EventMap = WindowEventMap & HTMLElementEventMap & { adjust: Event };
+
+export function useEventListener<T extends EventTarget, E extends EventMap[K], K extends keyof EventMap>(
+  target: MaybeRef<T | undefined>,
+  type: K,
+  callback: (this: T, evt: E) => void,
+  capture = false,
+) {
+  onMounted(() => unref(target)?.addEventListener(type, callback as (this: T, evt: Event) => void, capture));
+  onUnmounted(() => unref(target)?.removeEventListener(type, callback as (this: T, evt: Event) => void, capture));
+}

package/src/composition/useFilteredList.ts

@@ -0,0 +1,14 @@
+import type { ComputedRef, Ref } from 'vue';
+import { computed } from 'vue';
+import type { ListOption } from '@/types';
+
+export function useFilteredList(items: Ref<ListOption[]>, searchPhrase: Ref<string>): ComputedRef<ListOption[]> {
+  return computed(() => {
+    if (searchPhrase.value) {
+      return items.value.filter((element) => {
+        return element['text'].toLowerCase().includes(searchPhrase.value.toLowerCase());
+      });
+    }
+    return items.value;
+  });
+}

package/src/composition/useFormState.ts

@@ -0,0 +1,42 @@
+import type { Ref, UnwrapRef } from 'vue';
+import { reactive, watch } from 'vue';
+import { objects } from '@milaboratories/helpers';
+
+export function useFormState<Source, D extends Record<string, unknown>>(
+  source: Ref<Source>,
+  fromSource: (source: Source) => D,
+  update: (data: UnwrapRef<D>) => void,
+) {
+  const state: {
+    data: UnwrapRef<D>;
+    changed: boolean;
+  } = reactive({
+    data: objects.deepClone(fromSource(source.value)) as D,
+    changed: false,
+  });
+
+  watch(
+    () => state.data,
+    (data) => {
+      if (state.changed) {
+        update(objects.deepClone(data));
+      } else {
+        state.changed = true;
+      }
+    },
+    { deep: true },
+  );
+
+  watch(
+    source,
+    (s) => {
+      Object.assign(state, {
+        data: objects.deepClone(fromSource(s)),
+        changed: false,
+      });
+    },
+    { deep: true, immediate: true },
+  );
+
+  return state;
+}

package/src/composition/useHover.ts

@@ -0,0 +1,35 @@
+import type { Ref } from 'vue';
+import { ref } from 'vue';
+import { useEventListener } from './useEventListener';
+import type { MaybeRef } from '@/types';
+
+export interface UseElementHoverOptions {
+  delayEnter?: number;
+  delayLeave?: number;
+}
+
+export function useHover(el: MaybeRef<EventTarget | undefined>, options: UseElementHoverOptions = {}): Ref<boolean> {
+  const { delayEnter = 0, delayLeave = 0 } = options;
+
+  const isHovered = ref(false);
+  let timer: ReturnType<typeof setTimeout> | undefined;
+
+  const toggle = (entering: boolean) => {
+    const delay = entering ? delayEnter : delayLeave;
+
+    if (timer) {
+      clearTimeout(timer);
+      timer = undefined;
+    }
+
+    if (delay) timer = setTimeout(() => (isHovered.value = entering), delay);
+    else isHovered.value = entering;
+  };
+
+  if (!window) return isHovered;
+
+  useEventListener(el, 'mouseenter', () => toggle(true));
+  useEventListener(el, 'mouseleave', () => toggle(false));
+
+  return isHovered;
+}

package/src/composition/useInterval.ts

@@ -0,0 +1,9 @@
+import { onMounted, onUnmounted } from 'vue';
+
+export function useInterval(update: () => void, ms: number) {
+  let interval: ReturnType<typeof setInterval>;
+  onMounted(() => {
+    interval = setInterval(update, ms);
+  });
+  onUnmounted(() => clearInterval(interval));
+}

package/src/composition/useLocalStorage.ts

@@ -0,0 +1,29 @@
+import type { Ref } from 'vue';
+import { ref, watch } from 'vue';
+import { notEmpty } from '@/helpers/utils';
+
+const $store = new Map<string, Ref<string | null>>();
+
+function getValue(key: string) {
+  if (!$store.has(key)) {
+    $store.set(key, ref(localStorage.getItem(key)));
+  }
+
+  return notEmpty($store.get(key), '...');
+}
+
+function setValue(key: string, v: string | null | undefined) {
+  if (v === undefined || v === null) {
+    localStorage.removeItem(key);
+  } else {
+    localStorage.setItem(key, v);
+  }
+}
+
+export function useLocalStorage<T extends string>(key: string) {
+  const value = getValue(key) as Ref<T | null>;
+
+  watch(value, (v) => setValue(key, v));
+
+  return value;
+}

package/src/composition/useMouse.ts

@@ -0,0 +1,18 @@
+import { onMounted, onUnmounted, reactive } from 'vue';
+
+export function useMouse() {
+  const pos = reactive({
+    x: 0,
+    y: 0,
+  });
+
+  function update(event: MouseEvent) {
+    pos.x = event.pageX;
+    pos.y = event.pageY;
+  }
+
+  onMounted(() => window.addEventListener('mousemove', update));
+  onUnmounted(() => window.removeEventListener('mousemove', update));
+
+  return pos;
+}

package/src/composition/useMouseCapture.ts

@@ -0,0 +1,65 @@
+import type { MaybeRef } from '@/types';
+import { unref } from 'vue';
+import { useEventListener } from '@/composition/useEventListener';
+
+type CustomEvent = {
+  x: number;
+  y: number;
+  dx: number;
+  dy: number;
+  stop?: boolean;
+};
+
+type CaptureState = {
+  el: HTMLElement | undefined;
+  x: number;
+  y: number;
+};
+
+export function useMouseCapture<T extends HTMLElement>(elRef: MaybeRef<T | undefined>, cb: (ev: CustomEvent, state: CaptureState) => void) {
+  const state: CaptureState = {
+    el: undefined as HTMLElement | undefined,
+    x: 0,
+    y: 0,
+  };
+
+  const createCustom = (ev: MouseEvent) => ({
+    x: ev.x,
+    y: ev.y,
+    dx: ev.x - state.x,
+    dy: ev.y - state.y,
+  });
+
+  useEventListener(document, 'mousedown', (ev) => {
+    if (ev.target === unref(elRef)) {
+      //disable selection when moving
+      if (ev.stopPropagation) ev.stopPropagation();
+      if (ev.preventDefault) ev.preventDefault();
+      state.el = unref(elRef);
+      state.x = ev.x;
+      state.y = ev.y;
+    }
+  });
+
+  useEventListener(document, 'mouseup', (ev) => {
+    if (!state.el) {
+      return;
+    }
+
+    state.el = undefined;
+
+    cb(
+      {
+        ...createCustom(ev),
+        stop: true,
+      },
+      state,
+    );
+  });
+
+  useEventListener(document, 'mousemove', (ev) => {
+    if (state.el) {
+      cb(createCustom(ev), state);
+    }
+  });
+}

package/src/composition/useNotificationPosition.ts

@@ -0,0 +1,15 @@
+import { type Ref, ref } from 'vue';
+import { call } from '@/helpers/utils';
+import { useElementPosition } from '@/composition/usePosition';
+
+export function useNotificationPosition(el: Ref<HTMLElement | undefined>) {
+  const style = ref('');
+
+  useElementPosition(el, (pos) => {
+    style.value = call(() => {
+      return `left: ${pos.offsetX + pos.width - 320}px; bottom: ${pos.scrollHeight - pos.offsetY + 10}px;`;
+    });
+  });
+
+  return style;
+}

package/src/composition/usePosition.ts

@@ -0,0 +1,41 @@
+import { type Ref, onMounted } from 'vue';
+import { useEventListener } from '@/composition/useEventListener';
+import { requestTick } from '@/helpers/utils';
+import type { ElementPosition } from '@/types';
+
+export function useElementPosition(el: Ref<HTMLElement | undefined>, cb: (pos: ElementPosition) => void) {
+  const update = () => {
+    if (el.value) {
+      const { scrollTop, scrollLeft, scrollHeight, scrollWidth, clientHeight, clientWidth } = document.documentElement;
+      const rect = el.value.getBoundingClientRect();
+      cb({
+        scrollTop,
+        scrollLeft,
+        scrollHeight,
+        scrollWidth,
+        clientHeight,
+        clientWidth,
+        offsetY: scrollTop + rect.y,
+        offsetX: scrollLeft + rect.x,
+        top: rect.top,
+        right: rect.right,
+        bottom: rect.bottom,
+        left: rect.left,
+        width: rect.width,
+        height: rect.height,
+        x: rect.x,
+        y: rect.y,
+      });
+    }
+  };
+
+  const handle = requestTick(update);
+
+  onMounted(handle);
+
+  useEventListener(window, 'scroll', handle, true);
+
+  useEventListener(window, 'resize', handle, true);
+
+  useEventListener(window, 'adjust', handle, true);
+}

package/src/composition/useQuery.ts

@@ -0,0 +1,31 @@
+import { reactive } from 'vue';
+import { debounce } from '@milaboratories/helpers';
+
+export function useQuery<P extends unknown[], R>(fn: (...args: P) => Promise<R>) {
+  const self = reactive({
+    isLoading: false,
+    result: undefined as R | undefined,
+    error: undefined as unknown,
+    async run(...args: P) {
+      this.isLoading = true;
+      this.error = undefined;
+      try {
+        this.result = await fn(...args);
+      } catch (err: unknown) {
+        this.error = err;
+      } finally {
+        this.isLoading = false;
+      }
+    },
+    debounce(cb: () => P, dt = 1000) {
+      return debounce(() => {
+        const args = cb();
+        this.run(...args).catch(console.error);
+      }, dt);
+    },
+  });
+
+  self.run = self.run.bind(self);
+
+  return self;
+}

package/src/composition/useResizeObserver.ts

@@ -0,0 +1,19 @@
+import { onUnmounted, unref } from 'vue';
+import { tapIf } from '@/helpers/functions';
+import { onChanged } from '@/composition/utils';
+import { startResizeObserving, stopResizeObserving } from '@/global/resizeObserver';
+import type { MaybeRef } from '@/types';
+
+export function useResizeObserver<T extends HTMLElement>(target: MaybeRef<T | undefined>, cb: (el?: T | undefined) => void) {
+  onChanged(() => {
+    tapIf(unref(target), (el) => {
+      startResizeObserving(el, () => cb(el));
+    });
+  });
+
+  onUnmounted(() => {
+    tapIf(unref(target), (el) => {
+      stopResizeObserving(el);
+    });
+  });
+}

package/src/composition/useRipple.ts

@@ -0,0 +1,29 @@
+import type { Ref } from 'vue';
+import { onMounted } from 'vue';
+
+export function useRipple(el: Ref<HTMLElement | undefined>) {
+  function createRipple(event: MouseEvent) {
+    const button = event.currentTarget as HTMLButtonElement;
+
+    const circle = document.createElement('span');
+    const diameter = Math.max(button.clientWidth, button.clientHeight);
+    const radius = diameter / 2;
+
+    circle.style.width = circle.style.height = `${diameter}px`;
+    circle.style.left = `${event.clientX - button.offsetLeft - radius}px`;
+    circle.style.top = `${event.clientY - button.offsetTop - radius}px`;
+    circle.classList.add('ripple');
+
+    const ripple = button.getElementsByClassName('ripple')[0];
+
+    if (ripple) {
+      ripple.remove();
+    }
+
+    button.appendChild(circle);
+  }
+
+  onMounted(() => {
+    el.value?.addEventListener('click', createRipple);
+  });
+}

package/src/composition/useScroll.ts

@@ -0,0 +1,71 @@
+import { type Ref, onMounted } from 'vue';
+import { useEventListener } from '@/composition/useEventListener';
+import { requestTick } from '@/helpers/utils';
+
+export function useScroll($el: Ref<HTMLElement | undefined>, fadeHeight: number | null = null, fadeWidth: number | null = null) {
+  function getYMask(el: HTMLElement) {
+    const { scrollTop, scrollHeight, clientHeight } = el;
+
+    const hasScroll = scrollHeight > clientHeight;
+
+    if (!hasScroll || !fadeHeight) {
+      return null;
+    }
+
+    const scrollBottom = scrollHeight - scrollTop - clientHeight;
+    const offsetTop = scrollTop > fadeHeight ? fadeHeight : 0;
+    const offsetBottom = scrollBottom > fadeHeight ? clientHeight - fadeHeight - offsetTop : clientHeight;
+
+    return `linear-gradient(
+        to bottom,
+        transparent,
+        black ${offsetTop}px,
+        black ${offsetBottom}px,
+        transparent 100%
+      )`;
+  }
+
+  function getXMask(el: HTMLElement) {
+    const { scrollLeft, scrollWidth, clientWidth } = el;
+
+    const hasScroll = scrollWidth > clientWidth;
+
+    if (!hasScroll || !fadeWidth) {
+      return null;
+    }
+
+    const scrollRight = scrollWidth - scrollLeft - clientWidth;
+    const offsetLeft = scrollLeft > fadeWidth ? fadeWidth : 0;
+    const offsetRight = scrollRight > fadeWidth ? clientWidth - fadeWidth - offsetLeft : clientWidth;
+
+    return `linear-gradient(
+        to right,
+        transparent,
+        black ${offsetLeft}px,
+        black ${offsetRight}px,
+        transparent 100%
+      )`;
+  }
+
+  function update() {
+    const el = $el.value;
+
+    if (!el) {
+      return;
+    }
+
+    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(','));
+    if (masks.length > 1) {
+      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);
+}

package/src/composition/useSliderBreakpoints.ts

@@ -0,0 +1,17 @@
+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;
+    let start = min;
+    while (start < max) {
+      start += step;
+      const posValue = (clamp(start, min, max) - min) / (max - min);
+      const percent = (1 - posValue) * 100;
+      result.push(percent);
+    }
+    return result;
+  });
+};