@globalbrain/sefirot 4.46.0 → 4.48.0

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

@@ -1,14 +1,18 @@
 <script setup lang="ts">
 import { computedAsync } from '@vueuse/core'
 import { cloneDeep } from 'lodash-es'
-import { computed } from 'vue'
+import { computed, markRaw } from 'vue'
 import STable from '../../../components/STable.vue'
 import { type DropdownSection } from '../../../composables/Dropdown'
-import { type TableColumns, useTable } from '../../../composables/Table'
+import { type TableCell, type TableColumns, useTable } from '../../../composables/Table'
 import { type FieldData } from '../FieldData'
 import { type LensQuerySort } from '../LensQuery'
 import { type LensResult } from '../LensResult'
 import { useFieldFactory } from '../composables/FieldFactory'
+import { useLensEdit } from '../composables/LensEdit'
+import { provideLensInlineEdit } from '../composables/LensInlineEdit'
+import { type Field } from '../fields/Field'
+import LensTableEditableCell from './LensTableEditableCell.vue'
 
 const props = defineProps<{
   result?: LensResult
@@ -21,6 +25,9 @@ const props = defineProps<{
   select?: string[]
   selected?: any[]
   indexField?: string
+  // When set (and editing is enabled), cells for `showOnUpdate` fields
+  // render a hover edit affordance that opens an inline editor.
+  inlineEdit?: boolean
 }>()
 
 const emit = defineEmits<{
@@ -31,6 +38,12 @@ const emit = defineEmits<{
 }>()
 
 const fieldFactory = useFieldFactory()
+const edit = useLensEdit()
+
+// Track which cell's inline editor is open so opening one closes any other.
+provideLensInlineEdit()
+
+const editableCellComponent = markRaw(LensTableEditableCell)
 
 const records = computed(() => props.result?.data ?? [])
 
@@ -105,7 +118,48 @@ const columns = computedAsync(async () => {
 
     const field = fieldFactory.make(overriddenFieldData)
 
-    columns[key] = field.tableColumn()
+    const column = field.tableColumn()
+
+    // When editing is enabled, clicking the row-identifier cell opens the record
+    // sheet (view + per-field edit + delete) instead of following a link. Keyed
+    // off the configured index field for any field type — a slug/code identifier
+    // opens the sheet just like an `id` — so other id-type columns (e.g. a
+    // `company_id` reference link) keep their own navigation.
+    if (
+      edit?.editable
+      && key === edit.indexField
+    ) {
+      const original = column.cell
+      column.cell = (v: any, r: any): TableCell<any, any> => {
+        const cell = typeof original === 'function' ? original(v, r) : original
+        return {
+          ...(cell as TableCell<any, any>),
+          link: null,
+          color: 'info',
+          onClick: () => edit.openSheet(r)
+        } as TableCell<any, any>
+      }
+    } else if (
+      props.inlineEdit
+      && edit?.editable
+      && key !== edit.indexField
+      && overriddenFieldData.showOnUpdate === true
+      && field.isSubmittable()
+      && field.supportsOptimisticUpdate()
+      && hasFormInput(field)
+    ) {
+      // Editable fields render a custom cell with a hover edit affordance
+      // that opens an inline editor (reusing the field's form input + the
+      // edit context's save). Sort/filter menus on the column are kept.
+      // Fields without a real input (or display-only ones) stay read-only.
+      column.cell = {
+        type: 'component',
+        component: editableCellComponent,
+        props: { field, fieldKey: key }
+      }
+    }
+
+    columns[key] = column
 
     const dropdown: DropdownSection[] = []
 
@@ -132,7 +186,11 @@ const table = useTable({
   records,
   orders,
   columns,
-  indexField: props.indexField,
+  // A getter (not a snapshot) so the selection key stays reactive: `indexField`
+  // can change after mount — e.g. an editable catalog resolves permissions async
+  // and flips from positional keys to `id`. STable reads this inside a computed,
+  // so the getter establishes the dependency and selection re-keys correctly.
+  get indexField() { return props.indexField },
   borderless: true
 })
 
@@ -147,10 +205,26 @@ function onFilterUpdated(filter: any[]) {
 function onSortUpdated(sort: LensQuerySort) {
   emit('sort-updated', sort)
 }
+
+// Some field types do not implement a form input (they `throw new
+// Error('Not implemented.')`). Only upgrade a cell to the inline editor when
+// the field actually has an input component, otherwise leave it read-only so a
+// backend that marks such a field `showOnUpdate` renders a plain cell instead
+// of a pencil that crashes on click.
+function hasFormInput(field: Field<FieldData>): boolean {
+  try {
+    return !!field.formInputComponent()
+  } catch {
+    return false
+  }
+}
 </script>
 
 <template>
-  <div class="LensTable" :class="{ 'is-loading': loading, 'is-empty': (result?.data.length ?? 0) === 0 }">
+  <div
+    class="LensTable"
+    :class="{ 'is-loading': loading, 'is-empty': (result?.data.length ?? 0) === 0 }"
+  >
     <STable
       v-if="Object.keys(columns).length > 0"
       class="table"

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

@@ -0,0 +1,285 @@
+<script setup lang="ts">
+import IconPencilSimple from '~icons/ph/pencil-simple'
+import { useElementBounding } from '@vueuse/core'
+import { computed, nextTick, onUnmounted, ref, shallowRef, watch } from 'vue'
+import SButton from '../../../components/SButton.vue'
+import { useManualDropdownPosition } from '../../../composables/Dropdown'
+import { useTrans } from '../../../composables/Lang'
+import { useValidation } from '../../../composables/Validation'
+import { type FieldData } from '../FieldData'
+import { useLensEdit } from '../composables/LensEdit'
+import { useLensInlineEdit } from '../composables/LensInlineEdit'
+import { type Field } from '../fields/Field'
+
+const props = defineProps<{
+  field: Field<FieldData>
+  fieldKey: string
+  value: any
+  record: Record<string, any>
+}>()
+
+const { t } = useTrans({
+  en: { cancel: 'Cancel', save: 'Save', edit: 'Edit' },
+  ja: { cancel: 'キャンセル', save: '保存', edit: '編集' }
+})
+
+const edit = useLensEdit()
+const inline = useLensInlineEdit()
+
+const myKey = computed(() => `${edit?.resolveId(props.record)}:${props.fieldKey}`)
+const editing = computed(() => inline?.activeKey.value === myKey.value)
+
+// If the backing value is replaced while this editor is open — a refresh banner
+// apply, a parent `refresh()`, or a requery that keeps this row visible — the
+// `model` captured back in `start()` is now stale, and saving it would overwrite
+// the freshly fetched cell. Close the editor so the user re-opens against the
+// current value. Our own optimistic save also mutates `props.value`, but `apply()`
+// calls `inline.stop()` synchronously right after, so `editing` is already false
+// by the time this (async) watcher flushes — it won't fight a normal save. User
+// typing only touches the local `model`, never `props.value`, so it won't trip.
+watch(
+  () => props.value,
+  () => { if (editing.value) { inline?.stop() } }
+)
+
+// STable virtualization can unmount this row (and its teleported editor) while
+// scrolling. If this cell holds the active editor, clear the shared active key
+// on unmount so a later remount doesn't reopen a blank editor (the local
+// `inputComponent`/`model` are only set by `start()`).
+onUnmounted(() => {
+  if (inline?.activeKey.value === myKey.value) {
+    inline.stop()
+  }
+})
+
+// Reuse the field's own table-cell rendering for the display value so the
+// label mapping (e.g. select option labels) matches the read-only columns.
+// Falls back to a plain representation for non-text displays.
+const displayValue = computed(() => {
+  try {
+    const cell = props.field.tableColumn().cell
+    const resolved: any = typeof cell === 'function' ? cell(props.value, props.record) : cell
+    if (resolved && (resolved.type === 'text' || resolved.type === 'number')) {
+      return resolved.value ?? ''
+    }
+    // `state` cells (e.g. a select with displayAs: 'state') carry the localized
+    // label, not the raw payload — show that rather than falling through.
+    if (resolved && resolved.type === 'state') {
+      return resolved.label ?? ''
+    }
+  } catch {
+    // Field types without a text cell fall through to the generic display.
+  }
+
+  const v = props.value
+  if (v == null) {
+    return ''
+  }
+  if (Array.isArray(v)) {
+    return v.join(', ')
+  }
+  if (typeof v === 'object') {
+    return v.display ?? v.value ?? ''
+  }
+  return String(v)
+})
+
+// --- Editor (a floating box anchored to the cell, escaping table overflow) ---
+
+const anchor = ref<HTMLElement | null>(null)
+const editorEl = ref<HTMLElement | null>(null)
+const bounds = useElementBounding(anchor)
+const { inset, update } = useManualDropdownPosition(anchor)
+
+const inputComponent = shallowRef<any>(null)
+const model = ref<any>(null)
+
+const { validation, validate, reset } = useValidation(
+  () => ({ input: model.value }),
+  () => ({ input: props.field.generateValidationRules() })
+)
+
+const editorStyle = computed(() => ({
+  ...inset.value,
+  width: `${Math.max(bounds.width.value, 240)}px`
+}))
+
+function start() {
+  inputComponent.value = props.field.formInputComponent()
+  model.value = props.field.payloadToInput(props.value ?? props.field.inputEmptyValue())
+  reset()
+  inline?.start(myKey.value)
+  nextTick(() => {
+    update()
+    const el = editorEl.value?.querySelector(
+      'input, textarea, [contenteditable], [tabindex]'
+    ) as HTMLElement | null
+    el?.focus()
+  })
+}
+
+function cancel() {
+  inline?.stop()
+}
+
+async function apply() {
+  // Snapshot the value we're editing so we can detect the backing cell being
+  // replaced out from under us during validation (checked below).
+  const editedValue = props.value
+
+  // Client-side validation only; server-only rules (e.g. `unique`) are enforced
+  // by the background write, which surfaces a snackbar on rejection.
+  if (!(await validate())) {
+    return
+  }
+
+  // A wholesale refresh (refresh banner, a parent `refresh()`, a route change)
+  // can swap the backing row during the validate microtask. If this cell's value
+  // changed, `model` now predates the fresh value and persisting it would clobber
+  // the just-fetched cell — bail. The value watcher above also closes the editor,
+  // but it flushes asynchronously and can't abort this already-running save, so
+  // re-check here against the snapshot rather than relying on its ordering.
+  if (props.value !== editedValue) {
+    return
+  }
+
+  // Optimistic: patch + persist in the background, then close immediately.
+  edit!.save(props.record, {
+    [props.fieldKey]: props.field.inputToPayload(model.value)
+  })
+
+  // Only close if this cell is still the active one: the user may have started
+  // editing another cell while validating, and an unconditional stop would
+  // clear that new editor's shared key.
+  if (inline?.activeKey.value === myKey.value) {
+    inline.stop()
+  }
+}
+
+function onEditorKeydown(event: KeyboardEvent) {
+  if (event.key === 'Escape') {
+    event.preventDefault()
+    cancel()
+    return
+  }
+  // Enter saves only from a plain text-like input. A textarea inserts a
+  // newline, and controls that handle Enter themselves (e.g. a dropdown that
+  // opens its menu on Enter) must keep it — otherwise a keyboard user submits
+  // the old value instead of choosing an option.
+  if (event.key === 'Enter' && isTextLikeInput(event.target)) {
+    event.preventDefault()
+    apply()
+  }
+}
+
+function isTextLikeInput(target: EventTarget | null): boolean {
+  const el = target as HTMLElement | null
+  if (!el || el.tagName !== 'INPUT') {
+    return false
+  }
+  const type = (el as HTMLInputElement).type
+  return ['text', 'search', 'url', 'email', 'tel', 'password', 'number'].includes(type)
+}
+</script>
+
+<template>
+  <div ref="anchor" class="LensTableEditableCell" :class="{ editing }">
+    <span class="value">{{ displayValue }}</span>
+    <button
+      class="edit"
+      type="button"
+      :aria-label="`${t.edit} ${field.label()}`"
+      @click="start"
+    >
+      <IconPencilSimple class="edit-icon" />
+    </button>
+
+    <Teleport v-if="editing && inputComponent" to="#sefirot-modals">
+      <div
+        ref="editorEl"
+        class="LensTableEditableCellEditor"
+        :style="editorStyle"
+        @keydown="onEditorKeydown"
+      >
+        <component :is="inputComponent" v-model="model" :validation="validation.input" />
+        <div class="actions">
+          <SButton size="mini" :label="t.cancel" @click="cancel" />
+          <SButton size="mini" mode="info" :label="t.save" @click="apply" />
+        </div>
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<style scoped lang="postcss">
+/* Mirror STableCellText's box so the cell fills the row height instead of
+   collapsing, leaving room on the right for the hover edit affordance. */
+.LensTableEditableCell {
+  position: relative;
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  min-height: 40px;
+  padding: 8px 36px 8px 16px;
+}
+
+.value {
+  line-height: 24px;
+  font-size: var(--table-cell-font-size);
+  font-weight: var(--table-cell-font-weight);
+  color: var(--c-text-1);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.edit {
+  position: absolute;
+  top: 50%;
+  right: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  transform: translateY(-50%);
+  border-radius: 6px;
+  color: var(--c-text-2);
+  opacity: 0;
+  transition: opacity 0.1s, background-color 0.1s, color 0.1s;
+}
+
+.LensTableEditableCell:hover .edit,
+.LensTableEditableCell.editing .edit {
+  opacity: 1;
+}
+
+.edit:hover {
+  background-color: var(--c-bg-mute-1);
+  color: var(--c-text-1);
+}
+
+.edit-icon {
+  width: 14px;
+  height: 14px;
+}
+
+.LensTableEditableCellEditor {
+  position: fixed;
+  z-index: var(--z-index-sheet, 2000);
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 8px;
+  border: 1px solid var(--c-border);
+  border-radius: 8px;
+  background-color: var(--c-bg-1);
+  box-shadow: var(--shadow-depth-3);
+}
+
+.actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+</style>

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

@@ -0,0 +1,146 @@
+import cloneDeep from 'lodash-es/cloneDeep'
+import { type Ref, onScopeDispose, reactive, watch } from 'vue'
+import { useUrlQuerySync } from '../../../composables/Url'
+import { FilterOperatorLabelDict } from '../FilterOperator'
+import { type LensQuerySort } from '../LensQuery'
+
+export interface CatalogUrlQuerySyncState {
+  query: Ref<string | null>
+  filters: Ref<any[]>
+  sort: Ref<LensQuerySort[]>
+  page: Ref<number>
+}
+
+const filterOperators = new Set(Object.keys(FilterOperatorLabelDict))
+
+// The sync owns a fixed set of query param keys (`q`, `filters`, `sort`,
+// and `page`), so two active instances on the same page would overwrite
+// each other's params. Track active instances to warn about this misuse.
+let activeCount = 0
+
+/**
+ * Sync the catalog state with the URL query string via `useUrlQuerySync`.
+ * `filters` and `sort` are carried as JSON since their nested array
+ * structure (with non-string values) cannot survive a flat query string.
+ *
+ * `onChange` is called whenever the synced state changes after the
+ * initial setup. State changes coming from the catalog UI already
+ * trigger a fetch in their own handlers, so the callback is expected to
+ * be debounced; its real purpose is to fetch on URL-driven changes
+ * (browser back/forward, hand-edited URL) which have no other
+ * refresh path.
+ */
+export function useCatalogUrlQuerySync(
+  state: CatalogUrlQuerySyncState,
+  onChange: () => void
+): void {
+  if (import.meta.env.DEV) {
+    activeCount++
+    if (activeCount > 1) {
+      console.warn(
+        '[sefirot] Multiple `LensCatalog` components with `url-sync` enabled'
+        + ' are active at the same time. They will overwrite each other\'s'
+        + ' query params (`q`, `filters`, `sort`, and `page`). Enable'
+        + ' `url-sync` on at most one catalog per page.'
+      )
+    }
+    onScopeDispose(() => { activeCount-- })
+  }
+
+  // URL params are user-editable, so anything malformed falls back to
+  // the state's initial value, exactly as if the param was absent. The
+  // snapshots must be deep clones: the refs' arrays are later mutated in
+  // place (inline filter updates `push`/`splice` into `filters`, and the
+  // URL -> state sync splices arrays as well), which would otherwise
+  // silently drift these "initial" values along with the current state.
+  const defaultFilters = cloneDeep(state.filters.value)
+  const defaultSort = cloneDeep(state.sort.value)
+  const defaultPage = state.page.value
+
+  const urlState = reactive({
+    q: state.query,
+    filters: state.filters,
+    sort: state.sort,
+    page: state.page
+  })
+
+  useUrlQuerySync(urlState, {
+    casts: {
+      q: (v) => castQ(v),
+      filters: (v) => castFilters(v) ?? cloneDeep(defaultFilters),
+      sort: (v) => castSort(v) ?? cloneDeep(defaultSort),
+      page: (v) => castPage(v) ?? defaultPage
+    },
+    serializers: {
+      filters: (v) => JSON.stringify(v),
+      sort: (v) => JSON.stringify(v)
+    }
+  })
+
+  // Registered after `useUrlQuerySync` on purpose: the initial URL ->
+  // state application happens synchronously inside it, before this
+  // watcher exists, so the initial fetch (on mounted) is not duplicated.
+  watch(urlState, onChange, { deep: true })
+}
+
+function castQ(value: any): string | null {
+  return typeof value === 'string' && value !== '' ? value : null
+}
+
+function castFilters(value: any): any[] | null {
+  if (typeof value !== 'string') {
+    return null
+  }
+  try {
+    const parsed = JSON.parse(value)
+    return isFilters(parsed) ? parsed : null
+  } catch {
+    return null
+  }
+}
+
+// Filters are a list of entries where an entry is either a condition
+// tuple `[field, operator, value]` or a group `['$and' | '$or', entries]`.
+// Refer to `groupToLensFilters` in `LensFormFilter.vue`.
+function isFilters(value: unknown): value is any[] {
+  return Array.isArray(value) && value.every(isFilterEntry)
+}
+
+function isFilterEntry(value: unknown): boolean {
+  if (!Array.isArray(value)) {
+    return false
+  }
+  if (value[0] === '$and' || value[0] === '$or') {
+    return value.length === 2 && isFilters(value[1])
+  }
+  return value.length === 3
+    && typeof value[0] === 'string'
+    && typeof value[1] === 'string'
+    && filterOperators.has(value[1])
+}
+
+function castSort(value: any): LensQuerySort[] | null {
+  if (typeof value !== 'string') {
+    return null
+  }
+  try {
+    const parsed = JSON.parse(value)
+    return isSort(parsed) ? parsed : null
+  } catch {
+    return null
+  }
+}
+
+function isSort(value: unknown): value is LensQuerySort[] {
+  return Array.isArray(value) && value.every((entry) => {
+    return Array.isArray(entry)
+      && entry.length === 2
+      && typeof entry[0] === 'string'
+      && (entry[1] === 'asc' || entry[1] === 'desc')
+  })
+}
+
+function castPage(value: any): number | null {
+  const page = Number(value)
+  return Number.isInteger(page) && page >= 1 ? page : null
+}

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

@@ -0,0 +1,59 @@
+import { type InjectionKey, inject, provide } from 'vue'
+
+/**
+ * The edit context shared from `LensCatalog` down to the inline editable
+ * cells and the record sheet via provide/inject. It carries the entity
+ * identity plus the CRUD operations (which talk to the backend and patch
+ * the catalog's in-memory records optimistically) and the sheet controls.
+ */
+export interface LensEditContext {
+  /** Whether the catalog has editing enabled at all. */
+  editable: boolean
+
+  /** Whether new records may be created. */
+  creatable: boolean
+
+  /** The entity key being edited (e.g. `topic`, `user`). */
+  entity: string
+
+  /** The record-identity field key (e.g. `id`). */
+  indexField: string
+
+  /** Resolve a record's identifier, unwrapping the id field's object shape. */
+  resolveId: (record: Record<string, any>) => any
+
+  /**
+   * Apply a partial update to an existing record. Optimistic: patches the
+   * record in memory immediately and persists in the background, so it returns
+   * synchronously without waiting for the (potentially slow) write.
+   */
+  save: (record: Record<string, any>, values: Record<string, any>) => void
+
+  /**
+   * Create a new record. Blocking: resolves once the record is persisted and
+   * the catalog has been refreshed with the canonical state.
+   */
+  create: (values: Record<string, any>) => Promise<Record<string, any>>
+
+  /**
+   * Delete a record. Optimistic: removes it from the catalog immediately and
+   * persists in the background, so it returns synchronously.
+   */
+  remove: (record: Record<string, any>) => void
+
+  /** Open the record sheet for an existing record (view + per-field edit). */
+  openSheet: (record: Record<string, any>) => void
+
+  /** Open the record sheet in create mode. */
+  openCreate: () => void
+}
+
+const LensEditKey: InjectionKey<LensEditContext> = Symbol('LensEdit')
+
+export function provideLensEdit(ctx: LensEditContext): void {
+  provide(LensEditKey, ctx)
+}
+
+export function useLensEdit(): LensEditContext | null {
+  return inject(LensEditKey, null)
+}

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

@@ -0,0 +1,36 @@
+import { type InjectionKey, type Ref, inject, provide, ref } from 'vue'
+
+/**
+ * Tracks which table cell currently has its inline editor open, so that
+ * opening one editor closes any other. The key is `${recordId}:${fieldKey}`.
+ */
+export interface LensInlineEditContext {
+  /** The key of the cell currently being edited, or null. */
+  activeKey: Ref<string | null>
+
+  /** Open the editor for the given cell key (closing any other). */
+  start: (key: string) => void
+
+  /** Close the active editor. */
+  stop: () => void
+}
+
+const LensInlineEditKey: InjectionKey<LensInlineEditContext> = Symbol('LensInlineEdit')
+
+export function provideLensInlineEdit(): LensInlineEditContext {
+  const activeKey = ref<string | null>(null)
+
+  const ctx: LensInlineEditContext = {
+    activeKey,
+    start: (key) => { activeKey.value = key },
+    stop: () => { activeKey.value = null }
+  }
+
+  provide(LensInlineEditKey, ctx)
+
+  return ctx
+}
+
+export function useLensInlineEdit(): LensInlineEditContext | null {
+  return inject(LensInlineEditKey, null)
+}