@globalbrain/sefirot 4.44.0 → 4.46.0

package/README.md

@@ -27,31 +27,31 @@ Sefirot follows the official [Vue Style Guide](https://v3.vuejs.org/style-guide/
 ### Development
 
 ```bash
-$ pnpm run story
+$ pnpm story
 ```
 
 Serve Histoire at http://localhost:4010.
 
 ```bash
-$ pnpm run docs
+$ pnpm docs
 ```
 
 Serve documentation website at http://localhost:4011.
 
 ```bash
-$ pnpm run lint
+$ pnpm lint
 ```
 
 Lint files using a rule of Standard JS.
 
 ```bash
-$ pnpm run test
+$ pnpm test
 ```
 
 Run the tests.
 
 ```bash
-$ pnpm run coverage
+$ pnpm coverage
 ```
 
 Output test coverage in `coverage` directory.

package/config/vite.js

@@ -13,13 +13,6 @@ const files = (await Array.fromAsync(glob(`**/*.ts`, { cwd: lib })))
   .filter((file) => !file.endsWith('.d.ts'))
   .map((file) => `sefirot/${file}`.replace(/(?:\/index)?\.ts$/, ''))
 
-// @ts-ignore
-const isRolldown = !!vite.rolldownVersion
-
-const define = {
-  'navigator.userAgent': '""'
-}
-
 /** @type {import('vite').UserConfig} */
 export const baseConfig = {
   plugins: [
@@ -52,18 +45,7 @@ export const baseConfig = {
   },
 
   ssr: {
-    noExternal: [
-      /sentry/
-    ],
-    optimizeDeps: {
-      include: [
-        'file-saver'
-      ],
-      // @ts-ignore
-      esbuildOptions: isRolldown ? undefined : { define },
-      // @ts-ignore
-      rolldownOptions: isRolldown ? { transform: { define } } : undefined
-    }
+    noExternal: [/(?:^|\/)dayjs/]
   },
 
   optimizeDeps: {
@@ -71,12 +53,7 @@ export const baseConfig = {
     include: [
       ...files,
       '@globalbrain/sefirot/dompurify',
-      'dayjs',
-      'dayjs/plugin/relativeTime',
-      'dayjs/plugin/timezone',
-      'dayjs/plugin/utc',
       'dompurify',
-      'file-saver',
       'markdown-it > argparse',
       'markdown-it > entities',
       'pinia',

package/lib/blocks/lens/FieldData.ts

@@ -17,6 +17,7 @@ import { type Rule } from './Rule'
  * }
  */
 export interface FieldDataRegistry {
+  boolean: BooleanFieldData
   content: ContentFieldData
   date: DateFieldData
   datetime: DatetimeFieldData
@@ -26,6 +27,7 @@ export interface FieldDataRegistry {
   link: LinkFieldData
   number: NumberFieldData
   related_many: RelatedManyFieldData
+  related_one: RelatedOneFieldData
   select: SelectFieldData
   slack_message: SlackMessageFieldData
   text: TextFieldData
@@ -48,6 +50,14 @@ export interface FieldDataBase {
   rules: Rule[]
 }
 
+export interface BooleanFieldData extends FieldDataBase {
+  type: 'boolean'
+  labelTrueEn: string | null
+  labelTrueJa: string | null
+  labelFalseEn: string | null
+  labelFalseJa: string | null
+}
+
 export interface ContentFieldData extends FieldDataBase {
   type: 'content'
   bodyEn: string
@@ -131,10 +141,25 @@ export interface SelectFieldDataOption {
 export interface RelatedManyFieldData extends FieldDataBase {
   type: 'related_many'
   title: string
+  image?: string | null
+  resourceEndpointMethod: 'get' | 'post'
+  resourceEndpointPath: string
+  resourceEndpointDataKey: string | null
+  resourceTitle: string
+  resourceImage?: string | null
+  displayAs?: 'pills' | 'avatars' | null
+}
+
+export interface RelatedOneFieldData extends FieldDataBase {
+  type: 'related_one'
+  title: string
+  image?: string | null
   resourceEndpointMethod: 'get' | 'post'
   resourceEndpointPath: string
   resourceEndpointDataKey: string | null
   resourceTitle: string
+  resourceImage?: string | null
+  displayAs?: 'text' | 'avatar' | null
 }
 
 export interface SlackMessageFieldData extends FieldDataBase {
@@ -147,6 +172,8 @@ export interface TextFieldData extends FieldDataBase {
   placeholderJa: string | null
   helpEn: string | null
   helpJa: string | null
+  unitBefore: string | null
+  unitAfter: string | null
 }
 
 export interface TextareaFieldData extends FieldDataBase {

package/lib/blocks/lens/Rule.ts

@@ -1,6 +1,7 @@
 export type Rule =
   | MaxLengthRule
   | RequiredRule
+  | SlackChannelNameRule
   | BeforeRule
   | BeforeOrEqualRule
   | AfterRule
@@ -15,6 +16,11 @@ export interface RequiredRule {
   type: 'required'
 }
 
+export interface SlackChannelNameRule {
+  type: 'slack_channel_name'
+  offset: number
+}
+
 export interface BeforeRule {
   type: 'before'
   date: string

package/lib/blocks/lens/components/LensCatalog.vue

@@ -3,6 +3,7 @@ import { useDebounceFn, useElementSize } from '@vueuse/core'
 import { computed, ref, watch } from 'vue'
 import SDivider from '../../../components/SDivider.vue'
 import { useQuery } from '../../../composables/Api'
+import { useLang } from '../../../composables/Lang'
 import { usePower } from '../../../composables/Power'
 import { type FieldData } from '../FieldData'
 import { type LensQuery, type LensQuerySort } from '../LensQuery'
@@ -102,6 +103,13 @@ export interface Props {
   // the catalog will hide entire catalog component and renders the given
   // `#empty-state` slot instead.
   showEmptyState?: boolean
+
+  // Whether to populate the selectable column list from every field the
+  // backend exposes for the entity, rather than only the columns passed
+  // in `selectable` / `select`. Use this when the catalog should let the
+  // user add any available column to the view (e.g. a saved-view editor),
+  // not just toggle the ones already selected.
+  loadSelectable?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -116,6 +124,7 @@ const emit = defineEmits<{
   'select-updated': [select: string[]]
   'selectable-updated': [selectable: string[]]
   'filters-updated': [filters: any[]]
+  'query-filter-updated': [filter: any[]]
   'sort-updated': [sort: LensQuerySort[]]
   'overrides-updated': [overrides: Record<string, Partial<FieldData>>]
   'cell-clicked': [value: any, record: any]
@@ -155,6 +164,13 @@ const queryFilter = computed(() => {
   })]
 })
 
+// Surface the free-text query filter so callers can fold it into their
+// own export / side-channel requests (the search box lives inside the
+// catalog, so the parent has no other way to observe it).
+watch(queryFilter, (filter) => {
+  emit('query-filter-updated', filter)
+})
+
 const _filters = ref(props.filters ?? [])
 
 const _sort = ref<LensQuerySort[]>([])
@@ -165,12 +181,15 @@ const _overrides = ref(props.overrides ?? {})
 const page = ref(1)
 const perPage = ref(100)
 
+const lang = useLang()
+
 const { data: result, execute: refresh, loading } = useQuery(async (http) => {
   const input = {
     entity: props.entity ?? '__no_entity__',
     select: withIndexField(_select.value),
     filters: createInputFilters(queryFilter.value, _filters.value),
     sort: _sort.value.length > 0 ? _sort.value : defaultSort.value ?? [],
+    settings: { lang },
     page: page.value,
     perPage: perPage.value
   }
@@ -262,6 +281,20 @@ watch(result, (res) => {
   if (_selectable.value.length === 0) {
     _selectable.value = withoutIndexField(res!.query.select)
   }
+  // When `loadSelectable` is set, widen the selectable column list to
+  // every field the backend exposes for the entity (minus the index
+  // field), so the column picker can offer columns that aren't part of
+  // the current selection. Existing entries are preserved and order is
+  // kept stable by appending only the not-yet-present keys.
+  if (props.loadSelectable && res!.fields) {
+    const present = new Set(_selectable.value)
+    for (const key of withoutIndexField(Object.keys(res!.fields))) {
+      if (!present.has(key)) {
+        _selectable.value.push(key)
+        present.add(key)
+      }
+    }
+  }
 }, { once: true })
 
 // Columns to render in the table. We always defer to `_select` (caller
@@ -328,14 +361,21 @@ function onInlineFilterUpdated(filter: any[]) {
   emit('filters-updated', _filters.value)
 }
 
+// A filter value "clears" the filter when it's nullish or an empty
+// array. Scalar operators (e.g. a boolean `=`) carry a single value, so
+// `false` is a real value to keep — only `null` clears.
+function isEmptyFilterValue(value: any): boolean {
+  return value == null || (Array.isArray(value) && value.length === 0)
+}
+
 function applyNewFilter(filter: any[]) {
-  if (filter[2].length > 0) {
+  if (!isEmptyFilterValue(filter[2])) {
     _filters.value.push(filter)
   }
 }
 
 function replaceFilter(index: number, filter: any[]) {
-  if (filter[2].length === 0) {
+  if (isEmptyFilterValue(filter[2])) {
     _filters.value.splice(index, 1)
     return
   }
@@ -395,7 +435,23 @@ function onNext() {
   doRefresh()
 }
 
+// Re-runs the current query against the endpoint, preserving the
+// catalog's in-memory state (select / filters / sort / page). Exposed
+// so callers can reflect server-side changes — e.g. after a bulk action
+// mutates rows — without remounting the component.
+async function refreshCatalog(): Promise<void> {
+  // A refresh is requested precisely when server-side data may have
+  // changed while the query input did not (e.g. after a bulk action).
+  // Clear the memoized input so the equality shortcut in the fetcher
+  // misses and a real request is issued instead of returning the stale
+  // cached result.
+  prevFetchInput = null
+  await doRefresh()
+}
+
 defineExpose({
+  refresh: refreshCatalog,
+
   /**
    * Retrieve the current records in the catalog. This method is required when
    * the parent component needs to access the records directly, for example, to
@@ -457,6 +513,9 @@ defineExpose({
         <template v-if="$slots['controls-sub-right']" #sub-right>
           <slot name="controls-sub-right" />
         </template>
+        <template v-if="$slots['selected-actions']" #selected-actions>
+          <slot name="selected-actions" />
+        </template>
       </LensCatalogControl>
       <div v-else class="control-skeleton" />
       <div v-if="!hideConditions && result && (_filters.length > 0 || _sort.length > 0)" ref="conditionBlocksEl" class="condition-blocks">

package/lib/blocks/lens/components/LensCatalogControl.vue

@@ -138,6 +138,9 @@ function createFilterPresetOptions(): ActionList {
             <IconX class="selected-reset-icon" />
           </button>
         </div>
+        <div v-if="$slots['selected-actions']" class="selected-actions">
+          <slot name="selected-actions" />
+        </div>
       </div>
     </template>
   </div>
@@ -165,6 +168,12 @@ function createFilterPresetOptions(): ActionList {
   gap: 8px;
 }
 
+.selected-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
 .selected-box {
   display: flex;
   align-items: center;

package/lib/blocks/lens/components/LensCatalogStateFilterCondition.vue

@@ -21,15 +21,21 @@ const props = defineProps<Props>()
 const fieldFactory = useFieldFactory()
 
 const field = computed(() => {
-  return fieldFactory.make(props.fields[props.condition.field])
+  const fieldData = props.fields[props.condition.field]
+  // A still-applied filter can reference a field that's no longer in the
+  // field set (e.g. a stale saved filter). Keep the chip rendering rather
+  // than crashing on `make(undefined)`, so the active filter stays
+  // visible and counted instead of silently filtering the table.
+  return fieldData ? fieldFactory.make(fieldData) : null
 })
 
 const input = computed(() => {
-  return field.value.filterInputByOperator(props.condition.operator)
+  return field.value?.filterInputByOperator(props.condition.operator) ?? null
 })
 
 const fieldText = computed(() => {
-  return field.value.label()
+  // Fall back to the raw field key when the field has no definition.
+  return field.value ? field.value.label() : props.condition.field
 })
 
 const operatorText = computed(() => {
@@ -37,6 +43,9 @@ const operatorText = computed(() => {
 })
 
 const valueText = computedAsync(async () => {
+  if (!input.value) {
+    return String(props.condition.value ?? '')
+  }
   return input.value.valueToText(props.condition.value)
 }, '...')
 </script>
@@ -45,10 +54,7 @@ const valueText = computedAsync(async () => {
   <div class="LensCatalogStateFilterCondition">
     <div class="field">{{ fieldText }}</div>
     <div class="operator">{{ operatorText }}</div>
-    <div v-if="input === null" class="value">
-      ...
-    </div>
-    <div v-else class="value">
+    <div class="value">
       {{ valueText }}
     </div>
   </div>

package/lib/blocks/lens/components/LensFormFilter.vue

@@ -57,6 +57,12 @@ const { validateAndNotify } = useValidation()
 const fieldOptions = computed(() => {
   return props.filterable.filter((key) => {
     const fieldData = props.fields[key]
+    // Skip keys with no field definition — e.g. `__empty__` spacer
+    // columns that appear in `select` / `selectable` but carry no field
+    // metadata. Without this guard `make(undefined)` throws.
+    if (!fieldData) {
+      return false
+    }
     const field = fieldFactory.make(fieldData)
     return field.availableFilterOperators().length > 0
   }).map((key) => {
@@ -89,14 +95,27 @@ const fieldOptions = computed(() => {
 //   ]
 // }
 function lensFiltersToGroup() {
+  const conditions = props.filters.length > 0
+    ? pruneMissingFields(props.filters.map(lensConditionToCondition))
+    : []
+
   return {
     connector: '$and' as const,
-    conditions: props.filters.length > 0
-      ? props.filters.map(lensConditionToCondition)
-      : [createEmptyCondition()]
+    conditions: conditions.length > 0 ? conditions : [createEmptyCondition()]
   }
 }
 
+// Drop conditions that reference a field absent from `props.fields` (for
+// example a stale saved filter pointing at a field that no longer
+// exists). Such a condition can't be rendered or edited, and would
+// otherwise pass validation with a null input and silently re-emit the
+// stale filter on Apply. Groups left empty by pruning are removed too.
+function pruneMissingFields(conditions: any[]): any[] {
+  return conditions
+    .map((c) => ('connector' in c ? { ...c, conditions: pruneMissingFields(c.conditions) } : c))
+    .filter((c) => ('connector' in c ? c.conditions.length > 0 : c.field === null || props.fields[c.field]))
+}
+
 function lensConditionToCondition(filter: any[]) {
   const fieldOrConnector = filter[0]
 

package/lib/blocks/lens/components/LensFormFilterCondition.vue

@@ -48,6 +48,12 @@ const field = computed(() => {
     return null
   }
   const fieldData = props.fields[model.value.field]
+  // Guard against a condition referencing a key with no field
+  // definition (e.g. a stale saved filter, or a spacer key) so
+  // `make(undefined)` doesn't throw.
+  if (!fieldData) {
+    return null
+  }
   return fieldFactory.make(fieldData)
 })
 

package/lib/blocks/lens/components/LensFormView.vue

@@ -52,14 +52,16 @@ const { t } = useTrans({
     a_select_all: 'Select all',
     a_clear_all: 'Clear all',
     a_cancel: 'Cancel',
-    a_apply: 'Apply changes'
+    a_apply: 'Apply changes',
+    empty_column: '(Empty column)'
   },
   ja: {
     title: 'テーブルの表示を更新する',
     a_select_all: 'すべて選択',
     a_clear_all: 'すべて解除',
     a_cancel: 'キャンセル',
-    a_apply: '変更を適用'
+    a_apply: '変更を適用',
+    empty_column: '(空列)'
   }
 })
 
@@ -90,12 +92,32 @@ useDraggable(el, selectOptions, {
 })
 
 function createSelectOptions(): SelectOption[] {
+  // `select` is a subsequence of `selectable` (the editor derives both
+  // from the same ordered list), so we walk them in lockstep to recover
+  // which specific `__empty__` spacer was selected. Real fields are keyed
+  // by membership (order-robust); spacers, which share the `__empty__`
+  // key and can't be told apart by `_selectDict`, are matched positionally
+  // via the shared cursor.
+  let cursor = 0
   return _selectable.value.map((s) => {
+    const isEmpty = s === '__empty__'
+    let value: boolean
+    if (isEmpty) {
+      value = _select.value[cursor] === '__empty__'
+      if (value) {
+        cursor++
+      }
+    } else {
+      value = !!_selectDict.value[s]
+      if (_select.value[cursor] === s) {
+        cursor++
+      }
+    }
     return {
       uid: _uid++,
       key: s,
-      value: _selectDict.value[s],
-      isEmpty: s === '__empty__',
+      value,
+      isEmpty,
       field: props.fields[s],
       override: _overrides[s] || {}
     }
@@ -103,6 +125,11 @@ function createSelectOptions(): SelectOption[] {
 }
 
 function getName(s: SelectOption): string {
+  // Empty spacer columns carry no field definition; show a localized
+  // placeholder label so the row is identifiable in the view editor.
+  if (s.isEmpty) {
+    return t.empty_column
+  }
   return lang === 'ja'
     ? s.override.labelJa || s.field?.labelJa || ''
     : s.override.labelEn || s.field?.labelEn || ''

package/lib/blocks/lens/components/LensTable.vue

@@ -43,11 +43,16 @@ const records = computed(() => props.result?.data ?? [])
 const columnKeys = computed(() => {
   const requested = props.select ?? props.result?.query.select ?? []
   const fetched = props.result?.query.select
-  if (!fetched) {
-    return requested
-  }
-  const fetchedSet = new Set(fetched)
-  return requested.filter((k) => fetchedSet.has(k))
+  const fetchedSet = fetched ? new Set(fetched) : null
+  const visible = fetchedSet
+    ? requested.filter((k) => fetchedSet.has(k))
+    : requested
+  // Give each `__empty__` spacer a unique render key. The select can
+  // contain several `__empty__` entries (blank spacer columns, also used
+  // to inject empty columns into Excel exports); without unique keys they
+  // would collide on the same `columns` map entry and only render once.
+  let emptyIndex = 0
+  return visible.map((k) => (k === '__empty__' ? `__empty__::${emptyIndex++}` : k))
 })
 
 const orders = computed(() => [
@@ -79,6 +84,14 @@ const columns = computedAsync(async () => {
 
   // Build the list of columns based on the resolved column key list.
   for (const key of keys) {
+    // Render `__empty__` spacer keys (uniquified to `__empty__::N`) as
+    // blank columns, matching the empty columns the backend injects into
+    // Excel exports. These carry no field definition.
+    if (key.startsWith('__empty__')) {
+      columns[key] = { width: '128px', cell: { type: 'empty' } }
+      continue
+    }
+
     const _fieldData = cloneDeep(r.fields[key])
 
     if (!_fieldData) {

package/lib/blocks/lens/composables/SetupLens.ts

@@ -1,6 +1,7 @@
 import { type FieldDataType } from '../FieldData'
 import { type FieldDataFor, type FieldProvider, FieldRegistry } from '../FieldRegistry'
 import { provideFieldRegistry } from '../composables/FieldRegistry'
+import { BooleanField } from '../fields/BooleanField'
 import { ContentField } from '../fields/ContentField'
 import { DateField } from '../fields/DateField'
 import { DatetimeField } from '../fields/DatetimeField'
@@ -10,6 +11,7 @@ import { IdField } from '../fields/IdField'
 import { LinkField } from '../fields/LinkField'
 import { NumberField } from '../fields/NumberField'
 import { RelatedManyField } from '../fields/RelatedManyField'
+import { RelatedOneField } from '../fields/RelatedOneField'
 import { SelectField } from '../fields/SelectField'
 import { SlackMessageField } from '../fields/SlackMessageField'
 import { TextField } from '../fields/TextField'
@@ -32,6 +34,7 @@ export function useSetupLens(): SetupLens {
   registerDefaultFields()
 
   function registerDefaultFields(): void {
+    fieldRegistry.register('boolean', (ctx, field) => new BooleanField(ctx, field))
     fieldRegistry.register('content', (ctx, field) => new ContentField(ctx, field))
     fieldRegistry.register('date', (ctx, field) => new DateField(ctx, field))
     fieldRegistry.register('datetime', (ctx, field) => new DatetimeField(ctx, field))
@@ -41,6 +44,7 @@ export function useSetupLens(): SetupLens {
     fieldRegistry.register('number', (ctx, field) => new NumberField(ctx, field))
     fieldRegistry.register('id', (ctx, field) => new IdField(ctx, field))
     fieldRegistry.register('related_many', (ctx, field) => new RelatedManyField(ctx, field, resourceFetcher))
+    fieldRegistry.register('related_one', (ctx, field) => new RelatedOneField(ctx, field, resourceFetcher))
     fieldRegistry.register('select', (ctx, field) => new SelectField(ctx, field))
     fieldRegistry.register('slack_message', (ctx, field) => new SlackMessageField(ctx, field))
     fieldRegistry.register('text', (ctx, field) => new TextField(ctx, field))

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

@@ -0,0 +1,76 @@
+import { type DropdownSection } from '../../../composables/Dropdown'
+import { type TableCell } from '../../../composables/Table'
+import { type BooleanFieldData } from '../FieldData'
+import { type FilterOperator } from '../FilterOperator'
+import { type FilterInput } from '../filter-inputs/FilterInput'
+import { SelectFilterInput } from '../filter-inputs/SelectFilterInput'
+import { Field } from './Field'
+
+const DEFAULTS = {
+  en: { true: 'Yes', false: 'No' },
+  ja: { true: 'はい', false: 'いいえ' }
+} as const
+
+export class BooleanField extends Field<BooleanFieldData> {
+  override tableCell(v: any, _r: any): TableCell {
+    return {
+      type: 'text',
+      value: this.formatValue(v)
+    }
+  }
+
+  override async tableFilterMenu(filters: any[], onFilterUpdated: (filters: any[]) => void): Promise<DropdownSection | null> {
+    // A boolean has exactly two states, so the inline menu is a single
+    // select on `=`. Re-clicking the active value clears the filter.
+    const selected = this.eqFilterValueFor(this.data.key, filters)
+
+    return {
+      type: 'filter',
+      search: false,
+      selected,
+      options: this.filterOptions(),
+      onClick: (v) => { onFilterUpdated?.([this.data.key, '=', selected === v ? null : v]) }
+    }
+  }
+
+  override availableFilters(): Partial<Record<FilterOperator, FilterInput>> {
+    // A boolean is a two-state value, so `=` / `!=` express the filter
+    // more naturally than set membership. The single-value cast preserves
+    // the boolean (it no longer stringifies), so option matching and the
+    // backend comparison stay correct.
+    const selectOne = new SelectFilterInput().options(() => Promise.resolve(this.filterOptions()))
+    return {
+      '=': selectOne,
+      '!=': selectOne
+    }
+  }
+
+  override dataListItemComponent(): any {
+    return this.defineDataListItemComponent((value) => this.formatValue(value))
+  }
+
+  override formInputComponent(): any {
+    throw new Error('Not implemented.')
+  }
+
+  protected filterOptions(): Array<{ value: boolean; label: string }> {
+    return [
+      { value: true, label: this.formatValue(true)! },
+      { value: false, label: this.formatValue(false)! }
+    ]
+  }
+
+  protected formatValue(v: any): string | null {
+    if (v === null || v === undefined) {
+      return null
+    }
+    if (v) {
+      return this.ctx.lang === 'ja'
+        ? (this.data.labelTrueJa ?? DEFAULTS.ja.true)
+        : (this.data.labelTrueEn ?? DEFAULTS.en.true)
+    }
+    return this.ctx.lang === 'ja'
+      ? (this.data.labelFalseJa ?? DEFAULTS.ja.false)
+      : (this.data.labelFalseEn ?? DEFAULTS.en.false)
+  }
+}

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

@@ -20,9 +20,17 @@ export class DateField extends Field<DateFieldData> {
   override availableFilters(): Partial<Record<FilterOperator, FilterInput>> {
     const text = new TextFilterInput()
 
+    // Comparison operators (`>`, `>=`, `<`, `<=`) back date-range filters
+    // such as `invested_date >= X` AND `invested_date < Y`. The value is
+    // an ISO date string, edited as text — same input the `=` / `!=`
+    // operators already use for this field.
     return {
       '=': text,
-      '!=': text
+      '!=': text,
+      '>': text,
+      '>=': text,
+      '<': text,
+      '<=': text
     }
   }