@globalbrain/sefirot 3.37.0 → 3.38.0

package/lib/components/SAvatar.vue

@@ -44,6 +44,8 @@ const initial = computed(() => props.name?.charAt(0).toUpperCase())
 
 .img {
   object-fit: cover;
+  height: 100%;
+  width: 100%;
 }
 
 .initial {

package/lib/components/SInputCheckbox.vue

@@ -163,7 +163,11 @@ function onClick() {
 }
 
 .SInputCheckbox.disabled {
-  .box {
+  .input {
+    cursor: not-allowed;
+  }
+
+  .input .box {
     border-color: var(--input-disabled-border-color);
     background-color: var(--input-disabled-bg-color);
 
@@ -171,6 +175,13 @@ function onClick() {
     &:focus:not(:focus-visible) { border-color: var(--input-disabled-border-color); }
   }
 
-  .input { cursor: not-allowed; }
+  .input.on .box {
+    border-color: var(--c-border-info-1);
+    background-color: var(--c-blue-8);
+  }
+
+  .check-icon {
+    color: var(--c-white-a3);
+  }
 }
 </style>

package/lib/components/SInputRadio.vue

@@ -141,7 +141,11 @@ function onClick() {
 }
 
 .SInputRadio.disabled {
-  .box {
+  .input {
+    cursor: not-allowed;
+  }
+
+  .input .box {
     border-color: var(--input-disabled-border-color);
     background-color: var(--input-disabled-bg-color);
 
@@ -149,6 +153,12 @@ function onClick() {
     &:focus:not(:focus-visible) { border-color: var(--input-disabled-border-color); }
   }
 
-  .input { cursor: not-allowed; }
+  .input.on .box {
+    border-color: var(--c-border-info-1);
+  }
+
+  .check {
+    background-color: var(--c-blue-9);
+  }
 }
 </style>

package/lib/components/STable.vue

@@ -136,19 +136,17 @@ const indexes = computed(() => {
   return records.map((record, i) => indexField ? record[indexField] : i)
 })
 
-const selectedIndexes = reactive(new Set())
+const selectedIndexes = reactive(new Set(Array.isArray(props.selected) ? props.selected : []))
 
 const control = computed({
   get() {
-    const selected = indexes.value.filter((index) => {
-      return selectedIndexes.has(index)
-    })
-
-    updateSelected(selected)
+    if (Array.isArray(props.selected)) {
+      return props.selected.length === indexes.value.length
+        ? true
+        : props.selected.length ? 'indeterminate' : false
+    }
 
-    return selected.length === indexes.value.length
-      ? true
-      : selected.length ? 'indeterminate' : false
+    return 'indeterminate' // doesn't matter
   },
 
   set(newValue) {
@@ -170,6 +168,12 @@ watch(indexes, (newValue, oldValue) => {
   }
 })
 
+watch(selectedIndexes, (newValue) => {
+  if (Array.isArray(props.selected)) {
+    updateSelected(Array.from(newValue))
+  }
+})
+
 const virtualizerOptions = computed(() => ({
   count: recordsWithSummary.value.length,
   getScrollElement: () => body.value,
@@ -390,7 +394,12 @@ function updateSelected(selected: any) {
                   @resize="(value) => updateColWidth(key, value, true)"
                 >
                   <SInputCheckbox
-                    v-if="Array.isArray(selected) && key === '__select' && unref(options.records)?.length"
+                    v-if="
+                      Array.isArray(selected)
+                        && key === '__select'
+                        && unref(options.records)?.length
+                        && options.disableSelection == null
+                    "
                     v-model="control"
                   />
                 </STableColumn>
@@ -450,11 +459,13 @@ function updateSelected(selected: any) {
                         v-if="Array.isArray(selected)"
                         :model-value="selectedIndexes.has(indexes[index])"
                         @update:model-value="c => selectedIndexes[c ? 'add' : 'delete'](indexes[index])"
+                        :disabled="options.disableSelection?.(recordsWithSummary[index]) === true"
                       />
                       <SInputRadio
                         v-else
                         :model-value="selected === indexes[index]"
                         @update:model-value="c => updateSelected(c ? indexes[index] : null)"
+                        :disabled="options.disableSelection?.(recordsWithSummary[index]) === true"
                       />
                     </template>
                   </STableCell>

package/lib/components/STableCell.vue

@@ -131,6 +131,10 @@ const computedCell = computed<TableCell | undefined>(() =>
   transition: background-color 0.1s;
   overflow: hidden;
 
+  :where(.row:has(.input.on)) & {
+    background-color: var(--c-bg-elv-4);
+  }
+
   .row:hover & {
     background-color: var(--c-bg-elv-4);
   }

package/lib/composables/Table.ts

@@ -16,10 +16,11 @@ export interface Table<
   loading?: MaybeRef<boolean | undefined>
   rowSize?: MaybeRef<number | undefined>
   borderless?: MaybeRef<boolean>
+  disableSelection?: (record: R) => boolean
 
   /**
    * @deprecated Use `<SControl>` to add equivalent features.
-  */
+   */
   actions?: MaybeRef<TableHeaderAction[]>
   menu?: MaybeRef<TableMenu[] | TableMenu[][]>
   header?: MaybeRef<boolean | undefined>

package/package.json

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