@globalbrain/sefirot 4.31.0 → 4.32.0

package/lib/components/SInputBase.vue

@@ -27,16 +27,6 @@ const props = defineProps<Props>()
 
 const slots = useSlots()
 
-const classes = computed(() => [
-  props.size ?? 'small',
-  { 'has-error': error.value?.has },
-  { 'has-warning': props.warning }
-])
-
-const hasInfo = computed(() => {
-  return slots.info || props.info
-})
-
 const error = computed(() => {
   if (!props.validation) {
     return null
@@ -53,6 +43,16 @@ const error = computed(() => {
   }
 })
 
+const classes = computed(() => [
+  props.size ?? 'small',
+  { 'has-error': error.value?.has },
+  { 'has-warning': props.warning }
+])
+
+const hasInfo = computed(() => {
+  return slots.info || props.info
+})
+
 function isDirtyAndInvalid(validation: Validatable) {
   return validation.$dirty && validation.$invalid
 }
@@ -79,7 +79,7 @@ function getErrorMsg(validation: Validatable) {
       <span class="label-note" :class="{ 'has-info': hasInfo }">{{ note }}</span>
 
       <span v-if="checkIcon || checkText" class="check" :class="checkColor || 'neutral'">
-        <component v-if="checkIcon" :is="checkIcon" class="check-icon" />
+        <component :is="checkIcon" v-if="checkIcon" class="check-icon" />
         <span v-if="checkText" class="check-text">{{ checkText }}</span>
       </span>
     </label>

package/lib/components/SInputCheckbox.vue

@@ -44,7 +44,9 @@ const isIndeterminate = computed(() => {
 const _value = computed(() => {
   return props.modelValue !== undefined
     ? props.modelValue === true
-    : props.value !== undefined ? props.value === true : false
+    : props.value !== undefined
+      ? props.value === true
+      : false
 })
 
 function onClick() {
@@ -68,14 +70,15 @@ function onClick() {
     :check-text
     :check-color
     :validation
+    :hide-error
   >
     <div class="container">
       <div
         class="input"
         :class="{ on: _value || isIndeterminate }"
         role="button"
-        @click="onClick"
         :aria-disabled="disabled"
+        @click="onClick"
       >
         <div class="box">
           <div class="check">
@@ -141,7 +144,7 @@ function onClick() {
   height: 16px;
   opacity: 0;
   transform: scale(0);
-  transition: opacity .25s, transform .1s;
+  transition: opacity 0.25s, transform 0.1s;
 }
 
 .check-icon {

package/lib/components/SInputCheckboxes.vue

@@ -43,14 +43,16 @@ const emit = defineEmits<{
 const _value = computed(() => {
   return props.modelValue !== undefined
     ? props.modelValue
-    : props.value !== undefined ? props.value : []
+    : props.value !== undefined
+      ? props.value
+      : []
 })
 
 function isChecked(value: Value): boolean {
   return _value.value.includes(value)
 }
 
-function handleChange(value: Value): void {
+function onChange(value: Value): void {
   const distinct = _value.value
     .filter((v) => v !== value)
     .concat(_value.value.includes(value) ? [] : [value])
@@ -77,6 +79,8 @@ function handleChange(value: Value): void {
     :check-icon
     :check-text
     :check-color
+    :validation
+    :hide-error
   >
     <div class="container">
       <div class="row">
@@ -86,7 +90,7 @@ function handleChange(value: Value): void {
             :text="option.label"
             :disabled="option.disabled ?? disabled"
             :model-value="isChecked(option.value)"
-            @update:model-value="handleChange(option.value)"
+            @update:model-value="onChange(option.value)"
           />
         </div>
       </div>

package/lib/components/SInputDate.vue

@@ -34,16 +34,14 @@ const classes = computed(() => [
 ])
 
 const value = computed(() => {
-  return props.modelValue
-    ? props.modelValue.format('YYYY-MM-DD')
-    : null
+  return props.modelValue ? day(props.modelValue).format('YYYY-MM-DD') : null
 })
 
 function emitInput(date?: string) {
   emit('update:model-value', date ? day(date) : null)
 }
 
-function emitBlur() {
+function onBlur() {
   setTimeout(() => {
     props.validation && props.validation.$touch()
   }, 100)
@@ -88,7 +86,7 @@ function emitBlur() {
           :disabled
           :tabindex
           v-on="disabled ? {} : inputEvents"
-          @blur="emitBlur"
+          @blur="onBlur"
         >
       </DatePicker>
     </div>

package/lib/components/SInputDropdown.vue

@@ -59,8 +59,11 @@ const { t } = useTrans({
 
 const container = ref<HTMLDivElement>()
 
-const { isOpen, open } = useFlyout(container)
-const { inset, update: updatePosition } = useManualDropdownPosition(container, () => props.position)
+const { isOpen, open, close } = useFlyout(container)
+const { inset, update: updatePosition } = useManualDropdownPosition(
+  container,
+  () => props.position
+)
 
 const classes = computed(() => [
   props.size ?? 'small',
@@ -72,7 +75,7 @@ const dropdownOptions = computed<DropdownSectionFilter[]>(() => [{
   search: props.noSearch === undefined ? true : !props.noSearch,
   selected: model.value,
   options: props.options,
-  onClick: handleSelect
+  onClick: onSelect
 }])
 
 const selected = computed(() => {
@@ -97,35 +100,30 @@ const removable = computed(() => {
   return !!props.nullable
 })
 
-async function handleOpen() {
+async function onOpen() {
   if (!props.disabled) {
     updatePosition()
     open()
   }
 }
 
-function handleSelect(value: OptionValue) {
+function onSelect(value: OptionValue) {
   props.validation?.$touch()
 
-  Array.isArray(model.value) ? handleArray(value) : handlePrimitive(value)
-}
-
-function handlePrimitive(value: OptionValue) {
-  if (value !== model.value) {
-    model.value = value
-  } else if (props.nullable) {
-    model.value = null
-  }
-}
-
-function handleArray(value: OptionValue) {
-  const difference = xor(model.value as ArrayValue, [value])
-
-  if (!props.nullable && difference.length === 0) {
-    return
+  if (Array.isArray(model.value)) {
+    const toggled = xor(model.value, [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
+    }
   }
 
-  model.value = difference
+  props.closeOnClick && close()
 }
 </script>
 
@@ -144,15 +142,15 @@ function handleArray(value: OptionValue) {
     :validation
     :hide-error
   >
-    <div class="container" ref="container">
+    <div ref="container" class="container">
       <div
         class="box"
         role="button"
         tabindex="0"
-        @click="handleOpen"
+        @click="onOpen"
         @keydown.down.prevent
-        @keyup.enter="handleOpen"
-        @keyup.down="handleOpen"
+        @keyup.enter="onOpen"
+        @keyup.down="onOpen"
       >
         <div class="box-content">
           <SInputDropdownItem
@@ -161,7 +159,7 @@ function handleArray(value: OptionValue) {
             :size="size ?? 'small'"
             :removable
             :disabled="disabled ?? false"
-            @remove="handleSelect"
+            @remove="onSelect"
           />
 
           <div v-else class="box-placeholder">{{ placeholder ?? t.ph }}</div>
@@ -197,7 +195,7 @@ function handleArray(value: OptionValue) {
   border-radius: 6px;
   width: 100%;
   color: var(--input-text);
-  background-color: var(--input-bg-color);;
+  background-color: var(--input-bg-color);
   cursor: pointer;
   transition: border-color 0.25s, background-color 0.25s;
 

package/lib/components/SInputDropdownItem.vue

@@ -23,34 +23,40 @@ export interface ItemAvatar extends ItemBase {
   image?: string | null
 }
 
-defineProps<{
+const props = defineProps<{
   item: Item | Item[]
   size: Size
   removable: boolean
   disabled: boolean
 }>()
 
-defineEmits<{
+const emit = defineEmits<{
   remove: [value: any]
 }>()
+
+function emitRemove(value: any) {
+  if (!props.disabled) {
+    emit('remove', value)
+  }
+}
 </script>
 
 <template>
   <div class="SInputDropdownItem" :class="[size, { disabled }]">
     <div v-if="Array.isArray(item)" class="many">
-      <template v-for="i, index in item" :key="index">
-        <div v-if="i.type === undefined || i.type === 'text'" class="many-text">
-          <div class="many-text-value">{{ i.label }}</div>
-          <button v-if="removable" class="many-text-close" @click.stop="$emit('remove', i.value)">
+      <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)">
             <IconX class="many-text-close-icon" />
           </button>
         </div>
-        <div v-else-if="i.type === 'avatar'" class="many-avatar">
+        <div v-else-if="el.type === 'avatar'" class="many-avatar">
           <div class="many-avatar-body">
-            <div class="many-avatar-image"><SAvatar size="fill" :avatar="i.image" /></div>
-            <div class="many-avatar-name">{{ i.label }}</div>
+            <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="$emit('remove', i.value)">
+          <button v-if="removable" class="many-avatar-close" @click.stop="emitRemove(el.value)">
             <IconX class="many-avatar-close-icon" />
           </button>
         </div>
@@ -64,7 +70,7 @@ defineEmits<{
         <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="$emit('remove', item.value)">
+      <button v-if="removable" class="one-close" @click.stop="emitRemove(item.value)">
         <IconX class="one-close-icon" />
       </button>
     </div>
@@ -317,4 +323,8 @@ defineEmits<{
     padding-left: 12px;
   }
 }
+
+.disabled {
+  pointer-events: none;
+}
 </style>

package/lib/components/SInputFile.vue

@@ -33,17 +33,20 @@ const emit = defineEmits<{
 const _value = computed(() => {
   return props.modelValue !== undefined
     ? props.modelValue
-    : props.value !== undefined ? props.value : null
+    : props.value !== undefined
+      ? props.value
+      : null
 })
 
 const input = ref<HTMLInputElement | null>(null)
 
 const classes = computed(() => [props.size ?? 'small'])
 
-const fileName = computed(() => Array.isArray(_value.value)
-  ? _value.value.map((file) => file.name).join(', ')
-  : _value.value?.name ?? ''
-)
+const fileName = computed(() => {
+  return Array.isArray(_value.value)
+    ? _value.value.map((file) => file.name).join(', ')
+    : (_value.value?.name ?? '')
+})
 
 function open() {
   input.value!.click()
@@ -243,6 +246,6 @@ function onChange(e: Event) {
 
 .placeholder {
   font-weight: 500;
-  color: var(--input-placeholder-color)
+  color: var(--input-placeholder-color);
 }
 </style>

package/lib/components/SInputFileUpload.vue

@@ -46,7 +46,6 @@ const props = withDefaults(defineProps<{
   placeholder?: string
   emptyText?: string
   accept?: string
-  multiple?: boolean
   checkIcon?: Component
   checkText?: string
   checkColor?: Color
@@ -70,7 +69,7 @@ const { t } = useTrans({
   en: {
     button_text: 'Choose File',
     empty_text: 'No file selected',
-    selected_files: (c: number) => c === 1 ? `${c} file` : `${c} files`
+    selected_files: (c: number) => (c === 1 ? `${c} file` : `${c} files`)
   },
   ja: {
     button_text: 'ファイルを選択',
@@ -81,15 +80,14 @@ const { t } = useTrans({
 
 const dropZoneEl = ref<HTMLDivElement | null>(null)
 
-const { isOverDropZone } = useDropZone(dropZoneEl, {
-  multiple: true,
-  onDrop: (files) => onDrop(files)
-})
+const { isOverDropZone } = useDropZone(dropZoneEl, { onDrop })
 
 const _value = computed(() => {
   return props.modelValue !== undefined
     ? props.modelValue
-    : props.value !== undefined ? props.value : [] as ModelValue<T>[]
+    : props.value !== undefined
+      ? props.value
+      : ([] as ModelValue<T>[])
 })
 
 const input = ref<HTMLInputElement | null>(null)
@@ -105,7 +103,7 @@ const totalFileCountText = computed(() => {
 })
 
 const totalFileSizeText = computed(() => {
-  const files = _value.value.map((file) => file instanceof File ? file : file.file)
+  const files = _value.value.map((file) => (file instanceof File ? file : file.file))
   return formatSize(files)
 })
 
@@ -150,7 +148,7 @@ function append(files: File[]) {
 }
 
 function toFileObjects(files: File[]) {
-  return files.map((file) => ({ file } as ModelValue<T>))
+  return files.map((file) => ({ file }) as ModelValue<T>)
 }
 </script>
 
@@ -178,7 +176,7 @@ function toFileObjects(files: File[]) {
         @change="onChange"
       >
       <SCard :mode="hasError ? 'danger' : undefined">
-        <SCardBlock v-if="droppable" class="drop-zone" ref="dropZoneEl" @click="open">
+        <SCardBlock v-if="droppable" ref="dropZoneEl" class="drop-zone" @click="open">
           <div class="drop-zone-box">
             <STrans lang="en">
               <div class="drop-zone-text">
@@ -211,7 +209,7 @@ function toFileObjects(files: File[]) {
         </SCardBlock>
         <template v-if="_value.length">
           <SInputFileUploadItem
-            v-for="file, i in _value"
+            v-for="(file, i) in _value"
             :key="i"
             :file
             :rules

package/lib/components/SInputFileUploadItem.vue

@@ -40,7 +40,7 @@ const _file = computed(() => ({
   file: props.file instanceof File ? props.file : props.file.file,
   size: formatSize(props.file instanceof File ? props.file : props.file.file),
   indicatorState: props.file instanceof File ? null : props.file.indicatorState,
-  canRemove: props.file instanceof File ? true : props.file.canRemove ?? true,
+  canRemove: props.file instanceof File ? true : (props.file.canRemove ?? true),
   action: props.file instanceof File ? null : props.file.action,
   errorMessage: props.file instanceof File ? null : props.file.errorMessage
 }))
@@ -60,12 +60,16 @@ validation.value.$touch()
       <div class="name-label">
         <div class="name-icon">
           <IconFileText v-if="_file.indicatorState == null" class="name-icon-svg" />
-          <SIndicator size="fill" v-else :state="_file.indicatorState" />
+          <SIndicator v-else size="fill" :state="_file.indicatorState" />
         </div>
         <p class="name-text">{{ _file.name }}</p>
       </div>
-      <p v-if="_file.errorMessage" class="error">{{ _file.errorMessage }}</p>
-      <p v-else-if="validation.$errors.length" class="error">{{ validation.$errors[0]?.$message }}</p>
+      <p v-if="_file.errorMessage" class="error">
+        {{ _file.errorMessage }}
+      </p>
+      <p v-else-if="validation.$errors.length" class="error">
+        {{ validation.$errors[0]?.$message }}
+      </p>
     </div>
     <div v-if="_file.action" class="action">
       <SButton

package/lib/components/SInputHMS.vue

@@ -37,7 +37,9 @@ const emit = defineEmits<{
 const _value = computed(() => {
   return props.modelValue !== undefined
     ? props.modelValue
-    : props.value !== undefined ? props.value : null
+    : props.value !== undefined
+      ? props.value
+      : null
 })
 
 const padPlaceholder = computed(() => {

package/lib/components/SInputImage.vue

@@ -49,9 +49,11 @@ const emit = defineEmits<{
 const fileInput = ref<HTMLInputElement | null>(null)
 
 const _value = computed(() => {
-  return (props.modelValue !== undefined)
+  return props.modelValue !== undefined
     ? props.modelValue
-    : props.value !== undefined ? props.value : null
+    : props.value !== undefined
+      ? props.value
+      : null
 })
 
 const { src: imageSrc } = useImageSrcFromFile(_value)

package/lib/components/SInputNumber.vue

@@ -1,13 +1,12 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-import { isString } from '../support/Utils'
+import { type Component, computed } from 'vue'
 import { type Props as BaseProps } from './SInputBase.vue'
 import SInputText from './SInputText.vue'
 
 export interface Props extends BaseProps {
   placeholder?: string
-  unitBefore?: any
-  unitAfter?: any
+  unitBefore?: Component | string
+  unitAfter?: Component | string
   textColor?: TextColor | ((value: number | null) => TextColor)
   separator?: boolean
   align?: Align
@@ -29,9 +28,11 @@ const emit = defineEmits<{
 }>()
 
 const _value = computed(() => {
-  return (props.modelValue !== undefined)
+  return props.modelValue !== undefined
     ? props.modelValue
-    : props.value !== undefined ? props.value : null
+    : props.value !== undefined
+      ? props.value
+      : null
 })
 
 const _textColor = computed(() => {
@@ -39,7 +40,7 @@ const _textColor = computed(() => {
     return 'neutral'
   }
 
-  if (isString(props.textColor)) {
+  if (typeof props.textColor === 'string') {
     return props.textColor
   }
 
@@ -61,9 +62,7 @@ const displayValue = computed(() => {
     return props.displayValue
   }
 
-  return (!props.separator || valueWithSeparator.value == null)
-    ? null
-    : valueWithSeparator.value
+  return !props.separator || valueWithSeparator.value == null ? null : valueWithSeparator.value
 })
 
 function emitUpdate(value: string | null) {

package/lib/components/SInputRadio.vue

@@ -45,6 +45,7 @@ function onClick() {
     class="SInputRadio"
     :class="classes"
     :size
+    :name
     :label
     :note
     :info
@@ -60,14 +61,14 @@ function onClick() {
         class="input"
         :class="{ on: props.modelValue }"
         role="button"
-        @click="onClick"
         :aria-disabled="disabled"
+        @click="onClick"
       >
         <div class="box">
           <div class="check" />
         </div>
 
-        <p class="text" v-if="text">{{ text }}</p>
+        <p v-if="text" class="text">{{ text }}</p>
       </div>
     </div>
     <template v-if="$slots.info" #info><slot name="info" /></template>

package/lib/components/SInputRadios.vue

@@ -13,9 +13,7 @@ import SInputRadio from './SInputRadio.vue'
 
 export type { Color, Size }
 
-export interface Option<
-  ValueType extends string | number | boolean = string | number | boolean
-> {
+export interface Option<ValueType extends string | number | boolean = string | number | boolean> {
   label: string
   value: ValueType
   disabled?: boolean
@@ -53,7 +51,9 @@ const emit = defineEmits<{
 const _value = computed(() => {
   return props.modelValue !== undefined
     ? props.modelValue
-    : props.value !== undefined ? props.value : null
+    : props.value !== undefined
+      ? props.value
+      : null
 })
 
 function isChecked(value: ValueType) {
@@ -88,6 +88,7 @@ function onChange(value: ValueType) {
     class="SInputRadios"
     :class="[size ?? 'small']"
     :size
+    :name
     :label
     :note
     :info
@@ -100,7 +101,7 @@ function onChange(value: ValueType) {
   >
     <div class="container">
       <div class="row">
-        <div v-for="(option, index) in options" :key="index" class="col">
+        <div v-for="(option, i) in options" :key="i" class="col">
           <SInputRadio
             size="sm"
             :text="option.label"

package/lib/components/SInputSegments.vue

@@ -38,9 +38,7 @@ const emit = defineEmits<{
 }>()
 
 const _value = computed(() => {
-  const v = props.modelValue !== undefined
-    ? props.modelValue
-    : props.value
+  const v = props.modelValue !== undefined ? props.modelValue : props.value
 
   if (v === undefined) {
     throw new Error('[sefirot] SInputSegments: `value` or `modelValue` is required.')
@@ -60,6 +58,7 @@ function onSelect(value: T) {
     class="SInputSegments"
     :class="[size ?? 'small', { block }]"
     :size
+    :name
     :label
     :note
     :info
@@ -72,14 +71,13 @@ function onSelect(value: T) {
   >
     <div class="box">
       <SInputSegmentsOption
-        v-for="option, index in options"
-        :key="index"
+        v-for="(option, i) in options"
+        :key="i"
         :size="size ?? 'small'"
         :label="option.label"
-        :value="option.value"
         :mode="option.mode ?? 'default'"
         :active="_value === option.value"
-        :disabled="disabled ? true : option.disabled ?? false"
+        :disabled="disabled ? true : (option.disabled ?? false)"
         @click="onSelect(option.value)"
       />
     </div>

package/lib/components/SInputSegmentsOption.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts" generic="T extends string | number | boolean">
+<script setup lang="ts">
 import { type Size } from './SInputBase.vue'
 
 export type { Size }
@@ -7,7 +7,6 @@ export type Mode = 'default' | 'mute' | 'neutral' | 'info' | 'success' | 'warnin
 const props = defineProps<{
   size: Size
   label: string
-  value: T
   mode: Mode
   active: boolean
   disabled: boolean