@globalbrain/sefirot 4.31.0 → 4.32.0

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/Dropdown.ts

@@ -1,5 +1,14 @@
 import { useElementBounding, useWindowSize } from '@vueuse/core'
-import { type Component, type MaybeRef, type MaybeRefOrGetter, type Ref, computed, ref, toValue, unref } from 'vue'
+import {
+  type Component,
+  type MaybeRef,
+  type MaybeRefOrGetter,
+  type Ref,
+  computed,
+  ref,
+  toValue,
+  unref
+} from 'vue'
 import { type ActionList } from '../components/SActionList.vue'
 import { type DateRange } from '../support/DateRange'
 

package/lib/composables/Error.ts

@@ -1,20 +1,16 @@
 /**
  * Adapted from
- * @see https://github.com/vuejs/core/blob/1755ac0a108ba3486bd8397e56d3bdcd69196594/packages/runtime-core/src/component.ts
+ * @see https://github.com/vuejs/core/blob/b50eb68c50f3b94dca2e96f706c3e96ab864df24/packages/runtime-core/src/component.ts
  * @see https://github.com/vuejs/core/blob/ac9e7e8bfa55432a73a10864805fdf48bda2ff73/packages/runtime-core/src/warning.ts
- * @see https://github.com/getsentry/sentry-javascript/blob/04711c20246f7cdaac2305286fec783ab1859a18/packages/vue/src/errorhandler.ts
- * @see https://github.com/vercel/ai/blob/d544886d4f61440bacd6e44c86144bfac7c98282/packages/provider-utils/src/get-error-message.ts
+ * @see https://github.com/getsentry/sentry-javascript/blob/fbadeb81d23c03c3d852531c2deef59a3a992def/packages/vue/src/errorhandler.ts
  *
  * Original licenses:
  *
- * (c) 2018-present Yuxi (Evan) You and Vue contributors
+ * Copyright (c) 2018-present, Yuxi (Evan) You
  * @license MIT
  *
- * (c) 2012-2024 Functional Software, Inc. dba Sentry
+ * Copyright (c) 2019 Functional Software, Inc. dba Sentry
  * @license MIT
- *
- * (c) 2023 Vercel, Inc.
- * @license Apache-2.0
  */
 
 import * as Sentry from '@sentry/browser'
@@ -22,8 +18,8 @@ import { createSentryPiniaPlugin } from '@sentry/vue'
 import { pauseTracking, resetTracking } from '@vue/reactivity'
 import { getActivePinia } from 'pinia'
 import {
+  type Component,
   type ComponentInternalInstance,
-  type ComponentOptions,
   type ComponentPublicInstance,
   type ConcreteComponent,
   type MaybeRefOrGetter,
@@ -31,7 +27,6 @@ import {
   toValue
 } from 'vue'
 import { useError } from '../stores/Error'
-import { isError } from '../support/Utils'
 
 export interface User {
   id?: string | number
@@ -43,7 +38,7 @@ type TraceEntry = { vnode: VNode; recurseCount: number }
 
 type ComponentTraceStack = TraceEntry[]
 
-const classifyRE = /(?:^|[-_])(\w)/g
+const classifyRE = /(?:^|[-_])\w/g
 function classify(str: string): string {
   return str.replace(classifyRE, (c) => c.toUpperCase()).replace(/[-_]/g, '')
 }
@@ -70,19 +65,20 @@ function formatComponentName(instance: ComponentInternalInstance | null): string
     }
   }
 
-  if (!name && instance && instance.parent) {
-    const inferFromRegistry = (registry: Record<string, unknown> | undefined) => {
+  if (!name && instance) {
+    const inferFromRegistry = (registry?: Record<string, Component>) => {
       for (const key in registry) {
         if (registry[key] === Component) {
           return key
         }
       }
     }
-    name
-      = inferFromRegistry(
-        // @ts-expect-error internal api
-        instance.components || (instance.parent.type as ComponentOptions).components
-      ) || inferFromRegistry(instance.appContext.components)
+    name =
+      // @ts-expect-error internal API
+      inferFromRegistry(instance.components)
+      // @ts-expect-error internal API
+      || inferFromRegistry(instance.parent?.type.components)
+      || inferFromRegistry(instance.appContext.components)
   }
 
   return name ? classify(name) : isRoot ? 'App' : 'Anonymous'
@@ -102,8 +98,8 @@ function getComponentTrace(currentVNode: VNode | null): ComponentTraceStack {
     } else {
       normalizedStack.push({ vnode: currentVNode, recurseCount: 0 })
     }
-    const parentInstance: ComponentInternalInstance | null
-      = currentVNode.component && currentVNode.component.parent
+    const parentInstance: ComponentInternalInstance | null =
+      currentVNode.component && currentVNode.component.parent
     currentVNode = parentInstance && parentInstance.vnode
   }
 
@@ -147,6 +143,26 @@ const ignoreErrors = [
   /\[Cloudflare Turnstile\] Error: (?:10[2-46]|1106[02]|[36]00)/
 ]
 
+const stringifiers: readonly ((e: unknown) => string | false)[] = [
+  (e) => typeof e === 'string' && e,
+  (e) => e instanceof Error && (e.message || e.name),
+  (e) => {
+    const json = JSON.stringify(e)
+    return json !== '{}' && json
+  },
+  (e) => String(e)
+]
+
+function getErrorMessage(error: unknown | undefined): string {
+  for (const stringify of stringifiers) {
+    try {
+      const s = stringify(error)
+      if (s) { return s }
+    } catch { /* continue */ }
+  }
+  return 'unknown error'
+}
+
 export function useErrorHandler({
   dsn,
   environment,
@@ -204,7 +220,7 @@ export function useErrorHandler({
           componentName: formatComponentName($),
           lifecycleHook: info,
           trace: formatTrace($),
-          propsData: $ && $.props
+          propsData: $.props
         }
 
         setTimeout(() => {
@@ -224,19 +240,3 @@ export function useErrorHandler({
     set(e)
   }
 }
-
-function getErrorMessage(error: unknown | undefined) {
-  if (error == null) {
-    return 'unknown error'
-  }
-
-  if (typeof error === 'string') {
-    return error
-  }
-
-  if (isError(error)) {
-    return error.message
-  }
-
-  return JSON.stringify(error)
-}

package/lib/composables/Grid.ts

@@ -45,9 +45,7 @@ export function useGrid(options: UseGridOptions = {}): Grid {
   })
 
   function adjustSpacer() {
-    container.value?.querySelectorAll(`${toClassSelector(spacerClass)}`)
-      .forEach((n) => n.remove())
-
+    container.value?.querySelectorAll(`${toClassSelector(spacerClass)}`).forEach((n) => n.remove())
     const track = container.value?.firstElementChild
 
     const containerWidth = container.value?.clientWidth ?? 0
@@ -59,7 +57,6 @@ export function useGrid(options: UseGridOptions = {}): Grid {
     const lack = mod !== 0 ? perRow - mod : 0
 
     const fragment = createSpacers(lack, spacerTag, spacerClass, type)
-
     container.value?.appendChild(fragment)
   }
 

package/lib/composables/Image.ts

@@ -1,6 +1,5 @@
 import { isClient } from '@vueuse/core'
 import { type MaybeRefOrGetter, type Ref, ref, toValue, watchEffect } from 'vue'
-import { isFile, isString } from '../support/Utils'
 
 export interface ImageSrcFromFile {
   src: Ref<string | null>
@@ -34,12 +33,12 @@ export function useImageSrcFromFile(
   function read(): void {
     const f = toValue(file)
 
-    if (isFile(f)) {
+    if (f instanceof Blob) {
       reader.readAsDataURL(f)
       return
     }
 
-    if (isString(f)) {
+    if (typeof f === 'string') {
       src.value = f
       return
     }

package/lib/composables/Lang.ts

@@ -8,7 +8,7 @@ export interface Trans<T> {
 
 export interface TransMessages<T> {
   en: T
-  ja: T
+  ja: NoInfer<T>
 }
 
 export const SefirotLangKey: InjectionKey<Lang> = Symbol.for('sefirot-lang-key')

package/lib/composables/Markdown.ts

@@ -1,4 +1,4 @@
-import DOMPurify, { type Config } from 'dompurify'
+import DOMPurify, { type Config } from 'isomorphic-dompurify'
 import MarkdownIt from 'markdown-it'
 
 export type UseMarkdown = (source: string, inline?: boolean) => string

package/lib/composables/Table.ts

@@ -25,11 +25,9 @@ export interface Table<
   total?: MaybeRef<number | null | undefined>
   page?: MaybeRef<number | null | undefined>
   perPage?: MaybeRef<number | null | undefined>
-  reset?: MaybeRef<boolean | undefined>
   borderSize?: MaybeRef<number | undefined>
   onPrev?(): void
   onNext?(): void
-  onReset?(): void
 }
 
 export type TableColumns<

package/lib/composables/Theme.ts

@@ -7,7 +7,7 @@ export function useTheme(): WritableComputedRef<Theme> {
   const _isDark = useDark()
 
   return computed({
-    get: () => _isDark.value ? 'dark' : 'light',
+    get: () => (_isDark.value ? 'dark' : 'light'),
     set: (v) => { _isDark.value = v === 'dark' }
   })
 }