@globalbrain/sefirot 3.12.0 → 3.13.1

package/lib/components/SLocalNav.vue

@@ -31,6 +31,7 @@ const normalizedMenu = computed(() => {
   flex-direction: column;
   gap: 8px;
   padding: 16px 24px;
+  background-color: var(--c-bg-elv-2);
 
   @media (min-width: 768px) {
     padding: 16px 32px;

package/lib/components/STable.vue

@@ -8,6 +8,7 @@ import {
   reactive,
   ref,
   shallowRef,
+  toValue,
   unref,
   watch
 } from 'vue'
@@ -37,7 +38,8 @@ const row = shallowRef<HTMLElement | null>(null)
 
 const ordersToShow = computed(() => {
   const orders = unref(props.options.orders).filter((key) => {
-    return unref(props.options.columns)[key]?.show !== false
+    const show = unref(props.options.columns)[key]?.show
+    return toValue(show) !== false
   })
   if (!props.selected) {
     return orders

package/lib/components/STableCell.vue

@@ -99,6 +99,8 @@ const computedCell = computed<TableCell | undefined>(() =>
       :record="record"
       :avatars="computedCell.avatars"
       :color="computedCell.color"
+      :avatar-count="computedCell.avatarCount"
+      :name-count="computedCell.nameCount"
     />
     <STableCellActions
       v-else-if="computedCell.type === 'actions'"

package/lib/components/STableCellAvatars.vue

@@ -3,12 +3,17 @@ import { computed } from 'vue'
 import { type TableCellAvatarsOption } from '../composables/Table'
 import SAvatar from './SAvatar.vue'
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   value?: any
   record?: any
   avatars: TableCellAvatarsOption[] | ((value: any, record: any) => TableCellAvatarsOption[])
   color?: 'neutral' | 'soft' | 'mute'
-}>()
+  avatarCount?: number
+  nameCount?: number
+}>(), {
+  avatarCount: 2,
+  nameCount: 2
+})
 
 const _avatars = computed(() => {
   return typeof props.avatars === 'function'
@@ -16,39 +21,57 @@ const _avatars = computed(() => {
     : props.avatars
 })
 
+const avatarDiff = computed(() => {
+  return _avatars.value.length - props.avatarCount
+})
+
 const displayAvatars = computed(() => {
-  return _avatars.value.slice(0, 3)
+  return _avatars.value.slice(0, props.avatarCount)
+})
+
+const nameDiff = computed(() => {
+  return _avatars.value.length - props.nameCount
 })
 
-const names = computed(() => {
-  if (_avatars.value.length === 0) {
+const displayNames = computed(() => {
+  // If the count is 0, treat it as "disabling" the name display.
+  if (props.nameCount === 0) {
     return null
   }
 
-  if (_avatars.value.length === 1) {
-    return _avatars.value[0].name
-  }
+  const slicedAvatars = _avatars.value.slice(0, props.nameCount)
+
+  const names = slicedAvatars.map((avatar) => avatar.name).join(', ')
 
-  if (_avatars.value.length === 2) {
-    return `${_avatars.value[0].name}, ${_avatars.value[1].name}`
+  if (nameDiff.value > 0) {
+    return `${names}, ...`
   }
 
-  return `${_avatars.value[0].name}, ${_avatars.value[1].name} +${_avatars.value.length - 2}`
+  return names
 })
 </script>
 
 <template>
   <div class="STableCellAvatars" :class="[color]">
     <div class="container">
-      <div class="avatars">
-        <div v-for="(avatar, index) in displayAvatars" :key="index" class="avatar">
+      <div v-if="displayAvatars.length" class="avatars">
+        <div
+          v-for="(avatar, index) in displayAvatars"
+          :key="index"
+          class="avatar"
+        >
           <div class="avatar-box">
             <SAvatar size="mini" :avatar="avatar.image" :name="avatar.name" />
           </div>
         </div>
+        <div v-if="avatarDiff > 0" class="avatar">
+          <div class="avatar-box placeholder" :class="{ small: avatarDiff >= 10 }">
+            +{{ avatarDiff }}
+          </div>
+        </div>
       </div>
-      <div class="names">
-        {{ names }}
+      <div v-if="displayNames" class="names">
+        {{ displayNames }}
       </div>
     </div>
   </div>
@@ -72,28 +95,44 @@ const names = computed(() => {
 .avatar {
   position: relative;
   width: 20px;
+}
 
-  &:nth-child(1) { z-index: 30; }
-  &:nth-child(2) { z-index: 20; }
-  &:nth-child(3) { z-index: 10; }
+.avatar.placeholder {
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .avatar-box {
+  display: flex;
+  justify-content: center;
+  align-items: center;
   border: 2px solid var(--c-bg-elv-3);
   border-radius: 50%;
   width: 28px;
+  height: 28px;
 
   .row:hover & {
     border: 2px solid var(--c-bg-elv-4);
   }
+
+  &.placeholder {
+    font-size: 10px;
+    font-weight: 500;
+    color: var(--c-text-2);
+    background-color: var(--c-bg-mute-1);
+  }
+
+  &.placeholder.small {
+    font-size: 9px;
+  }
 }
 
 .names {
   line-height: 28px;
   font-size: 12px;
-  font-weight: 500;
-
-  .STableCellAvatars.soft & { color: var(--c-text-2); }
-  .STableCellAvatars.mute & { color: var(--c-text-3); }
 }
+
+.STableCellAvatars.soft .names { color: var(--c-text-2); }
+.STableCellAvatars.mute .names { color: var(--c-text-3); }
 </style>

package/lib/composables/Table.ts

@@ -1,4 +1,4 @@
-import { type Component, type MaybeRef } from 'vue'
+import { type Component, type MaybeRef, type MaybeRefOrGetter } from 'vue'
 import { type Mode } from '../components/SButton.vue'
 import { type Day } from '../support/Day'
 import { type DropdownSection } from './Dropdown'
@@ -48,7 +48,7 @@ export interface TableColumn<V, R, SV, SR> {
   resizable?: boolean
   cell?: TableCell<V, R> | TableColumnCellFn<V, R>
   summaryCell?: TableCell<SV, SR> | TableColumnCellFn<SV, SR>
-  show?: boolean
+  show?: MaybeRefOrGetter<boolean>
 }
 
 export type TableColumnCellFn<V, R> = (value: V, record: R) => TableCell<V, R>
@@ -158,6 +158,8 @@ export interface TableCellAvatars<V = any, R = any> extends TableCellBase {
   type: 'avatars'
   avatars: TableCellAvatarsOption[] | ((value: V, record: R) => TableCellAvatarsOption[])
   color?: 'neutral' | 'soft' | 'mute'
+  avatarCount?: number
+  nameCount?: number
 }
 
 export interface TableCellAvatarsOption {

package/package.json

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