@turnipxenon/pineapple 2.9.0 → 3.0.0-alpha-3

package/dist/components/pineapple/PineappleBaseLayout.svelte

@@ -1,59 +1,81 @@
-<script>export let showDialogByDefault = false;
-import { AppBar, AppShell, autoModeWatcher, LightSwitch } from "@skeletonlabs/skeleton";
-import RandomizedBackground from "../RandomizedBackground.svelte";
-import { page } from "$app/stores";
-import { enableBackground } from "../../store";
-import AresLogo from "../../assets/characters/ares/ares_logo.webp";
-import FABIcon from "../../assets/bg_tiled/bg_tiled_turnip.png";
-import CloseIcon from "../../assets/icons/close.svg";
-import { dialogManager, enableDialogueOverlay } from "../dialog_manager/DialogManagerStore";
-import Toast from "./toast/Toast.svelte";
-import DialogOverlay from "../dialog_overlay/DialogOverlay.svelte";
-import { fade } from "svelte/transition";
-let pages = [];
-const updateBreadcrumb = (pathname) => {
-  pages = [];
-  let basePath = "";
-  pathname.split("/").forEach((value, index) => {
-    if (index === 0) {
-      basePath = "/";
-      pages.push({
-        path: "/",
-        name: "Home"
-      });
-      return;
-    }
-    if (value === "") {
-      return;
-    }
-    basePath += value + "/";
-    pages.push({
-      path: basePath,
-      name: value
-    });
-  });
-  pages = pages;
-};
-$:
-  updateBreadcrumb($page.url.pathname);
-let enableBackgroundValue = true;
-enableBackground.subscribe((value) => {
-  enableBackgroundValue = value;
-});
-let enableDialogueOverlayValue = true;
-enableDialogueOverlay.subscribe((value) => {
-  enableDialogueOverlayValue = value;
-});
-enableDialogueOverlay.set(showDialogByDefault);
+<script lang="ts">
+	import { run } from "svelte/legacy";
+
+
+	// For auto dark/light mode
+	import { AppBar } from "@skeletonlabs/skeleton-svelte";
+	import RandomizedBackground from "../RandomizedBackground.svelte";
+
+	// navigation
+	import { page } from "$app/stores";
+	// store
+	import { enableBackground } from "../../store";
+	import type { BreadcrumbData } from "../../types/BreadcrumbData";
+	// assets
+	// import DialogOverlay from "../DialogOverlay.svelte";
+	import AresLogo from "../../assets/characters/ares/ares_logo.webp";
+	import FABIcon from "../../assets/bg_tiled/bg_tiled_turnip.png";
+	import CloseIcon from "../../assets/icons/close.svg";
+	import { dialogManager, enableDialogueOverlay } from "../dialog_manager/DialogManagerStore";
+	import Toast from "./toast/Toast.svelte";
+	import DialogOverlay from "../dialog_overlay/DialogOverlay.svelte";
+	import { fade } from "svelte/transition";
+
+	interface Props {
+		showDialogByDefault?: boolean;
+		children?: import("svelte").Snippet;
+	}
+
+	let { showDialogByDefault = false, children }: Props = $props();
+	// todo: clean up all these imports!
+
+	let pages: BreadcrumbData[] = $state([]);
+
+	const updateBreadcrumb = (pathname: string) => {
+		pages = [];
+		let basePath = "";
+		pathname.split("/").forEach((value, index) => {
+			if (index === 0) {
+				basePath = "/";
+				pages.push({
+					path: "/",
+					name: "Home"
+				});
+				return;
+			}
+
+			if (value === "") {
+				return;
+			}
+
+			basePath += value + "/";
+			pages.push({
+				path: basePath,
+				name: value
+			});
+		});
+		pages = pages;
+	};
+
+	run(() => {
+		updateBreadcrumb($page.url.pathname);
+	}); // run every time we navigate
+
+	let enableBackgroundValue = $state(true);
+	enableBackground.subscribe((value) => {
+		enableBackgroundValue = value;
+	});
+
+	let enableDialogueOverlayValue = $state(true);
+	enableDialogueOverlay.subscribe((value) => {
+		enableDialogueOverlayValue = value;
+	});
+
+	enableDialogueOverlay.set(showDialogByDefault);
 </script>
 
-<!-- App Shell -->
-<svelte:head>
-	{@html `<script>${autoModeWatcher.toString()} autoModeWatcher();</script>`}
-</svelte:head>
-
 <!--todo: turn off hidden when it's time-->
-<button class="fab" on:click={()=>{
+<button class="fab" onclick={()=>{
 	dialogManager.toggleDialogOverlay()
 }}>
 	{#if (enableDialogueOverlayValue)}
@@ -63,39 +85,42 @@ enableDialogueOverlay.set(showDialogByDefault);
 	{/if}
 </button>
 
-<AppShell>
-	<svelte:fragment slot="header">
-		<!-- App Bar -->
-		<AppBar
-			background="app-shell-token"
-			slotDefault="place-content-start"
-			slotTrail="place-content-end">
-			<svelte:fragment slot="lead">
-				<!--TODO: add logo or something for the lead in layout-->
-				<img
-					alt="Ares's head titled towards the left with his tongue out and winking"
-					class="ares-logo"
-					src={AresLogo}
-				/>
-				<span class="mr-2" />
-				<ol class="breadcrumb">
-					{#each pages as crumb, i}
-						{#if i < pages.length - 1}
-							<li class="crumb" in:fade>
-								<a href={crumb.path}>{crumb.name.charAt(0).toUpperCase() + crumb.name.slice(1)}</a>
-								&nbsp;&rsaquo;&nbsp;
-							</li>
-						{:else}
-							<li class="crumb" in:fade>{crumb.name.charAt(0).toUpperCase() + crumb.name.slice(1)}</li>
-						{/if}
-					{/each}
-				</ol>
-			</svelte:fragment>
-			<svelte:fragment slot="trail">
-				<LightSwitch bgLight="bg-surface-400" />
-			</svelte:fragment>
-		</AppBar>
-	</svelte:fragment>
+<div>
+	<!-- todo: header #migration -->
+	<!-- App Bar -->
+	<AppBar
+		background="bg-surface-600 dark:bg-surface-900">
+		{#snippet lead()}
+
+			<!--TODO: add logo or something for the lead in layout-->
+			<img
+				alt="Ares's head titled towards the left with his tongue out and winking"
+				class="ares-logo"
+				src={AresLogo}
+			/>
+			<span class="mr-2"></span>
+			<ol class="breadcrumb">
+				{#each pages as crumb, i}
+					{#if i < pages.length - 1}
+						<li class="crumb" in:fade>
+							<a href={crumb.path}>{crumb.name.charAt(0).toUpperCase() + crumb.name.slice(1)}</a>
+							 › 
+						</li>
+					{:else}
+						<li class="crumb" in:fade>{crumb.name.charAt(0).toUpperCase() + crumb.name.slice(1)}</li>
+					{/if}
+				{/each}
+			</ol>
+
+		{/snippet}
+		{#snippet trail()}
+
+			<!--			todo: light switch #migration -->
+			<!--			<LightSwitch bgLight="bg-surface-400" />-->
+
+		{/snippet}
+	</AppBar>
+
 
 	<RandomizedBackground enable={enableBackgroundValue} />
 
@@ -104,11 +129,11 @@ enableDialogueOverlay.set(showDialogByDefault);
 	<DialogOverlay></DialogOverlay>
 
 	<div class="default-page-container">
-		<slot />
-		<div class="footer-space" />
+		{@render children?.()}
+		<div class="footer-space"></div>
 	</div>
 
-</AppShell>
+</div>
 
 <style>
     :root {
@@ -130,19 +155,18 @@ enableDialogueOverlay.set(showDialogByDefault);
         --fab-margin: clamp(1em, 4.44vw, 2em);
     }
 
+    /*todo*/
+    /*@apply flex justify-center items-center;*/
     .default-page-container {
         display: flex;
-        align-items: center;
-        justify-content: center;
         width: 100%;
         padding: 1lh clamp(8px, 10vw, 2em);
         flex-direction: column;
         z-index: 0;
-}
+    }
 
     .ares-logo {
-        -o-object-fit: contain;
-           object-fit: contain;
+        object-fit: contain;
         height: 2em;
         margin-inline-end: 0.5em;
     }
@@ -154,116 +178,36 @@ enableDialogueOverlay.set(showDialogByDefault);
        it likely disappeared due to code gen shenanigans and package magic */
     .breadcrumb,
     .breadcrumb-nonresponsive {
-        display: flex;
-        width: 100%;
-        align-items: center;
-        overflow-x: auto;
-        /*@apply flex items-center space-x-4 w-full hide-scrollbar overflow-x-auto;*/
-}
+        /*todo: */
+        /*@apply flex items-center w-full overflow-x-auto;*/
+    }
 
     .crumb {
-        display: flex;
-        align-items: center;
-        justify-content: center;
+        /*todo: */
+        /*@apply flex justify-center items-center;*/
         margin: 0.1em;
-}
+    }
 
     .crumb-separator {
-        display: flex;
+        /*todo: */
+        /*@apply flex;*/
         color: var(--color-text-50);
-}
+    }
 
     /* === Auto-Responsive === */
 
     .breadcrumb li {
-        display: none;
-}
-
-    @media (min-width: 768px) {
-
-        .breadcrumb li {
-                display: block;
-        }
-}
+        /*@apply hidden md:block;*/
+    }
 
     .breadcrumb li:nth-last-child(3),
     .breadcrumb li:nth-last-child(2),
     .breadcrumb li:nth-last-child(1) {
-        display: block;
-}
-
-    :is(.dark .fab) {
-        --tw-bg-opacity: 1;
-        background-color: rgb(var(--color-tertiary-500) / var(--tw-bg-opacity));
-        color: rgb(var(--on-tertiary));
-}
-
-    .fab:disabled {
-        cursor: not-allowed;
-        opacity: 0.5;
-}
-
-    .fab:disabled:hover {
-        --tw-brightness: brightness(1);
-        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-
-    .fab:disabled:active {
-        --tw-scale-x: 1;
-        --tw-scale-y: 1;
-        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-    .fab {
-        font-size: 1rem;
-        line-height: 1.5rem;
-        padding-left: 1.25rem;
-        padding-right: 1.25rem;
-        padding-top: 9px;
-        padding-bottom: 9px;
-        white-space: nowrap;
-        text-align: center;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        transition-property: all;
-        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-        transition-duration: 150ms;
-        border-radius: var(--theme-rounded-base);
-}
-
-    .fab > :not([hidden]) ~ :not([hidden]) {
-        --tw-space-x-reverse: 0;
-        margin-right: calc(0.5rem * var(--tw-space-x-reverse));
-        margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
-}
-
-    .fab:hover {
-        --tw-brightness: brightness(1.15);
-        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-
-    .fab:active {
-        --tw-scale-x: 95%;
-        --tw-scale-y: 95%;
-        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-        --tw-brightness: brightness(.9);
-        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-
-    .fab {
-        --tw-bg-opacity: 1;
-        background-color: rgb(var(--color-tertiary-500) / var(--tw-bg-opacity));
-        color: rgb(var(--on-tertiary));
-}
-
-    :is(.dark .fab) {
-        --tw-bg-opacity: 1;
-        background-color: rgb(var(--color-tertiary-500) / var(--tw-bg-opacity));
-        color: rgb(var(--on-tertiary));
-}
+        /*@apply block;*/
+    }
 
     .fab {
+        /*@apply btn preset-filled-tertiary-500;*/
         padding: 0;
         position: fixed;
         bottom: var(--fab-margin);

package/dist/components/pineapple/PineappleBaseLayout.svelte.d.ts

@@ -1,18 +1,7 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        showDialogByDefault?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type PineappleBaseLayoutProps = typeof __propDef.props;
-export type PineappleBaseLayoutEvents = typeof __propDef.events;
-export type PineappleBaseLayoutSlots = typeof __propDef.slots;
-export default class PineappleBaseLayout extends SvelteComponent<PineappleBaseLayoutProps, PineappleBaseLayoutEvents, PineappleBaseLayoutSlots> {
+interface Props {
+    showDialogByDefault?: boolean;
+    children?: import("svelte").Snippet;
 }
-export {};
+declare const PineappleBaseLayout: import("svelte").Component<Props, {}, "">;
+type PineappleBaseLayout = ReturnType<typeof PineappleBaseLayout>;
+export default PineappleBaseLayout;

package/dist/components/pineapple/toast/DefaultToastBody.svelte

@@ -1,14 +1,22 @@
-<script>import CloseIcon from "../../../assets/icons/close.svg";
-export let props;
-export let dismissToastCallback;
-export let shouldEnableButton = false;
+<script lang="ts">
+	import type { Props } from "./DefaultToastBody";
+	import type { DismissToastCallback } from "./Toast";
+	import CloseIcon from "../../../assets/icons/close.svg";
+
+	interface Props_1 {
+		props: Props;
+		dismissToastCallback: DismissToastCallback | undefined;
+		shouldEnableButton?: boolean;
+	}
+
+	let { props, dismissToastCallback, shouldEnableButton = false }: Props_1 = $props();
 </script>
 
 <div class="body-container">
 	<!-- todo: support markdown? -->
-	<button class="btn"
+	<button class="btn bg-surface-100 dark:bg-surface-900"
 	        disabled={!shouldEnableButton}
-	        on:click={dismissToastCallback}>
+	        onclick={dismissToastCallback}>
 		<img class="img-icon" src={CloseIcon} alt="close button">
 	</button>
 	<div class="text-container">
@@ -31,16 +39,6 @@ export let shouldEnableButton = false;
         margin-left: 1em;
     }
 
-    .btn {
-        --tw-bg-opacity: 1;
-        background-color: rgb(var(--color-surface-100) / var(--tw-bg-opacity));
-}
-
-    :is(.dark .btn) {
-        --tw-bg-opacity: 1;
-        background-color: rgb(var(--color-surface-900) / var(--tw-bg-opacity));
-}
-
     .btn {
         border-radius: 8px;
 		    padding: 0.5em;

package/dist/components/pineapple/toast/DefaultToastBody.svelte.d.ts

@@ -1,20 +1,10 @@
-import { SvelteComponent } from "svelte";
 import type { Props } from "./DefaultToastBody";
 import type { DismissToastCallback } from "./Toast";
-declare const __propDef: {
-    props: {
-        props: Props;
-        dismissToastCallback: DismissToastCallback | undefined;
-        shouldEnableButton?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type DefaultToastBodyProps = typeof __propDef.props;
-export type DefaultToastBodyEvents = typeof __propDef.events;
-export type DefaultToastBodySlots = typeof __propDef.slots;
-export default class DefaultToastBody extends SvelteComponent<DefaultToastBodyProps, DefaultToastBodyEvents, DefaultToastBodySlots> {
+interface Props_1 {
+    props: Props;
+    dismissToastCallback: DismissToastCallback | undefined;
+    shouldEnableButton?: boolean;
 }
-export {};
+declare const DefaultToastBody: import("svelte").Component<Props_1, {}, "">;
+type DefaultToastBody = ReturnType<typeof DefaultToastBody>;
+export default DefaultToastBody;

package/dist/components/pineapple/toast/Toast.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="svelte" />
 import type { DefaultToastPair } from "./DefaultToastBody";
 import type { TestCustomToastPair } from "./custom-toast/TestCustomToast";
 /**

package/dist/components/pineapple/toast/Toast.svelte

@@ -1,56 +1,80 @@
-<script>import {
-  activeToast,
-  DefaultToastParamsDuration,
-  toastQueue
-} from "./Toast";
-import {} from "svelte";
-import Card from "../../Card.svelte";
-import { spring, tweened } from "svelte/motion";
-let localComponent;
-let localProps;
-const HIDDEN_VALUE = -15;
-const SHOWN_VALUE = 0;
-const progress = tweened(0, { duration: DefaultToastParamsDuration });
-const position = spring(HIDDEN_VALUE);
-position.damping = 0.4;
-let isDismissed = false;
-let shouldEnableButton = false;
-const onToastDisappear = () => {
-  localComponent = void 0;
-  activeToast.update(() => {
-    if (toastQueue.length === 0) {
-      return void 0;
-    }
-    return toastQueue.shift();
-  });
-};
-activeToast.subscribe((params) => {
-  if (!params) {
-    return;
-  }
-  if (params.componentAndProps?.component === localComponent) {
-    return;
-  }
-  localComponent = params.componentAndProps.component;
-  localProps = params.componentAndProps.props;
-  progress.set(0, { duration: 0 }).then(() => {
-    position.set(SHOWN_VALUE).then(() => {
-      shouldEnableButton = true;
-      progress.set(100, { delay: 500, duration: params.duration ?? DefaultToastParamsDuration }).then(() => {
-        shouldEnableButton = false;
-        if (isDismissed) {
-          return;
-        }
-        position.set(HIDDEN_VALUE).then(onToastDisappear);
-      });
-    });
-  });
-});
-const dismissToast = () => {
-  shouldEnableButton = false;
-  isDismissed = true;
-  position.set(HIDDEN_VALUE).then(onToastDisappear);
-};
+<script lang="ts">
+	import {
+		activeToast,
+		type CustomToastPairs,
+		DefaultToastParamsDuration,
+		toastQueue
+	} from "./Toast";
+	import { type ComponentType } from "svelte";
+	import Card from "../../Card.svelte";
+	import { spring, tweened } from "svelte/motion";
+
+	let localComponent: ComponentType | undefined = $state();
+	let localProps: CustomToastPairs["props"] = $state();
+
+	// todo: make hidden value reliant on current vh
+	const HIDDEN_VALUE = -15;
+	const SHOWN_VALUE = 0;
+	const progress = tweened(0, { duration: DefaultToastParamsDuration });
+	const position = spring(HIDDEN_VALUE);
+	position.damping = 0.4;
+	let isDismissed = false;
+	let shouldEnableButton = $state(false);
+
+	const onToastDisappear = () => {
+		// clear the local component to undefined to make the component disappear
+		// also set activeToast to null to indicate to the system that it's ready to take new
+		// Toast requests
+		localComponent = undefined;
+		activeToast.update(() => {
+			if (toastQueue.length === 0) {
+				return undefined;
+			}
+			return toastQueue.shift();
+		});
+	};
+
+	activeToast.subscribe((params) => {
+		if (!params) {
+			return;
+		}
+
+		if (params.componentAndProps?.component === localComponent) {
+			return;
+		}
+
+		localComponent = params.componentAndProps.component;
+		localProps = params.componentAndProps.props;
+
+		// todo: make unnested
+		// set progress to 0 before showing
+		progress.set(0, { duration: 0 }).then(() => {
+			// animate showing the toast
+			position.set(SHOWN_VALUE).then(() => {
+				shouldEnableButton = true;
+
+				// now animate the lifespan of the current toast
+				progress.set(100, { delay: 500, duration: params.duration ?? DefaultToastParamsDuration }).then(() => {
+					// during the lifecycle the button to cause dismissal can only happen when
+					// position is completely set SHOWN_VALUE and when progress has reached to 100
+					shouldEnableButton = false;
+					if (isDismissed) {
+						return;
+					}
+
+					// when the lifespan duration is over, animate hiding the toast by putting its bottom
+					// position out of bounds
+					position.set(HIDDEN_VALUE).then(onToastDisappear);
+				});
+			});
+		});
+	});
+
+	const dismissToast = () => {
+		shouldEnableButton = false;
+		isDismissed = true;
+		position.set(HIDDEN_VALUE).then(onToastDisappear);
+	};
 </script>
 
 {#if (localComponent !== undefined)}
@@ -59,17 +83,21 @@ const dismissToast = () => {
 		<Card marginBottom="1lh"
 		      turnOnLightModeBorder={false}
 		      overrideStyle="box-shadow: 3px 3px 3px var(--shadow-color);">
-			<div slot="content">
-				{#if (localProps !== undefined)}
-					<svelte:component this={localComponent}
-					                  props={localProps}
-					                  dismissToastCallback={dismissToast}
-					                  shouldEnableButton={shouldEnableButton} />
-				{:else }
-					<svelte:component this={localComponent} />
-				{/if}
-				<progress id="toast-progress" value={$progress/100}></progress>
-			</div>
+			{#snippet content()}
+						<div >
+					{#if (localProps !== undefined)}
+						{@const SvelteComponent = localComponent}
+					<SvelteComponent
+						                  props={localProps}
+						                  dismissToastCallback={dismissToast}
+						                  shouldEnableButton={shouldEnableButton} />
+					{:else }
+						{@const SvelteComponent_1 = localComponent}
+					<SvelteComponent_1 />
+					{/if}
+					<progress id="toast-progress" value={$progress/100}></progress>
+				</div>
+					{/snippet}
 		</Card>
 	</div>
 {/if}