@milaboratories/uikit 2.10.15 → 2.10.16

package/src/components/DataTable/state.ts

@@ -1,13 +1,24 @@
-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) => {
+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);
@@ -60,8 +71,12 @@ export function createState(props: TableProps) {
     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 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 {
@@ -143,18 +158,23 @@ export function createState(props: TableProps) {
     (n, _o) => {
       const current = n.current;
 
-      const needToLoad = !current || n.scrollTop < current.scrollTop || n.scrollTop + n.bodyHeight > current.bodyHeight + current.scrollTop;
+      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;
-          }
-        });
+        loadRows(deepClone(data.currentWindow), settings.value.dataSource).then(
+          ({ rows, dataWindow }) => {
+            if (deepEqual(data.currentWindow, dataWindow)) {
+              data.rows = rows;
+            }
+          },
+        );
       }
     },
     { deep: true, immediate: true },

package/src/components/DataTable/types.ts

@@ -1,5 +1,5 @@
-import type { Component } from 'vue';
-import type { Branded, Equal, Expect, Values } from '@milaboratories/helpers';
+import type { Component } from "vue";
+import type { Branded, Equal, Expect, Values } from "@milaboratories/helpers";
 
 type TypeMap = {
   integer: number;
@@ -42,7 +42,7 @@ export type TableData = {
 
 export type DataRow = Record<string, unknown>;
 
-export type PrimaryKey = Branded<string, 'PrimaryKey'>;
+export type PrimaryKey = Branded<string, "PrimaryKey">;
 
 export type ResolvePrimaryKey<D extends DataRow = DataRow> = (dataRow: D, index: number) => string;
 
@@ -75,9 +75,9 @@ export type ColumnSpecSettings<ID = string, _Value = unknown> = {
   label: string;
   id: ID;
   width: number;
-  justify?: 'center' | 'start';
+  justify?: "center" | "start";
   sort?: {
-    direction: 'DESC' | 'ASC' | undefined;
+    direction: "DESC" | "ASC" | undefined;
   };
   component?: () => Component;
   editable?: boolean;
@@ -171,11 +171,11 @@ export type RawTableSettings<D extends DataRow = DataRow> = Readonly<{
 
 type _cell = TableCell<{ age: number; name: string; payload: unknown }>;
 
-type _age = Extract<_cell, { id: 'age' }>;
+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'>>,
+  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

@@ -1,19 +1,19 @@
 <script setup lang="ts">
-import { computed } from 'vue';
-import CheckboxUncheckedSvg from '../assets/images/24_checkbox-light-enabled-unchecked.svg?raw';
-import CheckboxCheckedSvg from '../assets/images/24_checkbox-light-enabled-checked.svg?raw';
-import type { ListOptionNormalized } from '../types';
+import { computed } from "vue";
+import CheckboxUncheckedSvg from "../assets/images/24_checkbox-light-enabled-unchecked.svg?raw";
+import CheckboxCheckedSvg from "../assets/images/24_checkbox-light-enabled-checked.svg?raw";
+import type { ListOptionNormalized } from "../types";
 
 const props = withDefaults(
   defineProps<{
     option: ListOptionNormalized;
     isSelected: boolean;
-    size: 'small' | 'medium';
+    size: "small" | "medium";
     isHovered: boolean;
     useCheckbox?: boolean;
   }>(),
   {
-    size: 'small',
+    size: "small",
     isSelected: false,
     isHovered: false,
     useCheckbox: false,
@@ -22,24 +22,24 @@ const props = withDefaults(
 
 const classes = computed<string>(() => {
   const classItems: string[] = [];
-  if (props.size === 'small') {
-    classItems.push('dropdown-list-item__small');
+  if (props.size === "small") {
+    classItems.push("dropdown-list-item__small");
   }
   if (props.isSelected) {
-    classItems.push('dropdown-list-item__selected');
+    classItems.push("dropdown-list-item__selected");
   }
   if (props.isHovered) {
-    classItems.push('hovered-item');
+    classItems.push("hovered-item");
   }
-  return classItems.join(' ');
+  return classItems.join(" ");
 });
 
 const checkboxClasses = computed(() => {
-  const classes: string[] = ['dropdown-list-item__checkbox', 'flex-self-start'];
+  const classes: string[] = ["dropdown-list-item__checkbox", "flex-self-start"];
   if (props.isSelected) {
-    classes.push('checked');
+    classes.push("checked");
   }
-  return classes.join(' ');
+  return classes.join(" ");
 });
 
 // Why??
@@ -59,6 +59,9 @@ const checkboxSvg = computed(() => (props.isSelected ? CheckboxCheckedSvg : Chec
         {{ option.description }}
       </div>
     </div>
-    <div v-if="!props.useCheckbox && props.isSelected" class="dropdown-list-item__icon flex-self-start" />
+    <div
+      v-if="!props.useCheckbox && props.isSelected"
+      class="dropdown-list-item__icon flex-self-start"
+    />
   </div>
 </template>

package/src/components/GridTable/TdCell.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import { cellEventOptions } from './constants';
-import type { CellEvent, CellProps, ShowContextOptions } from './types';
-import { reactive, ref } from 'vue';
+import { cellEventOptions } from "./constants";
+import type { CellEvent, CellProps, ShowContextOptions } from "./types";
+import { reactive, ref } from "vue";
 
-const emit = defineEmits(['delete:row', 'update:value']);
+const emit = defineEmits(["delete:row", "update:value"]);
 
 const props = defineProps<{
   cell: CellProps;
@@ -17,7 +17,7 @@ const data = reactive({
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function onInput(ev: any) {
-  emit('update:value', {
+  emit("update:value", {
     rowIndex: props.cell.rowIndex,
     name: props.cell.colName,
     value: ev.target.value,
@@ -29,7 +29,7 @@ function showContextMenu() {
   const cellEvents = props.cellEvents ?? [];
 
   if (!props.showContextOptions) {
-    console.warn('inject showContextOptions interface for the table');
+    console.warn("inject showContextOptions interface for the table");
     return;
   }
 
@@ -50,7 +50,7 @@ function onClick() {
   if (props.cell.editable) {
     data.edit = true;
     requestAnimationFrame(() => {
-      cellRef.value?.querySelector('input')?.focus();
+      cellRef.value?.querySelector("input")?.focus();
     });
   }
 }

package/src/components/GridTable/ThCell.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import { columnEventOptions } from './constants';
-import type { ColumnEvent, ColumnSettings, ShowContextOptions } from './types';
+import { columnEventOptions } from "./constants";
+import type { ColumnEvent, ColumnSettings, ShowContextOptions } from "./types";
 
-const emit = defineEmits(['delete:column', 'expand:column', 'change:sort']);
+const emit = defineEmits(["delete:column", "expand:column", "change:sort"]);
 
 const props = defineProps<{
   col: ColumnSettings;
@@ -19,7 +19,7 @@ function onContextMenu() {
   const columnEvents = props.columnEvents ?? [];
 
   if (!props.showContextOptions) {
-    console.warn('inject showContextOptions interface for the table');
+    console.warn("inject showContextOptions interface for the table");
     return;
   }
 
@@ -34,11 +34,11 @@ function onContextMenu() {
   });
 }
 
-function onSort(colName: string, _v: 'DESC' | 'ASC' | undefined) {
-  const v = _v ?? 'DESC';
-  emit('change:sort', {
+function onSort(colName: string, _v: "DESC" | "ASC" | undefined) {
+  const v = _v ?? "DESC";
+  emit("change:sort", {
     colName,
-    direction: rotate(v, ['DESC', 'ASC']),
+    direction: rotate(v, ["DESC", "ASC"]),
   });
 }
 </script>
@@ -47,6 +47,11 @@ function onSort(colName: string, _v: 'DESC' | 'ASC' | undefined) {
   <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
+      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/TableIcon.vue

@@ -1,6 +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="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"

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

@@ -31,11 +31,11 @@
     justify-content: center;
     align-items: center;
     border-left: 1px solid var(--color-div-grey);
-    background-color: #F7F8FA;
+    background-color: #f7f8fa;
     cursor: pointer;
     z-index: 1;
 
-    >div {
+    > div {
       background-color: var(--color-text);
       @include mask(url(./16_add.svg), 16px);
     }
@@ -53,7 +53,7 @@
     padding-right: 8px;
 
     .cell {
-      background-color: #F7F8FA;
+      background-color: #f7f8fa;
       font-weight: 600;
       font-size: 14px;
       user-select: none;
@@ -134,7 +134,7 @@
     }
 
     &__no-data {
-      background-color: #F7F8FA;
+      background-color: #f7f8fa;
       display: flex;
       align-items: center;
       justify-content: center;
@@ -147,7 +147,7 @@
       line-height: 32px;
       letter-spacing: -0.56px;
 
-      >div {
+      > div {
         display: flex;
         flex-direction: column;
         gap: 4px;
@@ -181,4 +181,4 @@
     //   // background-color: rgba(99, 224, 36, 0.12);
     // }
   }
-}
+}

package/src/components/GridTable/constants.ts

@@ -1,27 +1,27 @@
-import type { ListOption } from '../../types';
-import type { CellEvent, ColumnEvent } from './types';
+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: "Delete row",
+    value: "delete:row",
   },
   {
-    text: 'Update value',
-    value: 'update:value',
+    text: "Update value",
+    value: "update:value",
   },
 ];
 
 export const columnEventOptions: ListOption<ColumnEvent>[] = [
   {
-    text: 'Delete column',
-    value: 'delete:column',
+    text: "Delete column",
+    value: "delete:column",
   },
   {
-    text: 'Fit content',
-    value: 'expand:column',
+    text: "Fit content",
+    value: "expand:column",
   },
 ];

package/src/components/GridTable/domain.ts

@@ -1,19 +1,23 @@
 export function toComparable(v: unknown) {
-  if (typeof v === 'number') {
+  if (typeof v === "number") {
     return v;
-  } else if (typeof v === 'string') {
+  } 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>) {
+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;
+    const rev = direction === "DESC" ? -1 : 1;
 
     if (v1 === v2) {
       continue;

package/src/components/GridTable/getColumnPositions.ts

@@ -1,11 +1,11 @@
-import type { Ref } from 'vue';
-import { unref } from 'vue';
-import { utils } from '@milaboratories/helpers';
+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]) ?? [];
+  const ths = utils.tapIf(unref(tableRef)?.querySelectorAll(".th-cell"), (l) => [...l]) ?? [];
   return ths
     .map((th, index) => {
       const { width, x } = th.getBoundingClientRect();

package/src/components/GridTable/index.vue

@@ -1,17 +1,17 @@
 <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';
+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;
 
@@ -19,7 +19,7 @@ const { tapIf, tap } = utils;
 
 const { uniqueId } = strings;
 
-defineEmits(['click:cell', 'delete:row', 'delete:column', 'change:sort', 'update:value']);
+defineEmits(["click:cell", "delete:row", "delete:column", "change:sort", "update:value"]);
 
 const props = defineProps<{
   settings: Settings;
@@ -46,7 +46,7 @@ const updateBodyHeight = () => {
 
 const columnsRef = computed(() => {
   if (props.settings.autoLastColumn) {
-    return [...props.settings.columns, { name: uniqueId(), text: '_' }];
+    return [...props.settings.columns, { name: uniqueId(), text: "_" }];
   }
 
   return props.settings.columns;
@@ -60,27 +60,27 @@ const gridTemplateColumns = computed(() => {
     .map((col, index) => {
       if (index == columns.length - 1) {
         if (hasMeta) {
-          return 'minmax(100px, 1fr)';
+          return "minmax(100px, 1fr)";
         }
 
-        return col.width ?? 'minmax(100px, 1fr)';
+        return col.width ?? "minmax(100px, 1fr)";
       }
       if (columnsMeta[index]) {
-        return columnsMeta[index].width + 'px';
+        return columnsMeta[index].width + "px";
       }
-      return col.width ?? '140px';
+      return col.width ?? "140px";
     })
-    .join(' ');
+    .join(" ");
 });
 
 const noDataStyle = computed(() => ({
-  gridColumn: '1 / ' + unref(columnsRef).length + 1,
+  gridColumn: "1 / " + unref(columnsRef).length + 1,
 }));
 
 const classes = computed(() => {
   return unref(columnsRef).reduce(
     (r, col) => {
-      r[col.name] = col.justify ? 'justify-' + col.justify : '';
+      r[col.name] = col.justify ? "justify-" + col.justify : "";
       return r;
     },
     {} as Record<string, string>,
@@ -102,7 +102,7 @@ const rows = computed(() => {
         }
         return acc;
       },
-      {} as Record<string, 'DESC' | 'ASC'>,
+      {} as Record<string, "DESC" | "ASC">,
     );
 
     if (Object.keys(sorts).length) {
@@ -115,7 +115,7 @@ const rows = computed(() => {
   let offset = 0;
 
   return rows.map((row, rowIndex) => {
-    const height = tap(row['__height'] ? Number(row['__height']) : minRowHeight, (n) => {
+    const height = tap(row["__height"] ? Number(row["__height"]) : minRowHeight, (n) => {
       return !Number.isFinite(n) || n < minRowHeight ? minRowHeight : n;
     });
 
@@ -125,13 +125,15 @@ const rows = computed(() => {
         colName,
         rowIndex,
         value: row[colName],
-        class: classes.value[colName] + (rowIndex === data.rowIndex ? ' hovered' : ''),
+        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;
+    const visible = bodyHeight
+      ? scrollTop < offset + height + safeGap && offset < bodyHeight + scrollTop + safeGap
+      : false;
 
     offset += height + 1;
 
@@ -169,12 +171,12 @@ function onExpand(colName: string) {
     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;
+      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;
+      return String(value ?? "").length;
     });
     const w = 9.52 * length;
     return w > width ? w : width;
@@ -191,7 +193,7 @@ watchPostEffect(() => {
   nextTick(updateBodyHeight);
 });
 
-useEventListener(window, 'resize', () => nextTick(updateBodyHeight));
+useEventListener(window, "resize", () => nextTick(updateBodyHeight));
 </script>
 
 <template>
@@ -216,7 +218,14 @@ useEventListener(window, 'resize', () => nextTick(updateBodyHeight));
           <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 }">
+      <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"

package/src/components/GridTable/types.ts

@@ -1,4 +1,4 @@
-import type { ListOption } from '../../types';
+import type { ListOption } from "../../types";
 
 type TypeMap = {
   integer: number;
@@ -13,20 +13,23 @@ export type ColumnSettings = {
   text: string;
   name: string;
   width?: string;
-  justify?: 'center' | 'start';
+  justify?: "center" | "start";
   sort?: {
-    direction: 'DESC' | 'ASC' | undefined;
+    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 ShowContextOptions = <T extends string = string>(
+  options: ListOption<T>[],
+  onSelect: (op: T) => void,
+) => void;
 
-export type ColumnEvent = 'delete:column' | 'expand:column';
+export type ColumnEvent = "delete:column" | "expand:column";
 
-export type CellEvent = 'delete:row' | 'update:value';
+export type CellEvent = "delete:row" | "update:value";
 
 export type Settings = {
   columns: ColumnSettings[];
@@ -53,11 +56,11 @@ export type Data = {
   resize: boolean;
   resizeTh:
     | {
-      index: number;
-      width: number;
-      x: number;
-      right: number;
-    }
+        index: number;
+        width: number;
+        x: number;
+        right: number;
+      }
     | undefined;
   bodyHeight: number;
   scrollTop: number;