@globalbrain/sefirot 4.41.2 → 4.43.0

package/lib/blocks/lens/components/LensCatalog.vue

@@ -61,7 +61,18 @@ export interface Props {
   // Whether to hide the condition blocks.
   hideConditions?: boolean
 
-  // Field name to be used as index field for selection.
+  // Field name to be used as the row identifier. When set, the field is
+  // automatically included in the request `select` so every row carries
+  // its value, and the corresponding column is hidden from the rendered
+  // table — *unless* the caller explicitly listed it in `select`, in
+  // which case the caller's intent wins and the column is shown
+  // normally. The value remains accessible via `record[indexField]` in
+  // `cell-clicked` events and through the `selected` model regardless.
+  //
+  // If the caller's `select` is empty or `null` (i.e. "use server
+  // defaults"), the index field is **not** auto-appended — that would
+  // narrow the result to just that single column on backends that treat
+  // an empty `select` as "use defaults".
   indexField?: string
 
   // Fields that are clickable to emit `cell-clicked` event when clicked.
@@ -125,6 +136,11 @@ const hasInitialResults = ref(false)
 let prevFetchInput: LensQuery | null = null
 let prevFetchResult: LensResult | null = null
 
+// `_select` carries the caller's intent. The index field is preserved
+// here if it was listed explicitly so the corresponding column gets
+// rendered, and is only added to the request payload separately (see
+// `withIndexField`). When `_select` is empty, the auto-fetched index
+// field is stripped out of the table's column list further down.
 const _select = ref(props.select ?? [])
 const _selectable = ref(props.selectable ?? props.select ?? [])
 
@@ -152,7 +168,7 @@ const perPage = ref(100)
 const { data: result, execute: refresh, loading } = useQuery(async (http) => {
   const input = {
     entity: props.entity ?? '__no_entity__',
-    select: _select.value,
+    select: withIndexField(_select.value),
     filters: createInputFilters(queryFilter.value, _filters.value),
     sort: _sort.value.length > 0 ? _sort.value : defaultSort.value ?? [],
     page: page.value,
@@ -231,19 +247,55 @@ const tableMaxHeight = computed(() => {
   return `--table-max-height: calc(${props.height} - ${controlHeight} - ${conditionBlocksHeight.value} - ${columnsHeight} - ${footerHeight})`
 })
 
-// Initial setup when the result is loaded for the first time.
+// Initial setup when the result is loaded for the first time. When the
+// caller didn't pass a `select`, we initialise from the response, but
+// we strip out the index field — anything pulled in by `withIndexField`
+// on the way out shouldn't pretend to be caller-declared on the way
+// back in.
 watch(result, (res) => {
   if (!hasInitialResults.value && res!.data.length > 0) {
     hasInitialResults.value = true
   }
   if (_select.value.length === 0) {
-    _select.value = res!.query.select
+    _select.value = withoutIndexField(res!.query.select)
   }
   if (_selectable.value.length === 0) {
-    _selectable.value = res!.query.select
+    _selectable.value = withoutIndexField(res!.query.select)
   }
 }, { once: true })
 
+// Columns to render in the table. We always defer to `_select` (caller
+// or user intent) once we have it; before the first response we use the
+// raw response select with the index field filtered out so an
+// auto-fetched index field doesn't accidentally appear as a column.
+const tableSelect = computed(() => {
+  if (_select.value.length > 0) {
+    return _select.value
+  }
+  return withoutIndexField(result.value?.query.select ?? [])
+})
+
+// The `indexField` is appended to the request `select` so the server
+// returns its value on every row, but it is kept out of the internal
+// `_select` / `_selectable` state so the caller-facing concept of
+// "selected columns" stays clean (the index field is a row identifier,
+// not a column the user picked). The corresponding column is also
+// hidden from the rendered table by `LensTable`.
+//
+// When the caller has no concrete select list, the index field is
+// *not* added either — leaving the request empty lets the server use
+// its own defaults. See `indexField` prop docs above.
+function withIndexField(fields: string[]): string[] {
+  if (fields.length === 0) { return [] }
+  if (!props.indexField || fields.includes(props.indexField)) { return [...fields] }
+  return [...fields, props.indexField]
+}
+
+function withoutIndexField(fields: string[]): string[] {
+  if (!props.indexField) { return [...fields] }
+  return fields.filter((f) => f !== props.indexField)
+}
+
 // Create lens filters option by combining query (free search) filters,
 // user selected filters, and fixed filters.
 function createInputFilters(queryFilters: any[], filters: any[]) {
@@ -313,6 +365,8 @@ function onResetSorts() {
 }
 
 function onViewUpdated(newSelect: string[], newSelectable: string[], overrides: Record<string, Partial<FieldData>>) {
+  // Treat updates from the view form as deliberate user intent: if the
+  // user picked the index field on purpose, surface its column.
   _select.value = newSelect
   _selectable.value = newSelectable
   _overrides.value = overrides
@@ -423,6 +477,7 @@ defineExpose({
           :result
           :loading
           :overrides="_overrides"
+          :select="tableSelect"
           :index-field
           :selected
           :clickable-fields

package/lib/blocks/lens/components/LensCatalogControl.vue

@@ -84,6 +84,7 @@ function createFilterPresetOptions(): ActionList {
   <div class="LensCatalogControl">
     <template v-if="!selected || selected.length === 0">
       <div class="main">
+        <slot name="main-left" />
         <SInputText
           v-if="showQuery"
           class="s-w-320"
@@ -113,6 +114,7 @@ function createFilterPresetOptions(): ActionList {
           :label="t.a_view"
           @click="$emit('view')"
         />
+        <slot name="main-right" />
       </div>
       <div class="sub">
         <slot name="sub-left" />

package/lib/blocks/lens/components/LensTable.vue

@@ -14,6 +14,11 @@ const props = defineProps<{
   result?: LensResult
   overrides?: Record<string, Partial<FieldData>>
   loading: boolean
+  // The list of field keys to actually render as columns, in order.
+  // Falls back to `result.query.select` if not provided. The catalog
+  // uses this to control whether an auto-fetched `indexField` shows up
+  // as a column.
+  select?: string[]
   selected?: any[]
   indexField?: string
 }>()
@@ -29,8 +34,10 @@ const fieldFactory = useFieldFactory()
 
 const records = computed(() => props.result?.data ?? [])
 
+const columnKeys = computed(() => props.select ?? props.result?.query.select ?? [])
+
 const orders = computed(() => [
-  ...(props.result?.query.select ?? []),
+  ...columnKeys.value,
   '__last_empty__'
 ])
 
@@ -48,9 +55,9 @@ const columns = computedAsync(async () => {
     }
   }
 
-  // Build the lest of columns based on selected fields.
-  for (const i in r.query.select) {
-    const key = r.query.select[i]
+  // Build the list of columns based on the resolved column key list.
+  for (const i in columnKeys.value) {
+    const key = columnKeys.value[i]
 
     const _fieldData = cloneDeep(r.fields[key])
 

package/lib/components/SInputSegments.vue

@@ -85,7 +85,7 @@ function onSelect(value: T) {
   </SInputBase>
 </template>
 
-<style scoped lang="postcss">
+<style scoped>
 .SInputSegments.sm,
 .SInputSegments.mini {
   .box {
@@ -129,9 +129,9 @@ function onSelect(value: T) {
 
 .box {
   display: inline-flex;
-  border: 1px solid var(--input-border-color);
-  border-radius: 6px;
-  background-color: var(--input-bg-color);
+  border: 1px solid var(--c-border);
+  border-radius: 8px;
+  background-color: var(--c-bg-2);
   transition: border-color 0.25s;
 }
 </style>

package/lib/components/SInputSegmentsOption.vue

@@ -35,7 +35,7 @@ function onClick() {
   </button>
 </template>
 
-<style scoped lang="postcss">
+<style scoped>
 .SInputSegmentsOption {
   position: relative;
   display: block;
@@ -43,11 +43,10 @@ function onClick() {
   justify-content: center;
   align-items: center;
   border: 1px solid transparent;
-  border-radius: 3px;
+  border-radius: 6px;
   width: 100%;
   height: 100%;
   text-align: center;
-  font-size: 14px;
   color: var(--c-text-2);
   white-space: nowrap;
   transition: border-color 0.25s, color 0.25s, background-color 0.25s;
@@ -60,76 +59,43 @@ function onClick() {
     color: var(--c-text-3);
     cursor: not-allowed;
   }
-
-  .SInputSegmentsOption + &::before {
-    position: absolute;
-    left: -1px;
-    display: block;
-    width: 1px;
-    height: 16px;
-    border-radius: 4px;
-    background-color: var(--c-divider);
-    content: "";
-    transition: opacity 0.25s;
-  }
-
-  .SInputSegmentsOption.active + &::before,
-  &.active::before {
-    opacity: 0;
-  }
 }
 
-.SInputSegmentsOption.sm,
-.SInputSegmentsOption.mini {
-  .SInputSegmentsOption + &::before {
-    top: 4px;
-  }
-
-  .label {
-    padding: 0 12px;
-  }
+.SInputSegmentsOption.sm .label,
+.SInputSegmentsOption.mini .label {
+  padding: 0 12px;
+  font-size: 12px;
+  font-weight: 500;
 }
 
-.SInputSegmentsOption.md {
-  .SInputSegmentsOption + &::before {
-    top: 6px;
-  }
-
-  .label {
-    padding: 0 12px;
-  }
+.SInputSegmentsOption.md .label {
+  padding: 0 12px;
+  font-size: 14px;
+  font-weight: 500;
 }
 
-.SInputSegmentsOption.small {
-  .SInputSegmentsOption + &::before {
-    top: 7px;
-  }
-
-  .label {
-    padding: 0 12px;
-  }
+.SInputSegmentsOption.small .label {
+  padding: 0 12px;
+  font-size: 14px;
+  font-weight: 500;
 }
 
-.SInputSegmentsOption.medium {
-  .SInputSegmentsOption + &::before {
-    top: 10px;
-  }
-
-  .label {
-    padding: 0 16px;
-  }
+.SInputSegmentsOption.medium .label {
+  padding: 0 16px;
 }
 
 .SInputSegmentsOption.default.active {
   border-color: var(--button-fill-default-border-color);
   color: var(--button-fill-default-text-color);
   background-color: var(--button-fill-default-bg-color);
+  box-shadow: var(--shadow-depth-1);
 }
 
 .SInputSegmentsOption.mute.active {
   border-color: var(--button-fill-mute-border-color);
   color: var(--button-fill-mute-text-color);
   background-color: var(--button-fill-mute-bg-color);
+  box-shadow: var(--shadow-depth-1);
 }
 
 .SInputSegmentsOption.neutral.active {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@globalbrain/sefirot",
-  "version": "4.41.2",
+  "version": "4.43.0",
   "description": "Vue Components for Global Brain Design System.",
   "keywords": [
     "components",