@softwareone/spi-sv5-library 1.5.5 → 1.5.7

package/dist/Form/FormController/Form.svelte

@@ -18,6 +18,7 @@
 	type Schema = z.infer<typeof schema>;
 
 	interface Props {
+		id?: string;
 		initialData: Schema;
 		action: string;
 		schema: z.ZodObject;
@@ -28,6 +29,7 @@
 	}
 
 	let {
+		id,
 		initialData,
 		action,
 		schema,
@@ -145,17 +147,17 @@
 <Spinner show={isLoading} />
 
 <form
-	id="form"
+	id={id ? `form-${id}` : 'form'}
 	method="POST"
 	action="?/{action}"
 	use:enhance
 	onsubmit={(event) => event.preventDefault()}
 >
-	{@render children()}
+	{@render children?.()}
 </form>
 
 <style>
 	form {
 		width: 100%;
 	}
-</style>
+</style>

package/dist/Form/FormController/Form.svelte.d.ts

@@ -1,6 +1,7 @@
 import { type Snippet } from 'svelte';
 import { z } from 'zod';
 declare const Form: import("svelte").Component<{
+    id?: string;
     initialData: Record<string, unknown>;
     action: string;
     schema: z.ZodObject;

package/dist/HighlightPanel/HighlightPanel.svelte

@@ -19,7 +19,9 @@
 				{#if column.type === ColumnType.Text}
 					<h2>{column.label}</h2>
 					<p>{column.value}</p>
-					<p class="text-description">{column.description ?? ''}</p>
+					{#if column.description}
+						<p class="text-description">{column.description}</p>
+					{/if}
 				{/if}
 
 				{#if column.type === ColumnType.Status}
@@ -37,14 +39,27 @@
 				{#if column.type === ColumnType.Image}
 					{@const { content, iconType } = column}
 					<h2>{column.label}</h2>
-					{#if iconType === ImageType.Default}
-						<img src={content} alt="icon" />
-					{:else if iconType === ImageType.Avatar}
-						<Avatar text={content} />
-					{:else if iconType === ImageType.Material}
-						<span class="material-icons">{content}</span>
-					{/if}
-					<p class="text-description">{column.description ?? ''}</p>
+
+					<figure class:text-right={column.alignTextRight}>
+						{#if iconType === ImageType.Default}
+							<img src={content} alt="icon" />
+						{:else if iconType === ImageType.Avatar}
+							<Avatar text={content} />
+						{:else if iconType === ImageType.Material}
+							<span class="material-icons">{content}</span>
+						{/if}
+
+						{#if column.value || column.description}
+							<div>
+								{#if column.value}
+									<p>{column.value}</p>
+								{/if}
+								{#if column.description}
+									<p class="text-description">{column.description}</p>
+								{/if}
+							</div>
+						{/if}
+					</figure>
 				{/if}
 			</div>
 		{/each}
@@ -70,6 +85,7 @@
 	}
 
 	.text-description {
+		font-size: 12px;
 		color: #6b7180;
 	}
 
@@ -121,6 +137,16 @@
 		border-radius: 9999px;
 	}
 
+	.panel-element > figure {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+	}
+
+	.panel-element > figure.text-right {
+		flex-direction: row;
+	}
+
 	@media screen and (max-width: 700px) {
 		.buttons-section {
 			flex-direction: column;

package/dist/HighlightPanel/highlightPanelState.svelte.d.ts

@@ -26,6 +26,7 @@ type Icon = BaseColumn & {
     type: ColumnType.Image;
     iconType: ImageType;
     content: string;
+    alignTextRight?: boolean;
 };
 type Status = BaseColumn & {
     type: ColumnType.Status;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@softwareone/spi-sv5-library",
-	"version": "1.5.5",
+	"version": "1.5.7",
 	"description": "Svelte components",
 	"keywords": [
 		"svelte",