@globalbrain/sefirot 2.27.0 → 2.29.0

package/lib/components/STable.vue

@@ -18,6 +18,7 @@ const {
   records,
   header,
   footer,
+  summary,
   total,
   page,
   perPage,
@@ -71,6 +72,12 @@ const classes = computed(() => ({
   'borderless': borderless?.value
 }))
 
+const recordsWithSummary = computed(() => {
+  return (records?.value && summary?.value)
+    ? [...records?.value, summary?.value]
+    : records?.value ?? []
+})
+
 watch(() => records?.value, () => {
   headLock = true
   bodyLock = true
@@ -107,6 +114,16 @@ function lockBody(value: boolean) {
 function updateColWidth(key: string, value: string) {
   colWidths[key] = value
 }
+
+function isSummary(index: number) {
+  return index === records?.value?.length
+}
+
+function getCell(key: string, index: number) {
+  return (isSummary(index) && columns.value[key]?.summaryCell)
+    ? columns.value[key]?.summaryCell
+    : columns.value[key]?.cell
+}
 </script>
 
 <template>
@@ -160,7 +177,12 @@ function updateColWidth(key: string, value: string) {
           @scroll="syncBodyScroll"
         >
           <div class="block">
-            <div v-for="(record, rIndex) in records" :key="rIndex" class="row">
+            <div
+              v-for="(record, rIndex) in recordsWithSummary"
+              :key="rIndex"
+              class="row"
+              :class="isSummary(rIndex) && 'summary'"
+            >
               <STableItem
                 v-for="key in orders"
                 :key="key"
@@ -170,8 +192,9 @@ function updateColWidth(key: string, value: string) {
               >
                 <STableCell
                   :name="key"
+                  :class="isSummary(rIndex) && 'summary'"
                   :class-name="columns[key].className"
-                  :cell="columns[key].cell"
+                  :cell="getCell(key, rIndex)"
                   :value="record[key]"
                   :record="record"
                   :records="records"

package/lib/components/STableCell.vue

@@ -95,7 +95,11 @@ const computedCell = computed<TableCell | undefined>(() =>
   overflow: hidden;
 
   .row:hover & {
-    background-color: var(--c-bg-elv);
+    background-color: var(--c-bg-elv-1);
+  }
+
+  .summary & {
+    background-color: var(--c-bg-elv-2);
   }
 
   .STableItem:first-child & {

package/lib/components/STableCellDay.vue

@@ -42,5 +42,9 @@ const _value = computed(() => {
   .STableCellDay.neutral & { color: var(--c-text-1); }
   .STableCellDay.soft &    { color: var(--c-text-2); }
   .STableCellDay.mute &    { color: var(--c-text-3); }
+
+  .STableCell.summary & {
+    font-weight: var(--table-cell-summary-font-weight);
+  }
 }
 </style>

package/lib/components/STableCellText.vue

@@ -110,6 +110,10 @@ const _iconColor = computed(() => {
   .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); }
+
+  .STableCell.summary & {
+    font-weight: var(--table-cell-summary-font-weight);
+  }
 }
 
 .icon {

package/lib/composables/Table.ts

@@ -6,13 +6,15 @@ import type { DropdownSection } from './Dropdown'
 
 export interface Table<
   O extends string = any,
-  R extends Record<string, any> = any
+  R extends Record<string, any> = any,
+  SR extends Record<string, any> = any
 > {
   orders: O[]
-  columns: TableColumns<O, R>
+  columns: TableColumns<O, R, SR>
   records?: R[] | null
   header?: boolean
   footer?: boolean
+  summary?: SR | null
   total?: number | null
   page?: number | null
   perPage?: number | null
@@ -26,21 +28,23 @@ export interface Table<
 
 export type TableColumns<
   O extends string,
-  R extends Record<string, any>
+  R extends Record<string, any>,
+  SR extends Record<string, any>
 > = {
-  [K in O]: K extends keyof R
-    ? TableColumn<R[K], R>
-    : TableColumn<undefined, R>
+  [K in O]: TableColumn<R[K], R, SR[K], SR>
 }
 
-export interface TableColumn<V, R> {
+export interface TableColumn<V, R, SV, SR> {
   label?: string
   className?: string
   dropdown?: DropdownSection[]
   resizable?: boolean
-  cell?: TableCell | ((value: V, record: R) => TableCell)
+  cell?: TableCell | TableColumnCellFn<V, R>
+  summaryCell?: TableCell | TableColumnCellFn<SV, SR>
 }
 
+export type TableColumnCellFn<V, R> = (value: V, record: R) => TableCell
+
 export type TableCell =
   | TableCellText
   | TableCellDay
@@ -138,12 +142,17 @@ export interface TableCellComponent extends TableCellBase {
   props?: Record<string, any>
 }
 
-export interface UseTableOptions<O extends string, R extends Record<string, any>> {
+export interface UseTableOptions<
+  O extends string,
+  R extends Record<string, any>,
+  SR extends Record<string, any>
+> {
   orders: MaybeRef<O[]>
-  columns: MaybeRef<TableColumns<O, R>>
+  columns: MaybeRef<TableColumns<O, R, SR>>
   records?: MaybeRef<R[] | null | undefined>
   header?: MaybeRef<boolean | undefined>
   footer?: MaybeRef<boolean | undefined>
+  summary?: MaybeRef<SR | null | undefined>
   total?: MaybeRef<number | null | undefined>
   page?: MaybeRef<number | null | undefined>
   perPage?: MaybeRef<number | null | undefined>
@@ -155,8 +164,12 @@ export interface UseTableOptions<O extends string, R extends Record<string, any>
   onReset?(): void
 }
 
-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>
+export function useTable<
+  O extends string,
+  R extends Record<string, any>,
+  SR extends Record<string, any>
+>(
+  options: UseTableOptions<O, R, SR>
+): Table<O, R, SR> {
+  return reactive(options) as Table<O, R, SR>
 }

package/lib/styles/variables.css

@@ -639,6 +639,8 @@
 
   --table-cell-font-size: 14px;
   --table-cell-font-weight: 400;
+
+  --table-cell-summary-font-weight: 600;
 }
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@globalbrain/sefirot",
-  "version": "2.27.0",
+  "version": "2.29.0",
   "packageManager": "pnpm@7.26.2",
   "description": "Vue Components for Global Brain Design System.",
   "author": "Kia Ishii <ka.ishii@globalbrains.com>",