@globalbrain/sefirot 2.24.0 → 2.26.0

package/lib/components/STableCell.vue

@@ -4,6 +4,7 @@ import type { TableCell } from '../composables/Table'
 import STableCellAvatar from './STableCellAvatar.vue'
 import STableCellAvatars from './STableCellAvatars.vue'
 import STableCellDay from './STableCellDay.vue'
+import STableCellEmpty from './STableCellEmpty.vue'
 import STableCellPill from './STableCellPill.vue'
 import STableCellPills from './STableCellPills.vue'
 import STableCellText from './STableCellText.vue'
@@ -41,6 +42,7 @@ const computedCell = computed<TableCell | undefined>(() =>
       v-else-if="computedCell.type === 'day'"
       :value="value"
       :record="record"
+      :getter="computedCell.value"
       :format="computedCell.format"
       :color="computedCell.color"
     />
@@ -73,6 +75,9 @@ const computedCell = computed<TableCell | undefined>(() =>
       :avatars="computedCell.avatars"
       :color="computedCell.color"
     />
+    <STableCellEmpty
+      v-else-if="computedCell.type === 'empty'"
+    />
     <component
       v-else-if="computedCell.type === 'component'"
       :is="computedCell.component"

package/lib/components/STableCellAvatar.vue

@@ -6,19 +6,32 @@ import SLink from './SLink.vue'
 const props = defineProps<{
   value?: any
   record?: any
-  image?(value: any, record: any): string | undefined
-  name?(value: any, record: any): string
-  link?(value: any, record: any): string
+  image?: string | null | ((value: any, record: any) => string | null | undefined)
+  name?: string | null | ((value: any, record: any) => string | null | undefined)
+  link?: string | null | ((value: any, record: any) => string | null | undefined)
   color?: 'neutral' | 'soft' | 'mute'
 }>()
 
-const _image = computed(() => props.image?.(props.value, props.record))
-const _name = computed(() => props.name?.(props.value, props.record))
+const _image = computed(() => resolve(props.image))
+const _name = computed(() => resolve(props.name))
+const _link = computed(() => resolve(props.link))
+
+function resolve(
+  value?: string | null | ((value: any, record: any) => string | null | undefined)
+) {
+  if (value == null || value === '') {
+    return null
+  }
+
+  return typeof value === 'function'
+    ? value(props.value, props.record)
+    : value
+}
 </script>
 
 <template>
   <div class="STableCellAvatar" :class="[{ link }, color]">
-    <SLink class="container" :href="link?.(value, record)">
+    <SLink class="container" :href="_link ?? undefined">
       <div v-if="_image" class="avatar">
         <SAvatar size="mini" :avatar="_image" :name="_name" />
       </div>

package/lib/components/STableCellAvatars.vue

@@ -6,12 +6,14 @@ import SAvatar from './SAvatar.vue'
 const props = defineProps<{
   value?: any
   record?: any
-  avatars(value: any, record: any): TableCellAvatarsOption[]
+  avatars: TableCellAvatarsOption[] | ((value: any, record: any) => TableCellAvatarsOption[])
   color?: 'neutral' | 'soft' | 'mute'
 }>()
 
 const _avatars = computed(() => {
-  return props.avatars(props.value, props.record)
+  return typeof props.avatars === 'function'
+    ? props.avatars(props.value, props.record)
+    : props.avatars
 })
 
 const displayAvatars = computed(() => {
@@ -28,10 +30,10 @@ const names = computed(() => {
   }
 
   if (_avatars.value.length === 2) {
-    return `${_avatars.value[0].name} and ${_avatars.value[1].name}`
+    return `${_avatars.value[0].name}, ${_avatars.value[1].name}`
   }
 
-  return `${_avatars.value[0].name} +${_avatars.value.length - 1}`
+  return `${_avatars.value[0].name}, ${_avatars.value[1].name} +${_avatars.value.length - 1}`
 })
 </script>
 

package/lib/components/STableCellDay.vue

@@ -1,18 +1,24 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 import type { Day } from '../support/Day'
 
-defineProps<{
+const props = defineProps<{
   value?: Day | null
   record: any
+  getter?: Day | null
   format?: string
   color?: 'neutral' | 'soft' | 'mute'
 }>()
+
+const _value = computed(() => {
+  return props.getter ? props.getter : props.value
+})
 </script>
 
 <template>
   <div class="STableCellDay" :class="[color ?? 'neutral']">
-    <div v-if="value" class="value">
-      {{ value.format(format ?? 'YYYY / MM / DD HH:mm:ss') }}
+    <div v-if="_value" class="value">
+      {{ _value.format(format ?? 'YYYY / MM / DD HH:mm:ss') }}
     </div>
   </div>
 </template>

package/lib/components/STableCellEmpty.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="STableCellEmpty" />
+</template>
+
+<style scoped lang="postcss">
+.STableCellEmpty {
+  min-height: 40px;
+}
+</style>

package/lib/components/STableCellPill.vue

@@ -7,8 +7,8 @@ export type Color = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'dange
 const props = defineProps<{
   value?: any
   record: any
-  getter?: string | ((value: any) => string)
-  color?: Color | ((value: any) => Color)
+  getter?: string | ((value: any, record: any) => string)
+  color?: Color | ((value: any, record: any) => Color)
 }>()
 
 const _value = computed(() => {
@@ -18,7 +18,7 @@ const _value = computed(() => {
 
   return typeof props.getter === 'string'
     ? props.getter
-    : props.getter(props.value)
+    : props.getter(props.value, props.record)
 })
 
 const _color = computed(() => {
@@ -28,7 +28,7 @@ const _color = computed(() => {
 
   return typeof props.color === 'string'
     ? props.color
-    : props.color(props.value)
+    : props.color(props.value, props.record)
 })
 </script>
 
@@ -38,7 +38,7 @@ const _color = computed(() => {
       v-if="_value"
       size="mini"
       :mode="_color"
-      :label="value"
+      :label="_value"
     />
   </div>
 </template>

package/lib/components/STableCellText.vue

@@ -16,7 +16,7 @@ const props = defineProps<{
   value?: any
   record: any
   icon?: any
-  getter?: string | ((value: any, record: any) => string)
+  getter?: string | null | ((value: any, record: any) => string | null)
   color?: Color | ((value: any, record: any) => Color)
   iconColor?: Color | ((value: any, record: any) => Color)
   link?(value: any, record: any): string
@@ -28,9 +28,9 @@ const _value = computed(() => {
     return props.value
   }
 
-  return typeof props.getter === 'string'
-    ? props.getter
-    : props.getter(props.value, props.record)
+  return typeof props.getter === 'function'
+    ? props.getter(props.value, props.record)
+    : props.getter
 })
 
 const _color = computed(() => {

package/lib/components/STableColumn.vue

@@ -9,7 +9,7 @@ import SIcon from './SIcon.vue'
 
 const props = withDefaults(defineProps<{
   name: string
-  label: string
+  label?: string
   className?: string
   dropdown?: DropdownSection[]
   hasHeader: boolean
@@ -165,6 +165,7 @@ function stopDialogPositionListener() {
 .container {
   display: flex;
   justify-content: space-between;
+  min-height: 40px;
   padding-left: 16px;
 }
 

package/lib/composables/Form.ts

@@ -1,10 +1,7 @@
-import type { Ref } from 'vue'
-import { computed } from 'vue'
+import { type Ref, computed, reactive, toRefs } from 'vue'
 import { useSnackbars } from '../stores/Snackbars'
-import type { UseDataInput } from './Data'
-import { useData } from './Data'
-import type { Validation } from './Validation'
-import { useValidation } from './Validation'
+import { type UseDataInput, useData } from './Data'
+import { type Validation, useValidation } from './Validation'
 
 export interface Form<T extends Record<string, any>> {
   data: T
@@ -15,25 +12,49 @@ export interface Form<T extends Record<string, any>> {
   validateAndNotify(): Promise<boolean>
 }
 
-export interface UseFormOptions<T extends Record<string, any>> {
-  data: UseDataInput<T>
-  rules?: Record<string, any> | ((state: T) => Record<string, any>)
+export type ComputedData<T extends Record<string, () => any>> = {
+  [K in keyof T]: ReturnType<T[K]>
+}
+
+export type AllData<
+  D extends Record<string, any>,
+  C extends Record<string, () => any>
+> = D & ComputedData<C>
+
+export interface UseFormOptions<
+  D extends Record<string, any>,
+  C extends Record<string, () => any>
+> {
+  data: UseDataInput<D>
+  computed?: (data: D) => C
+  rules?: Record<string, any> | ((data: AllData<D, C>) => Record<string, any>)
 }
 
 export function useForm<
-  T extends Record<string, any>
->(options: UseFormOptions<T>): Form<T> {
+  D extends Record<string, any> = Record<string, any>,
+  C extends Record<string, () => any> = Record<string, () => any>
+>(options: UseFormOptions<D, C>): Form<AllData<D, C>> {
   const snackbars = useSnackbars()
 
   const data = useData(options.data)
+  const dataStateRef = toRefs(data.state)
+
+  const computedData = options.computed
+    ? createComputedData(options.computed(data.state))
+    : {}
+
+  const allData = reactive({
+    ...dataStateRef,
+    ...computedData
+  }) as AllData<D, C>
 
   const rules = computed(() => {
     return options.rules
-      ? typeof options.rules === 'function' ? options.rules(data.state) : options.rules
+      ? typeof options.rules === 'function' ? options.rules(allData) : options.rules
       : {}
   })
 
-  const validation = useValidation(data.state, rules)
+  const validation = useValidation(allData, rules)
 
   function init(): void {
     data.init()
@@ -62,7 +83,7 @@ export function useForm<
   }
 
   return {
-    data: data.state,
+    data: allData,
     init,
     reset,
     validation,
@@ -70,3 +91,15 @@ export function useForm<
     validateAndNotify
   }
 }
+
+function createComputedData<
+  C extends Record<string, () => any>
+>(input: C): ComputedData<C> {
+  const computedData = {} as any
+
+  for (const [key, fn] of Object.entries(input)) {
+    computedData[key] = computed(() => fn())
+  }
+
+  return computedData
+}

package/lib/composables/Table.ts

@@ -1,12 +1,16 @@
 import type { MaybeRef } from '@vueuse/core'
 import type { Component } from 'vue'
 import { reactive } from 'vue'
+import type { Day } from '../support/Day'
 import type { DropdownSection } from './Dropdown'
 
-export interface Table {
-  orders: string[]
-  columns: TableColumns
-  records?: Record<string, any>[] | null
+export interface Table<
+  O extends string = any,
+  R extends Record<string, any> = any
+> {
+  orders: O[]
+  columns: TableColumns<O, R>
+  records?: R[] | null
   header?: boolean
   footer?: boolean
   total?: number | null
@@ -20,16 +24,21 @@ export interface Table {
   onReset?(): void
 }
 
-export interface TableColumns {
-  [name: string]: TableColumn
+export type TableColumns<
+  O extends string,
+  R extends Record<string, any>
+> = {
+  [K in O]: K extends keyof R
+    ? TableColumn<R[K], R>
+    : TableColumn<undefined, R>
 }
 
-export interface TableColumn {
-  label: string
+export interface TableColumn<V, R> {
+  label?: string
   className?: string
   dropdown?: DropdownSection[]
   resizable?: boolean
-  cell?: TableCell | ((value: any, record: any) => TableCell)
+  cell?: TableCell | ((value: V, record: R) => TableCell)
 }
 
 export type TableCell =
@@ -39,9 +48,18 @@ export type TableCell =
   | TableCellPills
   | TableCellAvatar
   | TableCellAvatars
+  | TableCellEmpty
   | TableCellComponent
 
-export type TableCellType = 'text' | 'day' | 'pill' | 'pills' | 'avatar' | 'avatars' | 'component'
+export type TableCellType =
+  | 'text'
+  | 'day'
+  | 'pill'
+  | 'pills'
+  | 'avatar'
+  | 'avatars'
+  | 'empty'
+  | 'component'
 
 export interface TableCellBase {
   type: TableCellType
@@ -50,7 +68,7 @@ export interface TableCellBase {
 export interface TableCellText extends TableCellBase {
   type: 'text'
   icon?: any
-  value?: string | ((value: any, record: any) => string)
+  value?: string | null | ((value: any, record: any) => string | null)
   link?(value: any, record: any): string
   color?: TableCellTextColor | ((value: any, record: any) => TableCellTextColor)
   iconColor?: TableCellTextColor | ((value: any, record: any) => TableCellTextColor)
@@ -68,14 +86,15 @@ export type TableCellTextColor =
 
 export interface TableCellDay extends TableCellBase {
   type: 'day'
+  value?: Day | null
   format?: string
   color?: 'neutral' | 'soft' | 'mute'
 }
 
 export interface TableCellPill extends TableCellBase {
   type: 'pill'
-  value?: string | ((value: any) => string)
-  color?: TableCellPillColor | ((value: any) => TableCellPillColor)
+  value?: string | ((value: any, record: any) => string)
+  color?: TableCellPillColor | ((value: any, record: any) => TableCellPillColor)
 }
 
 export type TableCellPillColor = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
@@ -92,33 +111,37 @@ export interface TableCellPillItem {
 
 export interface TableCellAvatar extends TableCellBase {
   type: 'avatar'
-  image?(value: any, record: any): string | undefined
-  name?(value: any, record: any): string
-  link?(value: any, record: any): string
+  image?: string | null | ((value: any, record: any) => string | null | undefined)
+  name?: string | null | ((value: any, record: any) => string | null | undefined)
+  link?: string | null | ((value: any, record: any) => string | null | undefined)
   color?: 'neutral' | 'soft' | 'mute'
 }
 
 export interface TableCellAvatars extends TableCellBase {
   type: 'avatars'
-  avatars(value: any, record: any): TableCellAvatarsOption[]
+  avatars: TableCellAvatarsOption[] | ((value: any, record: any) => TableCellAvatarsOption[])
   color?: 'neutral' | 'soft' | 'mute'
 }
 
+export interface TableCellAvatarsOption {
+  image?: string | null
+  name?: string | null
+}
+
+export interface TableCellEmpty extends TableCellBase {
+  type: 'empty'
+}
+
 export interface TableCellComponent extends TableCellBase {
   type: 'component'
   component: Component
   props?: Record<string, any>
 }
 
-export interface TableCellAvatarsOption {
-  image?: string
-  name?: string
-}
-
-export interface UseTableOptions {
-  orders: MaybeRef<string[]>
-  columns: MaybeRef<TableColumns>
-  records?: MaybeRef<Record<string, any>[] | null | undefined>
+export interface UseTableOptions<O extends string, R extends Record<string, any>> {
+  orders: MaybeRef<O[]>
+  columns: MaybeRef<TableColumns<O, R>>
+  records?: MaybeRef<R[] | null | undefined>
   header?: MaybeRef<boolean | undefined>
   footer?: MaybeRef<boolean | undefined>
   total?: MaybeRef<number | null | undefined>
@@ -132,6 +155,8 @@ export interface UseTableOptions {
   onReset?(): void
 }
 
-export function useTable(options: UseTableOptions): Table {
-  return reactive(options)
+export function useTable<O extends string, R extends Record<string, any>>(
+  options: UseTableOptions<O, R>
+): Table<O, R> {
+  return reactive(options) as Table<O, R>
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@globalbrain/sefirot",
-  "version": "2.24.0",
+  "version": "2.26.0",
   "packageManager": "pnpm@7.26.2",
   "description": "Vue Components for Global Brain Design System.",
   "author": "Kia Ishii <ka.ishii@globalbrains.com>",
@@ -39,7 +39,7 @@
     "postcss-nested": "^6.0.0",
     "typescript": "^4.9.4",
     "v-calendar": "^3.0.0-alpha.8",
-    "vue": "^3.2.45",
+    "vue": "^3.2.47",
     "vue-router": "^4.1.6"
   },
   "dependencies": {
@@ -47,7 +47,7 @@
   },
   "devDependencies": {
     "@globalbrain/eslint-config": "^1.3.0",
-    "@histoire/plugin-vue": "^0.12.4",
+    "@histoire/plugin-vue": "^0.15.8",
     "@iconify-icons/ph": "^1.2.3",
     "@iconify/vue": "^4.0.2",
     "@types/body-scroll-lock": "^3.1.0",
@@ -67,7 +67,7 @@
     "eslint": "^8.35.0",
     "execa": "^5.1.1",
     "fuse.js": "^6.6.2",
-    "histoire": "^0.12.4",
+    "histoire": "^0.15.8",
     "lodash-es": "^4.17.21",
     "markdown-it": "^13.0.1",
     "normalize.css": "^8.0.1",
@@ -80,7 +80,7 @@
     "vite": "^4.1.4",
     "vitepress": "1.0.0-alpha.50",
     "vitest": "^0.29.2",
-    "vue": "^3.2.45",
+    "vue": "^3.2.47",
     "vue-router": "^4.1.6",
     "vue-tsc": "^1.2.0"
   },