@globalbrain/sefirot 4.56.0 → 4.58.0

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

package/lib/components/SInputDropdownItem.vue

@@ -1,34 +1,17 @@
 <script setup lang="ts">
 import IconX from '~icons/ph/x'
+import { type Size } from '../support/InputBase'
+import { type Option } from '../support/InputDropdown'
 import SAvatar from './SAvatar.vue'
-import { type Size } from './SInputBase.vue'
 
-export type { Size }
-
-export type Item = ItemText | ItemAvatar
-
-export interface ItemBase {
-  type?: 'text' | 'avatar'
-  value: any
-}
-
-export interface ItemText extends ItemBase {
-  type?: 'text'
-  label: string
-}
-
-export interface ItemAvatar extends ItemBase {
-  type: 'avatar'
-  label: string
-  image?: string | null
-}
-
-const props = defineProps<{
-  item: Item | Item[]
+export interface Props {
+  item: Option | Option[]
   size: Size
   removable: boolean
   disabled: boolean
-}>()
+}
+
+const props = defineProps<Props>()
 
 const emit = defineEmits<{
   remove: [value: any]
@@ -47,7 +30,7 @@ function emitRemove(value: any) {
       <template v-for="(el, i) in item" :key="i">
         <div v-if="el.type === undefined || el.type === 'text'" class="many-text">
           <div class="many-text-value">{{ el.label }}</div>
-          <button v-if="removable" class="many-text-close" @click.stop="emitRemove(el.value)">
+          <button v-if="removable" type="button" class="many-text-close" @click.stop="emitRemove(el.value)">
             <IconX class="many-text-close-icon" />
           </button>
         </div>
@@ -56,7 +39,7 @@ function emitRemove(value: any) {
             <div class="many-avatar-image"><SAvatar size="fill" :avatar="el.image" /></div>
             <div class="many-avatar-name">{{ el.label }}</div>
           </div>
-          <button v-if="removable" class="many-avatar-close" @click.stop="emitRemove(el.value)">
+          <button v-if="removable" type="button" class="many-avatar-close" @click.stop="emitRemove(el.value)">
             <IconX class="many-avatar-close-icon" />
           </button>
         </div>
@@ -70,7 +53,7 @@ function emitRemove(value: any) {
         <div class="one-avatar-image"><SAvatar size="fill" :avatar="item.image" /></div>
         <div class="one-avatar-name">{{ item.label }}</div>
       </div>
-      <button v-if="removable" class="one-close" @click.stop="emitRemove(item.value)">
+      <button v-if="removable" type="button" class="one-close" @click.stop="emitRemove(item.value)">
         <IconX class="one-close-icon" />
       </button>
     </div>

package/lib/components/SInputFile.vue

@@ -1,29 +1,18 @@
 <script setup lang="ts">
-import { type Component, computed, ref } from 'vue'
-import { type Validatable } from '../composables/Validation'
-import SInputBase, { type Color, type Size } from './SInputBase.vue'
-
-export type { Color, Size }
-
-const props = defineProps<{
-  size?: Size
-  label?: string
-  info?: string
-  note?: string
-  help?: string
+import { computed, ref } from 'vue'
+import SInputBase, { type Props as BaseProps } from './SInputBase.vue'
+
+export interface Props extends BaseProps {
   text?: string
   placeholder?: string
   accept?: string
   multiple?: boolean
   tabindex?: -1 | 0 | number
-  checkIcon?: Component
-  checkText?: string
-  checkColor?: Color
   value?: File | File[] | null
   modelValue?: File | File[] | null
-  hideError?: boolean
-  validation?: Validatable
-}>()
+}
+
+const props = defineProps<Props>()
 
 const emit = defineEmits<{
   'update:model-value': [file: File | File[] | null]
@@ -69,6 +58,7 @@ function onChange(e: Event) {
     class="SInputFile"
     :class="classes"
     :size
+    :name
     :label
     :note
     :info
@@ -77,7 +67,9 @@ function onChange(e: Event) {
     :check-text
     :check-color
     :validation
+    :warning
     :hide-error
+    :hide-warning
   >
     <input
       ref="input"

package/lib/components/SInputFileUpload.vue

@@ -1,20 +1,18 @@
 <script setup lang="ts" generic="T extends ModelType = 'file'">
 import { type ValidationRuleWithParams } from '@vuelidate/core'
 import { useDropZone } from '@vueuse/core'
-import { type Component, computed, ref } from 'vue'
+import { computed, ref } from 'vue'
 import { useTrans } from '../composables/Lang'
-import { type Validatable } from '../composables/Validation'
 import { formatSize } from '../support/File'
-import SButton, { type Mode as ButtonMode } from './SButton.vue'
+import { type FileObject } from '../support/InputFileUpload'
+import SButton from './SButton.vue'
 import SCard from './SCard.vue'
 import SCardBlock from './SCardBlock.vue'
-import { type State as IndicatorState } from './SIndicator.vue'
-import SInputBase, { type Color } from './SInputBase.vue'
+import SInputBase, { type Props as BaseProps } from './SInputBase.vue'
 import SInputFileUploadItem from './SInputFileUploadItem.vue'
 import STrans from './STrans.vue'
 
 export type Size = 'mini' | 'small' | 'medium'
-export type { Color }
 
 export type ModelType = 'file' | 'object'
 
@@ -26,44 +24,20 @@ export type ModelType = 'file' | 'object'
  */
 export type ModelValue<T extends ModelType> = T extends 'file' ? File | string : FileObject
 
-export interface FileObject {
-  file: File
-  indicatorState?: IndicatorState | null
-  canRemove?: boolean
-  action?: Action
-  errorMessage?: string | null
-}
-
-export interface Action {
-  mode?: ButtonMode
-  icon?: Component
-  leadIcon?: Component
-  trailIcon?: Component
-  label?: string
-  onClick(): void
-}
-
-const props = withDefaults(defineProps<{
+export interface Props<T extends ModelType = 'file'> extends BaseProps {
   size?: Size
-  label?: string
-  info?: string
-  note?: string
-  help?: string
   text?: string
   placeholder?: string
   emptyText?: string
   accept?: string
-  checkIcon?: Component
-  checkText?: string
-  checkColor?: Color
   droppable?: boolean
   value?: ModelValue<T>[]
   modelType?: T
   modelValue?: ModelValue<T>[]
   rules?: Record<string, ValidationRuleWithParams>
-  validation?: Validatable
-  hideError?: boolean
-}>(), {
+}
+
+const props = withDefaults(defineProps<Props<T>>(), {
   modelType: 'file' as any // `ModelType` doesn't work so stubbing it.
 })
 
@@ -171,6 +145,8 @@ function toFileObjects(files: File[]) {
   <SInputBase
     class="SInputFileUpload"
     :class="classes"
+    :size
+    :name
     :label
     :note
     :info
@@ -179,7 +155,9 @@ function toFileObjects(files: File[]) {
     :check-text
     :check-color
     :validation
+    :warning
     :hide-error
+    :hide-warning
   >
     <template #default="{ hasError }">
       <input

package/lib/components/SInputFileUploadItem.vue

@@ -2,34 +2,20 @@
 import IconFileText from '~icons/ph/file-text'
 import IconTrash from '~icons/ph/trash'
 import { type ValidationRuleWithParams } from '@vuelidate/core'
-import { type Component, computed, watch } from 'vue'
+import { computed, watch } from 'vue'
 import { useValidation } from '../composables/Validation'
 import { formatSize } from '../support/File'
-import SButton, { type Mode as ButtonMode } from './SButton.vue'
+import { type Action, type FileObject } from '../support/InputFileUpload'
+import SButton from './SButton.vue'
 import SCardBlock from './SCardBlock.vue'
 import SIndicator, { type State as IndicatorState } from './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
-}
-
-const props = defineProps<{
+export interface Props {
   file: File | FileObject | string
   rules?: Record<string, ValidationRuleWithParams>
-}>()
+}
+
+const props = defineProps<Props>()
 
 defineEmits<{
   remove: []

package/lib/components/SInputHMS.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
+import { type Hms } 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
   noHour?: boolean
@@ -13,11 +13,7 @@ export interface Props extends BaseProps {
   modelValue?: Value
 }
 
-export interface Value {
-  hour: string | null
-  minute: string | null
-  second: string | null
-}
+export type Value = Hms
 
 export interface Placeholder {
   hour?: string
@@ -136,6 +132,7 @@ function createRequiredTouched(): boolean[] {
     class="SInputHMS"
     :class="[size ?? 'small', { disabled }]"
     :size
+    :name
     :label
     :note
     :info
@@ -143,8 +140,10 @@ function createRequiredTouched(): boolean[] {
     :check-icon
     :check-text
     :check-color
-    :hide-error
     :validation
+    :warning
+    :hide-error
+    :hide-warning
   >
     <div class="container" :class="{ focus: isFocused }">
       <input