@globalbrain/sefirot 4.57.0 → 4.58.0

package/lib/components/SInputSwitch.vue

@@ -1,29 +1,18 @@
 <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'
+import { computed } from 'vue'
+import SInputBase, { type Props as BaseProps } from './SInputBase.vue'
 
-export type { Color, Size }
 export type ActiveColor = 'info' | 'success' | 'warning' | 'danger'
 
-const props = withDefaults(defineProps<{
-  size?: Size
-  name?: string
-  label?: string
-  info?: string
-  note?: string
+export interface Props extends BaseProps {
   text?: string
   color?: ActiveColor
-  help?: string
-  checkIcon?: Component
-  checkText?: string
-  checkColor?: Color
   disabled?: boolean
   value?: boolean
   modelValue?: boolean
-  hideError?: boolean
-  validation?: Validatable
-}>(), {
+}
+
+const props = withDefaults(defineProps<Props>(), {
   value: undefined,
   modelValue: undefined
 })
@@ -64,12 +53,14 @@ function emitChange(): void {
     :label
     :note
     :info
+    :help
     :check-icon
     :check-text
     :check-color
-    :help
-    :hide-error
     :validation
+    :warning
+    :hide-error
+    :hide-warning
   >
     <div class="container">
       <div class="input" :class="{ on: _value }" role="button" @click="emitChange">

package/lib/components/SInputSwitches.vue

@@ -1,46 +1,30 @@
-<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 SInputSwitch from './SInputSwitch.vue'
 
-export type { Color, Size }
-
-export interface Option {
-  label: string
-  value: any
+export interface Props<T = any> extends BaseProps {
+  options: Option<T>[]
+  disabled?: boolean
+  modelValue: T[]
 }
 
-const props = defineProps<{
-  size?: Size
-  name?: string
-  label?: string
-  info?: string
-  note?: string
-  help?: string
-  checkIcon?: Component
-  checkText?: string
-  checkColor?: Color
-  options: Option[]
-  disabled?: boolean
-  modelValue: any[]
-  hideError?: boolean
-  validation?: Validatable
-}>()
+const props = defineProps<Props<T>>()
 
 const emit = defineEmits<{
-  'update:model-value': [value: any[]]
+  'update:model-value': [value: T[]]
 }>()
 
 const classes = computed(() => [
   props.size ?? 'small'
 ])
 
-function isChecked(value: any): boolean {
+function isChecked(value: T): boolean {
   return props.modelValue.includes(value)
 }
 
-function onChange(value: any): void {
+function onChange(value: T): void {
   const difference = props.modelValue
     .filter((v) => v !== value)
     .concat(props.modelValue.includes(value) ? [] : [value])
@@ -62,8 +46,10 @@ function onChange(value: any): void {
     :check-icon
     :check-text
     :check-color
-    :hide-error
     :validation
+    :warning
+    :hide-error
+    :hide-warning
   >
     <div class="container">
       <div class="row">
@@ -71,7 +57,7 @@ function onChange(value: any): void {
           <SInputSwitch
             size="sm"
             :text="option.label"
-            :disabled
+            :disabled="option.disabled ?? disabled"
             :model-value="isChecked(option.value)"
             @update:model-value="onChange(option.value)"
           />

package/lib/components/SInputText.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { type Component, computed, ref } from 'vue'
+import { type Align, type TextColor } from '../support/InputText'
 import SInputBase, { type Props as BaseProps } from './SInputBase.vue'
 
-export type { Color, Size } from './SInputBase.vue'
 export interface Props extends BaseProps {
   type?: string
   placeholder?: string
@@ -16,9 +16,6 @@ export interface Props extends BaseProps {
   displayValue?: string | null
 }
 
-export type Align = 'left' | 'center' | 'right'
-export type TextColor = 'neutral' | 'info' | 'success' | 'warning' | 'danger'
-
 const props = defineProps<Props>()
 
 const emit = defineEmits<{

package/lib/components/SInputTextarea.vue

@@ -4,8 +4,6 @@ import SDivider from './SDivider.vue'
 import SInputBase, { type Props as BaseProps } from './SInputBase.vue'
 import SInputSegments from './SInputSegments.vue'
 
-export type { Color, Size } from './SInputBase.vue'
-
 export interface Props extends BaseProps {
   placeholder?: string
   disabled?: boolean

package/lib/components/SInputYMD.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
+import { type Ymd } from '../support/Day'
 import SInputBase, { type Props as BaseProps } from './SInputBase.vue'
 
-export type { Color, Size } from './SInputBase.vue'
 export interface Props extends BaseProps {
   placeholder?: Placeholder
   noYear?: boolean
@@ -14,11 +14,7 @@ export interface Props extends BaseProps {
   modelValue?: Value
 }
 
-export interface Value {
-  year: number | null
-  month: number | null
-  date: number | null
-}
+export type Value = Ymd
 
 export type ValueType = 'year' | 'month' | 'date'
 
@@ -135,6 +131,7 @@ function createRequiredTouched(): boolean[] {
     class="SInputYMD"
     :class="[size ?? 'small', { disabled }]"
     :size
+    :name
     :label
     :note
     :info
@@ -142,8 +139,10 @@ function createRequiredTouched(): boolean[] {
     :check-icon
     :check-text
     :check-color
-    :hide-error
     :validation
+    :warning
+    :hide-error
+    :hide-warning
   >
     <div class="container" :class="{ focus: isFocused, block }">
       <input

package/lib/components/SPagination.vue

@@ -3,11 +3,11 @@ import IconCaretLeft from '~icons/ph/caret-left-bold'
 import IconCaretRight from '~icons/ph/caret-right-bold'
 import { computed } from 'vue'
 import { useTrans } from '../composables/Lang'
+import { type Align } from '../support/InputText'
 import { format } from '../support/Num'
 import SButton from './SButton.vue'
 
 export type Size = 'xs' | 'sm' | 'md' | 'mini' | 'small' | 'medium'
-export type Align = 'left' | 'center' | 'right'
 
 const props = withDefaults(defineProps<{
   size?: Size

package/lib/components/SPill.vue

@@ -1,15 +1,15 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import { type ColorMode } from '../support/Color'
 
 export type Size = 'mini' | 'small' | 'medium' | 'large'
 export type Type = 'dimm' | 'fill'
-export type Mode = 'default' | 'mute' | 'neutral' | 'info' | 'success' | 'warning' | 'danger'
 
 const props = defineProps<{
   as?: string
   size?: Size
   type?: Type
-  mode?: Mode
+  mode?: ColorMode
   label?: string
   clickable?: boolean
 }>()

package/lib/components/SState.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import { type ColorMode } from '../support/Color'
 
 export type Size = 'mini' | 'small' | 'medium' | 'large'
-export type Mode = 'default' | 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
 
 const props = defineProps<{
   as?: string
   size?: Size
-  mode?: Mode
+  mode?: ColorMode
   label: string
 }>()
 

package/lib/components/STableCellPill.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import SPill, { type Mode } from './SPill.vue'
+import { type ColorMode } from '../support/Color'
+import SPill from './SPill.vue'
 
 defineProps<{
   pill?: string
-  color?: Mode
+  color?: ColorMode
 }>()
 </script>
 

package/lib/components/STableCellState.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import SState, { type Mode } from './SState.vue'
+import { type ColorMode } from '../support/Color'
+import SState from './SState.vue'
 
 defineProps<{
   state?: string
-  mode?: Mode
+  mode?: ColorMode
 }>()
 </script>
 

package/lib/composables/Table.ts

@@ -1,7 +1,9 @@
 import { type Component, type MaybeRef, type MaybeRefOrGetter } from 'vue'
 import { type Mode as ButtonMode } from '../components/SButton.vue'
 import { type State as IndicatorState } from '../components/SIndicator.vue'
+import { type ColorMode } from '../support/Color'
 import { type Day } from '../support/Day'
+import { type Align } from '../support/InputText'
 import { type DropdownSection } from './Dropdown'
 import { type Position } from './Tooltip'
 
@@ -85,22 +87,13 @@ export type TableCellType =
   | 'component'
   | 'actions'
 
-export type ColorModes =
-  | 'default'
-  | 'mute'
-  | 'neutral'
-  | 'info'
-  | 'success'
-  | 'warning'
-  | 'danger'
-
 export interface TableCellBase {
   type: TableCellType
 }
 
 export interface TableCellText<V = any, R = any> extends TableCellBase {
   type: 'text'
-  align?: 'left' | 'center' | 'right'
+  align?: Align
   icon?: Component
   value?: string | null
   link?: string | null
@@ -111,7 +104,7 @@ export interface TableCellText<V = any, R = any> extends TableCellBase {
 
 export interface TableCellNumber<V = any, R = any> extends TableCellBase {
   type: 'number'
-  align?: 'left' | 'center' | 'right'
+  align?: Align
   icon?: Component
   value?: number | null
   separator?: boolean
@@ -139,11 +132,11 @@ export interface TableCellPathSegment {
   onClick?(): void
 }
 
-export type TableCellValueColor = ColorModes | 'soft'
+export type TableCellValueColor = ColorMode | 'soft'
 
 export interface TableCellDay extends TableCellBase {
   type: 'day'
-  align?: 'left' | 'center' | 'right'
+  align?: Align
   value?: Day | null
   format?: string
   color?: 'neutral' | 'soft' | 'mute'
@@ -155,7 +148,7 @@ export interface TableCellPill extends TableCellBase {
   color?: TableCellPillColor
 }
 
-export type TableCellPillColor = ColorModes
+export type TableCellPillColor = ColorMode
 
 export interface TableCellPills extends TableCellBase {
   type: 'pills'
@@ -207,7 +200,7 @@ export interface TableCellComponent extends TableCellBase {
 export interface TableCellState extends TableCellBase {
   type: 'state'
   label: string
-  mode?: ColorModes
+  mode?: ColorMode
 }
 
 export interface TableCellIndicator extends TableCellBase {

package/lib/support/Color.ts

@@ -0,0 +1,4 @@
+// The semantic color modes shared by the colored components (SButton, SPill,
+// SState, SInputSegments, and table cells).
+
+export type ColorMode = 'default' | 'mute' | 'neutral' | 'info' | 'success' | 'warning' | 'danger'

package/lib/support/InputBase.ts

@@ -0,0 +1,5 @@
+// The size and color scales shared by SInputBase and every input built on it.
+
+export type Size = 'sm' | 'md' | 'mini' | 'small' | 'medium'
+
+export type Color = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'

package/lib/support/InputDropdown.ts

@@ -0,0 +1,15 @@
+// The dropdown option (text or avatar row) shared by SInputDropdown and
+// SInputAsyncDropdown — the base choice option (InputOption) plus a render type.
+
+import { type Option as BaseOption } from './InputOption'
+
+export type Option<T = any> = OptionText<T> | OptionAvatar<T>
+
+export interface OptionText<T = any> extends BaseOption<T> {
+  type?: 'text'
+}
+
+export interface OptionAvatar<T = any> extends BaseOption<T> {
+  type: 'avatar'
+  image?: string | null
+}

package/lib/support/InputFileUpload.ts

@@ -0,0 +1,22 @@
+// The file/action shapes shared by SInputFileUpload and its item child.
+
+import { type Component } from 'vue'
+import { type Mode as ButtonMode } from '../components/SButton.vue'
+import { type State as IndicatorState } from '../components/SIndicator.vue'
+
+export interface FileObject {
+  file: File
+  indicatorState?: IndicatorState | null
+  canRemove?: boolean
+  action?: Action | null
+  errorMessage?: string | null
+}
+
+export interface Action {
+  mode?: ButtonMode
+  icon?: Component
+  leadIcon?: Component
+  trailIcon?: Component
+  label?: string
+  onClick(): void
+}

package/lib/support/InputOption.ts

@@ -0,0 +1,8 @@
+// The label + value option shape shared by the choice-list inputs (SInputSelect,
+// SInputCheckboxes, SInputRadios, SInputSegments, SInputSwitches).
+
+export interface Option<T = any> {
+  label: string
+  value: T
+  disabled?: boolean
+}

package/lib/support/InputText.ts

@@ -0,0 +1,6 @@
+// The text alignment and color scales shared by SInputText / SInputNumber (and
+// anything that mirrors them, e.g. SPagination's align).
+
+export type Align = 'left' | 'center' | 'right'
+
+export type TextColor = 'neutral' | 'info' | 'success' | 'warning' | 'danger'

package/package.json

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

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

@@ -1,92 +0,0 @@
-<script setup lang="ts">
-import SInputSelectSearch, { type Option } from '../../../components/SInputSelectSearch.vue'
-import { useMutation } from '../../../composables/Api'
-import { useLang } from '../../../composables/Lang'
-import { type LensQuerySettings, type LensQuerySort } from '../LensQuery'
-import { isAuthError } from '../validation/ServerErrors'
-
-export type { Color, Size } from '../../../components/SInputBase.vue'
-export type { Option }
-
-// A lens-backed search-select. Combines the search (a lens query), the fetch (no
-// repo needed), and the row → option mapping (no ops needed) into one component:
-// the consumer configures the entity and how a row becomes an option, and the
-// component searches the server as the user types via SInputSelectSearch.
-//
-// Selection UI props (multiple, nullable, disabled, placeholder, size, label,
-// validation, position, closeOnSelect, debounce, …) fall through to
-// SInputSelectSearch as attributes.
-export interface Props {
-  // The lens search endpoint (e.g. `/api/admin/lens/search`).
-  endpoint: string
-
-  // The entity to search.
-  entity: string
-
-  // Columns to fetch for each row, projected into an option by `toOption`.
-  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
-
-  // Map a raw result row to an option. The selected option(s) are the model, so
-  // include everything the consumer needs back (e.g. a related record), plus the
-  // `value` / `label` (and `image` for an avatar option) the select renders.
-  toOption: (row: Record<string, any>) => Option
-}
-
-const props = defineProps<Props>()
-
-// Pass the selection through to SInputSelectSearch. Typed loosely so a consumer
-// can bind a ref of its own richer option type (see SInputSelectSearch).
-const model = defineModel<any>({ required: true })
-
-// Don't let lens-config attributes that happen to share a name 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<Option[]> {
-  const res = await execute(query)
-  return res.data.map(props.toOption)
-}
-</script>
-
-<template>
-  <SInputSelectSearch v-model="model" :fetch :rethrow="isAuthError" v-bind="$attrs">
-    <template v-if="$slots.info" #info><slot name="info" /></template>
-  </SInputSelectSearch>
-</template>