@lavalogic/scoria 0.32.0 → 0.33.0

package/dist/Components/AccordionGroup.svelte

@@ -0,0 +1,104 @@
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="CommonDenominator"
+>
+	import AccordionGroupButton from './AccordionGroupButton.svelte';
+
+	import { cubicInOut, linear } from 'svelte/easing';
+	import type { AccordionGroupProps } from './AccordionGroupProps.js';
+
+	let {
+		// name: _name, //FIXME why is this not implemented?
+		tabs,
+		selected,
+		noRadius = false,
+		grow = false,
+	}: AccordionGroupProps<CommonDenominator> = $props();
+
+	/**
+	 * Animates the opacity and scale of an element. `in` transitions animate from the provided values, passed as parameters, to an element's current (default) values. `out` transitions animate from an element's default values to the provided values.
+	 *
+	 * @param {Element} node
+	 * @param {ScaleParams} [params]
+	 * @returns {TransitionConfig}
+	 */
+	export function scale(_node: Element, { delay = 0, duration = 400, easing = cubicInOut } = {}) {
+		// const transform = style.transform === 'none' ? '' : style.transform;
+
+		return {
+			delay,
+			duration,
+			easing,
+			css: (t: number, _u: number) => {
+				return `max-height: ${t * 100}%;
+			opacity: ${t}`;
+			},
+		};
+	}
+</script>
+
+<div
+	class="wrapper"
+	class:no-radius={noRadius}
+	class:grow
+>
+	{#each tabs as option (option)}
+		{@const isSelected = selected === option}
+		<AccordionGroupButton
+			{option}
+			{noRadius}
+			selected={isSelected}
+		/>
+		{#if isSelected}
+			<div transition:scale={{ duration: 300, easing: linear }}>
+				{@render selected.content(selected.args)}
+			</div>
+		{/if}
+	{/each}
+</div>
+
+<style>.wrapper {
+  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1333333333);
+  border-radius: 4px;
+  display: flex;
+  flex-flow: column nowrap;
+  overflow: auto;
+}
+.wrapper.no-radius {
+  border-radius: 0;
+}
+.wrapper.no-radius .tabs {
+  border-radius: 0;
+}
+.wrapper.no-radius .content {
+  border-radius: 0;
+}
+.wrapper.grow {
+  flex-grow: 1;
+}
+.wrapper:not(.grow) .tabs {
+  padding-top: 1px;
+}
+.wrapper .sticky {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+}
+.wrapper .tabs {
+  border-radius: 4px 0 0 4px;
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 1px;
+  min-width: 10rem;
+  background-color: #e9ecf1;
+  border-right: solid 1px #cbd4da;
+  overflow: auto;
+  flex-shrink: 0;
+}
+.wrapper .content {
+  flex-grow: 1;
+  overflow: visible;
+  border-radius: 0 4px 0 4px;
+}</style>

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

@@ -0,0 +1,48 @@
+import { cubicInOut } from 'svelte/easing';
+import type { AccordionGroupProps } from './AccordionGroupProps.js';
+declare function $$render<CommonDenominator>(): {
+    props: AccordionGroupProps<CommonDenominator>;
+    exports: {
+        scale: (_node: Element, { delay, duration, easing }?: {
+            delay?: number | undefined;
+            duration?: number | undefined;
+            easing?: typeof cubicInOut | undefined;
+        }) => {
+            delay: number;
+            duration: number;
+            easing: typeof cubicInOut;
+            css: (t: number, _u: number) => string;
+        };
+    };
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<CommonDenominator> {
+    props(): ReturnType<typeof $$render<CommonDenominator>>['props'];
+    events(): ReturnType<typeof $$render<CommonDenominator>>['events'];
+    slots(): ReturnType<typeof $$render<CommonDenominator>>['slots'];
+    bindings(): "";
+    exports(): {
+        scale: (_node: Element, { delay, duration, easing }?: {
+            delay?: number | undefined;
+            duration?: number | undefined;
+            easing?: typeof cubicInOut | undefined;
+        }) => {
+            delay: number;
+            duration: number;
+            easing: typeof cubicInOut;
+            css: (t: number, _u: number) => string;
+        };
+    };
+}
+interface $$IsomorphicComponent {
+    new <CommonDenominator>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<CommonDenominator>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<CommonDenominator>['props']>, ReturnType<__sveltets_Render<CommonDenominator>['events']>, ReturnType<__sveltets_Render<CommonDenominator>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<CommonDenominator>['bindings']>;
+    } & ReturnType<__sveltets_Render<CommonDenominator>['exports']>;
+    <CommonDenominator>(internal: unknown, props: ReturnType<__sveltets_Render<CommonDenominator>['props']> & {}): ReturnType<__sveltets_Render<CommonDenominator>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const AccordionGroup: $$IsomorphicComponent;
+type AccordionGroup<CommonDenominator> = InstanceType<typeof AccordionGroup<CommonDenominator>>;
+export default AccordionGroup;

package/dist/Components/AccordionGroupButton.svelte

@@ -0,0 +1,130 @@
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="Args"
+>
+	import { devCatch } from '../Helpers/Helpers.svelte.js';
+	import { Colour } from '../scss/colours.js';
+	import { Size } from '../Types/Internal/Size.js';
+	import Icon from './Icon.svelte';
+	import type { TabGroupButtonProps } from './TabGroupButtonProps.js';
+
+	let { option, selected, noRadius = false }: TabGroupButtonProps<Args> = $props();
+
+	let disabled = $state(true);
+	let visible = $state(true);
+	let isValid = $state(true);
+
+	$effect(() => {
+		if (typeof option.isValid === 'boolean') {
+			isValid = option.isValid;
+		} else {
+			option.isValid
+				?.then((v) => {
+					isValid = v;
+				})
+				.catch(devCatch);
+		}
+	});
+	$effect(() => {
+		if (typeof option.disabled === 'boolean') {
+			disabled = option.disabled;
+		} else if (option.disabled == undefined) {
+			disabled = false;
+		} else {
+			option.disabled
+				.then((v) => {
+					disabled = v;
+				})
+				.catch(devCatch);
+		}
+	});
+
+	$effect(() => {
+		if (typeof option.visible === 'boolean') {
+			visible = option.visible;
+		} else if (option.visible == undefined) {
+			visible = true;
+		} else {
+			option.visible
+				.then((v) => {
+					visible = v;
+				})
+				.catch(devCatch);
+		}
+	});
+</script>
+
+<button
+	class:selected
+	onclick={() => {
+		option.onclick();
+	}}
+	type="button"
+	class="tab"
+	class:invalid={!isValid}
+	{disabled}
+	class:hidden={!visible}
+	class:no-radius={noRadius}
+>
+	<div class="selected-marker"></div>
+	<!-- <Icon
+		name="nothing"
+		colour={Colour['$brand-primary']}
+		size={Size.Small}
+		{...option.iconLeft}
+	/> -->
+
+	{option.label}
+	{#if !isValid}
+		<Icon
+			name="error"
+			colour={Colour['$error-border']}
+			size={Size.Small}
+		/>
+		<!-- {:else}
+		<Icon
+			name="nothing"
+			colour={Colour['$brand-primary']}
+			size={Size.Small}
+			{...option.iconRight}
+		/> -->
+	{/if}
+</button>
+
+<style>button.tab.hidden {
+  display: none !important;
+}
+
+.tab {
+  color: #3a4952;
+  cursor: pointer;
+  font-size: 1rem;
+  font-weight: 500;
+  padding: 1rem;
+  background-color: #ffffff;
+  border: none;
+  text-align: start;
+  display: flex;
+  flex-flow: row nowrap;
+  flex-shrink: 1;
+  align-items: center;
+  width: 100%;
+  gap: 0.5rem;
+  position: relative;
+  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;
+}
+.tab.selected {
+  color: #259fc7;
+}
+.tab:hover, .tab.selected:hover {
+  color: #49b8dc;
+  background-color: #f4f7f9;
+}
+.tab:not(.no-radius):first-child {
+  border-radius: 4px 0 0 0;
+}
+.tab:hover, .tab.selected:hover, .tab.invalid:hover {
+  background-color: #f4f7f9;
+}</style>

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

@@ -0,0 +1,25 @@
+import type { TabGroupButtonProps } from './TabGroupButtonProps.js';
+declare function $$render<Args>(): {
+    props: TabGroupButtonProps<Args>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Args> {
+    props(): ReturnType<typeof $$render<Args>>['props'];
+    events(): ReturnType<typeof $$render<Args>>['events'];
+    slots(): ReturnType<typeof $$render<Args>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Args>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Args>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Args>['props']>, ReturnType<__sveltets_Render<Args>['events']>, ReturnType<__sveltets_Render<Args>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Args>['bindings']>;
+    } & ReturnType<__sveltets_Render<Args>['exports']>;
+    <Args>(internal: unknown, props: ReturnType<__sveltets_Render<Args>['props']> & {}): ReturnType<__sveltets_Render<Args>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const AccordionGroupButton: $$IsomorphicComponent;
+type AccordionGroupButton<Args> = InstanceType<typeof AccordionGroupButton<Args>>;
+export default AccordionGroupButton;

package/dist/Components/AccordionGroupProps.d.ts

@@ -0,0 +1,8 @@
+import type { TabOption } from '../Types/Internal/TabOption.js';
+export interface AccordionGroupProps<CommonDenominator> {
+    name?: string;
+    noRadius?: boolean;
+    grow?: boolean;
+    tabs: Array<TabOption<CommonDenominator>>;
+    selected: TabOption<CommonDenominator> | undefined;
+}

package/dist/Components/AccordionGroupProps.js

@@ -0,0 +1 @@
+export {};

package/dist/Components/Table/ColumnDefinitions/ExampleItemColumnDefRepository.svelte.js

@@ -78,10 +78,9 @@ export function generateExampleItemColumnDefs(modal) {
             id: 'orderLineStatus',
             header: 'Order Line Status',
             allowSorting: true,
-            debug: true,
             accessorFn: statusAccessorFn,
             filterValueType: 'Select',
-            getOptions: async () => {
+            getOptions: () => {
                 void uuidByIndex.size;
                 const mapped = [
                     { label: 'Pending', value: 'Pending' },
@@ -127,6 +126,10 @@ export function generateExampleItemColumnDefs(modal) {
                     : [];
             },
             isValid,
+            filterFn: (row, index, value) => {
+                console.log(value);
+                return false;
+            },
         }),
         new TextInputDef({
             header: 'Name',

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

@@ -9,7 +9,7 @@ export interface QueryDefProps<T extends object, in FilterValueType = unknown, o
 export declare class QueryDef<T extends object, FilterValueType = unknown, out FilterOptionsType = unknown> extends AccessorDef<T, FilterValueType, FilterOptionsType> {
     readonly accessorType: "Query";
     constructor(props: QueryDefProps<T, FilterValueType, FilterOptionsType>);
-    filterFn: FilterFn<T, FilterValueType> | undefined;
+    readonly filterFn: FilterFn<T, FilterValueType> | undefined;
     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

@@ -5,8 +5,10 @@ export class QueryDef extends AccessorDef {
     constructor(props) {
         super(props);
         this.query = $derived(props.query);
+        this.filterFn = $derived(props.filterFn);
         this.clearable = $derived(props.clearable ?? true);
     }
+    filterFn;
     query;
     clearable;
 }

package/dist/index.d.ts

@@ -1,3 +1,5 @@
+export { default as AccordionGroup } from './Components/AccordionGroup.svelte';
+export type { AccordionGroupProps } from './Components/AccordionGroupProps.js';
 export { default as Action } from './Components/Action.svelte';
 export { default as AlertModal } from './Components/AlertModal.svelte';
 export { default as ContextWrapper } from './Components/Base/ContextWrapper.svelte';

package/dist/index.js

@@ -1,3 +1,4 @@
+export { default as AccordionGroup } from './Components/AccordionGroup.svelte';
 export { default as Action } from './Components/Action.svelte';
 export { default as AlertModal } from './Components/AlertModal.svelte';
 export { default as ContextWrapper } from './Components/Base/ContextWrapper.svelte';

package/package.json

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