@globalbrain/sefirot 4.14.1 → 4.15.0

package/lib/components/SButton.vue

@@ -51,8 +51,8 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits<{
-  (e: 'click'): void
-  (e: 'disabled-click'): void
+  'click': []
+  'disabled-click': []
 }>()
 
 const _leadIcon = computed(() => props.leadIcon ?? props.icon)

package/lib/components/SControlActionBarButton.vue

@@ -12,7 +12,7 @@ defineProps<{
 }>()
 
 defineEmits<{
-  (e: 'click'): void
+  click: []
 }>()
 
 const size = useControlSize()

package/lib/components/SControlActionBarClose.vue

@@ -7,7 +7,7 @@ defineProps<{
 }>()
 
 defineEmits<{
-  (e: 'click'): void
+  click: []
 }>()
 </script>
 

package/lib/components/SControlActionBarCollapse.vue

@@ -11,7 +11,7 @@ const props = defineProps<{
 }>()
 
 defineEmits<{
-  (e: 'click'): void
+  click: []
 }>()
 
 const { isCollapsed, setCollapse, toggleCollapse } = useCardState()

package/lib/components/SControlButton.vue

@@ -20,7 +20,7 @@ defineProps<{
 }>()
 
 defineEmits<{
-  (e: 'click'): void
+  click: []
 }>()
 
 const size = useControlSize()

package/lib/components/SControlInputSearch.vue

@@ -19,10 +19,10 @@ const props = defineProps<{
 }>()
 
 defineEmits<{
-  (e: 'update:model-value', value: string | null): void
-  (e: 'input', value: string | null): void
-  (e: 'blur', value: string | null): void
-  (e: 'enter', value: string | null): void
+  'update:model-value': [value: string | null]
+  'input': [value: string | null]
+  'blur': [value: string | null]
+  'enter': [value: string | null]
 }>()
 
 const { t } = useTrans({

package/lib/components/SControlPagination.vue

@@ -10,8 +10,8 @@ defineProps<{
 }>()
 
 defineEmits<{
-  (e: 'prev'): void
-  (e: 'next'): void
+  prev: []
+  next: []
 }>()
 
 const size = useControlSize()

package/lib/components/SDropdownSectionDateRangeDateFromTo.vue

@@ -10,7 +10,7 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits<{
-  (e: 'change', value: DateFromTo): void
+  change: [value: DateFromTo]
 }>()
 
 const { validation } = useValidation(() => ({

package/lib/components/SDropdownSectionDateRangeYear.vue

@@ -9,7 +9,7 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits<{
-  (e: 'change', value: Year): void
+  change: [value: Year]
 }>()
 
 const { validation } = useValidation(() => ({

package/lib/components/SDropdownSectionDateRangeYearHalf.vue

@@ -10,7 +10,7 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits<{
-  (e: 'change', value: YearHalf): void
+  change: [value: YearHalf]
 }>()
 
 const { validation } = useValidation(() => ({

package/lib/components/SDropdownSectionDateRangeYearQuarter.vue

@@ -10,7 +10,7 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits<{
-  (e: 'change', value: YearQuarter): void
+  change: [value: YearQuarter]
 }>()
 
 const { validation } = useValidation(() => ({

package/lib/components/SErrorBoundary.vue

@@ -3,7 +3,7 @@ import { onErrorCaptured, shallowRef } from 'vue'
 import { useRouter } from 'vue-router'
 
 const emit = defineEmits<{
-  (e: 'error', value: any): void
+  error: [value: any]
 }>()
 
 const error = shallowRef<Error>()

package/lib/components/SInputAddon.vue

@@ -24,7 +24,7 @@ const props = withDefaults(defineProps<{
 })
 
 const emit = defineEmits<{
-  (e: 'click'): void
+  click: []
 }>()
 
 const container = ref<any>(null)

package/lib/components/SInputCheckbox.vue

@@ -29,8 +29,8 @@ const props = withDefaults(defineProps<{
 })
 
 const emit = defineEmits<{
-  (e: 'update:model-value', value: boolean): void
-  (e: 'change', value: boolean): void
+  'update:model-value': [value: boolean]
+  'change': [value: boolean]
 }>()
 
 const classes = computed(() => [

package/lib/components/SInputCheckboxes.vue

@@ -37,8 +37,8 @@ const props = withDefaults(defineProps<{
 })
 
 const emit = defineEmits<{
-  (e: 'update:model-value', value: Value[]): void
-  (e: 'change', value: Value[]): void
+  'update:model-value': [value: Value[]]
+  'change': [value: Value[]]
 }>()
 
 const _value = computed(() => {

package/lib/components/SInputDate.vue

@@ -26,7 +26,7 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits<{
-  (e: 'update:model-value', value: Day | null): void
+  'update:model-value': [value: Day | null]
 }>()
 
 const classes = computed(() => [

package/lib/components/SInputFile.vue

@@ -26,8 +26,8 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits<{
-  (e: 'update:model-value', file: File | File[] | null): void
-  (e: 'change', file: File | File[] | null): void
+  'update:model-value': [file: File | File[] | null]
+  'change': [file: File | File[] | null]
 }>()
 
 const _value = computed(() => {

package/lib/components/SInputFileUploadItem.vue

@@ -32,7 +32,7 @@ const props = defineProps<{
 }>()
 
 defineEmits<{
-  'remove': []
+  remove: []
 }>()
 
 const _file = computed(() => ({

package/lib/components/SInputHMS.vue

@@ -41,8 +41,8 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits<{
-  (e: 'update:model-value', value: Value): void
-  (e: 'change', value: Value): void
+  'update:model-value': [value: Value]
+  'change': [value: Value]
 }>()
 
 const _value = computed(() => {

package/lib/components/SInputImage.vue

@@ -42,8 +42,8 @@ const props = withDefaults(defineProps<{
 })
 
 const emit = defineEmits<{
-  (e: 'update:model-value', value: File | null): void
-  (e: 'change', value: File | null): void
+  'update:model-value': [file: File | null]
+  'change': [file: File | null]
 }>()
 
 const fileInput = ref<HTMLInputElement | null>(null)

package/lib/components/SInputRadio.vue

@@ -24,8 +24,8 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits<{
-  (e: 'update:model-value', value: boolean): void
-  (e: 'change', value: boolean): void
+  'update:model-value': [value: boolean]
+  'change': [value: boolean]
 }>()
 
 const classes = computed(() => [

package/lib/components/SInputRadios.vue

@@ -47,8 +47,8 @@ const props = withDefaults(defineProps<{
 })
 
 const emit = defineEmits<{
-  (e: 'update:model-value', value: ValueType | NullValue): void
-  (e: 'change', value: ValueType | NullValue): void
+  'update:model-value': [value: ValueType | NullValue]
+  'change': [value: ValueType | NullValue]
 }>()
 
 const _value = computed(() => {

package/lib/components/SInputSegments.vue

@@ -35,8 +35,8 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits<{
-  (e: 'update:model-value', value: T): void
-  (e: 'change', value: T): void
+  'update:model-value': [value: T]
+  'change': [value: T]
 }>()
 
 const _value = computed(() => {

package/lib/components/SInputSegmentsOption.vue

@@ -12,7 +12,7 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits<{
-  (e: 'click'): void
+  click: []
 }>()
 
 function onClick() {

package/lib/components/SInputSelect.vue

@@ -38,8 +38,8 @@ const props = withDefaults(defineProps<{
 })
 
 const emit = defineEmits<{
-  (e: 'update:model-value', value: Value): void
-  (e: 'change', value: Value): void
+  'update:model-value': [value: Value]
+  'change': [value: Value]
 }>()
 
 const _value = computed(() => {

package/lib/components/SInputSwitch.vue

@@ -30,8 +30,8 @@ const props = withDefaults(defineProps<{
 })
 
 const emit = defineEmits<{
-  (e: 'update:model-value', value: boolean): void
-  (e: 'change', value: boolean): void
+  'update:model-value': [value: boolean]
+  'change': [value: boolean]
 }>()
 
 const _value = computed(() => {

package/lib/components/SInputSwitches.vue

@@ -30,7 +30,7 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits<{
-  (e: 'update:modelValue', value: any[]): void
+  'update:modelValue': [value: any[]]
 }>()
 
 const classes = computed(() => [

package/lib/components/SInputYMD.vue

@@ -42,8 +42,8 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits<{
-  (e: 'update:model-value', value: Value): void
-  (e: 'change', value: Value): void
+  'update:model-value': [value: Value]
+  'change': [value: Value]
 }>()
 
 const _value = computed(() => {

package/lib/components/SMarkdown.vue

@@ -10,7 +10,7 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits<{
-  (e: 'clicked', payload: LinkSubscriberPayload): void
+  clicked: [payload: LinkSubscriberPayload]
 }>()
 
 const container = shallowRef<Element | null>(null)

package/lib/components/SModal.vue

@@ -11,7 +11,7 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const emit = defineEmits<{
-  (e: 'close'): void
+  close: []
 }>()
 
 const el = ref<any>(null)

package/lib/components/SPagination.vue

@@ -21,8 +21,8 @@ const props = withDefaults(defineProps<{
 })
 
 const emit = defineEmits<{
-  (e: 'prev'): void
-  (e: 'next'): void
+  prev: []
+  next: []
 }>()
 
 const { t } = useTrans({

package/lib/components/SPill.vue

@@ -15,7 +15,7 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits<{
-  (e: 'click'): void
+  click: []
 }>()
 
 const classes = computed(() => [

package/lib/components/STable.vue

@@ -1,18 +1,10 @@
-<script setup lang="ts" generic="S extends any[] | any | undefined = undefined">
+<script setup lang="ts" generic="S extends any = undefined">
 import { useVirtualizer } from '@tanstack/vue-virtual'
 import { useResizeObserver } from '@vueuse/core'
 import xor from 'lodash-es/xor'
-import {
-  computed,
-  nextTick,
-  reactive,
-  ref,
-  shallowRef,
-  toValue,
-  unref,
-  watch
-} from 'vue'
+import { computed, nextTick, reactive, ref, shallowRef, toValue, unref, watch } from 'vue'
 import { type Table } from '../composables/Table'
+import { smartComputed } from '../support/Reactivity'
 import { getTextWidth } from '../support/Text'
 import SInputCheckbox from './SInputCheckbox.vue'
 import SInputRadio from './SInputRadio.vue'
@@ -23,28 +15,24 @@ import STableFooter from './STableFooter.vue'
 import STableHeader from './STableHeader.vue'
 import STableItem from './STableItem.vue'
 
-const props = defineProps<{
-  options: Table
-  selected?: S
-}>()
-
-const emit = defineEmits<{
-  (e: 'update:selected', value: S): void
-}>()
+const props = defineProps<{ options: Table }>()
+const selected = defineModel<S>('selected')
 
 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 ordersToShow = computed(() => {
+const ordersToShow = smartComputed(() => {
   const orders = unref(props.options.orders).filter((key) => {
     const show = unref(props.options.columns)[key]?.show
     return toValue(show) !== false
   })
-  if (props.selected === undefined) {
+
+  if (selected.value === undefined) {
     return orders
   }
+
   return ['__select', ...orders]
 })
 
@@ -126,51 +114,45 @@ const recordsWithSummary = computed(() => {
   return summary ? [...records, summary] : records
 })
 
-const indexes = computed(() => {
-  if (props.selected === undefined) {
+const indexes = smartComputed(() => {
+  if (selected.value === undefined) {
     return []
   }
+
   const records = unref(props.options.records) ?? []
   const indexField = unref(props.options.indexField)
 
-  return records.map((record, i) => indexField ? record[indexField] : i)
+  return records.map((record, i) => (indexField ? record[indexField] : i))
 })
 
-const selectedIndexes = reactive(new Set(Array.isArray(props.selected) ? props.selected : []))
-
 const control = computed({
   get() {
-    if (Array.isArray(props.selected)) {
-      return props.selected.length === indexes.value.length
-        ? true
-        : props.selected.length ? 'indeterminate' : false
+    if (Array.isArray(selected.value)) {
+      if (!selected.value.length) {
+        return false
+      }
+
+      if (selected.value.length === indexes.value.length) {
+        return true
+      }
     }
 
-    return 'indeterminate' // doesn't matter
+    return 'indeterminate'
   },
 
   set(newValue) {
     if (newValue === false) {
-      selectedIndexes.clear()
+      updateSelected([])
     } else if (newValue === true) {
-      indexes.value.forEach((index) => {
-        selectedIndexes.add(index)
-      })
+      updateSelected(indexes.value)
     }
   }
 })
 
 watch(indexes, (newValue, oldValue) => {
-  if (Array.isArray(props.selected)) {
-    xor(newValue, oldValue).forEach((index) => {
-      selectedIndexes.delete(index)
-    })
-  }
-})
-
-watch(selectedIndexes, (newValue) => {
-  if (Array.isArray(props.selected)) {
-    updateSelected(Array.from(newValue))
+  if (Array.isArray(selected.value)) {
+    const removed = xor(newValue, oldValue)
+    updateSelected(selected.value.filter((item) => !removed.includes(item)))
   }
 })
 
@@ -202,6 +184,21 @@ watch(() => unref(props.options.records), () => {
   isSyncingBody = false
 }, { flush: 'post' })
 
+const frozenColumns = smartComputed(() => {
+  const columns = unref(props.options.columns)
+  const keys = Object.keys(columns).filter((key) => columns[key].freeze)
+  if (selected.value !== undefined && keys.length) {
+    keys.unshift('__select')
+  }
+  return keys.filter((key) => ordersToShow.value.includes(key))
+})
+
+const frozenColWidths = smartComputed(() => {
+  // eslint-disable-next-line no-void
+  void blockWidth.value
+  return frozenColumns.value.map((key) => getColWidth(key))
+})
+
 useResizeObserver(block, ([entry]) => {
   blockWidth.value = entry.contentRect.width
 })
@@ -256,10 +253,9 @@ watch(actionsColumnWidth, (newValue) => {
 
 function stopObserving() {
   const orders = ordersToShow.value
-  const lastOrder
-    = orders[orders.length - 1] === 'actions'
-      ? orders[orders.length - 2]
-      : orders[orders.length - 1]
+  const lastOrder = orders[orders.length - 1] === 'actions'
+    ? orders[orders.length - 2]
+    : orders[orders.length - 1]
   colWidths[lastOrder] = 'auto'
   resizeObserver.stop()
 }
@@ -284,10 +280,7 @@ async function handleResize() {
   }
 
   const availableFill = row.value.getBoundingClientRect().width - totalWidth
-  updateColWidth(
-    nameOfColToGrow.value,
-    `calc(${availableFill}px + ${initialWidth})`
-  )
+  updateColWidth(nameOfColToGrow.value, `calc(${availableFill}px + ${initialWidth})`)
 }
 
 function syncHeadScroll() {
@@ -341,16 +334,50 @@ function getCell(key: string, index: number) {
     return { type: 'custom' }
   }
   const col = unref(props.options.columns)[key]
-  return (isSummary(index) && col?.summaryCell) ? col?.summaryCell : col?.cell
+  return isSummary(index) && col?.summaryCell ? col?.summaryCell : col?.cell
 }
 
-function updateSelected(selected: any) {
-  if (Array.isArray(props.selected)) {
-    if (xor(selected, props.selected ?? []).length) {
-      emit('update:selected', selected)
-    }
+function updateSelected(items: any) {
+  if (Array.isArray(selected.value)) {
+    selected.value = [...items] as any
   } else {
-    emit('update:selected', selected)
+    selected.value = items
+  }
+}
+
+function addSelected(item: any) {
+  updateSelected([...(selected.value as any), item])
+}
+
+function removeSelected(item: any) {
+  updateSelected((selected.value as any[]).filter((i) => i !== item))
+}
+
+function getColWidth(key: string) {
+  if (key === '__select') {
+    return '48px + var(--table-padding-left, 0)'
+  }
+  const adjustedWidth = colWidths[key]
+  if (adjustedWidth && adjustedWidth !== 'auto') {
+    return adjustedWidth
+  }
+  const el = row.value?.children?.[ordersToShow.value.indexOf(key)]
+  if (!el) {
+    return '0px'
+  }
+  return `${el.getBoundingClientRect().width}px`
+}
+
+function getStyles(key: string) {
+  const length = frozenColumns.value.length
+  if (length === 0) { return }
+  const i = frozenColumns.value.indexOf(key)
+  if (i < 0) { return }
+  const widthSum = frozenColWidths.value.slice(0, i).join(' + ')
+  return {
+    '--table-col-position': 'sticky',
+    '--table-col-z-index': length - i, // left to right decreasing
+    '--table-col-left': widthSum ? `calc(${widthSum})` : '0px'
   }
 }
 </script>
@@ -369,11 +396,7 @@ function updateSelected(selected: any) {
       />
 
       <div class="table" role="grid">
-        <div
-          class="container head"
-          ref="head"
-          @scroll="syncHeadScroll"
-        >
+        <div class="container head" ref="head" @scroll="syncHeadScroll">
           <div class="block" ref="block">
             <div class="row" ref="row">
               <STableItem
@@ -381,6 +404,7 @@ function updateSelected(selected: any) {
                 :key="key"
                 :name="key"
                 :class-name="unref(options.columns)[key]?.className"
+                :style="getStyles(key)"
                 :width="colWidths[key]"
               >
                 <STableColumn
@@ -421,10 +445,7 @@ function updateSelected(selected: any) {
               position: 'relative'
             }"
           >
-            <div
-              v-for="{ index, key: __key, size, start } in virtualItems"
-              :key="__key"
-            >
+            <div v-for="{ index, key: __key, size, start } in virtualItems" :key="__key">
               <div
                 class="row"
                 :class="isSummaryOrLastClass(index)"
@@ -442,6 +463,7 @@ function updateSelected(selected: any) {
                   :key="key"
                   :name="key"
                   :class-name="unref(options.columns)[key]?.className"
+                  :style="getStyles(key)"
                   :width="colWidths[key]"
                 >
                   <STableCell
@@ -456,14 +478,14 @@ function updateSelected(selected: any) {
                     <template v-if="key === '__select' && !isSummary(index)">
                       <SInputCheckbox
                         v-if="Array.isArray(selected)"
-                        :model-value="selectedIndexes.has(indexes[index])"
-                        @update:model-value="c => selectedIndexes[c ? 'add' : 'delete'](indexes[index])"
+                        :model-value="selected.includes(indexes[index])"
+                        @update:model-value="(c) => (c ? addSelected : removeSelected)(indexes[index])"
                         :disabled="options.disableSelection?.(recordsWithSummary[index]) === true"
                       />
                       <SInputRadio
                         v-else
                         :model-value="selected === indexes[index]"
-                        @update:model-value="c => updateSelected(c ? indexes[index] : null)"
+                        @update:model-value="(c) => updateSelected(c ? indexes[index] : null)"
                         :disabled="options.disableSelection?.(recordsWithSummary[index]) === true"
                       />
                     </template>
@@ -609,8 +631,7 @@ function updateSelected(selected: any) {
 }
 
 .STable .col-__select {
-  --table-padding-left: 0;
-  --table-col-width: 48px;
+  --table-col-width: calc(48px + var(--table-padding-left, 0));
 
   :deep(.input) {
     align-items: center;

package/lib/components/STableColumn.vue

@@ -17,7 +17,7 @@ const props = withDefaults(defineProps<{
 })
 
 const emit = defineEmits<{
-  (e: 'resize', value: string): void
+  resize: [value: string]
 }>()
 
 const { container, isOpen, toggle } = useFlyout()

package/lib/composables/Table.ts

@@ -44,6 +44,7 @@ export interface TableColumn<V, R, SV, SR> {
   label?: string
   className?: string
   dropdown?: DropdownSection[]
+  freeze?: boolean
   grow?: boolean
   resizable?: boolean
   cell?: TableCell<V, R> | TableColumnCellFn<V, R>

package/lib/support/Reactivity.ts

@@ -0,0 +1,11 @@
+import { type ComputedRef, computed } from 'vue'
+
+export function smartComputed<T>(
+  getter: () => T,
+  comparator = (oldValue: T, newValue: T) => JSON.stringify(oldValue) === JSON.stringify(newValue)
+): ComputedRef<T> {
+  return computed((oldValue) => {
+    const newValue = getter()
+    return oldValue === undefined || !comparator(oldValue, newValue) ? newValue : oldValue
+  })
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@globalbrain/sefirot",
   "type": "module",
-  "version": "4.14.1",
+  "version": "4.15.0",
   "packageManager": "pnpm@9.15.4",
   "description": "Vue Components for Global Brain Design System.",
   "author": "Kia Ishii <ka.ishii@globalbrains.com>",