@globalbrain/sefirot 4.44.0 → 4.45.0

package/lib/blocks/lens/fields/Field.ts

@@ -11,6 +11,12 @@ import LensFormOverrideBase from '../components/LensFormOverrideBase.vue'
 import { type FilterInput } from '../filter-inputs/FilterInput'
 import * as RuleMapper from '../validation/RuleMapper'
 
+/**
+ * Fallback column width (px) used when a field's definition does not
+ * specify one (i.e. `width` is 0). Keeps columns visible by default.
+ */
+const DEFAULT_COLUMN_WIDTH = 168
+
 export abstract class Field<T extends FieldData> {
   /**
    * The field context, that holds global app context
@@ -66,7 +72,11 @@ export abstract class Field<T extends FieldData> {
     return {
       label: this.label(),
       freeze: this.data.freeze,
-      width: `${this.data.width}px`,
+      // A width of 0 means "unset" — fall back to a sensible default so
+      // the column stays visible. Without this, fields whose backend
+      // definition omits an explicit width would render as a 0px (hidden)
+      // column until the user manually drag-resizes it.
+      width: `${this.data.width || DEFAULT_COLUMN_WIDTH}px`,
       cell: (v, r) => this.tableCell(v, r)
     }
   }
@@ -120,6 +130,19 @@ export abstract class Field<T extends FieldData> {
     return []
   }
 
+  /**
+   * Returns the "=" filter value for the given key from the filters
+   * array, or `null` when there is none.
+   */
+  protected eqFilterValueFor(key: string, filters: any[]): any {
+    for (const f of filters) {
+      if (f[0] === key && f[1] === '=') {
+        return f[2]
+      }
+    }
+    return null
+  }
+
   /**
    * Returns the table cell definition for the field.
    */

package/lib/blocks/lens/fields/RelatedManyField.ts

@@ -30,10 +30,19 @@ export class RelatedManyField extends Field<RelatedManyFieldData> {
     const res = await this.fetcher(method, url)
     const data = key ? res[key] : res
 
-    const options = data.map((item: any) => ({
-      label: item[this.data.resourceTitle],
-      value: item[this.data.filterKey]
-    }))
+    const isAvatar = this.data.displayAs === 'avatars'
+
+    const options = data.map((item: any) => isAvatar
+      ? {
+          type: 'avatar' as const,
+          label: item[this.data.resourceTitle],
+          image: this.data.resourceImage ? item[this.data.resourceImage] : null,
+          value: item[this.data.filterKey]
+        }
+      : {
+          label: item[this.data.resourceTitle],
+          value: item[this.data.filterKey]
+        })
 
     return {
       type: 'filter',
@@ -45,9 +54,24 @@ export class RelatedManyField extends Field<RelatedManyFieldData> {
   }
 
   override tableCell(v: any, _r: any): TableCell {
+    const items = (v ?? []) as any[]
+
+    if (this.data.displayAs === 'avatars') {
+      return {
+        type: 'avatars',
+        avatars: items.map((item) => ({
+          image: this.data.image ? item[this.data.image] : null,
+          name: item[this.data.title]
+        })),
+        avatarCount: 6,
+        nameCount: 0,
+        tooltip: true
+      }
+    }
+
     return {
       type: 'pills',
-      pills: v.map((item: any) => ({
+      pills: items.map((item) => ({
         label: item[this.data.title],
         value: item[this.data.filterKey]
       }))

package/lib/blocks/lens/fields/RelatedOneField.ts

@@ -0,0 +1,119 @@
+import { xor } from 'lodash-es'
+import { type DropdownSection } from '../../../composables/Dropdown'
+import { type TableCell } from '../../../composables/Table'
+import { type RelatedOneFieldData } from '../FieldData'
+import { type FilterOperator } from '../FilterOperator'
+import { type ResourceFetcher } from '../ResourceFetcher'
+import { type FilterInput } from '../filter-inputs/FilterInput'
+import { SelectFilterInput } from '../filter-inputs/SelectFilterInput'
+import { Field } from './Field'
+
+export class RelatedOneField extends Field<RelatedOneFieldData> {
+  fetcher: ResourceFetcher
+
+  constructor(ctx: any, data: RelatedOneFieldData, fetcher: ResourceFetcher) {
+    super(ctx, data)
+    this.fetcher = fetcher
+  }
+
+  override async tableFilterMenu(filters: any[], onFilterUpdated: (filters: any[]) => void): Promise<DropdownSection | null> {
+    const method = this.data.resourceEndpointMethod
+    const url = this.data.resourceEndpointPath
+    const key = this.data.resourceEndpointDataKey
+
+    if (!url) {
+      return null
+    }
+
+    const selected = this.inFilterValueFor(this.data.key, filters)
+
+    const res = await this.fetcher(method, url)
+    const data = key ? res[key] : res
+
+    const isAvatar = this.data.displayAs === 'avatar'
+
+    const options = data.map((item: any) => isAvatar
+      ? {
+          type: 'avatar' as const,
+          label: item[this.data.resourceTitle],
+          image: this.data.resourceImage ? item[this.data.resourceImage] : null,
+          value: item[this.data.filterKey]
+        }
+      : {
+          label: item[this.data.resourceTitle],
+          value: item[this.data.filterKey]
+        })
+
+    return {
+      type: 'filter',
+      search: true,
+      selected,
+      options,
+      onClick: (v) => { onFilterUpdated?.([this.data.key, 'in', xor(selected, [v])]) }
+    }
+  }
+
+  override tableCell(v: any, _r: any): TableCell {
+    if (v === null || v === undefined) {
+      if (this.data.displayAs === 'avatar') {
+        return { type: 'avatar', image: null, name: '' }
+      }
+      return { type: 'text', value: null }
+    }
+
+    if (this.data.displayAs === 'avatar') {
+      return {
+        type: 'avatar',
+        image: this.data.image ? (v[this.data.image] ?? null) : null,
+        // Empty string (not null) for the same reason as the text branch
+        // below — a null name falls back to the raw row value in the cell
+        // renderer and breaks SAvatar.
+        name: v[this.data.title] ?? ''
+      }
+    }
+
+    return {
+      type: 'text',
+      // Empty string (not null) when the title is missing: the table
+      // renderer falls back to the raw row value on a null cell value,
+      // which would render the relation object as `[object Object]`.
+      value: v[this.data.title] ?? ''
+    }
+  }
+
+  override availableFilters(): Partial<Record<FilterOperator, FilterInput>> {
+    const method = this.data.resourceEndpointMethod
+    const url = this.data.resourceEndpointPath
+    const key = this.data.resourceEndpointDataKey
+
+    if (!url) {
+      return {}
+    }
+
+    const optionsResolver = async () => {
+      const res = await this.fetcher(method, url)
+      const data = key ? res[key] : res
+      return data.map((item: any) => ({
+        value: item[this.data.filterKey],
+        label: item[this.data.resourceTitle]
+      }))
+    }
+
+    const selectOne = new SelectFilterInput().options(optionsResolver)
+    const selectMany = new SelectFilterInput().options(optionsResolver).multiple()
+
+    return {
+      '=': selectOne,
+      '!=': selectOne,
+      'in': selectMany
+    }
+  }
+
+  override dataListItemComponent(): any {
+    throw new Error('Not implemented.')
+  }
+
+  override formInputComponent() {
+    throw new Error('Not implemented.')
+  }
+}

package/lib/blocks/lens/fields/TextField.ts

@@ -38,6 +38,8 @@ export class TextField extends Field<TextFieldData> {
         'label': this.formInputLabel(),
         'placeholder': this.placeholder() || undefined,
         'help': this.help() || undefined,
+        'unitBefore': this.data.unitBefore || undefined,
+        'unitAfter': this.data.unitAfter || undefined,
         'modelValue': props.modelValue,
         'validation': props.validation,
         'onUpdate:modelValue': (value: any) => {

package/lib/blocks/lens/filter-inputs/SelectFilterInput.ts

@@ -35,7 +35,11 @@ export class SelectFilterInput extends FilterInput {
     if (Array.isArray(value)) {
       return value[0]
     }
-    return this.castValueToStringOrNull(value)
+    // Preserve the value's type. Option values can be non-string (e.g.
+    // numeric related-record ids); stringifying here would break strict
+    // option matching in the dropdown summary and send the wrong type to
+    // the backend.
+    return value ?? null
   }
 
   protected castValueMany(value: any): any {

package/lib/blocks/lens/validation/RuleMapper.ts

@@ -1,6 +1,6 @@
 import { type ValidationArgs, type ValidationRuleWithParams } from '@vuelidate/core'
 import { type Day, day } from '../../../support/Day'
-import { after, afterOrEqual, before, beforeOrEqual, maxLength, required } from '../../../validation/rules'
+import { after, afterOrEqual, before, beforeOrEqual, maxLength, required, slackChannelName } from '../../../validation/rules'
 import { type Rule } from '../Rule'
 
 /**
@@ -19,6 +19,8 @@ function mapRule(rule: Rule): ValidationRuleWithParams {
       return maxLength(rule.length)
     case 'required':
       return required()
+    case 'slack_channel_name':
+      return slackChannelName({ offset: rule.offset })
     case 'before':
       return before(resolveDate(rule.date))
     case 'before_or_equal':

package/lib/components/SInputFileUpload.vue

@@ -17,7 +17,14 @@ export type Size = 'mini' | 'small' | 'medium'
 export type { Color }
 
 export type ModelType = 'file' | 'object'
-export type ModelValue<T extends ModelType> = T extends 'file' ? File : FileObject
+
+/**
+ * In `file` mode an item is either a freshly selected `File` or a `string`
+ * referencing a file that was already uploaded (e.g. its stored path or
+ * basename) — mirroring `SInputImage`'s `File | string` model. `object`
+ * mode wraps a `File` with display metadata.
+ */
+export type ModelValue<T extends ModelType> = T extends 'file' ? File | string : FileObject
 
 export interface FileObject {
   file: File
@@ -103,7 +110,15 @@ const totalFileCountText = computed(() => {
 })
 
 const totalFileSizeText = computed(() => {
-  const files = _value.value.map((file) => (file instanceof File ? file : file.file))
+  // Only locally selected files contribute to the total size. Already
+  // uploaded files (plain `string` references) have no known size on the
+  // client, so the displayed total under-counts when the list mixes
+  // uploaded references with newly selected files. Accepted for now —
+  // surfacing accurate sizes would require the size to travel with the
+  // reference (or an extra lookup).
+  const files = _value.value
+    .map((file) => (file instanceof File ? file : typeof file === 'string' ? null : file.file))
+    .filter((file): file is File => file instanceof File)
   return formatSize(files)
 })
 

package/lib/components/SInputFileUploadItem.vue

@@ -2,7 +2,7 @@
 import IconFileText from '~icons/ph/file-text'
 import IconTrash from '~icons/ph/trash'
 import { type ValidationRuleWithParams } from '@vuelidate/core'
-import { type Component, computed } from 'vue'
+import { type Component, computed, watch } from 'vue'
 import { useValidation } from '../composables/Validation'
 import { formatSize } from '../support/File'
 import SButton, { type Mode as ButtonMode } from './SButton.vue'
@@ -27,7 +27,7 @@ export interface Action {
 }
 
 const props = defineProps<{
-  file: File | FileObject
+  file: File | FileObject | string
   rules?: Record<string, ValidationRuleWithParams>
 }>()
 
@@ -35,23 +35,64 @@ defineEmits<{
   remove: []
 }>()
 
-const _file = computed(() => ({
-  name: props.file instanceof File ? props.file.name : props.file.file.name,
-  file: props.file instanceof File ? props.file : props.file.file,
-  size: formatSize(props.file instanceof File ? props.file : props.file.file),
-  indicatorState: props.file instanceof File ? null : props.file.indicatorState,
-  canRemove: props.file instanceof File ? true : (props.file.canRemove ?? true),
-  action: props.file instanceof File ? null : props.file.action,
-  errorMessage: props.file instanceof File ? null : props.file.errorMessage
-}))
+const _file = computed(() => {
+  const value = props.file
+
+  if (value instanceof File) {
+    return {
+      name: value.name,
+      file: value as File | null,
+      size: formatSize(value) as string | null,
+      indicatorState: null as IndicatorState | null,
+      canRemove: true,
+      action: null as Action | null,
+      errorMessage: null as string | null
+    }
+  }
+
+  // A plain string references an already-uploaded file: show its basename
+  // and skip the size (unknown for server-side files).
+  if (typeof value === 'string') {
+    return {
+      name: value.split('/').pop() || value,
+      file: null,
+      size: null,
+      indicatorState: null,
+      canRemove: true,
+      action: null,
+      errorMessage: null
+    }
+  }
+
+  return {
+    name: value.file.name,
+    file: value.file as File | null,
+    size: formatSize(value.file) as string | null,
+    indicatorState: value.indicatorState ?? null,
+    canRemove: value.canRemove ?? true,
+    action: value.action ?? null,
+    errorMessage: value.errorMessage ?? null
+  }
+})
 
+// Rules are passed as a getter so validation reacts when the item's
+// identity changes — the parent keys items by index, so a single instance
+// can be reused for a different item after a removal. Per-file rules apply
+// to newly selected `File`s only; an already-uploaded `string` reference
+// has no local file to validate, so it's skipped (the server validates it).
 const { validation } = useValidation(() => ({
   file: _file.value.file
-}), {
-  file: props.rules ?? {}
-})
+}), () => ({
+  file: typeof props.file === 'string' ? {} : (props.rules ?? {})
+}))
 
-validation.value.$touch()
+// Surface validation immediately, and re-touch whenever the item changes:
+// when an index-keyed instance is reused for a different item, switching
+// rules resets the dirty state, so a post-flush re-touch is needed to keep
+// the new item's errors visible.
+watch(() => props.file, () => {
+  validation.value.$touch()
+}, { immediate: true, flush: 'post' })
 </script>
 
 <template>
@@ -84,7 +125,7 @@ validation.value.$touch()
       />
     </div>
     <div class="meta">
-      <div class="size">
+      <div v-if="_file.size" class="size">
         {{ _file.size }}
       </div>
       <div class="delete">

package/lib/http/Http.ts

@@ -1,8 +1,8 @@
 import { parse as parseContentDisposition } from '@tinyhttp/content-disposition'
 import { parse as parseCookie } from '@tinyhttp/cookie'
-import FileSaver from 'file-saver'
 import { FetchError, type FetchOptions, type FetchResponse } from 'ofetch'
 import { stringify } from 'qs'
+import { saveAs } from '../support/File'
 import { objectToFormData } from '../support/Http'
 
 type Config = ReturnType<typeof import('../stores/HttpConfig').useHttpConfig>
@@ -116,20 +116,15 @@ export class Http {
   }
 
   async download(url: string, options?: FetchOptions): Promise<void> {
-    const { _data: blob, headers } = await this.performRequestRaw<Blob>(url, {
-      method: 'GET',
-      responseType: 'blob',
-      ...options
-    })
-
-    if (!blob) {
-      throw new Error('No blob')
-    }
+    const { _data: blob, headers } =
+      await this.performRequestRaw<Blob>(url, { method: 'GET', responseType: 'blob', ...options })
 
-    const { filename = 'download' } =
-      parseContentDisposition(headers.get('Content-Disposition') || '')?.parameters || {}
+    let filename
+    try {
+      filename = parseContentDisposition(headers.get('Content-Disposition') || '').parameters.filename
+    } catch {}
 
-    FileSaver.saveAs(blob, filename as string)
+    saveAs(blob, filename as string | undefined)
   }
 }
 

package/lib/support/Chart.ts

@@ -6,8 +6,8 @@
  *     https://github.com/radix-ui/colors/blob/main/LICENSE
  */
 
-import FileSaver from 'file-saver'
 import html2canvas from 'html2canvas'
+import { saveAs } from './File'
 
 export const c = {
   text1: 'light-dark(#1c2024, #edeef0)',
@@ -86,6 +86,10 @@ export async function exportAsPng(_el: any, fileName = 'chart.png', delay = 0):
     }
   })
 
-  const dataUrl = canvas.toDataURL('image/png')
-  FileSaver.saveAs(dataUrl, fileName)
+  const blob = await new Promise<Blob | null>((resolve) => canvas.toBlob(resolve, 'image/png'))
+  if (!blob) {
+    throw new Error('Failed to export chart as PNG: unable to create blob from canvas')
+  }
+
+  saveAs(blob, fileName)
 }

package/lib/support/Day.ts

@@ -1,7 +1,8 @@
-import dayjs, { type ConfigType, type Dayjs } from 'dayjs'
-import PluginRelativeTime from 'dayjs/plugin/relativeTime'
-import PluginTimezone from 'dayjs/plugin/timezone'
-import PluginUtc from 'dayjs/plugin/utc'
+import dayjs, { type ConfigType, type Dayjs } from 'dayjs/esm'
+import PluginRelativeTime from 'dayjs/esm/plugin/relativeTime'
+import PluginTimezone from 'dayjs/esm/plugin/timezone'
+import PluginUtc from 'dayjs/esm/plugin/utc'
+import 'dayjs/esm/locale/ja'
 
 dayjs.extend(PluginUtc)
 dayjs.extend(PluginTimezone)

package/lib/support/File.ts

@@ -13,3 +13,28 @@ export function formatSize(files: File | File[]): string {
   const i = Math.min(Math.floor(Math.log(size) / Math.log(1000)), units.length - 1)
   return `${(size / 1000 ** i).toFixed(2)} ${units[i]}`
 }
+
+export function saveAs(blob: Blob | undefined, filename: string | undefined): void {
+  if (typeof window === 'undefined') {
+    throw new TypeError('saveAs can only be used in a browser environment.')
+  }
+
+  if (!(blob instanceof Blob)) {
+    throw new TypeError('The first argument must be a Blob.')
+  }
+
+  const url = URL.createObjectURL(blob)
+  const anchor = document.createElement('a')
+  anchor.href = url
+  anchor.download = filename || 'download'
+  anchor.rel = 'noopener'
+  anchor.style.display = 'none'
+
+  document.body.appendChild(anchor)
+  anchor.click()
+
+  setTimeout(() => {
+    anchor.remove()
+    URL.revokeObjectURL(url)
+  }, 4e4)
+}

package/lib/support/Utils.ts

@@ -14,3 +14,16 @@ export function isObject(value: unknown): value is Record<PropertyKey, unknown>
 export function isString(value: unknown): value is string {
   return typeof value === 'string'
 }
+
+export function getLength(value: unknown): number {
+  if (typeof value === 'string') {
+    // Count Unicode code points, not UTF-16 code units (which `String.length`
+    // returns). This matches how the database measures column length (MySQL
+    // `CHAR_LENGTH`, PostgreSQL `length`) and the backend's PHP `mb_strlen`.
+    return [...value].length
+  }
+  if (Array.isArray(value)) {
+    return value.length
+  }
+  throw new TypeError('Value must be a string or an array')
+}

package/lib/validation/validators/maxLength.ts

@@ -1,3 +1,5 @@
+import { getLength } from '../../support/Utils'
+
 export function maxLength(value: unknown, length: number): boolean {
-  return (typeof value === 'string' || Array.isArray(value)) && value.length <= length
+  try { return getLength(value) <= length } catch { return false }
 }

package/lib/validation/validators/maxTotalFileSize.ts

@@ -1,8 +1,16 @@
 export function maxTotalFileSize(value: unknown, size: string): boolean {
-  if (!Array.isArray(value) || !value.every((v) => v instanceof File)) { return false }
+  // The model may mix freshly selected `File`s with `string` references to
+  // already-uploaded files (see `SInputFileUpload`). Reject anything else,
+  // but allow string references through — only `File`s contribute to the
+  // total, since an already-uploaded file has no client-side size (the
+  // server validates its real size). This means the total under-counts kept
+  // files, which is accepted for now.
+  if (!Array.isArray(value) || !value.every((v) => v instanceof File || typeof v === 'string')) {
+    return false
+  }
 
   const factor = /gb/i.test(size) ? 1e9 : /mb/i.test(size) ? 1e6 : /kb/i.test(size) ? 1e3 : 1
-  const total = value.reduce((total, file) => total + file.size, 0)
+  const total = value.reduce((total, file) => total + (file instanceof File ? file.size : 0), 0)
 
   return total <= factor * Number.parseFloat(size.replace(/[^\d.]/g, ''))
 }

package/lib/validation/validators/minLength.ts

@@ -1,3 +1,5 @@
+import { getLength } from '../../support/Utils'
+
 export function minLength(value: unknown, length: number): boolean {
-  return (typeof value === 'string' || Array.isArray(value)) && value.length >= length
+  try { return getLength(value) >= length } catch { return false }
 }