@turnipxenon/pineapple 3.0.0-alpha.8 → 3.0.0-alpha.9

package/dist/components/blog_template/BlogTemplateInner.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { SimplePageMeta } from "../..";
+	import type { SimplePageMeta } from "../navigation_component/index";
 
 	interface Props {
 		pageMeta: SimplePageMeta;

package/dist/components/blog_template/BlogTemplateInner.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { SimplePageMeta } from "../..";
+import type { SimplePageMeta } from "../navigation_component/index";
 interface Props {
     pageMeta: SimplePageMeta;
     children?: import('svelte').Snippet;

package/dist/components/navigation_component/NavigationComponent.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
 	import NavigationControl from "./NavigationControl.svelte";
-	import { Card, createGoToFunction } from "../..";
 	import { parsePageMeta, type ParsePageMetaCompareFn } from "./PageMeta";
+	import { Card } from "../index";
+	import { createGoToFunction } from "../../util/util";
 
 
 	

package/dist/components/navigation_component/NavigationControl.svelte

@@ -2,7 +2,7 @@
 	import { onMount } from "svelte";
 	import { page } from "$app/state";
 
-	import { Card } from "../..";
+	import { Card } from "../index";
 	import { goto } from "$app/navigation";
 
 	interface Props {

package/dist/styles/turnip-theme.css

@@ -237,89 +237,89 @@ html.dark {
         @variant dark {
             color: var(--color-surface-950);
         }
+        /* endregion components */
+    }
+}
 
-        blockquote {
-            @apply mb-4;
-            font-style: italic;
-            border: 0;
-            text-align: center;
-            filter: brightness(140%);
-        }
 
-        h1, h2, h3, h4, h5, h6, .fake-h2, .fake-h3, .fake-h4 {
-            text-align: center;
-            margin-top: 0;
-            font-weight: bolder;
-            color: var(--color-primary-900);
+blockquote {
+    @apply mb-4;
+    font-style: italic;
+    border: 0;
+    text-align: center;
+    filter: brightness(140%);
+}
 
-            @variant dark {
-                color: var(--color-primary-100);
-            }
-        }
+h1, h2, h3, h4, h5, h6, .fake-h2, .fake-h3, .fake-h4 {
+    text-align: center;
+    margin-top: 0;
+    font-weight: bolder;
+    color: var(--color-primary-900);
 
-        h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p, .fake-h2 + p, .fake-h3 + p, .fake-h4 + p {
-            margin-top: 0.5lh;
-        }
+    @variant dark {
+        color: var(--color-primary-100);
+    }
+}
 
-        h1 {
-            @apply text-4xl;
-        }
+h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p, .fake-h2 + p, .fake-h3 + p, .fake-h4 + p {
+    margin-top: 0.5lh;
+}
 
-        h2, .fake-h2 {
-            @apply text-3xl;
-        }
+h1 {
+    @apply text-4xl;
+}
 
-        h3, .fake-h3 {
-            @apply text-2xl;
-        }
+h2, .fake-h2 {
+    @apply text-3xl;
+}
 
-        h4, .fake-h4 {
-            @apply text-xl;
-        }
+h3, .fake-h3 {
+    @apply text-2xl;
+}
 
-        h5 {
-            @apply text-lg;
-        }
+h4, .fake-h4 {
+    @apply text-xl;
+}
 
-        h6 {
-            text-decoration: underline;
-        }
+h5 {
+    @apply text-lg;
+}
 
-        a {
-            text-decoration: underline;
-            color: var(--color-secondary-500);
+h6 {
+    text-decoration: underline;
+}
 
-            @variant dark {
-                color: var(--color-secondary-300);
-            }
-        }
+a {
+    text-decoration: underline;
+    color: var(--color-secondary-500);
 
-        a:hover, a:focus {
-            filter: brightness(150%);
-        }
+    @variant dark {
+        color: var(--color-secondary-300);
+    }
+}
 
-        a:visited {
-            color: var(--color-secondary-950);
+a:hover, a:focus {
+    filter: brightness(150%);
+}
 
-            @variant dark {
-                color: var(--color-secondary-200);
-            }
-        }
+a:visited {
+    color: var(--color-secondary-950);
 
-        ul {
-            list-style: inside;
-        }
+    @variant dark {
+        color: var(--color-secondary-200);
+    }
+}
 
-        ol {
-            list-style: decimal inside;
-        }
+ul {
+    list-style: inside;
+}
 
-        p{
-            @apply mb-3;
-        }
+ol {
+    list-style: decimal inside;
+}
 
-        /* endregion components */
-    }
+p{
+    @apply mb-3;
 }
 
 @theme {

package/dist/template/seaweed/entries/ThisWebpage.svelte

@@ -3,7 +3,7 @@
 	import Card from "../../../components/Card.svelte";
 	import GithubIcon from "../../../assets/icons/github-mark.svg";
 	import ThisWebsiteFootage from "../../../assets/others/seaweed-showcase.mp4";
-	import { Chip } from "../../..";
+	import { Chip } from "../../../components/index";
 
 	// noinspection JSUnusedGlobalSymbols
 	interface Props {

package/dist/ui/components/accordion/PinyaAccordion.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { Accordion } from "@skeletonlabs/skeleton-svelte";
+	import type { Snippet } from "svelte";
+
+	let {
+		value = $bindable(),
+		children,
+	}: {
+		value: string[],
+		children: Snippet,
+	} = $props();
+</script>
+
+<Accordion
+	classes="bg-primary-100 dark:bg-tertiary-900 dark:saturate-75"
+	{value}
+	onValueChange={(e) => (value = e.value)}
+	collapsible
+>
+	{@render children()}
+</Accordion>

package/dist/ui/components/accordion/PinyaAccordion.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    value: string[];
+    children: Snippet;
+};
+declare const PinyaAccordion: import("svelte").Component<$$ComponentProps, {}, "value">;
+type PinyaAccordion = ReturnType<typeof PinyaAccordion>;
+export default PinyaAccordion;

package/dist/ui/components/accordion/PinyaAccordionItem.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	// noinspection ES6UnusedImports
+	import { Accordion } from "@skeletonlabs/skeleton-svelte";
+	import type { Snippet } from "svelte";
+
+	let {
+		value,
+		control: controlSnippet,
+		panel: panelSnippet,
+	}: {
+		value: string,
+		control: Snippet;
+		panel: Snippet;
+	} = $props();
+</script>
+
+<Accordion.Item
+	{value}
+	controlHover="hover:bg-primary-500 dark:hover:bg-secondary-600"
+>
+	<!-- Control -->
+	{#snippet control()}
+		{@render controlSnippet()}
+	{/snippet}
+	<!-- Panel -->
+	{#snippet panel()}
+		{@render panelSnippet()}
+	{/snippet}
+</Accordion.Item>

package/dist/ui/components/accordion/PinyaAccordionItem.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    value: string;
+    control: Snippet;
+    panel: Snippet;
+};
+declare const PinyaAccordionItem: import("svelte").Component<$$ComponentProps, {}, "">;
+type PinyaAccordionItem = ReturnType<typeof PinyaAccordionItem>;
+export default PinyaAccordionItem;

package/dist/ui/components/accordion/index.d.ts

@@ -0,0 +1,2 @@
+export { default as PinyaAccordion } from "./PinyaAccordion.svelte";
+export { default as PinyaAccordionItem } from "./PinyaAccordionItem.svelte";

package/dist/ui/components/accordion/index.js

@@ -0,0 +1,2 @@
+export { default as PinyaAccordion } from "./PinyaAccordion.svelte";
+export { default as PinyaAccordionItem } from "./PinyaAccordionItem.svelte";

package/dist/ui/components/index.d.ts

@@ -1,3 +1,4 @@
 export { default as ModalBase } from "./ModalBase.svelte";
 export { default as FourPartCard } from "./FourPartCard.svelte";
 export { default as SocialSection } from "./SocialSection.svelte";
+export * from "./accordion";

package/dist/ui/components/index.js

@@ -1,3 +1,4 @@
 export { default as ModalBase } from "./ModalBase.svelte";
 export { default as FourPartCard } from "./FourPartCard.svelte";
 export { default as SocialSection } from "./SocialSection.svelte";
+export * from "./accordion";

package/dist/ui/elements/Placeholder.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	let {
+		isCircle = false,
+		classes = '',
+	}: {
+		isCircle?: boolean;
+		classes?: string;
+	} = $props();
+</script>
+
+<div
+	class="
+	{isCircle ?'placeholder-circle' : 'placeholder'}
+	animate-pulse bg-surface-600 dark:bg-surface-800
+	{classes}
+"
+></div>

package/dist/ui/elements/Placeholder.svelte.d.ts

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    isCircle?: boolean;
+    classes?: string;
+};
+declare const Placeholder: import("svelte").Component<$$ComponentProps, {}, "">;
+type Placeholder = ReturnType<typeof Placeholder>;
+export default Placeholder;

package/dist/ui/modules/seaweed/ChumBucket.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
-	import { type PageMeta } from "../../..";
+	import { type PageMeta } from "../../../components/navigation_component/index";
 	import { onMount } from "svelte";
+	import Placeholder from "../../elements/Placeholder.svelte";
 
 	let hasTriedGettingChumBucket = $state(false);
 	let pageMetaList: PageMeta[] = $state([]);
@@ -27,7 +28,7 @@
 
 	<div class="chum-bucket-grid">
 		{#if hasTriedGettingChumBucket}
-			{#each pageMetaList as pageMeta}
+			{#each pageMetaList as pageMeta (pageMeta.title)}
 				<div class="chum-bucket-item">
 					{#if pageMeta.imageUrl}
 						<img src={`https://turnipxenon.com${pageMeta.imageUrl}`}
@@ -48,8 +49,8 @@
 				</div>
 			{/each}
 		{:else}
-			{#each { length: 10 } as _}
-				<div class="placeholder"></div>
+			{#each { length: 10 } as _, idx (idx)}
+				<Placeholder classes="mb-2" />
 			{/each}
 		{/if}
 	</div>

package/dist/ui/templates/seaweed-layout/SeaweedLayout.svelte

@@ -25,7 +25,7 @@
 	}: SeaweedLayoutProps = $props();
 
 	let actualLayout = $state(layout);
-	let isAdvanceSettingOn = $state(true);
+	let isAdvanceSettingOn = $state(false);
 	let orderUrl = $state("");
 
 	let queryStates = new SvelteMap<string, boolean>(queryTerms.map(term => [term, true]));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@turnipxenon/pineapple",
   "description": "personal package for base styling for other personal projects",
-  "version": "3.0.0-alpha.8",
+  "version": "3.0.0-alpha.9",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && yarn package",