@globalbrain/sefirot 4.10.0 → 4.12.0

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/App.ts

@@ -0,0 +1,22 @@
+import { type HttpOptions } from '../http/Http'
+import { useSetupHttp } from './Http'
+import { type HasLang, useSetupLang } from './Lang'
+import { type HasTheme, useSetupTheme } from './Theme'
+
+export interface SetupAppUser extends HasLang, HasTheme {}
+
+export interface SetupAppOptions {
+  http?: HttpOptions
+}
+
+export function useSetupApp(): (user?: SetupAppUser | null, options?: SetupAppOptions) => void {
+  const setupLang = useSetupLang()
+  const setupTheme = useSetupTheme()
+  const setupHttp = useSetupHttp()
+
+  return (user, options) => {
+    setupLang(user)
+    setupTheme(user)
+    setupHttp(user, options?.http)
+  }
+}

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/composables/Http.ts

@@ -0,0 +1,17 @@
+import { type Lang, useBrowserLang } from 'sefirot/composables/Lang'
+import { Http, type HttpOptions } from 'sefirot/http/Http'
+
+export interface HasLang {
+  lang: Lang
+}
+
+export function useSetupHttp(): (user?: HasLang | null, options?: HttpOptions) => void {
+  const browserLang = useBrowserLang()
+
+  return (user, options = {}) => {
+    Http.config({
+      lang: user?.lang ?? browserLang,
+      ...options
+    })
+  }
+}

package/lib/composables/Lang.ts

@@ -11,8 +11,20 @@ export interface TransMessages<T> {
   ja: T
 }
 
+export interface HasLang {
+  lang: Lang
+}
+
 export const SefirotLangKey = 'sefirot-lang-key'
 
+export function useSetupLang(): (user?: HasLang | null) => void {
+  const browserLang = useBrowserLang()
+
+  return (user) => {
+    provideLang(user?.lang ?? browserLang)
+  }
+}
+
 export function provideLang(lang: Lang) {
   provide(SefirotLangKey, lang)
 }
@@ -23,6 +35,12 @@ export function useLang(): Lang {
   return inject(SefirotLangKey, 'en') || 'en'
 }
 
+export function useBrowserLang(): Lang {
+  const lang = navigator.language
+
+  return lang.split('-')[0] === 'ja' ? 'ja' : 'en'
+}
+
 export function useTrans<T>(messages: TransMessages<T>): Trans<T> {
   const lang = useLang()
 
@@ -32,9 +50,3 @@ export function useTrans<T>(messages: TransMessages<T>): Trans<T> {
     t
   }
 }
-
-export function useBrowserLang(): Lang {
-  const lang = navigator.language
-
-  return lang.split('-')[0] === 'ja' ? 'ja' : 'en'
-}

package/lib/composables/Theme.ts

@@ -0,0 +1,25 @@
+import { useDark } from '@vueuse/core'
+import { type WritableComputedRef, computed } from 'vue'
+
+export type Theme = 'light' | 'dark'
+
+export interface HasTheme {
+  theme: Theme
+}
+
+export function useSetupTheme(): (user?: HasTheme | null) => void {
+  const theme = useTheme()
+
+  return (user) => {
+    theme.value = user?.theme ?? 'light'
+  }
+}
+
+export function useTheme(): WritableComputedRef<Theme> {
+  const _isDark = useDark()
+
+  return computed({
+    get: () => _isDark.value ? 'dark' : 'light',
+    set: (v) => { _isDark.value = v === 'dark' }
+  })
+}