@globalbrain/sefirot 4.49.0 → 4.51.0

package/lib/blocks/lens/FieldData.ts

@@ -146,7 +146,7 @@ export interface DecimalFieldData extends FieldDataBase {
 
 export interface SelectFieldData extends FieldDataBase {
   type: 'select'
-  displayAs: 'text' | 'state'
+  displayAs: 'text' | 'state' | 'pills'
   inputAs: 'dropdown' | 'radio'
   placeholderEn: string | null
   placeholderJa: string | null

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

@@ -147,24 +147,47 @@ export interface Props {
   // *custom* `indexField`, however, must be listed in `select` explicitly (an
   // empty/default `select` drops it from the rendered columns, leaving the rows
   // with no opener).
-  editable?: boolean
-
-  // Whether new records can be created (enables create mode in the sheet
-  // and the exposed `openCreate()` method). Requires `editable`.
+  //
+  // Turning this on also enables `creatable`, `deletable`, and `inlineEditable`
+  // by default; pass `false` to any of them to opt out.
+  //
+  // Pass a predicate `(record) => boolean` instead of `true` to allow editing
+  // only some rows (e.g. from a per-record policy): the inline affordance and
+  // the sheet's per-field edit are hidden for the rows it rejects.
+  editable?: boolean | ((record: Record<string, any>) => boolean)
+
+  // Whether records can be deleted from the sheet. Defaults to enabled for an
+  // editable catalog. Pass `false` to hide the delete button entirely, or a
+  // predicate `(record) => boolean` to allow deleting only some rows (e.g. from
+  // a per-record policy). Delete is reachable only through the sheet, so this
+  // has no effect unless the catalog is `editable`.
+  deletable?: boolean | ((record: Record<string, any>) => boolean)
+
+  // Whether new records can be created (enables create mode in the sheet and
+  // the exposed `openCreate()` method). Defaults to enabled when the catalog is
+  // `editable`; pass `false` to disable.
   creatable?: boolean
 
   // Width of the record sheet (any valid CSS width). Defaults to `480px`.
   sheetWidth?: string
 
-  // Enable inline editing directly in the table: cells for `showOnUpdate`
-  // fields gain a hover edit affordance that opens an inline editor. Requires
-  // `editable` (it reuses the same CRUD edit context as the sheet).
-  inlineEdit?: boolean
+  // Enable inline editing directly in the table: cells for `showOnUpdate` fields
+  // gain a hover edit affordance that opens an inline editor (reusing the sheet's
+  // CRUD edit context). Defaults to enabled when the catalog is `editable`; pass
+  // `false` to restrict editing to the record sheet.
+  inlineEditable?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
   canFilter: true,
-  canSort: true
+  canSort: true,
+  // Default these on so an editable catalog gets create / delete / inline edit
+  // without opting in to each. A boolean prop can't tell "omitted" from `false`
+  // (Vue casts an absent boolean to `false`), so they default on here and the
+  // resolvers below gate them on `editable`; pass the prop `false` to opt out.
+  creatable: true,
+  deletable: true,
+  inlineEditable: true
 })
 
 const selected = defineModel<any[]>('selected')
@@ -1121,9 +1144,10 @@ async function openSheet(record: Record<string, any>): Promise<void> {
 }
 
 function openCreate(): void {
-  // `creatable` is the prop that enables creation. Honor it here even though
-  // this method is exposed (and provided to children).
-  if (!props.creatable) {
+  // Creation is enabled by `creatable`, which defaults to on for an editable
+  // catalog. Honor it here even though this method is exposed (and provided to
+  // children).
+  if (!props.editable || !props.creatable) {
     return
   }
   // Supersede any in-flight openSheet `/show` so it can't open over the create
@@ -1136,6 +1160,27 @@ function openCreate(): void {
   sheet.on()
 }
 
+// Catalog-level editing gate: `editable` is set (boolean `true` or a predicate)
+// and the rows carry the index field needed to resolve a record's id.
+function editEnabled(): boolean {
+  return !!props.editable && rowsCarryIndexField.value
+}
+
+// Per-record refinement: a predicate `editable`/`deletable` decides each row, a
+// boolean applies to all.
+function canEdit(record: Record<string, any>): boolean {
+  return editEnabled() && (typeof props.editable === 'function' ? props.editable(record) : true)
+}
+
+// Delete is a stronger action than edit and rides the same editable sheet, so a
+// row must be editable before it can be deleted — building on `canEdit` makes a
+// per-record `editable` predicate gate delete too (a row it rejects is never
+// deletable). `deletable` then refines further: on unless explicitly `false`, or
+// its own per-record predicate.
+function canDelete(record: Record<string, any>): boolean {
+  return canEdit(record) && (typeof props.deletable === 'function' ? props.deletable(record) : props.deletable)
+}
+
 provideLensEdit({
   // Getters so the injected context tracks prop changes after mount (e.g.
   // permissions resolving async, or a flag toggling `editable` off): LensTable
@@ -1145,8 +1190,8 @@ provideLensEdit({
   // trigger a refetch to pull in the identifier, but it lands asynchronously —
   // keep editing off until the rows actually carry it, so a save in that window
   // can't `resolveId()` to `undefined`.
-  get editable() { return !!props.editable && rowsCarryIndexField.value },
-  get creatable() { return !!props.creatable },
+  get editable() { return editEnabled() },
+  get creatable() { return !!props.editable && props.creatable },
   // Use the same `__no_entity__` fallback as the search / CRUD requests so slot
   // side-channel saves (which read this) target the same entity, not an empty one.
   get entity() { return entityName.value },
@@ -1155,6 +1200,8 @@ provideLensEdit({
   // resolves (or changes) after mount — otherwise the new identifier column stays
   // non-clickable while the old field is still treated as the id.
   get indexField() { return props.indexField ?? 'id' },
+  canEdit,
+  canDelete,
   resolveId,
   save,
   create,
@@ -1288,7 +1335,7 @@ defineExpose({
           :index-field="tableIndexField"
           :selected
           :clickable-fields
-          :inline-edit
+          :inline-editable
           @filter-updated="onInlineFilterUpdated"
           @sort-updated="onSortUpdated"
           @update:selected="onUpdateSelected"

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

@@ -126,6 +126,11 @@ const saving = ref(false)
 // sheet opened; `onCreate` re-checks it too.
 const creatable = computed(() => !!edit?.creatable)
 
+// Whether the open record may be deleted. Reactive (a getter on the edit
+// context) so the delete button hides if a per-record `deletable` predicate, or
+// a permission change, rejects it after the sheet has opened.
+const deletable = computed(() => !!props.record && !!edit?.canDelete(props.record))
+
 // Backend-only validation errors (e.g. `unique`) returned by a rejected
 // create, fed to Vuelidate via `$externalResults` so they surface on the
 // offending field. The create form's keys are the bare field keys, matching
@@ -255,7 +260,11 @@ function saveRecord(values: Record<string, any>): Promise<void> {
   // but saving against the partial row mid-`/show` (or after it failed) could
   // overwrite a not-yet-loaded detail field with an empty value — the built-in
   // fields avoid this by not rendering until the record is ready.
-  if (props.loading || props.error || !props.record || !edit) {
+  //
+  // Also honor the per-record edit gate: a custom slot editor funnels through
+  // here, so a row a `editable` predicate rejects must not be saved through the
+  // slot any more than through the built-in cell / field editors.
+  if (props.loading || props.error || !props.record || !edit || !edit.canEdit(props.record)) {
     return Promise.resolve()
   }
   edit.save(props.record, values)
@@ -270,6 +279,10 @@ const slotProps = computed(() => ({
   // record has loaded; `save` also hard-refuses while loading/error as a guard.
   loading: props.loading ?? false,
   error: props.error ?? false,
+  // Whether a per-record `editable` predicate allows editing this row, so a slot
+  // editor can disable its own controls for a rejected row; `save` enforces it
+  // regardless, but otherwise the refusal is only visible as a silent no-op.
+  canEdit: !!props.record && !!edit?.canEdit(props.record),
   save: saveRecord
 }))
 </script>
@@ -338,7 +351,7 @@ const slotProps = computed(() => ({
             @click="onCreate"
           />
         </template>
-        <template v-else-if="record && !loading && !error">
+        <template v-else-if="record && !loading && !error && deletable">
           <template v-if="confirmingDelete.state.value">
             <span class="confirm-text">{{ t.confirm_delete }}</span>
             <SButton size="medium" :label="t.cancel" @click="confirmingDelete.off" />
@@ -457,6 +470,10 @@ const slotProps = computed(() => ({
   border-top: 1px solid var(--c-divider);
 }
 
+.footer:empty {
+  display: none;
+}
+
 .confirm-text {
   margin-right: auto;
   font-size: 13px;

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

@@ -22,7 +22,7 @@ const { t } = useTrans({
 
 const edit = useLensEdit()
 
-const editable = computed(() => !!edit && (props.field as any).data?.showOnUpdate === true)
+const editable = computed(() => !!edit?.canEdit(props.record) && (props.field as any).data?.showOnUpdate === true)
 
 // Some field types do not implement a detail renderer or an editable input
 // (they `throw new Error('Not implemented.')`). Resolve them defensively so a
@@ -121,6 +121,14 @@ async function apply() {
     return
   }
 
+  // A per-record `editable` predicate can flip to reject this row while the editor
+  // is open (e.g. a refresh marks it locked). Re-check before persisting so an
+  // already-open editor can't save a row the policy now rejects.
+  if (!canEdit.value) {
+    editing.value = false
+    return
+  }
+
   // Optimistic: patch + persist in the background, then close immediately.
   edit!.save(props.record, {
     [props.fieldKey]: props.field.inputToPayload(model.value)

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

@@ -27,7 +27,7 @@ const props = defineProps<{
   indexField?: string
   // When set (and editing is enabled), cells for `showOnUpdate` fields
   // render a hover edit affordance that opens an inline editor.
-  inlineEdit?: boolean
+  inlineEditable?: boolean
 }>()
 
 const emit = defineEmits<{
@@ -140,7 +140,7 @@ const columns = computedAsync(async () => {
         } as TableCell<any, any>
       }
     } else if (
-      props.inlineEdit
+      props.inlineEditable
       && edit?.editable
       && key !== edit.indexField
       && overriddenFieldData.showOnUpdate === true

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

@@ -3,9 +3,13 @@ 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 SLink from '../../../components/SLink.vue'
+import SPill, { type Mode as PillMode } from '../../../components/SPill.vue'
+import SState, { type Mode as StateMode } from '../../../components/SState.vue'
 import { useManualDropdownPosition } from '../../../composables/Dropdown'
 import { useTrans } from '../../../composables/Lang'
 import { useValidation } from '../../../composables/Validation'
+import { day } from '../../../support/Day'
 import { type FieldData } from '../FieldData'
 import { useLensEdit } from '../composables/LensEdit'
 import { useLensInlineEdit } from '../composables/LensInlineEdit'
@@ -29,6 +33,10 @@ const inline = useLensInlineEdit()
 const myKey = computed(() => `${edit?.resolveId(props.record)}:${props.fieldKey}`)
 const editing = computed(() => inline?.activeKey.value === myKey.value)
 
+// A predicate `editable` on the catalog can disable editing per row; hide the
+// affordance and refuse to open the editor when this record is rejected.
+const canEdit = computed(() => !!edit?.canEdit(props.record))
+
 // 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
@@ -54,21 +62,57 @@ onUnmounted(() => {
 
 // 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(() => {
+const resolvedCell = computed<any>(() => {
   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 ?? ''
-    }
+    return typeof cell === 'function' ? cell(props.value, props.record) : cell
   } catch {
-    // Field types without a text cell fall through to the generic display.
+    // Field types without a usable cell fall through to the generic display.
+    return null
+  }
+})
+
+// A `pills` cell (e.g. a multi-select with displayAs: 'pills') renders as pills
+// rather than text, mirroring the read-only `STableCellPills` column.
+const displayPills = computed<{ label: string; color?: PillMode }[] | null>(() => {
+  const cell = resolvedCell.value
+  return cell && cell.type === 'pills' ? cell.pills : null
+})
+
+// A `state` cell (e.g. a select with displayAs: 'state') renders as a status
+// badge rather than its bare label, mirroring the read-only `STableCellState`
+// column.
+const displayState = computed<{ label: string; mode?: StateMode } | null>(() => {
+  const cell = resolvedCell.value
+  return cell && cell.type === 'state' ? { label: cell.label, mode: cell.mode } : null
+})
+
+// A text cell carrying a `link` (or `onClick`) — e.g. a LinkField — renders as a
+// link rather than bare text, mirroring the read-only STableCellText so a column
+// that was clickable before inline editing was enabled stays clickable instead of
+// degrading to plain text. The text itself comes from `displayValue` below.
+const displayLink = computed<{ link: string | null; onClick?: (v: any, r: any) => void } | null>(() => {
+  const cell = resolvedCell.value
+  if (cell && cell.type === 'text' && (cell.link != null || typeof cell.onClick === 'function')) {
+    return { link: cell.link ?? null, onClick: cell.onClick }
+  }
+  return null
+})
+
+// Falls back to a plain representation for non-text displays (pills and state
+// cells are rendered as their own components in the template above).
+const displayValue = computed(() => {
+  const resolved: any = resolvedCell.value
+  if (resolved && (resolved.type === 'text' || resolved.type === 'number')) {
+    return resolved.value ?? ''
+  }
+
+  // A `day` cell (e.g. a DateField) carries a Day value plus a format; render the
+  // formatted day — mirroring the read-only STableCellDay — so an inline-editable
+  // date column shows e.g. `YYYY-MM-DD` rather than the raw ISO/timestamp string
+  // the generic fallback below would otherwise surface.
+  if (resolved && resolved.type === 'day') {
+    return resolved.value ? day(resolved.value).format(resolved.format ?? 'YYYY-MM-DD HH:mm:ss') : ''
   }
 
   const v = props.value
@@ -105,6 +149,10 @@ const editorStyle = computed(() => ({
 }))
 
 function start() {
+  if (!canEdit.value) {
+    return
+  }
+
   inputComponent.value = props.field.formInputComponent()
   model.value = props.field.payloadToInput(props.value ?? props.field.inputEmptyValue())
   reset()
@@ -143,6 +191,19 @@ async function apply() {
     return
   }
 
+  // A per-record `editable` predicate can flip to reject this row while the editor
+  // is open (e.g. a refresh marks it locked) — `start()` only gates opening, so
+  // re-check before persisting. Without this an already-open editor could save a
+  // row the policy now rejects. Close only if this cell is still the active one
+  // (mirrors the post-save close below) so bailing can't wipe an editor the user
+  // opened on another cell during the `await validate()`.
+  if (!canEdit.value) {
+    if (inline?.activeKey.value === myKey.value) {
+      inline.stop()
+    }
+    return
+  }
+
   // Optimistic: patch + persist in the background, then close immediately.
   edit!.save(props.record, {
     [props.fieldKey]: props.field.inputToPayload(model.value)
@@ -184,8 +245,33 @@ function isTextLikeInput(target: EventTarget | null): boolean {
 
 <template>
   <div ref="anchor" class="LensTableEditableCell" :class="{ editing }">
-    <span class="value">{{ displayValue }}</span>
+    <div v-if="displayPills" class="pills">
+      <SPill
+        v-for="(pill, i) in displayPills"
+        :key="i"
+        size="mini"
+        :mode="pill.color"
+        :label="pill.label"
+      />
+    </div>
+    <SState
+      v-else-if="displayState"
+      size="mini"
+      :mode="displayState.mode"
+      :label="displayState.label"
+    />
+    <SLink
+      v-else-if="displayLink"
+      class="value link"
+      :href="displayLink.link"
+      :role="displayLink.onClick ? 'button' : null"
+      @click="() => displayLink?.onClick?.(value, record)"
+    >
+      {{ displayValue }}
+    </SLink>
+    <span v-else class="value">{{ displayValue }}</span>
     <button
+      v-if="canEdit"
       class="edit"
       type="button"
       :aria-label="`${t.edit} ${field.label()}`"
@@ -233,6 +319,24 @@ function isTextLikeInput(target: EventTarget | null): boolean {
   text-overflow: ellipsis;
 }
 
+.value.link {
+  color: var(--c-text-info-1);
+  transition: color 0.1s;
+}
+
+.value.link:hover {
+  color: var(--c-text-info-2);
+}
+
+.pills {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+  overflow: hidden;
+}
+
 .edit {
   position: absolute;
   top: 50%;

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

@@ -13,6 +13,12 @@ export interface LensEditContext {
   /** Whether new records may be created. */
   creatable: boolean
 
+  /** Whether the given record may be edited, inline or in the sheet. */
+  canEdit: (record: Record<string, any>) => boolean
+
+  /** Whether the given record may be deleted from the sheet. */
+  canDelete: (record: Record<string, any>) => boolean
+
   /** The entity key being edited (e.g. `topic`, `user`). */
   entity: string
 

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

@@ -1,5 +1,6 @@
 import { xor } from 'lodash-es'
 import { h } from 'vue'
+import SDescPill from '../../../components/SDescPill.vue'
 import SInputCheckboxes from '../../../components/SInputCheckboxes.vue'
 import SInputDropdown from '../../../components/SInputDropdown.vue'
 import SInputRadios from '../../../components/SInputRadios.vue'
@@ -38,6 +39,8 @@ export class SelectField extends Field<SelectFieldData> {
     switch (this.data.displayAs) {
       case 'state':
         return this.tableCellState(v, _r)
+      case 'pills':
+        return this.tableCellPills(v, _r)
       case 'text':
         return this.tableCellText(v, _r)
       default:
@@ -45,6 +48,18 @@ export class SelectField extends Field<SelectFieldData> {
     }
   }
 
+  protected tableCellPills(v: any, _r: any): TableCell {
+    v = Array.isArray(v) ? v : [v]
+
+    return {
+      type: 'pills',
+      pills: this.optionsForValues(v).map((o) => ({
+        label: this.labelForOption(o),
+        color: o.mode
+      }))
+    }
+  }
+
   protected tableCellText(v: any, _r: any): TableCell {
     v = Array.isArray(v) ? v : [v]
 
@@ -95,6 +110,8 @@ export class SelectField extends Field<SelectFieldData> {
       switch (this.data.displayAs) {
         case 'state':
           return this.renderDataListItemValueForState(value)
+        case 'pills':
+          return this.renderDataListItemValueForPills(value)
         case 'text':
           return this.renderDataListItemValueForText(value)
         default:
@@ -103,6 +120,17 @@ export class SelectField extends Field<SelectFieldData> {
     })
   }
 
+  protected renderDataListItemValueForPills(value: any): any {
+    value = Array.isArray(value) ? value : [value]
+
+    return h(SDescPill, {
+      pill: this.optionsForValues(value).map((o) => ({
+        label: this.labelForOption(o),
+        mode: o.mode
+      }))
+    })
+  }
+
   protected renderDataListItemValueForState(value: any): any {
     if (this.data.multiple) {
       throw new Error('Displaying select field as state with multiple option is not supported.')

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@globalbrain/sefirot",
-  "version": "4.49.0",
+  "version": "4.51.0",
   "description": "Vue Components for Global Brain Design System.",
   "keywords": [
     "components",