@globalbrain/sefirot 4.41.1 → 4.42.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/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/styles/variables.css

@@ -34,13 +34,13 @@
   --c-neutral-dark-dimm-a1: rgba(255, 255, 255, 0.08);
   --c-neutral-dark-dimm-a2: rgba(255, 255, 255, 0.16);
 
-  --c-text-light-1: #1c2024;
-  --c-text-light-2: rgba(0, 7, 20, 0.62);
-  --c-text-light-3: rgba(0, 4, 26, 0.51);
+  --c-text-light-1: #22201d;
+  --c-text-light-2: #656260;
+  --c-text-light-3: #8f8c89;
 
-  --c-text-dark-1: #edeef0;
-  --c-text-dark-2: rgba(239, 245, 255, 0.69);
-  --c-text-dark-3: rgba(228, 238, 255, 0.49);
+  --c-text-dark-1: #ededed;
+  --c-text-dark-2: #b3b3b3;
+  --c-text-dark-3: #6c6c6c;
 }
 
 /**
@@ -232,8 +232,8 @@
 
 :root {
   --c-bg-1: var(--c-white);
-  --c-bg-2: oklch(0.98 0 0);
-  --c-bg-3: oklch(0.97 0 0);
+  --c-bg-2: #fbfaf9;
+  --c-bg-3: #f3f1f1;
 
   --c-bg-elv-1: #ffffff;
   --c-bg-elv-2: #f5f5f7;
@@ -270,22 +270,14 @@
 }
 
 .dark {
-  --c-bg-1: oklch(0.145 0 0);
-  --c-bg-2: oklch(0.205 0 0);
-  --c-bg-3: oklch(0.269 0 0);
+  --c-bg-1: #0a0a0a;
+  --c-bg-2: #171717;
+  --c-bg-3: #262626;
 
   --c-bg-elv-1: #000000;
   --c-bg-elv-2: #151517;
   --c-bg-elv-3: #1b1b1f;
   --c-bg-elv-4: #232429;
-
-  --c-text-1: var(--c-text-dark-1);
-  --c-text-2: var(--c-text-dark-2);
-  --c-text-3: var(--c-text-dark-3);
-
-  --c-text-inverse-1: var(--c-text-light-1);
-  --c-text-inverse-2: var(--c-text-light-2);
-  --c-text-inverse-3: var(--c-text-light-3);
 }
 
 /**

package/package.json

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