@globalbrain/sefirot 2.27.0 → 2.28.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
@@ -160,7 +167,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="rIndex === records?.length && 'summary'"
+            >
               <STableItem
                 v-for="key in orders"
                 :key="key"
@@ -170,6 +182,7 @@ function updateColWidth(key: string, value: string) {
               >
                 <STableCell
                   :name="key"
+                  :class="rIndex === records?.length && 'summary'"
                   :class-name="columns[key].className"
                   :cell="columns[key].cell"
                   :value="record[key]"

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

@@ -13,6 +13,7 @@ export interface Table<
   records?: R[] | null
   header?: boolean
   footer?: boolean
+  summary?: TableSummary<R> | null
   total?: number | null
   page?: number | null
   perPage?: number | null
@@ -138,12 +139,17 @@ export interface TableCellComponent extends TableCellBase {
   props?: Record<string, any>
 }
 
+export type TableSummary<T> = {
+  [P in keyof T]?: T[P] | 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>
+  summary?: MaybeRef<TableSummary<R> | null | undefined>
   total?: MaybeRef<number | null | undefined>
   page?: MaybeRef<number | null | undefined>
   perPage?: MaybeRef<number | null | undefined>

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.28.0",
   "packageManager": "pnpm@7.26.2",
   "description": "Vue Components for Global Brain Design System.",
   "author": "Kia Ishii <ka.ishii@globalbrains.com>",