@lavalogic/scoria 0.40.33 → 0.40.34

package/dist/Components/Table/Misc/FilterPanel.svelte

@@ -1,8 +1,8 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="T extends object, IdType extends Primitive"
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="T extends object, IdType extends Primitive"
 >import Action from "../../Action.svelte";
 import TextInput from "../../TextInput.svelte";
 import { Colour, ColourSet } from "../../../scss/colours.js";
@@ -102,79 +102,79 @@ function toggleGroup(name) {
 function noopKeydown(_e) {
 	// intentionally empty
 }
-</script>
-
-<section class="side-panel-section">
-	<header class="side-panel-header">
-		<h2>{i18n['scoria.action.advanced_filter']()}</h2>
-	</header>
-
-	<div class="toolbar">
-		<!-- Quick-switch dropdown for saved filter sets. Sits above the
-		     search box; saving a filter is done from the Table
-		     Configuration modal's "Save a new Filter" tab. -->
-		<TableViewDropdown kind="filter" />
-		<div class="quick-find">
-			<TextInput
-				labelTop={i18n['scoria.label.quick_find_filter']()}
-				placeholder={i18n['scoria.label.filter_placeholder']()}
-				bind:value={quickFindValue}
-				rightIcon={{ name: 'search', size: Size.Medium }}
-				onkeydown={noopKeydown}
-			/>
-		</div>
-	</div>
-
-	<div class="side-panel-body">
-		{#if filterableDefs.length === 0}
-			<p class="empty">{i18n['scoria.text.no_filterable_columns']()}</p>
-		{:else if matchingDefs.length === 0}
-			<p class="empty">
-				{i18n['scoria.text.no_filters_match']({ query: quickFindValue })}
-			</p>
-		{:else}
-			<div class="groups">
-				{#each orderedGroupNames as groupName (groupName)}
-					{@const defsInGroup = groupedDefs.get(groupName) ?? []}
-					{@const isCollapsed = collapsedGroups.has(groupName)}
-					{#if defsInGroup.length > 0}
-						<section
-							class="group"
-							class:collapsed={isCollapsed}
-						>
-							<header class="group-header">
-								<h3>{groupName}</h3>
-								<Action
-									label={isCollapsed ? `Expand ${groupName}` : `Collapse ${groupName}`}
-									colourSet={ColourSet.Auxiliary}
-									icon={{
-										name: isCollapsed ? 'circle-plus' : 'circle-minus',
-										size: Size.Medium,
-										colour: Colour['$ui-blue-9'],
-									}}
-									onclick={() => {
-										toggleGroup(groupName);
-									}}
-								/>
-							</header>
-							{#if !isCollapsed}
-								<div class="group-body">
-									{#each defsInGroup as def (def.id)}
-										<FilterInput
-											{def}
-											customFilters={tableContext.remoteFilters}
-										/>
-									{/each}
-								</div>
-							{/if}
-						</section>
-					{/if}
-				{/each}
-			</div>
-		{/if}
-	</div>
-</section>
-
+</script>
+
+<section class="side-panel-section">
+	<header class="side-panel-header">
+		<h2>{i18n['scoria.action.advanced_filter']()}</h2>
+	</header>
+
+	<div class="toolbar">
+		<!-- Quick-switch dropdown for saved filter sets. Sits above the
+		     search box; saving a filter is done from the Table
+		     Configuration modal's "Save a new Filter" tab. -->
+		<TableViewDropdown kind="filter" />
+		<div class="quick-find">
+			<TextInput
+				labelTop={i18n['scoria.label.quick_find_filter']()}
+				placeholder={i18n['scoria.label.filter_placeholder']()}
+				bind:value={quickFindValue}
+				rightIcon={{ name: 'search', size: Size.Medium }}
+				onkeydown={noopKeydown}
+			/>
+		</div>
+	</div>
+
+	<div class="side-panel-body">
+		{#if filterableDefs.length === 0}
+			<p class="empty">{i18n['scoria.text.no_filterable_columns']()}</p>
+		{:else if matchingDefs.length === 0}
+			<p class="empty">
+				{i18n['scoria.text.no_filters_match']({ query: quickFindValue })}
+			</p>
+		{:else}
+			<div class="groups">
+				{#each orderedGroupNames as groupName (groupName)}
+					{@const defsInGroup = groupedDefs.get(groupName) ?? []}
+					{@const isCollapsed = collapsedGroups.has(groupName)}
+					{#if defsInGroup.length > 0}
+						<section
+							class="group"
+							class:collapsed={isCollapsed}
+						>
+							<header class="group-header">
+								<h3>{groupName}</h3>
+								<Action
+									label={isCollapsed ? `Expand ${groupName}` : `Collapse ${groupName}`}
+									colourSet={ColourSet.Auxiliary}
+									icon={{
+										name: isCollapsed ? 'circle-plus' : 'circle-minus',
+										size: Size.Medium,
+										colour: Colour['$ui-blue-9'],
+									}}
+									onclick={() => {
+										toggleGroup(groupName);
+									}}
+								/>
+							</header>
+							{#if !isCollapsed}
+								<div class="group-body">
+									{#each defsInGroup as def (def.id)}
+										<FilterInput
+											{def}
+											customFilters={tableContext.remoteFilters}
+										/>
+									{/each}
+								</div>
+							{/if}
+						</section>
+					{/if}
+				{/each}
+			</div>
+		{/if}
+	</div>
+</section>
+
 <style>.side-panel-section {
   display: flex;
   flex-flow: column nowrap;
@@ -313,4 +313,4 @@ p.empty {
   display: flex;
   flex-flow: column nowrap;
   gap: 0.5rem;
-}</style>
+}</style>

package/dist/Components/Table/Misc/FilterPanelModal.svelte

@@ -1,28 +1,28 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	module
+<svelte:options runes />
+
+<script
+	lang="ts"
+	module
 >import DesktopModal from "../../DesktopModal.svelte";
 import { cssLength } from "../../../Helpers/Helpers.svelte.js";
 import { m as i18n } from "../../../paraglide/messages.js";
 import FilterPanel from "./FilterPanel.svelte";
-</script>
-
+</script>
+
 <script lang="ts">const { onclose } = $props();
-</script>
-
-<DesktopModal
-	width={cssLength('800px')}
-	headerLabel={i18n['scoria.label.filter_by']()}
-	onclose={() => onclose?.()}
-	buttons={[{ label: i18n['scoria.action.close'](), callback: () => onclose?.() }]}
->
-	<div class="flex">
-		<FilterPanel />
-	</div>
-</DesktopModal>
-
+</script>
+
+<DesktopModal
+	width={cssLength('800px')}
+	headerLabel={i18n['scoria.label.filter_by']()}
+	onclose={() => onclose?.()}
+	buttons={[{ label: i18n['scoria.action.close'](), callback: () => onclose?.() }]}
+>
+	<div class="flex">
+		<FilterPanel />
+	</div>
+</DesktopModal>
+
 <style>.flex {
   display: flex;
   flex-flow: column nowrap;
@@ -30,4 +30,4 @@ import FilterPanel from "./FilterPanel.svelte";
   width: 100%;
   flex: 1;
   overflow: hidden;
-}</style>
+}</style>

package/dist/Components/Table/Misc/ShareViewModal.svelte

@@ -1,8 +1,8 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="T extends object, IdType extends Primitive"
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="T extends object, IdType extends Primitive"
 >import Button from "../../Button.svelte";
 import DesktopModal from "../../DesktopModal.svelte";
 import Icon from "../../Icon.svelte";
@@ -157,118 +157,118 @@ async function save() {
 		saving = false;
 	}
 }
-</script>
-
-<DesktopModal
-	headerLabel={i18n['scoria.label.share_header']({ name: view.name })}
-	headerSubtitle={view.kind === 'filter'
-		? i18n['scoria.text.share_filter_subtitle']()
-		: i18n['scoria.text.share_layout_subtitle']()}
-	onclose={() => {
-		if (!saving) {
-			onclose();
-		}
-	}}
-	width={cssLength('40vw')}
-	minWidth={cssLength('32rem')}
-	buttons={[
-		{
-			label: i18n['scoria.action.cancel'](),
-			callback: () => {
-				if (!saving) {
-					onclose();
-				}
-			},
-			disabled: saving,
-		},
-		{
-			label: saving ? i18n['scoria.action.saving']() : i18n['scoria.action.save'](),
-			callback: () => {
-				void save();
-			},
-			colourSet: ColourSet.Primary,
-			disabled: saving || !dirty || allUsers === null,
-		},
-	]}
->
-	<div class="share-body">
-		{#if errorMessage}
-			<div
-				class="error-banner"
-				role="alert"
-			>
-				<Icon
-					name="circle-exclamation"
-					size={Size.Small}
-				/>
-				<span>{errorMessage}</span>
-			</div>
-		{/if}
-
-		<div class="picker">
-			{#if loadingUsers && allUsers === null}
-				<InfoAlert>{i18n['scoria.message.loading_users']()}</InfoAlert>
-			{:else if allUsers !== null}
-				<MultiSelect
-					label={i18n['scoria.label.users']()}
-					name="User"
-					placeholder={i18n['scoria.label.select_user']()}
-					options={allUsers as Array<DatatableViewUser>}
-					labelProp="displayName"
-					valueProp="id"
-					valueAsObject={true}
-					selectedValues={selected}
-					onchange={(values) => {
-						selected = values;
-					}}
-				/>
-			{/if}
-		</div>
-
-		{#if selected.length === 0}
-			<InfoAlert>
-				{view.kind === 'filter'
-					? i18n['scoria.text.no_users_filter']()
-					: i18n['scoria.text.no_users_layout']()}
-			</InfoAlert>
-		{:else}
-			<ul class="user-card-list">
-				{#each selected as user (user.id)}
-					<li class="user-card">
-						<div class="user-info">
-							<Icon
-								name="user-3"
-								size={Size.Medium}
-							/>
-							<span class="user-name">{user.displayName}</span>
-						</div>
-						<div class="user-meta">
-							<!--
-								v1 sharing exposes a single role - subscriber - so
-								the "permission" surface is informational only. The
-								backend's `editor` / `systemOwned` flags are
-								reserved no-ops in v1 (see `DatatableView` DTO
-								JSDoc); scoria never sets them.
-							-->
-							<span class="permission-pill">{i18n['scoria.label.subscriber']()}</span>
-							<Button
-								variant={Variant.Secondary}
-								size={Size.MediumSmall}
-								nowrap
-								iconLeft={{ name: 'circle-cross', size: Size.Small }}
-								disabled={saving}
-								onclick={() => {
-									removeFromSelection(user.id);
-								}}>{i18n['scoria.action.remove']()}</Button
-							>
-						</div>
-					</li>
-				{/each}
-			</ul>
-		{/if}
-	</div>
-</DesktopModal>
-
+</script>
+
+<DesktopModal
+	headerLabel={i18n['scoria.label.share_header']({ name: view.name })}
+	headerSubtitle={view.kind === 'filter'
+		? i18n['scoria.text.share_filter_subtitle']()
+		: i18n['scoria.text.share_layout_subtitle']()}
+	onclose={() => {
+		if (!saving) {
+			onclose();
+		}
+	}}
+	width={cssLength('40vw')}
+	minWidth={cssLength('32rem')}
+	buttons={[
+		{
+			label: i18n['scoria.action.cancel'](),
+			callback: () => {
+				if (!saving) {
+					onclose();
+				}
+			},
+			disabled: saving,
+		},
+		{
+			label: saving ? i18n['scoria.action.saving']() : i18n['scoria.action.save'](),
+			callback: () => {
+				void save();
+			},
+			colourSet: ColourSet.Primary,
+			disabled: saving || !dirty || allUsers === null,
+		},
+	]}
+>
+	<div class="share-body">
+		{#if errorMessage}
+			<div
+				class="error-banner"
+				role="alert"
+			>
+				<Icon
+					name="circle-exclamation"
+					size={Size.Small}
+				/>
+				<span>{errorMessage}</span>
+			</div>
+		{/if}
+
+		<div class="picker">
+			{#if loadingUsers && allUsers === null}
+				<InfoAlert>{i18n['scoria.message.loading_users']()}</InfoAlert>
+			{:else if allUsers !== null}
+				<MultiSelect
+					label={i18n['scoria.label.users']()}
+					name="User"
+					placeholder={i18n['scoria.label.select_user']()}
+					options={allUsers as Array<DatatableViewUser>}
+					labelProp="displayName"
+					valueProp="id"
+					valueAsObject={true}
+					selectedValues={selected}
+					onchange={(values) => {
+						selected = values;
+					}}
+				/>
+			{/if}
+		</div>
+
+		{#if selected.length === 0}
+			<InfoAlert>
+				{view.kind === 'filter'
+					? i18n['scoria.text.no_users_filter']()
+					: i18n['scoria.text.no_users_layout']()}
+			</InfoAlert>
+		{:else}
+			<ul class="user-card-list">
+				{#each selected as user (user.id)}
+					<li class="user-card">
+						<div class="user-info">
+							<Icon
+								name="user-3"
+								size={Size.Medium}
+							/>
+							<span class="user-name">{user.displayName}</span>
+						</div>
+						<div class="user-meta">
+							<!--
+								v1 sharing exposes a single role - subscriber - so
+								the "permission" surface is informational only. The
+								backend's `editor` / `systemOwned` flags are
+								reserved no-ops in v1 (see `DatatableView` DTO
+								JSDoc); scoria never sets them.
+							-->
+							<span class="permission-pill">{i18n['scoria.label.subscriber']()}</span>
+							<Button
+								variant={Variant.Secondary}
+								size={Size.MediumSmall}
+								nowrap
+								iconLeft={{ name: 'circle-cross', size: Size.Small }}
+								disabled={saving}
+								onclick={() => {
+									removeFromSelection(user.id);
+								}}>{i18n['scoria.action.remove']()}</Button
+							>
+						</div>
+					</li>
+				{/each}
+			</ul>
+		{/if}
+	</div>
+</DesktopModal>
+
 <style>.share-body {
   display: flex;
   flex-flow: column nowrap;
@@ -351,4 +351,4 @@ async function save() {
   border-radius: 999px;
   background-color: #e9ecf1;
   color: #3a4952;
-}</style>
+}</style>

package/dist/Components/Table/Misc/SidePanel.svelte

@@ -1,34 +1,34 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	module
+<svelte:options runes />
+
+<script
+	lang="ts"
+	module
 >import { quintOut } from "svelte/easing";
 import { slide } from "svelte/transition";
 import { Delay } from "../../../Delay/Delay.js";
 import { usePrefersReducedMotion } from "../../../Helpers/prefersReducedMotion.svelte.js";
 import { ToolbarPosition } from "../Types/Toolbar/ToolbarPosition.js";
-</script>
-
+</script>
+
 <script lang="ts">const { toolbarPosition, onkeydown, ariaLabel, children } = $props();
 const reducedMotion = usePrefersReducedMotion();
 const slideDuration = $derived(reducedMotion.matches ? 0 : Delay.Default);
-</script>
-
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<div
-	class="side-panel"
-	class:left={toolbarPosition === ToolbarPosition.Left}
-	class:right={toolbarPosition === ToolbarPosition.Right}
-	aria-label={ariaLabel}
-	{onkeydown}
-	transition:slide={{ duration: slideDuration, easing: quintOut, axis: 'x' }}
->
-	<div class="side-content">
-		{#if children}{@render children()}{/if}
-	</div>
-</div>
-
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	class="side-panel"
+	class:left={toolbarPosition === ToolbarPosition.Left}
+	class:right={toolbarPosition === ToolbarPosition.Right}
+	aria-label={ariaLabel}
+	{onkeydown}
+	transition:slide={{ duration: slideDuration, easing: quintOut, axis: 'x' }}
+>
+	<div class="side-content">
+		{#if children}{@render children()}{/if}
+	</div>
+</div>
+
 <style>.side-panel {
   display: flex;
   flex-shrink: 0;
@@ -48,4 +48,4 @@ const slideDuration = $derived(reducedMotion.matches ? 0 : Delay.Default);
   flex-flow: column nowrap;
   flex: 1;
   width: 400px;
-}</style>
+}</style>