@milaboratories/uikit 1.2.3

package/src/components/GridTable/assets/style.scss

@@ -0,0 +1,184 @@
+@import "@/assets/mixins.scss";
+
+.grid-table {
+  --cell-font-family: var(--font-family-base);
+  --cell-font-weight: 500;
+
+  width: 100%;
+  max-height: 100%;
+  display: grid;
+  grid-template-rows: 40px 1fr;
+  flex-direction: column;
+  border: 1px solid var(--bg-elevated-02);
+  border-radius: 6px;
+  overflow: auto;
+  position: relative;
+  font-weight: 500;
+
+  &.monospace {
+    --cell-font-family: var(--font-family-monospace);
+    --cell-font-weight: 400;
+  }
+
+  .add-column-btn {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: 40px;
+    height: 39px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-left: 1px solid var(--color-div-grey);
+    background-color: #F7F8FA;
+    cursor: pointer;
+    z-index: 1;
+
+    >div {
+      background-color: var(--color-text);
+      @include mask(url(./16_add.svg), 16px);
+    }
+  }
+
+  .table-head {
+    position: relative;
+    max-width: 100%;
+    display: grid;
+    gap: 1px;
+    padding-bottom: 1px;
+    background-color: var(--bg-elevated-02);
+    border-bottom: 1px solid var(--txt-01);
+    overflow: hidden;
+    padding-right: 8px;
+
+    .cell {
+      background-color: #F7F8FA;
+      font-weight: 600;
+      font-size: 14px;
+      user-select: none;
+      white-space: nowrap;
+
+      .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 {
+    display: grid;
+    max-height: 100%;
+    max-width: 100%;
+    gap: 1px;
+    background-color: var(--bg-elevated-02);
+    overflow: auto;
+    scroll-snap-type: y mandatory;
+    @include scrollbarTable(true, true);
+
+    .cell {
+      font-family: var(--cell-font-family);
+      font-weight: var(--cell-font-weight);
+
+      &.edit {
+        outline: 1px solid var(--border-color-focus);
+      }
+
+      input {
+        border: none;
+        outline: none;
+        font-size: inherit;
+        font-family: inherit;
+        font-weight: inherit;
+        width: 100%;
+        padding: 0;
+      }
+    }
+
+    &__no-data {
+      background-color: #F7F8FA;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 64px 0;
+
+      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;
+      }
+    }
+  }
+
+  .t-row {
+    display: grid;
+    gap: 1px;
+    min-height: 40px;
+    background-color: transparent;
+  }
+
+  .cell {
+    padding: 8px 12px;
+    background-color: #fff;
+    // scroll-snap-align: start;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    min-height: 40px;
+    user-select: text;
+
+    &.justify-center {
+      justify-content: center;
+    }
+
+    // &.hovered {
+    //   // background-color: rgba(99, 224, 36, 0.12);
+    // }
+  }
+}

package/src/components/GridTable/constants.ts

@@ -0,0 +1,27 @@
+import type { ListOption } from '@/types';
+import type { CellEvent, ColumnEvent } from './types';
+
+export const RESIZE_GAP = 10;
+export const MIN_COLUMN_WIDTH = 30;
+
+export const cellEventOptions: ListOption<CellEvent>[] = [
+  {
+    text: 'Delete row',
+    value: 'delete:row',
+  },
+  {
+    text: 'Update value',
+    value: 'update:value',
+  },
+];
+
+export const columnEventOptions: ListOption<ColumnEvent>[] = [
+  {
+    text: 'Delete column',
+    value: 'delete:column',
+  },
+  {
+    text: 'Fit content',
+    value: 'expand:column',
+  },
+];

package/src/components/GridTable/domain.ts

@@ -0,0 +1,26 @@
+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;
+}

package/src/components/GridTable/getColumnPositions.ts

@@ -0,0 +1,20 @@
+import type { Ref } from 'vue';
+import { unref } from 'vue';
+import { utils } from '@milaboratories/helpers';
+
+type MaybeRef<T> = T | Ref<T>;
+
+export function getColumnPositions(tableRef: MaybeRef<HTMLElement | undefined>) {
+  const ths = utils.tapIf(unref(tableRef)?.querySelectorAll('.th-cell'), (l) => [...l]) ?? [];
+  return ths
+    .map((th, index) => {
+      const { width, x } = th.getBoundingClientRect();
+      return {
+        index,
+        width,
+        x,
+        right: x + width,
+      };
+    })
+    .slice(0, ths.length - 1);
+}

package/src/components/GridTable/index.vue

@@ -0,0 +1,238 @@
+<script lang="ts" setup>
+import './assets/style.scss';
+import { computed, reactive, ref, unref, onMounted, nextTick, watchPostEffect } from 'vue';
+import TdCell from './TdCell.vue';
+import type { Settings, Data } from './types';
+import { useResize } from './useResize';
+import { utils, strings } from '@milaboratories/helpers';
+import AddColumnBtn from './AddColumnBtn.vue';
+import TableIcon from './assets/TableIcon.vue';
+import ThCell from './ThCell.vue';
+import TRow from './TRow.vue';
+import { compareRecords } from './domain';
+import { throttle } from '@/helpers/utils';
+import { useEventListener } from '@/index';
+
+const minRowHeight = 40;
+
+const { tapIf, tap } = utils;
+
+const { uniqueId } = strings;
+
+defineEmits(['click:cell', 'delete:row', 'delete:column', 'change:sort', 'update:value']);
+
+const props = defineProps<{
+  settings: Settings;
+}>();
+
+const data = reactive<Data>({
+  rowIndex: -1,
+  columnsMeta: {},
+  resize: false,
+  resizeTh: undefined,
+  bodyHeight: 0,
+  scrollTop: 0,
+});
+
+const tableRef = ref<HTMLElement>();
+const headRef = ref<HTMLElement>();
+const bodyRef = ref<HTMLElement>();
+
+const updateBodyHeight = () => {
+  tapIf(bodyRef.value, (el) => {
+    data.bodyHeight = el.getBoundingClientRect().height;
+  });
+};
+
+const columnsRef = computed(() => {
+  if (props.settings.autoLastColumn) {
+    return [...props.settings.columns, { name: uniqueId(), text: '_' }];
+  }
+
+  return props.settings.columns;
+});
+
+const gridTemplateColumns = computed(() => {
+  const { columnsMeta } = data;
+  const columns = unref(columnsRef);
+  const hasMeta = Object.keys(columnsMeta).length;
+  return columns
+    .map((col, index) => {
+      if (index == columns.length - 1) {
+        if (hasMeta) {
+          return 'minmax(100px, 1fr)';
+        }
+
+        return col.width ?? 'minmax(100px, 1fr)';
+      }
+      if (columnsMeta[index]) {
+        return columnsMeta[index].width + 'px';
+      }
+      return col.width ?? '140px';
+    })
+    .join(' ');
+});
+
+const noDataStyle = computed(() => ({
+  gridColumn: '1 / ' + unref(columnsRef).length + 1,
+}));
+
+const classes = computed(() => {
+  return unref(columnsRef).reduce(
+    (r, col) => {
+      r[col.name] = col.justify ? 'justify-' + col.justify : '';
+      return r;
+    },
+    {} as Record<string, string>,
+  );
+});
+
+const rows = computed(() => {
+  const columns = unref(columnsRef);
+
+  const rows = props.settings.rows.slice();
+
+  const { bodyHeight, scrollTop } = data;
+
+  if (props.settings.selfSort) {
+    const sorts = columns.reduce(
+      (acc, col) => {
+        if (col.sort?.direction) {
+          acc[col.name] = col.sort.direction;
+        }
+        return acc;
+      },
+      {} as Record<string, 'DESC' | 'ASC'>,
+    );
+
+    if (Object.keys(sorts).length) {
+      rows.sort((a, b) => compareRecords(sorts, a, b));
+    }
+  }
+
+  const safeGap = 160; // @TODO
+
+  let offset = 0;
+
+  return rows.map((row, rowIndex) => {
+    const height = tap(row['__height'] ? Number(row['__height']) : minRowHeight, (n) => {
+      return !Number.isFinite(n) || n < minRowHeight ? minRowHeight : n;
+    });
+
+    const cells = columns.map((col) => {
+      const colName = col.name;
+      return {
+        colName,
+        rowIndex,
+        value: row[colName],
+        class: classes.value[colName] + (rowIndex === data.rowIndex ? ' hovered' : ''),
+        slot: col.slot,
+        editable: col.editable,
+      };
+    });
+
+    const visible = bodyHeight ? scrollTop < offset + height + safeGap && offset < bodyHeight + scrollTop + safeGap : false;
+
+    offset += height + 1;
+
+    return {
+      visible,
+      height,
+      cells,
+    };
+  });
+});
+
+const { mouseDown } = useResize(data, tableRef);
+
+function syncScroll() {
+  tapIf(headRef.value, (el) => {
+    el.scrollLeft = bodyRef.value?.scrollLeft ?? 0;
+  });
+}
+
+const updateScrollTop = throttle(() => {
+  data.scrollTop = bodyRef.value?.scrollTop ?? 0;
+}, 10);
+
+const onBodyScroll = () => {
+  syncScroll();
+  updateScrollTop();
+};
+
+function onExpand(colName: string) {
+  const index = columnsRef.value.findIndex((col) => col.name === colName);
+  if (index < 0) {
+    return;
+  }
+  const width = props.settings.rows.reduce((width, row) => {
+    const length = utils.call(() => {
+      const value = row[colName];
+
+      if (value && typeof value === 'object' && 'segments' in value) {
+        const segments = value['segments'] as { sequence: string }[];
+        return segments.map((s) => s.sequence).join('').length;
+      }
+
+      return String(value ?? '').length;
+    });
+    const w = 9.52 * length;
+    return w > width ? w : width;
+  }, 0);
+  data.columnsMeta[index] = { width };
+}
+
+onMounted(() => {
+  nextTick(updateBodyHeight);
+});
+
+watchPostEffect(() => {
+  unref(props.settings);
+  nextTick(updateBodyHeight);
+});
+
+useEventListener(window, 'resize', () => nextTick(updateBodyHeight));
+</script>
+
+<template>
+  <div ref="tableRef" class="grid-table" @mousedown="mouseDown">
+    <AddColumnBtn v-if="settings.addColumn" @click.stop="settings.addColumn" />
+    <div ref="headRef" class="table-head" :style="{ gridTemplateColumns }">
+      <ThCell
+        v-for="(col, i) in columnsRef"
+        :key="i"
+        :col="col"
+        :show-context-options="settings.showContextOptions"
+        :column-events="settings.columnEvents"
+        @delete:column="$emit('delete:column', $event)"
+        @change:sort="$emit('change:sort', $event)"
+        @expand:column="onExpand($event)"
+      />
+    </div>
+    <div ref="bodyRef" class="table-body" @scroll="onBodyScroll">
+      <div v-if="rows.length === 0" class="table-body__no-data" :style="noDataStyle">
+        <div>
+          <TableIcon />
+          <div>No Data To Show</div>
+        </div>
+      </div>
+      <TRow v-for="(row, i) in rows" :key="i" :visible="row.visible" :height="row.height" :index="i" :style="{ gridTemplateColumns }">
+        <TdCell
+          v-for="(cell, k) in row.cells"
+          :key="k"
+          :cell="cell"
+          :show-context-options="settings.showContextOptions"
+          :cell-events="settings.cellEvents"
+          @click.stop="$emit('click:cell', cell)"
+          @delete:row="$emit('delete:row', $event)"
+          @update:value="$emit('update:value', $event)"
+        >
+          <slot v-if="cell.slot" :name="cell.colName" v-bind="cell">
+            {{ cell.value }}
+          </slot>
+          <slot v-else v-bind="cell">{{ cell.value }}</slot>
+        </TdCell>
+      </TRow>
+    </div>
+  </div>
+</template>

package/src/components/GridTable/types.ts

@@ -0,0 +1,64 @@
+import type { ListOption } from '@/types';
+
+type TypeMap = {
+  integer: number;
+  float: number;
+  string: string;
+  unknown: number | string;
+};
+
+export type ValueType = keyof TypeMap;
+
+export type ColumnSettings = {
+  text: string;
+  name: string;
+  width?: string;
+  justify?: 'center' | 'start';
+  sort?: {
+    direction: 'DESC' | 'ASC' | undefined;
+  };
+  slot?: boolean;
+  editable?: boolean;
+  valueType?: ValueType;
+};
+
+export type ShowContextOptions = <T extends string = string>(options: ListOption<T>[], onSelect: (op: T) => void) => void;
+
+export type ColumnEvent = 'delete:column' | 'expand:column';
+
+export type CellEvent = 'delete:row' | 'update:value';
+
+export type Settings = {
+  columns: ColumnSettings[];
+  rows: Record<string, unknown>[];
+  addColumn?: () => Promise<void>;
+  autoLastColumn?: boolean;
+  selfSort?: boolean;
+  showContextOptions?: ShowContextOptions;
+  columnEvents?: ColumnEvent[];
+  cellEvents?: CellEvent[];
+};
+
+export type CellProps = {
+  colName: string;
+  rowIndex: number;
+  value: unknown;
+  class: string;
+  editable?: boolean;
+};
+
+export type Data = {
+  rowIndex: number;
+  columnsMeta: Record<number, { width: number }>;
+  resize: boolean;
+  resizeTh:
+    | {
+        index: number;
+        width: number;
+        x: number;
+        right: number;
+      }
+    | undefined;
+  bodyHeight: number;
+  scrollTop: number;
+};

package/src/components/GridTable/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/GridTable/useMouseUp.ts

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

package/src/components/GridTable/useResize.ts

@@ -0,0 +1,67 @@
+import type { Ref } from 'vue';
+import { watchEffect } from 'vue';
+import type { Data } from './types';
+import { useColumn } from './useColumn';
+import { getColumnPositions } from './getColumnPositions';
+import { MIN_COLUMN_WIDTH, RESIZE_GAP } from './constants';
+import { useMouse } from '@/composition/useMouse';
+import { useHover } from '@/composition/useHover';
+import { utils } from '@milaboratories/helpers';
+
+const { tapIf, clamp } = utils;
+export function useResize(data: Data, tableRef: Ref<HTMLElement | undefined>) {
+  const mousePos = useMouse();
+  const isHovered = useHover(tableRef, {});
+
+  const resize = useColumn(
+    (s) => {
+      tapIf(data.resizeTh, (th) => {
+        data.columnsMeta[th.index] = {
+          width: clamp(s.width + s.diff, MIN_COLUMN_WIDTH, 10000),
+        };
+      });
+    },
+    () => {
+      data.resize = false;
+      data.resizeTh = undefined;
+      document.body.style.cursor = '';
+    },
+  );
+
+  function mouseDown(e: { x: number }) {
+    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,
+  };
+}