@globalbrain/sefirot 4.57.0 → 4.58.0

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]

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

package/lib/components/SInputImage.vue

@@ -1,24 +1,15 @@
 <script setup lang="ts">
 import IconImage from '~icons/ph/image-bold'
-import { type Component, computed, ref } from 'vue'
+import { computed, ref } from 'vue'
 import { useImageSrcFromFile } from '../composables/Image'
-import { type Validatable } from '../composables/Validation'
 import SButton from './SButton.vue'
-import SInputBase, { type Color } from './SInputBase.vue'
+import SInputBase, { type Props as BaseProps } from './SInputBase.vue'
 
 export type Size = 'mini' | 'small' | 'medium'
-export type { Color }
 export type ImageType = 'rectangle' | 'circle'
 
-const props = withDefaults(defineProps<{
+export interface Props extends BaseProps {
   size?: Size
-  label?: string
-  info?: string
-  note?: string
-  help?: string
-  checkIcon?: Component
-  checkText?: string
-  checkColor?: Color
   imageType?: ImageType
   imageWidth?: string
   imageAspectRatio?: string
@@ -29,9 +20,9 @@ const props = withDefaults(defineProps<{
   disabled?: boolean
   value?: File | string | null
   modelValue?: File | string | null
-  hideError?: boolean
-  validation?: Validatable
-}>(), {
+}
+
+const props = withDefaults(defineProps<Props>(), {
   size: 'small',
   imageType: 'rectangle',
   imageWidth: '96px',
@@ -91,14 +82,18 @@ function onFileDelete() {
   <SInputBase
     class="SInputImage"
     :class="[size]"
+    :size
+    :name
     :label
     :note
     :info
     :check-icon
     :check-text
     :check-color
-    :hide-error
     :validation
+    :warning
+    :hide-error
+    :hide-warning
   >
     <template #default>
       <input

package/lib/components/SInputNumber.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { type Component, computed } from 'vue'
+import { type Align, type TextColor } from '../support/InputText'
 import { type Props as BaseProps } from './SInputBase.vue'
 import SInputText from './SInputText.vue'
 
@@ -17,9 +18,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/SInputRadio.vue

@@ -1,26 +1,14 @@
 <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'
-
-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 { computed } from 'vue'
+import SInputBase, { type Props as BaseProps } from './SInputBase.vue'
+
+export interface Props extends BaseProps {
   text?: string
   disabled?: boolean
   modelValue: boolean
-  validation?: Validatable
-  hideError?: boolean
-}>()
+}
+
+const props = defineProps<Props>()
 
 const emit = defineEmits<{
   'update:model-value': [value: boolean]
@@ -54,7 +42,9 @@ function onClick() {
     :check-text
     :check-color
     :validation
+    :warning
     :hide-error
+    :hide-warning
   >
     <div class="container">
       <div

package/lib/components/SInputRadios.vue

@@ -1,51 +1,27 @@
-<script
-  setup
-  lang="ts"
-  generic="
-    ValueType extends string | number | boolean = string | number | boolean,
-    Nullable extends boolean = false
-  "
->
-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 extends string | number | boolean = string | number | boolean, Nullable extends boolean = false">
+import { computed } from 'vue'
+import { type Option } from '../support/InputOption'
+import SInputBase, { type Props as BaseProps } from './SInputBase.vue'
 import SInputRadio from './SInputRadio.vue'
 
-export type { Color, Size }
-
-export interface Option<ValueType extends string | number | boolean = string | number | boolean> {
-  label: string
-  value: ValueType
+export interface Props<T extends string | number | boolean = string | number | boolean, Nullable extends boolean = false> extends BaseProps {
+  options: Option<T>[]
+  nullable?: boolean & Nullable
   disabled?: boolean
+  value?: T | null
+  modelValue?: T | null
 }
 
 type NullValue = Nullable extends true ? null : never
 
-const props = withDefaults(defineProps<{
-  size?: Size
-  name?: string
-  label?: string
-  info?: string
-  note?: string
-  help?: string
-  checkIcon?: Component
-  checkText?: string
-  checkColor?: Color
-  options: Option<ValueType>[]
-  nullable?: Nullable
-  disabled?: boolean
-  value?: ValueType | null
-  modelValue?: ValueType | null
-  validation?: Validatable
-  hideError?: boolean
-}>(), {
+const props = withDefaults(defineProps<Props<T, Nullable>>(), {
   value: undefined,
   modelValue: undefined
 })
 
 const emit = defineEmits<{
-  'update:model-value': [value: ValueType | NullValue]
-  'change': [value: ValueType | NullValue]
+  'update:model-value': [value: T | NullValue]
+  'change': [value: T | NullValue]
 }>()
 
 const _value = computed(() => {
@@ -56,11 +32,11 @@ const _value = computed(() => {
       : null
 })
 
-function isChecked(value: ValueType) {
+function isChecked(value: T) {
   return value === _value.value
 }
 
-function onUpdate(value: ValueType) {
+function onUpdate(value: T) {
   if (value !== _value.value) {
     emit('update:model-value', value)
     return
@@ -71,7 +47,7 @@ function onUpdate(value: ValueType) {
   }
 }
 
-function onChange(value: ValueType) {
+function onChange(value: T) {
   if (value !== _value.value) {
     emit('change', value)
     return
@@ -96,8 +72,10 @@ function onChange(value: ValueType) {
     :check-icon
     :check-text
     :check-color
-    :hide-error
     :validation
+    :warning
+    :hide-error
+    :hide-warning
   >
     <div class="container">
       <div class="row">

package/lib/components/SInputSegments.vue

@@ -1,36 +1,23 @@
 <script setup lang="ts" generic="T extends string | number | boolean">
-import { type Component, computed } from 'vue'
-import { type Validatable } from '../composables/Validation'
-import SInputBase, { type Color, type Size } from './SInputBase.vue'
-import SInputSegmentsOption, { type Mode } from './SInputSegmentsOption.vue'
-
-export type { Color, Size }
-
-export interface Option<T extends string | number | boolean> {
-  label: string
-  value: T
-  mode?: Mode
-  disabled?: boolean
+import { computed } from 'vue'
+import { type ColorMode } from '../support/Color'
+import { type Option as BaseOption } from '../support/InputOption'
+import SInputBase, { type Props as BaseProps } from './SInputBase.vue'
+import SInputSegmentsOption from './SInputSegmentsOption.vue'
+
+export interface Option<T extends string | number | boolean> extends BaseOption<T> {
+  mode?: ColorMode
 }
 
-const props = defineProps<{
-  size?: Size
-  name?: string
-  label?: string
-  info?: string
-  note?: string
-  help?: string
-  checkIcon?: Component
-  checkText?: string
-  checkColor?: Color
+export interface Props<T extends string | number | boolean> extends BaseProps {
   options: Option<T>[]
   block?: boolean
   disabled?: boolean
   value?: T
   modelValue?: T
-  validation?: Validatable
-  hideError?: boolean
-}>()
+}
+
+const props = defineProps<Props<T>>()
 
 const emit = defineEmits<{
   'update:model-value': [value: T]
@@ -66,8 +53,10 @@ function onSelect(value: T) {
     :check-icon
     :check-text
     :check-color
-    :hide-error
     :validation
+    :warning
+    :hide-error
+    :hide-warning
   >
     <div class="box">
       <SInputSegmentsOption

package/lib/components/SInputSegmentsOption.vue

@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import { type Size } from './SInputBase.vue'
+import { type ColorMode } from '../support/Color'
+import { type Size } from '../support/InputBase'
 
-export type { Size }
-export type Mode = 'default' | 'mute' | 'neutral' | 'info' | 'success' | 'warning' | 'danger'
-
-const props = defineProps<{
+export interface Props {
   size: Size
   label: string
-  mode: Mode
+  mode: ColorMode
   active: boolean
   disabled: boolean
-}>()
+}
+
+const props = defineProps<Props>()
 
 const emit = defineEmits<{
   click: []

package/lib/components/SInputSelect.vue

@@ -1,36 +1,28 @@
-<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 { computed, ref } from 'vue'
+import { type Option } from '../support/InputOption'
 import SInputBase, { type Props as BaseProps } from './SInputBase.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>[]
   nullable?: boolean
   disabled?: boolean
   tabindex?: -1 | 0 | number
-  value?: Value
-  modelValue?: Value
+  value?: T | null
+  modelValue?: T | null
 }
 
-export type Value = any
-
-export interface Option {
-  label: string
-  value: any
-  disabled?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props<T>>(), {
   value: undefined,
   modelValue: undefined
 })
 
 const emit = defineEmits<{
-  'update:model-value': [value: Value]
-  'change': [value: Value]
+  'update:model-value': [value: T | null]
+  'change': [value: T | null]
 }>()
 
 const _value = computed(() => {
@@ -52,7 +44,7 @@ const isNotSelected = computed(() => {
   return _value.value == null || _value.value === ''
 })
 
-function isSelectedOption(option: Option): boolean {
+function isSelectedOption(option: Option<T>): boolean {
   return option.value === _value.value
 }
 
@@ -74,6 +66,7 @@ function emitChange(e: any): void {
     class="SInputSelect"
     :class="classes"
     :size
+    :name
     :label
     :note
     :info
@@ -81,8 +74,10 @@ function emitChange(e: any): void {
     :check-icon
     :check-text
     :check-color
-    :hide-error
     :validation
+    :warning
+    :hide-error
+    :hide-warning
   >
     <div class="box" :class="{ focus: isFocused }">
       <select