@globalbrain/sefirot 4.57.0 → 4.59.0

package/lib/components/{SInputSelectSearch.vue → SInputAsyncDropdown.vue}

@@ -1,51 +1,40 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="T, Multiple extends boolean = false">
 import IconCaretDown from '~icons/ph/caret-down'
 import IconCaretUp from '~icons/ph/caret-up'
 import IconCheck from '~icons/ph/check'
-import { computed, nextTick, onUnmounted, ref, watch } from 'vue'
+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 { type Option } from '../support/InputDropdown'
 import SDropdownSectionFilterItem from './SDropdownSectionFilterItem.vue'
 import SInputBase, { type Props as BaseProps } from './SInputBase.vue'
 import SInputDropdownItem from './SInputDropdownItem.vue'
 import SSpinner from './SSpinner.vue'
 
-export type { Color, Size } from './SInputBase.vue'
-
-export type Option = OptionText | OptionAvatar
-
-export interface OptionBase {
-  type?: 'text' | 'avatar'
-  value: any
-  disabled?: boolean
-}
-
-export interface OptionText extends OptionBase {
-  type?: 'text'
-  label: string
-}
-
-export interface OptionAvatar extends OptionBase {
-  type: 'avatar'
-  label: string
-  image?: string | null
-}
-
-export interface Props extends BaseProps {
+export interface Props<T = any, Multiple extends boolean = false> extends BaseProps {
   placeholder?: string
-  // Fetch the options matching `query` from the server. Called when the dropdown
+  // Fetch the items matching `query` from the server. Called when the dropdown
   // opens (with the current query, usually empty for the initial list) and again,
-  // debounced, on each keystroke. Out-of-order responses are discarded, so it does
-  // not need to guard against races itself.
-  fetch: (query: string) => Promise<Option[]>
+  // debounced, on each keystroke. Out-of-order responses are discarded, so it
+  // does not need to guard against races itself.
+  fetch: (query: string) => Promise<T[]>
+  // Render an item as its dropdown option and, once selected, as its chip. The
+  // option's `value` is the item's identity — selection, de-duplication and
+  // removal all key off it. Applied to fetched items and to the bound model
+  // alike, so a seeded selection renders without appearing in any fetch.
+  toOption: (item: T) => Option
   // Decide whether a `fetch` rejection should propagate (be re-thrown) instead of
   // being swallowed into an empty list — e.g. to let auth/session failures reach
   // the app's re-auth flow. By default every rejection is swallowed.
   rethrow?: (error: unknown) => boolean
-  // Whether multiple options can be selected. The model is then an array of the
-  // selected options; otherwise it is a single option or `null`.
-  multiple?: boolean
+  // Whether multiple items can be selected. The model is then an array of items;
+  // otherwise it is a single item or `null`. Typed `boolean & Multiple` (equal to
+  // `Multiple`, since it extends `boolean`) rather than a bare `Multiple`: the
+  // intersection keeps Vue's runtime Boolean casting (a bare `multiple` attribute
+  // would otherwise arrive as `''` and read as false), while `Multiple` still
+  // drives the arity-conditional model type.
+  multiple?: boolean & Multiple
   // Whether the (single) value can be cleared, or the (multiple) selection emptied.
   nullable?: boolean
   disabled?: boolean
@@ -60,12 +49,18 @@ export interface Props extends BaseProps {
 // `closeOnSelect` defaults to `undefined` (not Vue's usual absent-Boolean → false)
 // so the `?? !multiple` fallback in onSelect can tell "omitted" from an explicit
 // `false`, keeping the single-select-closes / multiple-stays-open default.
-const props = withDefaults(defineProps<Props>(), { closeOnSelect: undefined })
+const props = withDefaults(defineProps<Props<T, Multiple>>(), { closeOnSelect: undefined })
 
-// The selected option(s). A single `Option | null`, or an `Option[]` when
-// `multiple`. Typed loosely (like SInputDropdown) so a consumer can bind a ref of
-// its own richer option type without v-model variance friction.
-const model = defineModel<any>({ required: true })
+// The selection: an array of items when `multiple`, otherwise a single item or
+// `null`. Items are the consumer's own model type; the option rendered for each
+// is derived on demand via `toOption`, so nothing extra is stored on the model.
+const model = defineModel<Multiple extends true ? T[] : T | null>({ required: true })
+
+// Write the model regardless of arity. The public type is arity-conditional, so
+// the concrete array / single value is cast at this single boundary.
+function commit(value: T[] | T | null): void {
+  model.value = value as typeof model.value
+}
 
 const { t } = useTrans({
   en: {
@@ -91,10 +86,10 @@ const { inset, update: updatePosition } = useManualDropdownPosition(
 )
 
 const query = ref('')
-const options = ref<Option[]>([])
+const items = ref([]) as Ref<T[]>
 const loading = ref(false)
 
-// Monotonic token so only the latest fetch may assign `options` / clear `loading`.
+// Monotonic token so only the latest fetch may assign `items` / clear `loading`.
 // With a debounced, user-driven search several requests can overlap; an older one
 // resolving late must not clobber the newer result.
 let fetchSeq = 0
@@ -104,20 +99,38 @@ const classes = computed(() => [
   { disabled: props.disabled }
 ])
 
-const selected = computed<Option | Option[] | null>(() => {
+// The selected items as a flat array, regardless of arity, for internal handling.
+const selectedItems = computed<T[]>(() => {
   if (props.multiple) {
-    return Array.isArray(model.value) ? (model.value as Option[]) : []
+    return Array.isArray(model.value) ? (model.value as T[]) : []
   }
-  return (model.value as Option | null) ?? null
+  return model.value != null ? [model.value as T] : []
 })
 
-const hasSelected = computed(() =>
-  props.multiple ? (selected.value as Option[]).length > 0 : selected.value !== null
+// The identities currently selected, for O(1) active / de-dup checks.
+const selectedValues = computed(
+  () => new Set(selectedItems.value.map((item) => props.toOption(item).value))
 )
 
+// The option(s) rendered for the current selection: an array of chips when
+// multiple, a single chip otherwise (matching SInputDropdownItem's `item`).
+const selectedOptions = computed<Option | Option[] | null>(() => {
+  if (props.multiple) {
+    return selectedItems.value.map((item) => props.toOption(item))
+  }
+  return model.value != null ? props.toOption(model.value as T) : null
+})
+
+// The fetched items paired with their rendered option, for the dropdown list.
+const optionItems = computed(() =>
+  items.value.map((item) => ({ item, option: props.toOption(item) }))
+)
+
+const hasSelected = computed(() => selectedItems.value.length > 0)
+
 const removable = computed(() => {
   if (props.multiple) {
-    return !!props.nullable || (selected.value as Option[]).length > 1
+    return !!props.nullable || selectedItems.value.length > 1
   }
   return !!props.nullable
 })
@@ -128,12 +141,12 @@ async function runFetch(q: string): Promise<void> {
   try {
     const res = await props.fetch(q)
     if (seq === fetchSeq) {
-      options.value = res
+      items.value = res
     }
   } catch (e) {
     // A failed search yields no options (the empty state shows)…
     if (seq === fetchSeq) {
-      options.value = []
+      items.value = []
     }
     // …unless the consumer wants this failure propagated (e.g. an auth/session
     // error that must reach the app's re-auth flow rather than look like "no
@@ -199,14 +212,14 @@ function onOpen() {
 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 /
-  // options / loading. Reopening then starts fresh instead of briefly rendering
+  // items / loading. Reopening then starts fresh instead of briefly rendering
   // the previous query's results (which would be selectable). The selected chips
-  // are unaffected — they render from the model, not from `options`.
+  // are unaffected — they render from the model, not from the fetched `items`.
   if (!value) {
     cancelPendingFetch()
     fetchSeq++
     query.value = ''
-    options.value = []
+    items.value = []
     loading.value = false
   }
 })
@@ -223,36 +236,32 @@ watch(() => props.disabled, (disabled) => {
 })
 
 function isActive(value: any): boolean {
-  if (props.multiple) {
-    return (selected.value as Option[]).some((o) => o.value === value)
-  }
-  return (selected.value as Option | null)?.value === value
+  return selectedValues.value.has(value)
 }
 
-function onSelect(option: Option): void {
+function onSelect(item: T): void {
+  const option = props.toOption(item)
   if (props.disabled || option.disabled) {
     return
   }
 
   props.validation?.$touch()
 
+  const value = option.value
+
   if (props.multiple) {
-    const current = (model.value as Option[] | null) ?? []
-    const exists = current.some((o) => o.value === option.value)
-    const next = exists
-      ? current.filter((o) => o.value !== option.value)
-      : [...current, option]
+    const current = selectedItems.value
+    const next = selectedValues.value.has(value)
+      ? current.filter((i) => props.toOption(i).value !== value)
+      : [...current, item]
     // Keep at least one unless clearing is allowed (mirrors SInputDropdown).
     if (next.length !== 0 || props.nullable) {
-      model.value = next
-    }
-  } else {
-    const currentValue = (model.value as Option | null)?.value
-    if (currentValue !== option.value) {
-      model.value = option
-    } else if (props.nullable) {
-      model.value = null
+      commit(next)
     }
+  } else if (!selectedValues.value.has(value)) {
+    commit(item)
+  } else if (props.nullable) {
+    commit(null)
   }
 
   if (props.closeOnSelect ?? !props.multiple) {
@@ -265,10 +274,9 @@ function onRemove(value: any): void {
   props.validation?.$touch()
 
   if (props.multiple) {
-    const current = (model.value as Option[] | null) ?? []
-    model.value = current.filter((o) => o.value !== value)
+    commit(selectedItems.value.filter((item) => props.toOption(item).value !== value))
   } else {
-    model.value = null
+    commit(null)
   }
 }
 
@@ -306,7 +314,7 @@ function focusNext(event: any): void {
 
 <template>
   <SInputBase
-    class="SInputSelectSearch"
+    class="SInputAsyncDropdown"
     :class="classes"
     :size
     :name
@@ -335,7 +343,7 @@ function focusNext(event: any): void {
         <div class="box-content">
           <SInputDropdownItem
             v-if="hasSelected"
-            :item="selected!"
+            :item="selectedOptions!"
             :size="size ?? 'small'"
             :removable
             :disabled="disabled ?? false"
@@ -369,11 +377,11 @@ function focusNext(event: any): void {
             >
             <!-- A refetch while options are already shown keeps the (stale) list
                  visible; this spinner signals that newer results are loading. -->
-            <SSpinner v-if="loading && options.length" class="search-spinner" />
+            <SSpinner v-if="loading && items.length" class="search-spinner" />
           </div>
 
-          <ul v-if="options.length" ref="list" class="list">
-            <li v-for="option in options" :key="option.value" class="item">
+          <ul v-if="items.length" ref="list" class="list">
+            <li v-for="{ item, option } in optionItems" :key="option.value" class="item">
               <button
                 class="button"
                 :class="{ active: isActive(option.value) }"
@@ -382,7 +390,7 @@ function focusNext(event: any): void {
                 tabindex="0"
                 @keyup.up.prevent="focusPrev"
                 @keyup.down.prevent="focusNext"
-                @click="onSelect(option)"
+                @click="onSelect(item)"
               >
                 <span v-if="multiple" class="checkbox">
                   <span class="checkbox-box">
@@ -646,8 +654,8 @@ function focusNext(event: any): void {
   color: var(--c-text-2);
 }
 
-.SInputSelectSearch.sm,
-.SInputSelectSearch.mini {
+.SInputAsyncDropdown.sm,
+.SInputAsyncDropdown.mini {
   .box {
     min-height: 32px;
   }
@@ -668,7 +676,7 @@ function focusNext(event: any): void {
   }
 }
 
-.SInputSelectSearch.md {
+.SInputAsyncDropdown.md {
   .box {
     min-height: 36px;
   }
@@ -689,7 +697,7 @@ function focusNext(event: any): void {
   }
 }
 
-.SInputSelectSearch.small {
+.SInputAsyncDropdown.small {
   .box {
     min-height: 40px;
   }
@@ -710,7 +718,7 @@ function focusNext(event: any): void {
   }
 }
 
-.SInputSelectSearch.medium {
+.SInputAsyncDropdown.medium {
   .box {
     min-height: 48px;
   }
@@ -731,7 +739,7 @@ function focusNext(event: any): void {
   }
 }
 
-.SInputSelectSearch.disabled {
+.SInputAsyncDropdown.disabled {
   .box {
     border-color: var(--input-disabled-border-color);
     background-color: var(--input-disabled-bg-color);
@@ -745,7 +753,7 @@ function focusNext(event: any): void {
   }
 }
 
-.SInputSelectSearch.has-error {
+.SInputAsyncDropdown.has-error {
   .box {
     border-color: var(--input-error-border-color);
   }

package/lib/components/SInputBase.vue

@@ -2,6 +2,7 @@
 import IconQuestion from '~icons/ph/question'
 import { type Component, computed, unref, useSlots } from 'vue'
 import { type Validatable } from '../composables/Validation'
+import { type Color, type Size } from '../support/InputBase'
 import STooltip from './STooltip.vue'
 
 export interface Props {
@@ -20,9 +21,6 @@ export interface Props {
   hideWarning?: boolean
 }
 
-export type Size = 'sm' | 'md' | 'mini' | 'small' | 'medium'
-export type Color = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
-
 const props = defineProps<Props>()
 
 const slots = useSlots()

package/lib/components/SInputCheckbox.vue

@@ -1,28 +1,17 @@
 <script setup lang="ts">
 import IconCheck from '~icons/ph/check-bold'
 import IconMinus from '~icons/ph/minus-bold'
-import { type Component, computed } from 'vue'
-import { type Validatable } from '../composables/Validation'
-import SInputBase, { type Color, type Size } from './SInputBase.vue'
-
-export type { Color, Size }
-
-const props = withDefaults(defineProps<{
-  size?: Size
-  label?: string
-  info?: string
-  note?: string
-  help?: string
-  checkIcon?: Component
-  checkText?: string
-  checkColor?: Color
+import { computed } from 'vue'
+import SInputBase, { type Props as BaseProps } from './SInputBase.vue'
+
+export interface Props extends BaseProps {
   text?: string
   disabled?: boolean
   value?: boolean | 'indeterminate'
   modelValue?: boolean | 'indeterminate'
-  validation?: Validatable
-  hideError?: boolean
-}>(), {
+}
+
+const props = withDefaults(defineProps<Props>(), {
   value: undefined,
   modelValue: undefined
 })
@@ -62,6 +51,7 @@ function onClick() {
     class="SInputCheckbox"
     :class="classes"
     :size
+    :name
     :label
     :note
     :info
@@ -70,7 +60,9 @@ function onClick() {
     :check-text
     :check-color
     :validation
+    :warning
     :hide-error
+    :hide-warning
   >
     <div class="container">
       <div

package/lib/components/SInputCheckboxes.vue

@@ -1,43 +1,24 @@
-<script setup lang="ts">
-import { type Component, computed } from 'vue'
-import { type Validatable } from '../composables/Validation'
-import SInputBase, { type Color, type Size } from './SInputBase.vue'
+<script setup lang="ts" generic="T = any">
+import { computed } from 'vue'
+import { type Option } from '../support/InputOption'
+import SInputBase, { type Props as BaseProps } from './SInputBase.vue'
 import SInputCheckbox from './SInputCheckbox.vue'
 
-export type { Color, Size }
-
-export type Value = any
-
-export interface Option {
-  label: string
-  value: Value
+export interface Props<T = any> extends BaseProps {
+  options: Option<T>[]
+  nullable?: boolean
   disabled?: boolean
+  value?: T[]
+  modelValue?: T[]
 }
 
-const props = withDefaults(defineProps<{
-  size?: Size
-  name?: string
-  label?: string
-  info?: string
-  note?: string
-  help?: string
-  checkIcon?: Component
-  checkText?: string
-  checkColor?: Color
-  options: Option[]
-  nullable?: boolean
-  disabled?: boolean
-  value?: Value[]
-  modelValue?: Value[]
-  validation?: Validatable
-  hideError?: boolean
-}>(), {
+const props = withDefaults(defineProps<Props<T>>(), {
   nullable: true
 })
 
 const emit = defineEmits<{
-  'update:model-value': [value: Value[]]
-  'change': [value: Value[]]
+  'update:model-value': [value: T[]]
+  'change': [value: T[]]
 }>()
 
 const _value = computed(() => {
@@ -48,11 +29,11 @@ const _value = computed(() => {
       : []
 })
 
-function isChecked(value: Value): boolean {
+function isChecked(value: T): boolean {
   return _value.value.includes(value)
 }
 
-function onChange(value: Value): void {
+function onChange(value: T): void {
   const distinct = _value.value
     .filter((v) => v !== value)
     .concat(_value.value.includes(value) ? [] : [value])
@@ -80,7 +61,9 @@ function onChange(value: Value): void {
     :check-text
     :check-color
     :validation
+    :warning
     :hide-error
+    :hide-warning
   >
     <div class="container">
       <div class="row">

package/lib/components/SInputDate.vue

@@ -1,29 +1,17 @@
 <script setup lang="ts">
 import { DatePicker } from 'v-calendar'
-import { type Component, computed } from 'vue'
-import { type Validatable } from '../composables/Validation'
+import { computed } from 'vue'
 import { type Day, day } from '../support/Day'
-import SInputBase, { type Color, type Size } from './SInputBase.vue'
-
-export type { Color, Size }
-
-const props = defineProps<{
-  size?: Size
-  name?: string
-  label?: string
-  info?: string
-  note?: string
-  help?: string
-  checkIcon?: Component
-  checkText?: string
-  checkColor?: Color
+import SInputBase, { type Props as BaseProps } from './SInputBase.vue'
+
+export interface Props extends BaseProps {
   block?: boolean
   disabled?: boolean
   tabindex?: -1 | 0 | number
   modelValue: Day | null
-  validation?: Validatable
-  hideError?: boolean
-}>()
+}
+
+const props = defineProps<Props>()
 
 const emit = defineEmits<{
   'update:model-value': [value: Day | null]
@@ -61,8 +49,10 @@ function onBlur() {
     :check-icon
     :check-text
     :check-color
-    :hide-error
     :validation
+    :warning
+    :hide-error
+    :hide-warning
   >
     <div class="container">
       <DatePicker

package/lib/components/SInputDropdown.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="T = any">
 import IconCaretDown from '~icons/ph/caret-down'
 import IconCaretUp from '~icons/ph/caret-up'
 import xor from 'lodash-es/xor'
@@ -6,14 +6,14 @@ import { computed, ref } from 'vue'
 import { type DropdownSectionFilter, useManualDropdownPosition } from '../composables/Dropdown'
 import { useFlyout } from '../composables/Flyout'
 import { useTrans } from '../composables/Lang'
+import { type Option } from '../support/InputDropdown'
 import SDropdown from './SDropdown.vue'
 import SInputBase, { type Props as BaseProps } from './SInputBase.vue'
 import SInputDropdownItem from './SInputDropdownItem.vue'
 
-export type { Color, Size } from './SInputBase.vue'
-export interface Props extends BaseProps {
+export interface Props<T = any> extends BaseProps {
   placeholder?: string
-  options: Option[]
+  options: Option<T>[]
   position?: 'top' | 'bottom'
   noSearch?: boolean
   nullable?: boolean
@@ -21,32 +21,12 @@ export interface Props extends BaseProps {
   disabled?: boolean
 }
 
-export type PrimitiveValue = any
-export type ArrayValue = any[]
-export type OptionValue = any
+const props = defineProps<Props<T>>()
 
-export type Option = OptionText | OptionAvatar
-
-export interface OptionBase {
-  type?: 'text' | 'avatar'
-  value: OptionValue
-  disabled?: boolean
-}
-
-export interface OptionText extends OptionBase {
-  type?: 'text'
-  label: string
-}
-
-export interface OptionAvatar extends OptionBase {
-  type: 'avatar'
-  label: string
-  image?: string | null
-}
-
-const props = defineProps<Props>()
-
-const model = defineModel<PrimitiveValue | ArrayValue>({ required: true })
+// Single- vs multi-select is inferred from the bound model at runtime: an array
+// model selects multiple values, anything else a single value (or `null`) — so no
+// `multiple` prop is needed (unlike SInputAsyncDropdown).
+const model = defineModel<T | T[] | null>({ required: true })
 
 const { t } = useTrans({
   en: {
@@ -78,14 +58,12 @@ const dropdownOptions = computed<DropdownSectionFilter[]>(() => [{
   onClick: onSelect
 }])
 
-const selected = computed(() => {
+const selected = computed<Option<T> | Option<T>[] | null>(() => {
   if (Array.isArray(model.value)) {
-    return props.options.filter((o) => (model.value as ArrayValue).includes(o.value))
+    return props.options.filter((o) => (model.value as T[]).includes(o.value))
   }
 
-  const item = props.options.find((o) => o.value === model.value)
-
-  return item ?? null
+  return props.options.find((o) => o.value === model.value) ?? null
 })
 
 const hasSelected = computed(() => {
@@ -94,7 +72,7 @@ const hasSelected = computed(() => {
 
 const removable = computed(() => {
   if (Array.isArray(model.value)) {
-    return props.nullable || (selected.value as Option[]).length > 1
+    return !!props.nullable || (selected.value as Option<T>[]).length > 1
   }
 
   return !!props.nullable
@@ -107,20 +85,18 @@ async function onOpen() {
   }
 }
 
-function onSelect(value: OptionValue) {
+function onSelect(value: T) {
   props.validation?.$touch()
 
   if (Array.isArray(model.value)) {
-    const toggled = xor(model.value, [value])
+    const toggled = xor(model.value as T[], [value])
     if (toggled.length !== 0 || props.nullable) {
       model.value = toggled
     }
-  } else {
-    if (value !== model.value) {
-      model.value = value
-    } else if (props.nullable) {
-      model.value = null
-    }
+  } else if (value !== model.value) {
+    model.value = value
+  } else if (props.nullable) {
+    model.value = null
   }
 
   props.closeOnClick && close()
@@ -132,6 +108,7 @@ function onSelect(value: OptionValue) {
     class="SInputDropdown"
     :class="classes"
     :size
+    :name
     :label
     :note
     :info
@@ -140,7 +117,9 @@ function onSelect(value: OptionValue) {
     :check-text
     :check-color
     :validation
+    :warning
     :hide-error
+    :hide-warning
   >
     <div ref="container" class="container">
       <div