@globalbrain/sefirot 3.49.0 → 4.0.0-0

package/lib/components/STableCellPills.vue

@@ -1,28 +1,18 @@
 <script setup lang="ts">
-import { computed } from 'vue'
 import { type TableCellPillItem } from '../composables/Table'
 import STableCellPill from './STableCellPill.vue'
 
-const props = defineProps<{
-  value?: any
-  record?: any
-  pills: TableCellPillItem[] | ((value: any, record: any) => TableCellPillItem[])
+defineProps<{
+  pills: TableCellPillItem[]
 }>()
-
-const items = computed(() => {
-  return Array.isArray(props.pills)
-    ? props.pills
-    : props.pills(props.value, props.record)
-})
 </script>
 
 <template>
   <div class="STableCellPills">
     <STableCellPill
-      v-for="item in items"
+      v-for="item in pills"
       :key="item.label"
-      :value="item.label"
-      :record="record"
+      :pill="item.label"
       :color="item.color"
     />
   </div>

package/lib/components/STableCellState.vue

@@ -2,7 +2,7 @@
 import SState, { type Mode } from './SState.vue'
 
 defineProps<{
-  value?: string
+  state?: string
   mode?: Mode
 }>()
 </script>
@@ -10,10 +10,10 @@ defineProps<{
 <template>
   <div class="STableCellState" :class="[mode ?? 'neutral']">
     <SState
-      v-if="value"
+      v-if="state"
       size="mini"
       :mode="mode"
-      :label="value"
+      :label="state"
     />
   </div>
 </template>

package/lib/components/STableCellText.vue

@@ -1,72 +1,44 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-import SIcon from './SIcon.vue'
+import { type Component, computed } from 'vue'
+import { type TableCellValueColor } from '../composables/Table'
 import SLink from './SLink.vue'
 
-export type Color =
-  | 'default'
-  | 'mute'
-  | 'neutral'
-  | 'info'
-  | 'success'
-  | 'warning'
-  | 'danger'
-  | 'soft'
-
 const props = defineProps<{
   value?: any
-  record: any
+  record?: any
   align?: 'left' | 'center' | 'right'
-  icon?: any
-  getter?: string | null | ((value: any, record: any) => string | null)
-  color?: Color | ((value: any, record: any) => Color)
-  iconColor?: Color | ((value: any, record: any) => Color)
-  link?: string | null | ((value: any, record: any) => string)
+  icon?: Component
+  text?: string | null
+  color?: TableCellValueColor
+  iconColor?: TableCellValueColor
+  link?: string | null
   onClick?(value: any, record: any): void
 }>()
 
-const _value = computed(() => {
-  if (props.getter === undefined) {
-    return props.value
-  }
+const _value = computed(() => props.text ?? props.value)
+const _color = computed(() => props.color ?? 'neutral')
+const _iconColor = computed(() => props.iconColor ?? _color.value)
 
-  return typeof props.getter === 'function'
-    ? props.getter(props.value, props.record)
-    : props.getter
-})
-
-const _link = computed(() => {
-  return typeof props.link === 'function'
-    ? props.link(props.value, props.record)
-    : props.link
-})
-
-const _color = computed(() => {
-  return typeof props.color === 'function'
-    ? props.color(props.value, props.record)
-    : props.color ?? 'neutral'
-})
-
-const _iconColor = computed(() => {
-  return typeof props.iconColor === 'function'
-    ? props.iconColor(props.value, props.record)
-    : props.iconColor ?? _color.value
-})
+const classes = computed(() => [
+  props.align ?? 'left',
+  _color,
+  { link: !!(props.link || props.onClick) }
+])
 </script>
 
 <template>
-  <div class="STableCellText" :class="[align ?? 'left', { link: link || onClick }, _color]">
+  <div class="STableCellText" :class="classes">
     <SLink
-      v-if="_value"
+      v-if="_value != null"
       class="container"
-      :href="_link"
+      :href="link"
       :role="onClick ? 'button' : null"
       @click="() => onClick?.(value, record)"
     >
-      <div v-if="icon" class="icon" :class="[_iconColor ?? _color]">
-        <SIcon :icon="icon" class="svg" />
+      <div v-if="icon" class="icon" :class="_iconColor">
+        <component :is="icon" class="svg" />
       </div>
-      <div class="text" :class="[_color]">
+      <div class="text" :class="_color">
         {{ _value }}
       </div>
     </SLink>

package/lib/components/STableColumn.vue

@@ -1,11 +1,9 @@
 <script setup lang="ts">
-import IconDotsThree from '@iconify-icons/ph/dots-three'
 import { computed, nextTick, ref, unref, watch } from 'vue'
 import { type DropdownSection } from '../composables/Dropdown'
 import { useFlyout } from '../composables/Flyout'
-import { isArray } from '../support/Utils'
 import SDropdown from './SDropdown.vue'
-import SIcon from './SIcon.vue'
+import IconDotsThree from '~icons/ph/dots-three'
 
 const props = withDefaults(defineProps<{
   name: string
@@ -40,8 +38,8 @@ const active = computed(() => {
 
     const selected = unref(item.selected)
 
-    if (!isArray(selected)) {
-      return selected !== null
+    if (!Array.isArray(selected)) {
+      return selected != null
     }
 
     if (!selected.length) {
@@ -130,7 +128,7 @@ function stopDialogPositionListener() {
 
         <div v-if="dropdown" class="action" ref="container">
           <button class="button" :class="{ active: buttonActive }" @click="toggle">
-            <SIcon :icon="IconDotsThree" class="icon" />
+            <IconDotsThree class="icon" />
           </button>
 
           <transition name="fade">

package/lib/components/STableFooter.vue

@@ -1,9 +1,8 @@
 <script setup lang="ts">
-import IconCaretLeft from '@iconify-icons/ph/caret-left-bold'
-import IconCaretRight from '@iconify-icons/ph/caret-right-bold'
 import { computed } from 'vue'
 import { format } from '../support/Num'
-import SIcon from './SIcon.vue'
+import IconCaretLeft from '~icons/ph/caret-left-bold'
+import IconCaretRight from '~icons/ph/caret-right-bold'
 
 const props = defineProps<{
   total?: number | null
@@ -44,10 +43,10 @@ const hasNext = computed(() => {
 
       <div v-if="onPrev && onNext" class="actions">
         <button class="button prev" :class="{ active: hasPrev }" @click="() => hasPrev && onPrev?.()">
-          <SIcon :icon="IconCaretLeft" class="icon" />
+          <IconCaretLeft class="icon" />
         </button>
         <button class="button next" :class="{ active: hasNext }" @click="() => hasNext && onNext?.()">
-          <SIcon :icon="IconCaretRight" class="icon" />
+          <IconCaretRight class="icon" />
         </button>
       </div>
     </div>

package/lib/components/STableHeader.vue

@@ -1,23 +1,19 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { type TableHeaderAction, type TableMenu } from '../composables/Table'
+import { type TableMenu } from '../composables/Table'
 import { format } from '../support/Num'
-import { isNullish } from '../support/Utils'
-import STableHeaderActions from './STableHeaderActions.vue'
 import STableHeaderMenu from './STableHeaderMenu.vue'
 
 const props = defineProps<{
   total?: number | null
-  reset?: boolean
   menu?: TableMenu[] | TableMenu[][]
-  actions?: TableHeaderAction[]
   borderless?: boolean
   onReset?(): void
   selected?: unknown[]
 }>()
 
 const stats = computed(() => {
-  if (isNullish(props.total)) {
+  if (props.total == null) {
     return null
   }
 
@@ -25,13 +21,6 @@ const stats = computed(() => {
     ? `${format(props.selected.length)} of ${props.total} selected`
     : `${format(props.total)} ${props.total > 1 ? 'records' : 'record'}`
 })
-
-// deprecated `reset` prop in favor of `actions`, remove this in next major version
-const resetAction = computed(() => {
-  return props.reset
-    ? [{ label: 'Reset filters', onClick: props.onReset!, type: 'info' }] // onReset is required when reset is true
-    : []
-})
 </script>
 
 <template>
@@ -41,12 +30,6 @@ const resetAction = computed(() => {
         <div v-if="stats" class="stats">
           {{ stats }}
         </div>
-        <div v-if="actions?.length" class="actions">
-          <STableHeaderActions :actions="actions" />
-        </div>
-        <div v-else-if="resetAction.length">
-          <STableHeaderActions :actions="resetAction" />
-        </div>
       </div>
       <div v-if="menu && menu.length" class="menu">
         <STableHeaderMenu :menu="menu" />

package/lib/components/STableHeaderMenu.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { type TableMenu } from '../composables/Table'
-import { isArray } from '../support/Utils'
 import STableHeaderMenuItem from './STableHeaderMenuItem.vue'
 
 const props = defineProps<{
@@ -9,7 +8,7 @@ const props = defineProps<{
 }>()
 
 const normalizedMenu = computed(() => {
-  return isArray(props.menu[0])
+  return Array.isArray(props.menu[0])
     ? props.menu as TableMenu[][]
     : [props.menu] as TableMenu[][]
 })

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
+  }
 }