@globalbrain/sefirot 4.11.0 → 4.13.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/components/STooltip.vue

@@ -87,7 +87,7 @@ const cleanups = [
       setTimeout(() => { ignore.value = false })
     }
   }),
-  onClickOutside(root, hide, { ignore: [content] }),
+  onClickOutside(root, hide, { ignore: [content], controls: false }),
   () => timeoutId.value != null && window.clearTimeout(timeoutId.value)
 ]
 

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

@@ -1,4 +1,4 @@
-import { inject, provide } from 'vue'
+import { type InjectionKey, getCurrentInstance, inject } from 'vue'
 
 export type Lang = 'en' | 'ja'
 
@@ -15,7 +15,7 @@ export interface HasLang {
   lang: Lang
 }
 
-export const SefirotLangKey = 'sefirot-lang-key'
+export const SefirotLangKey: InjectionKey<Lang> = Symbol.for('sefirot-lang-key')
 
 export function useSetupLang(): (user?: HasLang | null) => void {
   const browserLang = useBrowserLang()
@@ -26,7 +26,7 @@ export function useSetupLang(): (user?: HasLang | null) => void {
 }
 
 export function provideLang(lang: Lang) {
-  provide(SefirotLangKey, lang)
+  getCurrentInstance()?.appContext.app.provide(SefirotLangKey, lang)
 }
 
 export function useLang(): Lang {

package/lib/http/Http.ts

@@ -2,7 +2,7 @@ import { parse as parseContentDisposition } from '@tinyhttp/content-disposition'
 import { parse as parseCookie } from '@tinyhttp/cookie'
 import FileSaver from 'file-saver'
 import { FetchError, type FetchOptions, type FetchRequest, type FetchResponse, ofetch } from 'ofetch'
-import { stringify } from 'qs'
+import { type IStringifyOptions, stringify } from 'qs'
 import { type Lang } from '../composables/Lang'
 import { isBlob, isError, isFormData, isRequest, isResponse, isString } from '../support/Utils'
 
@@ -20,6 +20,7 @@ export interface HttpOptions {
   lang?: Lang
   payloadKey?: string
   headers?: () => Awaitable<Record<string, string>>
+  stringifyOptions?: IStringifyOptions
 }
 
 export class Http {
@@ -29,6 +30,7 @@ export class Http {
   private static lang: Lang | undefined = undefined
   private static payloadKey = '__payload__'
   private static headers: () => Awaitable<Record<string, string>> = async () => ({})
+  private static stringifyOptions: IStringifyOptions = {}
 
   static config(options: HttpOptions): void {
     if (options.baseUrl) {
@@ -49,6 +51,9 @@ export class Http {
     if (options.headers) {
       Http.headers = options.headers
     }
+    if (options.stringifyOptions) {
+      Http.stringifyOptions = options.stringifyOptions
+    }
   }
 
   private async ensureXsrfToken(): Promise<string | undefined> {
@@ -69,7 +74,8 @@ export class Http {
   private async buildRequest(url: string, _options: FetchOptions = {}): Promise<[string, FetchOptions]> {
     const { method, params, query, ...options } = _options
     const xsrfToken = ['POST', 'PUT', 'PATCH', 'DELETE'].includes(method || '') && (await this.ensureXsrfToken())
-    const queryString = stringify({ ...params, ...query }, { encodeValuesOnly: true })
+
+    const queryString = stringify({ ...params, ...query }, { encodeValuesOnly: true, ...Http.stringifyOptions })
 
     return [
       `${url}${queryString ? `?${queryString}` : ''}`,
@@ -195,16 +201,10 @@ export class Http {
 export function isFetchError(e: unknown): e is FetchError {
   return (
     e instanceof FetchError
-    || (isError(e)
-      && (isString((e as FetchError).request) || isRequest((e as FetchError).request))
-      && ((e as FetchError).response === undefined || isResponse((e as FetchError).response))
-      && e.message.startsWith(
-        `[${
-          ((e as FetchError).request as Request | undefined)?.method || (e as FetchError).options?.method || 'GET'
-        }] ${JSON.stringify(
-          ((e as FetchError).request as Request | undefined)?.url || String((e as FetchError).request) || '/'
-        )}: `
-      ))
+    || (isError<FetchError>(e)
+      && (e.response === undefined || isResponse(e.response))
+      && ((isString(e.request) && e.message.startsWith(`[${e.options?.method || 'GET'}] ${JSON.stringify(e.request || '/')}: `))
+        || (isRequest(e.request) && e.message.startsWith(`[${e.request.method}] ${JSON.stringify(e.request.url)}: `))))
   )
 }
 

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/lib/support/Utils.ts

@@ -16,7 +16,7 @@ export function isDate(value: unknown): value is Date {
   return _isDate(value)
 }
 
-export function isError(value: unknown): value is Error {
+export function isError<T extends Error = Error>(value: unknown): value is T {
   return _isError(value)
 }