@milaboratories/uikit 1.2.3

package/src/drafts/FileBaseInput.vue

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import { PlBtnSecondary } from '@/components/PlBtnSecondary';
+import { PlBtnGhost } from '@/components/PlBtnGhost';
+import { computed, ref } from 'vue';
+
+type PropsType = {
+  modelValue: File[] | null;
+  title?: string;
+  description?: string;
+  acceptedTypes?: string;
+  multiple?: boolean;
+  buttonText?: string;
+  disabled?: boolean;
+};
+
+const props = withDefaults(defineProps<PropsType>(), {
+  modelValue: null,
+  title: 'FASTQ',
+  description: 'Drag & drop FASTQ files here or...',
+  multiple: false,
+  acceptedTypes: '',
+  buttonText: 'Select local file',
+});
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', files: File[] | null): void;
+  (e: 'selected', files: File[]): void;
+}>();
+
+const fileInput = ref<HTMLInputElement>();
+const dragging = ref(false);
+
+const hasFiles = computed(() => props.modelValue && props.modelValue.length > 0);
+function triggerFileInput() {
+  fileInput.value?.click();
+}
+
+function handleFiles(event: Event) {
+  const target = event.target as HTMLInputElement;
+  const files = target.files || (event as DragEvent).dataTransfer?.files;
+
+  if (files) {
+    const filteredFiles = filterFiles(Array.from(files));
+    if (!props.multiple) {
+      filteredFiles.length = 1;
+    }
+    emit('update:modelValue', filteredFiles);
+    emit('selected', filteredFiles);
+  }
+
+  dragging.value = false;
+}
+
+function handleDrop(event: DragEvent) {
+  event.preventDefault();
+  dragging.value = false;
+  handleFiles(event);
+}
+
+function filterFiles(files: File[]): File[] {
+  if (!props.acceptedTypes) return files;
+  const acceptedTypesArray = props.acceptedTypes.split(',').map((type) => type.trim());
+  return Array.from(files).filter((file) => {
+    return acceptedTypesArray.some((type) => {
+      if (type.includes('/*')) {
+        // Шаблон типа, например, 'image/*'
+        return file.type.startsWith(type.split('/')[0]);
+      }
+      return file.type === type;
+    });
+  });
+}
+
+function deleteFile(file: File) {
+  if (file && props.modelValue && props.modelValue.length > 0) {
+    const i = props.modelValue.findIndex((f) => f === file);
+    if (i !== -1) {
+      let arr = [...props.modelValue];
+      arr.splice(i, 1);
+      emit('update:modelValue', arr);
+    }
+  }
+}
+</script>
+<template>
+  <div
+    :class="{ dragging: dragging, active: hasFiles, disabled }"
+    class="pl-file-base-input"
+    @dragover.prevent="dragging = true"
+    @dragenter.prevent
+    @dragleave="dragging = false"
+    @drop="handleDrop"
+    @click="triggerFileInput"
+  >
+    <div class="d-flex">
+      <div class="pl-file-base-input__text flex-grow-1">
+        <div class="pl-file-base-input__title text-subtitle-s">{{ title }}</div>
+        <div class="pl-file-base-input__description text-description">
+          {{ description }}
+        </div>
+      </div>
+      <div class="pl-file-base-input__buttons d-flex gap-2">
+        <input ref="fileInput" :multiple="multiple" :accept="acceptedTypes" type="file" @change="handleFiles" />
+        <PlBtnSecondary :disabled="disabled" class="text-caps11">
+          {{ buttonText }}
+        </PlBtnSecondary>
+        <slot name="actions" />
+      </div>
+    </div>
+
+    <div v-if="hasFiles" class="d-flex gap-2 pa-4 flex-wrap">
+      <div v-for="file in modelValue" :key="file.name" class="pl-file-base-input__file d-flex align-center">
+        <div class="pl-file-base-input__file-name text-m">
+          {{ file.name }}
+        </div>
+        <PlBtnGhost :disabled="disabled" icon="close" round size="small" class="flex-shrink-0" @click.stop="deleteFile(file)" />
+      </div>
+    </div>
+  </div>
+</template>

package/src/global/resizeObserver.ts

@@ -0,0 +1,20 @@
+import { tapIf } from '@/helpers/functions';
+
+const cm = new WeakMap<Element, (entry: ResizeObserverEntry) => void>();
+
+const resizeObserver = new ResizeObserver((entries) => {
+  for (const entry of entries) {
+    tapIf(cm.get(entry.target), (cb) => cb(entry));
+  }
+});
+
+export function startResizeObserving(el: Element, cb: (entry: ResizeObserverEntry) => void) {
+  cm.set(el, cb);
+  resizeObserver.unobserve(el);
+  resizeObserver.observe(el);
+}
+
+export function stopResizeObserving(el: Element) {
+  resizeObserver.unobserve(el);
+  cm.delete(el);
+}

package/src/helpers/dom.ts

@@ -0,0 +1,86 @@
+import { animate, makeEaseOut } from '@/helpers/utils';
+
+export function isElementVisible(parent: HTMLElement, el: HTMLElement) {
+  const scrollTop = parent.scrollTop;
+  const parentHeight = parent.getBoundingClientRect().height;
+  const elOffsetTop = el.offsetTop;
+  const elHeight = el.getBoundingClientRect().height;
+  return elOffsetTop + elHeight < parentHeight + scrollTop && elOffsetTop > scrollTop;
+}
+
+export function getElementScrollPosition(parent: HTMLElement, el: HTMLElement) {
+  const scrollTop = parent.scrollTop;
+  const parentHeight = parent.getBoundingClientRect().height;
+  const elOffsetTop = el.offsetTop;
+  const elHeight = el.getBoundingClientRect().height;
+
+  if (elOffsetTop + elHeight < parentHeight + scrollTop) {
+    return 'ceil' as const;
+  }
+
+  if (elOffsetTop > scrollTop) {
+    return 'floor' as const;
+  }
+
+  return 'visible' as const;
+}
+
+export function scrollIntoView(parent: HTMLElement, el: HTMLElement, options: { duration?: number } = {}) {
+  const scrollTop = parent.scrollTop;
+  const parentHeight = parent.getBoundingClientRect().height;
+  const elHeight = el.getBoundingClientRect().height;
+  const offsetTop = el.offsetTop;
+  const scrollPosition = getElementScrollPosition(parent, el);
+
+  if (scrollPosition === 'visible') {
+    return;
+  }
+
+  const draw = (progress: number) => {
+    const to = scrollPosition === 'floor' ? offsetTop - (parentHeight - elHeight) : offsetTop;
+    parent.scrollTop = scrollTop + progress * (to - scrollTop);
+  };
+
+  if (!isElementVisible(parent, el)) {
+    animate({
+      duration: options.duration || 100,
+      timing: makeEaseOut((t) => t),
+      draw,
+    });
+  }
+}
+
+export function eventListener<K extends keyof DocumentEventMap>(
+  el: Document,
+  type: K,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  listener: (this: Document, ev: DocumentEventMap[K]) => any,
+  options?: boolean | AddEventListenerOptions,
+): () => void;
+
+export function eventListener<K extends keyof HTMLElementEventMap>(
+  el: HTMLElement,
+  type: K,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
+  options?: boolean | AddEventListenerOptions,
+): () => void;
+
+export function eventListener<K extends string>(
+  el: HTMLElement | Document,
+  type: K,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  listener: (this: HTMLElement | Document, ev: unknown) => any,
+  options?: boolean | AddEventListenerOptions,
+) {
+  el.addEventListener(type, listener, options);
+
+  return function () {
+    el.removeEventListener(type, listener);
+  };
+}
+
+export function detectOutside(e: { x: number; y: number }, el: HTMLElement) {
+  const rect = el.getBoundingClientRect();
+  return e.x < rect.x || e.x > rect.x + rect.width || e.y < rect.y || e.y > rect.y + rect.height;
+}

package/src/helpers/functions.ts

@@ -0,0 +1,27 @@
+export function tap<T, R>(v: T, cb: (v: T) => R) {
+  return cb(v);
+}
+
+export function tapIf<T, R>(v: T | null | undefined, cb: (v: T) => R) {
+  if (v !== null && v !== undefined) {
+    return cb(v);
+  }
+}
+
+export function flatValue<T>(v: T | T[]): T[] {
+  return Array.isArray(v) ? v : [v];
+}
+
+export function generate<R>(count: number, cb: (i: number) => R): R[] {
+  const r: R[] = [];
+  for (let i = 0; i < count; i++) {
+    r.push(cb(i));
+  }
+  return r;
+}
+
+export function copyProps<T extends Record<string, unknown>>(target: T, source: T, ...keys: (keyof T)[]) {
+  keys.forEach((key) => {
+    target[key] = source[key];
+  });
+}

package/src/helpers/index.ts

@@ -0,0 +1,15 @@
+export function requestTick<P>(cb: (...args: P[]) => void) {
+  let tick = false;
+
+  return function handle(...args: P[]) {
+    if (!tick) {
+      requestAnimationFrame(() => {
+        cb(...args);
+        tick = false;
+      });
+      tick = true;
+    } else {
+      console.log('handle pressure');
+    }
+  };
+}

package/src/helpers/iterators.ts

@@ -0,0 +1,21 @@
+export function* mapIterable<T, R>(it: Iterable<T>, cb: (v: T) => R) {
+  for (const v of it) {
+    yield cb(v);
+  }
+}
+
+export function* filterIterable<T>(it: Iterable<T>, cb: (v: T) => boolean) {
+  for (const v of it) {
+    if (cb(v)) {
+      yield v;
+    }
+  }
+}
+
+export function toList<T>(it: Iterable<T>) {
+  const res: T[] = [];
+  for (const v of it) {
+    res.push(v);
+  }
+  return res;
+}

package/src/helpers/math.ts

@@ -0,0 +1,3 @@
+export function clamp(n: number, lo: number, up: number) {
+  return lo > n ? lo : n > up ? up : n;
+}

package/src/helpers/objects.ts

@@ -0,0 +1,19 @@
+export function isRecord<V, T extends Record<string, V>>(obj: T | unknown): obj is T {
+  return obj !== null && typeof obj === 'object';
+}
+
+export function deepEqual(a: unknown, b: unknown): boolean {
+  if (!(isRecord(a) && isRecord(b))) {
+    return a === b;
+  }
+
+  if (Object.keys(a).length !== Object.keys(b).length) {
+    return false;
+  }
+
+  return Object.keys(a).every((k) => deepEqual(a[k], b[k]));
+}
+
+export function deepIncludes<T>(arr: T[], search: T) {
+  return arr.some((it) => deepEqual(it, search));
+}

package/src/helpers/utils.ts

@@ -0,0 +1,142 @@
+import type { ListOption } from '../types';
+
+export function call<R>(f: () => R): R {
+  return f();
+}
+
+export function notEmpty<T>(v: T | null | undefined, message: string): T {
+  if (v === null || v === undefined) {
+    throw Error(message);
+  }
+
+  return v;
+}
+
+export function requestTick<P>(cb: (...args: P[]) => void) {
+  let tick = false;
+
+  return function handle(...args: P[]) {
+    if (!tick) {
+      requestAnimationFrame(() => {
+        cb(...args);
+        tick = false;
+      });
+      tick = true;
+    }
+  };
+}
+
+export function delay(ms: number) {
+  return new Promise((r) => setTimeout(r, ms));
+}
+
+export function timeout(cb: () => void, ms: number) {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const r: any = setTimeout(cb, ms);
+  return () => {
+    clearTimeout(r);
+  };
+}
+
+export function randomInt(min: number, max: number) {
+  min = Math.ceil(min);
+  max = Math.floor(max);
+  return Math.floor(Math.random() * (max - min)) + min;
+}
+
+export function randomString(length: number) {
+  let s = '';
+  for (let i = 0; i < length; i++) {
+    s += String.fromCharCode(randomInt(65, 91));
+  }
+  return s;
+}
+
+export function makeEaseOut(timing: (t: number) => number) {
+  return function (timeFraction: number) {
+    return 1 - timing(1 - timeFraction);
+  };
+}
+
+export function makeEaseInOut(timing: (t: number) => number) {
+  return function (timeFraction: number) {
+    if (timeFraction < 0.5) return timing(2 * timeFraction) / 2;
+    else return (2 - timing(2 * (1 - timeFraction))) / 2;
+  };
+}
+
+export function animate(options: { duration: number; draw: (p: number) => void; timing: (t: number) => number }) {
+  const { duration, draw, timing } = options;
+  const start = performance.now();
+  let stop = false;
+  requestAnimationFrame(function animate(time) {
+    let timeFraction = (time - start) / duration;
+    if (timeFraction > 1 || stop) timeFraction = 1;
+    const progress = timing(timeFraction);
+    draw(progress);
+    if (timeFraction < 1) {
+      requestAnimationFrame(animate);
+    }
+  });
+
+  return function () {
+    stop = true;
+  };
+}
+
+export function animateInfinite(options: { getFraction: (dt: number) => number; draw: (p: number) => void; timing: (t: number) => number }) {
+  const { getFraction, draw, timing } = options;
+  const start = performance.now();
+  let stop = false;
+  requestAnimationFrame(function animate(time) {
+    let timeFraction = getFraction(time - start);
+    if (stop) {
+      return;
+    }
+    if (timeFraction > 1) timeFraction = 1;
+    const progress = timing(timeFraction);
+    draw(progress);
+    if (timeFraction < 1) {
+      requestAnimationFrame(animate);
+    }
+  });
+  return function () {
+    stop = true;
+  };
+}
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+type AnyFunction = (...args: any[]) => any;
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export function debounce<F extends AnyFunction>(func: F, delay: number) {
+  let timerId = -1;
+  return (...args: Parameters<F>) => {
+    if (timerId !== -1) {
+      clearTimeout(timerId);
+      timerId = -1;
+    }
+    timerId = window.setTimeout(() => func(...args), delay);
+  };
+}
+
+export function throttle<F extends AnyFunction>(callback: F, ms: number, trailing = true): (...args: Parameters<F>) => void {
+  let t = 0,
+    call: AnyFunction | null;
+  return function (this: unknown, ...args: Parameters<F>) {
+    call = () => {
+      callback.apply(this, args);
+      t = new Date().getTime() + ms;
+      call = null;
+      trailing &&
+        setTimeout(() => {
+          call && call();
+        }, ms);
+    };
+    if (new Date().getTime() > t) call();
+  };
+}
+
+export function listToOptions<T>(list: T[] | readonly T[]): ListOption<T>[] {
+  return list.map((value) => ({ text: String(value), value }));
+}

package/src/index.ts

@@ -0,0 +1,112 @@
+import './assets/ui.scss';
+
+// @TODO review
+import GridTable from '@/components/GridTable/index.vue';
+import * as DataTable from '@/components/DataTable';
+import type { Settings as GridTableSettings } from './components/GridTable/types';
+import type * as GridTableTypes from './components/GridTable/types';
+import ThemeSwitcher from './components/ThemeSwitcher.vue';
+
+/**
+ * Layout components
+ */
+
+export * from './layout/PlBlockPage';
+export * from './layout/PlContainer';
+export * from './layout/PlRow';
+export * from './layout/PlSpacer';
+export * from './layout/PlGrid';
+
+/**
+ * Components
+ */
+export * from './components/PlAlert';
+export * from './components/PlBtnPrimary';
+export * from './components/PlBtnAccent';
+export * from './components/PlBtnSecondary';
+export * from './components/PlBtnGhost';
+export * from './components/PlBtnLink';
+export * from './components/PlBtnGroup';
+export * from './components/PlTextField';
+export * from './components/PlTextArea';
+export * from './components/PlDropdown';
+export * from './components/PlDropdownLine';
+export * from './components/PlTooltip';
+export * from './components/PlProgressBar';
+export * from './components/PlNumberField';
+export * from './components/PlDropdownMulti';
+export * from './components/PlCheckbox';
+export * from './components/PlCheckboxGroup';
+export * from './components/PlChip';
+export * from './components/PlDialogModal';
+export * from './components/PlSlideModal';
+export * from './components/PlToggleSwitch';
+
+export * from './components/PlFileDialog';
+export * from './components/PlFileInput';
+
+// @TODO review (may be private)
+import DropdownListItem from './components/DropdownListItem.vue';
+
+// @TODO review
+import MaskIcon16 from './components/MaskIcon16.vue';
+import MaskIcon24 from './components/MaskIcon24.vue';
+import ContextProvider from './components/ContextProvider.vue';
+import Slider from './components/Slider.vue';
+import { showContextMenu } from './components/contextMenu/index.ts';
+
+/**
+ * Usables
+ */
+export { useElementPosition as usePosition } from './composition/usePosition';
+export { useClickOutside } from './composition/useClickOutside';
+export { useEventListener } from './composition/useEventListener';
+export { useScroll } from './composition/useScroll';
+export { useResizeObserver } from './composition/useResizeObserver';
+export { useTheme } from './composition/useTheme';
+export { useLocalStorage } from './composition/useLocalStorage';
+export { useMouseCapture } from './composition/useMouseCapture';
+export { useHover } from './composition/useHover';
+export { useMouse } from './composition/useMouse';
+export { useSortable } from './composition/useSortable';
+export { useInterval } from './composition/useInterval';
+export { useFormState } from './composition/useFormState';
+export { useQuery } from './composition/useQuery.ts';
+export { useDraggable } from './composition/useDraggable';
+
+//for new version
+import LongText from './components/LongText.vue';
+import SliderRangeTriple from './components/SliderRangeTriple.vue';
+import SliderRange from './components/SliderRange.vue';
+import Scrollable from './components/Scrollable.vue';
+
+import icons16 from './assets/icons/icons-16-generated.json';
+import icons24 from './assets/icons/icons-24-generated.json';
+
+import { allCssVariables } from './demo-site-data/all-css-variables.ts';
+
+export type * from './types';
+
+export { maskIcons16, maskIcons24 } from './types';
+
+export * from './helpers/dom';
+
+export * from './helpers/utils';
+
+/**
+ * @TODO review
+ */
+export { ThemeSwitcher, DropdownListItem, MaskIcon16, MaskIcon24, GridTable, DataTable, ContextProvider, Slider };
+
+// Helpers
+export { showContextMenu };
+
+// types
+export type { GridTableSettings, GridTableTypes };
+
+//move to new version pl-uikit
+export { LongText, SliderRangeTriple, SliderRange, Scrollable };
+
+// @todo
+const DemoData = { allCssVariables: allCssVariables(), icons16, icons24 };
+export { DemoData };

package/src/layout/PlBlockPage/PlBlockPage.vue

@@ -0,0 +1,28 @@
+<script lang="ts">
+/** Root block page component */
+export default {
+  name: 'PlBlockPage',
+};
+</script>
+
+<script lang="ts" setup>
+import { useSlots } from 'vue';
+import './pl-block-page.scss';
+
+const slots = useSlots();
+</script>
+
+<template>
+  <div class="pl-layout-component pl-block-page">
+    <div v-if="slots.title" class="pl-block-page__title">
+      <h1><slot name="title" /></h1>
+      <div class="pl-block-page__title__append">
+        <slot name="append" />
+      </div>
+    </div>
+    <div v-else />
+    <div class="pl-block-page__body">
+      <slot />
+    </div>
+  </div>
+</template>

package/src/layout/PlBlockPage/index.ts

@@ -0,0 +1 @@
+export { default as PlBlockPage } from './PlBlockPage.vue';

package/src/layout/PlBlockPage/pl-block-page.scss

@@ -0,0 +1,38 @@
+.pl-block-page {
+  padding: var(--container-spacing);
+  background-color: var(--bg-elevated-01);
+  height: 100%;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+
+  &__title {
+    height: 80px;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 20px 24px;
+
+    h1 {
+      margin: 0;
+      color: var(--txt-01);
+      font-size: 28px;
+      font-weight: 500;
+      line-height: 32px;
+      letter-spacing: -0.56px;
+    }
+
+    &__append {
+      margin-left: auto;
+      display: flex;
+      align-items: center;
+      gap: 2px;
+    }
+  }
+
+  &__body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap-v);
+    padding: var(--main-spacing, 24px);
+  }
+}

package/src/layout/PlContainer/PlContainer.vue

@@ -0,0 +1,25 @@
+<script lang="ts">
+/** Container with vertical spacing */
+export default {
+  name: 'PlContainer',
+};
+</script>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import './pl-container.scss';
+
+const props = defineProps<{
+  width?: string;
+}>();
+
+const style = computed(() => ({
+  width: props.width,
+}));
+</script>
+
+<template>
+  <div class="pl-container pl-layout-component" :style="style">
+    <slot />
+  </div>
+</template>

package/src/layout/PlContainer/index.ts

@@ -0,0 +1 @@
+export { default as PlContainer } from './PlContainer.vue';

package/src/layout/PlContainer/pl-container.scss

@@ -0,0 +1,5 @@
+.pl-container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-v);
+}