@lavalogic/scoria 0.9.4 → 0.10.1

package/dist/Components/Action.svelte

@@ -226,7 +226,7 @@ button.max-height {
 button.max-width {
   width: 100%;
 }
-button:focus, button:focus-visible, button:focus-within {
+button:not(.with-outline):focus, button:not(.with-outline):focus-visible, button:not(.with-outline):focus-within {
   outline: none !important;
 }
 button.auxiliary {

package/dist/Components/AlertModal.svelte

@@ -143,7 +143,7 @@ dialog .modal-main {
   overflow: auto;
 }
 dialog .modal-main.noscroll {
-  overflow: auto;
+  overflow: visible;
 }
 dialog .footer {
   flex-shrink: 0;

package/dist/Components/LoadingModal.svelte

@@ -85,7 +85,7 @@ dialog .modal-main {
   overflow: auto;
 }
 dialog .modal-main.noscroll {
-  overflow: auto;
+  overflow: visible;
 }
 dialog .footer {
   flex-shrink: 0;

package/dist/Components/Modal.svelte

@@ -275,7 +275,7 @@ dialog .modal-main {
   overflow: auto;
 }
 dialog .modal-main.noscroll {
-  overflow: auto;
+  overflow: visible;
 }
 dialog .footer {
   flex-shrink: 0;

package/dist/Components/MultiSelect.svelte

@@ -233,8 +233,8 @@
 </div>
 
 <style>.select-wrapper {
-  min-width: var(--input-min-width);
-  width: min(100%, max(var(--input-width), 12rem));
+  min-width: var(--input-min-width, 12rem);
+  width: var(--input-width, 100%);
   height: max(var(--input-height, 3rem));
   display: flex;
   gap: 2rem;

package/dist/Components/QuerySelect.svelte

@@ -394,8 +394,8 @@
 <!-- #region CSS
  -->
 <style>.select-wrapper {
-  min-width: var(--input-min-width);
-  width: min(100%, max(var(--input-width), 12rem));
+  min-width: var(--input-min-width, 12rem);
+  width: var(--input-width, 100%);
   height: max(var(--input-height, 3rem));
   display: flex;
   gap: 2rem;

package/dist/Components/SingleSelect.svelte

@@ -302,8 +302,8 @@
 </div>
 
 <style>.select-wrapper {
-  min-width: var(--input-min-width);
-  width: min(100%, max(var(--input-width), 12rem));
+  min-width: var(--input-min-width, 12rem);
+  width: var(--input-width, 100%);
   height: max(var(--input-height, 3rem));
   display: flex;
   gap: 2rem;

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

@@ -10,16 +10,19 @@
 
 	export interface FocusableImmutableCellProps<T extends object> {
 		cell: TableCell<T>;
-		value?: unknown;
 		children?: Snippet;
 	}
 </script>
 
 <script lang="ts" generics="T extends object">
-	const { cell, value: externalValue, children }: FocusableImmutableCellProps<T> = $props();
+	const { cell, children }: FocusableImmutableCellProps<T> = $props();
 
 	const value = $derived(cell.getValue());
 
+	const visibleValue = $derived(
+		cell.column.columnDef.getDisplayValue?.(cell.row.original, cell.row.originalIndex) ?? value
+	);
+
 	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
 	const toastContext = getContext<ToastContext>(ToastContext.identifier);
 
@@ -68,27 +71,19 @@ class:bottom={focusDetails.bottomEdge} -->
 	}}
 >
 	{#if hasValue}
-		{#if externalValue}
-			{#await externalValue}
-				loading…
-			{:then externalValue}
-				{externalValue}
-			{/await}
-		{:else}
-			{#await value}
-				loading…
-			{:then value}
-				{(value instanceof Date
-					? value.toLocaleDateString()
-					: options.length
-						? options.find((it) => it.value === value)?.label
-						: value) ??
-					value ??
-					''}
-			{:catch e}
-				{e?.toString()}
-			{/await}
-		{/if}
+		{#await visibleValue}
+			loading…
+		{:then visibleValue}
+			{(visibleValue instanceof Date
+				? visibleValue.toLocaleDateString()
+				: options.length
+					? options.find((it) => it.value === visibleValue)?.label
+					: visibleValue) ??
+				visibleValue ??
+				''}
+		{:catch e}
+			{e?.toString()}
+		{/await}
 	{:else if children}
 		<div
 			class="slot-wrapper"

package/dist/Components/Table/Body/Rows/Columns/FocusableImmutableCell.svelte.d.ts

@@ -2,7 +2,6 @@ import { type Snippet } from 'svelte';
 import type { TableCell } from '../../../Types/Columns/TableCell.js';
 export interface FocusableImmutableCellProps<T extends object> {
     cell: TableCell<T>;
-    value?: unknown;
     children?: Snippet;
 }
 declare function $$render<T extends object>(): {

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

@@ -58,9 +58,7 @@
 {#if cell.column.getIsVisible()}
 	{@const columnDef = cell.column.columnDef}
 
-	{#if cell.column.columnDef instanceof ValidityDef}
-		<ValidityCell {cell} />
-	{:else if columnDef instanceof RowSelectionDef}
+	{#if columnDef instanceof RowSelectionDef}
 		<TableRowSelectionCheckbox {cell} />
 	{:else if isActionsDef(cell)}
 		<ActionsCell {cell} />
@@ -68,6 +66,18 @@
 		<ExpandCell {cell} {expandedColumnDef} {onExpandChange} />
 	{:else if columnDef.columnType !== ColumnType.Display}
 		<AccessorComponent {cell} />
+	{:else if cell.column.columnDef instanceof AbstractDisplayDef}
+		{#if cell.column.columnDef.displayType === DisplayType.Bubbles}
+			<BubbleCell {cell} />
+		{:else if cell.column.columnDef.displayType === DisplayType.Validity}
+			<ValidityCell {cell} />
+		{:else if isProgressBarTableCell(cell)}
+			<ProgressCell {cell} />
+		{:else if cell.column.columnDef.displayType === DisplayType.Normal}
+			<FocusableImmutableCell {cell} />
+		{:else}
+			{@debug cell}
+		{/if}
 	{:else}
 		{@const valueOrComponentPromise =
 			cell.column.columnDef.accessorFn?.(cell.row.original, cell.row.originalIndex) ??
@@ -75,35 +85,23 @@
 			null}
 
 		{#await valueOrComponentPromise}
-			<FocusableImmutableCell value={valueOrComponentPromise} {cell} />
-		{:then value}
-			{@render ValueFallback(value)}
+			<FocusableImmutableCell {cell} />
+		{:then Value}
+			{#if Value == null || typeof Value === 'string' || typeof Value == 'number'}
+				<FocusableImmutableCell {cell} />
+			{:else if valueOrComponentIsConstructor(Value)}
+				<FocusableImmutableCell {cell}>
+					<Value {cell} />
+				</FocusableImmutableCell>
+			{:else if typeof Value === 'function'}
+				<FocusableImmutableCell {cell}>
+					{@render Value(cell)}
+				</FocusableImmutableCell>
+			{:else}
+				{@debug cell}
+			{/if}
 		{:catch e}
 			<FocusableImmutableCell value={e?.toString()} {cell} />
 		{/await}
 	{/if}
 {/if}
-
-{#snippet ValueFallback(Value: unknown)}
-	{#if cell.column.columnDef instanceof AbstractDisplayDef && Array.isArray(Value)}
-		{#if cell.column.columnDef.displayType === DisplayType.Bubbles}
-			<BubbleCell {cell} />
-		{:else if isProgressBarTableCell(cell)}
-			<ProgressCell {cell} />
-		{:else}
-			{@debug cell}
-		{/if}
-	{:else if Value == null || typeof Value === 'string' || typeof Value == 'number'}
-		<FocusableImmutableCell value={Value} {cell} />
-	{:else if valueOrComponentIsConstructor(Value)}
-		<FocusableImmutableCell {cell}>
-			<Value {cell} />
-		</FocusableImmutableCell>
-	{:else if typeof Value === 'function'}
-		<FocusableImmutableCell {cell}>
-			{@render Value(cell)}
-		</FocusableImmutableCell>
-	{:else}
-		{@debug cell}
-	{/if}
-{/snippet}

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

@@ -32,7 +32,7 @@
 	const selectValue = $derived(cell.getValue() as T | null | undefined);
 
 	const visibleValue = $derived(
-		cell.column.columnDef.getDisplayValue!(cell.row.original, cell.row.originalIndex)
+		cell.column.columnDef.getDisplayValue(cell.row.original, cell.row.originalIndex)
 	);
 
 	const optional = $derived((cell.column.columnDef as SelectDef<T>).optional ?? false);

package/dist/Components/Table/Types/Columns/Definitions/Accessors/QueryDef.svelte.d.ts

@@ -12,7 +12,7 @@ export declare class QueryDef<T extends object> extends AccessorDef<T, SelectFil
     readonly accessorType: "Query";
     constructor(props: QueryDefProps<T>);
     readonly filterFn: CustomFilterFn | FilterFn<T, SelectFilterValueType<T>> | undefined;
-    get getDisplayValue(): (item: T, index: number) => string | null | Promise<string | null>;
+    getDisplayValue: (item: T, index: number) => string | null | Promise<string | null>;
     readonly query: (queryString: string, item: T, index: number) => Promise<Array<SelectOption<unknown>>>;
     readonly clearable: boolean;
 }

package/dist/Components/Table/Types/Columns/Definitions/Accessors/QueryDef.svelte.js

@@ -8,9 +8,6 @@ export class QueryDef extends AccessorDef {
         this.clearable = $derived(props.clearable ?? true);
     }
     filterFn;
-    get getDisplayValue() {
-        return this._getDisplayValue;
-    }
     query;
     clearable;
 }

package/dist/Components/Table/Types/Columns/Definitions/Accessors/SelectDef.svelte.d.ts

@@ -21,5 +21,6 @@ export declare class SelectDef<T extends object> extends AccessorDef<T, SelectFi
     readonly optional: boolean;
     readonly clearable: boolean;
     readonly getSpecificOptions?: (item: T, index: number) => Array<SelectOption<unknown>> | Promise<Array<SelectOption<unknown>>>;
+    getDisplayValue: (item: T, index: number) => string | null | Promise<string | null>;
     getOptions: () => Array<SelectOption<unknown>> | Promise<Array<SelectOption<unknown>>>;
 }

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

@@ -55,9 +55,7 @@ export declare abstract class ColumnDef<T extends object, FilterFnType = undefin
     private _filterValueType;
     get filterValueType(): FilterValueType | undefined;
     set filterValueType(v: FilterValueType | undefined);
-    protected _getDisplayValue: ((item: T, index: number) => string | null | Promise<string | null>) | undefined;
-    get getDisplayValue(): ((item: T, index: number) => string | null | Promise<string | null>) | undefined;
-    set getDisplayValue(v: ((item: T, index: number) => string | null | Promise<string | null>) | undefined);
+    readonly getDisplayValue: ((item: T, index: number) => string | null | Promise<string | null>) | undefined;
     toJSON(): object;
     readonly isEditable: (item: T, index: number) => boolean | Promise<boolean>;
     readonly resizable: boolean;

package/dist/Components/Table/Types/Columns/Definitions/ColumnDef.svelte.js

@@ -14,7 +14,7 @@ export class ColumnDef {
         this.resizable = $derived(props.resizable ?? true);
         this.header = $derived(props.header);
         this._filterValueType = $derived(props.filterValueType);
-        this._getDisplayValue = $derived(props.getDisplayValue);
+        this.getDisplayValue = $derived(props.getDisplayValue);
         this.debug = $derived(props.debug ?? false);
         this.getOptions = $derived(props.getOptions);
     }
@@ -75,13 +75,7 @@ export class ColumnDef {
     set filterValueType(v) {
         this._filterValueType = v;
     }
-    _getDisplayValue;
-    get getDisplayValue() {
-        return this._getDisplayValue;
-    }
-    set getDisplayValue(v) {
-        this._getDisplayValue = v;
-    }
+    getDisplayValue;
     toJSON() {
         return { columnType: this.columnType, id: this.id, header: this.header };
     }

package/dist/Components/Table/Types/Columns/DisplayType.d.ts

@@ -2,7 +2,6 @@ export declare const DisplayType: {
     readonly Normal: "Normal";
     readonly Bubbles: "Bubbles";
     readonly Progress: "Progress";
-    readonly Icon: "Icon";
     readonly Validity: "Validity";
 };
 export type DisplayType = (typeof DisplayType)[keyof typeof DisplayType];

package/dist/Components/Table/Types/Columns/DisplayType.js

@@ -2,7 +2,7 @@ export const DisplayType = {
     Normal: 'Normal',
     Bubbles: 'Bubbles',
     Progress: 'Progress',
-    Icon: 'Icon',
+    // Icon: 'Icon', // NYI
     Validity: 'Validity'
 };
 Object.freeze(DisplayType);

package/dist/Components/Touch/NumberModal.svelte

@@ -116,7 +116,7 @@ dialog .modal-main {
   overflow: auto;
 }
 dialog .modal-main.noscroll {
-  overflow: auto;
+  overflow: visible;
 }
 dialog .footer {
   flex-shrink: 0;

package/dist/Components/Touch/SelectModal.svelte

@@ -146,7 +146,7 @@ dialog .modal-main {
   overflow: auto;
 }
 dialog .modal-main.noscroll {
-  overflow: auto;
+  overflow: visible;
 }
 dialog .footer {
   flex-shrink: 0;

package/dist/Components/Touch/TextAreaModal.svelte

@@ -129,7 +129,7 @@ dialog .modal-main {
   overflow: auto;
 }
 dialog .modal-main.noscroll {
-  overflow: auto;
+  overflow: visible;
 }
 dialog .footer {
   flex-shrink: 0;

package/dist/Components/Touch/TextModal.svelte

@@ -172,7 +172,7 @@ dialog .modal-main {
   overflow: auto;
 }
 dialog .modal-main.noscroll {
-  overflow: auto;
+  overflow: visible;
 }
 dialog .footer {
   flex-shrink: 0;

package/dist/scss/_mixins.scss

@@ -405,7 +405,7 @@
 			overflow: auto;
 
 			&.noscroll {
-				overflow: auto;
+				overflow: visible;
 			}
 		}
 		.footer {
@@ -2356,8 +2356,8 @@
 		// --input-height: #{sizing.$input-height};
 		// --sv-min-height: 44px;
 
-		min-width: var(--input-min-width);
-		width: min(100%, max(var(--input-width), #{sizing.$input-width}));
+		min-width: var(--input-min-width, #{sizing.$input-width});
+		width: var(--input-width, 100%);
 		// height: min(var(--max-height), max(var(--input-height, 2rem), #{sizing.$input-height}));
 		height: max(var(--input-height, #{sizing.$input-height}));
 

package/package.json

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