@globalbrain/sefirot 4.56.0 → 4.58.0

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

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>