@globalbrain/sefirot 4.59.1 → 4.61.0

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

@@ -222,13 +222,20 @@ export abstract class Field<T extends FieldData> {
    * Helper function to define the data list item component.
    */
   protected defineDataListItemComponent(fn: (value: any) => any, options: any = null): any {
-    return defineComponent((props) => {
-      return () => h(SDataListItem, options, {
+    return defineComponent((props, { emit }) => {
+      return () => h(SDataListItem, {
+        ...(options ?? {}),
+        'valueAction': props.valueAction,
+        'onClick:value': (event: MouseEvent) => {
+          emit('click:value', event)
+        }
+      }, {
         label: () => this.label(),
         value: () => fn(props.value)
       })
     }, {
-      props: ['value']
+      props: ['value', 'valueAction'],
+      emits: ['click:value']
     })
   }
 
@@ -255,10 +262,21 @@ export abstract class Field<T extends FieldData> {
   }
 
   /**
-   * Returns the value should be used when the input is empty.
+   * The value an empty input starts from: the definition's `emptyValue`, a
+   * wire-format payload value run through `payloadToInput`. The server owns
+   * the blank entirely — field types with a non-null blank (a multiple
+   * select's `[]`, say) declare it in their definition, so there are no
+   * per-type overrides here. Only null/undefined fall back to a null blank,
+   * so `false` and `0` are real values.
+   *
+   * Feeds the create-form seeding and the editors' null fallback alike, so
+   * a non-blank `emptyValue` also pre-fills the editor of a record whose
+   * stored value is null.
    */
   inputEmptyValue(): any {
-    return null
+    return this.data.emptyValue != null
+      ? this.payloadToInput(this.data.emptyValue)
+      : null
   }
 
   /**
@@ -294,7 +312,7 @@ export abstract class Field<T extends FieldData> {
    */
   protected defineFormInputComponent(fn: (props: any, emit: any) => any): any {
     return defineComponent(fn, {
-      props: ['modelValue', 'validation'],
+      props: ['modelValue', 'validation', 'size'],
       emits: ['update:modelValue']
     })
   }

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

@@ -49,14 +49,10 @@ export class FileUploadField extends Field<FileUploadFieldData> {
     })
   }
 
-  override inputEmptyValue(): any {
-    return []
-  }
-
   override formInputComponent(): any {
     return this.defineFormInputComponent((props, { emit }) => {
       return () => h(SInputFileUpload, {
-        'size': 'mini',
+        'size': props.size ?? 'mini',
         'label': this.formInputLabel(),
         'placeholder': this.placeholder() || undefined,
         'help': this.help() || undefined,

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

@@ -38,7 +38,7 @@ export class LinkField extends Field<LinkFieldData> {
   override formInputComponent(): any {
     return this.defineFormInputComponent((props, { emit }) => {
       return () => h(SInputText, {
-        'size': 'md',
+        'size': props.size ?? 'md',
         'label': this.formInputLabel(),
         'placeholder': this.placeholder() || undefined,
         'help': this.help() || undefined,

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

@@ -150,10 +150,6 @@ export class SelectField extends Field<SelectFieldData> {
     return this.optionsForValues(value).map((o) => this.labelForOption(o)).join(', ')
   }
 
-  override inputEmptyValue(): any {
-    return this.data.multiple ? [] : null
-  }
-
   override formInputComponent(): any {
     switch (this.data.inputAs) {
       case 'dropdown':
@@ -166,7 +162,7 @@ export class SelectField extends Field<SelectFieldData> {
   defineDropdownInputComponent(): any {
     return this.defineFormInputComponent((props, { emit }) => {
       return () => h(SInputDropdown, {
-        'size': 'md',
+        'size': props.size ?? 'md',
         'label': this.formInputLabel(),
         'placeholder': this.placeholder() || undefined,
         'help': this.help() || undefined,
@@ -188,7 +184,7 @@ export class SelectField extends Field<SelectFieldData> {
       const Comp = this.data.multiple ? SInputCheckboxes : SInputRadios
 
       return () => h(Comp as any, {
-        'size': 'md',
+        'size': props.size ?? 'md',
         'label': this.formInputLabel(),
         'help': this.help() || undefined,
         'options': this.data.options.map((o) => ({

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

@@ -34,7 +34,7 @@ export class TextField extends Field<TextFieldData> {
   override formInputComponent(): any {
     return this.defineFormInputComponent((props, { emit }) => {
       return () => h(SInputText, {
-        'size': 'md',
+        'size': props.size ?? 'md',
         'label': this.formInputLabel(),
         'placeholder': this.placeholder() || undefined,
         'help': this.help() || undefined,

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

@@ -36,7 +36,7 @@ export class TextareaField extends Field<TextareaFieldData> {
   override formInputComponent(): any {
     return this.defineFormInputComponent((props, { emit }) => {
       return () => h(SInputTextarea, {
-        'size': 'md',
+        'size': props.size ?? 'md',
         'label': this.formInputLabel(),
         'placeholder': this.placeholder() || undefined,
         'help': this.help() || undefined,

package/lib/components/SButton.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { type Component, type MaybeRef, computed, unref, useSlots } from 'vue'
 import { type Position } from '../composables/Tooltip'
+import { useHasSlotContent } from '../composables/Utils'
 import { type ColorMode } from '../support/Color'
 import SFragment from './SFragment.vue'
 import SLink from './SLink.vue'
@@ -60,11 +61,15 @@ const emit = defineEmits<{
 
 const _leadIcon = computed(() => props.leadIcon ?? props.icon)
 
+// Rendered content, not slot presence: a slot that renders empty falls back
+// to the `label` prop (and an icon-only button keeps its icon-only padding).
+const hasDefaultSlot = useHasSlotContent()
+
 const classes = computed(() => [
   props.size ?? 'medium',
   props.type ?? 'fill',
   props.mode ?? 'default',
-  { 'has-label': !!props.label },
+  { 'has-label': !!props.label || hasDefaultSlot.value },
   { 'has-lead-icon': !!_leadIcon.value },
   { 'has-trail-icon': !!props.trailIcon },
   { loading: props.loading },
@@ -118,7 +123,8 @@ function onClick(): void {
         <span v-if="_leadIcon" class="icon" :class="iconMode">
           <component :is="_leadIcon" class="icon-svg" />
         </span>
-        <span v-if="label" class="label" :class="labelMode" v-html="label" />
+        <span v-if="hasDefaultSlot" class="label" :class="labelMode"><slot /></span>
+        <span v-else-if="label" class="label" :class="labelMode" v-html="label" />
         <span v-if="trailIcon" class="icon" :class="iconMode">
           <component :is="trailIcon" class="icon-svg" />
         </span>

package/lib/components/SDataListItem.vue

@@ -9,11 +9,16 @@ const props = withDefaults(defineProps<{
   preWrap?: boolean
   lineClamp?: string | number
   tnum?: boolean
+  valueAction?: boolean
 }>(), {
   dir: 'row',
   maxWidth: '100%'
 })
 
+const emit = defineEmits<{
+  'click:value': [event: MouseEvent]
+}>()
+
 const { labelWidth } = useDataListState()
 
 const slots = useSlots()
@@ -48,6 +53,45 @@ function hasSlotContent(name = 'default'): boolean {
     return true
   })
 }
+
+function onValueClick(event: MouseEvent): void {
+  if (!props.valueAction || isInteractiveClick(event)) {
+    return
+  }
+
+  emit('click:value', event)
+}
+
+// Whether the click landed on interactive content (a link, button, input, …)
+// inside the cell, which handles the click itself. The `closest()` match is
+// bounded to the cell (`currentTarget`): an interactive *ancestor* of the
+// whole list — a tabindexed scroll container, say — must not swallow every
+// cell click.
+function isInteractiveClick(event: MouseEvent): boolean {
+  const cell = event.currentTarget
+  const target = event.target
+
+  if (!(cell instanceof HTMLElement) || !(target instanceof HTMLElement)) {
+    return false
+  }
+
+  const interactive = target.closest([
+    'a',
+    'button',
+    'input',
+    'textarea',
+    'select',
+    '[contenteditable="true"]',
+    '[role="button"]',
+    '[role="link"]',
+    '[role="checkbox"]',
+    '[role="radio"]',
+    '[role="switch"]',
+    '[tabindex]:not([tabindex="-1"])'
+  ].join(','))
+
+  return !!interactive && cell.contains(interactive)
+}
 </script>
 
 <template>
@@ -56,10 +100,10 @@ function hasSlotContent(name = 'default'): boolean {
       <div class="label" :style="labelStyles">
         <slot name="label" />
       </div>
-      <div v-if="!hasValue" class="empty">
+      <div v-if="!hasValue" class="empty" :class="{ action: valueAction }" @click="onValueClick">
         —
       </div>
-      <div v-else-if="hasValue" class="value" :style="valueStyles">
+      <div v-else-if="hasValue" class="value" :class="{ action: valueAction }" :style="valueStyles" @click="onValueClick">
         <slot name="value" />
       </div>
     </div>
@@ -102,6 +146,11 @@ function hasSlotContent(name = 'default'): boolean {
   color: var(--c-text-1);
 }
 
+.empty.action,
+.value.action {
+  cursor: pointer;
+}
+
 .SDataListItem.row .content {
   flex-direction: row;
 }

package/lib/components/SDropdownSectionFilter.vue

@@ -7,6 +7,7 @@ import {
   type DropdownSectionFilterSelectedValue
 } from '../composables/Dropdown'
 import { useTrans } from '../composables/Lang'
+import { stopNonSubmitEnterKeydown } from '../support/Dom'
 import SDropdownSectionFilterItem from './SDropdownSectionFilterItem.vue'
 
 const props = defineProps<{
@@ -28,6 +29,7 @@ const { t } = useTrans({
 })
 
 const input = ref<HTMLElement | null>(null)
+const list = ref<HTMLUListElement | null>(null)
 const query = ref('')
 
 const enabledOptions = computed(() => {
@@ -53,8 +55,16 @@ function isActive(value: any) {
   return Array.isArray(selected) ? selected.includes(value) : selected === value
 }
 
+// Move focus from the search input into the first option (ArrowDown from the
+// search field).
+function focusFirstOption() {
+  list.value?.querySelector<HTMLElement>('.button')?.focus()
+}
+
 function focusPrev(event: any) {
-  event.target.parentNode.previousElementSibling?.firstElementChild?.focus()
+  // ArrowUp from the first option returns focus to the search input (if any).
+  const prev = event.target.parentNode.previousElementSibling?.firstElementChild
+  prev ? prev.focus() : input.value?.focus()
 }
 
 function focusNext(event: any) {
@@ -70,12 +80,18 @@ function onClick(option: DropdownSectionFilterOption, value: any) {
 <template>
   <div class="SDropdownSectionFilter">
     <div v-if="search" class="search">
-      <!-- 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>
+      <input
+        ref="input"
+        v-model="query"
+        class="input"
+        :placeholder="t.i_ph"
+        @keydown.enter="stopNonSubmitEnterKeydown"
+        @keydown.down.prevent
+        @keyup.down.prevent="focusFirstOption"
+      >
     </div>
 
-    <ul v-if="filteredOptions.length" class="list">
+    <ul v-if="filteredOptions.length" ref="list" class="list">
       <li v-for="option in filteredOptions" :key="option.label" class="item">
         <button
           class="button"
@@ -154,6 +170,13 @@ function onClick(option: DropdownSectionFilterOption, value: any) {
   &:hover {
     background-color: var(--c-bg-mute-1);
   }
+
+  /* The global reset strips `button:focus` outlines, so keyboard focus
+     (arrowing through the options) needs its own visible ring. */
+  &:focus-visible {
+    outline: 2px solid var(--input-focus-border-color);
+    outline-offset: -2px;
+  }
 }
 
 .checkbox {

package/lib/components/SInputAsyncDropdown.vue

@@ -6,6 +6,7 @@ import { type Ref, computed, nextTick, onUnmounted, ref, watch } from 'vue'
 import { useManualDropdownPosition } from '../composables/Dropdown'
 import { useFlyout } from '../composables/Flyout'
 import { useTrans } from '../composables/Lang'
+import { stopNonSubmitEnterKeydown } from '../support/Dom'
 import { type Option } from '../support/InputDropdown'
 import SDropdownSectionFilterItem from './SDropdownSectionFilterItem.vue'
 import SInputBase, { type Props as BaseProps } from './SInputBase.vue'
@@ -76,6 +77,7 @@ const { t } = useTrans({
 })
 
 const container = ref<HTMLDivElement>()
+const box = ref<HTMLDivElement | null>(null)
 const input = ref<HTMLInputElement | null>(null)
 const list = ref<HTMLUListElement | null>(null)
 
@@ -209,6 +211,44 @@ function onOpen() {
   nextTick(() => input.value?.focus())
 }
 
+// Clicking (or Enter on — see onEnterToggle) the box toggles the flyout —
+// closing returns focus to the box so keyboard interaction continues from the
+// control instead of falling to `document.body`. ArrowDown stays open-only.
+function onToggle() {
+  if (isOpen.value) {
+    close()
+    box.value?.focus()
+    return
+  }
+  onOpen()
+}
+
+// Bare Enter toggles on keydown, not keyup: a Cmd/Ctrl+Enter submit (handled
+// on keydown by an enclosing editor) sheds its modifier before the Enter keyup
+// when the modifier is released first, and that keyup must not reopen the
+// flyout — acting on keydown sidesteps release order entirely. Key repeat is
+// ignored so holding Enter doesn't flap the flyout.
+function onEnterToggle(event: KeyboardEvent) {
+  if (!event.repeat) {
+    onToggle()
+  }
+}
+
+// Escape while the flyout is open belongs to the flyout: close it and return
+// focus to the box, keeping the keydown from an enclosing surface (an inline
+// editor would cancel, a sheet would close). A closed dropdown leaves Escape
+// to those surfaces. The Escape that cancels an IME composition never
+// operates the flyout.
+function onEscapeKeydown(event: KeyboardEvent) {
+  if (!isOpen.value || event.isComposing) {
+    return
+  }
+  event.stopPropagation()
+  event.preventDefault()
+  close()
+  box.value?.focus()
+}
+
 watch(isOpen, (value) => {
   // On close: drop any pending refetch, invalidate any in-flight fetch (so a late
   // response can't repopulate the list while closed), and clear the query /
@@ -264,8 +304,12 @@ function onSelect(item: T): void {
     commit(null)
   }
 
+  // Return focus to the box on a selection that closes the flyout, so keyboard
+  // interaction (reopening, an editor's submit shortcut) continues from the
+  // control rather than falling to `document.body`.
   if (props.closeOnSelect ?? !props.multiple) {
     close()
+    box.value?.focus()
   }
 }
 
@@ -330,14 +374,15 @@ function focusNext(event: any): void {
     :hide-error
     :hide-warning
   >
-    <div ref="container" class="container">
+    <div ref="container" class="container" @keydown.esc="onEscapeKeydown">
       <div
+        ref="box"
         class="box"
         role="button"
         tabindex="0"
-        @click="onOpen"
+        @click="onToggle"
         @keydown.down.prevent
-        @keyup.enter="onOpen"
+        @keydown.enter.exact="onEnterToggle"
         @keyup.down="onOpen"
       >
         <div class="box-content">
@@ -362,16 +407,12 @@ function focusNext(event: any): void {
       <div v-if="isOpen" class="dropdown" :style="inset">
         <div class="dropdown-content">
           <div class="search">
-            <!-- Keep Enter inside the search field: it drives the dropdown and
-                 must neither bubble to an enclosing form (`.stop`) nor trigger the
-                 browser's implicit form submission (`.prevent`). ArrowDown moves
-                 focus into the option list. -->
             <input
               ref="input"
               v-model="query"
               class="search-input"
               :placeholder="t.ph"
-              @keydown.enter.stop.prevent
+              @keydown.enter="stopNonSubmitEnterKeydown"
               @keydown.down.prevent
               @keyup.down.prevent="focusFirstOption"
             >
@@ -442,6 +483,13 @@ function focusNext(event: any): void {
   &:hover {
     border-color: var(--input-hover-border-color);
   }
+
+  /* Keyboard focus shows via the border (the input-family idiom), not the
+     UA's default ring. */
+  &:focus-visible {
+    outline: none;
+    border-color: var(--input-focus-border-color);
+  }
 }
 
 .box-content {
@@ -544,6 +592,13 @@ function focusNext(event: any): void {
     background-color: var(--c-bg-mute-1);
   }
 
+  /* The global reset strips `button:focus` outlines, so keyboard focus
+     (arrowing through the options) needs its own visible ring. */
+  &:focus-visible {
+    outline: 2px solid var(--input-focus-border-color);
+    outline-offset: -2px;
+  }
+
   &:disabled {
     cursor: not-allowed;
     opacity: 0.5;

package/lib/components/SInputDropdown.vue

@@ -38,6 +38,7 @@ const { t } = useTrans({
 })
 
 const container = ref<HTMLDivElement>()
+const box = ref<HTMLDivElement>()
 
 const { isOpen, open, close } = useFlyout(container)
 const { inset, update: updatePosition } = useManualDropdownPosition(
@@ -85,6 +86,44 @@ async function onOpen() {
   }
 }
 
+// Clicking (or Enter on — see onEnterToggle) the box toggles the flyout —
+// closing returns focus to the box so keyboard interaction continues from the
+// control instead of falling to `document.body`. ArrowDown stays open-only.
+function onToggle() {
+  if (isOpen.value) {
+    close()
+    box.value?.focus()
+    return
+  }
+  onOpen()
+}
+
+// Bare Enter toggles on keydown, not keyup: a Cmd/Ctrl+Enter submit (handled
+// on keydown by an enclosing editor) sheds its modifier before the Enter keyup
+// when the modifier is released first, and that keyup must not reopen the
+// flyout — acting on keydown sidesteps release order entirely. Key repeat is
+// ignored so holding Enter doesn't flap the flyout.
+function onEnterToggle(event: KeyboardEvent) {
+  if (!event.repeat) {
+    onToggle()
+  }
+}
+
+// Escape while the flyout is open belongs to the flyout: close it and return
+// focus to the box, keeping the keydown from an enclosing surface (an inline
+// editor would cancel, a sheet would close). A closed dropdown leaves Escape
+// to those surfaces. The Escape that cancels an IME composition never
+// operates the flyout.
+function onEscapeKeydown(event: KeyboardEvent) {
+  if (!isOpen.value || event.isComposing) {
+    return
+  }
+  event.stopPropagation()
+  event.preventDefault()
+  close()
+  box.value?.focus()
+}
+
 function onSelect(value: T) {
   props.validation?.$touch()
 
@@ -99,7 +138,13 @@ function onSelect(value: T) {
     model.value = null
   }
 
-  props.closeOnClick && close()
+  // Return focus to the box on a selection that closes the flyout, so
+  // keyboard interaction (reopening, an editor's submit shortcut) continues
+  // from the control rather than falling to `document.body`.
+  if (props.closeOnClick) {
+    close()
+    box.value?.focus()
+  }
 }
 </script>
 
@@ -121,14 +166,15 @@ function onSelect(value: T) {
     :hide-error
     :hide-warning
   >
-    <div ref="container" class="container">
+    <div ref="container" class="container" @keydown.esc="onEscapeKeydown">
       <div
+        ref="box"
         class="box"
         role="button"
         tabindex="0"
-        @click="onOpen"
+        @click="onToggle"
         @keydown.down.prevent
-        @keyup.enter="onOpen"
+        @keydown.enter.exact="onEnterToggle"
         @keyup.down="onOpen"
       >
         <div class="box-content">
@@ -182,6 +228,13 @@ function onSelect(value: T) {
   &:hover {
     border-color: var(--input-hover-border-color);
   }
+
+  /* Keyboard focus shows via the border (the input-family idiom), not the
+     UA's default ring. */
+  &:focus-visible {
+    outline: none;
+    border-color: var(--input-focus-border-color);
+  }
 }
 
 .box-content {

package/lib/composables/Utils.ts

@@ -1,8 +1,13 @@
 import {
+  Comment,
   type ComputedRef,
+  Fragment,
   type MaybeRefOrGetter,
+  Text,
+  type VNode,
   computed,
   getCurrentInstance,
+  isVNode,
   onMounted,
   toValue,
   useSlots
@@ -52,17 +57,52 @@ export function computedArrayWhen<T = any, C = any>(
   }, [])
 }
 
-/**
- * Checks whether the slot has a non empty value.
- */
+function hasSlotContent(value: unknown): boolean {
+  if (value == null || typeof value === 'boolean') {
+    return false
+  }
+
+  if (typeof value === 'string') {
+    return value.trim().length > 0
+  }
+
+  if (typeof value === 'number' || typeof value === 'bigint') {
+    return true
+  }
+
+  if (Array.isArray(value)) {
+    return value.some(hasSlotContent)
+  }
+
+  if (!isVNode(value)) {
+    return false
+  }
+
+  const vnode = value as VNode
+
+  if (vnode.type === Comment) {
+    return false
+  }
+
+  if (vnode.type === Text || vnode.type === Fragment) {
+    return hasSlotContent(vnode.children)
+  }
+
+  // An element with only text children is judged by that text —
+  // `<div>{{ maybeEmpty }}</div>` must not defeat SDesc's empty fallback.
+  // Anything else is content in itself: a component, or an element whose
+  // `children` is `null` (an icon, an `<img>`, …), an array, or a slots object.
+  if (typeof vnode.children === 'string') {
+    return hasSlotContent(vnode.children)
+  }
+
+  return true
+}
+
 export function useHasSlotContent(name = 'default'): ComputedRef<boolean> {
   const slots = useSlots()
 
-  return computed(() => {
-    return !!slots[name]?.().some((s) => {
-      return Array.isArray(s.children) ? true : !!(s.children as string).trim()
-    })
-  })
+  return computed(() => hasSlotContent(slots[name]?.()))
 }
 
 /**