@milaboratories/uikit 1.2.3

package/src/components/DataTable/state.ts

@@ -0,0 +1,168 @@
+import { computed, provide, reactive, watch } from 'vue';
+import type { TableProps, TableData, DataWindow, PrimaryKey, Row, ColumnSpecSettings, DataSource } from './types';
+import { deepClone, deepEqual } from '@milaboratories/helpers';
+import { stateKey } from './keys';
+import { clamp, delay, resolveAwaited, tap } from '@milaboratories/helpers';
+import { useTableColumns } from './composition/useTableColumns';
+import { useTableRows } from './composition/useTableRows';
+import { GAP, WINDOW_DELTA } from './constants';
+
+const loadRows = async (dataWindow: { scrollTop: number; bodyHeight: number }, dataSource: DataSource) => {
+  const { scrollTop, bodyHeight } = dataWindow;
+
+  await delay(0);
+
+  return resolveAwaited({
+    rows: dataSource.getRows(scrollTop, bodyHeight),
+    dataWindow,
+  });
+};
+
+export function createState(props: TableProps) {
+  const data = reactive<TableData>({
+    rowIndex: -1,
+    columns: [],
+    pendingLoads: 0,
+    currentWindow: undefined,
+    rows: [],
+    resize: false,
+    resizeTh: undefined,
+    dataHeight: 0,
+    bodyHeight: props.settings.height,
+    bodyWidth: 0,
+    scrollTop: 0,
+    scrollLeft: 0,
+    selectedRows: new Set<PrimaryKey>(),
+    selectedColumns: new Set<string>(),
+  });
+
+  watch(
+    () => props.settings,
+    (newSettings) => {
+      data.columns = deepClone(newSettings.columns);
+      data.currentWindow = undefined;
+      newSettings.dataSource
+        .getHeight()
+        .then((dataHeight) => {
+          data.dataHeight = dataHeight;
+          state.updateBodyHeight();
+        })
+        .catch((err) => (data.error = err));
+    },
+    { immediate: true },
+  );
+
+  const settings = computed(() => {
+    return props.settings;
+  });
+
+  const columnsWidth = computed(() => {
+    return data.columns.reduce((acc, col) => acc + col.width + GAP, 0);
+  });
+
+  const maxScrollTop = computed(() => tap(state.data.dataHeight - state.data.bodyHeight, (v) => (v > 0 ? v : 0)));
+  const maxScrollLeft = computed(() => tap(columnsWidth.value - state.data.bodyWidth, (v) => (v > 0 ? v : 0)));
+
+  const dataDimensions = computed<DataWindow & { current?: DataWindow }>(() => {
+    return {
+      bodyHeight: data.bodyHeight,
+      scrollTop: data.scrollTop,
+      current: data.currentWindow,
+    };
+  });
+
+  const tableColumns = useTableColumns({
+    data,
+    settings,
+  });
+
+  const tableRows = useTableRows(data, tableColumns);
+
+  const adjustWidth = () => {
+    const newWidth = data.columns.reduce((acc, col) => acc + col.width + GAP, 0);
+
+    const rightOffset = data.bodyWidth + data.scrollLeft;
+
+    if (newWidth < rightOffset) {
+      const last = data.columns[data.columns.length - 1];
+      last.width = last.width + (rightOffset - newWidth);
+    }
+  };
+
+  const state = {
+    data,
+    settings,
+    tableColumns,
+    tableRows,
+    adjustWidth,
+    updateOffsets(ev: { deltaY: number; deltaX: number }) {
+      this.updateScrollTop(data.scrollTop + ev.deltaY);
+      this.updateScrollLeft(data.scrollLeft + ev.deltaX);
+    },
+    getSelectedRows(): Row[] {
+      return data.rows.filter((row) => data.selectedRows.has(row.primaryKey));
+    },
+    getSelectedColumns(): ColumnSpecSettings[] {
+      return data.columns.filter((col) => data.selectedColumns.has(col.id));
+    },
+    selectRow(rowId: PrimaryKey) {
+      data.selectedRows.add(rowId);
+    },
+    unselectRow(rowId: PrimaryKey) {
+      data.selectedRows.delete(rowId);
+    },
+    selectColumn(columnId: string) {
+      data.selectedColumns.add(columnId);
+    },
+    unselectColumn(columnId: string) {
+      data.selectedColumns.delete(columnId);
+    },
+    updateScrollTop(scrollTop: number) {
+      data.scrollTop = clamp(scrollTop, 0, maxScrollTop.value);
+    },
+    updateScrollLeft(scrollLeft: number) {
+      data.scrollLeft = clamp(scrollLeft, 0, maxScrollLeft.value);
+    },
+    updateBodyHeight() {
+      const { height } = props.settings;
+      const { dataHeight } = data;
+      const bodyHeight = height > dataHeight ? dataHeight : height;
+      data.bodyHeight = bodyHeight;
+    },
+    updateDimensions(rect: { height: number; width: number }) {
+      this.updateBodyHeight();
+      state.data.bodyWidth = rect.width;
+      state.adjustWidth();
+      data.rows = [];
+      data.currentWindow = undefined;
+    },
+  };
+
+  watch(
+    dataDimensions,
+    (n, _o) => {
+      const current = n.current;
+
+      const needToLoad = !current || n.scrollTop < current.scrollTop || n.scrollTop + n.bodyHeight > current.bodyHeight + current.scrollTop;
+
+      if (needToLoad) {
+        data.currentWindow = {
+          scrollTop: n.scrollTop - WINDOW_DELTA,
+          bodyHeight: n.bodyHeight + WINDOW_DELTA * 2,
+        };
+        loadRows(deepClone(data.currentWindow), settings.value.dataSource).then(({ rows, dataWindow }) => {
+          if (deepEqual(data.currentWindow, dataWindow)) {
+            data.rows = rows;
+          }
+        });
+      }
+    },
+    { deep: true, immediate: true },
+  );
+
+  provide(stateKey, state);
+
+  return state;
+}
+
+export type State = ReturnType<typeof createState>;

package/src/components/DataTable/types.ts

@@ -0,0 +1,181 @@
+import type { Component } from 'vue';
+import type { Branded, Equal, Expect, Values } from '@milaboratories/helpers';
+
+type TypeMap = {
+  integer: number;
+  float: number;
+  string: string;
+  unknown: number | string;
+};
+
+export type ValueType = keyof TypeMap;
+
+// Data table props
+export type TableProps = {
+  settings: TableSettings;
+};
+
+export type DataWindow = {
+  bodyHeight: number;
+  scrollTop: number;
+};
+
+// Inner table state
+export type TableData = {
+  rowIndex: number;
+  pendingLoads: number;
+  columns: readonly ColumnSpecSettings[];
+  rows: readonly Row[];
+  currentWindow?: DataWindow;
+  resize: boolean;
+  resizeTh?: ResizeTh;
+  dataHeight: number;
+  bodyHeight: number;
+  bodyWidth: number;
+  scrollTop: number;
+  scrollLeft: number;
+  selectedRows: Set<PrimaryKey>;
+  selectedColumns: Set<string>;
+
+  error?: unknown;
+};
+
+export type DataRow = Record<string, unknown>;
+
+export type PrimaryKey = Branded<string, 'PrimaryKey'>;
+
+export type ResolvePrimaryKey<D extends DataRow = DataRow> = (dataRow: D, index: number) => string;
+
+export type ResolveRowHeight<D extends DataRow = DataRow> = (dataRow: D, index: number) => number;
+
+export type SelectedRowsOperation<D extends DataRow = DataRow> = {
+  label: string;
+  cb: (rows: Row<D>[]) => Promise<void>;
+};
+
+export type SelectedColumnsOperation<D extends DataRow = DataRow> = {
+  label: string;
+  cb: (columns: ColumnSpec<D>[]) => Promise<void>;
+};
+
+export type TableSettings<D extends DataRow = DataRow> = Readonly<{
+  columns: ColumnSpec<D>[];
+  dataSource: DataSource<D>;
+  gap?: number;
+  height: number;
+  addColumn?: () => Promise<void>;
+  controlColumn?: boolean;
+  onSelectedRows?: SelectedRowsOperation<D>[];
+  onSelectedColumns?: SelectedColumnsOperation<D>[];
+
+  onUpdatedRow?: (row: Row<D>) => void;
+}>;
+
+export type ColumnSpecSettings<ID = string, _Value = unknown> = {
+  label: string;
+  id: ID;
+  width: number;
+  justify?: 'center' | 'start';
+  sort?: {
+    direction: 'DESC' | 'ASC' | undefined;
+  };
+  component?: () => Component;
+  editable?: boolean;
+  valueType?: ValueType;
+  frozen?: boolean;
+};
+
+export type ColumnSpec<D extends DataRow = DataRow> = Values<{
+  [P in keyof D]: ColumnSpecSettings<P, D[P]>;
+}>;
+
+export type TableCell<D extends DataRow = DataRow> = Values<{
+  [P in keyof D]: {
+    id: P;
+    column: ColumnSpecSettings<P, D[P]>;
+    row: Row<D>;
+    value: D[P];
+    class: string;
+    editable?: boolean;
+    width: number;
+    style: ColumnStyle;
+    control?: boolean;
+  };
+}>;
+
+export type Row<D extends DataRow = DataRow> = {
+  dataRow: D;
+  index: number;
+  primaryKey: PrimaryKey;
+  offset: number;
+  height: number;
+};
+
+export type TableRow = {
+  style: {
+    top: `${number}px`;
+    height: `${number}px`;
+  };
+  offset: number;
+  height: number;
+  cells: TableCell[];
+  primaryKey: PrimaryKey;
+  selected?: boolean;
+};
+
+export type ColumnStyle = {
+  left: string;
+  width: string;
+};
+
+export type TableColumn = ColumnSpecSettings & {
+  style: ColumnStyle;
+  offset: number;
+  control?: boolean;
+};
+
+export interface DataSource<D extends DataRow = DataRow> {
+  getHeight(): Promise<number>;
+  getRows(scrollTop: number, bodyHeight: number): Promise<Row<D>[]>;
+}
+
+export type ExternalApi<T extends DataRow> = {
+  query(options: { offset: number; limit: number }): Promise<T[]>;
+  count(): Promise<number>;
+};
+
+export type ResizeTh = {
+  colId: string;
+  width: number;
+  x: number;
+  right: number;
+};
+
+/*** Adapters ***/
+
+export type RawTableSettings<D extends DataRow = DataRow> = Readonly<{
+  columns: ColumnSpec<D>[];
+  gap?: number;
+  height: number;
+  addColumn?: () => Promise<void>;
+  controlColumn?: boolean;
+  onSelectedRows?: SelectedRowsOperation<D>[];
+  onSelectedColumns?: SelectedColumnsOperation<D>[];
+  resolvePrimaryKey: ResolvePrimaryKey<D>;
+  resolveRowHeight: ResolveRowHeight<D>;
+
+  onUpdatedRow?: (row: Row<D>) => void;
+}>;
+
+/*** Static tests  ***/
+
+type _cell = TableCell<{ age: number; name: string; payload: unknown }>;
+
+type _age = Extract<_cell, { id: 'age' }>;
+
+type _cases = [
+  Expect<Equal<number, Extract<_cell, { id: 'age' }>['value']>>,
+  Expect<Equal<string, Extract<_cell, { id: 'name' }>['value']>>,
+  Expect<Equal<unknown, Extract<_cell, { id: 'payload' }>['value']>>,
+  Expect<Equal<_age['column']['id'], 'age'>>,
+];

package/src/components/DropdownListItem.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import CheckboxUncheckedSvg from '@/assets/images/24_checkbox-base.svg?raw';
+import CheckboxCheckedSvg from '@/assets/images/24_checkbox-checked.svg?raw';
+import type { ListOption } from '@/types';
+
+const props = withDefaults(
+  defineProps<{
+    option: ListOption;
+    isSelected: boolean;
+    size: 'small' | 'medium';
+    isHovered: boolean;
+    useCheckbox?: boolean;
+  }>(),
+  {
+    size: 'small',
+    isSelected: false,
+    isHovered: false,
+    useCheckbox: false,
+  },
+);
+
+const classes = computed<string>(() => {
+  const classItems: string[] = [];
+  if (props.size === 'small') {
+    classItems.push('dropdown-list-item__small');
+  }
+  if (props.isSelected) {
+    classItems.push('dropdown-list-item__selected');
+  }
+  if (props.isHovered) {
+    classItems.push('hovered-item');
+  }
+  return classItems.join(' ');
+});
+
+const checkboxClasses = computed(() => {
+  const classes: string[] = ['dropdown-list-item__checkbox', 'flex-self-start'];
+  if (props.isSelected) {
+    classes.push('checked');
+  }
+  return classes.join(' ');
+});
+
+// Why??
+const checkboxSvg = computed(() => (props.isSelected ? CheckboxCheckedSvg : CheckboxUncheckedSvg));
+</script>
+
+<template>
+  <div :class="classes" class="dropdown-list-item">
+    <!-- eslint-disable vue/no-v-html -->
+    <div v-if="props.useCheckbox" :class="checkboxClasses" v-html="checkboxSvg" />
+    <!--eslint-enable-->
+    <div class="dropdown-list-item__title-container">
+      <div class="dropdown-list-item__title text-s">
+        {{ option.text }}
+      </div>
+      <div v-if="option.description" class="dropdown-list-item__description text-description">
+        {{ option.description }}
+      </div>
+    </div>
+    <div v-if="!props.useCheckbox && props.isSelected" class="dropdown-list-item__icon flex-self-start" />
+  </div>
+</template>

package/src/components/GridTable/AddColumnBtn.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="add-column-btn">
+    <div />
+  </div>
+</template>

package/src/components/GridTable/TRow.vue

@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+defineProps<{
+  index: number;
+  visible: boolean;
+  height: number;
+}>();
+</script>
+
+<template>
+  <div class="t-row" :style="`height: ${height}px`">
+    <slot v-if="visible" />
+  </div>
+</template>

package/src/components/GridTable/TdCell.vue

@@ -0,0 +1,71 @@
+<script lang="ts" setup>
+import { cellEventOptions } from './constants';
+import type { CellEvent, CellProps, ShowContextOptions } from './types';
+import { reactive, ref } from 'vue';
+
+const emit = defineEmits(['delete:row', 'update:value']);
+
+const props = defineProps<{
+  cell: CellProps;
+  showContextOptions?: ShowContextOptions;
+  cellEvents?: CellEvent[];
+}>();
+
+const data = reactive({
+  edit: false as boolean,
+});
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function onInput(ev: any) {
+  emit('update:value', {
+    rowIndex: props.cell.rowIndex,
+    name: props.cell.colName,
+    value: ev.target.value,
+  });
+  data.edit = false;
+}
+
+function showContextMenu() {
+  const cellEvents = props.cellEvents ?? [];
+
+  if (!props.showContextOptions) {
+    console.warn('inject showContextOptions interface for the table');
+    return;
+  }
+
+  const options = cellEventOptions.filter((opt) => cellEvents.includes(opt.value));
+
+  if (!options.length) {
+    return;
+  }
+
+  props.showContextOptions(options, (op) => {
+    emit(op, props.cell.rowIndex);
+  });
+}
+
+const cellRef = ref<HTMLElement>();
+
+function onClick() {
+  if (props.cell.editable) {
+    data.edit = true;
+    requestAnimationFrame(() => {
+      cellRef.value?.querySelector('input')?.focus();
+    });
+  }
+}
+</script>
+
+<template>
+  <div
+    ref="cellRef"
+    class="cell"
+    :class="{ [cell.class]: true, edit: data.edit }"
+    :data-row-index.attr="cell.rowIndex"
+    @contextmenu="showContextMenu"
+    @click.stop="onClick"
+  >
+    <input v-if="data.edit" :value="cell.value" @focusout="data.edit = false" @change="onInput" />
+    <slot v-else />
+  </div>
+</template>

package/src/components/GridTable/ThCell.vue

@@ -0,0 +1,52 @@
+<script lang="ts" setup>
+import { columnEventOptions } from './constants';
+import type { ColumnEvent, ColumnSettings, ShowContextOptions } from './types';
+
+const emit = defineEmits(['delete:column', 'expand:column', 'change:sort']);
+
+const props = defineProps<{
+  col: ColumnSettings;
+  showContextOptions?: ShowContextOptions;
+  columnEvents?: ColumnEvent[];
+}>();
+
+function rotate<T>(v: T, lst: T[]) {
+  const next = lst.indexOf(v) + 1;
+  return lst[next >= lst.length ? 0 : next];
+}
+
+function onContextMenu() {
+  const columnEvents = props.columnEvents ?? [];
+
+  if (!props.showContextOptions) {
+    console.warn('inject showContextOptions interface for the table');
+    return;
+  }
+
+  const options = columnEventOptions.filter((opt) => columnEvents.includes(opt.value));
+
+  if (!options.length) {
+    return;
+  }
+
+  props.showContextOptions(options, (op) => {
+    emit(op, props.col.name);
+  });
+}
+
+function onSort(colName: string, _v: 'DESC' | 'ASC' | undefined) {
+  const v = _v ?? 'DESC';
+  emit('change:sort', {
+    colName,
+    direction: rotate(v, ['DESC', 'ASC']),
+  });
+}
+</script>
+
+<template>
+  <div class="cell th-cell" :class="{ 'justify-center': col.justify }" @contextmenu="onContextMenu">
+    <div v-if="col.valueType" :class="col.valueType" />
+    {{ col.text }}
+    <div v-if="col.sort" class="sort" :class="col.sort.direction" @click.stop="() => onSort(col.name, col.sort?.direction)" />
+  </div>
+</template>

package/src/components/GridTable/assets/16_add.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.74988 2.25V7.25H13.7499V8.75H8.74988V13.75H7.24988V8.75H2.24988V7.25H7.24988V2.25H8.74988Z" fill="#110529"/>
+</svg>

package/src/components/GridTable/assets/16_arrow-down.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M8 14.0607L13.5303 8.53034L12.4697 7.46968L8.75 11.1893V2.00001H7.25V11.1893L3.53033 7.46968L2.46967 8.53034L8 14.0607Z" fill="#110529"/>
+</svg>

package/src/components/GridTable/assets/16_cell-type-num.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.22886 12.993H5.65686L6.41286 10.158H8.33786L7.58886 12.993H9.01686L9.77286 10.158H12.4189L12.7829 8.76501H10.1439L10.6409 6.92401H13.2869L13.6509 5.54501H11.0119L11.7189 2.92001H10.2839L9.57686 5.54501H7.65186L8.35886 2.92001H6.92386L6.21686 5.54501H3.58486L3.20686 6.92401H5.84586L5.36286 8.76501H2.71686L2.34586 10.158H4.98486L4.22886 12.993ZM6.79086 8.76501L7.28086 6.92401H9.20586L8.70886 8.76501H6.79086Z" fill="#07AD3E"/>
+</svg>

package/src/components/GridTable/assets/16_cell-type-txt.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.0372314 13H1.55623L2.29123 10.725H6.42823L7.17723 13H8.69623L5.42023 2.92001H3.31323L0.0372314 13ZM2.73923 9.35301L4.34923 4.38301L5.98023 9.35301H2.73923Z" fill="#07AD3E"/>
+<path d="M11.3871 13.21C12.6121 13.21 13.4871 12.79 14.1101 11.901V13H15.4051V8.34501C15.4051 7.71501 15.3771 7.16901 15.1391 6.67201C14.6701 5.67801 13.6201 5.23001 12.2691 5.23001C10.5191 5.23001 9.46908 6.05601 9.10508 7.35101L10.4701 7.77101C10.7291 6.93101 11.4571 6.58101 12.2551 6.58101C13.4381 6.58101 13.9141 7.07101 13.9631 8.11401C12.7381 8.28201 11.4921 8.44301 10.6171 8.70201C9.44808 9.07301 8.83208 9.80101 8.83208 10.942C8.83208 12.174 9.71408 13.21 11.3871 13.21ZM10.2811 10.928C10.2811 10.333 10.7221 10.011 11.3241 9.80801C11.9611 9.61901 12.8081 9.50001 13.9491 9.33201C13.9421 9.68201 13.9141 10.165 13.7951 10.515C13.6271 11.25 12.8921 12.013 11.6461 12.013C10.7081 12.013 10.2811 11.516 10.2811 10.928Z" fill="#07AD3E"/>
+</svg>

package/src/components/GridTable/assets/TableIcon.vue

@@ -0,0 +1,11 @@
+<template>
+  <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M24 41.5H9C7.61929 41.5 6.5 40.3807 6.5 39V24H9.5V38.5H24V41.5Z" fill="#CFD1DB" />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M41.5 9C41.5 7.61929 40.3807 6.5 39 6.5H9C7.61929 6.5 6.5 7.61929 6.5 9V19.5H9.5H28.5V38.5V41.5H39C40.3807 41.5 41.5 40.3807 41.5 39V9ZM38.5 9.5V16.5H31.5V9.5H38.5ZM38.5 38.5V19.5H31.5V38.5H38.5ZM9.5 9.5V16.5H28.5V9.5H9.5Z"
+      fill="#CFD1DB"
+    />
+  </svg>
+</template>