@globalbrain/sefirot 2.46.0 → 2.47.0

package/lib/components/SButton.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { type MaybeRef } from '@vueuse/core'
-import { computed, unref, useSlots } from 'vue'
+import { type MaybeRef, computed, unref, useSlots } from 'vue'
 import { type Position } from '../composables/Tooltip'
 import SFragment from './SFragment.vue'
 import SIcon from './SIcon.vue'
@@ -24,7 +23,7 @@ export type Mode =
 
 export interface Tooltip {
   tag?: string
-  text?: MaybeRef<string>
+  text?: MaybeRef<string | null>
   position?: Position
   trigger?: 'hover' | 'focus' | 'both'
   timeout?: number

package/lib/components/SButtonGroup.vue

@@ -5,7 +5,7 @@
 </template>
 
 <style scoped lang="postcss">
-.SButtonGroup :slotted(.SButton) {
+.SButtonGroup :deep(.SButton) {
   border-left-width: 0;
   border-radius: 0;
 

package/lib/components/SCard.vue

@@ -28,6 +28,7 @@ const classes = computed(() => [
 <style scoped lang="postcss">
 .SCard {
   display: grid;
+  grid-template-columns: minmax(0, 1fr);
   gap: 1px;
   border: 1px solid transparent;
   border-radius: 6px;

package/lib/components/SDropdownSectionFilter.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import IconCheck from '@iconify-icons/ph/check'
-import { type MaybeRef } from '@vueuse/core'
 import Fuse from 'fuse.js'
-import { computed, onMounted, ref, unref } from 'vue'
+import { type MaybeRef, computed, onMounted, ref, unref } from 'vue'
 import { type DropdownSectionFilterOption, type DropdownSectionFilterSelectedValue } from '../composables/Dropdown'
 import { isArray } from '../support/Utils'
 import SDropdownSectionFilterItem from './SDropdownSectionFilterItem.vue'

package/lib/components/SInputBase.vue

@@ -57,16 +57,12 @@ function getErrorMsg(validation: Validatable) {
 <template>
   <div class="SInputBase" :class="{ 'has-error': error?.has }">
     <label v-if="label" class="label" :for="name">
-      <STooltip v-if="hasInfo" :text="info">
-        <div class="label-text">
-          <span class="label-text-value">{{ label }}</span>
-          <SIcon class="label-text-info" :icon="IconQuestion" />
-        </div>
+      <span class="label-text">{{ label }}</span>
+
+      <STooltip v-if="hasInfo" :text="info" trigger="focus" @click.prevent>
+        <SIcon class="label-info" :icon="IconQuestion" />
         <template v-if="$slots.info" #text><slot name="info" /></template>
       </STooltip>
-      <div v-else class="label-text">
-        <span class="label-text-value">{{ label }}</span>
-      </div>
 
       <span class="label-note">{{ note }}</span>
 
@@ -119,26 +115,29 @@ function getErrorMsg(validation: Validatable) {
 }
 
 .label-text {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  transition: color 0.25s;
-}
-
-.label-text-value {
   font-weight: 500;
   color: var(--input-label-color);
   transition: color 0.25s;
 }
 
-.label-text-info {
-  width: 16px;
-  height: 16px;
-  color: var(--c-text-2);
-  transition: color 0.25s;
+:deep(.STooltip) {
+  .label-info {
+    display: inline-block;
+    margin-left: 4px;
+    width: 16px;
+    height: 16px;
+    color: var(--c-text-2);
+    transition: color 0.25s;
+  }
+
+  &:hover, &:focus, &:focus-within {
+    .label-info {
+      color: var(--c-info-text);
+    }
+  }
 
-  .label-text:hover & {
-    color: var(--c-info-text);
+  .content {
+    vertical-align: middle;
   }
 }
 

package/lib/components/SInputFile.vue

@@ -15,18 +15,20 @@ const props = defineProps<{
   help?: string
   text?: string
   placeholder?: string
+  accept?: string
+  multiple?: boolean
   checkIcon?: IconifyIcon | DefineComponent
   checkText?: string
   checkColor?: Color
-  value?: File | null
-  modelValue?: File | null
+  value?: File | File[] | null
+  modelValue?: File | File[] | null
   hideError?: boolean
   validation?: Validatable
 }>()
 
 const emit = defineEmits<{
-  (e: 'update:model-value', file: File | null): void
-  (e: 'change', file: File | null): void
+  (e: 'update:model-value', file: File | File[] | null): void
+  (e: 'change', file: File | File[] | null): void
 }>()
 
 const _value = computed(() => {
@@ -39,15 +41,19 @@ const input = ref<HTMLInputElement | null>(null)
 
 const classes = computed(() => [props.size ?? 'small'])
 
-const fileName = computed(() => _value.value?.name ?? null)
+const fileName = computed(() => Array.isArray(_value.value)
+  ? _value.value.map((file) => file.name).join(', ')
+  : _value.value?.name ?? ''
+)
 
-/* c8 ignore next 4 */
 function open() {
   input.value!.click()
 }
 
 function onChange(e: Event) {
-  const file = (e.target as any).files[0]
+  const file = props.multiple
+    ? Array.from((e.target as HTMLInputElement).files ?? [])
+    : ((e.target as HTMLInputElement).files ?? [])[0]
 
   emit('update:model-value', file ?? null)
   emit('change', file ?? null)
@@ -74,6 +80,8 @@ function onChange(e: Event) {
       ref="input"
       class="input"
       type="file"
+      :accept="accept"
+      :multiple="multiple"
       @change="onChange"
     >
 

package/lib/components/STable.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useVirtualizer } from '@tanstack/vue-virtual'
 import { useResizeObserver } from '@vueuse/core'
+import xor from 'lodash-es/xor'
 import {
   computed,
   nextTick,
@@ -11,6 +12,7 @@ import {
   watch
 } from 'vue'
 import { type Table } from '../composables/Table'
+import SInputCheckbox from './SInputCheckbox.vue'
 import SSpinner from './SSpinner.vue'
 import STableCell from './STableCell.vue'
 import STableColumn from './STableColumn.vue'
@@ -20,6 +22,11 @@ import STableItem from './STableItem.vue'
 
 const props = defineProps<{
   options: Table
+  selected?: unknown[]
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:selected', value: unknown[]): void
 }>()
 
 const head = shallowRef<HTMLElement | null>(null)
@@ -28,9 +35,13 @@ const block = shallowRef<HTMLElement | null>(null)
 const row = shallowRef<HTMLElement | null>(null)
 
 const ordersToShow = computed(() => {
-  return unref(props.options.orders).filter((key) => {
+  const orders = unref(props.options.orders).filter((key) => {
     return unref(props.options.columns)[key]?.show !== false
   })
+  if (!props.selected) {
+    return orders
+  }
+  return ['__select', ...orders]
 })
 
 watch(() => ordersToShow.value, handleResize)
@@ -55,9 +66,6 @@ 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>()
 
@@ -114,25 +122,80 @@ const recordsWithSummary = computed(() => {
   return summary ? [...records, summary] : records
 })
 
+const indexes = computed(() => {
+  if (!props.selected) {
+    return []
+  }
+  const records = unref(props.options.records) ?? []
+  const indexField = unref(props.options.indexField)
+
+  return records.map((record, i) => indexField ? record[indexField] : i)
+})
+
+const selectedIndexes = reactive(new Set())
+
+const control = computed({
+  get() {
+    if (!props.selected) {
+      return false
+    }
+    const selected = indexes.value.filter((index) => {
+      return selectedIndexes.has(index)
+    })
+
+    updateSelected(selected)
+
+    return selected.length === indexes.value.length
+      ? true
+      : selected.length ? 'indeterminate' : false
+  },
+
+  set(newValue) {
+    if (newValue === false) {
+      selectedIndexes.clear()
+    } else if (newValue === true) {
+      indexes.value.forEach((index) => {
+        selectedIndexes.add(index)
+      })
+    }
+  }
+})
+
+watch(indexes, (newValue, oldValue) => {
+  if (!props.selected) {
+    return
+  }
+  xor(newValue, oldValue).forEach((index) => {
+    selectedIndexes.delete(index)
+  })
+})
+
 const virtualizerOptions = computed(() => ({
   count: recordsWithSummary.value.length,
   getScrollElement: () => body.value,
-  estimateSize: () => unref(props.options.rowSize) ?? 41,
+  estimateSize: (index: number) => {
+    const rowSize = unref(props.options.rowSize) ?? 40
+    const borderSize = unref(props.options.borderSize) ?? 1
+    return lastRow(index) ? rowSize : rowSize + borderSize
+  },
   overscan: 10
 }))
 
 const rowVirtualizer = useVirtualizer(virtualizerOptions)
 const virtualItems = computed(() => rowVirtualizer.value.getVirtualItems())
 
-watch(() => props.options.records, () => {
-  headLock = true
-  bodyLock = true
+let isSyncingHead = false
+let isSyncingBody = false
+
+watch(() => unref(props.options.records), () => {
+  isSyncingHead = true
+  isSyncingBody = true
 }, { flush: 'pre' })
 
-watch(() => props.options.records, () => {
+watch(() => unref(props.options.records), () => {
   syncScroll(head.value, body.value)
-  headLock = false
-  bodyLock = false
+  isSyncingHead = false
+  isSyncingBody = false
 }, { flush: 'post' })
 
 useResizeObserver(block, ([entry]) => {
@@ -174,11 +237,19 @@ async function handleResize() {
 }
 
 function syncHeadScroll() {
-  bodyLock || syncScroll(head.value, body.value)
+  if (!isSyncingHead) {
+    isSyncingBody = true
+    syncScroll(head.value, body.value)
+  }
+  isSyncingHead = false
 }
 
 function syncBodyScroll() {
-  headLock || syncScroll(body.value, head.value)
+  if (!isSyncingBody) {
+    isSyncingHead = true
+    syncScroll(body.value, head.value)
+  }
+  isSyncingBody = false
 }
 
 function syncScroll(from: HTMLElement | null, to: HTMLElement | null) {
@@ -187,14 +258,6 @@ function syncScroll(from: HTMLElement | null, to: HTMLElement | null) {
   }
 }
 
-function lockHead(value: boolean) {
-  headLock = value
-}
-
-function lockBody(value: boolean) {
-  bodyLock = value
-}
-
 function updateColWidth(key: string, value: string, triggeredByUser = false) {
   colWidths[key] = value
   if (triggeredByUser && colToGrow.value >= 0) {
@@ -220,9 +283,18 @@ function lastRow(index: number) {
 }
 
 function getCell(key: string, index: number) {
+  if (key === '__select') {
+    return { type: 'custom' }
+  }
   const col = unref(props.options.columns)[key]
   return (isSummary(index) && col?.summaryCell) ? col?.summaryCell : col?.cell
 }
+
+function updateSelected(selected: unknown[]) {
+  if (xor(selected, props.selected ?? []).length) {
+    emit('update:selected', selected)
+  }
+}
 </script>
 
 <template>
@@ -233,16 +305,16 @@ function getCell(key: string, index: number) {
         :total="unref(options.total)"
         :reset="unref(options.reset)"
         :menu="unref(options.menu)"
+        :actions="unref(options.actions)"
         :borderless="unref(options.borderless)"
         :on-reset="options.onReset"
+        :selected="selected"
       />
 
       <div class="table" role="grid">
         <div
           class="container head"
           ref="head"
-          @mouseenter="lockHead(true)"
-          @mouseleave="lockHead(false)"
           @scroll="syncHeadScroll"
         >
           <div class="block" ref="block">
@@ -251,18 +323,23 @@ function getCell(key: string, index: number) {
                 v-for="key in ordersToShow"
                 :key="key"
                 :name="key"
-                :class-name="unref(options.columns)[key].className"
+                :class-name="unref(options.columns)[key]?.className"
                 :width="colWidths[key]"
               >
                 <STableColumn
                   :name="key"
-                  :label="unref(options.columns)[key].label"
-                  :class-name="unref(options.columns)[key].className"
-                  :dropdown="unref(options.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="unref(options.columns)[key].resizable"
+                  :resizable="unref(options.columns)[key]?.resizable"
                   @resize="(value) => updateColWidth(key, value, true)"
-                />
+                >
+                  <SInputCheckbox
+                    v-if="key === '__select' && unref(options.records)?.length"
+                    v-model="control"
+                  />
+                </STableColumn>
               </STableItem>
             </div>
           </div>
@@ -272,8 +349,6 @@ function getCell(key: string, index: number) {
           v-if="!unref(options.loading) && unref(options.records)?.length"
           class="container body"
           ref="body"
-          @mouseenter="lockBody(true)"
-          @mouseleave="lockBody(false)"
           @scroll="syncBodyScroll"
         >
           <div
@@ -304,18 +379,24 @@ function getCell(key: string, index: number) {
                   v-for="key in ordersToShow"
                   :key="key"
                   :name="key"
-                  :class-name="unref(options.columns)[key].className"
+                  :class-name="unref(options.columns)[key]?.className"
                   :width="colWidths[key]"
                 >
                   <STableCell
                     :name="key"
                     :class="isSummary(index) && 'summary'"
-                    :class-name="unref(options.columns)[key].className"
+                    :class-name="unref(options.columns)[key]?.className"
                     :cell="getCell(key, index)"
                     :value="recordsWithSummary[index][key]"
                     :record="recordsWithSummary[index]"
                     :records="unref(options.records)!"
-                  />
+                  >
+                    <SInputCheckbox
+                      v-if="key === '__select' && !isSummary(index)"
+                      :value="selectedIndexes.has(indexes[index])"
+                      @change="c => selectedIndexes[c ? 'add' : 'delete'](indexes[index])"
+                    />
+                  </STableCell>
                 </STableItem>
               </div>
             </div>
@@ -380,9 +461,10 @@ function getCell(key: string, index: number) {
   position: var(--table-head-position, static);
   top: var(--table-head-top, auto);
   z-index: 100;
-  border-radius: var(--table-border-radius) var(--table-border-radius) 0 0;
+  border-radius: calc(var(--table-border-radius) - 1px) calc(var(--table-border-radius) - 1px) 0 0;
   background-color: var(--bg-elv-2);
   scrollbar-width: none;
+  line-height: 0;
 
   &::-webkit-scrollbar {
     display: none;
@@ -394,7 +476,7 @@ function getCell(key: string, index: number) {
 }
 
 .container.body {
-  border-radius: 6px 6px var(--table-border-radius) var(--table-border-radius);
+  border-radius: 0 0 calc(var(--table-border-radius) - 1px) calc(var(--table-border-radius) - 1px);
   line-height: 0;
   max-height: var(--table-max-height, 100%);
 
@@ -419,7 +501,7 @@ function getCell(key: string, index: number) {
 }
 
 .missing {
-  border-radius: 0 0 6px 6px;
+  border-radius: 0 0 calc(var(--table-border-radius) - 1px) calc(var(--table-border-radius) - 1px);
   padding: 48px 32px;
   text-align: center;
   background-color: var(--c-bg-elv-3);
@@ -427,10 +509,14 @@ function getCell(key: string, index: number) {
   font-size: 14px;
   font-weight: 500;
   color: var(--c-text-3);
+
+  .has-footer & {
+    border-radius: 0;
+  }
 }
 
 .loading {
-  border-radius: 0 0 6px 6px;
+  border-radius: 0 0 calc(var(--table-border-radius) - 1px) calc(var(--table-border-radius) - 1px);
   padding: 64px 32px;
   background-color: var(--c-bg-elv-3);
 }
@@ -446,4 +532,19 @@ function getCell(key: string, index: number) {
   height: 48px;
   color: var(--c-text-1);
 }
+
+.STable .col-__select {
+  --table-padding-left: 0;
+  --table-col-width: 48px;
+
+  :deep(.input) {
+    align-items: center;
+    padding: 0 16px;
+    min-height: 40px;
+  }
+
+  :deep(.container) {
+    padding: 0;
+  }
+}
 </style>

package/lib/components/STableCell.vue

@@ -3,6 +3,7 @@ import { computed } from 'vue'
 import { type TableCell } from '../composables/Table'
 import STableCellAvatar from './STableCellAvatar.vue'
 import STableCellAvatars from './STableCellAvatars.vue'
+import STableCellCustom from './STableCellCustom.vue'
 import STableCellDay from './STableCellDay.vue'
 import STableCellEmpty from './STableCellEmpty.vue'
 import STableCellNumber from './STableCellNumber.vue'
@@ -98,6 +99,11 @@ const computedCell = computed<TableCell | undefined>(() =>
       :avatars="computedCell.avatars"
       :color="computedCell.color"
     />
+    <STableCellCustom
+      v-else-if="computedCell.type === 'custom'"
+    >
+      <slot />
+    </STableCellCustom>
     <STableCellEmpty
       v-else-if="computedCell.type === 'empty'"
     />

package/lib/components/STableCellCustom.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="STableCellCustom">
+    <slot />
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.STableCellCustom {
+  min-height: 40px;
+}
+</style>

package/lib/components/STableColumn.vue

@@ -125,21 +125,23 @@ function stopDialogPositionListener() {
 <template>
   <div class="STableColumn STableCell" :class="classes" ref="column">
     <div class="container">
-      <p class="label">{{ label }}</p>
-
-      <div v-if="dropdown" class="action" ref="container">
-        <button class="button" :class="{ active: buttonActive }" @click="toggle">
-          <SIcon :icon="IconDotsThree" class="icon" />
-        </button>
-
-        <transition name="fade">
-          <div v-if="isOpen" class="dialog" :style="{ top, left }" ref="dialog">
-            <SDropdown :sections="dropdown" />
-          </div>
-        </transition>
-      </div>
-
-      <div v-if="resizable" class="grip" @mousedown="grip" />
+      <slot>
+        <p class="label">{{ label }}</p>
+
+        <div v-if="dropdown" class="action" ref="container">
+          <button class="button" :class="{ active: buttonActive }" @click="toggle">
+            <SIcon :icon="IconDotsThree" class="icon" />
+          </button>
+
+          <transition name="fade">
+            <div v-if="isOpen" class="dialog" :style="{ top, left }" ref="dialog">
+              <SDropdown :sections="dropdown" />
+            </div>
+          </transition>
+        </div>
+
+        <div v-if="resizable" class="grip" @mousedown="grip" />
+      </slot>
     </div>
   </div>
 </template>
@@ -239,13 +241,12 @@ function stopDialogPositionListener() {
 }
 
 .grip {
-  position: relative;
+  position: absolute;
   right: -8px;
   top: 0px;
   bottom: 0px;
   width: 16px;
   z-index: 1;
-  position: absolute;
   cursor: col-resize;
 
   &::before {

package/lib/components/STableFooter.vue

@@ -57,7 +57,7 @@ const hasNext = computed(() => {
 <style scoped lang="postcss">
 .STableFooter {
   border-top: 1px solid var(--c-divider-2);
-  border-radius: 0 0 6px 6px;
+  border-radius: 0 0 calc(var(--table-border-radius) - 1px) calc(var(--table-border-radius) - 1px);
   padding-right: var(--table-padding-right);
   padding-left: var(--table-padding-left);
   background-color: var(--c-bg-elv-3);

package/lib/components/STableHeader.vue

@@ -1,29 +1,51 @@
 <script setup lang="ts">
-import { type TableMenu } from '../composables/Table'
+import { computed } from 'vue'
+import { type TableAction, type TableMenu } from '../composables/Table'
 import { format } from '../support/Num'
 import { isNullish } from '../support/Utils'
+import STableHeaderActions from './STableHeaderActions.vue'
 import STableHeaderMenu from './STableHeaderMenu.vue'
 
-defineProps<{
+const props = defineProps<{
   total?: number | null
   reset?: boolean
   menu?: TableMenu[] | TableMenu[][]
+  actions?: TableAction[]
   borderless?: boolean
   onReset?(): void
+  selected?: unknown[]
 }>()
+
+const stats = computed(() => {
+  if (isNullish(props.total)) {
+    return null
+  }
+
+  return props.selected?.length
+    ? `${format(props.selected.length)} of ${props.total} selected`
+    : `${format(props.total)} ${props.total > 1 ? 'records' : 'record'}`
+})
+
+// deprecated `reset` prop in favor of `actions`, remove this in next major version
+const resetAction = computed(() => {
+  return props.reset
+    ? [{ label: 'Reset filters', onClick: props.onReset, type: 'info' }]
+    : []
+})
 </script>
 
 <template>
   <div class="STableHeader" :class="{ borderless }">
     <div class="container">
-      <div class="stat">
-        <p v-if="!isNullish(total)" class="total">
-          {{ format(total) }} {{ (total) > 1 ? 'records' : 'record' }}
-        </p>
-        <div v-if="reset" class="reset">
-          <button class="button" @click="onReset">
-            Reset filters
-          </button>
+      <div class="primary">
+        <div v-if="stats" class="stats">
+          {{ stats }}
+        </div>
+        <div v-if="actions?.length" class="actions">
+          <STableHeaderActions :actions="actions" />
+        </div>
+        <div v-else-if="resetAction.length">
+          <STableHeaderActions :actions="resetAction" />
         </div>
       </div>
       <div v-if="menu && menu.length" class="menu">
@@ -35,10 +57,14 @@ defineProps<{
 
 <style scoped lang="postcss">
 .STableHeader {
-  border-radius: 6px 6px 0 0;
+  border-radius: calc(var(--table-border-radius) - 1px) calc(var(--table-border-radius) - 1px) 0 0;
   padding-right: var(--table-padding-right);
   padding-left: var(--table-padding-left);
   background-color: var(--c-bg-soft);
+
+  &.borderless {
+    border-radius: 0;
+  }
 }
 
 .container {
@@ -46,14 +72,15 @@ defineProps<{
   min-height: 48px;
 }
 
-.stat {
+.primary {
   display: flex;
+  gap: 16px;
   flex-grow: 1;
   padding: 0 16px;
+  min-height: 48px;
 }
 
-.total {
-  margin: 0;
+.stats {
   padding: 12px 0;
   line-height: 24px;
   font-size: 12px;
@@ -61,37 +88,6 @@ defineProps<{
   color: var(--c-text-2);
 }
 
-.reset {
-  position: relative;
-
-  .total + & {
-    margin-left: 16px;
-  }
-
-  .total + &::before {
-    display: inline-block;
-    margin-right: 16px;
-    width: 1px;
-    height: 16px;
-    background-color: var(--c-divider-2);
-    content: "";
-    transform: translateY(4px);
-  }
-}
-
-.button {
-  padding: 12px 0;
-  line-height: 24px;
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--c-info-text);
-  transition: color 0.25s;
-
-  &:hover {
-    color: var(--c-info-text-dark);
-  }
-}
-
 .menu {
   flex-shrink: 0;
   padding-right: 8px;

package/lib/components/STableHeaderActionItem.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { type TableAction } from '../composables/Table'
+import SButton from './SButton.vue'
+
+withDefaults(defineProps<TableAction>(), {
+  show: true,
+  mode: 'mute',
+  labelMode: 'neutral'
+})
+</script>
+
+<template>
+  <div v-if="show" class="STableHeaderActionItem">
+    <SButton
+      size="mini"
+      :mode="mode"
+      :label="label"
+      :label-mode="labelMode"
+      @click="onClick"
+    />
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.STableHeaderActionItem {
+  padding: 10px 0;
+}
+</style>

package/lib/components/STableHeaderActions.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { type TableAction } from '../composables/Table'
+import STableHeaderActionItem from './STableHeaderActionItem.vue'
+
+defineProps<{ actions: TableAction[] }>()
+</script>
+
+<template>
+  <div class="STableHeaderActions">
+    <STableHeaderActionItem v-for="action in actions" :key="action.label" v-bind="action" />
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.STableHeaderActions {
+  display: flex;
+  flex-grow: 1;
+  gap: 8px;
+}
+</style>

package/lib/components/STableItem.vue

@@ -25,7 +25,7 @@ const classes = computed(() => [
 <style scoped lang="postcss">
 .STableItem {
   position: var(--table-col-position, relative);
-  left: 0;
+  left: var(--table-col-left, 0);
   z-index: var(--table-col-z-index, auto);
   flex-shrink: 0;
   flex-grow: 1;

package/lib/composables/Dropdown.ts

@@ -1,5 +1,5 @@
-import { type MaybeRef, useElementBounding, useWindowSize } from '@vueuse/core'
-import { type Component, type Ref, ref, unref } from 'vue'
+import { useElementBounding, useWindowSize } from '@vueuse/core'
+import { type Component, type MaybeRef, type Ref, ref, unref } from 'vue'
 
 export type DropdownSection =
   | DropdownSectionMenu

package/lib/composables/Table.ts

@@ -1,16 +1,16 @@
-import { type MaybeRef } from '@vueuse/core'
-import { type Component } from 'vue'
+import { type Component, type MaybeRef } from 'vue'
 import { type Day } from '../support/Day'
 import { type DropdownSection } from './Dropdown'
 
 export interface Table<
-  O extends string = any,
+  O extends string = string,
   R extends Record<string, any> = any,
   SR extends Record<string, any> = any
 > {
   orders: MaybeRef<O[]>
   columns: MaybeRef<TableColumns<O, R, SR>>
   menu?: MaybeRef<TableMenu[] | TableMenu[][]>
+  actions?: MaybeRef<TableAction[]>
   records?: MaybeRef<R[] | null | undefined>
   header?: MaybeRef<boolean | undefined>
   footer?: MaybeRef<boolean | undefined>
@@ -18,12 +18,16 @@ export interface Table<
   total?: MaybeRef<number | null | undefined>
   page?: MaybeRef<number | null | undefined>
   perPage?: MaybeRef<number | null | undefined>
+  /** @deprecated use `actions` instead */
   reset?: MaybeRef<boolean | undefined>
   borderless?: MaybeRef<boolean>
   loading?: MaybeRef<boolean | undefined>
   rowSize?: MaybeRef<number | undefined>
+  borderSize?: MaybeRef<number | undefined>
+  indexField?: keyof R
   onPrev?(): void
   onNext?(): void
+  /** @deprecated use `actions` instead */
   onReset?(): void
 }
 
@@ -57,6 +61,7 @@ export type TableCell =
   | TableCellState
   | TableCellAvatar
   | TableCellAvatars
+  | TableCellCustom
   | TableCellEmpty
   | TableCellComponent
 
@@ -69,6 +74,7 @@ export type TableCellType =
   | 'state'
   | 'avatar'
   | 'avatars'
+  | 'custom'
   | 'empty'
   | 'component'
 
@@ -154,6 +160,10 @@ export interface TableCellAvatarsOption {
   name?: string | null
 }
 
+export interface TableCellCustom extends TableCellBase {
+  type: 'custom'
+}
+
 export interface TableCellEmpty extends TableCellBase {
   type: 'empty'
 }
@@ -176,6 +186,14 @@ export interface TableMenu {
   dropdown: DropdownSection[]
 }
 
+export interface TableAction {
+  show?: boolean
+  mode?: 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
+  label: string
+  labelMode?: 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
+  onClick?(): void
+}
+
 export function useTable<
   O extends string,
   R extends Record<string, any>,

package/lib/composables/Utils.ts

@@ -1,5 +1,4 @@
-import { type MaybeRefOrGetter, resolveUnref } from '@vueuse/core'
-import { type ComputedRef, computed, useSlots } from 'vue'
+import { type ComputedRef, type MaybeRefOrGetter, computed, toValue, useSlots } from 'vue'
 import { isArray, isString } from '../support/Utils'
 
 export type WhenCondition<T> = MaybeRefOrGetter<T>
@@ -21,7 +20,7 @@ export function computedWhen<T, C, D>(
   whenFalse?: D
 ): ComputedRef<T | D> {
   return computed(() => {
-    const c = resolveUnref(condition)
+    const c = toValue(condition)
 
     return c ? fn(c) : whenFalse as D
   })

package/lib/styles/bootstrap.css

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

package/lib/types/shims.d.ts

@@ -1,9 +1,3 @@
 declare module 'v-calendar' {
   export const DatePicker: any
 }
-
-declare module 'vue-virtual-scroller' {
-  export const RecycleScroller: any
-  export const DynamicScroller: any
-  export const DynamicScrollerItem: any
-}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@globalbrain/sefirot",
-  "version": "2.46.0",
-  "packageManager": "pnpm@8.7.4",
+  "version": "2.47.0",
+  "packageManager": "pnpm@8.7.5",
   "description": "Vue Components for Global Brain Design System.",
   "author": "Kia Ishii <ka.ishii@globalbrains.com>",
   "license": "MIT",