@milaboratories/uikit 1.2.3

package/src/composition/useSortable.ts

@@ -0,0 +1,240 @@
+import type { Ref } from 'vue';
+import { computed, watchEffect } from 'vue';
+import { useEventListener } from './useEventListener';
+
+type SortableItem = {
+  el: HTMLElement;
+  y: number;
+  dy: number;
+  orderChanged: boolean;
+};
+
+export type SortableSettings = {
+  onChange: (indices: number[]) => void;
+  handle?: string;
+  shakeBuffer?: number;
+  reorderDelay?: number;
+  transitionDelay?: string;
+};
+
+const classes = {
+  item: 'sortable__item',
+  animate: 'sortable__animate',
+};
+
+const getOffset = (el: HTMLElement) => {
+  return el.getBoundingClientRect().y;
+};
+
+const getMiddle = (el: HTMLElement) => {
+  const { y, height } = el.getBoundingClientRect();
+  return y + Math.ceil(height / 2);
+};
+
+const getBottom = (el: HTMLElement) => {
+  const { y, height } = el.getBoundingClientRect();
+  return y + height;
+};
+
+export function useSortable(listRef: Ref<HTMLElement | undefined>, settings: SortableSettings) {
+  const state = {
+    item: undefined as SortableItem | undefined,
+    options() {
+      return [...(listRef.value?.children ?? [])] as HTMLElement[];
+    },
+  };
+
+  const optionsRef = computed(() => {
+    return state.options();
+  });
+
+  const shakeBuffer = settings.shakeBuffer ?? 10;
+
+  const reorderDelay = settings.reorderDelay ?? 100;
+
+  function mouseDown(this: HTMLElement, e: { y: number; target: EventTarget | null }) {
+    const handle = settings.handle ? this.querySelector(settings.handle) : null;
+
+    if (handle && !handle.contains(e.target as HTMLElement)) {
+      return;
+    }
+
+    this.classList.remove(classes.animate);
+    this.classList.add(classes.item);
+
+    state.item = {
+      el: this,
+      y: e.y,
+      dy: 0,
+      orderChanged: false,
+    };
+  }
+
+  function elementsBefore(el: HTMLElement) {
+    const options = state.options();
+    return options.slice(0, options.indexOf(el));
+  }
+
+  function elementsAfter(el: HTMLElement) {
+    const children = state.options();
+    return children.slice(children.indexOf(el) + 1);
+  }
+
+  function insertBefore(before: HTMLElement, el: HTMLElement) {
+    const children = state.options().filter((e) => e !== el);
+    const index = children.indexOf(before);
+    children.splice(index, 0, el);
+    return children;
+  }
+
+  function insertAfter(after: HTMLElement, el: HTMLElement) {
+    const children = state.options().filter((e) => e !== el);
+    const index = children.indexOf(after);
+    children.splice(index + 1, 0, el);
+    return children;
+  }
+
+  function updatePosition(item: SortableItem, y: number) {
+    item.dy = y - item.y;
+    item.el.style.setProperty('transform', `translateY(${item.dy}px)`);
+  }
+
+  function changeOrder(reordered: HTMLElement[]) {
+    if (!state.item) {
+      return;
+    }
+
+    const { el } = state.item;
+
+    if (!el.isConnected) {
+      state.item = undefined;
+      return;
+    }
+
+    const oldPositions = reordered.map((e) => getOffset(e));
+
+    const y1 = getOffset(el);
+    listRef.value?.replaceChildren(...reordered);
+    const y2 = getOffset(el);
+
+    const newPositions = reordered.map((e) => getOffset(e));
+
+    const toAnimate: HTMLElement[] = [];
+
+    for (let i = 0; i < newPositions.length; i++) {
+      const option = reordered[i];
+
+      if (option === state.item.el) {
+        continue;
+      }
+
+      const newY = newPositions[i];
+
+      const oldY = oldPositions[i];
+
+      const invert = oldY - newY;
+
+      option.style.transform = `translateY(${invert}px)`;
+
+      toAnimate.push(option);
+    }
+
+    const dy = y2 - y1;
+
+    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)`);
+
+    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.classList.remove(classes.animate);
+        });
+      });
+    });
+  }
+
+  useEventListener(window, 'mousemove', (e: { y: number }) => {
+    if (!state.item) {
+      return;
+    }
+
+    const { el } = state.item;
+
+    updatePosition(state.item, e.y);
+
+    const upper = getOffset(state.item.el);
+    const bottom = getBottom(state.item.el);
+
+    const before = elementsBefore(el);
+    const after = elementsAfter(el);
+
+    before.forEach((e) => {
+      const y = getMiddle(e);
+
+      if (upper + shakeBuffer < y) {
+        changeOrder(insertBefore(e, el));
+      }
+    });
+
+    after.forEach((e) => {
+      const y = getMiddle(e);
+
+      if (bottom - shakeBuffer > y) {
+        changeOrder(insertAfter(e, el));
+      }
+    });
+  });
+
+  useEventListener(window, 'mouseup', () => {
+    if (!state.item) {
+      return;
+    }
+
+    const { el, orderChanged } = state.item;
+
+    el.classList.add(classes.animate);
+    el.style.removeProperty('transform');
+
+    el.addEventListener('transitionend', () => {
+      el.classList.remove(classes.animate, classes.item);
+    });
+
+    setTimeout(() => {
+      if (!orderChanged) {
+        return;
+      }
+
+      const newIndices = state.options().map((o) => Number(o.getAttribute('data-index')));
+
+      const list = listRef.value;
+
+      if (list) {
+        for (const child of state.options()) {
+          list.removeChild(child);
+        }
+
+        optionsRef.value.forEach((child) => {
+          list.appendChild(child);
+        });
+      }
+
+      settings.onChange(newIndices);
+    }, reorderDelay);
+
+    state.item = undefined;
+  });
+
+  watchEffect(() => {
+    optionsRef.value.forEach((child, i) => {
+      child.removeEventListener('mousedown', mouseDown);
+      child.addEventListener('mousedown', mouseDown);
+      child.setAttribute('data-index', String(i));
+    });
+  });
+}

package/src/composition/useTheme.ts

@@ -0,0 +1,48 @@
+import { computed, onMounted, onUnmounted, ref, unref, watch } from 'vue';
+import { mapIterable, toList } from '@/helpers/iterators';
+import { useLocalStorage } from '@/composition/useLocalStorage';
+
+type Theme = 'light' | 'dark';
+
+type Callback = (mode: Theme) => void;
+
+const cm = new Set<Callback>();
+
+window.matchMedia &&
+  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 browserTheme = ref<Theme>(init);
+const savedTheme = useLocalStorage<Theme>('theme');
+
+export function useTheme(_cb?: Callback) {
+  const theme = computed<Theme>(() => {
+    return savedTheme.value ? savedTheme.value : browserTheme.value;
+  });
+
+  const cb = (theme: Theme) => {
+    browserTheme.value = theme;
+    _cb && _cb(theme);
+  };
+
+  function toggleTheme() {
+    savedTheme.value = theme.value === 'light' ? 'dark' : theme.value === 'dark' ? 'light' : 'light';
+  }
+
+  watch(theme, (v) => {
+    _cb && _cb(unref(v));
+  });
+
+  onMounted(() => {
+    cm.add(cb);
+  });
+
+  onUnmounted(() => {
+    cm.delete(cb);
+  });
+
+  return [theme, toggleTheme] as const;
+}

package/src/composition/utils.ts

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

package/src/demo-site-data/all-css-variables.ts

@@ -0,0 +1,330 @@
+export function allCssVariables(): Record<
+  string,
+  {
+    title: string;
+    data: Record<
+      string,
+      {
+        light: [boolean, boolean];
+        value: [string, string];
+        description: string;
+      }
+    >;
+  }
+> {
+  return {
+    txtSec: {
+      title: 'Text',
+      data: {
+        '--txt-00': {
+          light: [false, false],
+          value: ['#FFFFFF', '#FFFFFF'],
+          description: 'Text on the colored elements',
+        },
+        '--txt-01': {
+          light: [true, false],
+          value: ['#110529', '#FFFFFF'],
+          description: 'Primary text layer',
+        },
+        '--txt-02': {
+          light: [true, false],
+          value: ['#231842', '#ADAEB8'],
+          description: 'Secondary text layer - large arrays of text',
+        },
+        '--txt-03': {
+          light: [true, true],
+          value: ['#9D9EAE', '#60616B'],
+          description: 'Tetritary text layer - hints and descriptions',
+        },
+        '--txt-mask': {
+          light: [false, true],
+          value: ['#CFD1DB', '#3D3D42'],
+          description: 'Text mask in inputs, icons, etc.',
+        },
+        '--txt-focus': {
+          light: [true, true],
+          value: ['#07AD3E', '#87E087'],
+          description: 'Colored text in active/focus elements',
+        },
+        '--txt-error': {
+          light: [true, true],
+          value: ['#F1222F', '#FF5C5C'],
+          description: 'Colored text in error elements',
+        },
+        '--txt-link': {
+          light: [true, true],
+          value: ['#5F31CC', '#9470FF'],
+          description: 'Colored text in links',
+        },
+      },
+    },
+    iconSec: {
+      title: 'Icon',
+      data: {
+        '--ic-00': {
+          light: [false, false],
+          value: ['#FFFFFF', '#FFFFFF'],
+          description: 'Icons on colored elements',
+        },
+        '--ic-01': {
+          light: [true, false],
+          value: ['#110529', '#FFFFFF'],
+          description: 'Primary elements',
+        },
+        '--ic-02': {
+          light: [false, true],
+          value: ['#CFD1DB', '#60616B'],
+          description: 'Secondary & tetritary elements',
+        },
+        '--ic-accent': {
+          light: [true, false],
+          value: ['#07AD3E', '#87E087'],
+          description: 'Focus/active elements',
+        },
+      },
+    },
+    borderSec: {
+      title: 'Border',
+      data: {
+        '--border-color-default': {
+          light: [true, true],
+          value: ['#110529', '#60616B'],
+          description: 'Main border for components',
+        },
+        '--border-color-hover': {
+          light: [true, true],
+          value: ['#231842', '#ADAEB8'],
+          description: 'Hover on main border',
+        },
+        '--border-color-focus': {
+          light: [false, false],
+          value: ['#49CC49', '#49CC49'],
+          description: 'Active border for components',
+        },
+        '--border-color-error': {
+          light: [false, false],
+          value: ['#FF5C5C', '#FF5C5C'],
+          description: 'Error border for components',
+        },
+        '--border-color-div-grey': {
+          light: [false, true],
+          value: ['#E1E3EB', '#232329'],
+          description: 'Divider lines low contrast',
+        },
+        '--border-color-div-bw': {
+          light: [false, true],
+          value: ['#FFFFFF', '#000000'],
+          description: 'Divider lines hight contrast',
+        },
+      },
+    },
+    btnSec: {
+      title: 'Button',
+      data: {
+        '--btn-accent-default': {
+          light: [true, true],
+          value: ['#845CFF', ' #5F31CC'],
+          description: 'Accent coloured button',
+        },
+        '--btn-accent-hover': {
+          light: [true, true],
+          value: ['#9470FF', ' #5F31CC'],
+          description: 'Hover on accent coloured button',
+        },
+        '--btn-accent-press': {
+          light: [true, true],
+          value: ['#6F4DD6', '#5F31CC'],
+          description: 'Pressed on accent coloured button',
+        },
+        '--btn-primary-default': {
+          light: [true, true],
+          value: ['#110529', '#5F31CC'],
+          description: 'Primary button',
+        },
+        '--btn-primary-hover': {
+          light: [true, true],
+          value: ['#231842', '#6D3DDB'],
+          description: 'Hover on primary button',
+        },
+        '--btn-primary-press': {
+          light: [true, true],
+          value: ['#080214', '#5328B8'],
+          description: 'Hover on primary button',
+        },
+        '--btn-sec-hover-white': {
+          light: [false, true],
+          value: ['rgba(255, 255, 255, 0.50)', 'rgba(131, 131, 163, 0.16)'],
+          description: 'Hover background on transparent button',
+        },
+        '--btn-sec-hover-grey': {
+          light: [false, true],
+          value: ['rgba(155, 171, 204, 0.16)', 'rgba(131, 131, 163, 0.16)'],
+          description: 'Hover background on ghost button & icons',
+        },
+        '--btn-sec-press-grey': {
+          light: [false, true],
+          value: ['rgba(155, 171, 204, 0.24)', 'rgba(131, 131, 163, 0.24)'],
+          description: 'Hover background on ghost button & icons',
+        },
+        '--btn-active-select': {
+          light: [false, true],
+          value: ['rgba(99, 224, 36, 0.24)', 'rgba(99, 224, 36, 0.24)'],
+          description: 'Fill on selected elements',
+        },
+        '--btn-switcher': {
+          light: [false, true],
+          value: ['linear-gradient(180deg, #A1E59C 0%, #D0F5B0 100%)', '#5E5E70'],
+          description: 'Gradient on active controll/switcher element',
+        },
+      },
+    },
+    disSec: {
+      title: 'Disable',
+      data: {
+        '--dis-00': {
+          light: [false, true],
+          value: ['#FFFFFF', '#65656B'],
+          description: 'Elements on dis-01, labels, texts, icons',
+        },
+        '--dis-01': {
+          light: [false, true],
+          value: ['#CFD1DB', '#3D3D42'],
+          description: 'Buttons, borders, labels, texts, icons',
+        },
+      },
+    },
+    bgSec: {
+      title: 'Background',
+      data: {
+        '--bg-base-dark': {
+          light: [true, true],
+          value: ['#110529', '#0D0D0F'],
+          description: 'Default dark block background',
+        },
+        '--bg-base-light': {
+          light: [false, true],
+          value: ['#F7F8FA', '#0D0D0F'],
+          description: 'Default light block background',
+        },
+        '--bg-elevated-01': {
+          light: [false, true],
+          value: ['#FFFFFF', '#1B1B1F'],
+          description: 'Default block background',
+        },
+        '--bg-elevated-02': {
+          light: [false, true],
+          value: ['#E1E3EB', '#2D2D33'],
+          description: 'Secondary block background',
+        },
+      },
+    },
+    filledSec: {
+      title: 'Filled',
+      data: {
+        '--filled-V-BG': {
+          light: [false, true],
+          value: ['#D0F0C0', 'rgba(66, 184, 66, 0.40)'],
+          description: 'Text background selection on V-read',
+        },
+        '--filled-D-BG': {
+          light: [false, true],
+          value: ['#FFCECC', 'rgba(229, 83, 229, 0.40)'],
+          description: 'Text background selection on D-read',
+        },
+        '--filled-N-BG': {
+          light: [false, true],
+          value: ['#FAF5AA', 'rgba(83, 82, 102, 0.40)'],
+          description: 'Text background selection on C/N-read',
+        },
+        '--filled-J-BG': {
+          light: [false, true],
+          value: ['#DEDBFF', 'rgba(132, 92, 255, 0.40)'],
+          description: 'Text background selection on J-read',
+        },
+      },
+    },
+    notificationSec: {
+      title: 'Notification',
+      data: {
+        '--notification-neutral': {
+          light: [false, true],
+          value: ['linear-gradient(90deg, #D6D9FF 0%, #FFF 100%)', 'linear-gradient(90deg, #4D4D8F 0%, #292933 100%)'],
+          description: 'Background on neutral blocks',
+        },
+        '--notification-success': {
+          light: [false, true],
+          value: ['linear-gradient(90deg, #C9F0B6 0%, #FFF 100%)', 'linear-gradient(90deg, #305C3E 0%, #292933 100%)'],
+          description: 'Background on success blocks',
+        },
+        '--notification-warning': {
+          light: [false, true],
+          value: ['linear-gradient(90deg, #FEE0A3 0%, #FFF 100%)', 'linear-gradient(90deg, #754F2D 0%, #292933 100%)'],
+          description: 'Background on warning blocks',
+        },
+        '--notification-error': {
+          light: [false, true],
+          value: ['linear-gradient(90deg, #FFB8B8 0%, #FFF 100%)', 'linear-gradient(90deg, #8F3343 0%, #292933 100%)'],
+          description: 'Background on error blocks',
+        },
+      },
+    },
+    gradientSec: {
+      title: 'Gradient',
+      data: {
+        '--gradient-blue-green': {
+          light: [true, true],
+          value: [
+            'linear-gradient(0deg, #478063 0%, #2E4652 45.93%, #24223D 91.63%)',
+            'linear-gradient(0deg, #478063 0%, #2E4652 45.93%, #24223D 91.63%)',
+          ],
+          description: 'Main brand dark gradient',
+        },
+        '--gradient-green-lime': {
+          light: [false, true],
+          value: ['linear-gradient(180deg, #A1E59C 0%, #D0F5B0 100%)', 'linear-gradient(0deg, #478063 0%, #2E4652 45.93%, #24223D 91.63%)'],
+          description: 'Main brand light gradient',
+        },
+        '--gradient-blue-violet': {
+          light: [false, true],
+          value: ['linear-gradient(180deg, #ADB8FF 0%, #D6E9FF 100%)', 'linear-gradient(0deg, #478063 0%, #2E4652 45.93%, #24223D 91.63%)'],
+          description: 'Main brand light gradient',
+        },
+        '--gradient-blue-clear': {
+          light: [false, true],
+          value: ['linear-gradient(180deg, #85BEFF 0%, #CEF 100%)', 'linear-gradient(0deg, #478063 0%, #2E4652 45.93%, #24223D 91.63%)'],
+          description: 'Additional brand gradient',
+        },
+        '--gradient-orange': {
+          light: [false, true],
+          value: ['linear-gradient(180deg, #FFB766 0%, #FFEAA3 100%)', 'linear-gradient(0deg, #478063 0%, #2E4652 45.93%, #24223D 91.63%)'],
+          description: 'Additional brand gradient',
+        },
+        '--gradient-mint': {
+          light: [false, true],
+          value: ['linear-gradient(180deg, #7DD1D1 0%, #C8FAE9 100%)', 'linear-gradient(0deg, #478063 0%, #2E4652 45.93%, #24223D 91.63%)'],
+          description: 'Additional brand gradient',
+        },
+        '--gradient-lime': {
+          light: [false, true],
+          value: ['linear-gradient(180deg, #BFE062 0%, #E4FFAD 100%)', 'linear-gradient(0deg, #478063 0%, #2E4652 45.93%, #24223D 91.63%)'],
+          description: 'Additional brand gradient',
+        },
+        '--gradient-rose': {
+          light: [false, true],
+          value: ['linear-gradient(0deg, #FFDDD6 0%, #FF99C9 100%)', 'linear-gradient(0deg, #478063 0%, #2E4652 45.93%, #24223D 91.63%)'],
+          description: 'Additional brand gradient',
+        },
+        '--gradient-red': {
+          light: [false, true],
+          value: ['linear-gradient(0deg, #FFD5CC 0%, #FF9494 100%)', 'linear-gradient(0deg, #478063 0%, #2E4652 45.93%, #24223D 91.63%)'],
+          description: 'Additional brand gradient',
+        },
+        '--gradient-violet': {
+          light: [false, true],
+          value: ['linear-gradient(180deg, #BCA3FF 0%, #E5E5FF 100%)', 'linear-gradient(0deg, #478063 0%, #2E4652 45.93%, #24223D 91.63%)'],
+          description: 'Additional brand gradient',
+        },
+      },
+    },
+  };
+}