@milaboratories/uikit 1.2.3

package/src/components/DataTable/assets/data-table-style.scss

@@ -0,0 +1,308 @@
+@import "@/assets/mixins.scss";
+
+.data-table {
+  --cell-font-family: var(--font-family-base);
+  --cell-font-weight: 500;
+  --selected-bg: rgba(99, 224, 36, 0.12);
+
+  width: 100%;
+  max-height: 100%;
+  flex-direction: column;
+  border: 1px solid var(--bg-elevated-02);
+  border-radius: 6px;
+  position: relative;
+  font-weight: 500;
+
+  // outline: 1px solid yellow;
+
+  &.monospace {
+    --cell-font-family: var(--font-family-monospace);
+    --cell-font-weight: 400;
+  }
+
+  .t-scroll {
+    --handle-bg: #ccc;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    width: 0;
+    z-index: 1;
+    
+    > div {
+      position: absolute;
+      top: 6px;
+      bottom: 6px;
+      width: 0px;
+    }
+
+    &__handle {
+      position: absolute;
+      width: 12px;
+      background-color: var(--handle-bg);
+      transform: translateX(-50%);
+      cursor: pointer;
+      &:before {
+        background-color: var(--handle-bg);
+        border-radius: 6px 6px 0 0;
+        position: absolute;
+        width: 100%;
+        height: 6px;
+        top: -6px;
+        content: '';
+      }
+      &:after {
+        background-color: var(--handle-bg);
+        border-radius: 0 0 6px 6px;
+        position: absolute;
+        width: 100%;
+        height: 6px;
+        bottom: -6px;
+        content: '';
+      }
+    }
+  }
+
+  .carets {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    overflow: hidden;
+    pointer-events: none;
+  }
+
+  .column-caret {
+    position: absolute;
+    top: 0;
+    height: 100%;
+    pointer-events: none;
+    &.selected {
+      outline: 1px solid var(--border-color-focus);
+      background: var(--selected-bg);
+    }
+    &.frozen {
+      z-index: 1;
+      box-shadow: 10px 0 5px -2px #888;
+    }
+  }
+
+  .command-menu {
+    display: inline-flex;
+    height: 40px;
+    align-items: center;
+    flex-shrink: 0;
+    gap: 12px;
+
+    border-radius: 6px;
+    background: #110529;
+    color: #fff;
+    padding: 0 12px;
+
+    /* Shadow M */
+    box-shadow: 0px 4px 12px -2px rgba(15, 36, 77, 0.08), 0px 6px 24px -2px rgba(15, 36, 77, 0.08);
+
+    hr {
+      width: 1px;
+      height: 100%;
+      margin: 12px 0;
+      background-color: #9BABCC;
+      opacity: 0.24;
+    }
+
+    span.command {
+      font-weight: 600;
+      color: #fff;
+      cursor: pointer;
+    }
+
+    &__container {
+      position: absolute;
+      top: -45px;
+      left: 0;
+      width: 100%;
+      z-index: 1000;
+      display: flex;
+      gap: 12px;
+    }
+  }
+
+  .table-head {
+    position: relative;
+    max-width: 100%;
+    overflow: hidden;
+    padding-bottom: 1px;
+    background-color: var(--bg-elevated-02);
+    border-bottom: 1px solid var(--txt-01);
+
+    .tr-head {
+      max-width: 100%;
+      overflow: hidden;
+      position: relative;
+      display: flex;
+      flex-direction: row;
+      gap: 1px;
+      min-height: 40px;
+      background-color: transparent;
+      overflow: hidden;
+    }
+
+    .th-cell {
+      position: absolute;
+      background-color: #F7F8FA;
+      font-weight: 600;
+      font-size: 14px;
+      user-select: none;
+      white-space: nowrap;
+      padding: 8px 12px;
+      overflow: hidden;
+      display: flex;
+      align-items: center;
+      height: 100%;
+
+      .integer {
+        @include icon(url(./16_cell-type-num.svg), 16px);
+        margin-right: 4px;
+      }
+
+      .float {
+        @include icon(url(./16_cell-type-num.svg), 16px);
+        margin-right: 4px;
+      }
+
+      .string {
+        @include icon(url(./16_cell-type-txt.svg), 16px);
+        margin-right: 4px;
+      }
+
+      .unknown {
+        @include icon(url(./16_cell-type-txt.svg), 16px);
+        margin-right: 4px;
+        opacity: 0.5;
+      }
+
+      .sort {
+        margin-left: auto;
+        @include icon(url(./16_arrow-down.svg), 16px);
+        opacity: 0.1;
+        cursor: pointer;
+
+        &:hover {
+          opacity: 0.5;
+        }
+
+        &.DESC {
+          display: block;
+          opacity: 1;
+        }
+
+        &.ASC {
+          display: block;
+          transform: rotateZ(180deg);
+          opacity: 1;
+        }
+      }
+    }
+  }
+
+  .table-body {
+    position: relative;
+    max-height: 100%;
+    max-width: 100%;
+    overflow: hidden;
+    background-color: var(--bg-elevated-02);
+
+    .tr-body {
+      position: absolute;
+      left: 0;
+      max-width: 100%;
+      overflow: hidden;
+      display: flex;
+      flex-direction: row;
+      gap: 1px;
+      background-color: transparent;
+      width: 100%;
+
+      &.selected {
+        background-color: #fff;
+        outline: 1px solid var(--border-color-focus);
+        .td-cell {
+          &::after {
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            content: '';
+            background: var(--selected-bg);
+            pointer-events: none;
+          }
+        }
+      }
+    }
+
+    &__no-data {
+      height: 212px;
+      background-color: #F7F8FA;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      color: var(--txt-mask);
+      font-size: 28px;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 32px;
+      letter-spacing: -0.56px;
+
+      >div {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        align-items: center;
+      }
+    }
+  }
+
+  .td-cell {
+    position: absolute;
+    background-color: #fff;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    height: 100%;
+    padding: 1px;
+
+    &.justify-center {
+      justify-content: center;
+    }
+
+    .control-cell {
+      padding: 8px 12px;
+    }
+
+    .base-cell {
+      font-family: var(--cell-font-family);
+      font-weight: var(--cell-font-weight);
+      padding: 8px 12px;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      user-select: text;
+      overflow: hidden;
+      input {
+        border: none;
+        outline: none;
+        font-size: inherit;
+        font-family: inherit;
+        font-weight: inherit;
+        width: 100%;
+        padding: 0;
+      }
+      &__edit {
+        outline: 1px solid var(--border-color-focus);
+      }
+    }
+  }
+}

package/src/components/DataTable/composition/useColumn.ts

@@ -0,0 +1,32 @@
+import { useEventListener } from '@/composition/useEventListener.ts';
+import { useMouseUp } from './useMouseUp';
+import { requestTick } from '@/helpers';
+
+export function useColumn(cb: (state: { x: number; width: number; diff: number }) => void, clear: () => void) {
+  let state = undefined as { x: number; width: number } | undefined;
+
+  function start(e: { x: number; width: number }) {
+    state = { ...e };
+  }
+
+  useMouseUp(() => {
+    state = undefined;
+    clear();
+  });
+
+  const handle = requestTick(cb);
+
+  useEventListener(window, 'mousemove', (e: { x: number }) => {
+    if (state) {
+      handle({
+        x: state.x,
+        width: state.width,
+        diff: e.x - state.x,
+      });
+    }
+  });
+
+  return {
+    start,
+  };
+}

package/src/components/DataTable/composition/useMouseUp.ts

@@ -0,0 +1,6 @@
+import { onMounted, onUnmounted } from 'vue';
+
+export function useMouseUp(update: (ev: globalThis.MouseEvent) => void) {
+  onMounted(() => window.addEventListener('mouseup', update));
+  onUnmounted(() => window.removeEventListener('mouseup', update));
+}

package/src/components/DataTable/composition/useResize.ts

@@ -0,0 +1,88 @@
+import type { Ref } from 'vue';
+import { watchEffect, unref } from 'vue';
+import type { ResizeTh } from '../types';
+import { useColumn } from './useColumn';
+import { MIN_COLUMN_WIDTH, RESIZE_GAP } from '../constants';
+import { useMouse } from '@/composition/useMouse';
+import { useHover } from '@/composition/useHover';
+import { tapIf, clamp } from '@milaboratories/helpers';
+import { identity } from '@milaboratories/helpers';
+import type { State } from '../state';
+
+type MaybeRef<T> = T | Ref<T>;
+
+export function getColumnPositions(tableRef: MaybeRef<HTMLElement | undefined>) {
+  const ths = tapIf(unref(tableRef)?.querySelectorAll('.th-cell'), (l) => [...l]) ?? [];
+  return ths
+    .map((th) => {
+      const { width, x } = th.getBoundingClientRect();
+      const colId = th.getAttribute('data-col-id')!;
+      return identity<ResizeTh>({
+        colId,
+        width,
+        x,
+        right: x + width,
+      });
+    })
+    .slice(0, ths.length - 1);
+}
+
+export function useResize(state: State, tableRef: Ref<HTMLElement | undefined>) {
+  const mousePos = useMouse();
+  const isHovered = useHover(tableRef, {});
+  const { data } = state;
+
+  const resize = useColumn(
+    (s) => {
+      tapIf(data.resizeTh, (th) => {
+        const col = data.columns.find((col) => col.id === th.colId);
+        if (col) {
+          col.width = clamp(s.width + s.diff, MIN_COLUMN_WIDTH, 10000);
+          state.adjustWidth();
+        }
+      });
+    },
+    () => {
+      data.resize = false;
+      data.resizeTh = undefined;
+      document.body.style.cursor = '';
+    },
+  );
+
+  const mouseDown = (e: MouseEvent) => {
+    if (data.resizeTh) {
+      data.resize = true;
+      resize.start({
+        x: e.x,
+        width: data.resizeTh.width,
+      });
+    }
+  };
+
+  watchEffect(() => {
+    if (!isHovered.value) {
+      document.body.style.cursor = '';
+      return;
+    }
+
+    if (data.resize) {
+      return;
+    }
+
+    const th = getColumnPositions(tableRef).find((it) => {
+      return Math.abs(mousePos.x - it.right) < RESIZE_GAP;
+    });
+
+    if (th) {
+      document.body.style.cursor = 'col-resize';
+      data.resizeTh = th;
+    } else {
+      data.resizeTh = undefined;
+      document.body.style.cursor = '';
+    }
+  });
+
+  return {
+    mouseDown,
+  };
+}

package/src/components/DataTable/composition/useTableColumns.ts

@@ -0,0 +1,56 @@
+import type { ColumnSpecSettings, TableSettings, TableColumn, TableData } from '../types';
+import type { ComputedRef } from 'vue';
+import { computed } from 'vue';
+import { sliceBy } from '@milaboratories/helpers';
+import { asConst } from '@milaboratories/helpers';
+import { uniqueId } from '@milaboratories/helpers';
+import { GAP } from '../constants';
+
+export function useTableColumns(state: { data: TableData; settings: ComputedRef<TableSettings> }) {
+  return computed<TableColumn[]>(() => {
+    const { data, settings } = state;
+
+    const { bodyWidth, scrollLeft } = data;
+
+    const columns = [...data.columns];
+
+    const controlId = uniqueId();
+
+    if (settings.value.controlColumn) {
+      columns.unshift(
+        asConst<ColumnSpecSettings>({
+          id: controlId,
+          label: '#',
+          width: 60,
+          frozen: true,
+        }),
+      );
+    }
+
+    let offset = 0;
+
+    const tableColumns = columns.map((col) => {
+      const it = { ...col, offset };
+      offset += col.width + GAP;
+      return it;
+    });
+
+    const frozen = tableColumns.filter((col) => col.frozen);
+
+    const visibleColumns = sliceBy(tableColumns, (col) => {
+      if (col.frozen) {
+        return false;
+      }
+      return scrollLeft < col.offset + col.width && col.offset < bodyWidth + scrollLeft;
+    }).concat(frozen);
+
+    return visibleColumns.map<TableColumn>((col) => ({
+      ...col,
+      style: {
+        left: col.frozen ? `${col.offset}px` : `${col.offset - data.scrollLeft}px`,
+        width: `${col.width}px`,
+      },
+      control: col.id === controlId,
+    }));
+  });
+}

package/src/components/DataTable/composition/useTableRows.ts

@@ -0,0 +1,50 @@
+import type { ComputedRef } from 'vue';
+import { computed } from 'vue';
+import type { TableCell, TableColumn, TableData, TableRow } from '../types';
+import { identity } from '@milaboratories/helpers';
+
+export function useTableRows(data: TableData, tableColumns: ComputedRef<TableColumn[]>) {
+  const classesRef = computed(() =>
+    tableColumns.value.reduce(
+      (r, col) => {
+        r[col.id] = col.justify ? 'justify-' + col.justify : '';
+        return r;
+      },
+      {} as Record<string | symbol, string>,
+    ),
+  );
+
+  return computed<TableRow[]>(() => {
+    return data.rows.map<TableRow>((row) => {
+      const classes = classesRef.value;
+
+      const { primaryKey, offset, dataRow, height } = row;
+
+      const cells = tableColumns.value.map<TableCell>((column) => {
+        return {
+          id: column.id,
+          column,
+          row,
+          value: dataRow[column.id],
+          class: classes[column.id],
+          editable: column.editable,
+          width: column.width,
+          style: column.style,
+          control: column.control,
+        };
+      });
+
+      return identity<TableRow>({
+        style: {
+          top: `${offset - data.scrollTop}px`,
+          height: `${row.height}px`,
+        },
+        primaryKey,
+        offset,
+        height,
+        cells,
+        selected: data.selectedRows.has(primaryKey),
+      });
+    });
+  });
+}

package/src/components/DataTable/constants.ts

@@ -0,0 +1,9 @@
+export const GAP = 1;
+
+export const RESIZE_GAP = 10;
+
+export const MIN_COLUMN_WIDTH = 30;
+
+export const DEFAULT_ROW_HEIGHT = 40;
+
+export const WINDOW_DELTA = 60;

package/src/components/DataTable/domain.ts

@@ -0,0 +1,61 @@
+export function toComparable(v: unknown) {
+  if (typeof v === 'number') {
+    return v;
+  } else if (typeof v === 'string') {
+    return v;
+  } else {
+    return String(v);
+  }
+}
+
+export function compareRecords(sorts: Record<string, 'ASC' | 'DESC'>, a: Record<string, unknown>, b: Record<string, unknown>) {
+  for (const [name, direction] of Object.entries(sorts)) {
+    const v1 = toComparable(a[name]);
+    const v2 = toComparable(b[name]);
+
+    const rev = direction === 'DESC' ? -1 : 1;
+
+    if (v1 === v2) {
+      continue;
+    }
+
+    return (v1 > v2 ? 1 : -1) * rev;
+  }
+
+  return 0;
+}
+
+export const identity = <T>(v: T): T => v;
+
+export function rotate<T>(v: T, lst: T[]) {
+  const next = lst.indexOf(v) + 1;
+  return lst[next >= lst.length ? 0 : next];
+}
+
+/**
+ * Returns a first contiguous copy of a section of an array where predicate is true
+ * @param arr
+ * @param predicate
+ * @returns
+ */
+export function sliceBy<T>(arr: readonly T[], predicate: (el: T, index: number) => boolean): T[] {
+  const left = arr.findIndex(predicate);
+
+  if (left < 0) {
+    return [];
+  }
+
+  const right = (() => {
+    for (let i = left; i < arr.length; i++) {
+      if (predicate(arr[i], i)) {
+        continue;
+      }
+
+      return i;
+    }
+
+    return arr.length;
+  })();
+
+  return arr.slice(left, right);
+}

package/src/components/DataTable/index.ts

@@ -0,0 +1,56 @@
+import type { TableSettings } from './types';
+import Component from './TableComponent.vue';
+import type * as Types from './types';
+import type { RawTableSettings } from './types';
+import type { ComputedRef } from 'vue';
+import { computed, h, reactive, unref } from 'vue';
+import { RawData } from './adapters/RawData';
+import type { MaybeRef } from '@/types';
+export { AsyncData } from './adapters/AsyncData';
+
+type AnyRef<T> = MaybeRef<T> | ComputedRef<T>;
+
+export function settings<D extends Types.DataRow>(tableSettings: TableSettings<D>): TableSettings {
+  return Object.freeze(tableSettings) as TableSettings;
+}
+
+export function factory<const S extends TableSettings>(tableSettings: S) {
+  return h(Component, { settings: Object.freeze(tableSettings) });
+}
+
+export { Component };
+
+export { Types };
+
+/*** Adapters ***/
+
+export function rawDataSettings<D extends Types.DataRow>(rows: D[], rawSettings: Types.RawTableSettings<D>): TableSettings {
+  const dataSource = new RawData<D>(rows, rawSettings.resolveRowHeight, rawSettings.resolvePrimaryKey);
+  return { ...rawSettings, dataSource } as TableSettings;
+}
+
+export function useRawData<D extends Types.DataRow>(rowsRef: AnyRef<D[]>, raw: MaybeRef<RawTableSettings<D>>) {
+  return computed(() => {
+    const rows = unref(rowsRef);
+    return rawDataSettings(rows, unref(raw));
+  });
+}
+
+/**
+ * @deprecated
+ * @param rows
+ * @param raw
+ * @returns
+ */
+export function useRawDataComponent<D extends Types.DataRow>(rowsRef: AnyRef<D[]>, raw: MaybeRef<RawTableSettings<D>>) {
+  const settings = computed(() => {
+    const rows = unref(rowsRef);
+    return rawDataSettings(rows, unref(raw));
+  });
+
+  const props = reactive({
+    settings,
+  });
+
+  return computed(() => h(Component, props));
+}

package/src/components/DataTable/keys.ts

@@ -0,0 +1,9 @@
+import { type InjectionKey, type ComputedRef, inject } from 'vue';
+import type { TableSettings } from './types';
+import type { State } from './state';
+
+export const settingsKey = Symbol() as InjectionKey<ComputedRef<TableSettings>>;
+
+export const stateKey = Symbol() as InjectionKey<State>;
+
+export const injectState = () => inject(stateKey)!;