@globalbrain/sefirot 4.30.1 → 4.32.0

package/lib/components/STable.vue

@@ -22,6 +22,7 @@ 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 table = shallowRef<HTMLElement | null>(null)
 
 const ordersToShow = smartComputed(() => {
   const orders = unref(props.options.orders).filter((key) => {
@@ -36,7 +37,7 @@ const ordersToShow = smartComputed(() => {
   return ['__select', ...orders]
 })
 
-watch(() => ordersToShow.value, handleResize)
+watch(() => ordersToShow.value, onResize)
 
 const colToGrowAdjusted = ref(false)
 
@@ -61,6 +62,12 @@ const cellOfColToGrow = computed(() => {
 const colWidths = reactive<Record<string, string>>({})
 const blockWidth = ref<number | undefined>()
 
+const resizeState = ref<{
+  columnName: string
+  startX: number
+  indicatorX: number
+} | null>(null)
+
 watch(() => unref(props.options.columns), (columns) => {
   Object.keys(columns).forEach((key) => {
     const width = columns[key]?.width
@@ -77,7 +84,6 @@ const showHeader = computed(() => {
 
   return (
     unref(props.options.total) != null
-    || !!unref(props.options.reset)
     || !!unref(props.options.menu)
   )
 })
@@ -201,7 +207,6 @@ const frozenColumns = smartComputed(() => {
 })
 
 const frozenColWidths = smartComputed(() => {
-  // eslint-disable-next-line no-void
   void blockWidth.value
   return frozenColumns.value.map((key) => getColWidth(key))
 })
@@ -210,7 +215,7 @@ useResizeObserver(block, ([entry]) => {
   blockWidth.value = entry.contentRect.width
 })
 
-const resizeObserver = useResizeObserver(head, handleResize)
+const resizeObserver = useResizeObserver(head, onResize)
 
 const font = typeof document !== 'undefined'
   ? `500 12px ${getComputedStyle(document.body).fontFamily}`
@@ -267,7 +272,7 @@ function stopObserving() {
   resizeObserver.stop()
 }
 
-async function handleResize() {
+async function onResize() {
   if (colToGrow.value < 0 || !cellOfColToGrow.value || !row.value) {
     stopObserving()
     return
@@ -387,6 +392,29 @@ function getStyles(key: string) {
     '--table-col-left': widthSum ? `calc(${widthSum})` : '0px'
   }
 }
+
+function onResizeStart(data: { columnName: string; startX: number; initialX: number }) {
+  const tableRect = table.value?.getBoundingClientRect()
+  const tableLeft = tableRect?.left ?? 0
+  const indicatorX = data.initialX - tableLeft
+
+  resizeState.value = {
+    columnName: data.columnName,
+    startX: indicatorX,
+    indicatorX
+  }
+}
+
+function onResizeMove(data: { deltaX: number }) {
+  if (resizeState.value) {
+    resizeState.value.indicatorX = resizeState.value.startX + data.deltaX
+  }
+}
+
+function onResizeEnd(data: { columnName: string; finalWidth: string }) {
+  updateColWidth(data.columnName, data.finalWidth, true)
+  resizeState.value = null
+}
 </script>
 
 <template>
@@ -395,17 +423,21 @@ function getStyles(key: string) {
       <STableHeader
         v-if="showHeader"
         :total="unref(options.total)"
-        :reset="unref(options.reset)"
         :menu="unref(options.menu)"
         :borderless="unref(options.borderless)"
-        :on-reset="options.onReset"
         :selected="Array.isArray(selected) ? selected : undefined"
       />
 
-      <div class="table" role="grid">
-        <div class="container head" ref="head" @scroll="syncHeadScroll">
-          <div class="block" ref="block">
-            <div class="row" ref="row">
+      <div ref="table" class="table" role="grid">
+        <div
+          v-if="resizeState"
+          class="resize-indicator"
+          :style="{ left: `${resizeState.indicatorX}px` }"
+        />
+
+        <div ref="head" class="container head" @scroll="syncHeadScroll">
+          <div ref="block" class="block">
+            <div ref="row" class="row">
               <STableItem
                 v-for="key in ordersToShow"
                 :key
@@ -421,7 +453,9 @@ function getStyles(key: string) {
                   :dropdown="unref(options.columns)[key]?.dropdown"
                   :has-header="showHeader"
                   :resizable="unref(options.columns)[key]?.resizable"
-                  @resize="(value) => updateColWidth(key, value, true)"
+                  @resize-start="onResizeStart"
+                  @resize-move="onResizeMove"
+                  @resize-end="onResizeEnd"
                 >
                   <SInputCheckbox
                     v-if="
@@ -440,8 +474,8 @@ function getStyles(key: string) {
 
         <div
           v-if="!unref(options.loading) && unref(options.records)?.length"
-          class="container body"
           ref="body"
+          class="container body"
           @scroll="syncBodyScroll"
         >
           <div
@@ -452,10 +486,10 @@ function getStyles(key: string) {
               position: 'relative'
             }"
           >
-            <div v-for="{ index, key: __key, size, start } in virtualItems" :key="__key">
+            <div v-for="{ index: i, key: __key, size, start } in virtualItems" :key="__key">
               <div
                 class="row"
-                :class="isSummaryOrLastClass(index)"
+                :class="isSummaryOrLastClass(i)"
                 :style="{
                   position: 'absolute',
                   top: 0,
@@ -475,25 +509,24 @@ function getStyles(key: string) {
                 >
                   <STableCell
                     :name="key"
-                    :class="isSummary(index) && 'summary'"
+                    :class="isSummary(i) && 'summary'"
                     :class-name="unref(options.columns)[key]?.className"
-                    :cell="getCell(key, index)"
-                    :value="recordsWithSummary[index][key]"
-                    :record="recordsWithSummary[index]"
-                    :records="unref(options.records)!"
+                    :cell="getCell(key, i)"
+                    :value="recordsWithSummary[i][key]"
+                    :record="recordsWithSummary[i]"
                   >
-                    <template v-if="key === '__select' && !isSummary(index)">
+                    <template v-if="key === '__select' && !isSummary(i)">
                       <SInputCheckbox
                         v-if="Array.isArray(selected)"
-                        :model-value="selected.includes(indexes[index])"
-                        @update:model-value="(c) => (c ? addSelected : removeSelected)(indexes[index])"
-                        :disabled="options.disableSelection?.(recordsWithSummary[index]) === true"
+                        :model-value="selected.includes(indexes[i])"
+                        :disabled="options.disableSelection?.(recordsWithSummary[i]) === true"
+                        @update:model-value="(c) => (c ? addSelected : removeSelected)(indexes[i])"
                       />
                       <SInputRadio
                         v-else
-                        :model-value="selected === indexes[index]"
-                        @update:model-value="(c) => updateSelected(c ? indexes[index] : null)"
-                        :disabled="options.disableSelection?.(recordsWithSummary[index]) === true"
+                        :model-value="selected === indexes[i]"
+                        :disabled="options.disableSelection?.(recordsWithSummary[i]) === true"
+                        @update:model-value="(c) => updateSelected(c ? indexes[i] : null)"
                       />
                     </template>
                   </STableCell>
@@ -637,6 +670,16 @@ function getStyles(key: string) {
   color: var(--c-text-1);
 }
 
+.resize-indicator {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 1px;
+  background-color: var(--c-border-info-1);
+  z-index: 200;
+  pointer-events: none;
+}
+
 .STable .col-__select {
   --table-col-width: calc(48px + var(--table-padding-left));
 

package/lib/components/STableCell.vue

@@ -21,13 +21,10 @@ const props = defineProps<{
   cell?: any
   value: any
   record: any
-  records: Record<string, any>
 }>()
 
 const computedCell = computed<TableCell | undefined>(() =>
-  typeof props.cell === 'function'
-    ? props.cell(props.value, props.record)
-    : props.cell
+  typeof props.cell === 'function' ? props.cell(props.value, props.record) : props.cell
 )
 </script>
 
@@ -39,7 +36,7 @@ const computedCell = computed<TableCell | undefined>(() =>
       :record
       :align="computedCell?.align"
       :icon="computedCell?.icon"
-      :text="computedCell?.value"
+      :text="computedCell?.value ?? value"
       :link="computedCell?.link"
       :color="computedCell?.color"
       :icon-color="computedCell?.iconColor"
@@ -51,7 +48,7 @@ const computedCell = computed<TableCell | undefined>(() =>
       :record
       :align="computedCell.align"
       :icon="computedCell.icon"
-      :number="computedCell.value"
+      :number="computedCell.value ?? value"
       :separator="computedCell.separator"
       :link="computedCell.link"
       :color="computedCell.color"
@@ -60,47 +57,47 @@ const computedCell = computed<TableCell | undefined>(() =>
     />
     <STableCellPath
       v-else-if="computedCell.type === 'path'"
-      :segments="computedCell.segments"
+      :segments="computedCell.segments ?? value"
     />
     <STableCellDay
       v-else-if="computedCell.type === 'day'"
       :align="computedCell.align"
-      :day="computedCell.value"
+      :day="computedCell.value ?? value"
       :format="computedCell.format"
       :color="computedCell.color"
     />
     <STableCellPill
       v-else-if="computedCell.type === 'pill'"
-      :pill="computedCell.value"
+      :pill="computedCell.value ?? value"
       :color="computedCell.color"
     />
     <STableCellPills
       v-else-if="computedCell.type === 'pills'"
-      :pills="computedCell.pills"
+      :pills="computedCell.pills ?? value"
     />
     <STableCellState
       v-else-if="computedCell.type === 'state'"
-      :state="computedCell.label"
+      :state="computedCell.label ?? value"
       :mode="computedCell.mode"
     />
     <STableCellIndicator
       v-else-if="computedCell.type === 'indicator'"
-      :state="computedCell.state"
+      :state="computedCell.state ?? value"
       :label="computedCell.label"
     />
     <STableCellAvatar
       v-else-if="computedCell.type === 'avatar'"
       :value
       :record
-      :image="computedCell.image"
-      :name="computedCell.name"
+      :image="computedCell.image ?? (value as string).includes('/') ? value : null"
+      :name="computedCell.name ?? (value as string).includes('/') ? null : value"
       :link="computedCell.link"
       :color="computedCell.color"
       :on-click="computedCell.onClick"
     />
     <STableCellAvatars
       v-else-if="computedCell.type === 'avatars'"
-      :avatars="computedCell.avatars"
+      :avatars="computedCell.avatars ?? value"
       :color="computedCell.color"
       :avatar-count="computedCell.avatarCount"
       :name-count="computedCell.nameCount"
@@ -109,7 +106,7 @@ const computedCell = computed<TableCell | undefined>(() =>
     <STableCellActions
       v-else-if="computedCell.type === 'actions'"
       :record
-      :actions="computedCell.actions"
+      :actions="computedCell.actions ?? value"
     />
     <STableCellCustom
       v-else-if="computedCell.type === 'custom'"
@@ -120,8 +117,8 @@ const computedCell = computed<TableCell | undefined>(() =>
       v-else-if="computedCell.type === 'empty'"
     />
     <component
-      v-else-if="computedCell.type === 'component'"
       :is="computedCell.component"
+      v-else-if="computedCell.type === 'component'"
       :value
       :record
       v-bind="computedCell.props"

package/lib/components/STableCellAvatars.vue

@@ -48,7 +48,7 @@ const displayNames = computed(() => {
   <div class="STableCellAvatars" :class="[color]">
     <div class="container">
       <div v-if="displayAvatars.length" class="avatars">
-        <div v-for="(avatar, index) in displayAvatars" :key="index" class="avatar">
+        <div v-for="(avatar, i) in displayAvatars" :key="i" class="avatar">
           <div class="avatar-box">
             <SAvatar size="mini" :avatar="avatar.image" :name="avatar.name" :tooltip />
           </div>

package/lib/components/STableCellDay.vue

@@ -1,19 +1,26 @@
 <script setup lang="ts">
-import { type Day } from '../support/Day'
+import { computed } from 'vue'
+import { type Day, day } from '../support/Day'
 
-defineProps<{
+const props = defineProps<{
   day?: Day | null
   align?: 'left' | 'center' | 'right'
   format?: string
   color?: 'neutral' | 'soft' | 'mute'
 }>()
+
+const formatted = computed(() => {
+  if (props.day) {
+    return day(props.day).format(props.format ?? 'YYYY-MM-DD HH:mm:ss')
+  }
+
+  return null
+})
 </script>
 
 <template>
   <div class="STableCellDay" :class="[align ?? 'left', color ?? 'neutral']">
-    <div v-if="day" class="value">
-      {{ day.format(format ?? 'YYYY-MM-DD HH:mm:ss') }}
-    </div>
+    <div v-if="formatted" class="value">{{ formatted }}</div>
   </div>
 </template>
 

package/lib/components/STableCellNumber.vue

@@ -17,7 +17,6 @@ const props = defineProps<{
   onClick?(value: any, record: any): void
 }>()
 
-const _value = computed(() => props.number ?? props.value)
 const _color = computed(() => props.color ?? 'neutral')
 const _iconColor = computed(() => props.iconColor ?? _color.value)
 
@@ -31,7 +30,7 @@ const classes = computed(() => [
 <template>
   <div class="STableCellNumber" :class="classes">
     <SLink
-      v-if="_value != null"
+      v-if="number != null"
       class="container"
       :href="link"
       :role="onClick ? 'button' : null"
@@ -41,7 +40,7 @@ const classes = computed(() => [
         <component :is="icon" class="svg" />
       </div>
       <div class="value" :class="_color">
-        {{ separator ? format(_value) : _value }}
+        {{ separator ? format(number) : number }}
       </div>
     </SLink>
   </div>

package/lib/components/STableCellPath.vue

@@ -16,8 +16,8 @@ function classes(item: TableCellPathSegment) {
 
 <template>
   <div class="STableCellPath">
-    <template v-for="segment, index in segments" :key="index">
-      <div v-if="index > 0" class="divider">/</div>
+    <template v-for="(segment, i) in segments" :key="i">
+      <div v-if="i > 0" class="divider">/</div>
       <SLink
         class="text"
         :class="classes(segment)"

package/lib/components/STableCellText.vue

@@ -15,7 +15,6 @@ const props = defineProps<{
   onClick?(value: any, record: any): void
 }>()
 
-const _value = computed(() => props.text ?? props.value)
 const _color = computed(() => props.color ?? 'neutral')
 const _iconColor = computed(() => props.iconColor ?? _color.value)
 
@@ -29,7 +28,7 @@ const classes = computed(() => [
 <template>
   <div class="STableCellText" :class="classes">
     <SLink
-      v-if="_value != null"
+      v-if="text != null"
       class="container"
       :href="link"
       :role="onClick ? 'button' : null"
@@ -39,7 +38,7 @@ const classes = computed(() => [
         <component :is="icon" class="svg" />
       </div>
       <div class="text" :class="_color">
-        {{ _value }}
+        {{ text }}
       </div>
     </SLink>
   </div>

package/lib/components/STableColumn.vue

@@ -17,13 +17,16 @@ const props = withDefaults(defineProps<{
 })
 
 const emit = defineEmits<{
-  resize: [value: string]
+  'resize-start': [data: { columnName: string; startX: number; initialX: number }]
+  'resize-move': [data: { deltaX: number }]
+  'resize-end': [data: { columnName: string; finalWidth: string }]
 }>()
 
 const { container, isOpen, toggle } = useFlyout()
 
 let startWidth = 0
 let startPoint = 0
+let originalUserSelect = ''; let originalPointerEvents = ''
 
 const column = ref<HTMLElement | null>(null)
 const dialog = ref<HTMLElement | null>(null)
@@ -67,24 +70,43 @@ watch(isOpen, (value) => {
   value ? adjustDialogPosition() : stopDialogPositionListener()
 })
 
-function grip(e: any) {
+function grip(e: MouseEvent) {
   startWidth = column.value?.offsetWidth ?? 0
   startPoint = e.pageX
 
+  emit('resize-start', {
+    columnName: props.name,
+    startX: e.pageX,
+    initialX: e.pageX
+  })
+
+  originalUserSelect = document.body.style.userSelect
+  originalPointerEvents = document.body.style.pointerEvents
+  document.body.style.userSelect = 'none'
+  document.body.style.pointerEvents = 'none'
   document.addEventListener('mousemove', resize)
   document.addEventListener('mouseup', stopResizeListener)
 }
 
 function resize(e: MouseEvent) {
-  const movedWidth = e.pageX - startPoint
-  const resized = startWidth + movedWidth
-
-  emit('resize', resized > -1 ? `${resized}px` : 'var(--table-col-width)')
+  const deltaX = e.pageX - startPoint
+  emit('resize-move', { deltaX })
 }
 
-function stopResizeListener() {
+function stopResizeListener(e: MouseEvent) {
   document.removeEventListener('mousemove', resize)
   document.removeEventListener('mouseup', stopResizeListener)
+  document.body.style.userSelect = originalUserSelect
+  document.body.style.pointerEvents = originalPointerEvents
+
+  const movedWidth = e.pageX - startPoint
+  const resized = startWidth + movedWidth
+  const finalWidth = resized > -1 ? `${resized}px` : 'var(--table-col-width)'
+
+  emit('resize-end', {
+    columnName: props.name,
+    finalWidth
+  })
 }
 
 async function adjustDialogPosition() {
@@ -99,14 +121,13 @@ async function adjustDialogPosition() {
   await nextTick()
 
   const dialogWidth = dialog.value?.offsetWidth ?? 0
-  const position = (window.innerWidth - rect.right) > dialogWidth ? 'right' : 'left'
+  const position = window.innerWidth - rect.right > dialogWidth ? 'right' : 'left'
 
   top.value = `${rect.top + rect.height - 8}px`
-  left.value
-    = `${Math.max(
-      16,
-      position === 'right' ? rect.left - 4 : rect.right - dialogWidth - 4
-    )}px`
+  left.value = `${Math.max(
+    16,
+    position === 'right' ? rect.left - 4 : rect.right - dialogWidth - 4
+  )}px`
 }
 
 function startDialogPositionListener() {
@@ -121,24 +142,25 @@ function stopDialogPositionListener() {
 </script>
 
 <template>
-  <div class="STableColumn STableCell" :class="classes" ref="column">
+  <div ref="column" class="STableColumn STableCell" :class="classes">
     <div class="container">
       <slot>
         <p class="label">{{ label }}</p>
 
-        <div v-if="dropdown" class="action" ref="container">
+        <div v-if="dropdown" ref="container" class="action">
           <button class="button" :class="{ active: buttonActive }" @click="toggle">
             <IconDotsThree class="icon" />
           </button>
 
           <transition name="fade">
-            <div v-if="isOpen" class="dialog" :style="{ top, left }" ref="dialog">
+            <div v-if="isOpen" ref="dialog" class="dialog" :style="{ top, left }">
               <SDropdown :sections="dropdown" />
             </div>
           </transition>
         </div>
 
         <div v-if="resizable" class="grip" @mousedown="grip" />
+        <div v-if="resizable" class="resize-indicator" />
       </slot>
     </div>
   </div>

package/lib/components/STableFooter.vue

@@ -42,10 +42,18 @@ const hasNext = computed(() => {
       <p class="info">{{ format(from) }}–{{ format(to) }} of {{ format(_total) }}</p>
 
       <div v-if="onPrev && onNext" class="actions">
-        <button class="button prev" :class="{ active: hasPrev }" @click="() => hasPrev && onPrev?.()">
+        <button
+          class="button prev"
+          :class="{ active: hasPrev }"
+          @click="() => hasPrev && onPrev?.()"
+        >
           <IconCaretLeft class="icon" />
         </button>
-        <button class="button next" :class="{ active: hasNext }" @click="() => hasNext && onNext?.()">
+        <button
+          class="button next"
+          :class="{ active: hasNext }"
+          @click="() => hasNext && onNext?.()"
+        >
           <IconCaretRight class="icon" />
         </button>
       </div>

package/lib/components/STableHeader.vue

@@ -8,7 +8,6 @@ const props = defineProps<{
   total?: number | null
   menu?: TableMenu[] | TableMenu[][]
   borderless?: boolean
-  onReset?(): void
   selected?: unknown[]
 }>()
 

package/lib/components/STableHeaderMenu.vue

@@ -9,15 +9,15 @@ const props = defineProps<{
 
 const normalizedMenu = computed(() => {
   return Array.isArray(props.menu[0])
-    ? props.menu as TableMenu[][]
-    : [props.menu] as TableMenu[][]
+    ? (props.menu as TableMenu[][])
+    : ([props.menu] as TableMenu[][])
 })
 </script>
 
 <template>
   <div class="STableHeaderMenu">
-    <div v-for="items, index in normalizedMenu" :key="index" class="group">
-      <div v-if="index > 0" class="divider" />
+    <div v-for="(items, i) in normalizedMenu" :key="i" class="group">
+      <div v-if="i > 0" class="divider" />
       <div v-for="item in items" :key="item.label" class="item">
         <STableHeaderMenuItem
           :label="item.label"

package/lib/components/STableHeaderMenuItem.vue

@@ -14,7 +14,7 @@ const { container, isOpen, toggle } = useFlyout()
 </script>
 
 <template>
-  <div class="STableHeaderMenuItem" ref="container">
+  <div ref="container" class="STableHeaderMenuItem">
     <button class="button" :class="[state]" @click="toggle">
       <span class="label">{{ label }}</span>
       <span v-if="state !== 'indicate'" class="caret">

package/lib/components/STooltip.vue

@@ -97,14 +97,14 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <component ref="root" :is="tag" class="STooltip" :class="rootClasses" :tabindex>
-    <component :is="triggerTag" class="trigger" ref="trigger">
+  <component :is="tag" ref="root" class="STooltip" :class="rootClasses" :tabindex>
+    <component :is="triggerTag" ref="trigger" class="trigger">
       <slot />
     </component>
 
     <Teleport to="#sefirot-modals">
       <Transition name="fade">
-        <div v-show="on" class="container" :class="containerClasses" ref="content">
+        <div v-show="on" ref="content" class="container" :class="containerClasses">
           <div v-if="$slots.text" class="tip"><slot name="text" /></div>
           <div v-else-if="text" class="tip" v-html="text" />
         </div>

package/lib/composables/Api.ts

@@ -1,6 +1,6 @@
-import { useHttpConfig } from 'sefirot/stores/HttpConfig'
 import { type Ref, type WatchSource, ref, watch } from 'vue'
 import { Http } from '../http/Http'
+import { useHttpConfig } from '../stores/HttpConfig'
 import { tryOnMounted } from './Utils'
 
 export interface Query<Data = any> {

package/lib/composables/App.ts

@@ -1,22 +1,24 @@
-import { type HttpOptions } from 'sefirot/stores/HttpConfig'
-import { useSetupHttp } from './Http'
-import { type HasLang, useSetupLang } from './Lang'
-import { type HasTheme, useSetupTheme } from './Theme'
+import { type HttpOptions, useHttpConfig } from '../stores/HttpConfig'
+import { type Lang, getBrowserLang, provideLang } from './Lang'
+import { type Theme, useTheme } from './Theme'
 
-export interface SetupAppUser extends HasLang, HasTheme {}
+export interface SetupAppUser {
+  lang?: Lang
+  theme?: Theme
+}
 
 export interface SetupAppOptions {
   http?: HttpOptions
 }
 
 export function useSetupApp(): (user?: SetupAppUser | null, options?: SetupAppOptions) => void {
-  const setupLang = useSetupLang()
-  const setupTheme = useSetupTheme()
-  const setupHttp = useSetupHttp()
+  const theme = useTheme()
+  const httpConfig = useHttpConfig()
 
   return (user, options) => {
-    setupLang(user)
-    setupTheme(user)
-    setupHttp(user, options?.http)
+    const lang = user?.lang ?? getBrowserLang()
+    provideLang(lang)
+    if (user?.theme) { theme.value = user.theme }
+    httpConfig.apply({ lang, ...options?.http })
   }
 }