@lavalogic/scoria 0.4.3 → 0.4.5

package/dist/Components/CollapsibleCard.svelte

@@ -6,9 +6,10 @@
 	export interface CollapsibleCard {
 		title?: string;
 		subtitle?: string | Promise<string>;
-		children: Snippet;
+		children?: Snippet;
 		maxHeight?: number;
 		grow?: boolean;
+		isCollapsed?: boolean;
 	}
 </script>
 
@@ -17,9 +18,14 @@
 	import { Size } from '../Types/Internal/Size.js';
 	import { Colour } from '../scss/colours.js';
 
-	let { title, subtitle, maxHeight: maxHeight, children, grow }: CollapsibleCard = $props();
-
-	let isCollapsed = $state(false);
+	let {
+		title,
+		subtitle,
+		maxHeight: maxHeight,
+		children,
+		grow,
+		isCollapsed = $bindable(false)
+	}: CollapsibleCard = $props();
 
 	let cardRef: HTMLDivElement | undefined = $state();
 
@@ -63,7 +69,9 @@
 	</div>
 
 	<div class="content" class:is-collapsed={isCollapsed}>
-		{@render children()}
+		{#if children}
+			{@render children()}
+		{/if}
 	</div>
 </div>
 

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

@@ -2,9 +2,10 @@ import type { Snippet } from 'svelte';
 export interface CollapsibleCard {
     title?: string;
     subtitle?: string | Promise<string>;
-    children: Snippet;
+    children?: Snippet;
     maxHeight?: number;
     grow?: boolean;
+    isCollapsed?: boolean;
 }
 declare const CollapsibleCard: any;
 type CollapsibleCard = ReturnType<typeof CollapsibleCard>;

package/dist/Components/Contexts/Toast.svelte

@@ -57,7 +57,7 @@
 
 <style>article {
   font-weight: 700;
-  font-size: 1.12rem;
+  font-size: 1.125rem;
   padding: 0.75rem;
   border-radius: 4px;
 }

package/dist/Components/Table/Types/Filtering/ColumnFiltersState.d.ts

@@ -1,5 +1,5 @@
-export interface ColumnFilter {
+export interface ColumnFilter<T = unknown> {
     id: string;
-    value: unknown;
+    value: T;
 }
 export type ColumnFiltersState = ColumnFilter[];

package/dist/Components/Touch/BoolCard.svelte

@@ -174,7 +174,7 @@ button.card .value {
   padding: 0.375rem;
 }
 button.card .value.small {
-  font-size: 1.16rem;
+  font-size: 1.1875rem;
   font-weight: 600;
   padding: 0;
 }</style>

package/dist/Components/Touch/SummaryCard.svelte

@@ -284,7 +284,7 @@ button.summary-card h3 {
 }
 
 .card-detail {
-  font-size: 1.12rem;
+  font-size: 1.125rem;
   font-weight: 600;
   background-color: #f4f7f9;
   color: #3a4952;
@@ -301,7 +301,7 @@ button.summary-card h3 {
   cursor: unset;
 }
 .card-detail.uom {
-  font-size: 1.08rem;
+  font-size: 1.0625rem;
   color: #647d8e;
   --colour: #8096a5;
   text-transform: uppercase;
@@ -336,7 +336,7 @@ button.summary-card h3 {
 }
 .card-detail.optional {
   justify-content: end;
-  font-size: 1.08rem;
+  font-size: 1.0625rem;
   display: none;
   line-height: 1.5;
 }

package/dist/Components/Touch/UtilityButton.svelte

@@ -120,7 +120,7 @@
   display: flex;
   align-items: center;
   position: relative;
-  font-size: 1.12rem;
+  font-size: 1.125rem;
   font-weight: 600;
 }
 button.left, button.right {

package/dist/Helpers/Helpers.svelte.d.ts

@@ -25,4 +25,5 @@ interface IErrorResponse {
 export declare function isErrorResponse(error: unknown): error is IErrorResponse;
 export declare function getErrorMessage(error: unknown, includeUUID?: boolean): string;
 export declare function isValidEmailAddress(emailAddress: string): RegExpMatchArray | null;
+export declare function gridItem(element: HTMLElement): (() => void) | undefined;
 export {};

package/dist/Helpers/Helpers.svelte.js

@@ -1,3 +1,4 @@
+import { Sizing } from '../scss/sizing.js';
 export function autoPluralise(text, quantity = 2, { capitalise = false } = {}) {
     if (quantity === 1) {
         return text;
@@ -146,3 +147,22 @@ export function isValidEmailAddress(emailAddress) {
         .toLowerCase()
         .match(/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|.(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/);
 }
+export function gridItem(element) {
+    const firstChild = element.firstElementChild;
+    if (!firstChild) {
+        return;
+    }
+    let height = $state(0);
+    let spanHeight = $derived.by(() => {
+        element.classList.values().filter((it) => it.startsWith('col-'));
+        return Math.ceil((height + Sizing['$regular-gap']) / 4);
+    });
+    $effect(() => {
+        element.style.gridRow = spanHeight ? `span ${spanHeight}` : '';
+    });
+    const observer = new ResizeObserver((entries) => {
+        height = entries[0].borderBoxSize[0].blockSize;
+    });
+    observer.observe(firstChild);
+    return () => observer.unobserve(firstChild);
+}

package/dist/scss/_mixins.scss

@@ -2781,3 +2781,231 @@
 		background-color: rgba(0, 0, 0, 0.2);
 	}
 }
+
+@mixin grid {
+	//taken from https://medium.com/@genildocs/the-12-column-grid-system-why-it-still-matters-in-the-css-grid-era-855eb835e038
+	//adapted with https://css-tricks.com/piecing-together-approaches-for-a-css-masonry-layout/#aa-is-vertical-order-with-ragged-bottoms-ok
+
+	.grid {
+		display: grid;
+		grid-template-columns: repeat(12, 1fr);
+		grid-auto-rows: 4px;
+		width: 100%;
+
+		column-gap: sizing.$regular-gap;
+		padding: sizing.$regular-padding;
+		box-sizing: border-box;
+	}
+
+	.nested-grid {
+		display: grid;
+		grid-template-columns: repeat(12, 1fr);
+		gap: sizing.$regular-gap;
+	}
+
+	/* Responsive adjustments */
+	@media (max-width: 768px) {
+		.grid {
+			grid-template-columns: 1fr;
+			gap: sizing.$two-thirds-gap;
+			padding: sizing.$two-thirds-padding;
+		}
+	}
+
+	@media (max-width: 480px) {
+		.grid {
+			padding: sizing.$half-gap;
+			gap: sizing.$half-padding;
+		}
+	}
+
+	/* Column spanning utilities */
+	.col-1 {
+		grid-column: span 1;
+	}
+	.col-2 {
+		grid-column: span 2;
+	}
+	.col-3 {
+		grid-column: span 3;
+	}
+	.col-4 {
+		grid-column: span 4;
+	}
+	.col-5 {
+		grid-column: span 5;
+	}
+	.col-6 {
+		grid-column: span 6;
+	}
+	.col-7 {
+		grid-column: span 7;
+	}
+	.col-8 {
+		grid-column: span 8;
+	}
+	.col-9 {
+		grid-column: span 9;
+	}
+	.col-10 {
+		grid-column: span 10;
+	}
+	.col-11 {
+		grid-column: span 11;
+	}
+	.col-12 {
+		grid-column: span 12;
+	}
+
+	/* Mobile-first responsive utilities */
+	@media (min-width: 769px) {
+		.md-col-1 {
+			grid-column: span 1;
+		}
+		.md-col-2 {
+			grid-column: span 2;
+		}
+		.md-col-3 {
+			grid-column: span 3;
+		}
+		.md-col-4 {
+			grid-column: span 4;
+		}
+		.md-col-5 {
+			grid-column: span 5;
+		}
+		.md-col-6 {
+			grid-column: span 6;
+		}
+		.md-col-7 {
+			grid-column: span 7;
+		}
+		.md-col-8 {
+			grid-column: span 8;
+		}
+		.md-col-9 {
+			grid-column: span 9;
+		}
+		.md-col-10 {
+			grid-column: span 10;
+		}
+		.md-col-11 {
+			grid-column: span 11;
+		}
+		.md-col-12 {
+			grid-column: span 12;
+		}
+	}
+
+	@media (min-width: 1024px) {
+		.lg-col-1 {
+			grid-column: span 1;
+		}
+		.lg-col-2 {
+			grid-column: span 2;
+		}
+		.lg-col-3 {
+			grid-column: span 3;
+		}
+		.lg-col-4 {
+			grid-column: span 4;
+		}
+		.lg-col-5 {
+			grid-column: span 5;
+		}
+		.lg-col-6 {
+			grid-column: span 6;
+		}
+		.lg-col-7 {
+			grid-column: span 7;
+		}
+		.lg-col-8 {
+			grid-column: span 8;
+		}
+		.lg-col-9 {
+			grid-column: span 9;
+		}
+		.lg-col-10 {
+			grid-column: span 10;
+		}
+		.lg-col-11 {
+			grid-column: span 11;
+		}
+		.lg-col-12 {
+			grid-column: span 12;
+		}
+	}
+
+	/* Column start utilities */
+	.col-start-1 {
+		grid-column-start: 1;
+	}
+	.col-start-2 {
+		grid-column-start: 2;
+	}
+	.col-start-3 {
+		grid-column-start: 3;
+	}
+	.col-start-4 {
+		grid-column-start: 4;
+	}
+	.col-start-5 {
+		grid-column-start: 5;
+	}
+	.col-start-6 {
+		grid-column-start: 6;
+	}
+	.col-start-7 {
+		grid-column-start: 7;
+	}
+	.col-start-8 {
+		grid-column-start: 8;
+	}
+	.col-start-9 {
+		grid-column-start: 9;
+	}
+	.col-start-10 {
+		grid-column-start: 10;
+	}
+	.col-start-11 {
+		grid-column-start: 11;
+	}
+	.col-start-12 {
+		grid-column-start: 12;
+	}
+
+	/* Offset utilities (alternative approach) */
+	.offset-1 {
+		grid-column-start: 2;
+	}
+	.offset-2 {
+		grid-column-start: 3;
+	}
+	.offset-3 {
+		grid-column-start: 4;
+	}
+	.offset-4 {
+		grid-column-start: 5;
+	}
+	.offset-5 {
+		grid-column-start: 6;
+	}
+	.offset-6 {
+		grid-column-start: 7;
+	}
+	.offset-7 {
+		grid-column-start: 8;
+	}
+	.offset-8 {
+		grid-column-start: 9;
+	}
+	.offset-9 {
+		grid-column-start: 10;
+	}
+	.offset-10 {
+		grid-column-start: 11;
+	}
+	.offset-11 {
+		grid-column-start: 12;
+	}
+}

package/dist/scss/_sizing.scss

@@ -1,25 +1,22 @@
 $input-height: 3rem;
 $input-width: 12rem;
-// $input-width: 18.75rem;
-// $input-width: 26rem;
 
 $text-xx-large: 2rem;
 $text-x-large: 1.75rem;
 $text-large: 1.5rem;
 $text-medium-large: 1.25rem;
-$text-medium: 1.16rem;
-$text-small-medium: 1.12rem;
-$text-medium-small-medium: 1.08rem;
+$text-medium: 1.1875rem; //19 px. not ideal
+$text-small-medium: 1.125rem;
+$text-medium-small-medium: 1.0625rem;
 $text-regular: 1rem;
 $text-small-small-medium: 0.875rem;
-// $text-small: 0.84rem;
 $text-small: 0.8125rem;
 $text-extra-small: 0.75rem;
 
 $font-weight-touch: 600;
 
-$text-table: 0.95rem;
-$text-table-footer: 0.8rem;
+$text-table: 0.9375rem;
+$text-table-footer: 0.8125rem;
 
 $border-width-double: 2px;
 $border-width: 1px;

package/dist/scss/sizing.d.ts

@@ -0,0 +1,46 @@
+export declare const Sizing: {
+    '$input-height': number;
+    '$input-width': number;
+    '$text-xx-large': number;
+    '$text-x-large': number;
+    '$text-large': number;
+    '$text-medium-large': number;
+    '$text-medium': number;
+    '$text-small-medium': number;
+    '$text-medium-small-medium': number;
+    '$text-regular': number;
+    '$text-small-small-medium': number;
+    '$text-small': number;
+    '$text-extra-small': number;
+    '$text-table': number;
+    '$text-table-footer': number;
+    '$border-width-double': number;
+    '$border-width': number;
+    '$button-padding-xl': number;
+    '$button-padding-lg': number;
+    '$column-1-width': number;
+    '$column-3-width': number;
+    '$row-1-width': number;
+    '$double-padding': number;
+    '$double-gap': number;
+    '$five-quarters-padding': number;
+    '$five-quarters-gap': number;
+    '$regular-padding': number;
+    '$regular-gap': number;
+    '$two-thirds-gap': number;
+    '$two-thirds-padding': number;
+    '$half-gap': number;
+    '$half-padding': number;
+    '$third-gap': number;
+    '$third-padding': number;
+    '$quarter-gap': number;
+    '$quarter-padding': number;
+    '$button-card-inner-gap': number;
+    '$border-radius': number;
+    '$thick-border-radius': number;
+    '$min-modal-width': number;
+    '$max-modal-width': number;
+    '$table-header-height': number;
+    '$nav-height': number;
+};
+export type Sizing = (typeof Sizing)[keyof typeof Sizing];

package/dist/scss/sizing.js

@@ -0,0 +1,62 @@
+//HACK manually created copy of the scss values IN PIXELS
+// assumed font size is 16 for rem-px conversions
+// If the values get updated on one side
+// they MUST be manually updated on the other side too
+export const Sizing = {
+    '$input-height': 48,
+    '$input-width': 192,
+    '$text-xx-large': 32,
+    '$text-x-large': 28,
+    '$text-large': 24,
+    '$text-medium-large': 20,
+    '$text-medium': 19,
+    '$text-small-medium': 18,
+    '$text-medium-small-medium': 17,
+    '$text-regular': 16,
+    '$text-small-small-medium': 14,
+    '$text-small': 13,
+    '$text-extra-small': 12,
+    // '$font-weight-touch': '600', //unrepresentable
+    '$text-table': 15,
+    '$text-table-footer': 13,
+    '$border-width-double': 2,
+    '$border-width': 1,
+    '$button-padding-xl': 32,
+    // '$button-padding-lg-wide': '1rem 2rem', //unrepresentable
+    '$button-padding-lg': 16,
+    '$column-1-width': 400,
+    // '$column-2-width': '1fr', //unrepresentable
+    '$column-3-width': 400,
+    '$row-1-width': 64,
+    // '$row-2-width': '1fr',//unrepresentable
+    '$double-padding': 48,
+    '$double-gap': 48,
+    '$five-quarters-padding': 30,
+    '$five-quarters-gap': 30,
+    '$regular-padding': 24,
+    '$regular-gap': 24,
+    '$two-thirds-gap': 20,
+    '$two-thirds-padding': 20,
+    '$half-gap': 12,
+    '$half-padding': 12,
+    '$third-gap': 8,
+    '$third-padding': 8,
+    '$quarter-gap': 6,
+    '$quarter-padding': 6,
+    // '$circular-button-padding': '0.52rem',
+    // '$card-half-padding': '0.38rem',
+    // '$card-padding': '0.76rem',
+    // '$card-gap': '0.76rem',
+    // '$card-gap-half': '0.38rem',
+    // '$card-detail-padding': '4px 12px',
+    // '$card-title': '$text-large',
+    // '$card-inner-gap': '0.25rem',
+    '$button-card-inner-gap': 8,
+    '$border-radius': 4,
+    '$thick-border-radius': 5,
+    '$min-modal-width': 644,
+    '$max-modal-width': 1728,
+    '$table-header-height': 48,
+    '$nav-height': 52
+};
+Object.freeze(Sizing);

package/package.json

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