@globalbrain/sefirot 2.7.3 → 2.8.0

package/lib/components/STable.vue

@@ -102,10 +102,17 @@ function updateColWidth(key: string, value: string) {
         >
           <div class="block">
             <div class="row">
-              <STableItem v-for="key in orders" :key="key" :name="key" :width="colWidths[key]">
+              <STableItem
+                v-for="key in orders"
+                :key="key"
+                :name="key"
+                :class-name="columns[key].className"
+                :width="colWidths[key]"
+              >
                 <STableColumn
                   :name="key"
                   :label="columns[key].label"
+                  :class-name="columns[key].className"
                   :dropdown="columns[key].dropdown"
                   @resize="(value) => updateColWidth(key, value)"
                 />
@@ -124,9 +131,16 @@ function updateColWidth(key: string, value: string) {
         >
           <div class="block">
             <div v-for="(record, rIndex) in records" :key="rIndex" class="row">
-              <STableItem v-for="key in orders" :key="key" :name="key" :width="colWidths[key]">
+              <STableItem
+                v-for="key in orders"
+                :key="key"
+                :name="key"
+                :class-name="columns[key].className"
+                :width="colWidths[key]"
+              >
                 <STableCell
                   :name="key"
+                  :class-name="columns[key].className"
                   :cell="columns[key].cell"
                   :value="record[key]"
                   :record="record"

package/lib/components/STableCell.vue

@@ -8,6 +8,7 @@ import STableCellText from './STableCellText.vue'
 
 defineProps<{
   name: string
+  className?: string
   cell?: TableCell
   value: any
   record: any
@@ -16,7 +17,7 @@ defineProps<{
 </script>
 
 <template>
-  <div class="STableCell" :class="[`col-${name}`]">
+  <div class="STableCell" :class="[className, `col-${name}`]">
     <STableCellText
       v-if="!cell || cell.type === 'text'"
       :value="value"
@@ -26,6 +27,7 @@ defineProps<{
       :link="cell?.link"
       :color="cell?.color"
       :icon-color="cell?.iconColor"
+      :on-click="cell?.onClick"
     />
     <STableCellDay
       v-else-if="cell.type === 'day'"

package/lib/components/STableCellText.vue

@@ -8,6 +8,7 @@ export type Color =
   | 'soft'
   | 'mute'
   | 'info'
+  | 'success'
   | 'warning'
   | 'danger'
 
@@ -15,10 +16,11 @@ const props = defineProps<{
   value?: any
   record: any
   icon?: any
-  getter?: string | ((value: any) => string)
+  getter?: string | ((value: any, record: any) => string)
   color?: Color | ((value: any, record: any) => Color)
   iconColor?: Color | ((value: any, record: any) => Color)
   link?(value: any, record: any): string
+  onClick?(value: any, record: any): void
 }>()
 
 const _value = computed(() => {
@@ -28,7 +30,7 @@ const _value = computed(() => {
 
   return typeof props.getter === 'string'
     ? props.getter
-    : props.getter(props.value)
+    : props.getter(props.value, props.record)
 })
 
 const _color = computed(() => {
@@ -45,8 +47,14 @@ const _iconColor = computed(() => {
 </script>
 
 <template>
-  <div class="STableCellText" :class="[{ link }, _color]">
-    <SLink v-if="_value" class="container" :href="link?.(value, record)">
+  <div class="STableCellText" :class="[{ link: link || onClick }, _color]">
+    <SLink
+      v-if="_value"
+      class="container"
+      :href="link?.(value, record)"
+      :role="onClick ? 'button' : null"
+      @click="() => onClick?.(value, record)"
+    >
       <div v-if="icon" class="icon" :class="[_iconColor ?? _color]">
         <SIcon :icon="icon" class="svg" />
       </div>
@@ -81,6 +89,7 @@ const _iconColor = computed(() => {
   &.soft    { color: var(--c-text-2); }
   &.mute    { color: var(--c-text-3); }
   &.info    { color: var(--c-info); }
+  &.success { color: var(--c-success); }
   &.warning { color: var(--c-warning); }
   &.danger  { color: var(--c-danger); }
 
@@ -92,9 +101,11 @@ const _iconColor = computed(() => {
   .STableCellText.link &.soft          { color: var(--c-text-2); }
   .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:hover &.mute    { color: var(--c-text-3); }
   .STableCellText.link &.info          { color: var(--c-info); }
   .STableCellText.link:hover &.info    { color: var(--c-info-dark); }
+  .STableCellText.link &.success       { color: var(--c-success); }
+  .STableCellText.link:hover &.success { color: var(--c-success-dark); }
   .STableCellText.link &.warning       { color: var(--c-warning); }
   .STableCellText.link:hover &.warning { color: var(--c-warning-darker); }
   .STableCellText.link &.danger        { color: var(--c-danger); }
@@ -126,6 +137,8 @@ const _iconColor = computed(() => {
   .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 &.success       { color: var(--c-success); }
+  .STableCellText.link:hover &.success { color: var(--c-success-dark); }
   .STableCellText.link &.warning       { color: var(--c-warning); }
   .STableCellText.link:hover &.warning { color: var(--c-warning-dark); }
   .STableCellText.link &.danger        { color: var(--c-danger); }

package/lib/components/STableColumn.vue

@@ -112,7 +112,7 @@ function stopDialogPositionListener() {
 </script>
 
 <template>
-  <div class="STableColumn STableCell" :class="[{ active }, className ?? `col-${name}`]" ref="column">
+  <div class="STableColumn STableCell" :class="[{ active }, className, `col-${name}`]" ref="column">
     <div class="container">
       <p class="label">{{ label }}</p>
 

package/lib/components/STableItem.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 defineProps<{
   name: string
+  className?: string
   width?: string
 }>()
 </script>
@@ -8,7 +9,7 @@ defineProps<{
 <template>
   <div
     class="STableItem"
-    :class="[`col-${name}`, { adjusted: width }]"
+    :class="[className, `col-${name}`, { adjusted: width }]"
   >
     <slot />
   </div>

package/lib/composables/Table.ts

@@ -45,10 +45,11 @@ export interface TableCellBase {
 export interface TableCellText extends TableCellBase {
   type: 'text'
   icon?: any
-  value?: string | ((value: any) => string)
+  value?: string | ((value: any, record: any) => string)
   link?(value: any, record: any): string
   color?: TableCellTextColor | ((value: any, record: any) => TableCellTextColor)
   iconColor?: TableCellTextColor | ((value: any, record: any) => TableCellTextColor)
+  onClick?(value: any, record: any): void
 }
 
 export type TableCellTextColor =
@@ -56,6 +57,7 @@ export type TableCellTextColor =
   | 'soft'
   | 'mute'
   | 'info'
+  | 'success'
   | 'warning'
   | 'danger'
 
@@ -99,8 +101,8 @@ export interface TableCellAvatarsOption {
 }
 
 export interface UseTableOptions {
-  orders: string[]
-  columns: TableColumns
+  orders: MaybeRef<string[]>
+  columns: MaybeRef<TableColumns>
   records?: MaybeRef<Record<string, any>[] | null | undefined>
   total?: MaybeRef<number | null | undefined>
   page?: MaybeRef<number | null | undefined>

package/package.json

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