@globalbrain/sefirot 4.11.0 → 4.12.0

package/lib/components/SDescFile.vue

@@ -52,7 +52,7 @@ const items = computed(() => {
   gap: 1px;
   border: 1px solid var(--c-divider);
   border-radius: 6px;
-  margin-top: 2px;
+  margin-top: 4px;
   background-color: var(--c-gutter);
   overflow: hidden;
 }

package/lib/components/SDescItem.vue

@@ -29,7 +29,17 @@ const labelWidth = computed(() => {
 }
 
 .SDesc.row > .SDescItem {
-  grid-template-columns: var(--desc-label-width, v-bind(labelWidth)) minmax(0, 1fr);
+  & {
+    grid-template-columns: var(--desc-label-width, v-bind(labelWidth)) minmax(0, 1fr);
+  }
+
+  & > :deep(.SDescLabel) {
+    height: 24px;
+  }
+
+  & > :deep(.SDescLabel > .value) {
+    line-height: 24px;
+  }
 }
 
 .SDesc.divider > .SDescItem:not(:has(> .SDescFile)) {

package/lib/components/SDescLabel.vue

@@ -1,7 +1,40 @@
 <script setup lang="ts">
-defineProps<{
+import { type Component } from 'vue'
+import { type ActionList } from './SActionList.vue'
+import SActionMenu from './SActionMenu.vue'
+import SButton, { type Mode, type Tooltip } from './SButton.vue'
+
+export interface Props {
   value?: string | null
-}>()
+  actions?: Action[]
+}
+
+export type Action = ActionButton | ActionMenu
+
+export interface ActionBase {
+  type?: 'button' | 'menu'
+  mode?: Mode
+  icon: Component
+  loading?: boolean
+  disabled?: boolean
+  tooltip?: string | Tooltip
+}
+
+export interface ActionButton extends ActionBase {
+  type?: 'button'
+  onClick(): void
+}
+
+export interface ActionMenu extends ActionBase {
+  type: 'menu'
+  options: ActionList
+}
+
+defineProps<Props>()
+
+function isActionButton(action: Action): action is ActionButton {
+  return (action.type ?? 'button') === 'button'
+}
 </script>
 
 <template>
@@ -10,19 +43,47 @@ defineProps<{
       <slot v-if="$slots.default" />
       <template v-else>{{ value }}</template>
     </div>
+    <div v-if="actions?.length" class="actions">
+      <template v-for="action, index in actions" :key="index">
+        <SButton
+          v-if="isActionButton(action)"
+          type="text"
+          size="mini"
+          :mode="action.mode ?? 'mute'"
+          :icon="action.icon"
+          :loading="action.loading"
+          :disabled="action.disabled"
+          :tooltip="action.tooltip"
+          @click="action.onClick"
+        />
+        <SActionMenu
+          v-else
+          type="text"
+          size="mini"
+          :mode="action.mode ?? 'mute'"
+          :icon="action.icon"
+          :loading="action.loading"
+          :disabled="action.disabled"
+          :tooltip="action.tooltip"
+          :options="[{ type: 'menu', options: action.options }]"
+        />
+      </template>
+    </div>
   </div>
 </template>
 
 <style scoped lang="postcss">
 .SDescLabel {
   display: flex;
-  height: 24px;
+  gap: 16px;
+  height: 28px;
 }
 
 .value {
-  line-height: 24px;
-  font-size: 12px;
-  font-weight: 500;
+  flex-grow: 1;
+  line-height: 28px;
+  font-size: 14px;
+  font-weight: 400;
   color: var(--c-text-2);
   white-space: nowrap;
   overflow: hidden;

package/lib/components/SInputBase.vue

@@ -4,9 +4,8 @@ import { type Component, computed, unref, useSlots } from 'vue'
 import { type Validatable } from '../composables/Validation'
 import STooltip from './STooltip.vue'
 
-type Color = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
-
-const props = defineProps<{
+export interface Props {
+  size?: Size
   name?: string
   label?: string
   info?: string
@@ -16,11 +15,24 @@ const props = defineProps<{
   checkText?: string
   checkColor?: Color
   validation?: Validatable
+  warning?: string
   hideError?: boolean
-}>()
+  hideWarning?: boolean
+}
+
+export type Size = 'mini' | 'small' | 'medium'
+export type Color = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
+
+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
 })
@@ -53,7 +65,7 @@ function getErrorMsg(validation: Validatable) {
 </script>
 
 <template>
-  <div class="SInputBase" :class="{ 'has-error': error?.has }">
+  <div class="SInputBase" :class="classes">
     <label v-if="label" class="label" :for="name">
       <span class="label-text">{{ label }}</span>
 
@@ -76,8 +88,9 @@ function getErrorMsg(validation: Validatable) {
 
     <div class="help">
       <slot name="before-help" />
-      <p v-if="error?.show" class="help-error">{{ error.msg }}</p>
-      <p v-if="help" class="help-text">{{ help }}</p>
+      <p v-if="error?.show" class="help-value help-error">{{ error.msg }}</p>
+      <p v-if="warning && !hideWarning" class="help-value help-warning">{{ warning }}</p>
+      <p v-if="help" class="help-value help-text">{{ help }}</p>
     </div>
   </div>
 </template>
@@ -102,12 +115,19 @@ function getErrorMsg(validation: Validatable) {
   .label-text { font-size: var(--input-label-font-size, var(--input-medium-label-font-size)); }
 }
 
-.SInputBase.has-error {
+.SInputBase.has-error,
+.SInputBase.has-warning.has-error {
   .label-text {
     color: var(--input-error-text-color);
   }
 }
 
+.SInputBase.has-warning {
+  .label-text {
+    color: var(--input-warning-text-color);
+  }
+}
+
 .label {
   display: flex;
   align-items: flex-start;
@@ -118,7 +138,7 @@ function getErrorMsg(validation: Validatable) {
 }
 
 .label-text {
-  font-weight: 500;
+  font-weight: 400;
   color: var(--input-label-color);
   transition: color 0.25s;
 }
@@ -173,29 +193,32 @@ function getErrorMsg(validation: Validatable) {
   position: relative;
 }
 
-.help-error {
+.help-value {
   width: 100%;
   max-width: 65ch;
   margin: 0;
   padding: 6px 0 0 0;
-  line-height: 18px;
+  line-height: 20px;
   font-size: 12px;
   font-weight: 400;
-  color: var(--input-error-text-color);
   transition: opacity 0.25s, transform 0.25s;
 }
 
+.help-error {
+  color: var(--input-error-text-color);
+}
+
+.help-warning {
+  color: var(--input-warning-text-color);
+}
+
 .help-text {
-  max-width: 65ch;
-  margin: 0;
-  padding: 6px 0 0;
-  line-height: 20px;
-  font-size: 12px;
-  font-weight: 400;
   color: var(--c-text-2);
 }
 
+.help-error + .help-warning,
 .help-error + .help-text,
+.help-warning + .help-text,
 .help-text + .help-error,
 .help-text + .help-text {
   padding: 0;

package/lib/components/SInputDropdown.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import IconCaretDown from '~icons/ph/caret-down-bold'
-import IconCaretUp from '~icons/ph/caret-up-bold'
+import IconCaretDown from '~icons/ph/caret-down'
+import IconCaretUp from '~icons/ph/caret-up'
 import xor from 'lodash-es/xor'
 import { type Component, computed, ref } from 'vue'
 import { type DropdownSectionFilter, useManualDropdownPosition } from '../composables/Dropdown'
 import { useFlyout } from '../composables/Flyout'
+import { useTrans } from '../composables/Lang'
 import { type Validatable } from '../composables/Validation'
 import SDropdown from './SDropdown.vue'
 import SInputBase from './SInputBase.vue'
@@ -52,13 +53,19 @@ const props = defineProps<{
   nullable?: boolean
   closeOnClick?: boolean
   disabled?: boolean
-  modelValue: PrimitiveValue | ArrayValue
   validation?: Validatable
 }>()
 
-const emit = defineEmits<{
-  (e: 'update:modelValue', value: PrimitiveValue | ArrayValue): void
-}>()
+const model = defineModel<PrimitiveValue | ArrayValue>({ required: true })
+
+const { t } = useTrans({
+  en: {
+    ph: 'Select items'
+  },
+  ja: {
+    ph: '項目を選択してください'
+  }
+})
 
 const container = ref<any>(null)
 
@@ -73,28 +80,28 @@ const classes = computed(() => [
 const dropdownOptions = computed<DropdownSectionFilter[]>(() => [{
   type: 'filter',
   search: props.noSearch === undefined ? true : !props.noSearch,
-  selected: props.modelValue,
+  selected: model.value,
   options: props.options,
   onClick: handleSelect
 }])
 
 const selected = computed(() => {
-  if (Array.isArray(props.modelValue)) {
-    return props.options.filter((o) => (props.modelValue as ArrayValue).includes(o.value))
+  if (Array.isArray(model.value)) {
+    return props.options.filter((o) => (model.value as ArrayValue).includes(o.value))
   }
 
-  const item = props.options.find((o) => o.value === props.modelValue)
+  const item = props.options.find((o) => o.value === model.value)
 
-  return item ? [item] : []
+  return item ?? null
 })
 
 const hasSelected = computed(() => {
-  return selected.value.length > 0
+  return Array.isArray(selected.value) ? selected.value.length > 0 : !!selected.value
 })
 
 const removable = computed(() => {
-  if (Array.isArray(props.modelValue)) {
-    return props.nullable || selected.value.length > 1
+  if (Array.isArray(model.value)) {
+    return props.nullable || (selected.value as Option[]).length > 1
   }
 
   return !!props.nullable
@@ -110,27 +117,25 @@ async function handleOpen() {
 function handleSelect(value: OptionValue) {
   props.validation?.$touch()
 
-  Array.isArray(props.modelValue) ? handleArray(value) : handlePrimitive(value)
+  Array.isArray(model.value) ? handleArray(value) : handlePrimitive(value)
 }
 
 function handlePrimitive(value: OptionValue) {
-  if (value !== props.modelValue) {
-    return emit('update:modelValue', value)
-  }
-
-  if (props.nullable) {
-    emit('update:modelValue', null)
+  if (value !== model.value) {
+    model.value = value
+  } else if (props.nullable) {
+    model.value = null
   }
 }
 
 function handleArray(value: OptionValue) {
-  const difference = xor(props.modelValue as ArrayValue, [value])
+  const difference = xor(model.value as ArrayValue, [value])
 
   if (!props.nullable && difference.length === 0) {
     return
   }
 
-  emit('update:modelValue', difference)
+  model.value = difference
 }
 </script>
 
@@ -160,14 +165,14 @@ function handleArray(value: OptionValue) {
         <div class="box-content">
           <SInputDropdownItem
             v-if="hasSelected"
-            :items="selected"
+            :item="selected!"
             :size="size ?? 'small'"
             :removable="removable"
             :disabled="disabled ?? false"
             @remove="handleSelect"
           />
 
-          <div v-else class="box-placeholder">{{ placeholder }}</div>
+          <div v-else class="box-placeholder">{{ placeholder ?? t.ph }}</div>
         </div>
 
         <div class="box-icon">
@@ -187,6 +192,7 @@ function handleArray(value: OptionValue) {
 <style scoped lang="postcss">
 .container {
   position: relative;
+  width: 100%;
 }
 
 .box {
@@ -209,6 +215,8 @@ function handleArray(value: OptionValue) {
 .box-content {
   display: flex;
   align-items: center;
+  flex-grow: 1;
+  max-width: 100%;
 }
 
 .box-placeholder {
@@ -250,11 +258,15 @@ function handleArray(value: OptionValue) {
   }
 
   .box-content {
-    padding: 3px 30px 3px 8px;
+    padding: 0 30px 0 0;
     line-height: 24px;
     font-size: var(--input-font-size, var(--input-mini-font-size));
   }
 
+  .box-placeholder {
+    padding-left: 10px;
+  }
+
   .box-icon {
     top: 3px;
     right: 8px;
@@ -267,11 +279,15 @@ function handleArray(value: OptionValue) {
   }
 
   .box-content {
-    padding: 5px 30px 5px 12px;
+    padding: 0 30px 0 0;
     line-height: 24px;
     font-size: var(--input-font-size, var(--input-small-font-size));
   }
 
+  .box-placeholder {
+    padding-left: 12px;
+  }
+
   .box-icon {
     top: 7px;
     right: 8px;
@@ -280,15 +296,19 @@ function handleArray(value: OptionValue) {
 
 .SInputDropdown.medium {
   .box {
-    height: 48px;
+    min-height: 48px;
   }
 
   .box-content {
-    padding: 11px 44px 11px 16px;
+    padding: 0 40px 0 0;
     line-height: 24px;
     font-size: var(--input-font-size, var(--input-medium-font-size));
   }
 
+  .box-placeholder {
+    padding-left: 16px;
+  }
+
   .box-icon {
     top: 11px;
     right: 12px;

package/lib/components/SInputDropdownItem.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import SInputDropdownItemAvatar from './SInputDropdownItemAvatar.vue'
-import SInputDropdownItemText from './SInputDropdownItemText.vue'
+import IconX from '~icons/ph/x'
+import SAvatar from './SAvatar.vue'
 
 export type Item = ItemText | ItemAvatar
 
@@ -23,47 +23,277 @@ export interface ItemAvatar extends ItemBase {
 export type Size = 'mini' | 'small' | 'medium'
 
 defineProps<{
-  items: Item[]
+  item: Item | Item[]
   size: Size
   removable: boolean
   disabled: boolean
 }>()
 
 defineEmits<{
-  (e: 'remove', value: any): void
+  remove: [value: any]
 }>()
 </script>
 
 <template>
-  <div class="SInputDropdownItem">
-    <div v-for="(item, index) in items" :key="index" class="item">
-      <SInputDropdownItemText
-        v-if="item.type === 'text' || item.type === undefined"
-        :size="size"
-        :label="item.label"
-        :value="item.value"
-        :removable="removable"
-        :disabled="disabled"
-        @remove="(v) => $emit('remove', v)"
-      />
-      <SInputDropdownItemAvatar
-        v-if="item.type === 'avatar'"
-        :size="size"
-        :label="item.label"
-        :image="item.image"
-        :value="item.value"
-        :removable="removable"
-        :disabled="disabled"
-        @remove="(v) => $emit('remove', v)"
-      />
+  <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)">
+            <IconX class="many-text-close-icon" />
+          </button>
+        </div>
+        <div v-else-if="i.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>
+          <button v-if="removable" class="many-avatar-close" @click.stop="$emit('remove', i.value)">
+            <IconX class="many-avatar-close-icon" />
+          </button>
+        </div>
+      </template>
+    </div>
+    <div v-else class="one">
+      <div v-if="item.type === undefined || item.type === 'text'" class="one-text">
+        <div class="one-text-value">{{ item.label }}</div>
+      </div>
+      <div v-else-if="item.type === 'avatar'" class="one-avatar">
+        <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)">
+        <IconX class="one-close-icon" />
+      </button>
     </div>
   </div>
 </template>
 
 <style scoped lang="postcss">
 .SInputDropdownItem {
+  flex-grow: 1;
+  width: 100%;
+}
+
+.many {
   display: flex;
   flex-wrap: wrap;
   gap: 4px;
 }
+
+.many-text {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  border: 1px solid var(--c-divider);
+  border-radius: 12px;
+  padding: 0 10px;
+  height: 24px;
+
+  &:has(.many-text-close) {
+    padding-right: 4px;
+  }
+}
+
+.many-text-value {
+  line-height: 20px;
+  font-size: 12px;
+  font-weight: 400;
+}
+
+.many-text-close {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 16px;
+  height: 16px;
+  color: var(--c-text-2);
+
+  &:hover {
+    color: var(--c-text-1);
+  }
+}
+
+.many-text-close-icon {
+  width: 14px;
+  height: 14px;
+}
+
+.many-avatar {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  border: 1px solid var(--c-divider);
+  border-radius: 12px;
+  padding: 1px 8px 1px 1px;
+  height: 24px;
+
+  &:has(.many-avatar-close) {
+    gap: 6px;
+    padding-right: 4px;
+  }
+}
+
+.many-avatar-body {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.many-avatar-image {
+  width: 20px;
+  height: 20px;
+}
+
+.many-avatar-name {
+  line-height: 20px;
+  font-size: 12px;
+  font-weight: 400;
+}
+
+.many-avatar-close {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 16px;
+  height: 16px;
+  color: var(--c-text-2);
+
+  &:hover {
+    color: var(--c-text-1);
+  }
+}
+
+.many-avatar-close-icon {
+  width: 14px;
+  height: 14px;
+}
+
+.one {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  width: 100%;
+}
+
+.one-text {
+  flex-grow: 1;
+  max-width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.one-text-value {
+  max-width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.one-avatar {
+  display: flex;
+  align-items: center;
+  flex-grow: 1;
+  max-width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.one-avatar-image {
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+}
+
+.one-avatar-name {
+  flex-grow: 1;
+  max-width: 100%;
+  line-height: 24px;
+  font-size: 14px;
+  font-weight: 400;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.one-close {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  color: var(--c-text-2);
+  transition: color 0.25s;
+
+  &:hover {
+    color: var(--c-text-1);
+  }
+}
+
+.one-close-icon {
+  width: 16px;
+  height: 16px;
+}
+
+.SInputDropdownItem.mini {
+  .many {
+    padding: 3px 0 3px 3px;
+  }
+
+  .one-text {
+    padding-left: 10px;
+  }
+
+  .one-text-value {
+    font-size: var(--input-font-size, var(--input-mini-font-size));
+  }
+
+  .one-avatar {
+    gap: 6px;
+    padding-left: 7px;
+  }
+}
+
+.SInputDropdownItem.small {
+  .many {
+    padding: 7px 0 7px 7px;
+  }
+
+  .one-text {
+    padding-left: 12px;
+  }
+
+  .one-text-value {
+    font-size: var(--input-font-size, var(--input-small-font-size));
+  }
+
+  .one-avatar {
+    gap: 8px;
+    padding-left: 10px;
+  }
+}
+
+.SInputDropdownItem.medium {
+  .many {
+    padding: 11px 0 11px 11px;
+  }
+
+  .one-text {
+    padding-left: 16px;
+  }
+
+  .one-text-value {
+    font-size: var(--input-font-size, var(--input-medium-font-size));
+  }
+
+  .one-avatar {
+    gap: 8px;
+    padding-left: 12px;
+  }
+}
 </style>

package/lib/components/SInputNumber.vue

@@ -1,41 +1,30 @@
 <script setup lang="ts">
-import { type Component, computed } from 'vue'
-import { type Validatable } from '../composables/Validation'
+import { computed } from 'vue'
 import { isString } from '../support/Utils'
+import { type Props as BaseProps } from './SInputBase.vue'
 import SInputText from './SInputText.vue'
 
-export type Size = 'mini' | 'small' | 'medium'
-export type Align = 'left' | 'center' | 'right'
-export type CheckColor = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
-export type TextColor = 'neutral' | 'info' | 'success' | 'warning' | 'danger'
-
-const props = defineProps<{
-  size?: Size
-  name?: string
-  label?: string
-  info?: string
-  note?: string
-  help?: string
+export interface Props extends BaseProps {
   placeholder?: string
   unitBefore?: any
   unitAfter?: any
-  checkIcon?: Component
-  checkText?: string
-  checkColor?: CheckColor
   textColor?: TextColor | ((value: number | null) => TextColor)
-  align?: Align
   separator?: boolean
+  align?: Align
   disabled?: boolean
   value?: number | null
   modelValue?: number | null
   displayValue?: string | null
-  hideError?: boolean
-  validation?: Validatable
-}>()
+}
+
+export type Align = 'left' | 'center' | 'right'
+export type TextColor = 'neutral' | 'info' | 'success' | 'warning' | 'danger'
+
+const props = defineProps<Props>()
 
 const emit = defineEmits<{
-  (e: 'update:model-value', value: number | null): void
-  (e: 'input', value: number | null): void
+  'update:model-value': [value: number | null]
+  'input': [value: number | null]
 }>()
 
 const _value = computed(() => {
@@ -86,8 +75,8 @@ function emitUpdate(value: string | null) {
 <template>
   <SInputText
     class="SInputNumber"
-    :name="name"
     :size="size"
+    :name="name"
     type="number"
     :label="label"
     :note="note"
@@ -102,10 +91,12 @@ function emitUpdate(value: string | null) {
     :text-color="_textColor"
     :align="align"
     :disabled="disabled"
-    :hide-error="hideError"
     :display-value="displayValue"
     :model-value="_value == null ? null : String(_value)"
     :validation="validation"
+    :warning="warning"
+    :hide-error="hideError"
+    :hide-warning="hideWarning"
     @update:model-value="emitUpdate"
     @input="emitUpdate"
   >

package/lib/components/SInputText.vue

@@ -1,51 +1,36 @@
 <script setup lang="ts">
 import { type Component, computed, ref } from 'vue'
-import { type Validatable } from '../composables/Validation'
 import { isString } from '../support/Utils'
-import SInputBase from './SInputBase.vue'
-
-export interface Props {
-  size?: Size
-  name?: string
-  label?: string
-  info?: string
-  note?: string
-  help?: string
+import SInputBase, { type Props as BaseProps } from './SInputBase.vue'
+
+export interface Props extends BaseProps {
   type?: string
   placeholder?: string
   unitBefore?: Component | string
   unitAfter?: Component | string
-  checkIcon?: Component
-  checkText?: string
-  checkColor?: CheckColor
   textColor?: TextColor | ((value: string | null) => TextColor)
   align?: Align
   disabled?: boolean
   modelValue: string | null
   displayValue?: string | null
-  hideError?: boolean
-  validation?: Validatable
 }
 
-export type Size = 'mini' | 'small' | 'medium'
 export type Align = 'left' | 'center' | 'right'
-export type CheckColor = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
 export type TextColor = 'neutral' | 'info' | 'success' | 'warning' | 'danger'
 
 const props = defineProps<Props>()
 
 const emit = defineEmits<{
-  (e: 'update:model-value', value: string | null): void
-  (e: 'input', value: string | null): void
-  (e: 'blur', value: string | null): void
-  (e: 'enter', value: string | null): void
+  'update:model-value': [value: string | null]
+  'input': [value: string | null]
+  'blur': [value: string | null]
+  'enter': [value: string | null]
 }>()
 
 const input = ref<HTMLElement | null>(null)
 const isFocused = ref(false)
 
 const classes = computed(() => [
-  props.size ?? 'small',
   props.align ?? 'left',
   { disabled: props.disabled }
 ])
@@ -116,6 +101,7 @@ function getValue(e: Event | FocusEvent | KeyboardEvent): string | null {
   <SInputBase
     class="SInputText"
     :class="classes"
+    :size="size"
     :name="name"
     :label="label"
     :note="note"
@@ -124,8 +110,10 @@ function getValue(e: Event | FocusEvent | KeyboardEvent): string | null {
     :check-icon="checkIcon"
     :check-text="checkText"
     :check-color="checkColor"
-    :hide-error="hideError"
     :validation="validation"
+    :warning="warning"
+    :hide-error="hideError"
+    :hide-warning="hideWarning"
   >
     <div class="box" :class="{ focus: isFocused }" @click="focus">
       <div v-if="$slots['addon-before']" class="addon before">
@@ -349,6 +337,14 @@ function getValue(e: Event | FocusEvent | KeyboardEvent): string | null {
   }
 }
 
+.SInputText.has-warning {
+  .box,
+  .box:hover,
+  .box:focus {
+    border-color: var(--input-warning-border-color);
+  }
+}
+
 .box {
   position: relative;
   display: flex;

package/lib/components/SInputTextarea.vue

@@ -1,42 +1,29 @@
 <script setup lang="ts">
-import { type Component, computed, ref } from 'vue'
-import { type Validatable } from '../composables/Validation'
-import SInputBase from './SInputBase.vue'
+import { computed, ref } from 'vue'
+import SInputBase, { type Props as BaseProps } from './SInputBase.vue'
 import SInputSegments from './SInputSegments.vue'
 
-export type Size = 'mini' | 'small' | 'medium'
-export type Color = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
-
-const props = withDefaults(defineProps<{
-  size?: Size
-  name?: string
-  label?: string
-  info?: string
-  note?: string
-  help?: string
-  checkIcon?: Component
-  checkText?: string
-  checkColor?: Color
+export interface Props extends BaseProps {
   placeholder?: string
   disabled?: boolean
   rows?: number | 'fill'
   autoResize?: boolean | number
   value?: string | null
   modelValue?: string | null
-  hideError?: boolean
-  validation?: Validatable
   preview?: (value: string | null) => string
   previewLabel?: string
   writeLabel?: string
-}>(), {
+}
+
+const props = withDefaults(defineProps<Props>(), {
   size: 'small',
   rows: 3
 })
 
 const emit = defineEmits<{
-  (e: 'update:model-value', value: string | null): void
-  (e: 'input', value: string | null): void
-  (e: 'blur', value: string | null): void
+  'update:model-value': [value: string | null]
+  'input': [value: string | null]
+  'blur': [value: string | null]
 }>()
 
 const sizePaddingYDict = {
@@ -93,6 +80,7 @@ const isPreview = ref(false)
   <SInputBase
     class="SInputTextarea"
     :class="classes"
+    :size="size"
     :name="name"
     :label="label"
     :note="note"
@@ -101,8 +89,10 @@ const isPreview = ref(false)
     :check-icon="checkIcon"
     :check-text="checkText"
     :check-color="checkColor"
-    :hide-error="hideError"
     :validation="validation"
+    :warning="warning"
+    :hide-error="hideError"
+    :hide-warning="hideWarning"
   >
     <div class="box">
       <div v-if="preview !== undefined" class="control">
@@ -248,4 +238,10 @@ const isPreview = ref(false)
     border-color: var(--input-error-border-color);
   }
 }
+
+.SInputTextarea.has-warning {
+  .box {
+    border-color: var(--input-warning-border-color);
+  }
+}
 </style>

package/lib/composables/Error.ts

@@ -143,7 +143,9 @@ function formatProps(props: Record<string, unknown>): string {
 const ignoreErrors = [
   /Network Error/,
   /Non-Error (?:exception|promise rejection) captured/,
-  /ResizeObserver loop/
+  /ResizeObserver loop/,
+  /Can't find variable: gmo/,
+  /\[Cloudflare Turnstile\] Error: (?:10[2-46]|1106[02]|[36]00)/
 ]
 
 export function useErrorHandler({

package/lib/styles/variables.css

@@ -858,6 +858,8 @@
   --input-focus-border-color: var(--c-border-info-1);
   --input-error-text-color: var(--c-text-danger-1);
   --input-error-border-color: var(--c-border-danger-1);
+  --input-warning-text-color: var(--c-text-warning-1);
+  --input-warning-border-color: var(--c-border-warning-1);
   --input-disabled-border-color: var(--c-border-mute-1);
   --input-disabled-value-color: var(--c-text-1);
   --input-disabled-bg-color: var(--c-bg-mute-1);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@globalbrain/sefirot",
   "type": "module",
-  "version": "4.11.0",
+  "version": "4.12.0",
   "packageManager": "pnpm@9.15.3",
   "description": "Vue Components for Global Brain Design System.",
   "author": "Kia Ishii <ka.ishii@globalbrains.com>",

package/lib/components/SInputDropdownItemAvatar.vue

@@ -1,175 +0,0 @@
-<script setup lang="ts">
-import IconX from '~icons/ph/x-bold'
-import SAvatar from './SAvatar.vue'
-
-export type Size = 'mini' | 'small' | 'medium'
-
-defineProps<{
-  size: Size
-  label: string
-  image?: string | null
-  value: any
-  removable: boolean
-  disabled: boolean
-}>()
-
-defineEmits<{
-  (e: 'remove', value: any): void
-}>()
-
-const avatarSizeDict = {
-  mini: 'nano',
-  small: 'mini',
-  medium: 'mini'
-} as const
-</script>
-
-<template>
-  <div class="SInputDropdownItemAvatar" :class="[size, { disabled, removable }]">
-    <div class="user">
-      <div class="avatar">
-        <SAvatar :size="avatarSizeDict[size]" :avatar="image" :name="label" />
-      </div>
-      <p class="name">{{ label }}</p>
-    </div>
-
-    <div v-if="!disabled && removable" class="remove" role="button" @click="$emit('remove', value)">
-      <div class="remove-box">
-        <IconX class="remove-icon" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang="postcss" scoped>
-.SInputDropdownItemAvatar {
-  display: flex;
-  align-items: center;
-  border: 1px solid var(--c-border-mute-1);
-  background-color: var(--c-bg-mute-1);
-}
-
-.user {
-  display: flex;
-  align-items: center;
-}
-
-.avatar {
-  display: flex;
-  align-items: center;
-}
-
-.name {
-  font-size: 12px;
-  font-weight: 500;
-  white-space: nowrap;
-}
-
-.remove {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.remove-box {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 50%;
-  color: var(--c-text-2);
-  transition: color 0.25s, background-color 0.25s;
-
-  .remove:hover & {
-    color: var(--c-text-1);
-    background-color: var(--c-bg-mute-2)
-  }
-}
-
-.SInputDropdownItemAvatar.mini {
-  gap: 2px;
-  border-radius: 12px;
-  padding: 0 8px 0 0;
-  height: 24px;
-
-  .avatar {
-    padding: 0 0 0 1px;
-  }
-
-  .name {
-    margin-left: 6px;
-  }
-
-  .remove {
-    width: 23px;
-    height: 23px;
-  }
-
-  .remove-box {
-    width: 20px;
-    height: 20px;
-  }
-
-  .remove-icon {
-    width: 12px;
-    height: 12px;
-  }
-}
-
-.SInputDropdownItemAvatar.small {
-  border-radius: 14px;
-  padding: 0 12px 0 0;
-  height: 28px;
-
-  .avatar {
-    padding: 0 0 0 1px;
-  }
-
-  .name {
-    margin-left: 6px;
-  }
-
-  .remove {
-    width: 26px;
-    height: 26px;
-  }
-
-  .remove-box {
-    width: 20px;
-    height: 20px;
-  }
-
-  .remove-icon {
-    width: 12px;
-    height: 12px;
-  }
-}
-
-.SInputDropdownItemAvatar.medium {
-  border-radius: 16px;
-  padding: 0 12px 0 0;
-  height: 32px;
-
-  .avatar {
-    padding: 0 0 0 4px;
-  }
-
-  .name {
-    margin-left: 6px;
-  }
-
-  .remove {
-    width: 26px;
-    height: 26px;
-  }
-
-  .remove-box {
-    width: 20px;
-    height: 20px;
-  }
-
-  .remove-icon {
-    width: 12px;
-    height: 12px;
-  }
-}
-</style>

package/lib/components/SInputDropdownItemText.vue

@@ -1,154 +0,0 @@
-<script setup lang="ts">
-import IconX from '~icons/ph/x-bold'
-
-export type Size = 'mini' | 'small' | 'medium'
-
-defineProps<{
-  size: Size
-  label: string
-  value: any
-  removable: boolean
-  disabled: boolean
-}>()
-
-defineEmits<{
-  (e: 'remove', value: any): void
-}>()
-</script>
-
-<template>
-  <div class="SInputDropdownItemText" :class="[size, { disabled, removable }]">
-    <p class="text">{{ label }}</p>
-
-    <div v-if="!disabled && removable" class="remove" role="button" @click.stop="$emit('remove', value)">
-      <div class="remove-box">
-        <IconX class="remove-icon" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang="postcss" scoped>
-.SInputDropdownItemText {
-  display: flex;
-  align-items: center;
-  border: 1px solid var(--c-border-mute-1);
-  background-color: var(--c-bg-mute-1);
-}
-
-.text {
-  margin: 0;
-  line-height: 20px;
-  font-size: 12px;
-  font-weight: 500;
-  white-space: nowrap;
-}
-
-.remove {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.remove-box {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 50%;
-  color: var(--c-text-2);
-  transition: color 0.25s, background-color 0.25s;
-
-  .remove:hover & {
-    color: var(--c-text-1);
-    background-color: var(--c-bg-mute-3);
-  }
-}
-
-.SInputDropdownItemText.mini {
-  gap: 2px;
-  border-radius: 12px;
-  padding: 0 8px;
-  height: 24px;
-
-  &.removable {
-    padding: 0 0 0 8px;
-  }
-
-  &.disabled {
-    padding: 0 10px;
-  }
-
-  .remove {
-    width: 23px;
-    height: 23px;
-  }
-
-  .remove-box {
-    width: 20px;
-    height: 20px;
-  }
-
-  .remove-icon {
-    width: 12px;
-    height: 12px;
-  }
-}
-
-.SInputDropdownItemText.small {
-  border-radius: 14px;
-  padding: 0 12px;
-  height: 28px;
-
-  &.removable {
-    padding: 0 0 0 12px;
-  }
-
-  &.disabled {
-    padding: 0 12px;
-  }
-
-  .remove {
-    width: 26px;
-    height: 26px;
-  }
-
-  .remove-box {
-    width: 20px;
-    height: 20px;
-  }
-
-  .remove-icon {
-    width: 12px;
-    height: 12px;
-  }
-}
-
-.SInputDropdownItemText.medium {
-  border-radius: 16px;
-  padding: 0 12px;
-  height: 32px;
-
-  &.removable {
-    padding: 0 0 0 12px;
-  }
-
-  &.disabled {
-    padding: 0 12px;
-  }
-
-  .remove {
-    width: 26px;
-    height: 26px;
-  }
-
-  .remove-box {
-    width: 20px;
-    height: 20px;
-  }
-
-  .remove-icon {
-    width: 12px;
-    height: 12px;
-  }
-}
-</style>