@lavalogic/scoria 0.2.0 → 0.3.0

package/dist/Components/Button.svelte

@@ -282,7 +282,7 @@ button {
   padding-right: var(--button-padding-right, var(--button-padding-horizontal, var(--button-padding, var(--fallback-padding-horizontal, 0))));
   padding-top: var(--button-padding-top, var(--button-padding-vertical, var(--button-padding, var(--fallback-padding-vertical, 0))));
   padding-bottom: var(--button-padding-bottom, var(--button-padding-vertical, var(--button-padding, var(--fallback-padding-vertical, 0))));
-  font-size: var(--font-size, 0.9375rem);
+  font-size: var(--font-size, 0.875rem);
 }
 button.noninteractive {
   cursor: not-allowed !important;
@@ -414,7 +414,7 @@ button.info {
 button.card-inner {
   height: 34px;
   box-sizing: border-box;
-  font-size: var(--font-size, 0.9375rem);
+  font-size: var(--font-size, 0.875rem);
   border: solid 1px #cbd4da;
   font-weight: 600;
   border-radius: 4px;
@@ -468,7 +468,7 @@ button.call-to-action:not([disabled]):focus {
   outline-offset: -2px;
 }
 button.toolbar {
-  font-size: var(--font-size, 0.9375rem);
+  font-size: var(--font-size, 0.875rem);
   font-weight: 600;
   border-radius: 0;
   border: none;

package/dist/Components/DateInput.svelte

@@ -149,7 +149,7 @@
   box-sizing: border-box;
   height: 100%;
   width: 100%;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   font-weight: 400;
   padding-top: var(--input-padding-top, 0.65rem);
   padding-bottom: var(--input-padding-bottom, 0.55rem);
@@ -212,12 +212,13 @@ span.right-label.for-modal {
 span.for-default {
   position: absolute;
   left: 0.5rem;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   user-select: none;
-  padding-left: 0.4rem;
-  padding-right: 0.4rem;
-  padding: 0.1rem 0.4rem;
-  top: -0.6rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  line-height: 1rem;
+  padding: 0rem 0.5rem;
+  top: calc(-0.875rem / 2 - 2px);
   z-index: 2;
   color: #647d8e;
   white-space: nowrap;
@@ -229,16 +230,15 @@ span.for-default.invalid {
 span.border {
   position: absolute;
   left: 0.5rem;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   user-select: none;
-  padding-left: 0.4rem;
-  padding-right: 0.4rem;
-  padding-top: 0;
-  padding-bottom: 0;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  line-height: 1rem;
   z-index: 1;
   white-space: nowrap;
-  top: 0%;
-  height: 0;
+  top: -1px;
+  line-height: 0px;
   color: transparent;
   border-bottom: solid 1px #ffffff;
 }
@@ -327,7 +327,7 @@ label.for-modal {
 label.for-modal span.top-label {
   color: #647d8e;
   --colour: #8096a5;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   z-index: 1;
   position: absolute;
   top: 0.45rem;

package/dist/Components/DesktopModal.svelte

@@ -164,7 +164,7 @@
   gap: 0.1875rem;
   fill: #647d8e;
   color: #647d8e;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
 }
 
 .footer {

package/dist/Components/DimensionInput.svelte

@@ -208,7 +208,7 @@
   box-sizing: border-box;
   height: 100%;
   width: 100%;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   font-weight: 400;
   padding-top: var(--input-padding-top, 0.65rem);
   padding-bottom: var(--input-padding-bottom, 0.55rem);
@@ -271,12 +271,13 @@ span.right-label.for-modal {
 span.for-default {
   position: absolute;
   left: 0.5rem;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   user-select: none;
-  padding-left: 0.4rem;
-  padding-right: 0.4rem;
-  padding: 0.1rem 0.4rem;
-  top: -0.6rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  line-height: 1rem;
+  padding: 0rem 0.5rem;
+  top: calc(-0.875rem / 2 - 2px);
   z-index: 2;
   color: #647d8e;
   white-space: nowrap;
@@ -288,16 +289,15 @@ span.for-default.invalid {
 span.border {
   position: absolute;
   left: 0.5rem;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   user-select: none;
-  padding-left: 0.4rem;
-  padding-right: 0.4rem;
-  padding-top: 0;
-  padding-bottom: 0;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  line-height: 1rem;
   z-index: 1;
   white-space: nowrap;
-  top: 0%;
-  height: 0;
+  top: -1px;
+  line-height: 0px;
   color: transparent;
   border-bottom: solid 1px #ffffff;
 }
@@ -386,7 +386,7 @@ label.for-modal {
 label.for-modal span.top-label {
   color: #647d8e;
   --colour: #8096a5;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   z-index: 1;
   position: absolute;
   top: 0.45rem;

package/dist/Components/DragMenu/DragMenuHolder.svelte

@@ -0,0 +1,116 @@
+<svelte:options runes />
+
+<script lang="ts" module>
+	import type { Snippet } from 'svelte';
+
+	export interface Draggable<T> {
+		id: string;
+		name: string;
+		original: T;
+	}
+
+	export interface DragMenuHolder<T> {
+		items: Draggable<T>[];
+		consider: (items: Draggable<T>[]) => void;
+		finalise: (items: Draggable<T>[]) => void;
+		snippet: Snippet<[Draggable<T>, number]>;
+
+		label?: string;
+		flipDurationMS?: number;
+	}
+</script>
+
+<script lang="ts" generics="T">
+	import { dndzone } from 'svelte-dnd-action';
+	import { flip } from 'svelte/animate';
+
+	const {
+		items,
+		consider,
+		finalise,
+		snippet,
+		flipDurationMS = 60,
+		label
+	}: DragMenuHolder<T> = $props();
+</script>
+
+<div class="wrapper">
+	{#if label}
+		<span class="top-label">{label}</span>
+		<span class="top-label-border">{label}</span>
+	{/if}
+	<div
+		class="dnd"
+		use:dndzone={{ items, flipDurationMs: flipDurationMS, delayTouchStart: 30 }}
+		onconsider={(e) => {
+			consider(e.detail.items);
+		}}
+		onfinalize={(e) => {
+			finalise(e.detail.items);
+		}}
+	>
+		{#each items as item, index (item.id)}
+			<div class="contents" animate:flip={{ duration: flipDurationMS }}>
+				{@render snippet(item, index)}
+			</div>
+		{/each}
+	</div>
+</div>
+
+<style>.top-label {
+  border-bottom: solid 1px transparent;
+  position: absolute;
+  left: 0.5rem;
+  font-size: 0.875rem;
+  user-select: none;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  line-height: 1rem;
+  padding: 0rem 0.5rem;
+  top: calc(-0.875rem / 2 - 2px);
+  z-index: 2;
+  color: #647d8e;
+  white-space: nowrap;
+}
+.top-label.invalid {
+  color: #aa1414;
+}
+
+.top-label-border {
+  position: absolute;
+  left: 0.5rem;
+  font-size: 0.875rem;
+  user-select: none;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  line-height: 1rem;
+  z-index: 1;
+  white-space: nowrap;
+  top: -1px;
+  line-height: 0px;
+  color: transparent;
+  border-bottom: solid 1px #ffffff;
+}
+.top-label-border.invalid {
+  border-bottom-color: #f9e9e9;
+}
+
+div.wrapper {
+  display: flex;
+  flex: 1;
+  position: relative;
+  border: solid 1px #cbd4da;
+}
+
+div.dnd {
+  border: none;
+  display: flex;
+  flex-flow: column nowrap;
+  outline: none !important;
+  /* this will allow the dragged element to scroll the list although starting in version 0.9.41 the lib would detect any scrollable parent*/
+  overflow: scroll;
+  flex: 1;
+  gap: 0.5rem;
+  padding: 0.5rem;
+  outline-color: red;
+}</style>

package/dist/Components/DragMenu/DragMenuHolder.svelte.d.ts

@@ -0,0 +1,32 @@
+import type { Snippet } from 'svelte';
+export interface Draggable<T> {
+    id: string;
+    name: string;
+    original: T;
+}
+export interface DragMenuHolder<T> {
+    items: Draggable<T>[];
+    consider: (items: Draggable<T>[]) => void;
+    finalise: (items: Draggable<T>[]) => void;
+    snippet: Snippet<[Draggable<T>, number]>;
+    label?: string;
+    flipDurationMS?: number;
+}
+declare function $$render<T>(): any;
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const DragMenuHolder: $$IsomorphicComponent;
+type DragMenuHolder<T> = InstanceType<typeof DragMenuHolder<T>>;
+export default DragMenuHolder;

package/dist/Components/DragMenu/DraggableCard.svelte

@@ -0,0 +1,111 @@
+<svelte:options runes />
+
+<script lang="ts" module>
+	export interface DraggableCardProps {
+		selectable: boolean;
+		title: string;
+		subtitle: string;
+		index: number;
+
+		selected?: boolean; // default false
+		disabled?: boolean; // default false
+	}
+</script>
+
+<script lang="ts">
+	import Checkbox from '../Checkbox.svelte';
+
+	let {
+		selectable,
+		title,
+		subtitle,
+		index,
+		selected = $bindable(false),
+		disabled = false
+	}: DraggableCardProps = $props();
+</script>
+
+<div class="card">
+	{#if selectable}
+		<Checkbox value={selected} onchange={() => (selected = !selected)} />
+	{/if}
+	<div class="text">
+		<span class="title">{title}</span>
+		<span class="subtitle">{subtitle}</span>
+	</div>
+	<span class="row">{index + 1}</span>
+</div>
+
+<style>.card {
+  color: #3a4952;
+  fill: #3a4952;
+  padding: var(--padding-size, 0.76rem);
+  border-radius: var(--border-radius, 0);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  border: solid 1px #cbd4da;
+  transition: border-color ease-out 0.15s 0s, background-color ease-out 0.15s 0s, color ease-out 0.15s 0s, fill ease-out 0.15s 0s;
+  box-sizing: border-box;
+  background-color: #ffffff;
+  align-items: stretch;
+  cursor: pointer;
+}
+.card:disabled {
+  background-color: var(--background-colour, #e9ecf1);
+  color: #8096a5;
+  --colour: #8096a5;
+  cursor: default;
+}
+.card:not([disabled]):hover {
+  background-color: var(--hover-background-colour, rgba(0, 0, 0, 0.1));
+  --background-colour: var(--hover-background-colour, colours.$transparent-10) !important;
+}
+.card:not([disabled]):focus, .card:not([disabled]):focus-visible {
+  outline: solid 1px #1f81a0;
+}
+.card:not([disabled]).ticked, .card:not([disabled]).primary {
+  color: #ffffff;
+  background-color: var(--background-colour, #259fc7);
+  border-color: var(--border-colour, #259fc7);
+}
+.card:not([disabled]).ticked:focus, .card:not([disabled]).ticked:focus-visible, .card:not([disabled]).primary:focus, .card:not([disabled]).primary:focus-visible {
+  outline-color: #259fc7;
+}
+.card:not([disabled]).ticked:hover, .card:not([disabled]).primary:hover {
+  background-color: var(--hover-background-colour, #1f81a0);
+}
+.card * {
+  user-select: none;
+}
+.card {
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 1.5rem;
+}
+.card .text {
+  display: flex;
+  gap: 0.5rem;
+  flex-flow: column nowrap;
+}
+.card .title {
+  font-weight: 500;
+  color: #455661;
+}
+.card .subtitle {
+  color: #718a9b;
+}
+.card span.row {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  justify-content: center;
+  height: 1.75rem;
+  width: 1.75rem;
+  overflow: hidden;
+  margin-left: auto;
+  margin-right: 1rem;
+  border: solid 3px #cbd4da;
+  border-radius: 50%;
+}</style>

package/dist/Components/DragMenu/DraggableCard.svelte.d.ts

@@ -0,0 +1,11 @@
+export interface DraggableCardProps {
+    selectable: boolean;
+    title: string;
+    subtitle: string;
+    index: number;
+    selected?: boolean;
+    disabled?: boolean;
+}
+declare const DraggableCard: import("svelte").Component<DraggableCardProps, {}, "selected">;
+type DraggableCard = ReturnType<typeof DraggableCard>;
+export default DraggableCard;

package/dist/Components/FileUpload.svelte

@@ -211,7 +211,7 @@
   box-sizing: border-box;
   height: 100%;
   width: 100%;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   font-weight: 400;
   padding-top: var(--input-padding-top, 0.65rem);
   padding-bottom: var(--input-padding-bottom, 0.55rem);
@@ -274,12 +274,13 @@ span.right-label.for-modal {
 span.for-default {
   position: absolute;
   left: 0.5rem;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   user-select: none;
-  padding-left: 0.4rem;
-  padding-right: 0.4rem;
-  padding: 0.1rem 0.4rem;
-  top: -0.6rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  line-height: 1rem;
+  padding: 0rem 0.5rem;
+  top: calc(-0.875rem / 2 - 2px);
   z-index: 2;
   color: #647d8e;
   white-space: nowrap;
@@ -291,16 +292,15 @@ span.for-default.invalid {
 span.border {
   position: absolute;
   left: 0.5rem;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   user-select: none;
-  padding-left: 0.4rem;
-  padding-right: 0.4rem;
-  padding-top: 0;
-  padding-bottom: 0;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  line-height: 1rem;
   z-index: 1;
   white-space: nowrap;
-  top: 0%;
-  height: 0;
+  top: -1px;
+  line-height: 0px;
   color: transparent;
   border-bottom: solid 1px #ffffff;
 }

package/dist/Components/GridInput.svelte

@@ -2,13 +2,17 @@
 
 <script lang="ts" module>
 	import type { GridItem } from '../Types/Internal/GridItem.js';
-	import type { GridMultiSelectItem } from '../Types/Internal/GridMultiSelectItem.js';
-	import type { GridMultiSelectItemAsObject } from '../Types/Internal/GridMultiSelectItemAsObject.js';
-	import type { GridMultiSelectItemAsPrimitive } from '../Types/Internal/GridMultiSelectItemAsPrimitive.js';
+	import type {
+		GridMultiSelectItem,
+		GridMultiSelectItemAsObject,
+		GridMultiSelectItemAsPrimitive
+	} from '../Types/Internal/GridMultiSelectItem.js';
 	import type { GridSelectItem } from '../Types/Internal/GridSelectItem.js';
-	import type { GridSingleSelectItem } from '../Types/Internal/GridSingleSelectItem.js';
-	import type { GridSingleSelectItemAsObject } from '../Types/Internal/GridSingleSelectItemAsObject.js';
-	import type { GridSingleSelectItemAsPrimitive } from '../Types/Internal/GridSingleSelectItemAsPrimitive.js';
+	import type {
+		GridSingleSelectItem,
+		GridSingleSelectItemAsObject,
+		GridSingleSelectItemAsPrimitive
+	} from '../Types/Internal/GridSingleSelectItem.js';
 	import type { GridTextItem } from '../Types/Internal/GridTextItem.js';
 	import type { ValueProp } from '../Types/Internal/Misc.js';
 	import MultiSelect from './MultiSelect.svelte';
@@ -28,7 +32,7 @@
 	const textTypes = new Set(['text', 'email', 'tel']);
 </script>
 
-<script lang="ts" generics="V,VP">
+<script lang="ts" generics="V extends object,VP extends ValueProp<V>">
 	const { item, first, last }: GridInputProps<V, VP> = $props();
 
 	let value = $state(isText(item) ? (item.value ?? '') : '');
@@ -99,7 +103,7 @@
 					<MultiSelect
 						name={item.name}
 						{options}
-						valueAsObject={item.valueAsObject}
+						valueAsObject={true}
 						labelProp={item.labelProp}
 						valueProp={item.valueProp}
 						selectedValues={item.value}
@@ -112,7 +116,7 @@
 					<MultiSelect
 						name={item.name}
 						{options}
-						valueAsObject={item.valueAsObject}
+						valueAsObject={false}
 						labelProp={item.labelProp}
 						valueProp={item.valueProp}
 						selectedValues={item.value}

package/dist/Components/GridInput.svelte.d.ts

@@ -1,17 +1,18 @@
 import type { GridItem } from '../Types/Internal/GridItem.js';
+import type { ValueProp } from '../Types/Internal/Misc.js';
 export interface GridInputProps<V, VP> {
     item: GridItem<V, VP>;
     first: boolean;
     last: boolean;
 }
-declare function $$render<V, VP>(): {
+declare function $$render<V extends object, VP extends ValueProp<V>>(): {
     props: GridInputProps<V, VP>;
     exports: {};
     bindings: "";
     slots: {};
     events: {};
 };
-declare class __sveltets_Render<V, VP> {
+declare class __sveltets_Render<V extends object, VP extends ValueProp<V>> {
     props(): ReturnType<typeof $$render<V, VP>>['props'];
     events(): ReturnType<typeof $$render<V, VP>>['events'];
     slots(): ReturnType<typeof $$render<V, VP>>['slots'];
@@ -19,12 +20,12 @@ declare class __sveltets_Render<V, VP> {
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <V, VP>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<V, VP>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<V, VP>['props']>, ReturnType<__sveltets_Render<V, VP>['events']>, ReturnType<__sveltets_Render<V, VP>['slots']>> & {
+    new <V extends object, VP extends ValueProp<V>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<V, VP>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<V, VP>['props']>, ReturnType<__sveltets_Render<V, VP>['events']>, ReturnType<__sveltets_Render<V, VP>['slots']>> & {
         $$bindings?: ReturnType<__sveltets_Render<V, VP>['bindings']>;
     } & ReturnType<__sveltets_Render<V, VP>['exports']>;
-    <V, VP>(internal: unknown, props: ReturnType<__sveltets_Render<V, VP>['props']> & {}): ReturnType<__sveltets_Render<V, VP>['exports']>;
+    <V extends object, VP extends ValueProp<V>>(internal: unknown, props: ReturnType<__sveltets_Render<V, VP>['props']> & {}): ReturnType<__sveltets_Render<V, VP>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
 }
 declare const GridInput: $$IsomorphicComponent;
-type GridInput<V, VP> = InstanceType<typeof GridInput<V, VP>>;
+type GridInput<V extends object, VP extends ValueProp<V>> = InstanceType<typeof GridInput<V, VP>>;
 export default GridInput;

package/dist/Components/GridInputSet.svelte

@@ -9,9 +9,10 @@
 	}
 </script>
 
-<script lang="ts" generics="V,VP">
+<script lang="ts" generics="V extends object,VP extends ValueProp<V>">
 	import GridInput from './GridInput.svelte';
 	import type { GridItem } from '../Types/Internal/GridItem.js';
+	import type { ValueProp } from '../Types/Internal/Misc.js';
 
 	const { items, header }: GridInputSetProps<V, VP> = $props();
 

package/dist/Components/GridInputSet.svelte.d.ts

@@ -4,14 +4,15 @@ export interface GridInputSetProps<V, VP> {
     header?: Snippet;
 }
 import type { GridItem } from '../Types/Internal/GridItem.js';
-declare function $$render<V, VP>(): {
+import type { ValueProp } from '../Types/Internal/Misc.js';
+declare function $$render<V extends object, VP extends ValueProp<V>>(): {
     props: GridInputSetProps<V, VP>;
     exports: {};
     bindings: "";
     slots: {};
     events: {};
 };
-declare class __sveltets_Render<V, VP> {
+declare class __sveltets_Render<V extends object, VP extends ValueProp<V>> {
     props(): ReturnType<typeof $$render<V, VP>>['props'];
     events(): ReturnType<typeof $$render<V, VP>>['events'];
     slots(): ReturnType<typeof $$render<V, VP>>['slots'];
@@ -19,12 +20,12 @@ declare class __sveltets_Render<V, VP> {
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <V, VP>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<V, VP>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<V, VP>['props']>, ReturnType<__sveltets_Render<V, VP>['events']>, ReturnType<__sveltets_Render<V, VP>['slots']>> & {
+    new <V extends object, VP extends ValueProp<V>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<V, VP>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<V, VP>['props']>, ReturnType<__sveltets_Render<V, VP>['events']>, ReturnType<__sveltets_Render<V, VP>['slots']>> & {
         $$bindings?: ReturnType<__sveltets_Render<V, VP>['bindings']>;
     } & ReturnType<__sveltets_Render<V, VP>['exports']>;
-    <V, VP>(internal: unknown, props: ReturnType<__sveltets_Render<V, VP>['props']> & {}): ReturnType<__sveltets_Render<V, VP>['exports']>;
+    <V extends object, VP extends ValueProp<V>>(internal: unknown, props: ReturnType<__sveltets_Render<V, VP>['props']> & {}): ReturnType<__sveltets_Render<V, VP>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
 }
 declare const GridInputSet: $$IsomorphicComponent;
-type GridInputSet<V, VP> = InstanceType<typeof GridInputSet<V, VP>>;
+type GridInputSet<V extends object, VP extends ValueProp<V>> = InstanceType<typeof GridInputSet<V, VP>>;
 export default GridInputSet;