@globalbrain/sefirot 4.29.1 → 4.30.0

package/lib/components/SInputCheckbox.vue

@@ -3,10 +3,9 @@ import IconCheck from '~icons/ph/check-bold'
 import IconMinus from '~icons/ph/minus-bold'
 import { type Component, computed } from 'vue'
 import { type Validatable } from '../composables/Validation'
-import SInputBase from './SInputBase.vue'
+import SInputBase, { type Color, type Size } from './SInputBase.vue'
 
-export type Size = 'sm' | 'md' | 'mini' | 'small' | 'medium'
-export type Color = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
+export type { Color, Size }
 
 const props = withDefaults(defineProps<{
   size?: Size

package/lib/components/SInputCheckboxes.vue

@@ -1,11 +1,10 @@
 <script setup lang="ts">
 import { type Component, computed } from 'vue'
 import { type Validatable } from '../composables/Validation'
-import SInputBase from './SInputBase.vue'
+import SInputBase, { type Color, type Size } from './SInputBase.vue'
 import SInputCheckbox from './SInputCheckbox.vue'
 
-export type Size = 'sm' | 'md' | 'mini' | 'small' | 'medium'
-export type Color = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
+export type { Color, Size }
 
 export type Value = any
 

package/lib/components/SInputDate.vue

@@ -3,10 +3,9 @@ import { DatePicker } from 'v-calendar'
 import { type Component, computed } from 'vue'
 import { type Validatable } from '../composables/Validation'
 import { type Day, day } from '../support/Day'
-import SInputBase from './SInputBase.vue'
+import SInputBase, { type Color, type Size } from './SInputBase.vue'
 
-export type Size = 'sm' | 'md' | 'mini' | 'small' | 'medium'
-export type Color = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
+export type { Color, Size }
 
 const props = defineProps<{
   size?: Size
@@ -20,6 +19,7 @@ const props = defineProps<{
   checkColor?: Color
   block?: boolean
   disabled?: boolean
+  tabindex?: -1 | 0 | number
   modelValue: Day | null
   validation?: Validatable
   hideError?: boolean
@@ -86,6 +86,7 @@ function emitBlur() {
           autocomplete="off"
           :value="inputValue"
           :disabled
+          :tabindex
           v-on="disabled ? {} : inputEvents"
           @blur="emitBlur"
         >

package/lib/components/SInputDropdown.vue

@@ -10,6 +10,7 @@ import SDropdown from './SDropdown.vue'
 import SInputBase, { type Props as BaseProps } from './SInputBase.vue'
 import SInputDropdownItem from './SInputDropdownItem.vue'
 
+export type { Color, Size } from './SInputBase.vue'
 export interface Props extends BaseProps {
   placeholder?: string
   options: Option[]

package/lib/components/SInputDropdownItem.vue

@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import IconX from '~icons/ph/x'
 import SAvatar from './SAvatar.vue'
+import { type Size } from './SInputBase.vue'
+
+export type { Size }
 
 export type Item = ItemText | ItemAvatar
 
@@ -20,8 +23,6 @@ export interface ItemAvatar extends ItemBase {
   image?: string | null
 }
 
-export type Size = 'sm' | 'md' | 'mini' | 'small' | 'medium'
-
 defineProps<{
   item: Item | Item[]
   size: Size

package/lib/components/SInputFile.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import { type Component, computed, ref } from 'vue'
 import { type Validatable } from '../composables/Validation'
-import SInputBase from './SInputBase.vue'
+import SInputBase, { type Color, type Size } from './SInputBase.vue'
 
-export type Size = 'sm' | 'md' | 'mini' | 'small' | 'medium'
-export type Color = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
+export type { Color, Size }
 
 const props = defineProps<{
   size?: Size
@@ -16,6 +15,7 @@ const props = defineProps<{
   placeholder?: string
   accept?: string
   multiple?: boolean
+  tabindex?: -1 | 0 | number
   checkIcon?: Component
   checkText?: string
   checkColor?: Color
@@ -82,12 +82,13 @@ function onChange(e: Event) {
       type="file"
       :accept
       :multiple
+      :tabindex
       @change="onChange"
     >
 
     <div class="box" role="button" @click="open">
       <div class="action">
-        <button class="button">
+        <button class="button" :tabindex>
           {{ text ?? 'Choose File' }}
         </button>
       </div>

package/lib/components/SInputFileUpload.vue

@@ -9,12 +9,12 @@ import SButton, { type Mode as ButtonMode } from './SButton.vue'
 import SCard from './SCard.vue'
 import SCardBlock from './SCardBlock.vue'
 import { type State as IndicatorState } from './SIndicator.vue'
-import SInputBase from './SInputBase.vue'
+import SInputBase, { type Color } from './SInputBase.vue'
 import SInputFileUploadItem from './SInputFileUploadItem.vue'
 import STrans from './STrans.vue'
 
 export type Size = 'mini' | 'small' | 'medium'
-export type Color = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
+export type { Color }
 
 export type ModelType = 'file' | 'object'
 export type ModelValue<T extends ModelType> = T extends 'file' ? File : FileObject

package/lib/components/SInputHMS.vue

@@ -2,6 +2,7 @@
 import { computed, ref } from 'vue'
 import SInputBase, { type Props as BaseProps } from './SInputBase.vue'
 
+export type { Color, Size } from './SInputBase.vue'
 export interface Props extends BaseProps {
   placeholder?: Placeholder
   noHour?: boolean

package/lib/components/SInputImage.vue

@@ -4,10 +4,10 @@ import { type Component, computed, ref } from 'vue'
 import { useImageSrcFromFile } from '../composables/Image'
 import { type Validatable } from '../composables/Validation'
 import SButton from './SButton.vue'
-import SInputBase from './SInputBase.vue'
+import SInputBase, { type Color } from './SInputBase.vue'
 
 export type Size = 'mini' | 'small' | 'medium'
-export type CheckColor = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
+export type { Color }
 export type ImageType = 'rectangle' | 'circle'
 
 const props = withDefaults(defineProps<{
@@ -18,7 +18,7 @@ const props = withDefaults(defineProps<{
   help?: string
   checkIcon?: Component
   checkText?: string
-  checkColor?: CheckColor
+  checkColor?: Color
   imageType?: ImageType
   imageWidth?: string
   imageAspectRatio?: string

package/lib/components/SInputNumber.vue

@@ -12,6 +12,7 @@ export interface Props extends BaseProps {
   separator?: boolean
   align?: Align
   disabled?: boolean
+  tabindex?: -1 | 0 | number
   value?: number | null
   modelValue?: number | null
   displayValue?: string | null
@@ -91,6 +92,7 @@ function emitUpdate(value: string | null) {
     :text-color="_textColor"
     :align
     :disabled
+    :tabindex
     :display-value
     :model-value="_value == null ? null : String(_value)"
     :validation

package/lib/components/SInputRadio.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import { type Component, computed } from 'vue'
 import { type Validatable } from '../composables/Validation'
-import SInputBase from './SInputBase.vue'
+import SInputBase, { type Color, type Size } from './SInputBase.vue'
 
-export type Size = 'sm' | 'md' | 'mini' | 'small' | 'medium'
-export type Color = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
+export type { Color, Size }
 
 const props = defineProps<{
   size?: Size

package/lib/components/SInputRadios.vue

@@ -8,11 +8,10 @@
 >
 import { type Component, computed } from 'vue'
 import { type Validatable } from '../composables/Validation'
-import SInputBase from './SInputBase.vue'
+import SInputBase, { type Color, type Size } from './SInputBase.vue'
 import SInputRadio from './SInputRadio.vue'
 
-export type Size = 'sm' | 'md' | 'mini' | 'small' | 'medium'
-export type Color = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
+export type { Color, Size }
 
 export interface Option<
   ValueType extends string | number | boolean = string | number | boolean

package/lib/components/SInputSegments.vue

@@ -1,12 +1,10 @@
 <script setup lang="ts" generic="T extends string | number | boolean">
 import { type Component, computed } from 'vue'
 import { type Validatable } from '../composables/Validation'
-import SInputBase from './SInputBase.vue'
+import SInputBase, { type Color, type Size } from './SInputBase.vue'
 import SInputSegmentsOption, { type Mode } from './SInputSegmentsOption.vue'
 
-export type Size = 'sm' | 'md' | 'mini' | 'small' | 'medium'
-export type Color = 'default' | 'mute' | 'neutral' | 'info' | 'success' | 'warning' | 'danger'
-export type CheckColor = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
+export type { Color, Size }
 
 export interface Option<T extends string | number | boolean> {
   label: string
@@ -24,7 +22,7 @@ const props = defineProps<{
   help?: string
   checkIcon?: Component
   checkText?: string
-  checkColor?: CheckColor
+  checkColor?: Color
   options: Option<T>[]
   block?: boolean
   disabled?: boolean

package/lib/components/SInputSegmentsOption.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts" generic="T extends string | number | boolean">
-export type Size = 'sm' | 'md' | 'mini' | 'small' | 'medium'
+import { type Size } from './SInputBase.vue'
+
+export type { Size }
 export type Mode = 'default' | 'mute' | 'neutral' | 'info' | 'success' | 'warning' | 'danger'
 
 const props = defineProps<{

package/lib/components/SInputSelect.vue

@@ -4,11 +4,13 @@ import IconCaretUp from '~icons/ph/caret-up'
 import { computed, ref } from 'vue'
 import SInputBase, { type Props as BaseProps } from './SInputBase.vue'
 
+export type { Color, Size } from './SInputBase.vue'
 export interface Props extends BaseProps {
   placeholder?: string
   options: Option[]
   nullable?: boolean
   disabled?: boolean
+  tabindex?: -1 | 0 | number
   value?: Value
   modelValue?: Value
 }
@@ -85,6 +87,7 @@ function emitChange(e: any): void {
         class="select"
         :class="{ 'is-not-selected': isNotSelected }"
         :disabled
+        :tabindex
         @focus="isFocused = true"
         @blur="isFocused = false"
         @change="emitChange"

package/lib/components/SInputSwitch.vue

@@ -1,11 +1,10 @@
 <script setup lang="ts">
 import { type Component, computed } from 'vue'
 import { type Validatable } from '../composables/Validation'
-import SInputBase from './SInputBase.vue'
+import SInputBase, { type Color, type Size } from './SInputBase.vue'
 
-export type Size = 'sm' | 'md' | 'mini' | 'small' | 'medium'
+export type { Color, Size }
 export type ActiveColor = 'info' | 'success' | 'warning' | 'danger'
-export type CheckColor = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
 
 const props = withDefaults(defineProps<{
   size?: Size
@@ -18,7 +17,7 @@ const props = withDefaults(defineProps<{
   help?: string
   checkIcon?: Component
   checkText?: string
-  checkColor?: CheckColor
+  checkColor?: Color
   disabled?: boolean
   value?: boolean
   modelValue?: boolean

package/lib/components/SInputSwitches.vue

@@ -1,11 +1,10 @@
 <script setup lang="ts">
 import { type Component, computed } from 'vue'
 import { type Validatable } from '../composables/Validation'
-import SInputBase from './SInputBase.vue'
+import SInputBase, { type Color, type Size } from './SInputBase.vue'
 import SInputSwitch from './SInputSwitch.vue'
 
-export type Size = 'sm' | 'md' | 'mini' | 'small' | 'medium'
-export type CheckColor = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
+export type { Color, Size }
 
 export interface Option {
   label: string
@@ -21,7 +20,7 @@ const props = defineProps<{
   help?: string
   checkIcon?: Component
   checkText?: string
-  checkColor?: CheckColor
+  checkColor?: Color
   options: Option[]
   disabled?: boolean
   modelValue: any[]

package/lib/components/SInputText.vue

@@ -3,6 +3,7 @@ import { type Component, computed, ref } from 'vue'
 import { isString } from '../support/Utils'
 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
@@ -11,6 +12,7 @@ export interface Props extends BaseProps {
   textColor?: TextColor | ((value: string | null) => TextColor)
   align?: Align
   disabled?: boolean
+  tabindex?: -1 | 0 | number
   modelValue: string | null
   displayValue?: string | null
 }
@@ -134,6 +136,7 @@ function getValue(e: Event | FocusEvent | KeyboardEvent): string | null {
             :type="type ?? 'text'"
             :placeholder
             :disabled
+            :tabindex
             :value="modelValue"
             ref="input"
             @focus="onFocus"

package/lib/components/SInputTextarea.vue

@@ -3,9 +3,11 @@ import { computed, ref } from '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
+  tabindex?: 0 | -1 | number
   rows?: number | 'fill'
   autoResize?: boolean | number
   value?: string | null
@@ -115,6 +117,7 @@ const isPreview = ref(false)
         :placeholder
         :rows="rows === 'fill' ? 3 : rows"
         :disabled
+        :tabindex
         :value="_value ?? undefined"
         @input="emitInput"
         @blur="emitBlur"

package/lib/components/SInputYMD.vue

@@ -2,6 +2,7 @@
 import { computed, ref } from 'vue'
 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

package/lib/components/STooltip.vue

@@ -11,7 +11,7 @@ const props = withDefaults(defineProps<{
   display?: 'inline' | 'inline-block' | 'block'
   trigger?: 'hover' | 'focus' | 'both'
   timeout?: number
-  tabindex?: number
+  tabindex?: -1 | 0 | number
 }>(), {
   tag: 'span',
   triggerTag: 'span',

package/lib/composables/Api.ts

@@ -1,3 +1,4 @@
+import { useHttpConfig } from 'sefirot/stores/HttpConfig'
 import { type Ref, type WatchSource, ref, watch } from 'vue'
 import { Http } from '../http/Http'
 import { tryOnMounted } from './Utils'
@@ -45,6 +46,7 @@ export function useQuery<Data = any>(
 ): Query<Data> {
   const loading = ref(false)
   const data = ref<Data | undefined>()
+  const httpConfig = useHttpConfig()
 
   if (options.immediate !== false) {
     tryOnMounted(execute)
@@ -57,7 +59,7 @@ export function useQuery<Data = any>(
   async function execute({ assign = true, silent = false } = {}): Promise<Data> {
     if (!silent) { loading.value = true }
 
-    const res: Data = await req(new Http())
+    const res: Data = await req(new Http(httpConfig))
     if (assign) { data.value = res }
 
     loading.value = false
@@ -72,11 +74,12 @@ export function useMutation<Data = any, Args extends any[] = any[]>(
 ): Mutation<Data, Args> {
   const loading = ref(false)
   const data = ref<Data | undefined>()
+  const httpConfig = useHttpConfig()
 
   async function execute(...args: Args): Promise<Data> {
     loading.value = true
 
-    const res: Data = await req(new Http(), ...args)
+    const res: Data = await req(new Http(httpConfig), ...args)
     data.value = res
 
     loading.value = false

package/lib/composables/App.ts

@@ -1,4 +1,4 @@
-import { type HttpOptions } from '../http/Http'
+import { type HttpOptions } from 'sefirot/stores/HttpConfig'
 import { useSetupHttp } from './Http'
 import { type HasLang, useSetupLang } from './Lang'
 import { type HasTheme, useSetupTheme } from './Theme'

package/lib/composables/Http.ts

@@ -1,5 +1,5 @@
 import { type Lang, useBrowserLang } from 'sefirot/composables/Lang'
-import { Http, type HttpOptions } from 'sefirot/http/Http'
+import { type HttpOptions, useHttpConfig } from 'sefirot/stores/HttpConfig'
 
 export interface HasLang {
   lang: Lang
@@ -7,9 +7,10 @@ export interface HasLang {
 
 export function useSetupHttp(): (user?: HasLang | null, options?: HttpOptions) => void {
   const browserLang = useBrowserLang()
+  const httpConfig = useHttpConfig()
 
   return (user, options = {}) => {
-    Http.config({
+    httpConfig.apply({
       lang: user?.lang ?? browserLang,
       ...options
     })

package/lib/http/Http.ts

@@ -1,70 +1,28 @@
 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 { type IStringifyOptions, stringify } from 'qs'
-import { type Lang } from '../composables/Lang'
+import { FetchError, type FetchOptions, type FetchResponse } from 'ofetch'
+import { stringify } from 'qs'
 import { isBlob, isError, isFormData, isRequest, isResponse, isString } from '../support/Utils'
 
-type Awaitable<T> = T | PromiseLike<T>
-
-export interface HttpClient {
-  (request: FetchRequest, options?: Omit<FetchOptions, 'method'>): Promise<any>
-  raw(request: FetchRequest, options?: Omit<FetchOptions, 'method'>): Promise<FetchResponse<any>>
-}
-
-export interface HttpOptions {
-  baseUrl?: string
-  xsrfUrl?: string | false
-  client?: HttpClient
-  lang?: Lang
-  payloadKey?: string
-  headers?: () => Awaitable<Record<string, string>>
-  stringifyOptions?: IStringifyOptions
-}
+type Config = ReturnType<typeof import('../stores/HttpConfig').useHttpConfig>
 
 export class Http {
-  private static baseUrl: string | undefined = undefined
-  private static xsrfUrl: string | false = '/api/csrf-cookie'
-  private static client: HttpClient = ofetch
-  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) {
-      Http.baseUrl = options.baseUrl
-    }
-    if (options.xsrfUrl !== undefined) {
-      Http.xsrfUrl = options.xsrfUrl
-    }
-    if (options.client) {
-      Http.client = options.client
-    }
-    if (options.lang) {
-      Http.lang = options.lang
-    }
-    if (options.payloadKey) {
-      Http.payloadKey = options.payloadKey
-    }
-    if (options.headers) {
-      Http.headers = options.headers
-    }
-    if (options.stringifyOptions) {
-      Http.stringifyOptions = options.stringifyOptions
-    }
+  private config: Config
+
+  constructor(options: Config) {
+    this.config = options
   }
 
   private async ensureXsrfToken(): Promise<string | undefined> {
-    if (!Http.xsrfUrl) {
+    if (!this.config.xsrfUrl) {
       return undefined
     }
 
     let xsrfToken = parseCookie(document.cookie)['XSRF-TOKEN']
 
     if (!xsrfToken) {
-      await this.head(Http.xsrfUrl)
+      await this.head(this.config.xsrfUrl)
       xsrfToken = parseCookie(document.cookie)['XSRF-TOKEN']
     }
 
@@ -75,20 +33,20 @@ export class Http {
     const { method, params, query, ...options } = _options
     const xsrfToken = ['POST', 'PUT', 'PATCH', 'DELETE'].includes(method || '') && (await this.ensureXsrfToken())
 
-    const queryString = stringify({ ...params, ...query }, { encodeValuesOnly: true, ...Http.stringifyOptions })
+    const queryString = stringify({ ...params, ...query }, { encodeValuesOnly: true, ...this.config.stringifyOptions })
 
     return [
       `${url}${queryString ? `?${queryString}` : ''}`,
       {
-        baseURL: Http.baseUrl,
+        baseURL: this.config.baseUrl,
         method,
         credentials: 'include',
         ...options,
         headers: {
           Accept: 'application/json',
-          ...(await Http.headers()),
+          ...(await this.config.headers()),
           ...(xsrfToken && { 'X-Xsrf-Token': xsrfToken }),
-          ...(Http.lang && { 'Accept-Language': Http.lang }),
+          ...(this.config.lang && { 'Accept-Language': this.config.lang }),
           ...options.headers
         }
       }
@@ -96,11 +54,11 @@ export class Http {
   }
 
   private async performRequest<T>(url: string, options: FetchOptions = {}): Promise<T> {
-    return Http.client(...(await this.buildRequest(url, options)))
+    return this.config.client(...(await this.buildRequest(url, options)))
   }
 
   private async performRequestRaw<T>(url: string, options: FetchOptions = {}): Promise<FetchResponse<T>> {
-    return Http.client.raw(...(await this.buildRequest(url, options)))
+    return this.config.client.raw(...(await this.buildRequest(url, options)))
   }
 
   async get<T = any>(url: string, options?: FetchOptions): Promise<T> {
@@ -125,7 +83,7 @@ export class Http {
 
       if (hasFile) {
         const formData = this.objectToFormData(body, undefined, undefined, true)
-        formData.append(Http.payloadKey, payload)
+        formData.append(this.config.payloadKey, payload)
         body = formData
       } else {
         body = payload

package/lib/stores/HttpConfig.ts

@@ -0,0 +1,53 @@
+import { type FetchOptions, type FetchRequest, type FetchResponse, ofetch } from 'ofetch'
+import { defineStore } from 'pinia'
+import { type IStringifyOptions } from 'qs'
+import { computed, ref } from 'vue'
+import { type Lang } from '../composables/Lang'
+
+type Awaitable<T> = T | PromiseLike<T>
+
+export interface HttpClient {
+  (request: FetchRequest, options?: Omit<FetchOptions, 'method'>): Promise<any>
+  raw(request: FetchRequest, options?: Omit<FetchOptions, 'method'>): Promise<FetchResponse<any>>
+}
+
+export interface HttpOptions {
+  baseUrl?: string
+  xsrfUrl?: string | false
+  client?: HttpClient
+  lang?: Lang
+  payloadKey?: string
+  headers?: () => Awaitable<Record<string, string>>
+  stringifyOptions?: IStringifyOptions
+}
+
+export const useHttpConfig = defineStore('sefirot-http-config', () => {
+  const baseUrl = ref<string | undefined>(undefined)
+  const xsrfUrl = ref<string | false>('/api/csrf-cookie')
+  const client = ref<HttpClient>(ofetch)
+  const lang = ref<Lang | undefined>(undefined)
+  const payloadKey = ref<string>('__payload__')
+  const headers = ref<() => Awaitable<Record<string, string>>>(async () => ({}))
+  const stringifyOptions = ref<IStringifyOptions>({})
+
+  function apply(options: HttpOptions): void {
+    if (options.baseUrl != null) { baseUrl.value = options.baseUrl }
+    if (options.xsrfUrl != null) { xsrfUrl.value = options.xsrfUrl }
+    if (options.client != null) { client.value = options.client }
+    if (options.lang != null) { lang.value = options.lang }
+    if (options.payloadKey != null) { payloadKey.value = options.payloadKey }
+    if (options.headers != null) { headers.value = options.headers }
+    if (options.stringifyOptions != null) { stringifyOptions.value = options.stringifyOptions }
+  }
+
+  return {
+    baseUrl: computed(() => baseUrl.value),
+    xsrfUrl: computed(() => xsrfUrl.value),
+    client: computed(() => client.value),
+    lang: computed(() => lang.value),
+    payloadKey: computed(() => payloadKey.value),
+    headers: computed(() => headers.value),
+    stringifyOptions: computed(() => stringifyOptions.value),
+    apply
+  }
+})

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@globalbrain/sefirot",
   "type": "module",
-  "version": "4.29.1",
+  "version": "4.30.0",
   "packageManager": "pnpm@9.15.4",
   "description": "Vue Components for Global Brain Design System.",
   "author": "Kia Ishii <ka.ishii@globalbrains.com>",
@@ -121,6 +121,6 @@
     "vitest": "^3.2.3",
     "vue": "^3.5.16",
     "vue-router": "^4.5.1",
-    "vue-tsc": "^2.2.10"
+    "vue-tsc": "^3.0.4"
   }
 }