@globalbrain/sefirot 4.43.5 → 4.45.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,14 +17,17 @@ import { type Rule } from './Rule'
  * }
  */
 export interface FieldDataRegistry {
+  boolean: BooleanFieldData
   content: ContentFieldData
   date: DateFieldData
   datetime: DatetimeFieldData
+  decimal: DecimalFieldData
   file_upload: FileUploadFieldData
   id: IdFieldData
   link: LinkFieldData
   number: NumberFieldData
   related_many: RelatedManyFieldData
+  related_one: RelatedOneFieldData
   select: SelectFieldData
   slack_message: SlackMessageFieldData
   text: TextFieldData
@@ -47,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
@@ -88,6 +99,24 @@ export interface LinkFieldData extends FieldDataBase {
 
 export interface NumberFieldData extends FieldDataBase {
   type: 'number'
+  align: 'left' | 'center' | 'right' | null
+  separator: boolean | null
+  abbr: 'en' | 'ja' | null
+  fractionDigits: number | null
+}
+
+/**
+ * A `decimal` field is rendered identically to a `number` field on the
+ * client. The distinction exists so backends can preserve arbitrary
+ * precision (e.g. sending the value as a string instead of a JS number)
+ * without losing the type-level signal at the spec layer.
+ */
+export interface DecimalFieldData extends FieldDataBase {
+  type: 'decimal'
+  align: 'left' | 'center' | 'right' | null
+  separator: boolean | null
+  abbr: 'en' | 'ja' | null
+  fractionDigits: number | null
 }
 
 export interface SelectFieldData extends FieldDataBase {
@@ -112,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 {
@@ -128,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

@@ -102,6 +102,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 +123,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 +163,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[]>([])
@@ -262,6 +277,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 +357,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 +431,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 +509,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/LensFormOverrideBase.vue

@@ -152,6 +152,12 @@ async function onSave() {
               <SInputCheckbox v-model="freeze" />
             </div>
           </div>
+          <!--
+            Default slot — field-specific override forms (e.g. number /
+            decimal) inject their own `.item` rows here so they line up
+            visually with the base inputs.
+          -->
+          <slot />
         </div>
       </SDoc>
     </SCardBlock>

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

@@ -0,0 +1,166 @@
+<script setup lang="ts" generic="T extends DecimalFieldData | NumberFieldData">
+import { computed, reactive } from 'vue'
+import SInputCheckbox from '../../../components/SInputCheckbox.vue'
+import SInputNumber from '../../../components/SInputNumber.vue'
+import SInputSelect from '../../../components/SInputSelect.vue'
+import { useTrans } from '../../../composables/Lang'
+import { type DecimalFieldData, type NumberFieldData } from '../FieldData'
+import LensFormOverrideBase from './LensFormOverrideBase.vue'
+
+const props = defineProps<{
+  name: string
+  field: T
+  override: T
+}>()
+
+const emit = defineEmits<{
+  cancel: []
+  saved: [field: Partial<T>]
+}>()
+
+const { t } = useTrans({
+  en: {
+    i_align_label: 'Alignment',
+    i_separator_text: 'Separate by comma',
+    i_abbr_label: 'Abbreviation',
+    i_fraction_digits: 'Fraction digits'
+  },
+  ja: {
+    i_align_label: '配置',
+    i_separator_text: 'カンマで区切る',
+    i_abbr_label: '省略表記',
+    i_fraction_digits: '小数点以下の桁数'
+  }
+})
+
+// Local state for the number-specific inputs. Base inputs
+// (label, width, freeze) keep their own state inside
+// `LensFormOverrideBase`; we receive their changes via the `saved`
+// event and merge in our four extras here.
+//
+// `separator` keeps its original `boolean | null` value so a no-op
+// submit (user opens the modal and clicks Finish without touching
+// the checkbox) doesn't promote `null` to `false`. The
+// `separatorModel` computed below adapts `null` to `false` only for
+// the `SInputCheckbox` v-model.
+const data = reactive({
+  align: props.override.align,
+  separator: props.override.separator,
+  abbr: props.override.abbr,
+  fractionDigits: props.override.fractionDigits
+})
+
+// `SInputCheckbox` accepts `boolean | 'indeterminate' | undefined`
+// (not `null`), so adapt at the binding boundary. The model writes
+// the user's `true`/`false` straight into `data.separator`, while
+// `null` from the field-level default stays `null` until the user
+// actually flips the checkbox.
+const separatorModel = computed({
+  get: () => data.separator ?? false,
+  set: (v) => { data.separator = v }
+})
+
+const { t: alignOptions } = useTrans({
+  en: [
+    { label: 'Left', value: 'left' },
+    { label: 'Center', value: 'center' },
+    { label: 'Right', value: 'right' }
+  ],
+  ja: [
+    { label: '左寄せ', value: 'left' },
+    { label: '中央寄せ', value: 'center' },
+    { label: '右寄せ', value: 'right' }
+  ]
+})
+
+// `null` represents "no abbreviation". We expose it as a real option
+// so users can switch back to plain rendering after picking a locale.
+// `SInputSelect` accepts `null` values when the option carries
+// `value: null`.
+const { t: abbrOptions } = useTrans({
+  en: [
+    { label: 'None', value: null },
+    { label: 'English (1K, 1M, 1B)', value: 'en' },
+    { label: 'Japanese (1万, 1億, 1兆)', value: 'ja' }
+  ],
+  ja: [
+    { label: 'なし', value: null },
+    { label: '英語スタイル (1K, 1M, 1B)', value: 'en' },
+    { label: '日本語スタイル (1万, 1億, 1兆)', value: 'ja' }
+  ]
+})
+
+function onSaved(override: Partial<T>): void {
+  // Only include keys whose value diverged from the underlying field
+  // definition — matches what `LensFormOverrideBase` does for the
+  // base inputs. We mutate the payload from the base in place rather
+  // than re-allocating so any keys it already populated (label,
+  // width, freeze) carry through unchanged.
+  //
+  // Plain `!==` (not the base's `isNotNullOrSame`) is intentional: the
+  // four formatting options are tri-state, so clearing a previous
+  // `align: 'right'` back to `null` must actually persist `align: null`
+  // rather than silently inherit the field-level default.
+  const o = override as Record<string, any>
+  if (data.align !== props.field.align) {
+    o.align = data.align
+  }
+  if (data.separator !== props.field.separator) {
+    o.separator = data.separator
+  }
+  if (data.abbr !== props.field.abbr) {
+    o.abbr = data.abbr
+  }
+  if (data.fractionDigits !== props.field.fractionDigits) {
+    o.fractionDigits = data.fractionDigits
+  }
+  emit('saved', o as Partial<T>)
+}
+</script>
+
+<template>
+  <LensFormOverrideBase
+    class="LensFormOverrideNumber"
+    :name
+    :field
+    :label-en="override.labelEn"
+    :label-ja="override.labelJa"
+    :width="override.width"
+    :freeze="override.freeze"
+    @cancel="$emit('cancel')"
+    @saved="onSaved"
+  >
+    <div class="item">
+      <div class="key">{{ t.i_align_label }}</div>
+      <div class="value">
+        <SInputSelect
+          v-model="data.align"
+          size="mini"
+          :options="alignOptions"
+        />
+      </div>
+    </div>
+    <div class="item">
+      <div class="key">{{ t.i_separator_text }}</div>
+      <div class="value">
+        <SInputCheckbox v-model="separatorModel" />
+      </div>
+    </div>
+    <div class="item">
+      <div class="key">{{ t.i_abbr_label }}</div>
+      <div class="value">
+        <SInputSelect
+          v-model="data.abbr"
+          size="mini"
+          :options="abbrOptions"
+        />
+      </div>
+    </div>
+    <div class="item">
+      <div class="key">{{ t.i_fraction_digits }}</div>
+      <div class="value">
+        <SInputNumber v-model="data.fractionDigits" size="mini" />
+      </div>
+    </div>
+  </LensFormOverrideBase>
+</template>

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 || ''