@turnipxenon/pineapple 3.1.0-alpha.9 → 4.0.0-alpha.1

package/dist/components/pineapple/PineappleBaseLayout.svelte

@@ -1,216 +0,0 @@
-<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 { enableDialogueOverlay } from "../dialog_manager/DialogManagerStore";
-	import Toast from "./toast/Toast.svelte";
-	import DialogOverlay from "../dialog_overlay/DialogOverlay.svelte";
-	import { fade } from "svelte/transition";
-	import { dialogManager } from "../dialog_manager/DialogManager";
-
-	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>
-
-<!--todo: turn off hidden when it's time-->
-<button class="fab" onclick={()=>{
-	dialogManager.toggleDialogOverlay();
-}}>
-	{#if (enableDialogueOverlayValue)}
-		<img class="turnip-icon" src={CloseIcon} alt="interactive floating action button represented as a turnip">
-	{:else }
-		<img class="turnip-icon" src={FABIcon} alt="interactive floating action button represented as a turnip">
-	{/if}
-</button>
-
-<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} />
-
-	<Toast></Toast>
-
-	<DialogOverlay></DialogOverlay>
-
-	<div class="default-page-container">
-		{@render children?.()}
-		<div class="footer-space"></div>
-	</div>
-
-</div>
-
-<style>
-    /*todo*/
-    /*@apply flex justify-center items-center;*/
-    .default-page-container {
-        display: flex;
-        width: 100%;
-        padding: 1lh clamp(8px, 10vw, 2em);
-        flex-direction: column;
-        z-index: 0;
-    }
-
-    .ares-logo {
-        object-fit: contain;
-        height: 2em;
-        margin-inline-end: 0.5em;
-    }
-
-    /* breadcrumb does not work due to a lot of magic stuff i do
-       the code below is from skeleton's tailwind css:
-       https://github.com/skeletonlabs/skeleton/blob/54f4ecedabf2be6d94a670b56dc8821095ca3fc9/packages/plugin/src/styles/components/breadcrumbs.css
-
-       it likely disappeared due to code gen shenanigans and package magic */
-    .breadcrumb,
-    .breadcrumb-nonresponsive {
-        /*todo: */
-        /*@apply flex items-center w-full overflow-x-auto;*/
-    }
-
-    .crumb {
-        /*todo: */
-        /*@apply flex justify-center items-center;*/
-        margin: 0.1em;
-    }
-
-    .crumb-separator {
-        /*todo: */
-        /*@apply flex;*/
-        color: var(--color-text-50);
-    }
-
-    /* === Auto-Responsive === */
-
-    .breadcrumb li {
-        /*@apply hidden md:block;*/
-    }
-
-    .breadcrumb li:nth-last-child(3),
-    .breadcrumb li:nth-last-child(2),
-    .breadcrumb li:nth-last-child(1) {
-        /*@apply block;*/
-    }
-
-    .fab {
-        /*@apply btn preset-filled-tertiary-500;*/
-        padding: 0;
-        position: fixed;
-        bottom: var(--fab-margin);
-        width: 4em;
-        border-radius: 50%;
-        z-index: 100;
-    }
-
-    .fab > img {
-        width: 100%;
-    }
-
-    .fab:dir(ltr) {
-        right: var(--fab-margin);
-    }
-
-    .fab:dir(rtl) {
-        left: var(--fab-margin);
-    }
-
-    .turnip-icon {
-        margin: 4px;
-    }
-</style>

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

@@ -1,7 +0,0 @@
-interface Props {
-    showDialogByDefault?: boolean;
-    children?: import("svelte").Snippet;
-}
-declare const PineappleBaseLayout: import("svelte").Component<Props, {}, "">;
-type PineappleBaseLayout = ReturnType<typeof PineappleBaseLayout>;
-export default PineappleBaseLayout;

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

@@ -1,8 +0,0 @@
-import DefaultToastBody from "./DefaultToastBody.svelte";
-export interface Props {
-    message: string;
-}
-export interface DefaultToastPair {
-    component: typeof DefaultToastBody;
-    props: Props;
-}

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

@@ -1 +0,0 @@
-import DefaultToastBody from "./DefaultToastBody.svelte";

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

@@ -1,46 +0,0 @@
-<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 bg-surface-100 dark:bg-surface-900"
-	        disabled={!shouldEnableButton}
-	        onclick={dismissToastCallback}>
-		<img class="img-icon" src={CloseIcon} alt="close button">
-	</button>
-	<div class="text-container">
-		<span>{props.message}</span>
-	</div>
-</div>
-
-<style>
-    .body-container {
-        display: flex;
-        gap: 1em;
-    }
-
-    .text-container {
-        margin-top: 0.25lh;
-        margin-right: 1em;
-    }
-
-    .text-container:dir(rtl) {
-        margin-left: 1em;
-    }
-
-    .btn {
-        border-radius: 8px;
-		    padding: 0.5em;
-    }
-</style>

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

@@ -1,10 +0,0 @@
-import type { Props } from "./DefaultToastBody";
-import type { DismissToastCallback } from "./Toast";
-interface Props_1 {
-    props: Props;
-    dismissToastCallback: DismissToastCallback | undefined;
-    shouldEnableButton?: boolean;
-}
-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,26 +0,0 @@
-import type { DefaultToastPair } from "./DefaultToastBody";
-import type { TestCustomToastPair } from "./custom-toast/TestCustomToast";
-/**
- * Default toast duration is 5 seconds
- */
-export declare const DefaultToastParamsDuration = 5000;
-export type CustomToastPairs = DefaultToastPair | TestCustomToastPair;
-export type DismissToastCallback = () => void;
-export interface ToastParams {
-    componentAndProps: CustomToastPairs;
-    /**
-     * Time in millisecond. If undefined, defaults to DefaultToastParamsDuration
-     */
-    duration?: number;
-}
-/**
- * todo: do not call directly documentation
- */
-export declare const activeToast: import("svelte/store").Writable<ToastParams | undefined>;
-export declare const toastQueue: ToastParams[];
-/**
- *
- * @param newToast
- */
-export declare const showComponentInToast: (newToast: ToastParams) => void;
-export declare const showTextInToast: (message: string) => void;

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

@@ -1,37 +0,0 @@
-import { writable } from "svelte/store";
-import DefaultToastBody from "./DefaultToastBody.svelte";
-/**
- * Default toast duration is 5 seconds
- */
-export const DefaultToastParamsDuration = 5000;
-/**
- * todo: do not call directly documentation
- */
-export const activeToast = writable();
-export const toastQueue = [];
-/**
- *
- * @param newToast
- */
-export const showComponentInToast = (newToast) => {
-    // todo: queue component
-    activeToast.update((currentToast) => {
-        if (currentToast !== undefined) {
-            toastQueue.push(newToast);
-            return currentToast;
-        }
-        else {
-            return newToast;
-        }
-    });
-};
-export const showTextInToast = (message) => {
-    showComponentInToast({
-        componentAndProps: {
-            component: DefaultToastBody,
-            props: {
-                message
-            }
-        }
-    });
-};

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

@@ -1,120 +0,0 @@
-<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)}
-	<div class="toast-positioner" style={`bottom: ${$position}lh;`}>
-		<!-- todo: adjust shadow to be more dynamic or transparent -->
-		<Card marginBottom="1lh"
-		      turnOnLightModeBorder={false}
-		      overrideStyle="box-shadow: 3px 3px 3px var(--shadow-color);">
-			{#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}
-
-<style>
-    .toast-positioner {
-        position: fixed;
-        /* 12em = this component's margin (4em) + fab margin + width (8em) */
-        max-width: calc(100vw - 12em);
-        z-index: 100;
-    }
-
-    .toast-positioner:dir(ltr) {
-        left: 2em;
-    }
-
-    .toast-positioner:dir(rtl) {
-        right: 2em;
-    }
-</style>

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

@@ -1,3 +0,0 @@
-declare const Toast: import("svelte").Component<Record<string, never>, {}, "">;
-type Toast = ReturnType<typeof Toast>;
-export default Toast;

package/dist/components/pineapple/toast/custom-toast/TestCustomToast.d.ts

@@ -1,5 +0,0 @@
-import TestCustomToast from "./TestCustomToast.svelte";
-export interface TestCustomToastPair {
-    component: typeof TestCustomToast;
-    props: undefined;
-}

package/dist/components/pineapple/toast/custom-toast/TestCustomToast.js

@@ -1 +0,0 @@
-import TestCustomToast from "./TestCustomToast.svelte";

package/dist/components/pineapple/toast/custom-toast/TestCustomToast.svelte

@@ -1 +0,0 @@
-<h1>Testing bad custom card</h1>

package/dist/components/pineapple/toast/custom-toast/TestCustomToast.svelte.d.ts

@@ -1,26 +0,0 @@
-export default TestCustomToast;
-type TestCustomToast = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const TestCustomToast: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}