@globalbrain/sefirot 2.3.0 → 2.5.0

package/lib/components/SDropdownSectionFilter.vue

@@ -125,7 +125,6 @@ function handleClick(option: DropdownSectionFilterOption, value: string | number
 
 .button {
   display: flex;
-  align-items: center;
   border-radius: 6px;
   padding: 0 8px;
   width: 100%;
@@ -145,6 +144,7 @@ function handleClick(option: DropdownSectionFilterOption, value: string | number
 
 .checkbox {
   display: block;
+  padding-top: 9px;
 }
 
 .checkbox-box {
@@ -177,6 +177,11 @@ function handleClick(option: DropdownSectionFilterOption, value: string | number
   }
 }
 
+.option-item {
+  padding-left: 8px;
+  width: 100%;
+}
+
 .empty {
   padding: 16px;
   font-size: 12px;

package/lib/components/SDropdownSectionFilterItemAvatar.vue

@@ -9,23 +9,32 @@ defineProps<{
 
 <template>
   <span class="SDropdownSectionFilterItemAvatar">
-    <SAvatar size="nano" :avatar="image" :name="label" />
+    <div class="avatar">
+      <SAvatar size="nano" :avatar="image" :name="label" />
+    </div>
     <span class="name">{{ label }}</span>
   </span>
 </template>
 
 <style scoped lang="postcss">
 .SDropdownSectionFilterItemAvatar {
-  display: inline-flex;
+  display: flex;
   align-items: center;
-  padding-left: 8px;
+  padding-right: 16px;
   min-height: 32px;
 }
 
+.avatar {
+  flex-shrink: 0;
+}
+
 .name {
   display: inline-block;
   padding-left: 8px;
   font-size: 12px;
   font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 </style>

package/lib/components/SDropdownSectionFilterItemText.vue

@@ -6,14 +6,18 @@ defineProps<{
 
 <template>
   <span class="SDropdownSectionFilterItemText">
-    {{ label }}
+    <span class="text">{{ label }}</span>
   </span>
 </template>
 
 <style scoped lang="postcss">
 .SDropdownSectionFilterItemText {
-  padding-left: 8px;
-  line-height: 32px;
+  display: inline-block;
+  padding: 6px 0;
+}
+
+.text {
+  line-height: 20px;
   font-size: 12px;
   font-weight: 500;
 }

package/lib/components/STableCell.vue

@@ -57,6 +57,13 @@ defineProps<{
       :avatars="cell.avatars"
       :color="cell.color"
     />
+    <component
+      v-else-if="cell.type === 'component'"
+      :is="cell.component"
+      :value="value"
+      :record="record"
+      v-bind="cell.props"
+    />
   </div>
 </template>
 

package/lib/composables/Data.ts

@@ -0,0 +1,108 @@
+import { watchOnce } from '@vueuse/core'
+import cloneDeep from 'lodash-es/cloneDeep'
+import { WatchSource, reactive } from 'vue'
+import { isObject } from '../support/Utils'
+
+export interface Data<T extends Record<string, any>> {
+  state: 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, 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)
+
+  handleDefs(defs, reactiveState)
+
+  function init(): void {
+    Object.assign(reactiveState, initialState)
+  }
+
+  return {
+    state: reactiveState,
+    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) => {
+      (state as any)[key] = def.cb(value)
+    })
+  })
+}
+
+function def<T>(
+  value: any,
+  source: WatchSource<T>,
+  cb: (value: Exclude<T, undefined>) => void
+): Def {
+  return {
+    __isDef: true,
+    value,
+    source,
+    cb
+  }
+}
+
+function isDef(value: any): boolean {
+  return isObject(value) ? !!value.__isDef : false
+}

package/lib/composables/Form.ts

@@ -1,6 +1,6 @@
-import cloneDeep from 'lodash-es/cloneDeep'
-import { Ref, computed, reactive } from 'vue'
+import { Ref, computed } from 'vue'
 import { useSnackbars } from '../stores/Snackbars'
+import { UseDataInput, useData } from './Data'
 import { Validation, useValidation } from './Validation'
 
 export interface Form<T extends Record<string, any>> {
@@ -13,7 +13,7 @@ export interface Form<T extends Record<string, any>> {
 }
 
 export interface UseFormOptions<T extends Record<string, any>> {
-  data: T
+  data: UseDataInput<T>
   rules?: Record<string, any> | ((state: T) => Record<string, any>)
 }
 
@@ -22,20 +22,18 @@ export function useForm<
 >(options: UseFormOptions<T>): Form<T> {
   const snackbars = useSnackbars()
 
-  const initialData = cloneDeep(options.data)
-
-  const data = reactive(options.data)
+  const data = useData(options.data)
 
   const rules = computed(() => {
     return options.rules
-      ? typeof options.rules === 'function' ? options.rules(data) : options.rules
+      ? typeof options.rules === 'function' ? options.rules(data.state) : options.rules
       : {}
   })
 
-  const validation = useValidation(data, rules)
+  const validation = useValidation(data.state, rules)
 
   function init(): void {
-    Object.assign(data, initialData)
+    data.init()
     reset()
   }
 
@@ -61,7 +59,7 @@ export function useForm<
   }
 
   return {
-    data,
+    data: data.state,
     init,
     reset,
     validation,

package/lib/composables/Table.ts

@@ -1,5 +1,5 @@
 import { MaybeRef } from '@vueuse/core'
-import { reactive } from 'vue'
+import { Component, reactive } from 'vue'
 import { DropdownSection } from './Dropdown'
 
 export interface Table {
@@ -34,8 +34,9 @@ export type TableCell =
   | TableCellPill
   | TableCellAvatar
   | TableCellAvatars
+  | TableCellComponent
 
-export type TableCellType = 'text' | 'day' | 'pill' | 'avatar' | 'avatars'
+export type TableCellType = 'text' | 'day' | 'pill' | 'avatar' | 'avatars' | 'component'
 
 export interface TableCellBase {
   type: TableCellType
@@ -78,6 +79,12 @@ export interface TableCellAvatars extends TableCellBase {
   color?: 'neutral' | 'soft' | 'mute'
 }
 
+export interface TableCellComponent extends TableCellBase {
+  type: 'component'
+  component: Component
+  props?: Record<string, any>
+}
+
 export interface TableCellAvatarsOption {
   image?: string
   name?: string

package/lib/support/Utils.ts

@@ -13,3 +13,7 @@ export function isNumber(value: unknown): value is number {
 export function isArray(value: unknown): value is unknown[] {
   return Array.isArray(value)
 }
+
+export function isObject(value: unknown): value is Record<string, any> {
+  return typeof value === 'object' && value !== null && !isArray(value)
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@globalbrain/sefirot",
-  "version": "2.3.0",
+  "version": "2.5.0",
   "description": "Vue Components for Global Brain Design System.",
   "author": "Kia Ishii <ka.ishii@globalbrains.com>",
   "license": "MIT",