@globalbrain/sefirot 4.56.0 → 4.58.0

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

@@ -2,10 +2,11 @@
 import IconTrash from '~icons/ph/trash'
 import { type Ref, computed, markRaw, ref, watch } from 'vue'
 import SButton from '../../../components/SButton.vue'
-import SInputDropdown, { type Option } from '../../../components/SInputDropdown.vue'
+import SInputDropdown from '../../../components/SInputDropdown.vue'
 import SSpinner from '../../../components/SSpinner.vue'
 import { useTrans } from '../../../composables/Lang'
 import { useValidation } from '../../../composables/Validation'
+import { type Option } from '../../../support/InputDropdown'
 import { required } from '../../../validation/rules'
 import { type FieldData } from '../FieldData'
 import { type FilterOperator, FilterOperatorLabelDict } from '../FilterOperator'

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

@@ -2,9 +2,9 @@
 import IconPlusCircle from '~icons/ph/plus-circle'
 import IconTrash from '~icons/ph/trash'
 import SButton from '../../../components/SButton.vue'
-import { type Option } from '../../../components/SInputDropdown.vue'
 import SInputSegments from '../../../components/SInputSegments.vue'
 import { useTrans } from '../../../composables/Lang'
+import { type Option } from '../../../support/InputDropdown'
 import { type FieldData } from '../FieldData'
 import LensFormFilterCondition, { type FilterCondition } from './LensFormFilterCondition.vue'
 

package/lib/blocks/lens/components/{LensAvatarInput.vue → LensInputAvatar.vue}

@@ -3,7 +3,7 @@ import SInputImage, { type ImageType, type Size } from '../../../components/SInp
 import { useTrans } from '../../../composables/Lang'
 import { type Validatable } from '../../../composables/Validation'
 
-withDefaults(defineProps<{
+export interface Props {
   label?: string
   help?: string
   accept?: string
@@ -11,7 +11,9 @@ withDefaults(defineProps<{
   size?: Size
   disabled?: boolean
   validation?: Validatable
-}>(), {
+}
+
+withDefaults(defineProps<Props>(), {
   imageType: 'circle',
   size: 'small'
 })
@@ -30,7 +32,7 @@ const { t } = useTrans({
 <template>
   <SInputImage
     v-model="model"
-    class="LensAvatarInput"
+    class="LensInputAvatar"
     :label
     :help
     :accept

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

@@ -0,0 +1,102 @@
+<script setup lang="ts" generic="T, Multiple extends boolean = false">
+import SInputAsyncDropdown from '../../../components/SInputAsyncDropdown.vue'
+import { useMutation } from '../../../composables/Api'
+import { useLang } from '../../../composables/Lang'
+import { type Option } from '../../../support/InputDropdown'
+import { type LensQuerySettings, type LensQuerySort } from '../LensQuery'
+import { isAuthError } from '../validation/ServerErrors'
+
+// A lens-backed search-select that works entirely in the consumer's own model
+// type. It searches the server as the user types (via SInputAsyncDropdown): each
+// result row is turned into a model by `toModel`, and each model is rendered as
+// its dropdown/chip option by `toOption`. The v-model is those models — a `T[]`
+// when `multiple`, otherwise `T | null`.
+//
+// Remaining selection UI props (nullable, disabled, placeholder, size, label,
+// validation, position, closeOnSelect, debounce, …) fall through as attributes.
+export interface Props<T = any, Multiple extends boolean = false> {
+  // The lens search endpoint (e.g. `/api/admin/lens/search`).
+  endpoint: string
+
+  // The entity to search.
+  entity: string
+
+  // Columns to fetch for each row, passed to `toModel`.
+  select: string[]
+
+  // Columns matched against the typed query — OR-ed together with `contains`. An
+  // empty query fetches the initial (unfiltered) page. Named to match
+  // LensCatalog's `queryKeys`.
+  queryKeys: string[]
+
+  // Sort applied to the results (e.g. `[['name', 'asc']]`). Re-read on each fetch,
+  // so a locale-dependent sort stays current.
+  sort?: LensQuerySort[]
+
+  // Page size of each search. The server enforces its own perPage ceiling.
+  perPage?: number
+
+  // Per-request settings (e.g. language). Usually unneeded — the server
+  // negotiates language from the request headers.
+  settings?: LensQuerySettings
+
+  // Whether multiple models can be selected. Typed `boolean & Multiple` (equal to
+  // `Multiple`) so Vue keeps runtime Boolean casting for a bare `multiple` while
+  // `Multiple` still drives the arity-conditional model type. See SInputAsyncDropdown.
+  multiple?: boolean & Multiple
+
+  // Build a model from a raw result row.
+  toModel: (row: Record<string, any>) => T
+
+  // Render a model as its dropdown/chip option (`value` is the identity).
+  toOption: (item: T) => Option
+}
+
+const props = defineProps<Props<T, Multiple>>()
+
+// The selected model(s): a `T[]` when `multiple`, otherwise `T | null`.
+const model = defineModel<Multiple extends true ? T[] : T | null>({ required: true })
+
+// Don't let lens-config attributes leak onto the child; only the explicitly
+// forwarded selection props (via `$attrs`) should.
+defineOptions({ inheritAttrs: false })
+
+// Default the request language to the active app language (like LensCatalog), so
+// server-localized fields come back in the right locale even when HttpConfig /
+// request headers differ; explicit `settings` (incl. `lang`) overrides it.
+const lang = useLang()
+
+const { execute } = useMutation((http, query: string) =>
+  http.post<{ data: Record<string, any>[] }>(props.endpoint, {
+    entity: props.entity,
+    select: props.select,
+    filters: query
+      ? [['$or', props.queryKeys.map((key) => [key, 'contains', query])]]
+      : [],
+    sort: props.sort ?? [],
+    page: 1,
+    perPage: props.perPage ?? 25,
+    settings: { lang, ...props.settings }
+  })
+)
+
+// Read every config field through `props` at call time so a reactive change (e.g.
+// a locale-dependent sort or label) takes effect on the next search.
+async function fetch(query: string): Promise<T[]> {
+  const res = await execute(query)
+  return res.data.map(props.toModel)
+}
+</script>
+
+<template>
+  <SInputAsyncDropdown
+    v-model="model"
+    :fetch
+    :to-option
+    :multiple
+    :rethrow="isAuthError"
+    v-bind="$attrs"
+  >
+    <template v-if="$slots.info" #info><slot name="info" /></template>
+  </SInputAsyncDropdown>
+</template>

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

@@ -8,7 +8,7 @@ import { type FieldData } from '../FieldData'
 import { useLensEdit } from '../composables/LensEdit'
 import { type AvatarField } from '../fields/AvatarField'
 import { type Field } from '../fields/Field'
-import LensAvatarInput from './LensAvatarInput.vue'
+import LensInputAvatar from './LensInputAvatar.vue'
 
 const props = defineProps<{
   field: Field<FieldData>
@@ -116,7 +116,7 @@ async function onChange(value: File | string | null | undefined) {
     <SDataListItem v-if="editable">
       <template #label>{{ field.label() }}</template>
       <template #value>
-        <LensAvatarInput
+        <LensInputAvatar
           :model-value="model"
           :accept="avatarField.accept()"
           :image-type="avatarField.imageType()"

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

@@ -4,11 +4,12 @@ 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 SPill from '../../../components/SPill.vue'
+import SState from '../../../components/SState.vue'
 import { useManualDropdownPosition } from '../../../composables/Dropdown'
 import { useTrans } from '../../../composables/Lang'
 import { useValidation } from '../../../composables/Validation'
+import { type ColorMode } from '../../../support/Color'
 import { day } from '../../../support/Day'
 import { dispatchEditorKeydown, focusFirstEditable } from '../../../support/Dom'
 import { type FieldData } from '../FieldData'
@@ -75,7 +76,7 @@ const resolvedCell = computed<any>(() => {
 
 // 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 displayPills = computed<{ label: string; color?: ColorMode }[] | null>(() => {
   const cell = resolvedCell.value
   return cell && cell.type === 'pills' ? cell.pills : null
 })
@@ -83,7 +84,7 @@ const displayPills = computed<{ label: string; color?: PillMode }[] | 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 displayState = computed<{ label: string; mode?: ColorMode } | null>(() => {
   const cell = resolvedCell.value
   return cell && cell.type === 'state' ? { label: cell.label, mode: cell.mode } : null
 })

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

@@ -3,7 +3,7 @@ import SAvatar from '../../../components/SAvatar.vue'
 import { type TableCell } from '../../../composables/Table'
 import { type AvatarFieldData } from '../FieldData'
 import { type FilterOperator } from '../FilterOperator'
-import LensAvatarInput from '../components/LensAvatarInput.vue'
+import LensInputAvatar from '../components/LensInputAvatar.vue'
 import { type FilterInput } from '../filter-inputs/FilterInput'
 import { Field } from './Field'
 
@@ -62,7 +62,7 @@ export class AvatarField extends Field<AvatarFieldData> {
 
   override formInputComponent(): any {
     return this.defineFormInputComponent((props, { emit }) => {
-      return () => h(LensAvatarInput, {
+      return () => h(LensInputAvatar, {
         'label': this.formInputLabel(),
         'help': this.help() || undefined,
         'accept': this.accept(),

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

@@ -50,9 +50,11 @@ export abstract class Field<T extends FieldData> {
    * on the current app language.
    */
   placeholder(): string | null {
-    return this.ctx.lang === 'ja'
-      ? (this.data as any).placeholderJa ?? null
-      : (this.data as any).placeholderEn ?? null
+    return this.ctx.lang === 'ja' && 'placeholderJa' in this.data
+      ? this.data.placeholderJa ?? null
+      : this.ctx.lang === 'en' && 'placeholderEn' in this.data
+        ? this.data.placeholderEn ?? null
+        : null
   }
 
   /**
@@ -60,9 +62,11 @@ export abstract class Field<T extends FieldData> {
    * on the current app language.
    */
   help(): string | null {
-    return this.ctx.lang === 'ja'
-      ? (this.data as any).helpJa ?? null
-      : (this.data as any).helpEn ?? null
+    return this.ctx.lang === 'ja' && 'helpJa' in this.data
+      ? this.data.helpJa ?? null
+      : this.ctx.lang === 'en' && 'helpEn' in this.data
+        ? this.data.helpEn ?? null
+        : null
   }
 
   /**

package/lib/blocks/lens/filter-inputs/SelectFilterInput.ts

@@ -1,6 +1,7 @@
 import { type ValidationArgs } from '@vuelidate/core'
 import { defineAsyncComponent } from 'vue'
-import SInputDropdown, { type Option } from '../../../components/SInputDropdown.vue'
+import SInputDropdown from '../../../components/SInputDropdown.vue'
+import { type Option } from '../../../support/InputDropdown'
 import { required } from '../../../validation/rules'
 import { isAuthError } from '../validation/ServerErrors'
 import { FilterInput } from './FilterInput'

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 { type ColorMode } from '../support/Color'
 import SFragment from './SFragment.vue'
 import SLink from './SLink.vue'
 import SSpinner from './SSpinner.vue'
@@ -20,16 +21,7 @@ export type Size =
 
 export type Type = 'fill' | 'outline' | 'text'
 
-export type Mode =
-  | 'default'
-  | 'mute'
-  | 'neutral'
-  | 'white'
-  | 'black'
-  | 'info'
-  | 'success'
-  | 'warning'
-  | 'danger'
+export type Mode = ColorMode | 'white' | 'black'
 
 export interface Tooltip {
   tag?: Component | string

package/lib/components/SControlInputSearch.vue

@@ -4,9 +4,10 @@ import { type Component, computed } from 'vue'
 import { useControlSize } from '../composables/Control'
 import { useTrans } from '../composables/Lang'
 import { type Validatable } from '../composables/Validation'
-import SInputText, { type Align, type TextColor } from './SInputText.vue'
+import { type Align, type TextColor } from '../support/InputText'
+import SInputText from './SInputText.vue'
 
-const props = defineProps<{
+export interface Props {
   placeholder?: string
   unitAfter?: Component | string
   textColor?: TextColor | ((value: string | null) => TextColor)
@@ -16,7 +17,9 @@ const props = defineProps<{
   modelValue?: string | null
   displayValue?: string | null
   validation?: Validatable
-}>()
+}
+
+const props = defineProps<Props>()
 
 defineEmits<{
   'update:model-value': [value: string | null]

package/lib/components/SDescPill.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import { type ColorMode } from '../support/Color'
 import SDescEmpty from './SDescEmpty.vue'
-import SPill, { type Mode } from './SPill.vue'
+import SPill from './SPill.vue'
 
 export interface Pill {
-  mode?: Mode
+  mode?: ColorMode
   label: string
 }
 

package/lib/components/SDescState.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
+import { type ColorMode } from '../support/Color'
 import SDescEmpty from './SDescEmpty.vue'
-import SState, { type Mode } from './SState.vue'
+import SState from './SState.vue'
 
 export interface State {
-  mode?: Mode
+  mode?: ColorMode
   label: string
 }
 

package/lib/components/SInputAddon.vue

@@ -9,14 +9,16 @@ import {
 import { useFlyout } from '../composables/Flyout'
 import SDropdown from './SDropdown.vue'
 
-const props = withDefaults(defineProps<{
+export interface Props {
   label?: Component | string
   clickable?: boolean
   dropdown?: DropdownSection[]
   dropdownCaret?: boolean
   dropdownPosition?: 'top' | 'bottom'
   disabled?: boolean
-}>(), {
+}
+
+const props = withDefaults(defineProps<Props>(), {
   clickable: true,
   dropdown: () => [],
   dropdownCaret: true