@globalbrain/sefirot 2.5.1 → 2.7.0

package/lib/components/STableCellText.vue

@@ -3,13 +3,21 @@ import { computed } from 'vue'
 import SIcon from './SIcon.vue'
 import SLink from './SLink.vue'
 
+export type Color =
+  | 'neutral'
+  | 'soft'
+  | 'mute'
+  | 'info'
+  | 'warning'
+  | 'danger'
+
 const props = defineProps<{
   value?: any
   record: any
   icon?: any
   getter?: string | ((value: any) => string)
-  color?: 'neutral' | 'soft' | 'mute'
-  iconColor?: 'neutral' | 'soft' | 'mute'
+  color?: Color | ((value: any, record: any) => Color)
+  iconColor?: Color | ((value: any, record: any) => Color)
   link?(value: any, record: any): string
 }>()
 
@@ -22,15 +30,27 @@ const _value = computed(() => {
     ? props.getter
     : props.getter(props.value)
 })
+
+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 ?? 'neutral'
+})
 </script>
 
 <template>
-  <div class="STableCellText" :class="[{ link }, color ?? 'neutral']">
+  <div class="STableCellText" :class="[{ link }, _color]">
     <SLink v-if="_value" class="container" :href="link?.(value, record)">
-      <div v-if="icon" class="icon" :class="[iconColor ?? color ?? 'neutral']">
+      <div v-if="icon" class="icon" :class="[_iconColor ?? _color]">
         <SIcon :icon="icon" class="svg" />
       </div>
-      <div class="text" :class="[color ?? 'neutral']">
+      <div class="text" :class="[_color]">
         {{ _value }}
       </div>
     </SLink>
@@ -39,13 +59,13 @@ const _value = computed(() => {
 
 <style scoped lang="postcss">
 .STableCellText {
-  padding: 8px 16px;
   min-height: 40px;
 }
 
 .container {
   display: flex;
   gap: 4px;
+  padding: 8px 16px;
 }
 
 .text {
@@ -60,6 +80,9 @@ const _value = computed(() => {
   &.neutral { color: var(--c-text-1); }
   &.soft    { color: var(--c-text-2); }
   &.mute    { color: var(--c-text-3); }
+  &.info    { color: var(--c-info); }
+  &.warning { color: var(--c-warning); }
+  &.danger  { color: var(--c-danger); }
 
   .STableCellText.link &       { color: var(--c-info); }
   .STableCellText.link:hover & { color: var(--c-info-dark); }
@@ -70,6 +93,12 @@ const _value = computed(() => {
   .STableCellText.link:hover &.soft    { color: var(--c-info); }
   .STableCellText.link &.mute          { color: var(--c-text-3); }
   .STableCellText.link:hover &.mute    { color: var(--c-info); }
+  .STableCellText.link &.info          { color: var(--c-info); }
+  .STableCellText.link:hover &.info    { color: var(--c-info-dark); }
+  .STableCellText.link &.warning       { color: var(--c-warning); }
+  .STableCellText.link:hover &.warning { color: var(--c-warning-darker); }
+  .STableCellText.link &.danger        { color: var(--c-danger); }
+  .STableCellText.link:hover &.danger  { color: var(--c-danger-dark); }
 }
 
 .icon {
@@ -95,6 +124,12 @@ const _value = computed(() => {
   .STableCellText.link:hover &.soft    { color: var(--c-info); }
   .STableCellText.link &.mute          { color: var(--c-text-3); }
   .STableCellText.link:hover &.mute    { color: var(--c-info); }
+  .STableCellText.link &.info          { color: var(--c-info); }
+  .STableCellText.link:hover &.info    { color: var(--c-info-dark); }
+  .STableCellText.link &.warning       { color: var(--c-warning); }
+  .STableCellText.link:hover &.warning { color: var(--c-warning-dark); }
+  .STableCellText.link &.danger        { color: var(--c-danger); }
+  .STableCellText.link:hover &.danger  { color: var(--c-danger-dark); }
 }
 
 .svg {

package/lib/components/STableFooter.vue

@@ -6,9 +6,9 @@ import { format } from '../support/Num'
 import SIcon from './SIcon.vue'
 
 const props = defineProps<{
-  total?: number
-  page?: number
-  perPage?: number
+  total?: number | null
+  page?: number | null
+  perPage?: number | null
   borderless?: boolean
   onPrev?(): void
   onNext?(): void

package/lib/components/STableHeader.vue

@@ -2,7 +2,7 @@
 import { format } from '../support/Num'
 
 defineProps<{
-  total?: number
+  total?: number | null
   reset?: boolean
   borderless?: boolean
   onReset?(): void

package/lib/composables/Data.ts

@@ -1,7 +1,7 @@
 import { watchOnce } from '@vueuse/core'
 import cloneDeep from 'lodash-es/cloneDeep'
 import { WatchSource, reactive } from 'vue'
-import { isObject } from '../support/Utils'
+import { isNullish, isObject } from '../support/Utils'
 
 export interface Data<T extends Record<string, any>> {
   state: T
@@ -25,7 +25,7 @@ export interface UseDataInputUtils {
   def<T>(
     value: any,
     source: WatchSource<T>,
-    cb: (value: Exclude<T, undefined>) => void
+    cb: (value: Exclude<T, null | undefined>) => void
   ): Def<T>
 }
 
@@ -81,11 +81,14 @@ function createState<T extends Record<string, any>>(
 }
 
 function handleDefs<T extends Record<string, any>>(
-  defs: [string, Def][], state: T
+  defs: [string, Def][],
+  state: T
 ): void {
   defs.forEach(([key, def]) => {
     watchOnce(def.source, (value: any) => {
-      (state as any)[key] = def.cb(value)
+      if (!isNullish(value)) {
+        (state as any)[key] = def.cb(value)
+      }
     })
   })
 }
@@ -93,7 +96,7 @@ function handleDefs<T extends Record<string, any>>(
 function def<T>(
   value: any,
   source: WatchSource<T>,
-  cb: (value: Exclude<T, undefined>) => void
+  cb: (value: Exclude<T, null | undefined>) => void
 ): Def {
   return {
     __isDef: true,

package/lib/composables/Table.ts

@@ -5,10 +5,10 @@ import { DropdownSection } from './Dropdown'
 export interface Table {
   orders: string[]
   columns: TableColumns
-  records?: Record<string, any>[]
-  total?: number
-  page?: number
-  perPage?: number
+  records?: Record<string, any>[] | null
+  total?: number | null
+  page?: number | null
+  perPage?: number | null
   reset?: boolean
   borderless?: boolean
   loading?: boolean
@@ -47,10 +47,18 @@ export interface TableCellText extends TableCellBase {
   icon?: any
   value?: string | ((value: any) => string)
   link?(value: any, record: any): string
-  color?: 'neutral' | 'soft' | 'mute'
-  iconColor?: 'neutral' | 'soft' | 'mute'
+  color?: TableCellTextColor | ((value: any, record: any) => TableCellTextColor)
+  iconColor?: TableCellTextColor | ((value: any, record: any) => TableCellTextColor)
 }
 
+export type TableCellTextColor =
+  | 'neutral'
+  | 'soft'
+  | 'mute'
+  | 'info'
+  | 'warning'
+  | 'danger'
+
 export interface TableCellDay extends TableCellBase {
   type: 'day'
   format?: string
@@ -93,10 +101,10 @@ export interface TableCellAvatarsOption {
 export interface UseTableOptions {
   orders: string[]
   columns: TableColumns
-  records?: MaybeRef<Record<string, any>[] | undefined>
-  total?: MaybeRef<number | undefined>
-  page?: MaybeRef<number | undefined>
-  perPage?: MaybeRef<number | undefined>
+  records?: MaybeRef<Record<string, any>[] | null | undefined>
+  total?: MaybeRef<number | null | undefined>
+  page?: MaybeRef<number | null | undefined>
+  perPage?: MaybeRef<number | null | undefined>
   reset?: MaybeRef<boolean | undefined>
   borderless?: boolean
   loading?: MaybeRef<boolean | undefined>

package/lib/support/Day.ts

@@ -1,8 +1,11 @@
 import dayjs, { ConfigType, Dayjs } from 'dayjs'
+import RelativeTime from 'dayjs/plugin/relativeTime.js'
 
 export type Day = Dayjs
 export type Input = ConfigType
 
-export function day(input: Input): Dayjs {
+dayjs.extend(RelativeTime)
+
+export function day(input?: Input): Dayjs {
   return dayjs(input)
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@globalbrain/sefirot",
-  "version": "2.5.1",
+  "version": "2.7.0",
   "description": "Vue Components for Global Brain Design System.",
   "author": "Kia Ishii <ka.ishii@globalbrains.com>",
   "license": "MIT",
@@ -52,8 +52,8 @@
     "@types/markdown-it": "^12.2.3",
     "@types/node": "^18.8.0",
     "@vitejs/plugin-vue": "^3.1.2",
-    "@vitest/coverage-c8": "^0.23.4",
-    "@vue/test-utils": "^2.1.0",
+    "@vitest/coverage-c8": "^0.25.1",
+    "@vue/test-utils": "^2.2.1",
     "@vuelidate/core": "^2.0.0",
     "@vuelidate/validators": "^2.0.0",
     "@vueuse/core": "^9.3.0",
@@ -78,7 +78,7 @@
     "v-calendar": "3.0.0-alpha.8",
     "vite": "^3.1.4",
     "vitepress": "1.0.0-alpha.19",
-    "vitest": "^0.23.4",
+    "vitest": "^0.25.1",
     "vue": "^3.2.40",
     "vue-router": "^4.1.5",
     "vue-tsc": "^1.0.8"