@milaboratories/uikit 1.2.3

package/src/components/DataTable/RowsCommandMenu.vue

@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { injectState } from './keys';
+
+const state = injectState();
+
+const selectedRows = computed(() => state.getSelectedRows());
+
+const isVisible = computed(() => selectedRows.value.length > 0);
+
+const ops = computed(() => state.settings?.value.onSelectedRows ?? []);
+
+const actions = computed(() =>
+  ops.value.map((op) => ({
+    label: op.label,
+    cb: () => {
+      op.cb(selectedRows.value);
+      state.data.selectedRows.clear();
+      state.data.rows = [];
+    },
+  })),
+);
+</script>
+
+<template>
+  <div v-if="isVisible" class="command-menu">
+    <span v-if="selectedRows.length">{{ selectedRows.length }} rows selected</span>
+    <hr />
+    <span v-for="(action, i) in actions" :key="i" class="command" @click.stop="action.cb">{{ action.label }}</span>
+  </div>
+</template>

package/src/components/DataTable/TScroll.vue

@@ -0,0 +1,41 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+import { useMouseCapture } from '@/composition/useMouseCapture';
+
+const emit = defineEmits<{
+  (e: 'change:offset', value: number): void;
+}>();
+
+const props = defineProps<{
+  offset: number;
+  windowSize: number;
+  dataSize: number;
+}>();
+
+const handleRef = ref<HTMLElement>();
+
+const scrollSize = computed(() => props.windowSize - 12);
+
+const isVisible = computed(() => props.windowSize < props.dataSize);
+
+const handleOffset = computed(() => Math.ceil(props.offset * (scrollSize.value / props.dataSize)));
+
+const handleLength = computed(() => Math.ceil((scrollSize.value * scrollSize.value) / props.dataSize));
+
+const handleStyle = computed(() => ({ top: `${handleOffset.value}px`, height: `${handleLength.value}px` }));
+
+useMouseCapture(handleRef, (ev, state) => {
+  const newOffset = ((handleOffset.value + ev.dy) * props.dataSize) / scrollSize.value;
+  emit('change:offset', newOffset);
+  state.x = ev.x;
+  state.y = ev.y;
+});
+</script>
+
+<template>
+  <div class="t-scroll" :style="{ height: `${windowSize}px` }">
+    <div>
+      <div v-if="isVisible" ref="handleRef" class="t-scroll__handle" :style="handleStyle" />
+    </div>
+  </div>
+</template>

package/src/components/DataTable/TableComponent.vue

@@ -0,0 +1,105 @@
+<script lang="ts" setup>
+import './assets/data-table-style.scss';
+import { ref, unref, onMounted, nextTick, watchPostEffect, watch, computed } from 'vue';
+import TdCell from './TdCell.vue';
+import type { TableSettings, TableData } from './types';
+import TableIcon from './assets/TableIcon.vue';
+import TrHead from './TrHead.vue';
+import ThCell from './ThCell.vue';
+import TrBody from './TrBody.vue';
+import ColumnCaret from './ColumnCaret.vue';
+import { useEventListener } from '@/index';
+import { tapIf } from '@milaboratories/helpers';
+import { useResize } from './composition/useResize';
+import RowsCommandMenu from './RowsCommandMenu.vue';
+import ColumnsCommandMenu from './ColumnsCommandMenu.vue';
+import TScroll from './TScroll.vue';
+import { createState } from './state';
+
+const emit = defineEmits<{
+  (e: 'update:data', value: TableData): void;
+  (e: 'change:sort', value: unknown): void;
+}>();
+
+const props = defineProps<{
+  settings: Readonly<TableSettings>;
+}>();
+
+const state = createState(props);
+
+const hasNoData = computed(() => state.data.rows.length === 0);
+
+const tableBodyStyle = computed(() => ({
+  height: hasNoData.value ? '212px' /* css value */ : state.data.bodyHeight + 'px',
+}));
+
+watch(state.data, (v) => emit('update:data', v), { deep: true });
+
+watch(props, () => updateDimensions);
+
+const tableRef = ref<HTMLElement>();
+const headRef = ref<HTMLElement>();
+const bodyRef = ref<HTMLElement>();
+
+const updateDimensions = () => {
+  tapIf(bodyRef.value, (el) => {
+    state.updateDimensions(el.getBoundingClientRect());
+  });
+};
+
+const tableColumns = state.tableColumns;
+
+const tableRows = state.tableRows;
+
+const { mouseDown } = useResize(state, tableRef);
+
+onMounted(() => {
+  nextTick(updateDimensions);
+});
+
+watchPostEffect(() => {
+  unref(props.settings);
+  nextTick(updateDimensions);
+});
+
+useEventListener(window, 'resize', () => nextTick(updateDimensions));
+
+const onWheel = (ev: WheelEvent) => {
+  ev.preventDefault();
+  state.updateOffsets(ev);
+};
+</script>
+
+<template>
+  <div ref="tableRef" class="data-table" @mousedown="mouseDown">
+    <div class="command-menu__container">
+      <RowsCommandMenu />
+      <ColumnsCommandMenu />
+    </div>
+    <div ref="headRef" class="table-head">
+      <TrHead>
+        <ThCell v-for="(col, i) in tableColumns" :key="i" :col="col" :style="col.style" @change:sort="$emit('change:sort', $event)" />
+      </TrHead>
+    </div>
+    <div ref="bodyRef" class="table-body" :style="tableBodyStyle" @wheel="onWheel">
+      <div v-if="hasNoData" class="table-body__no-data">
+        <div>
+          <TableIcon />
+          <div>No Data To Show</div>
+        </div>
+      </div>
+      <TrBody v-for="(row, i) in tableRows" :key="i" :row="row">
+        <TdCell v-for="cell in row.cells" :key="cell.column.id + ':' + i" :cell="cell" :style="cell.style" />
+      </TrBody>
+    </div>
+    <div class="carets">
+      <ColumnCaret v-for="(col, i) in tableColumns" :key="i" :column="col" :style="col.style" @change:sort="$emit('change:sort', $event)" />
+    </div>
+    <TScroll
+      :offset="state.data.scrollTop"
+      :window-size="state.data.bodyHeight"
+      :data-size="state.data.dataHeight"
+      @change:offset="state.updateScrollTop"
+    />
+  </div>
+</template>

package/src/components/DataTable/TdCell.vue

@@ -0,0 +1,108 @@
+<script lang="ts" setup>
+import { tapIf } from '@milaboratories/helpers';
+import { showContextMenu } from '../contextMenu';
+import type { ContextOption } from '../contextMenu/types';
+import { injectState } from './keys';
+import type { Row, TableCell } from './types';
+import { computed, ref } from 'vue';
+import BaseCellComponent from './BaseCellComponent.vue';
+
+const props = defineProps<{
+  cell: TableCell;
+}>();
+
+const state = injectState();
+
+const valueTypeRef = computed(() => props.cell.column.valueType);
+
+const onInput = (value: unknown) => {
+  tapIf(state.settings.value.onUpdatedRow, (f) => {
+    const row = props.cell.row;
+
+    const dataRow = { ...row.dataRow, [props.cell.id]: value };
+
+    f({ ...row, dataRow });
+  });
+};
+
+const onClick = (ev: MouseEvent) => {
+  if (ev.metaKey) {
+    state.selectRow(props.cell.row.primaryKey);
+  }
+};
+
+const onContextMenu = (ev: MouseEvent, row: Row) => {
+  if (ev.type === 'contextmenu') {
+    ev.preventDefault();
+  } else {
+    return;
+  }
+
+  const settings = state.settings ?? {};
+
+  const options = [] as ContextOption[];
+
+  const { onSelectedRows, onSelectedColumns } = settings.value;
+
+  const isSelected = state.data.selectedRows.has(row.primaryKey);
+
+  if (onSelectedRows && onSelectedRows.length) {
+    if (isSelected) {
+      options.push({
+        text: 'Deselect row',
+        cb() {
+          state.data.selectedRows.delete(props.cell.row.primaryKey);
+        },
+      });
+    } else {
+      options.push({
+        text: 'Select row',
+        cb() {
+          state.selectRow(props.cell.row.primaryKey);
+        },
+      });
+    }
+  }
+
+  if (onSelectedColumns && onSelectedColumns.length) {
+    options.push({
+      text: 'Select column',
+      cb() {
+        state.selectColumn(props.cell.column.id);
+      },
+    });
+
+    options.push({
+      text: 'Unselect column',
+      cb() {
+        state.unselectColumn(props.cell.column.id);
+      },
+    });
+  }
+
+  if (!options.length) {
+    return;
+  }
+
+  showContextMenu(ev, options);
+};
+
+const cellRef = ref<HTMLElement>();
+
+const CustomComponent = computed(() => (props.cell.column.component ? props.cell.column.component() : undefined));
+</script>
+
+<template>
+  <div
+    ref="cellRef"
+    class="td-cell"
+    :class="{ [cell.class]: true }"
+    :data-row-index.attr="cell.row.index"
+    @click="onClick"
+    @contextmenu="(ev) => onContextMenu(ev, cell.row)"
+  >
+    <div v-if="cell.control" class="control-cell">{{ cell.row.index }}</div>
+    <component :is="CustomComponent" v-else-if="CustomComponent" :model-value="cell.value" @update:model-value="onInput" />
+    <BaseCellComponent v-else :model-value="cell.value" :value-type="valueTypeRef" :editable="cell.column.editable" @update:model-value="onInput" />
+  </div>
+</template>

package/src/components/DataTable/ThCell.vue

@@ -0,0 +1,40 @@
+<script lang="ts" setup>
+import { showContextMenu } from '../contextMenu';
+import type { ContextOption } from '../contextMenu/types';
+import { rotate } from './domain';
+import type { ColumnSpecSettings } from './types';
+
+const emit = defineEmits(['delete:column', 'expand:column', 'change:sort']);
+
+defineProps<{
+  col: ColumnSpecSettings;
+}>();
+
+function onContextMenu(ev: MouseEvent) {
+  ev.preventDefault();
+
+  const options = [] as ContextOption[]; // @TODO
+
+  if (!options.length) {
+    return;
+  }
+
+  showContextMenu(ev, options);
+}
+
+function onSort(col: ColumnSpecSettings) {
+  const v = col.sort?.direction ?? 'DESC';
+  emit('change:sort', {
+    colId: col.id,
+    direction: rotate(v, ['DESC', 'ASC']),
+  });
+}
+</script>
+
+<template>
+  <div class="cell th-cell" :data-col-id.attr="col.id" :class="{ 'justify-center': col.justify, frozen: col.frozen }" @contextmenu="onContextMenu">
+    <div v-if="col.valueType" :class="col.valueType" />
+    {{ col.label }}
+    <div v-if="col.sort" class="sort" :class="col.sort.direction" @click.stop="() => onSort(col)" />
+  </div>
+</template>

package/src/components/DataTable/TrBody.vue

@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+import { ref, nextTick } from 'vue';
+import type { TableRow } from './types';
+import { tapIf } from '@milaboratories/helpers';
+
+defineProps<{
+  row: TableRow;
+}>();
+
+const trRef = ref<HTMLElement>();
+
+// hook to prevent weird left scroll after child repaint (@TODO)
+const onScroll = () => {
+  nextTick().then(() => {
+    tapIf(trRef.value, (el) => (el.scrollLeft = 0));
+  });
+};
+</script>
+
+<template>
+  <div ref="trRef" class="tr-body" scroll="no" :style="row.style" :class="{ selected: row.selected }" @scroll="onScroll">
+    <slot />
+  </div>
+</template>

package/src/components/DataTable/TrHead.vue

@@ -0,0 +1,9 @@
+<script lang="ts" setup>
+//
+</script>
+
+<template>
+  <div class="tr-head">
+    <slot />
+  </div>
+</template>

package/src/components/DataTable/adapters/AsyncData.ts

@@ -0,0 +1,33 @@
+import type * as Types from '../types';
+import type { DataRow, Row } from '../types';
+import { GAP } from '../constants';
+import { clamp } from '@milaboratories/helpers';
+
+export class AsyncData<D extends DataRow> implements Types.DataSource {
+  constructor(
+    public readonly api: Types.ExternalApi<D>,
+    public readonly rowHeight: number,
+    public readonly resolvePrimaryKey: Types.ResolvePrimaryKey,
+  ) {}
+
+  get height() {
+    return this.rowHeight + GAP;
+  }
+
+  async getHeight(): Promise<number> {
+    return (await this.api.count()) * this.height;
+  }
+
+  async getRows(scrollTop: number, bodyHeight: number): Promise<Row[]> {
+    const offset = clamp(Math.floor(scrollTop / this.height), 0, Number.POSITIVE_INFINITY);
+    const limit = Math.ceil(bodyHeight + 40 / this.height); // @TODO safe window
+    const rows = await this.api.query({ offset, limit });
+    return rows.map<Types.Row>((dataRow, index) => ({
+      dataRow,
+      index: offset + index,
+      primaryKey: this.resolvePrimaryKey(dataRow, offset + index) as Types.PrimaryKey,
+      offset: (offset + index) * (this.rowHeight + GAP),
+      height: this.rowHeight,
+    }));
+  }
+}

package/src/components/DataTable/adapters/RawData.ts

@@ -0,0 +1,56 @@
+import type * as Types from '../types';
+import type { DataRow, ResolvePrimaryKey, Row, ResolveRowHeight } from '../types';
+import { GAP } from '../constants';
+import { sliceBy } from '../domain';
+import { notEmpty } from '@milaboratories/helpers';
+
+const rowsStore = new WeakMap<WeakKey, Row[]>();
+
+export class RawData<D extends DataRow = DataRow> implements Types.DataSource {
+  private dataHeight: number;
+
+  constructor(
+    public readonly datum: D[],
+    public readonly resolveHeight: ResolveRowHeight<D>,
+    public readonly resolvePrimaryKey: ResolvePrimaryKey<D>,
+  ) {
+    const offsets = datum.reduce(
+      (dict, it, index) => {
+        dict.indices.set(index, dict.total);
+        dict.total += this.resolveHeight(it, index) + GAP;
+        return dict;
+      },
+      {
+        total: 0,
+        indices: new Map<number, number>(),
+      },
+    );
+
+    this.dataHeight = offsets.total;
+
+    const rows = datum.map((dataRow, index) => ({
+      dataRow,
+      index,
+      primaryKey: this.resolvePrimaryKey(dataRow, index) as Types.PrimaryKey,
+      offset: notEmpty(offsets.indices.get(index)),
+      height: this.resolveHeight(dataRow, index),
+    }));
+
+    rowsStore.set(this, rows);
+  }
+
+  get rows(): Row<D>[] {
+    return rowsStore.get(this)! as Row<D>[];
+  }
+
+  async getHeight() {
+    return this.dataHeight;
+  }
+
+  async getRows(scrollTop: number, bodyHeight: number): Promise<Row<D>[]> {
+    return sliceBy(this.rows, (it) => {
+      const offset = it.offset;
+      return scrollTop < offset + it.height && offset < bodyHeight + scrollTop;
+    });
+  }
+}

package/src/components/DataTable/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/DataTable/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/DataTable/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/DataTable/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/DataTable/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>