@turnipxenon/pineapple 3.0.0-alpha.1 → 3.0.0-alpha.10

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

@@ -0,0 +1,89 @@
+<script lang="ts">
+	import type { ProjectGroup, SnippetMeta } from "../index";
+	import { PinyaCard } from "../../elements/index";
+
+	let {
+		title,
+		entryList
+	}: ProjectGroup = $props();
+
+	const isSpecial = $derived(entryList.length % 3 === 1);
+
+	let normalUiList: SnippetMeta[] = $derived(isSpecial
+		? [...entryList.slice(0, -4)]
+		: [...entryList]);
+	let overflowUiList: SnippetMeta[] = $derived(isSpecial
+		? [...entryList.slice(-4)]
+		: []);
+
+
+	// <!--todo: implement in seaweedlayout #migration-->
+	let inputValue = $state("");
+	let styleStr = $state("");
+	$effect(() => {
+		const termList = inputValue.split(",");
+
+		const chipList: string[] = [];
+		termList.forEach((_, idx) => {
+			termList[idx] = `.qt-${termList[idx]}`;
+			chipList.push(`.text-chip${termList[idx]}`);
+		});
+		styleStr = `<style>
+			${termList.join(", ")} {
+				font-weight: bold
+			}
+
+			${chipList.join(", ")} {
+				background-color: var(--color-secondary-500) /* oklch(55.6% 0 0deg) = #737373 */;
+				color: var(--color-secondary-contrast-500) /* var(--color-secondary-contrast-light) */;
+			}
+			</style>`;
+	});
+</script>
+
+<div class="mt-8 flex flex-col items-center">
+	<PinyaCard widthClass="w-full" className="mb-8">
+		<h2>{title}</h2>
+	</PinyaCard>
+	<div class="normal-project-container">
+		{#each normalUiList as ui (ui.key)}
+			{@render ui.component({})}
+		{/each}
+	</div>
+	<div class="overflow-project-container">
+		{#each overflowUiList as ui (ui.key)}
+			{@render ui.component({})}
+		{/each}
+	</div>
+</div>
+
+<!--todo: implement in seaweedlayout #migration-->
+<!--{@html styleStr}-->
+
+<!-- Force tailwind to pickup some classes -->
+<div class="hidden rounded-2xl hover:brightness-110"></div>
+
+<style>
+    .normal-project-container {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 2rem;
+        margin: auto;
+        /* 3 containers + 2 gaps + extra rem */
+        max-width: calc((28rem * 3) + 5rem);
+        justify-content: center;
+        margin-bottom: 2rem;
+        align-items: start;
+    }
+
+    .overflow-project-container {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 2rem;
+        margin: auto;
+        /* 2 containers + 1 gap + extra rem */
+        max-width: calc((28rem * 2) + 3rem);
+        justify-content: center;
+        align-items: start;
+    }
+</style>

package/dist/ui/templates/seaweed-layout/EntryGroup.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ProjectGroup } from "../index";
+declare const EntryGroup: import("svelte").Component<ProjectGroup, {}, "">;
+type EntryGroup = ReturnType<typeof EntryGroup>;
+export default EntryGroup;

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

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import type { ProjectGroup, SnippetMeta } from "../index";
+	import ProjectGroupConfig from "./ProjectGroupConfig.svelte";
+
+	interface Props {
+		layout: ProjectGroup[];
+		orderUrl: string;
+		allEntries: SnippetMeta[];
+	}
+
+	let {
+		layout = $bindable(),
+		orderUrl = $bindable(),
+		allEntries
+	}: Props = $props();
+</script>
+
+<br>
+<h3>Site ordering</h3>
+<blockquote>Sorry! This part of the website is still WIP, but here it is anyway. As long as it functions</blockquote>
+
+<!-- formatting: group1:entry1|entry2,group2:entry3
+ : <= separates the group header, the entries, and the class
+ | <= separates each entries
+ , <= separates each group
+ -->
+<div class="advanced-setting-list">
+	{#each layout as group, groupIndex (group.key)}
+		<ProjectGroupConfig
+			bind:layout={layout}
+			bind:orderUrl={orderUrl}
+			{allEntries}
+			{group}
+			{groupIndex}
+		/>
+	{/each}
+</div>
+
+<style>
+    .advanced-setting-list {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+    }
+</style>

package/dist/ui/templates/seaweed-layout/EntryOrderConfig2.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { ProjectGroup, SnippetMeta } from "../index";
+interface Props {
+    layout: ProjectGroup[];
+    orderUrl: string;
+    allEntries: SnippetMeta[];
+}
+declare const EntryOrderConfig2: import("svelte").Component<Props, {}, "orderUrl" | "layout">;
+type EntryOrderConfig2 = ReturnType<typeof EntryOrderConfig2>;
+export default EntryOrderConfig2;

package/dist/ui/templates/seaweed-layout/ProjectComponentProps.d.ts

@@ -0,0 +1,4 @@
+import type { Snippet } from 'svelte';
+export interface ProjectComponentProps {
+}
+export type ComponentSnippet = Snippet<[ProjectComponentProps]>;

package/dist/ui/templates/seaweed-layout/ProjectComponentProps.js

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

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

@@ -0,0 +1,316 @@
+<script lang="ts">
+	import CloseIcon from "../../../assets/icons/close.svg";
+	import UpwardIcon from "../../../assets/icons/arrow-upward.svg";
+	import type { ProjectGroup, SnippetMeta } from "../index";
+	import { getContext, onMount } from "svelte";
+	import { PinyaCard } from "../../elements/index";
+	import PinyaCombobox from "../../elements/pinya-combobox/PinyaCombobox.svelte";
+	import { PinyaButton } from "../../elements/index.js";
+	import { type ToastContext } from "@skeletonlabs/skeleton-svelte";
+
+	export const toast: ToastContext = getContext("toast");
+
+	interface Props {
+		layout: ProjectGroup[];
+		orderUrl: string;
+		allEntries: SnippetMeta[];
+		group: ProjectGroup;
+		groupIndex: number;
+	}
+
+	let {
+		layout = $bindable(),
+		orderUrl = $bindable(),
+		allEntries,
+		group,
+		groupIndex
+	}: Props = $props();
+
+	const updateOrderQuery = () => {
+		orderUrl = "order=" + layout.map(g => {
+			const groupUrl = g.entryList.map(e => e.key).join("|");
+			// the last item after : is a grid class but we're keeping it here for legacy reason
+			return `${g.title}:${groupUrl}:`;
+		}).join(",");
+	};
+
+	const swapEntry = (index: number, group: ProjectGroup, shouldDecrement: boolean): (() => void) => {
+		return () => {
+			let newIndex = index;
+			if (shouldDecrement && index >= 1) {
+				newIndex--;
+			} else if (!shouldDecrement && index <= group.entryList.length - 2) {
+				newIndex++;
+			} else {
+				return;
+			}
+
+			const tempVar = group.entryList[newIndex];
+			group.entryList[newIndex] = group.entryList[index];
+			group.entryList[index] = tempVar;
+			layout = layout;
+			updateOrderQuery();
+		};
+	};
+	const swapGroups = (index: number, shouldDecrement: boolean): (() => void) => {
+		return () => {
+			let newIndex = index;
+			if (shouldDecrement && index >= 1) {
+				newIndex--;
+			} else if (!shouldDecrement && index <= layout.length - 2) {
+				newIndex++;
+			} else {
+				return;
+			}
+
+			const tempVar = layout[newIndex];
+			layout[newIndex] = layout[index];
+			layout[index] = tempVar;
+			layout = layout;
+			updateOrderQuery();
+		};
+	};
+
+	const removeGroup = (group: ProjectGroup): (() => void) => {
+		return () => {
+			const index = layout.indexOf(group);
+			if (index === -1) {
+				return;
+			}
+
+			layout.splice(index, 1);
+			layout = layout;
+			updateOrderQuery();
+		};
+	};
+	const removeEntry = (entry: SnippetMeta, group: ProjectGroup): (() => void) => {
+		return () => {
+			for (let i = group.entryList.length - 1; i >= 0; i--) {
+				if (group.entryList[i].key === entry.key) {
+					group.entryList.splice(i, 1);
+					layout = layout;
+					updateOrderQuery();
+					break;
+				}
+			}
+		};
+	};
+
+	const comboboxData = allEntries.map(entry => {
+		return {
+			label: entry.key,
+			value: entry.key
+		};
+	});
+
+	let comboboxValue = $state([comboboxData[0].value]);
+
+	const addEntry = () => {
+		const c = allEntries.find(e => e.key === comboboxValue[0]);
+
+		if (!c) {
+			console.warn(`Unknown key: ${comboboxValue}`);
+			return;
+		}
+
+		if (group.entryList.includes(c)) {
+			toast.create({
+				title: "Duplicate entry",
+				description: `The entry ${comboboxValue} is already in ${group.title}`,
+				type: "error"
+			});
+			return;
+		}
+
+		group.entryList.push(c);
+		layout = layout;
+		updateOrderQuery();
+	};
+</script>
+
+<PinyaCard
+	widthClass="max-w-2xl"
+	borderClass="border-[2px] border-primary-500"
+	marginClass="mt-4 mb-4"
+	paddingClass=""
+>
+
+	<div class="m-4 flex flex-row gap-2">
+		<button title={`Remove ${group.title}`}
+		        onclick={removeGroup(group)}>
+			<img class="img-icon" src={CloseIcon} alt={`Remove ${group.title}`}>
+		</button>
+
+		<button title={`Move group ${group.title} upwards`}
+		        onclick={swapGroups(groupIndex, true)}
+		        disabled="{groupIndex === 0}">
+			<img class="img-icon" src={UpwardIcon} alt={`Move group ${group.title} upwards`}>
+		</button>
+
+		<button title={`Move group ${group.title} downwards`}
+		        disabled={groupIndex === layout.length - 1}
+		        onclick={swapGroups(groupIndex, false)}>
+			<img
+				class="img-icon flipped-vertically"
+				src={UpwardIcon}
+				alt={`Move group ${group.title} downwards`}
+			>
+		</button>
+
+		<div class="fake-h3 ml-2">Group title: {group.title}</div>
+	</div>
+
+	<hr class="border-primary-500 border-1">
+
+	<table class="table">
+		<thead>
+		<tr>
+			<th class="fake-h4">Entries</th>
+		</tr>
+		</thead>
+		<tbody>
+		{#each group.entryList as entry, entryIndex (entry)}
+			<tr class="entry-row">
+				<td class="entry-data">
+
+					<button title={`Remove ${entry.key}`}
+					        onclick={removeEntry(entry, group)}>
+						<img class="img-icon" src={CloseIcon} alt={`Remove ${entry.key}`}>
+					</button>
+
+					<button title={`Move ${entry.key} upwards`}
+					        onclick={swapEntry(entryIndex, group, true)}
+					        disabled="{entryIndex === 0}">
+						<img class="img-icon" src={UpwardIcon} alt={`Move ${entry.key} upwards`}>
+					</button>
+
+					<button title={`Move ${entry.key} downwards`}
+					        disabled={entryIndex === group.key.length - 1}
+					        onclick={swapEntry(entryIndex, group, false)}>
+						<img class="img-icon flipped-vertically" src={UpwardIcon} alt={`Move ${entry.key} downwards`}>
+					</button>
+					<div class="entry-name">
+						{entry.key}
+					</div>
+				</td>
+			</tr>
+		{/each}
+		</tbody>
+
+		<tfoot>
+		<tr>
+			<td class="combobox-container">
+				<PinyaButton onclick={addEntry}>Add Entry
+				</PinyaButton>
+				<PinyaCombobox
+					data={comboboxData}
+					defaultValue={comboboxValue}
+					bind:value={comboboxValue}
+					label="New entry"
+					placeholder="Add new entry"
+					contentZIndex="10"
+				/>
+			</td>
+		</tr>
+		</tfoot>
+	</table>
+
+
+</PinyaCard>
+
+
+<style>
+
+
+    .advanced-setting-list {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .btn-group-header {
+        @apply preset-filled-tertiary-500;
+        display: flex;
+        align-items: center;
+        margin-bottom: 0.5lh;
+    }
+
+    .btn-group-entry {
+        @apply ;
+        display: flex;
+        padding: 0;
+    }
+
+    .btn-group-entry > div {
+        padding: 1em;
+    }
+
+    .flipped-vertically {
+        transform: rotate(180deg);
+    }
+
+    .entry-group {
+        border-radius: var(--theme-rounded-container);
+        background-color: rgb(var(--color-surface-600));
+        margin-top: 1.5lh;
+        margin-bottom: 0.5lh;
+        padding: 0.5lh 0.5em;
+    }
+
+    .entry-name {
+        grow: 1;
+    }
+
+    tr, td, th, table {
+        width: 100%;
+    }
+
+    table {
+        margin-bottom: 1lh;
+    }
+
+    tfoot > tr {
+        display: flex;
+    }
+
+    .btn-group > button {
+        padding: 0.3em 0.75em;
+    }
+
+    .btn-group-header > h2 {
+        font-weight: bolder;
+        padding-top: 1lh;
+        padding-bottom: 1lh;
+        margin-bottom: 0;
+        padding-inline-start: 1em;
+    }
+
+    .dark .btn-group-header > h2 {
+        color: rgb(var(--theme-font-color-dark));
+    }
+
+    .dark .entry-group {
+        background-color: rgb(var(--color-surface-800));
+    }
+
+
+    tbody tr:nth-child(odd) {
+        background-color: var(--color-surface-100-900);
+    }
+
+    tbody tr:nth-child(even), thead {
+        background-color: var(--color-surface-300-700);
+    }
+
+    .entry-data {
+        display: flex;
+        flex-direction: row;
+        gap: 1rem;
+        align-items: center;
+    }
+
+    .combobox-container {
+        display: flex;
+        flex-direction: row;
+        gap: 1em;
+    }
+</style>

package/dist/ui/templates/seaweed-layout/ProjectGroupConfig.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { ProjectGroup, SnippetMeta } from "../index";
+import { type ToastContext } from "@skeletonlabs/skeleton-svelte";
+interface Props {
+    layout: ProjectGroup[];
+    orderUrl: string;
+    allEntries: SnippetMeta[];
+    group: ProjectGroup;
+    groupIndex: number;
+}
+declare const ProjectGroupConfig: import("svelte").Component<Props, {
+    toast: ToastContext;
+}, "orderUrl" | "layout">;
+type ProjectGroupConfig = ReturnType<typeof ProjectGroupConfig>;
+export default ProjectGroupConfig;

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

@@ -0,0 +1,4 @@
+# Query format
+
+- ?order=title:entry 1|entry 2:layout-type,title2:entry 3:layout-type
+- &qt=js,vue,ts,java,android,react,go,aws,observability,infra,unity,cs,rpgmaker,python,django,heroku,svelte,c,foundation,valgrind,google,firebase