@globalbrain/sefirot 4.47.0 → 4.48.0

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

@@ -0,0 +1,465 @@
+<script setup lang="ts">
+import IconTrash from '~icons/ph/trash'
+import IconX from '~icons/ph/x'
+import { computed, reactive, ref, watch } from 'vue'
+import SButton from '../../../components/SButton.vue'
+import SSheet from '../../../components/SSheet.vue'
+import SSpinner from '../../../components/SSpinner.vue'
+import { provideDataListState } from '../../../composables/DataList'
+import { useTrans } from '../../../composables/Lang'
+import { usePower } from '../../../composables/Power'
+import { useValidation } from '../../../composables/Validation'
+import { type FieldData } from '../FieldData'
+import { useFieldFactory } from '../composables/FieldFactory'
+import { useLensEdit } from '../composables/LensEdit'
+import { extractServerErrors } from '../validation/ServerErrors'
+import LensSheetField from './LensSheetField.vue'
+
+const props = withDefaults(defineProps<{
+  open: boolean
+  mode?: 'view' | 'create'
+  entity: string
+  record?: Record<string, any> | null
+  // Whether the record's full detail is still loading via `/show`. While true,
+  // the view body shows a spinner instead of partial fields.
+  loading?: boolean
+  // Whether the detail load failed. When true, the view body shows an error
+  // (asking the user to reload) instead of a partial record.
+  error?: boolean
+  fields: Record<string, FieldData>
+  indexField?: string
+  width?: string
+}>(), {
+  mode: 'view',
+  indexField: 'id'
+})
+
+const emit = defineEmits<{
+  close: []
+}>()
+
+const { t } = useTrans({
+  en: {
+    create: 'Create',
+    cancel: 'Cancel',
+    delete: 'Delete',
+    confirm_delete: 'Delete this record?',
+    new_record: 'New record',
+    load_error:
+      'Couldn’t load this record. Please reload the page, and contact support if the problem persists.'
+  },
+  ja: {
+    create: '作成',
+    cancel: 'キャンセル',
+    delete: '削除',
+    confirm_delete: 'このレコードを削除しますか？',
+    new_record: '新規作成',
+    load_error:
+      'このレコードを読み込めませんでした。ページを再読み込みし、問題が解決しない場合はサポートにお問い合わせください。'
+  }
+})
+
+const edit = useLensEdit()
+const factory = useFieldFactory()
+
+// Provide the data-list label width directly (instead of wrapping rows in
+// SDataList) so each LensSheetField wrapper doesn't make its SDataListItem a
+// `:first-child`, which would otherwise double SDataList's dashed dividers.
+provideDataListState({ labelWidth: computed(() => '160px') })
+
+const entries = computed(() =>
+  Object.entries(props.fields).map(([key, fieldData]) => ({
+    key,
+    fieldData,
+    field: factory.make(fieldData)
+  }))
+)
+
+const detailFields = computed(() => entries.value.filter((e) => e.fieldData.showOnDetail !== false))
+const createFields = computed(() => entries.value.filter((e) => e.fieldData.showOnCreate === true))
+
+// Materialize the create-form input components once per field set. Calling
+// `formInputComponent()` inline in the template would mint a brand-new
+// component definition on every render, which breaks Vue's component patching
+// (`instance.update is not a function`).
+//
+// Some field types don't implement a form input (they `throw new
+// Error('Not implemented.')`); resolve defensively and drop those from the
+// form rather than letting one unsupported field crash the create sheet.
+const createFieldViews = computed(() =>
+  createFields.value
+    .map((e) => ({ key: e.key, field: e.field, component: resolveInput(e.field) }))
+    .filter((v) => v.component != null)
+)
+
+// The subset of create views that actually contribute a value. Display-only
+// fields (e.g. a `content` field showing instructions) still render, but
+// `formInputComponent()` returns static markup with no value, so they must not
+// be seeded, validated, or submitted.
+const createInputViews = computed(() =>
+  createFieldViews.value.filter((v) => v.field.isSubmittable())
+)
+
+function resolveInput(field: { formInputComponent: () => any }): any {
+  try {
+    return field.formInputComponent()
+  } catch {
+    return null
+  }
+}
+
+const title = computed(() => {
+  if (props.mode === 'create') {
+    return t.new_record
+  }
+  const id = props.record?.[props.indexField]
+  return (id && typeof id === 'object' ? id.display : id) ?? ''
+})
+
+// --- Create mode form state ---
+
+const createModel = reactive<Record<string, any>>({})
+const saving = ref(false)
+
+// Whether creation is currently permitted. Reactive (a getter on the injected
+// edit context) so the Create button disables if `creatable` flips off after the
+// sheet opened; `onCreate` re-checks it too.
+const creatable = computed(() => !!edit?.creatable)
+
+// 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
+// the 422 error keys 1:1.
+const serverErrors = ref<Record<string, string[]>>({})
+
+const { validation, validate, reset } = useValidation(
+  () => createModel,
+  () => Object.fromEntries(
+    createInputViews.value.map((e) => [e.key, e.field.generateValidationRules()])
+  ),
+  { $externalResults: serverErrors }
+)
+
+const confirmingDelete = usePower()
+
+// Latch for the confirmed delete (see onDelete). Reset only when the sheet
+// (re)opens — not on close — so a double-click during the close transition stays
+// blocked.
+const deleting = ref(false)
+
+watch(
+  () => [props.open, props.mode, props.record] as const,
+  ([open, mode]) => {
+    // Reset the delete confirmation whenever the sheet opens, switches mode, or
+    // is reused for a different record.
+    confirmingDelete.off()
+    if (open) {
+      deleting.value = false
+    }
+    if (open && mode === 'create') {
+      for (const { key, field } of createInputViews.value) {
+        createModel[key] = field.inputEmptyValue()
+      }
+      serverErrors.value = {}
+      reset()
+    }
+  },
+  { immediate: true }
+)
+
+async function onCreate() {
+  // Guard re-entry: set `saving` before the first await so a fast double-click on
+  // Create can't start a second submission (and create a duplicate record) while
+  // the first call's validation is still pending.
+  if (saving.value) {
+    return
+  }
+  // Re-check creation is still permitted: `openCreate()`'s guard runs once, so if
+  // `creatable` flipped off after the sheet opened (async permission change, a
+  // parent disabling creation), the context no longer allows it. Close instead of
+  // POSTing a create the server would reject anyway. The Create button is also
+  // disabled in this state; this guards a flip between render and click.
+  if (!edit?.creatable) {
+    emit('close')
+    return
+  }
+  saving.value = true
+  serverErrors.value = {}
+
+  try {
+    if (!(await validate())) {
+      return
+    }
+    const values: Record<string, any> = {}
+    for (const { key, field } of createInputViews.value) {
+      values[key] = field.inputToPayload(createModel[key])
+    }
+    await edit!.create(values)
+    emit('close')
+  } catch (e) {
+    // Surface backend validation errors (e.g. a duplicate `unique` value) on
+    // the offending fields; rethrow anything that isn't a 422.
+    const errors = extractServerErrors(e)
+    if (!errors) {
+      throw e
+    }
+    serverErrors.value = errors
+  } finally {
+    saving.value = false
+  }
+}
+
+function onDelete() {
+  // Latch so a fast double-click — before the sheet's leave transition unmounts
+  // the panel — can't run twice and queue a second DELETE for the same record (a
+  // non-idempotent backend would then show a failure snackbar after the first
+  // delete already succeeded). Reset when the sheet next opens.
+  if (!props.record || deleting.value) {
+    return
+  }
+  deleting.value = true
+  // Optimistic: the row is removed immediately and the delete is persisted in
+  // the background, so close right away.
+  edit!.remove(props.record)
+  emit('close')
+}
+
+// Block closing while a create is in flight. The create POST is blocking and
+// slow; closing mid-save would dismiss the sheet while `creating` keeps the
+// catalog controls interactive (create isn't part of the busy lock), letting
+// the user submit a duplicate record or start an edit the create's follow-up
+// refresh could overwrite. The backdrop/Escape paths are gated via SSheet's
+// `closable` prop; this guards the explicit close button (and any stray emit).
+function requestClose() {
+  if (saving.value) {
+    return
+  }
+  emit('close')
+}
+
+// --- Slot context -----------------------------------------------------------
+//
+// Content passed to the `#before` / `#after` slots is declared in the page
+// that hosts the catalog, so it cannot `inject` the edit context (which is
+// provided inside `LensCatalog`, a child of that page). Expose the pieces a
+// slot needs as slot props instead: the resolved record id, a record-bound
+// partial `save`, and the entity key. This keeps the generic sheet free of
+// one-off concerns (avatar upload, social links, linked records) while still
+// letting a page implement them.
+
+const resolvedId = computed(() => (props.record && edit ? edit.resolveId(props.record) : null))
+
+function saveRecord(values: Record<string, any>): Promise<void> {
+  // Refuse to save until the full record has loaded. The slots render before the
+  // `loading` / `error` branch (so a `#before` header can show during the load),
+  // 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) {
+    return Promise.resolve()
+  }
+  edit.save(props.record, values)
+  return Promise.resolve()
+}
+
+const slotProps = computed(() => ({
+  record: props.record ?? null,
+  id: resolvedId.value,
+  entity: props.entity,
+  // Surfaced so custom editors can disable their save controls until the full
+  // record has loaded; `save` also hard-refuses while loading/error as a guard.
+  loading: props.loading ?? false,
+  error: props.error ?? false,
+  save: saveRecord
+}))
+</script>
+
+<template>
+  <SSheet :open :closable="!saving" :width="width ?? '480px'" @close="requestClose">
+    <div class="LensSheet">
+      <div class="header">
+        <div class="title">{{ title }}</div>
+        <button
+          class="close"
+          type="button"
+          aria-label="Close"
+          :disabled="saving"
+          @click="requestClose"
+        >
+          <IconX class="close-icon" />
+        </button>
+      </div>
+
+      <div class="body">
+        <slot name="before" v-bind="slotProps" />
+
+        <template v-if="mode === 'view' && record">
+          <div v-if="loading" class="sheet-loading">
+            <SSpinner class="sheet-loading-spinner" />
+          </div>
+          <div v-else-if="error" class="sheet-error">
+            {{ t.load_error }}
+          </div>
+          <div v-else class="sheet-rows">
+            <LensSheetField
+              v-for="entry in detailFields"
+              :key="entry.key"
+              :field="entry.field"
+              :field-key="entry.key"
+              :record
+            />
+          </div>
+        </template>
+
+        <template v-else-if="mode === 'create'">
+          <div class="create-form">
+            <component
+              :is="view.component"
+              v-for="view in createFieldViews"
+              :key="view.key"
+              v-model="createModel[view.key]"
+              :validation="validation[view.key]"
+            />
+          </div>
+        </template>
+
+        <slot name="after" v-bind="slotProps" />
+      </div>
+
+      <div class="footer">
+        <template v-if="mode === 'create'">
+          <SButton size="medium" :label="t.cancel" :disabled="saving" @click="requestClose" />
+          <SButton
+            size="medium"
+            mode="info"
+            :label="t.create"
+            :loading="saving"
+            :disabled="!creatable"
+            @click="onCreate"
+          />
+        </template>
+        <template v-else-if="record && !loading && !error">
+          <template v-if="confirmingDelete.state.value">
+            <span class="confirm-text">{{ t.confirm_delete }}</span>
+            <SButton size="medium" :label="t.cancel" @click="confirmingDelete.off" />
+            <SButton size="medium" mode="danger" :label="t.delete" @click="onDelete" />
+          </template>
+          <SButton
+            v-else
+            size="medium"
+            mode="danger"
+            type="outline"
+            :icon="IconTrash"
+            :label="t.delete"
+            @click="confirmingDelete.on"
+          />
+        </template>
+      </div>
+    </div>
+  </SSheet>
+</template>
+
+<style scoped lang="postcss">
+.LensSheet {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background-color: var(--c-bg-1);
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 16px 24px;
+  border-bottom: 1px solid var(--c-divider);
+}
+
+.title {
+  font-size: 16px;
+  font-weight: 500;
+  font-feature-settings: "tnum";
+  color: var(--c-text-1);
+}
+
+.close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 6px;
+  color: var(--c-text-2);
+  transition: background-color 0.1s, color 0.1s;
+}
+
+.close:hover:not(:disabled) {
+  background-color: var(--c-bg-mute-1);
+  color: var(--c-text-1);
+}
+
+.close:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.close-icon {
+  width: 18px;
+  height: 18px;
+}
+
+.body {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  flex-grow: 1;
+  padding: 16px 24px;
+  overflow-y: auto;
+}
+
+.sheet-rows {
+  border-top: 1px dashed var(--c-divider);
+}
+
+.sheet-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 32px 0;
+}
+
+.sheet-loading-spinner {
+  width: 28px;
+  height: 28px;
+  color: var(--c-text-2);
+}
+
+.sheet-error {
+  padding: 24px 0;
+  font-size: 14px;
+  line-height: 1.6;
+  color: var(--c-text-2);
+}
+
+.create-form {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 16px 24px;
+  border-top: 1px solid var(--c-divider);
+}
+
+.confirm-text {
+  margin-right: auto;
+  font-size: 13px;
+  color: var(--c-text-2);
+}
+</style>

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

@@ -0,0 +1,210 @@
+<script setup lang="ts">
+import IconPencilSimple from '~icons/ph/pencil-simple'
+import { computed, ref, watch } from 'vue'
+import SButton from '../../../components/SButton.vue'
+import SDataListItem from '../../../components/SDataListItem.vue'
+import { useTrans } from '../../../composables/Lang'
+import { useValidation } from '../../../composables/Validation'
+import { type FieldData } from '../FieldData'
+import { useLensEdit } from '../composables/LensEdit'
+import { type Field } from '../fields/Field'
+
+const props = defineProps<{
+  field: Field<FieldData>
+  fieldKey: string
+  record: Record<string, any>
+}>()
+
+const { t } = useTrans({
+  en: { cancel: 'Cancel', apply: 'Apply', edit: 'Edit' },
+  ja: { cancel: 'キャンセル', apply: '適用', edit: '編集' }
+})
+
+const edit = useLensEdit()
+
+const editable = computed(() => !!edit && (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
+// single unimplemented field never breaks the whole sheet — fall back to a
+// plain label/value row for display, and simply omit the edit affordance.
+//
+// Computed off `props.field` so they recompute when the field instance changes
+// (e.g. a refresh swaps in new field metadata for an already-rendered key).
+const displayComponent = computed(() => resolve(() => props.field.dataListItemComponent()))
+const inputComponent = computed(() => resolve(() => props.field.formInputComponent()))
+
+function resolve(fn: () => any): any {
+  try {
+    return fn()
+  } catch {
+    return null
+  }
+}
+
+// Fallback display value for fields without a `dataListItemComponent`.
+const displayValue = computed(() => {
+  const v = props.record[props.fieldKey]
+  if (v == null) {
+    return null
+  }
+  if (Array.isArray(v)) {
+    return v.join(', ')
+  }
+  if (typeof v === 'object') {
+    return v.display ?? v.value ?? JSON.stringify(v)
+  }
+  return String(v)
+})
+
+// Display-only fields (e.g. `content`) resolve an input component but render
+// static markup with no value, so they must not gain an edit affordance. The
+// row-identifier (`indexField`) is also never editable: optimistically changing
+// the id before the write settles would re-key the row, so a follow-up save /
+// delete would address the not-yet-synced new id instead of the in-flight one.
+const canEdit = computed(() =>
+  editable.value
+  && !!inputComponent.value
+  && props.fieldKey !== edit?.indexField
+  && props.field.isSubmittable()
+  && props.field.supportsOptimisticUpdate()
+)
+
+const editing = ref(false)
+const model = ref<any>(null)
+
+// If the backing record is replaced/rebound while this editor is open (the
+// refresh banner, a parent `refresh()`, or a `/show` merge filling detail keys),
+// the `model` captured in `start()` is stale; applying it would overwrite the
+// freshly bound value. Close the editor so the user re-opens against the current
+// value. Our own optimistic save also mutates this value, but `apply()` sets
+// `editing = false` synchronously right after, so this async watcher sees it
+// already closed; user typing only touches the local `model`, never the record.
+watch(
+  () => props.record[props.fieldKey],
+  () => { if (editing.value) { editing.value = false } }
+)
+
+const { validation, validate, reset } = useValidation(
+  () => ({ input: model.value }),
+  () => ({ input: props.field.generateValidationRules() })
+)
+
+function start() {
+  const raw = props.record[props.fieldKey]
+  model.value = props.field.payloadToInput(raw ?? props.field.inputEmptyValue())
+  reset()
+  editing.value = true
+}
+
+function cancel() {
+  editing.value = false
+}
+
+async function apply() {
+  // Snapshot the value we're editing so we can detect the backing record being
+  // rebound out from under us during validation (checked below).
+  const editedValue = props.record[props.fieldKey]
+
+  // Client-side validation only (required, length, …). Server-only rules such
+  // as `unique` are enforced by the background write, which surfaces a snackbar
+  // on rejection.
+  if (!(await validate())) {
+    return
+  }
+
+  // A refresh / rebind can swap the backing record during the validate microtask;
+  // the watcher above closes the editor but flushes asynchronously and can't abort
+  // this already-running apply, so re-check against the snapshot. If the value
+  // changed, `model` is stale — bail rather than overwrite the fresh value.
+  if (props.record[props.fieldKey] !== editedValue) {
+    return
+  }
+
+  // Optimistic: patch + persist in the background, then close immediately.
+  edit!.save(props.record, {
+    [props.fieldKey]: props.field.inputToPayload(model.value)
+  })
+  editing.value = false
+}
+</script>
+
+<template>
+  <div class="LensSheetField" :class="{ editing }">
+    <div v-if="!editing" class="display">
+      <component :is="displayComponent" v-if="displayComponent" :value="record[fieldKey]" />
+      <SDataListItem v-else>
+        <template #label>{{ field.label() }}</template>
+        <template v-if="displayValue !== null" #value>{{ displayValue }}</template>
+      </SDataListItem>
+      <button
+        v-if="canEdit"
+        class="edit"
+        type="button"
+        :aria-label="`${t.edit} ${field.label()}`"
+        @click="start"
+      >
+        <IconPencilSimple class="edit-icon" />
+      </button>
+    </div>
+
+    <div v-else class="form">
+      <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.apply" @click="apply" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.LensSheetField {
+  position: relative;
+  border-bottom: 1px dashed var(--c-divider);
+}
+
+.form {
+  padding: 8px 0;
+}
+
+.display {
+  position: relative;
+}
+
+.edit {
+  position: absolute;
+  top: 10px;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 6px;
+  color: var(--c-text-2);
+  opacity: 0;
+  transition: opacity 0.1s, background-color 0.1s, color 0.1s;
+}
+
+.LensSheetField:hover .edit {
+  opacity: 1;
+}
+
+.edit:hover {
+  background-color: var(--c-bg-mute-1);
+  color: var(--c-text-1);
+}
+
+.edit-icon {
+  width: 16px;
+  height: 16px;
+}
+
+.actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 8px;
+}
+</style>