@lavalogic/scoria 0.33.0 → 0.34.0

package/dist/Components/AccordionGroup.svelte

@@ -6,7 +6,8 @@
 >
 	import AccordionGroupButton from './AccordionGroupButton.svelte';
 
-	import { cubicInOut, linear } from 'svelte/easing';
+	import { cubicOut } from 'svelte/easing';
+	import { slide } from 'svelte/transition';
 	import type { AccordionGroupProps } from './AccordionGroupProps.js';
 
 	let {
@@ -16,27 +17,6 @@
 		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
@@ -52,7 +32,7 @@
 			selected={isSelected}
 		/>
 		{#if isSelected}
-			<div transition:scale={{ duration: 300, easing: linear }}>
+			<div transition:slide={{ duration: 200, easing: cubicOut }}>
 				{@render selected.content(selected.args)}
 			</div>
 		{/if}
@@ -90,9 +70,10 @@
   border-radius: 4px 0 0 4px;
   display: flex;
   flex-flow: column nowrap;
+  padding: 1px;
   gap: 1px;
+  background-color: #cbd4da;
   min-width: 10rem;
-  background-color: #e9ecf1;
   border-right: solid 1px #cbd4da;
   overflow: auto;
   flex-shrink: 0;

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

@@ -1,19 +1,7 @@
-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;
-        };
-    };
+    exports: {};
     bindings: "";
     slots: {};
     events: {};
@@ -23,18 +11,7 @@ declare class __sveltets_Render<CommonDenominator> {
     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;
-        };
-    };
+    exports(): {};
 }
 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']>> & {

package/dist/Components/AccordionGroupButton.svelte

@@ -5,15 +5,20 @@
 	generics="Args"
 >
 	import { devCatch } from '../Helpers/Helpers.svelte.js';
-	import { Colour } from '../scss/colours.js';
+	import { Colour, ColourSet } from '../scss/colours.js';
 	import { Size } from '../Types/Internal/Size.js';
+	import type { AccordionGroupButtonProps } from './AccordionGroupButtonProps.js';
+	import Action from './Action.svelte';
 	import Icon from './Icon.svelte';
-	import type { TabGroupButtonProps } from './TabGroupButtonProps.js';
 
-	let { option, selected, noRadius = false }: TabGroupButtonProps<Args> = $props();
+	let {
+		option,
+		selected: isSelected,
+		noRadius = false,
+	}: AccordionGroupButtonProps<Args> = $props();
 
 	let disabled = $state(true);
-	let visible = $state(true);
+	let isVisible = $state(true);
 	let isValid = $state(true);
 
 	$effect(() => {
@@ -43,67 +48,59 @@
 
 	$effect(() => {
 		if (typeof option.visible === 'boolean') {
-			visible = option.visible;
+			isVisible = option.visible;
 		} else if (option.visible == undefined) {
-			visible = true;
+			isVisible = true;
 		} else {
 			option.visible
 				.then((v) => {
-					visible = v;
+					isVisible = v;
 				})
 				.catch(devCatch);
 		}
 	});
 </script>
 
-<button
-	class:selected
-	onclick={() => {
-		option.onclick();
-	}}
-	type="button"
+<div
+	class:isSelected
 	class="tab"
 	class:invalid={!isValid}
-	{disabled}
-	class:hidden={!visible}
+	class:hidden={!isVisible}
 	class:no-radius={noRadius}
 >
-	<div class="selected-marker"></div>
-	<!-- <Icon
-		name="nothing"
-		colour={Colour['$brand-primary']}
-		size={Size.Small}
-		{...option.iconLeft}
-	/> -->
+	{#if typeof option.label == 'string'}
+		{option.label}
+	{:else}
+		{@render option.label()}
+	{/if}
+	<div class="spacer"></div>
 
-	{option.label}
+	{#if option.extras}
+		{@render option.extras()}
+	{/if}
 	{#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>
+	<Action
+		icon={{ name: isSelected ? 'circle-minus' : 'circle-plus' }}
+		backgroundColour="transparent"
+		colourSet={ColourSet.Info}
+		{disabled}
+		onclick={() => {
+			option.onclick();
+		}}
+	/>
+</div>
 
-<style>button.tab.hidden {
-  display: none !important;
-}
-
-.tab {
+<style>.tab {
   color: #3a4952;
-  cursor: pointer;
   font-size: 1rem;
   font-weight: 500;
   padding: 1rem;
-  background-color: #ffffff;
   border: none;
   text-align: start;
   display: flex;
@@ -111,20 +108,15 @@
   flex-shrink: 1;
   align-items: center;
   width: 100%;
-  gap: 0.5rem;
+  gap: 1.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;
+  border-bottom: solid 1px #cbd4da;
 }
-.tab:not(.no-radius):first-child {
-  border-radius: 4px 0 0 0;
+.tab.hidden {
+  display: none !important;
 }
-.tab:hover, .tab.selected:hover, .tab.invalid:hover {
-  background-color: #f4f7f9;
+.tab .spacer {
+  margin: auto;
 }</style>

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

@@ -1,6 +1,6 @@
-import type { TabGroupButtonProps } from './TabGroupButtonProps.js';
+import type { AccordionGroupButtonProps } from './AccordionGroupButtonProps.js';
 declare function $$render<Args>(): {
-    props: TabGroupButtonProps<Args>;
+    props: AccordionGroupButtonProps<Args>;
     exports: {};
     bindings: "";
     slots: {};

package/dist/Components/AccordionGroupButtonProps.d.ts

@@ -0,0 +1,21 @@
+import type { Snippet } from 'svelte';
+import type { IconProps } from './IconProps.js';
+export interface AccordionGroupButtonProps<Args> {
+    option: AccordionGroupOption<Args>;
+    selected: boolean;
+    noRadius?: boolean;
+}
+export interface AccordionGroupOption<Args> {
+    label: string | Snippet;
+    content: Snippet<[Args]>;
+    extras?: Snippet;
+    onclick: () => void;
+    args: Args;
+    iconLeft?: IconProps;
+    iconRight?: IconProps;
+    isValid?: boolean | Promise<boolean>;
+    /** default false */
+    disabled?: boolean | Promise<boolean>;
+    /** default true */
+    visible?: boolean | Promise<boolean>;
+}

package/dist/Components/AccordionGroupButtonProps.js

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

package/dist/index.d.ts

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

package/package.json

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