@turnipxenon/pineapple 2.9.0 → 3.0.0-alpha-3

package/dist/components/navigation_component/NavigationComponent.svelte

@@ -1,27 +1,52 @@
-<script>import NavigationControl from "./NavigationControl.svelte";
-import { Card, createGoToFunction } from "../..";
-import { parsePageMeta } from "./PageMeta";
-export let fileList;
-export let jsonList;
-export let title = void 0;
-export let imageMap = /* @__PURE__ */ new Map();
-export let shouldAllowControl = true;
-export let parentSubpath;
-export let allowUpperControl = true;
-export let compareFn = void 0;
-export let pageSize = 5;
-export let currentIndex = 0;
-const pageFlatList = parsePageMeta(fileList, jsonList, imageMap, compareFn);
-$:
-  visiblePages = pageFlatList.slice(currentIndex * pageSize, currentIndex * pageSize + pageSize);
+<script lang="ts">
+	import NavigationControl from "./NavigationControl.svelte";
+	import { Card, createGoToFunction } from "../..";
+	import { parsePageMeta, type ParsePageMetaCompareFn } from "./PageMeta";
+
+
+	
+	interface Props {
+		fileList: Record<string, unknown>;
+		jsonList: Record<string, unknown>;
+		title?: string | undefined;
+		imageMap?: any;
+		shouldAllowControl?: boolean;
+		/**
+	 * Should include a slash before and after the path
+	 */
+		parentSubpath: string;
+		allowUpperControl?: boolean;
+		compareFn?: undefined | ParsePageMetaCompareFn;
+		pageSize?: number;
+		currentIndex?: number;
+	}
+
+	let {
+		fileList,
+		jsonList,
+		title = undefined,
+		imageMap = new Map<string, string>(),
+		shouldAllowControl = true,
+		parentSubpath,
+		allowUpperControl = true,
+		compareFn = undefined,
+		pageSize = $bindable(5),
+		currentIndex = $bindable(0)
+	}: Props = $props();
+
+	const pageFlatList = $state(parsePageMeta(fileList, jsonList, imageMap, compareFn));
+
+	let visiblePages = $derived(pageFlatList.slice(currentIndex * pageSize, (currentIndex * pageSize) + pageSize));
 </script>
 
 <div class="navigation-wrapper">
 	{#if (title)}
 		<Card>
-			<h1 slot="content" class="default-card navigation-title">
-				{title}
-			</h1>
+			{#snippet content()}
+						<h1  class="default-card navigation-title">
+					{title}
+				</h1>
+					{/snippet}
 		</Card>
 	{/if}
 
@@ -37,7 +62,7 @@ $:
 			{@const fullPath=`${parentSubpath}${pageMeta.relativeLink}`}
 			<button class="navigation-element"
 			        title={fullPath}
-			        on:click={createGoToFunction(fullPath)}>
+			        onclick={createGoToFunction(fullPath)}>
 				{#if pageMeta.imageUrl}
 					<img src={pageMeta.imageUrl}
 					     alt={pageMeta.imageAlt ?? "placeholder alt text please replace me or report me!"} />
@@ -60,7 +85,9 @@ $:
 
 		{#if visiblePages.length === 0}
 			<Card>
-				<p class="default-card" slot="content">Sorry, no content was found</p>
+				{#snippet content()}
+								<p class="default-card" >Sorry, no content was found</p>
+							{/snippet}
 			</Card>
 		{/if}
 	</div>
@@ -97,124 +124,9 @@ $:
         }
     }
 
-    .dark .navigation-element {
-        background-color: rgb(var(--color-surface-800));
-        --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-        --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-        box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-        --tw-ring-inset: inset;
-        --tw-ring-color: rgb(250 250 250 / 0.05);
-}
-
-    .navigation-element:disabled {
-        cursor: not-allowed;
-        opacity: 0.5;
-}
-
-    .navigation-element: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);
-}
-
-    .navigation-element: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));
-}
-
-    .navigation-element {
-        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);
-}
-
-    .navigation-element > :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)));
-}
-
-    .navigation-element: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);
-}
-
-    .navigation-element: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);
-}
-
-    .navigation-element {
-        background-color: rgb(var(--color-surface-100));
-        --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-        --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-        box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-        --tw-ring-inset: inset;
-        --tw-ring-color: rgb(23 23 23 / 0.05);
-        border-radius: var(--theme-rounded-container);
-}
-
-    .dark .navigation-element {
-        background-color: rgb(var(--color-surface-800));
-        --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-        --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-        box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-        --tw-ring-inset: inset;
-        --tw-ring-color: rgb(250 250 250 / 0.05);
-}
-
-    a.navigation-element {
-        transition-property: all;
-        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-        transition-duration: 150ms;
-}
-
-    a.navigation-element:hover {
-        --tw-brightness: brightness(1.05);
-        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);
-}
-
-    .navigation-element {
-        transition-property: all;
-        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-        transition-duration: 150ms;
-}
-
-    .navigation-element:hover {
-        --tw-scale-x: 101%;
-        --tw-scale-y: 101%;
-        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-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
-        --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
-        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
-    .navigation-element {
-        --tw-bg-opacity: 1;
-        background-color: rgb(var(--color-surface-100) / var(--tw-bg-opacity));
-}
-
-    :is(.dark .navigation-element) {
-        --tw-bg-opacity: 1;
-        background-color: rgb(var(--color-surface-900) / var(--tw-bg-opacity));
-}
-
     .navigation-element {
+		    /* todo: migration */
+        /*@apply btn card card-hover bg-surface-100 dark:bg-surface-900;*/
         container-type: inline-size;
         display: flex;
         text-align: start;
@@ -224,8 +136,7 @@ $:
 
     img {
         height: 20em;
-        -o-object-fit: cover;
-           object-fit: cover;
+        object-fit: cover;
         padding: var(--theme-border-base);
         border-radius: var(--theme-rounded-container) 0 0 var(--theme-rounded-container);
     }
@@ -244,7 +155,7 @@ $:
 
     .blurb-text {
         padding: 2em;
-        flex-grow: 1;
+        grow: 1;
         white-space: initial;
         min-width: 0;
     }

package/dist/components/navigation_component/NavigationComponent.svelte.d.ts

@@ -1,28 +1,19 @@
-import { SvelteComponent } from "svelte";
 import { type ParsePageMetaCompareFn } from "./PageMeta";
-declare const __propDef: {
-    props: {
-        fileList: Record<string, unknown>;
-        jsonList: Record<string, unknown>;
-        title?: string | undefined;
-        imageMap?: Map<string, string> | undefined;
-        shouldAllowControl?: boolean | undefined;
-        /**
-             * Should include a slash before and after the path
-             */ parentSubpath: string;
-        allowUpperControl?: boolean | undefined;
-        compareFn?: undefined | ParsePageMetaCompareFn;
-        pageSize?: number | undefined;
-        currentIndex?: number | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type NavigationComponentProps = typeof __propDef.props;
-export type NavigationComponentEvents = typeof __propDef.events;
-export type NavigationComponentSlots = typeof __propDef.slots;
-export default class NavigationComponent extends SvelteComponent<NavigationComponentProps, NavigationComponentEvents, NavigationComponentSlots> {
+interface Props {
+    fileList: Record<string, unknown>;
+    jsonList: Record<string, unknown>;
+    title?: string | undefined;
+    imageMap?: any;
+    shouldAllowControl?: boolean;
+    /**
+ * Should include a slash before and after the path
+ */
+    parentSubpath: string;
+    allowUpperControl?: boolean;
+    compareFn?: undefined | ParsePageMetaCompareFn;
+    pageSize?: number;
+    currentIndex?: number;
 }
-export {};
+declare const NavigationComponent: import("svelte").Component<Props, {}, "currentIndex" | "pageSize">;
+type NavigationComponent = ReturnType<typeof NavigationComponent>;
+export default NavigationComponent;

package/dist/components/navigation_component/NavigationControl.svelte

@@ -1,44 +1,59 @@
-<script>import { onMount } from "svelte";
-export let currentIndex = 0;
-export let contentLength;
-export let pageSize;
-import { Card } from "../..";
-import { page } from "$app/stores";
-import { goto } from "$app/navigation";
-const queryIndex = $page.url.searchParams.get("index");
-if (queryIndex) {
-  currentIndex = parseInt(queryIndex) || 0;
-}
-const queryPageSize = $page.url.searchParams.get("pageSize");
-if (queryPageSize) {
-  pageSize = parseInt(queryPageSize) || 5;
-}
-const movePage = (isNext) => {
-  if (isNext) {
-    currentIndex = currentIndex + 1;
-  } else {
-    currentIndex = currentIndex - 1;
-  }
-  const query = new URLSearchParams($page.url.searchParams.toString());
-  query.set("index", currentIndex.toString());
-  goto(`?${query.toString()}`);
-};
-onMount(() => {
-  const query = new URLSearchParams($page.url.searchParams.toString());
-  query.set("index", currentIndex.toString());
-  query.set("pageSize", pageSize.toString());
-  goto(`?${query.toString()}`);
-});
+<script lang="ts">
+	import { onMount } from "svelte";
+	import { page } from "$app/state";
+
+	import { Card } from "../..";
+	import { goto } from "$app/navigation";
+
+	interface Props {
+		currentIndex?: number;
+		contentLength: number;
+		pageSize: number;
+	}
+
+	let { currentIndex = $bindable(0), contentLength, pageSize = $bindable() }: Props = $props();
+
+	const queryIndex = page.url.searchParams.get("index");
+	if (queryIndex) {
+		currentIndex = parseInt(queryIndex) || 0;
+	}
+	const queryPageSize = page.url.searchParams.get("pageSize");
+	if (queryPageSize) {
+		pageSize = parseInt(queryPageSize) || 5;
+	}
+
+	const movePage = (isNext: boolean) => {
+		if (isNext) {
+			currentIndex = currentIndex + 1;
+		} else {
+			currentIndex = currentIndex - 1;
+		}
+
+		const query = new URLSearchParams(page.url.searchParams.toString());
+		query.set("index", currentIndex.toString());
+		goto(`?${query.toString()}`);
+	};
+
+	onMount(() => {
+		const query = new URLSearchParams(page.url.searchParams.toString());
+		query.set("index", currentIndex.toString());
+		query.set("pageSize", pageSize.toString());
+		goto(`?${query.toString()}`);
+	});
 </script>
 
 <div class="navigation-control-container">
 	<button class="navigation-control-button"
 	        disabled={currentIndex <= 0}
-	        on:click={() => {movePage(false)}}>{"<"}</button>
-	<Card marginBottom="0"><p slot="content" style="margin: 1em">Page {currentIndex + 1}</p></Card>
+	        onclick={() => {movePage(false)}}>{"<"}</button>
+	<Card marginBottom="0">
+		{#snippet content()}
+			<p style="margin: 1em">Page {currentIndex + 1}</p>
+		{/snippet}
+	</Card>
 	<button class="navigation-control-button"
 	        disabled={(currentIndex + 1) * pageSize >= contentLength}
-	        on:click={() => {movePage(true)}}>{">"}</button>
+	        onclick={() => {movePage(true)}}>{">"}</button>
 </div>
 
 <style>
@@ -48,74 +63,8 @@ onMount(() => {
         margin: 1lh 0;
     }
 
-    :is(.dark .navigation-control-button) {
-        --tw-bg-opacity: 1;
-        background-color: rgb(var(--color-secondary-500) / var(--tw-bg-opacity));
-        color: rgb(var(--on-secondary));
-}
-
-    .navigation-control-button:disabled {
-        cursor: not-allowed;
-        opacity: 0.5;
-}
-
-    .navigation-control-button: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);
-}
-
-    .navigation-control-button: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));
-}
-
     .navigation-control-button {
-        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);
-}
-
-    .navigation-control-button > :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)));
-}
-
-    .navigation-control-button: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);
-}
-
-    .navigation-control-button: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);
-}
-
-    .navigation-control-button {
-        --tw-bg-opacity: 1;
-        background-color: rgb(var(--color-secondary-500) / var(--tw-bg-opacity));
-        color: rgb(var(--on-secondary));
-}
-
-    :is(.dark .navigation-control-button) {
-        --tw-bg-opacity: 1;
-        background-color: rgb(var(--color-secondary-500) / var(--tw-bg-opacity));
-        color: rgb(var(--on-secondary));
-}
+		    /* todo: migration */
+        /*@apply btn preset-filled-secondary-500;*/
+    }
 </style>

package/dist/components/navigation_component/NavigationControl.svelte.d.ts

@@ -1,18 +1,8 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        currentIndex?: number | undefined;
-        contentLength: number;
-        pageSize: number;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type NavigationControlProps = typeof __propDef.props;
-export type NavigationControlEvents = typeof __propDef.events;
-export type NavigationControlSlots = typeof __propDef.slots;
-export default class NavigationControl extends SvelteComponent<NavigationControlProps, NavigationControlEvents, NavigationControlSlots> {
+interface Props {
+    currentIndex?: number;
+    contentLength: number;
+    pageSize: number;
 }
-export {};
+declare const NavigationControl: import("svelte").Component<Props, {}, "currentIndex" | "pageSize">;
+type NavigationControl = ReturnType<typeof NavigationControl>;
+export default NavigationControl;

package/dist/components/overrideable_meta/OverridableMeta.svelte

@@ -16,28 +16,43 @@ export const load = async (): Promise<OverridableMetaProps> => {
 </code>
 -->
 
-<script>import WebThumbnailImage from "../../assets/placeholder/placeholder_circle.png";
-export let rootUrl = "http://localhost:5173";
-export let title = "Welcome to my portfolio";
-export let ogTitle = "Turnip time!";
-export let ogDescription = "Welcome to Turnip's test portfolio";
-export let ogImage = WebThumbnailImage;
-import { page } from "$app/stores";
-const data = {
-  title: "Welcome to my portfolio",
-  ogUrl: "https://www.crouton.net/",
-  ogTitle: "Turnip time!",
-  ogDescription: "Welcome to Turnip's test portfolio",
-  ogImage: WebThumbnailImage
-};
-page.subscribe((p) => {
-  const pageData = p.data;
-  data.title = pageData.title ?? title;
-  data.ogUrl = `${rootUrl}${p.url.pathname}`;
-  data.ogTitle = pageData.ogTitle ?? ogTitle;
-  data.ogDescription = pageData.ogDescription ?? ogDescription;
-  data.ogImage = pageData.ogImage ?? ogImage;
-});
+<script lang="ts">
+	import WebThumbnailImage from "../../assets/placeholder/placeholder_circle.png";
+
+
+	import { page } from "$app/stores";
+	import type { OverridableMetaProps } from "./OverridableMetaProps";
+	interface Props {
+		rootUrl?: string;
+		title?: string;
+		ogTitle?: string;
+		ogDescription?: string;
+		ogImage?: any;
+	}
+
+	let {
+		rootUrl = "http://localhost:5173",
+		title = "Welcome to my portfolio",
+		ogTitle = "Turnip time!",
+		ogDescription = "Welcome to Turnip's test portfolio",
+		ogImage = WebThumbnailImage
+	}: Props = $props();
+
+	const data: OverridableMetaProps = $state({
+		title: "Welcome to my portfolio",
+		ogUrl: "https://www.crouton.net/",
+		ogTitle: "Turnip time!",
+		ogDescription: "Welcome to Turnip's test portfolio",
+		ogImage: WebThumbnailImage
+	});
+	page.subscribe(p => {
+		const pageData: OverridableMetaProps = p.data;
+		data.title = pageData.title ?? title;
+		data.ogUrl = `${rootUrl}${p.url.pathname}`;
+		data.ogTitle = pageData.ogTitle ?? ogTitle;
+		data.ogDescription = pageData.ogDescription ?? ogDescription;
+		data.ogImage = pageData.ogImage ?? ogImage;
+	});
 </script>
 
 <svelte:head>

package/dist/components/overrideable_meta/OverridableMeta.svelte.d.ts

@@ -1,20 +1,10 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        rootUrl?: string | undefined;
-        title?: string | undefined;
-        ogTitle?: string | undefined;
-        ogDescription?: string | undefined;
-        ogImage?: any;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-type OverridableMetaProps_ = typeof __propDef.props;
-export { OverridableMetaProps_ as OverridableMetaProps };
-export type OverridableMetaEvents = typeof __propDef.events;
-export type OverridableMetaSlots = typeof __propDef.slots;
-export default class OverridableMeta extends SvelteComponent<OverridableMetaProps_, OverridableMetaEvents, OverridableMetaSlots> {
+interface Props {
+    rootUrl?: string;
+    title?: string;
+    ogTitle?: string;
+    ogDescription?: string;
+    ogImage?: any;
 }
+declare const OverridableMeta: import("svelte").Component<Props, {}, "">;
+type OverridableMeta = ReturnType<typeof OverridableMeta>;
+export default OverridableMeta;