@globalbrain/sefirot 3.50.0 → 4.0.0-0

package/lib/components/STableHeaderMenuItem.vue

@@ -1,9 +1,8 @@
 <script setup lang="ts">
-import IconCaretDown from '@iconify-icons/ph/caret-down-bold'
 import { type DropdownSection } from '../composables/Dropdown'
 import { useFlyout } from '../composables/Flyout'
 import SDropdown from './SDropdown.vue'
-import SIcon from './SIcon.vue'
+import IconCaretDown from '~icons/ph/caret-down-bold'
 
 defineProps<{
   label: string
@@ -19,7 +18,7 @@ const { container, isOpen, toggle } = useFlyout()
     <button class="button" :class="[state]" @click="toggle">
       <span class="label">{{ label }}</span>
       <span v-if="state !== 'indicate'" class="caret">
-        <SIcon class="caret-svg" :icon="IconCaretDown" />
+        <IconCaretDown class="caret-svg" />
       </span>
       <span v-else class="indicator">
         <span class="indicator-dot" />

package/lib/components/STableItem.vue

@@ -11,7 +11,7 @@ const classes = computed(() => [
   'STableItem',
   props.className,
   `col-${props.name}`,
-  { adjusted: props.width },
+  { adjusted: !!props.width },
   { auto: props.width === 'auto' }
 ])
 </script>

package/lib/composables/Data.ts

@@ -1,115 +1,21 @@
-/**
- * @deprecated Use `composables/D` module instead.
- */
+import { type Ref, ref } from 'vue'
 
-import { watchOnce } from '@vueuse/core'
-import cloneDeep from 'lodash-es/cloneDeep'
-import { type WatchSource, reactive } from 'vue'
-import { isNullish, isObject } from '../support/Utils'
-
-export interface Data<T extends Record<string, any>> {
-  state: T
+export interface D<T extends Record<string, any>> {
+  data: Ref<T>
   init(): void
 }
 
-export type DataWithDef = Record<string, any>
-
-export interface Def<T = any> {
-  __isDef: true
-  value: any
-  source: WatchSource<T>
-  cb: (value: Exclude<T, undefined>) => void
-}
-
-export type UseDataInput<
-  T extends Record<string, any>
-> = T | ((utils: UseDataInputUtils) => DataWithDef)
-
-export interface UseDataInputUtils {
-  def<T>(
-    value: any,
-    source: WatchSource<T>,
-    cb: (value: Exclude<T, null | undefined>) => void
-  ): Def<T>
-}
-
-export function useData<T extends Record<string, any>>(
-  data: UseDataInput<T>
-): Data<T> {
-  const { state, defs } = createState(data)
-
-  const initialState = cloneDeep(state)
-  const reactiveState = reactive(state)
+export function useData<T extends Record<string, any>>(data: T): D<T> {
+  const initialData = JSON.stringify(data)
 
-  handleDefs(defs, reactiveState)
+  const refData = ref(data) as Ref<T>
 
   function init(): void {
-    Object.assign(reactiveState, initialState)
+    refData.value = JSON.parse(initialData) as T
   }
 
   return {
-    state: reactiveState as T,
+    data: refData,
     init
   }
 }
-
-function createState<T extends Record<string, any>>(
-  data: UseDataInput<T>
-): { state: T; defs: [string, Def][] } {
-  if (typeof data !== 'function') {
-    return { state: data, defs: [] }
-  }
-
-  const dataWithDef = data({ def })
-
-  const state = {} as T
-  const defs = [] as [string, Def][]
-
-  for (const key in dataWithDef) {
-    const maybeDef = dataWithDef[key]
-
-    if (!isDef(maybeDef)) {
-      (state as any)[key] = maybeDef
-      continue
-    }
-
-    (state as any)[key] = maybeDef.value
-
-    defs.push([key, maybeDef])
-  }
-
-  return {
-    state,
-    defs
-  }
-}
-
-function handleDefs<T extends Record<string, any>>(
-  defs: [string, Def][],
-  state: T
-): void {
-  defs.forEach(([key, def]) => {
-    watchOnce(def.source, (value: any) => {
-      if (!isNullish(value)) {
-        (state as any)[key] = def.cb(value)
-      }
-    })
-  })
-}
-
-function def<T>(
-  value: any,
-  source: WatchSource<T>,
-  cb: (value: Exclude<T, null | undefined>) => void
-): Def {
-  return {
-    __isDef: true,
-    value,
-    source,
-    cb
-  }
-}
-
-function isDef(value: any): boolean {
-  return isObject(value) ? !!value.__isDef : false
-}

package/lib/composables/Error.ts

@@ -29,7 +29,7 @@ import {
   toValue
 } from 'vue'
 import { useError } from '../stores/Error'
-import { isFunction } from '../support/Utils'
+import { isError } from '../support/Utils'
 
 export interface User {
   id?: string | number
@@ -47,7 +47,7 @@ function classify(str: string): string {
 }
 
 function getComponentName(Component: ConcreteComponent): string | undefined {
-  return isFunction(Component)
+  return typeof Component === 'function'
     ? Component.displayName || Component.name
     : Component.name || Component.__name
 }
@@ -232,7 +232,7 @@ function getErrorMessage(error: unknown | undefined) {
     return error
   }
 
-  if (error instanceof Error) {
+  if (isError(error)) {
     return error.message
   }
 

package/lib/composables/Table.ts

@@ -18,11 +18,6 @@ export interface Table<
   rowSize?: MaybeRef<number | undefined>
   borderless?: MaybeRef<boolean>
   disableSelection?: (record: R) => boolean
-
-  /**
-   * @deprecated Use `<SControl>` to add equivalent features.
-   */
-  actions?: MaybeRef<TableHeaderAction[]>
   menu?: MaybeRef<TableMenu[] | TableMenu[][]>
   header?: MaybeRef<boolean | undefined>
   footer?: MaybeRef<boolean | undefined>
@@ -61,11 +56,11 @@ export type TableCell<V = any, R = any> =
   | TableCellText<V, R>
   | TableCellNumber<V, R>
   | TableCellDay
-  | TableCellPill<V, R>
-  | TableCellPills<V, R>
+  | TableCellPill
+  | TableCellPills
   | TableCellState
   | TableCellAvatar<V, R>
-  | TableCellAvatars<V, R>
+  | TableCellAvatars
   | TableCellCustom
   | TableCellEmpty
   | TableCellComponent
@@ -102,10 +97,10 @@ export interface TableCellText<V = any, R = any> extends TableCellBase {
   type: 'text'
   align?: 'left' | 'center' | 'right'
   icon?: any
-  value?: string | null | ((value: V, record: R) => string | null)
-  link?: string | null | ((value: V, record: R) => string)
-  color?: TableCellValueColor | ((value: V, record: R) => TableCellValueColor)
-  iconColor?: TableCellValueColor | ((value: V, record: R) => TableCellValueColor)
+  value?: string | null
+  link?: string | null
+  color?: TableCellValueColor
+  iconColor?: TableCellValueColor
   onClick?(value: V, record: R): void
 }
 
@@ -131,17 +126,17 @@ export interface TableCellDay extends TableCellBase {
   color?: 'neutral' | 'soft' | 'mute'
 }
 
-export interface TableCellPill<V = any, R = any> extends TableCellBase {
+export interface TableCellPill extends TableCellBase {
   type: 'pill'
-  value?: string | ((value: V, record: R) => string)
-  color?: TableCellPillColor | ((value: V, record: R) => TableCellPillColor)
+  value?: string
+  color?: TableCellPillColor
 }
 
 export type TableCellPillColor = ColorModes
 
-export interface TableCellPills<V = any, R = any> extends TableCellBase {
+export interface TableCellPills extends TableCellBase {
   type: 'pills'
-  pills: TableCellPillItem[] | ((value: V, record: R) => TableCellPillItem[])
+  pills: TableCellPillItem[]
 }
 
 export interface TableCellPillItem {
@@ -151,16 +146,16 @@ export interface TableCellPillItem {
 
 export interface TableCellAvatar<V = any, R = any> extends TableCellBase {
   type: 'avatar'
-  image?: string | null | ((value: V, record: R) => string | null | undefined)
-  name?: string | null | ((value: V, record: R) => string | null | undefined)
-  link?: string | null | ((value: V, record: R) => string | null | undefined)
+  image?: string | null
+  name?: string | null
+  link?: string | null
   color?: 'neutral' | 'soft' | 'mute'
   onClick?(value: V, record: R): void
 }
 
-export interface TableCellAvatars<V = any, R = any> extends TableCellBase {
+export interface TableCellAvatars extends TableCellBase {
   type: 'avatars'
-  avatars: TableCellAvatarsOption[] | ((value: V, record: R) => TableCellAvatarsOption[])
+  avatars: TableCellAvatarsOption[]
   color?: 'neutral' | 'soft' | 'mute'
   avatarCount?: number
   nameCount?: number

package/lib/composables/Utils.ts

@@ -1,5 +1,5 @@
 import { type ComputedRef, type MaybeRefOrGetter, computed, getCurrentInstance, onMounted, toValue, useSlots } from 'vue'
-import { isArray, isString } from '../support/Utils'
+import { isString } from '../support/Utils'
 
 export type WhenCondition<T> = MaybeRefOrGetter<T>
 
@@ -42,7 +42,7 @@ export function useHasSlotContent(name = 'default'): ComputedRef<boolean> {
 
   return computed(() => {
     return !!slots[name]?.().some((s) => {
-      return isArray(s.children) ? true : !!(s.children as string).trim()
+      return Array.isArray(s.children) ? true : !!(s.children as string).trim()
     })
   })
 }

package/lib/composables/Validation.ts

@@ -1,16 +1,23 @@
-/**
- * @deprecated Use `composables/V` module instead.
- */
-
 import {
-  type GlobalConfig,
   type Validation,
   type ValidationArgs,
+  type GlobalConfig as VuelidateConfig,
   useVuelidate
 } from '@vuelidate/core'
-import { type Ref, type ToRefs } from 'vue'
+import { type MaybeRefOrGetter, type Ref, computed, toValue } from 'vue'
+import { type Snackbar, useSnackbars } from '../stores/Snackbars'
+import { useTrans } from './Lang'
 
-export type { Validation, ValidationArgs, GlobalConfig }
+export interface V<
+  Data extends { [key in keyof Rules]: any },
+  Rules extends ValidationArgs = ValidationArgs
+> {
+  validation: Ref<Validation<Rules, Data>>
+  validate(): Promise<boolean>
+  validateAndNotify(message?: Snackbar): Promise<boolean>
+  notify(message?: Snackbar): void
+  reset(): void
+}
 
 export interface Validatable {
   readonly $dirty: boolean
@@ -23,13 +30,68 @@ export interface ValidatableError {
   readonly $message: string | Ref<string>
 }
 
+export interface VNotification {
+  notify(message?: Snackbar): void
+}
+
 export function useValidation<
-  T extends { [key in keyof R]: any },
-  R extends ValidationArgs = ValidationArgs
+  Data extends { [key in keyof Rules]: any },
+  Rules extends ValidationArgs = ValidationArgs
 >(
-  state: T | Ref<T> | ToRefs<T>,
-  rules: Ref<R> | R,
-  config?: GlobalConfig
-): Ref<Validation<R, T>> {
-  return useVuelidate(rules, state, config)
+  data?: MaybeRefOrGetter<Data>,
+  rules?: MaybeRefOrGetter<Rules>,
+  config?: VuelidateConfig
+): V<Data, Rules> {
+  const { notify } = useVNotification()
+
+  const d = computed(() => toValue(data) ?? {})
+  const r = computed(() => toValue(rules) ?? {})
+
+  const validation = useVuelidate(r, d, config) as any
+
+  function reset(): void {
+    validation.value.$reset()
+  }
+
+  function validate(): Promise<boolean> {
+    return validation.value.$validate()
+  }
+
+  async function validateAndNotify(message?: Snackbar): Promise<boolean> {
+    const valid = await validate()
+
+    if (!valid) {
+      notify(message)
+    }
+
+    return valid
+  }
+
+  return {
+    validation,
+    validate,
+    validateAndNotify,
+    notify,
+    reset
+  }
+}
+
+export function useVNotification(): VNotification {
+  const { t } = useTrans({
+    en: { notify: 'Form contains errors. Please correct them and try again.' },
+    ja: { notify: 'フォームにエラーがあります。内容を確認し、再度お試しください。' }
+  })
+
+  const snackbars = useSnackbars()
+
+  function notify(message?: Snackbar): void {
+    snackbars.push(message ?? {
+      mode: 'danger',
+      text: t.notify
+    })
+  }
+
+  return {
+    notify
+  }
 }

package/lib/http/Http.ts

@@ -1,9 +1,16 @@
 import { parse as parseContentDisposition } from '@tinyhttp/content-disposition'
 import { parse as parseCookie } from '@tinyhttp/cookie'
 import FileSaver from 'file-saver'
-import { type FetchOptions, type FetchRequest, type FetchResponse, ofetch } from 'ofetch'
+import {
+  FetchError,
+  type FetchOptions,
+  type FetchRequest,
+  type FetchResponse,
+  ofetch
+} from 'ofetch'
 import { stringify } from 'qs'
 import { type Lang } from '../composables/Lang'
+import { isBlob, isError, isFormData, isRequest, isResponse, isString } from '../support/Utils'
 
 export interface HttpClient {
   <T = any>(request: FetchRequest, options?: Omit<FetchOptions, 'method'>): Promise<T>
@@ -106,11 +113,11 @@ export class Http {
   }
 
   async post<T = any>(url: string, body?: any, options?: FetchOptions): Promise<T> {
-    if (body && !(body instanceof FormData)) {
+    if (body && !isFormData(body)) {
       let hasFile = false
 
       const payload = JSON.stringify(body, (_, value) => {
-        if (value instanceof Blob) {
+        if (isBlob(value)) {
           hasFile = true
           return undefined
         }
@@ -177,15 +184,11 @@ export class Http {
         return
       }
 
-      if (
-        typeof obj[property] === 'object'
-        && !(obj[property] instanceof Blob)
-        && obj[property] !== null
-      ) {
+      if (typeof obj[property] === 'object' && !isBlob(obj[property]) && obj[property] !== null) {
         this.objectToFormData(obj[property], fd, property, onlyFiles)
       } else {
         const value = obj[property] === null ? '' : obj[property]
-        if (onlyFiles && !(value instanceof Blob)) {
+        if (onlyFiles && !isBlob(value)) {
           return
         }
         fd.append(formKey, value)
@@ -196,4 +199,18 @@ export class Http {
   }
 }
 
-export type { FetchOptions }
+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) || '/')
+        }: `
+      ))
+  )
+}
+
+export { FetchError, type FetchOptions, type FetchRequest, type FetchResponse } from 'ofetch'

package/lib/mixins/Card.ts

@@ -1,42 +1,15 @@
 import { type App } from 'vue'
 import SCard from '../components/SCard.vue'
 import SCardBlock from '../components/SCardBlock.vue'
-import SCardFooter from '../components/SCardFooter.vue'
-import SCardFooterAction from '../components/SCardFooterAction.vue'
-import SCardFooterActions from '../components/SCardFooterActions.vue'
-import SCardHeader from '../components/SCardHeader.vue'
-import SCardHeaderAction from '../components/SCardHeaderAction.vue'
-import SCardHeaderActionClose from '../components/SCardHeaderActionClose.vue'
-import SCardHeaderActionCollapse from '../components/SCardHeaderActionCollapse.vue'
-import SCardHeaderActions from '../components/SCardHeaderActions.vue'
-import SCardHeaderTitle from '../components/SCardHeaderTitle.vue'
 
 export function mixin(app: App): void {
   app.component('SCard', SCard)
   app.component('SCardBlock', SCardBlock)
-  app.component('SCardFooter', SCardFooter)
-  app.component('SCardFooterAction', SCardFooterAction)
-  app.component('SCardFooterActions', SCardFooterActions)
-  app.component('SCardHeader', SCardHeader)
-  app.component('SCardHeaderAction', SCardHeaderAction)
-  app.component('SCardHeaderActionClose', SCardHeaderActionClose)
-  app.component('SCardHeaderActionCollapse', SCardHeaderActionCollapse)
-  app.component('SCardHeaderActions', SCardHeaderActions)
-  app.component('SCardHeaderTitle', SCardHeaderTitle)
 }
 
 declare module 'vue' {
   export interface GlobalComponents {
     SCard: typeof SCard
     SCardBlock: typeof SCardBlock
-    SCardFooter: typeof SCardFooter
-    SCardFooterAction: typeof SCardFooterAction
-    SCardFooterActions: typeof SCardFooterActions
-    SCardHeader: typeof SCardHeader
-    SCardHeaderAction: typeof SCardHeaderAction
-    SCardHeaderActionClose: typeof SCardHeaderActionClose
-    SCardHeaderActionCollapse: typeof SCardHeaderActionCollapse
-    SCardHeaderActions: typeof SCardHeaderActions
-    SCardHeaderTitle: typeof SCardHeaderTitle
   }
 }

package/lib/mixins/Fundamental.ts

@@ -1,7 +1,6 @@
 import { type App } from 'vue'
 import SContent from '../components/SContent.vue'
 import SDivider from '../components/SDivider.vue'
-import SIcon from '../components/SIcon.vue'
 import SLink from '../components/SLink.vue'
 import SModal from '../components/SModal.vue'
 import STrans from '../components/STrans.vue'
@@ -22,7 +21,6 @@ export function mixin(app: App): void {
 
   app.component('SContent', SContent)
   app.component('SDivider', SDivider)
-  app.component('SIcon', SIcon)
   app.component('SLink', SLink)
   app.component('SModal', SModal)
   app.component('STrans', STrans)
@@ -32,7 +30,6 @@ declare module 'vue' {
   export interface GlobalComponents {
     SContent: typeof SContent
     SDivider: typeof SDivider
-    SIcon: typeof SIcon
     SLink: typeof SLink
     SModal: typeof SModal
     STrans: typeof STrans

package/lib/support/Day.ts

@@ -2,7 +2,7 @@ import dayjs, { type ConfigType, type Dayjs } from 'dayjs'
 import PluginRelativeTime from 'dayjs/plugin/relativeTime'
 import PluginTimezone from 'dayjs/plugin/timezone'
 import PluginUtc from 'dayjs/plugin/utc'
-import { isNullish, isNumber, isObject, isString } from './Utils'
+import { isNumber, isObject, isString } from './Utils'
 
 dayjs.extend(PluginUtc)
 dayjs.extend(PluginTimezone)
@@ -67,7 +67,7 @@ export function createYmd(
   month: number | null = null,
   date: number | null = null
 ): Ymd {
-  if (isNumber(yearOrDay) || isNullish(yearOrDay)) {
+  if (isNumber(yearOrDay) || yearOrDay == null) {
     return {
       year: yearOrDay,
       month,
@@ -92,7 +92,7 @@ export function createHms(
   minute: string | null = null,
   second: string | null = null
 ): Hms {
-  if (isString(hourOrDay) || isNullish(hourOrDay)) {
+  if (isString(hourOrDay) || hourOrDay == null) {
     return {
       hour: hourOrDay,
       minute,
@@ -108,7 +108,7 @@ export function createHms(
 }
 
 export function isYmd(value: unknown, required: YmdType[] = ['y', 'm', 'd']): value is Ymd {
-  if (isNullish(value) || !isObject(value)) {
+  if (value == null || !isObject(value)) {
     return false
   }
 
@@ -121,7 +121,7 @@ export function isYmd(value: unknown, required: YmdType[] = ['y', 'm', 'd']): va
 }
 
 export function isHms(value: unknown, required: HmsType[] = ['h', 'm', 's']): value is Hms {
-  if (isNullish(value) || !isObject(value)) {
+  if (value == null || !isObject(value)) {
     return false
   }
 

package/lib/support/Utils.ts

@@ -1,28 +1,49 @@
-export function isNullish(value: unknown): value is undefined | null {
-  return value == null
+// eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error
+// @ts-ignore internal
+import baseGetTag from 'lodash-es/_baseGetTag'
+
+import _isDate from 'lodash-es/isDate'
+import _isError from 'lodash-es/isError'
+import _isNumber from 'lodash-es/isNumber'
+import _isPlainObject from 'lodash-es/isPlainObject'
+import _isString from 'lodash-es/isString'
+
+export function isBlob(value: unknown): value is Blob {
+  return value instanceof Blob || baseGetTag(value) === '[object Blob]'
 }
 
-export function isString(value: unknown): value is string {
-  return typeof value === 'string'
+export function isDate(value: unknown): value is Date {
+  return _isDate(value)
+}
+
+export function isError(value: unknown): value is Error {
+  return _isError(value)
+}
+
+export function isFile(value: unknown): value is File {
+  return value instanceof File || baseGetTag(value) === '[object File]'
+}
+
+export function isFormData(value: unknown): value is FormData {
+  return value instanceof FormData || baseGetTag(value) === '[object FormData]'
 }
 
 export function isNumber(value: unknown): value is number {
-  return typeof value === 'number'
+  return _isNumber(value)
 }
 
-export function isArray(value: unknown): value is unknown[] {
-  return Array.isArray(value)
+export function isObject(value: unknown): value is Record<string, unknown> {
+  return _isPlainObject(value)
 }
 
-export function isObject(value: unknown): value is Record<string, any> {
-  return typeof value === 'object' && value !== null && !isArray(value)
+export function isRequest(value: unknown): value is Request {
+  return value instanceof Request || baseGetTag(value) === '[object Request]'
 }
 
-export function isFile(value: unknown): value is File {
-  return value instanceof File
+export function isResponse(value: unknown): value is Response {
+  return value instanceof Response || baseGetTag(value) === '[object Response]'
 }
 
-// eslint-disable-next-line @typescript-eslint/ban-types
-export function isFunction(value: unknown): value is Function {
-  return typeof value === 'function'
+export function isString(value: unknown): value is string {
+  return _isString(value)
 }

package/lib/validation/validators/maxLength.ts

@@ -1,7 +1,7 @@
-import { isArray, isString } from '../../support/Utils'
+import { isString } from '../../support/Utils'
 
 export function maxLength(value: unknown, length: number): boolean {
-  if (!(isString(value) || isArray(value))) {
+  if (!(isString(value) || Array.isArray(value))) {
     return false
   }
 

package/lib/validation/validators/maxValue.ts

@@ -1,7 +1,7 @@
-import { isNumber, isString } from '../../support/Utils'
+import { isDate, isNumber, isString } from '../../support/Utils'
 
 export function maxValue(value: unknown, max: number) {
-  if (isNumber(value) || isString(value) || value instanceof Date) {
+  if (isNumber(value) || isString(value) || isDate(value)) {
     return +value <= max
   }
 

package/lib/validation/validators/minLength.ts

@@ -1,7 +1,7 @@
-import { isArray, isString } from '../../support/Utils'
+import { isString } from '../../support/Utils'
 
 export function minLength(value: unknown, length: number): boolean {
-  if (!(isString(value) || isArray(value))) {
+  if (!(isString(value) || Array.isArray(value))) {
     return false
   }