@lavalogic/scoria 0.37.19 → 0.37.20

package/dist/Components/Table/Body/QuickSearchCell.svelte

@@ -724,10 +724,11 @@
 div.input-cell {
   background-color: #f4f7f9;
   height: var(--height);
-  overflow: visible;
+  overflow-x: clip;
+  overflow-y: visible;
   padding-left: 0;
   padding-right: 0;
-  border-right: solid 1px #cbd4da !important;
+  border-right: none;
   box-sizing: border-box;
 }
 div.input-cell div.stick-right {

package/dist/Components/Table/Body/Rows/ColumnListRow.svelte

@@ -7,7 +7,6 @@
 	import Action from '../../../Action.svelte';
 	import Checkbox from '../../../Checkbox.svelte';
 	import ThreeStateRadio from '../../../ThreeStateRadio.svelte';
-	import { ColumnType } from '../../Types/Columns/ColumnType.js';
 	import { TableContext } from '../../Types/Context/TableContext.svelte.js';
 	import type { Primitive } from '../../Types/Context/TableInitOptions.js';
 	import { Size } from '../../../../Types/Internal/Size.js';
@@ -18,7 +17,6 @@
 
 	const { columnDef }: ColumnListRowProps<T> = $props();
 
-	const isExpandColumn = $derived(columnDef?.columnType === ColumnType.Expand);
 
 	/**
 	 * Position of this column inside the sorted column list, used to
@@ -412,13 +410,9 @@
 						Expand columns can never be pinned, so the group goes
 						fully disabled for them.
 					-->
-					<div
-						class="pin-selector"
-						class:disabled={isExpandColumn}
-					>
+					<div class="pin-selector">
 						<ThreeStateRadio
 							value={pinSide}
-							disabled={isExpandColumn}
 							noLabel="Pin to left"
 							neutralLabel="Unpinned"
 							yesLabel="Pin to right"

package/dist/Components/Table/Body/Rows/Columns/BubbleCell.svelte

@@ -83,11 +83,17 @@
 >
 	<div class="bubble-parent">
 		{#await values then values}
-			<!-- The label string itself is not guaranteed unique so the key combines
-			     index and value; both pieces are required because duplicate labels
-			     would otherwise collapse and reordering with identical labels
-			     would force unrelated bubbles to swap. -->
-			{#each values as value, index (`${index}:${value}`)}
+			<!-- `maxBubbles` (default 3) caps how many pills render inline;
+			     anything beyond gets a single `"+N more"` overflow chip with
+			     the hidden labels as a hover tooltip. Key combines index and
+			     value because duplicate labels would otherwise collapse and
+			     reordering with identical labels would force unrelated
+			     bubbles to swap. -->
+			{@const maxBubbles = (cell.column.columnDef as BubbleDef<T>).maxBubbles ?? 3}
+			{@const visibleBubbles = values.slice(0, maxBubbles)}
+			{@const overflowCount = Math.max(0, values.length - maxBubbles)}
+			{@const overflowTitle = values.slice(maxBubbles).join(', ')}
+			{#each visibleBubbles as value, index (`${index}:${value}`)}
 				{@const colourPromise = (cell.column.columnDef as BubbleDef<T>).getColour?.(
 					cell.row.original,
 					cell.row.originalIndex,
@@ -105,6 +111,12 @@
 					{/await}
 				{/if}
 			{/each}
+			{#if overflowCount > 0}
+				<span
+					class="bubble-overflow"
+					title={overflowTitle}
+				>+{overflowCount} more</span>
+			{/if}
 		{/await}
 	</div>
 </div>
@@ -186,7 +198,7 @@
 
 div.bubble-parent {
   display: flex;
-  flex-flow: row wrap;
+  flex-flow: row nowrap;
   max-width: 100%;
   height: 100%;
   overflow-x: clip;
@@ -194,4 +206,16 @@ div.bubble-parent {
   align-items: center;
   gap: 0.75rem;
   --line-height: 1;
+}
+
+.bubble-overflow {
+  flex-shrink: 0;
+  padding: 0.125rem 0.5rem;
+  border-radius: 9999px;
+  background-color: #e9ecf1;
+  color: #647d8e;
+  font-size: 0.75rem;
+  font-weight: 500;
+  white-space: nowrap;
+  cursor: default;
 }</style>

package/dist/Components/Table/ColumnFactory.svelte.js

@@ -370,6 +370,7 @@ export function createColumnFactory() {
                 id,
                 ...commonProps(opts, 'bubble'),
                 accessorFn: opts.value,
+                maxBubbles: opts.maxBubbles,
                 getColour: opts.colour,
                 // Default to a string-typed filter so bubble columns appear in
                 // the quick-filter row and advanced filter panel by default

package/dist/Components/Table/Types/Columns/Definitions/Display/BubbleDef.svelte.d.ts

@@ -14,6 +14,10 @@ import { AbstractDisplayDef, type AbstractDisplayDefProps } from './AbstractDisp
 export interface BubbleDefProps<T extends object, in FilterValueType, out FilterOptionsType> extends AbstractDisplayDefProps<T, FilterValueType, FilterOptionsType> {
     /** Per-bubble colour mapper. Invoked per bubble value per render. */
     getColour?: (item: T, index: number, value: string) => BubbleColour | Promise<BubbleColour | null | undefined>;
+    /** Maximum number of pills shown per cell before the overflow chip
+     *  kicks in. Pills beyond this cap are hidden and a single
+     *  `"+N more"` chip is rendered in their place. Defaults to 3. */
+    maxBubbles?: number;
 }
 /**
  * `BubbleDef<T, FilterValueType, FilterOptionsType>` renders the cell
@@ -29,4 +33,6 @@ export declare class BubbleDef<T extends object, in FilterValueType = StringFilt
     set filterFn(v: FilterFn<T, FilterValueType> | undefined);
     /** Per-bubble colour mapper. */
     readonly getColour: ((item: T, index: number, value: string) => BubbleColour | Promise<BubbleColour | null | undefined>) | undefined;
+    /** Cap on rendered pills before the overflow chip. */
+    readonly maxBubbles: number;
 }

package/dist/Components/Table/Types/Columns/Definitions/Display/BubbleDef.svelte.js

@@ -15,6 +15,7 @@ export class BubbleDef extends AbstractDisplayDef {
         // props.getColour re-derives the wrapper and discards the stale cache.
         this.getColour = $derived(memoiseRowValueAccessor(props.getColour));
         this._filterFn = $state(props.filterFn);
+        this.maxBubbles = $derived(props.maxBubbles ?? 3);
     }
     _filterFn;
     /** Filter predicate. Reassignable. */
@@ -26,4 +27,6 @@ export class BubbleDef extends AbstractDisplayDef {
     }
     /** Per-bubble colour mapper. */
     getColour;
+    /** Cap on rendered pills before the overflow chip. */
+    maxBubbles;
 }

package/dist/Components/Table/Types/Public/ColumnOptions.d.ts

@@ -208,6 +208,12 @@ export interface BubbleColumnOptions<TRow extends object, TValue = unknown> exte
      * supported (scoria internally wraps it in `Promise.resolve`).
      */
     getOptions?: () => ReadonlyArray<SelectOption<TValue>> | Promise<ReadonlyArray<SelectOption<TValue>>>;
+    /**
+     * Maximum number of pills rendered before they collapse into an
+     * overflow chip (`"+N more"`). Defaults to 3. Set a larger number
+     * to show more pills inline; set `Infinity` to disable the cap.
+     */
+    maxBubbles?: number;
 }
 /** Options for `col.progress({ header, value, ... })`. Renders a horizontal
  *  progress bar from a numeric ratio. */

package/dist/scss/_mixins.scss

@@ -1866,19 +1866,22 @@
 	div.input-cell {
 		background-color: colours.$ui-blue-1;
 		height: var(--height);
-		overflow: visible;
+		// `overflow-x: clip` so a narrow filter cell's internal widget
+		// (select chevron, filter-mode funnel, etc.) cannot paint past
+		// the column boundary. The column-separator border now lives on
+		// the outer grid item (`.quick-filter-row > .cell` in
+		// `TableBody.svelte`), so clipping here keeps both the widget
+		// AND the cell's own background inside the track and the border
+		// stays visible. `overflow-y: visible` preserves the inline
+		// dropdown spillage for select / date popups.
+		overflow-x: clip;
+		overflow-y: visible;
 		padding-left: 0;
 		padding-right: 0;
-		// Reassert the column-separator border-right here so it survives
-		// even when a narrow select-filter cell's internal widget (the
-		// SingleSelect / MultiSelect dropdown trigger) paints flush to
-		// the right edge. Without this rule, two adjacent select filters
-		// visually merge because the inner widget's background covers
-		// the cell's table-cell-basic border. `!important` is here to
-		// override the more-specific .focusable rule from
-		// table-cell-basic that occasionally re-paints the right edge
-		// transparent during focus.
-		border-right: solid 1px colours.$ui-blue-4 !important;
+		// Inner widget no longer paints a border-right - the outer cell
+		// wrapper owns the column divider so adjacent filters cannot
+		// visually merge regardless of what the widget paints inside.
+		border-right: none;
 		box-sizing: border-box;
 
 		div.stick-right {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lavalogic/scoria",
   "description": "Svelte components used for the FloWMS Web Frontend",
-  "version": "0.37.19",
+  "version": "0.37.20",
   "publishConfig": {
     "access": "restricted"
   },