@globalbrain/sefirot 2.30.0 → 2.31.0

package/lib/components/STable.vue

@@ -1,5 +1,15 @@
 <script setup lang="ts">
-import { computed, reactive, shallowRef, toRefs, watch } from 'vue'
+import { useResizeObserver } from '@vueuse/core'
+import {
+  computed,
+  nextTick,
+  reactive,
+  ref,
+  shallowRef,
+  unref,
+  watch
+} from 'vue'
+import { DynamicScroller, DynamicScrollerItem } from 'vue-virtual-scroller'
 import type { Table } from '../composables/Table'
 import SSpinner from './SSpinner.vue'
 import STableCell from './STableCell.vue'
@@ -12,83 +22,141 @@ const props = defineProps<{
   options: Table
 }>()
 
-const {
-  orders,
-  columns,
-  records,
-  header,
-  footer,
-  summary,
-  total,
-  page,
-  perPage,
-  reset,
-  borderless,
-  loading,
-  onPrev,
-  onNext,
-  onReset
-} = toRefs(props.options)
-
 const head = shallowRef<HTMLElement | null>(null)
 const body = shallowRef<HTMLElement | null>(null)
+const block = shallowRef<HTMLElement | null>(null)
+const row = shallowRef<HTMLElement | null>(null)
+
+const colToGrowAdjusted = ref(false)
+
+const colToGrow = computed(() => {
+  if (colToGrowAdjusted.value) {
+    return -1
+  }
+
+  return unref(props.options.orders).findIndex((key) => {
+    return unref(props.options.columns)[key]?.grow
+  }) ?? -1
+})
+
+const nameOfColToGrow = computed(() => {
+  return unref(props.options.orders)[colToGrow.value]
+})
+
+const cellOfColToGrow = computed(() => {
+  return row.value?.children[colToGrow.value]
+})
 
 let headLock = false
 let bodyLock = false
 
 const colWidths = reactive<Record<string, string>>({})
+const blockWidth = ref<number | undefined>()
 
 const showHeader = computed(() => {
-  if (header?.value === true) {
-    return true
-  }
+  const header = unref(props.options.header)
 
-  if (header?.value === false) {
-    return false
+  if (header != null) {
+    return header
   }
 
-  return total?.value !== undefined || !!reset?.value
+  return unref(props.options.total) != null || !!unref(props.options.reset)
 })
 
 const showFooter = computed(() => {
-  if (loading?.value) {
+  if (unref(props.options.loading)) {
     return false
   }
 
-  if (footer?.value === true) {
-    return true
-  }
+  const footer = unref(props.options.footer)
 
-  if (footer?.value === false) {
-    return false
+  if (footer != null) {
+    return footer
   }
 
-  return page?.value && perPage?.value && total?.value
+  return (
+    unref(props.options.page)
+    && unref(props.options.perPage)
+    && unref(props.options.total)
+  )
+})
+
+const showMissing = computed(() => {
+  return (
+    !unref(props.options.loading)
+    && unref(props.options.records)
+    && !unref(props.options.records)!.length
+  )
 })
 
 const classes = computed(() => ({
   'has-header': showHeader.value,
   'has-footer': showFooter.value,
-  'borderless': borderless?.value
+  'borderless': unref(props.options.borderless)
 }))
 
 const recordsWithSummary = computed(() => {
-  return (records?.value && summary?.value)
-    ? [...records?.value, summary?.value]
-    : records?.value ?? []
+  const records = unref(props.options.records) ?? []
+  const summary = unref(props.options.summary)
+
+  const res = summary ? [...records, summary] : records
+
+  res.forEach((record, index) => {
+    record.__index = index
+  })
+
+  return res
 })
 
-watch(() => records?.value, () => {
+watch(() => props.options.records, () => {
   headLock = true
   bodyLock = true
 }, { flush: 'pre' })
 
-watch(() => records?.value, () => {
+watch(() => props.options.records, () => {
   syncScroll(head.value, body.value)
   headLock = false
   bodyLock = false
 }, { flush: 'post' })
 
+useResizeObserver(block, ([entry]) => {
+  blockWidth.value = entry.contentRect.width
+})
+
+const resizeObserver = useResizeObserver(head, handleResize)
+
+function stopObserving() {
+  const orders = unref(props.options.orders)
+  colWidths[orders[orders.length - 1]] = 'auto'
+  resizeObserver.stop()
+}
+
+async function handleResize() {
+  if (colToGrow.value < 0 || !cellOfColToGrow.value || !row.value) {
+    stopObserving()
+    return
+  }
+
+  const initialWidth = getComputedStyle(cellOfColToGrow.value)
+    .getPropertyValue('--table-col-width')
+    .trim()
+
+  updateColWidth(nameOfColToGrow.value, initialWidth)
+
+  await nextTick()
+
+  let totalWidth = 0
+  for (const el of row.value.children) {
+    totalWidth += el.getBoundingClientRect().width
+  }
+
+  const availableFill = row.value.getBoundingClientRect().width - totalWidth
+  updateColWidth(
+    nameOfColToGrow.value,
+    `calc(${availableFill}px + ${initialWidth})`
+  )
+}
+
 function syncHeadScroll() {
   bodyLock || syncScroll(head.value, body.value)
 }
@@ -111,30 +179,45 @@ function lockBody(value: boolean) {
   bodyLock = value
 }
 
-function updateColWidth(key: string, value: string) {
+function updateColWidth(key: string, value: string, triggeredByUser = false) {
   colWidths[key] = value
+  if (triggeredByUser && colToGrow.value >= 0) {
+    colToGrowAdjusted.value = true
+    stopObserving()
+  }
+}
+
+function isSummaryOrLastClass(index: number) {
+  if (isSummary(index)) {
+    return 'summary'
+  }
+
+  return lastRow(index) ? 'last' : ''
 }
 
 function isSummary(index: number) {
-  return index === records?.value?.length
+  return index === unref(props.options.records)?.length
+}
+
+function lastRow(index: number) {
+  return index === recordsWithSummary.value.length - 1
 }
 
 function getCell(key: string, index: number) {
-  return (isSummary(index) && columns.value[key]?.summaryCell)
-    ? columns.value[key]?.summaryCell
-    : columns.value[key]?.cell
+  const col = unref(props.options.columns)[key]
+  return (isSummary(index) && col?.summaryCell) ? col?.summaryCell : col?.cell
 }
 </script>
 
 <template>
-  <div class="STable" :class="classes" ref="el">
+  <div class="STable" :class="classes">
     <div class="box">
       <STableHeader
         v-if="showHeader"
-        :total="total"
-        :reset="reset"
-        :borderless="borderless"
-        :on-reset="onReset"
+        :total="unref(options.total)"
+        :reset="unref(options.reset)"
+        :borderless="unref(options.borderless)"
+        :on-reset="options.onReset"
       />
 
       <div class="table" role="grid">
@@ -145,23 +228,23 @@ function getCell(key: string, index: number) {
           @mouseleave="lockHead(false)"
           @scroll="syncHeadScroll"
         >
-          <div class="block">
-            <div class="row">
+          <div class="block" ref="block">
+            <div class="row" ref="row">
               <STableItem
-                v-for="key in orders"
+                v-for="key in options.orders"
                 :key="key"
                 :name="key"
-                :class-name="columns[key].className"
+                :class-name="unref(options.columns)[key].className"
                 :width="colWidths[key]"
               >
                 <STableColumn
                   :name="key"
-                  :label="columns[key].label"
-                  :class-name="columns[key].className"
-                  :dropdown="columns[key].dropdown"
+                  :label="unref(options.columns)[key].label"
+                  :class-name="unref(options.columns)[key].className"
+                  :dropdown="unref(options.columns)[key].dropdown"
                   :has-header="showHeader"
-                  :resizable="columns[key].resizable"
-                  @resize="(value) => updateColWidth(key, value)"
+                  :resizable="unref(options.columns)[key].resizable"
+                  @resize="(value) => updateColWidth(key, value, true)"
                 />
               </STableItem>
             </div>
@@ -169,49 +252,57 @@ function getCell(key: string, index: number) {
         </div>
 
         <div
-          v-if="!loading && records && records.length"
+          v-if="!unref(options.loading) && unref(options.records)?.length"
           class="container body"
           ref="body"
           @mouseenter="lockBody(true)"
           @mouseleave="lockBody(false)"
           @scroll="syncBodyScroll"
         >
-          <div class="block">
-            <div
-              v-for="(record, rIndex) in recordsWithSummary"
-              :key="rIndex"
-              class="row"
-              :class="isSummary(rIndex) && 'summary'"
-            >
-              <STableItem
-                v-for="key in orders"
-                :key="key"
-                :name="key"
-                :class-name="columns[key].className"
-                :width="colWidths[key]"
+          <DynamicScroller
+            :items="recordsWithSummary"
+            :min-item-size="40"
+            key-field="__index"
+            class="block"
+            :style="blockWidth ? { width: `${blockWidth}px` } : undefined"
+            :prerender="Math.min(10, recordsWithSummary.length)"
+          >
+            <template #default="{ item: record, index: rIndex, active }">
+              <DynamicScrollerItem
+                :item="record"
+                :active="active"
+                :data-index="rIndex"
               >
-                <STableCell
-                  :name="key"
-                  :class="isSummary(rIndex) && 'summary'"
-                  :class-name="columns[key].className"
-                  :cell="getCell(key, rIndex)"
-                  :value="record[key]"
-                  :record="record"
-                  :records="records"
-                />
-              </STableItem>
-            </div>
-          </div>
+                <div class="row" :class="isSummaryOrLastClass(rIndex)">
+                  <STableItem
+                    v-for="key in options.orders"
+                    :key="key"
+                    :name="key"
+                    :class-name="unref(options.columns)[key].className"
+                    :width="colWidths[key]"
+                  >
+                    <STableCell
+                      :name="key"
+                      :class="isSummary(rIndex) && 'summary'"
+                      :class-name="unref(options.columns)[key].className"
+                      :cell="getCell(key, rIndex)"
+                      :value="record[key]"
+                      :record="record"
+                      :records="unref(options.records)!"
+                    />
+                  </STableItem>
+                </div>
+              </DynamicScrollerItem>
+            </template>
+          </DynamicScroller>
         </div>
       </div>
 
-      <div v-if="!loading && records && !records.length" class="missing">
-        <p class="missing-text">
-          No results matched your search.
-        </p>
+      <div v-if="showMissing" class="missing">
+        <p class="missing-text">No results matched your search.</p>
       </div>
 
-      <div v-if="loading" class="loading">
+      <div v-if="unref(options.loading)" class="loading">
         <div class="loading-icon">
           <SSpinner class="loading-svg" />
         </div>
@@ -219,12 +310,12 @@ function getCell(key: string, index: number) {
 
       <STableFooter
         v-if="showFooter"
-        :total="total"
-        :page="page"
-        :per-page="perPage"
-        :borderless="borderless"
-        :on-prev="onPrev"
-        :on-next="onNext"
+        :total="unref(options.total)"
+        :page="unref(options.page)"
+        :per-page="unref(options.perPage)"
+        :borderless="unref(options.borderless)"
+        :on-prev="options.onPrev"
+        :on-next="options.onNext"
       />
     </div>
   </div>
@@ -266,22 +357,29 @@ function getCell(key: string, index: number) {
   z-index: 100;
   border-radius: var(--table-border-radius) var(--table-border-radius) 0 0;
   background-color: var(--bg-elv-2);
-
-  .STable.has-header & {
-    border-radius: 0;
-  }
+  scrollbar-width: none;
 
   &::-webkit-scrollbar {
     display: none;
   }
+
+  .STable.has-header & {
+    border-radius: 0;
+  }
 }
 
 .container.body {
   border-radius: 6px 6px var(--table-border-radius) var(--table-border-radius);
+  line-height: 0;
 
   .STable.has-footer & {
     border-radius: 0;
   }
+
+  .block {
+    max-height: var(--table-max-height, 100%);
+    overflow-y: auto;
+  }
 }
 
 .block {
@@ -289,13 +387,14 @@ function getCell(key: string, index: number) {
   min-width: 100%;
 }
 
-.row {
+:deep(.row) {
   display: flex;
   border-bottom: 1px solid var(--c-divider-2);
+}
 
-  .body &:last-child {
-    border-bottom: 0;
-  }
+:deep(.row.last),
+:deep(.row.summary) {
+  border-bottom: 0;
 }
 
 .missing {

package/lib/components/STableCell.vue

@@ -7,6 +7,7 @@ import STableCellDay from './STableCellDay.vue'
 import STableCellEmpty from './STableCellEmpty.vue'
 import STableCellPill from './STableCellPill.vue'
 import STableCellPills from './STableCellPills.vue'
+import STableCellState from './STableCellState.vue'
 import STableCellText from './STableCellText.vue'
 
 const props = defineProps<{
@@ -59,6 +60,11 @@ const computedCell = computed<TableCell | undefined>(() =>
       :record="record"
       :pills="computedCell.pills"
     />
+    <STableCellState
+      v-else-if="computedCell.type === 'state'"
+      :value="computedCell.label"
+      :mode="computedCell.mode"
+    />
     <STableCellAvatar
       v-else-if="computedCell.type === 'avatar'"
       :value="value"

package/lib/components/STableCellState.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import SState, { type Mode } from './SState.vue'
+
+defineProps<{
+  value?: string
+  mode?: Mode
+}>()
+</script>
+
+<template>
+  <div class="STableCellState" :class="[mode ?? 'neutral']">
+    <SState
+      v-if="value"
+      :mode="mode"
+      :label="value"
+    />
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.STableCellState {
+  display: flex;
+  align-items: center;
+  padding: 8px 16px;
+  min-height: 40px;
+}
+</style>

package/lib/components/STableItem.vue

@@ -1,16 +1,23 @@
 <script setup lang="ts">
-defineProps<{
+import { computed } from 'vue'
+
+const props = defineProps<{
   name: string
   className?: string
   width?: string
 }>()
+
+const classes = computed(() => [
+  'STableItem',
+  props.className,
+  `col-${props.name}`,
+  { adjusted: props.width },
+  { auto: props.width === 'auto' }
+])
 </script>
 
 <template>
-  <div
-    class="STableItem"
-    :class="[className, `col-${name}`, { adjusted: width }]"
-  >
+  <div :class="classes">
     <slot />
   </div>
 </template>
@@ -24,7 +31,7 @@ defineProps<{
   flex-grow: 1;
   border-right: 1px solid var(--c-divider-light);
   min-width: var(--table-col-width);
-  max-width: var(--table-col-max-width, var(--table-col-width));
+  max-width: var(--table-col-width);
 
   &:last-child {
     border-right: 0;
@@ -32,8 +39,11 @@ defineProps<{
 
   &.adjusted {
     width: v-bind(width) !important;
-    min-width: v-bind(width) !important;
     max-width: v-bind(width) !important;
   }
+
+  &.adjusted:not(.auto) {
+    min-width: v-bind(width) !important;
+  }
 }
 </style>

package/lib/composables/Table.ts

@@ -1,6 +1,5 @@
 import type { MaybeRef } from '@vueuse/core'
 import type { Component } from 'vue'
-import { reactive } from 'vue'
 import type { Day } from '../support/Day'
 import type { DropdownSection } from './Dropdown'
 
@@ -9,18 +8,18 @@ export interface Table<
   R extends Record<string, any> = any,
   SR extends Record<string, any> = any
 > {
-  orders: O[]
-  columns: TableColumns<O, R, SR>
-  records?: R[] | null
-  header?: boolean
-  footer?: boolean
-  summary?: SR | null
-  total?: number | null
-  page?: number | null
-  perPage?: number | null
-  reset?: boolean
-  borderless?: boolean
-  loading?: boolean
+  orders: MaybeRef<O[]>
+  columns: MaybeRef<TableColumns<O, R, SR>>
+  records?: MaybeRef<R[] | null | undefined>
+  header?: MaybeRef<boolean | undefined>
+  footer?: MaybeRef<boolean | undefined>
+  summary?: MaybeRef<SR | null | undefined>
+  total?: MaybeRef<number | null | undefined>
+  page?: MaybeRef<number | null | undefined>
+  perPage?: MaybeRef<number | null | undefined>
+  reset?: MaybeRef<boolean | undefined>
+  borderless?: MaybeRef<boolean>
+  loading?: MaybeRef<boolean | undefined>
   onPrev?(): void
   onNext?(): void
   onReset?(): void
@@ -38,6 +37,7 @@ export interface TableColumn<V, R, SV, SR> {
   label?: string
   className?: string
   dropdown?: DropdownSection[]
+  grow?: boolean
   resizable?: boolean
   cell?: TableCell | TableColumnCellFn<V, R>
   summaryCell?: TableCell | TableColumnCellFn<SV, SR>
@@ -50,6 +50,7 @@ export type TableCell =
   | TableCellDay
   | TableCellPill
   | TableCellPills
+  | TableCellState
   | TableCellAvatar
   | TableCellAvatars
   | TableCellEmpty
@@ -60,6 +61,7 @@ export type TableCellType =
   | 'day'
   | 'pill'
   | 'pills'
+  | 'state'
   | 'avatar'
   | 'avatars'
   | 'empty'
@@ -142,34 +144,16 @@ export interface TableCellComponent extends TableCellBase {
   props?: Record<string, any>
 }
 
-export interface UseTableOptions<
-  O extends string,
-  R extends Record<string, any>,
-  SR extends Record<string, any>
-> {
-  orders: MaybeRef<O[]>
-  columns: MaybeRef<TableColumns<O, R, SR>>
-  records?: MaybeRef<R[] | null | undefined>
-  header?: MaybeRef<boolean | undefined>
-  footer?: MaybeRef<boolean | undefined>
-  summary?: MaybeRef<SR | null | undefined>
-  total?: MaybeRef<number | null | undefined>
-  page?: MaybeRef<number | null | undefined>
-  perPage?: MaybeRef<number | null | undefined>
-  reset?: MaybeRef<boolean | undefined>
-  borderless?: boolean
-  loading?: MaybeRef<boolean | undefined>
-  onPrev?(): void
-  onNext?(): void
-  onReset?(): void
+export interface TableCellState extends TableCellBase {
+  type: 'state'
+  label: string
+  mode?: 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
 }
 
 export function useTable<
   O extends string,
   R extends Record<string, any>,
   SR extends Record<string, any>
->(
-  options: UseTableOptions<O, R, SR>
-): Table<O, R, SR> {
-  return reactive(options) as Table<O, R, SR>
+>(options: Table<O, R, SR>): Table<O, R, SR> {
+  return options
 }

package/lib/styles/bootstrap.css

@@ -1,4 +1,5 @@
 @import "normalize.css";
 @import "v-calendar/dist/style.css";
+@import "vue-virtual-scroller/dist/vue-virtual-scroller.css";
 @import "./variables";
 @import "./base";