@globalbrain/sefirot 4.54.0 → 4.56.0

package/lib/blocks/lens/LensCreateExtension.ts

@@ -0,0 +1,43 @@
+/**
+ * A create-form extension contributed by a sheet slot (`#before` / `#after`).
+ *
+ * The catalog's create form builds its payload from the entity's own Lens
+ * fields. A page may need to create related data that isn't a Lens field (e.g. a
+ * collaborator's social links, written server-side alongside the record). Such a
+ * slot registers an extension via the `registerCreateExtension` slot prop: on
+ * submit the sheet runs every registered extension to validate the slot's own
+ * inputs and merge its extra keys into the create payload.
+ */
+export interface LensCreateContribution {
+  /**
+   * Whether the slot's own inputs passed validation. When any registered
+   * extension reports `false`, the create is aborted (the sheet stays open so
+   * each slot can show its own errors).
+   */
+  valid: boolean
+
+  /**
+   * Extra key/value pairs merged into the create payload (e.g.
+   * `{ social_links: [...] }`). Ignored when `valid` is `false`.
+   */
+  values: Record<string, any>
+}
+
+/**
+ * A function the sheet calls on create-submit. It validates the slot's inputs
+ * and returns its contribution; it may be async (validation usually is). It
+ * should report `valid: false` rather than throw — a throw propagates to the
+ * sheet's submit handler as an unexpected error.
+ */
+export type LensCreateExtension = () =>
+  | LensCreateContribution
+  | Promise<LensCreateContribution>
+
+/**
+ * Register a {@link LensCreateExtension} with the sheet's create form. Returns a
+ * disposer that unregisters it — call it on unmount (the create slot content
+ * unmounts with the sheet, so a component-lifecycle cleanup suffices).
+ */
+export type RegisterLensCreateExtension = (
+  extension: LensCreateExtension
+) => () => void

package/lib/blocks/lens/Rule.ts

@@ -21,6 +21,7 @@ export type Rule =
   | AfterRule
   | AfterOrEqualRule
   | FileExtensionRule
+  | MimeTypesRule
   | MaxFileSizeRule
   | EachRule
 
@@ -122,6 +123,11 @@ export interface FileExtensionRule {
   extensions: string[]
 }
 
+export interface MimeTypesRule {
+  type: 'mime_types'
+  mimeTypes: string[]
+}
+
 export interface MaxFileSizeRule {
   type: 'max_file_size'
   size: string

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

@@ -11,6 +11,7 @@ import { usePower } from '../../../composables/Power'
 import { useValidation } from '../../../composables/Validation'
 import { useSnackbars } from '../../../stores/Snackbars'
 import { type FieldData } from '../FieldData'
+import { type LensCreateExtension } from '../LensCreateExtension'
 import { useFieldFactory } from '../composables/FieldFactory'
 import { useLensEdit } from '../composables/LensEdit'
 import { extractServerErrors, extractServerMessage } from '../validation/ServerErrors'
@@ -177,6 +178,19 @@ watch(
   { immediate: true }
 )
 
+// Create-form extensions registered by sheet slots (`#before` / `#after`) — a
+// page's custom inputs that aren't Lens fields (e.g. social links written
+// server-side alongside the record). On submit each is run to validate its own
+// inputs and contribute extra keys to the create payload. Registered on mount and
+// disposed on unmount; the create slot content unmounts with the sheet, so a
+// component-lifecycle cleanup keeps this empty between creates.
+const createExtensions = new Set<LensCreateExtension>()
+
+function registerCreateExtension(extension: LensCreateExtension): () => void {
+  createExtensions.add(extension)
+  return () => { createExtensions.delete(extension) }
+}
+
 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
@@ -197,13 +211,32 @@ async function onCreate() {
   serverErrors.value = {}
 
   try {
-    if (!(await validate())) {
+    // Validate the built-in fields and every registered slot extension, running
+    // them all even when something already failed, so each section surfaces its
+    // own errors on a single submit rather than one at a time. A valid extension
+    // contributes extra keys to the payload; any failure aborts the create.
+    const fieldsValid = await validate()
+    const contributions: Record<string, any>[] = []
+    let extensionsValid = true
+    for (const extend of createExtensions) {
+      const { valid, values } = await extend()
+      if (valid) {
+        contributions.push(values)
+      } else {
+        extensionsValid = false
+      }
+    }
+    if (!fieldsValid || !extensionsValid) {
       return
     }
     const values: Record<string, any> = {}
     for (const { key, field } of createInputViews.value) {
       values[key] = field.inputToPayload(createModel[key])
     }
+    // Merge each extension's contribution (e.g. `social_links`) into the payload.
+    for (const extra of contributions) {
+      Object.assign(values, extra)
+    }
     // A picked avatar `File` rides `values`; `edit.create` sends the payload
     // multipart when one is present, so the avatar persists with the new record.
     await edit!.create(values)
@@ -266,9 +299,11 @@ function requestClose() {
 // 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.
+// partial `save`, the entity key, the sheet `mode` (so a slot can render
+// different content for create vs view), and `registerCreateExtension` (so a
+// create-mode slot can contribute extra keys to the create payload). 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))
 
@@ -293,6 +328,9 @@ const slotProps = computed(() => ({
   record: props.record ?? null,
   id: resolvedId.value,
   entity: props.entity,
+  // The sheet's current mode, so a slot can branch its content (e.g. show
+  // editable inputs only while creating, and a read/edit view otherwise).
+  mode: props.mode,
   // 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,
@@ -301,7 +339,11 @@ const slotProps = computed(() => ({
   // 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
+  save: saveRecord,
+  // Let a create-mode slot register inputs that contribute extra keys to the
+  // create payload (see LensCreateExtension). Stable identity; a no-op in view
+  // mode (a slot only registers while the create form is shown).
+  registerCreateExtension
 }))
 </script>
 

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

@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import IconPencilSimple from '~icons/ph/pencil-simple'
-import { computed, ref, watch } from 'vue'
+import { computed, nextTick, 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 { dispatchEditorKeydown, focusFirstEditable } from '../../../support/Dom'
 import { type FieldData } from '../FieldData'
 import { useLensEdit } from '../composables/LensEdit'
 import { type Field } from '../fields/Field'
@@ -90,11 +91,17 @@ const { validation, validate, reset } = useValidation(
   () => ({ input: props.field.generateValidationRules() })
 )
 
+const formEl = ref<HTMLElement | null>(null)
+
 function start() {
   const raw = props.record[props.fieldKey]
   model.value = props.field.payloadToInput(raw ?? props.field.inputEmptyValue())
   reset()
   editing.value = true
+  // Focus the input on open (matching the inline table editor): better UX, and
+  // it routes the editor's keydowns — notably Escape — through the form handler
+  // so Escape cancels the edit rather than closing the sheet.
+  nextTick(() => focusFirstEditable(formEl.value))
 }
 
 function cancel() {
@@ -135,6 +142,12 @@ async function apply() {
   })
   editing.value = false
 }
+
+function onEditorKeydown(event: KeyboardEvent) {
+  // `shield` keeps Escape from reaching the surrounding sheet, which otherwise
+  // closes on it (via SSheet's window-level handler).
+  dispatchEditorKeydown(event, { cancel, submit: apply, shield: true })
+}
 </script>
 
 <template>
@@ -156,7 +169,7 @@ async function apply() {
       </button>
     </div>
 
-    <div v-else class="form">
+    <div v-else ref="formEl" class="form" @keydown="onEditorKeydown">
       <component :is="inputComponent" v-model="model" :validation="validation.input" />
       <div class="actions">
         <SButton size="mini" :label="t.cancel" @click="cancel" />

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

@@ -10,6 +10,7 @@ import { useManualDropdownPosition } from '../../../composables/Dropdown'
 import { useTrans } from '../../../composables/Lang'
 import { useValidation } from '../../../composables/Validation'
 import { useSnackbars } from '../../../stores/Snackbars'
+import { dispatchEditorKeydown, focusFirstEditable } from '../../../support/Dom'
 import { type FieldData } from '../FieldData'
 import { useLensEdit } from '../composables/LensEdit'
 import { useLensInlineEdit } from '../composables/LensInlineEdit'
@@ -198,8 +199,7 @@ function startNames() {
   inline?.start(myKey.value)
   nextTick(() => {
     update()
-    const el = editorEl.value?.querySelector('input, textarea, [contenteditable], [tabindex]') as HTMLElement | null
-    el?.focus()
+    focusFirstEditable(editorEl.value)
   })
 }
 
@@ -246,10 +246,7 @@ async function applyNames() {
 }
 
 function onEditorKeydown(event: KeyboardEvent) {
-  if (event.key === 'Escape') {
-    event.preventDefault()
-    cancelNames()
-  }
+  dispatchEditorKeydown(event, { cancel: cancelNames, submit: applyNames })
 }
 </script>
 

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

@@ -10,6 +10,7 @@ import { useManualDropdownPosition } from '../../../composables/Dropdown'
 import { useTrans } from '../../../composables/Lang'
 import { useValidation } from '../../../composables/Validation'
 import { day } from '../../../support/Day'
+import { dispatchEditorKeydown, focusFirstEditable } from '../../../support/Dom'
 import { type FieldData } from '../FieldData'
 import { useLensEdit } from '../composables/LensEdit'
 import { useLensInlineEdit } from '../composables/LensInlineEdit'
@@ -159,10 +160,7 @@ function start() {
   inline?.start(myKey.value)
   nextTick(() => {
     update()
-    const el = editorEl.value?.querySelector(
-      'input, textarea, [contenteditable], [tabindex]'
-    ) as HTMLElement | null
-    el?.focus()
+    focusFirstEditable(editorEl.value)
   })
 }
 
@@ -218,28 +216,7 @@ async function apply() {
 }
 
 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)
+  dispatchEditorKeydown(event, { cancel, submit: apply })
 }
 </script>
 

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

@@ -273,6 +273,15 @@ export abstract class Field<T extends FieldData> {
 
   /**
    * Returns the form input component for the field.
+   *
+   * Several field types currently `throw new Error('Not implemented.')` here —
+   * they're shown read-only and have no inline/sheet editor yet. When making one
+   * editable, mind the inline editor's keyboard handling: if the input is a
+   * composite control with its own nested text input (e.g. a dropdown search
+   * filter), that nested input must keep Enter/Escape from bubbling to the
+   * editor (see `SDropdownSectionFilter` and `support/Dom`'s
+   * `dispatchEditorKeydown`), or typing a value and pressing Enter would
+   * submit/cancel the whole editor.
    */
   abstract formInputComponent(): any
 

package/lib/blocks/lens/validation/RuleMapper.ts

@@ -13,6 +13,7 @@ import {
   maxFileSize,
   maxLength,
   maxValue,
+  mimeTypes,
   minLength,
   minValue,
   negativeInteger,
@@ -130,6 +131,8 @@ function mapRule(rule: Exclude<Rule, EachRule>): ValidationRuleWithParams | null
       return afterOrEqual(resolveDate(rule.date))
     case 'file_extension':
       return fileExtension(rule.extensions)
+    case 'mime_types':
+      return mimeTypes(rule.mimeTypes)
     case 'max_file_size':
       return maxFileSize(rule.size)
     default: {

package/lib/components/SDropdownSectionFilter.vue

@@ -70,7 +70,9 @@ function onClick(option: DropdownSectionFilterOption, value: any) {
 <template>
   <div class="SDropdownSectionFilter">
     <div v-if="search" class="search">
-      <input ref="input" v-model="query" class="input" :placeholder="t.i_ph">
+      <!-- Keep Enter inside the filter: it drives the dropdown, and must not
+           bubble to an enclosing editor/form as a submit. -->
+      <input ref="input" v-model="query" class="input" :placeholder="t.i_ph" @keydown.enter.stop>
     </div>
 
     <ul v-if="filteredOptions.length" class="list">

package/lib/support/Dom.ts

@@ -0,0 +1,109 @@
+/**
+ * Whether the event target is a plain text-like `<input>` — the controls where
+ * pressing Enter should submit an inline editor. Excludes textareas (Enter
+ * inserts a newline) and richer controls that handle Enter themselves (e.g. a
+ * dropdown that opens its menu on Enter), so a keyboard user isn't forced to
+ * submit instead of operating the control.
+ */
+export 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)
+}
+
+/**
+ * Whether an Enter keydown should submit an inline editor. Ctrl/Cmd+Enter
+ * submits from any control — it's the near-universal "submit" gesture (GitHub,
+ * Gmail, Slack, …) and never clashes with a textarea's newline or a control that
+ * handles bare Enter itself (e.g. a dropdown opening its menu). Bare Enter
+ * submits only from a plain text-like input (see {@link isTextLikeInput}).
+ *
+ * Shift+Enter is left for newlines, and Alt/Option+Enter has no consistent
+ * submit meaning (Excel uses it for an in-cell newline), so neither submits.
+ * The Enter that commits an IME composition (e.g. CJK input) never submits.
+ */
+export function isEditorSubmitKeydown(event: KeyboardEvent): boolean {
+  if (event.key !== 'Enter') {
+    return false
+  }
+
+  // Ignore the Enter that commits an IME composition (e.g. CJK input): it
+  // confirms the candidate rather than submitting.
+  if (event.isComposing) {
+    return false
+  }
+
+  return event.ctrlKey || event.metaKey || isTextLikeInput(event.target)
+}
+
+/**
+ * Whether a keydown should cancel an inline editor: Escape, except the Escape
+ * that cancels an in-progress IME composition (which reverts the candidate and
+ * should leave the editor open).
+ */
+export function isEditorCancelKeydown(event: KeyboardEvent): boolean {
+  return event.key === 'Escape' && !event.isComposing
+}
+
+/**
+ * Dispatch a keydown for an inline editor (opened from a cell or sheet field):
+ * cancel on Escape, submit on Enter — using the IME- and modifier-aware rules
+ * in {@link isEditorCancelKeydown} / {@link isEditorSubmitKeydown}.
+ *
+ * `shield` is for an editor nested in a surface that itself closes on Escape
+ * (e.g. a sheet): Escape is always kept from propagating to that surface — even
+ * the Escape that only cancels an IME composition (where the edit stays open) —
+ * so the surface can't close underneath the editor.
+ *
+ * NOTE for future inline/sheet-editable fields: several field types currently
+ * throw on `formInputComponent()` (not yet editable). When making one editable,
+ * if its input is a composite control with its own nested text input (e.g. a
+ * dropdown's search filter), that nested input must keep Enter/Escape from
+ * bubbling to this handler — see `SDropdownSectionFilter` — otherwise typing a
+ * value and pressing Enter would submit/cancel the whole editor.
+ */
+export function dispatchEditorKeydown(
+  event: KeyboardEvent,
+  handlers: { cancel: () => void; submit: () => void; shield?: boolean }
+): void {
+  if (event.key === 'Escape') {
+    if (handlers.shield) {
+      event.stopPropagation()
+    }
+    if (isEditorCancelKeydown(event)) {
+      event.preventDefault()
+      handlers.cancel()
+    }
+    return
+  }
+
+  if (isEditorSubmitKeydown(event)) {
+    event.preventDefault()
+    handlers.submit()
+  }
+}
+
+/**
+ * Focus the first focusable editor control (an input, textarea, contenteditable,
+ * or any `[tabindex]`) inside the container — used to focus an inline editor when
+ * it opens.
+ *
+ * Candidates inside `skip` (default `.actions`, the editor's action row) are
+ * ignored, so focus never lands on a Cancel/Save button — those are `[tabindex]`
+ * elements too — when the field input has no focusable control of its own (e.g.
+ * a radio/checkbox group). In that case nothing is focused. Pass `skip: ''` to
+ * disable.
+ */
+export function focusFirstEditable(container: HTMLElement | null, skip = '.actions'): void {
+  const candidates = Array.from(
+    container?.querySelectorAll<HTMLElement>('input, textarea, [contenteditable], [tabindex]') ?? []
+  )
+
+  candidates.find((el) => !skip || !el.closest(skip))?.focus()
+}

package/lib/validation/rules/index.ts

@@ -12,6 +12,7 @@ export { maxFileSize } from './maxFileSize'
 export { maxLength } from './maxLength'
 export { maxTotalFileSize } from './maxTotalFileSize'
 export { maxValue } from './maxValue'
+export { mimeTypes } from './mimeTypes'
 export { minLength } from './minLength'
 export { minValue } from './minValue'
 export { month } from './month'

package/lib/validation/rules/mimeTypes.ts

@@ -0,0 +1,15 @@
+import { createRule } from '../Rule'
+import { mimeTypes as baseMimeTypes } from '../validators/mimeTypes'
+
+export const message = {
+  en: 'The file type is invalid.',
+  ja: 'ファイル形式が正しくありません。'
+}
+
+export function mimeTypes(patterns: string[], msg?: string) {
+  return createRule({
+    message: ({ lang }) => msg ?? message[lang],
+    optional: true,
+    validation: (value) => baseMimeTypes(value, patterns)
+  })
+}

package/lib/validation/validators/index.ts

@@ -12,6 +12,7 @@ export * from './maxFileSize'
 export * from './maxLength'
 export * from './maxTotalFileSize'
 export * from './maxValue'
+export * from './mimeTypes'
 export * from './minLength'
 export * from './minValue'
 export * from './month'

package/lib/validation/validators/mimeTypes.ts

@@ -0,0 +1,19 @@
+export function mimeTypes(value: unknown, patterns: string[]): boolean {
+  if (!(value instanceof File)) { return false }
+
+  // The browser doesn't always report a type (e.g. some drag-and-drop or
+  // clipboard sources); defer to the server's content-based check in that case
+  // rather than rejecting a possibly-valid file outright.
+  if (value.type === '') { return true }
+
+  const type = value.type.toLowerCase()
+
+  return patterns.some((pattern) => {
+    const p = pattern.toLowerCase()
+
+    // A `type/*` wildcard (e.g. `image/*`) matches any subtype of that
+    // top-level type, mirroring the HTML accept attribute and Laravel's
+    // `mimetypes` rule.
+    return p.endsWith('/*') ? type.startsWith(p.slice(0, -1)) : type === p
+  })
+}

package/package.json

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