Merge pull request skeletonlabs#2253 from skeletonlabs/dev

Merge for release 11-20-2023

.changeset/eight-toes-itch.md

@@ -0,0 +1,5 @@
+---
+"@skeletonlabs/skeleton": patch
+---
+
+chore: Adjust popup 'onWindowClick' to respect an empty 'queryString'

packages/skeleton/src/lib/utilities/Popup/popup.ts

@@ -148,6 +148,8 @@ export function popup(triggerNode: HTMLElement, args: PopupSettings) {
 		}
 		// Handle Close Query State
 		const closeQueryString: string = args.closeQuery === undefined ? 'a[href], button' : args.closeQuery;
+		// Return if no closeQuery is provided
+		if (closeQueryString === '') return;
 		const closableMenuElements = elemPopup?.querySelectorAll(closeQueryString);
 		closableMenuElements?.forEach((elem) => {
 			if (elem.contains(event.target)) close();

sites/skeleton.dev/src/lib/links.ts

@@ -41,7 +41,7 @@ export const menuNavLinks: Record<string, Array<{ title: string; list: List }>>
 		},
 		{
 			title: 'Integrations',
-			list: [{ href: '/docs/tauri', label: 'Tauri', keywords: 'Tauri, desktop, setup, install', badge: 'New' }]
+			list: [{ href: '/docs/tauri', label: 'Tauri', keywords: 'Tauri, desktop, setup, install' }] // , badge: 'New'
 		}
 	],
 	'/elements': [

sites/skeleton.dev/src/routes/(inner)/components/accordions/+page.svelte

@@ -41,7 +41,7 @@
 	<svelte:fragment slot="sandbox">
 		<DocsPreview regionFooter="text-center">
 			<svelte:fragment slot="preview">
-				<Accordion autocollapse class="card p-4 text-token">
+				<Accordion class="card p-4 text-token">
 					<AccordionItem open>
 						<svelte:fragment slot="lead"><i class="fa-solid fa-skull text-xl w-6 text-center" /></svelte:fragment>
 						<svelte:fragment slot="summary"><p class="font-bold">What is Día de los Muertos?</p></svelte:fragment>
@@ -123,7 +123,54 @@
 		<section class="space-y-4">
 			<h2 class="h2">Auto-Collapse Mode</h2>
 			<p>Enable the <code class="code">autocollapse</code> setting to limit display to one accordion panel at a time.</p>
-			<CodeBlock language="html" code={`<Accordion autocollapse>...</Accordion>`} />
+			<DocsPreview background="neutral" regionFooter="text-center">
+				<h2 class="h2">Auto-Collapse Mode</h2>
+				<p>Enable the <code class="code">autocollapse</code> setting to limit display to one accordion panel at a time.</p>
+				<svelte:fragment slot="preview">
+					<Accordion autocollapse class="card p-4 text-token">
+						<AccordionItem>
+							<svelte:fragment slot="lead"><i class="fa-solid fa-question text-xl w-6 text-center" /></svelte:fragment>
+							<svelte:fragment slot="summary"><p class="font-bold">What is Svelte?</p></svelte:fragment>
+							<svelte:fragment slot="content">
+								<!-- prettier-ignore -->
+								<p>
+									In short, Svelte is a way of writing user interface components — like a navigation bar, comment section, or contact form — that users see and interact with in their browsers. The Svelte compiler converts your components to JavaScript that can be run to render the HTML for the page and to CSS that styles the page.
+								</p>
+							</svelte:fragment>
+						</AccordionItem>
+						<AccordionItem>
+							<svelte:fragment slot="lead"><i class="fa-solid fa-calendar text-xl w-6 text-center" /></svelte:fragment>
+							<svelte:fragment slot="summary"><p class="font-bold">When was it first released?</p></svelte:fragment>
+							<svelte:fragment slot="content">
+								<!-- prettier-ignore -->
+								<p>
+									Version 1 of Svelte was written in JavaScript and was released on 29 November 2016. It was basically Reactive with a compiler. The name Svelte was chosen by Rich Harris and his coworkers at The Guardian.
+								</p>
+							</svelte:fragment>
+						</AccordionItem>
+						<AccordionItem>
+							<svelte:fragment slot="lead"><i class="fa-solid fa-code text-xl w-6 text-center" /></svelte:fragment>
+							<svelte:fragment slot="summary"><p class="font-bold">How do I write Svelte code?</p></svelte:fragment>
+							<svelte:fragment slot="content">
+								<!-- prettier-ignore -->
+								<p>
+									Svelte applications and components are defined in .svelte files, which are HTML files extended with templating syntax that is based on JavaScript and is similar to JSX. Svelte repurposes JavaScript's native labeled statement syntax $: to mark reactive statements. Top-level variables become the component's state and exported variables become the properties that the component receives. Additionally, the JavaScript code syntax can be used for templating in HTML elements and components.
+								</p>
+							</svelte:fragment>
+						</AccordionItem>
+					</Accordion>
+				</svelte:fragment>
+				<svelte:fragment slot="source">
+					<CodeBlock
+						language="html"
+						code={`
+<Accordion autocollapse>
+	<!-- ... -->
+</Accordion>
+`}
+					/>
+				</svelte:fragment>
+			</DocsPreview>
 		</section>
 		<section class="space-y-4">
 			<h2 class="h2">Open on Load</h2>

sites/skeleton.dev/src/routes/(inner)/components/app-shell/+page.svelte

@@ -230,7 +230,7 @@ import type { AfterNavigate } from '@sveltejs/kit';
 import { afterNavigate } from '$app/navigation';
 
 afterNavigate((params: AfterNavigate) => {
-    const isNewPage: boolean = params.from?.route.id !== params.to?.route.id;
+    const isNewPage = params.from?.url.pathname !== params.to?.url.pathname;
     const elemPage = document.querySelector('#page');
     if (isNewPage && elemPage !== null) {
         elemPage.scrollTop = 0;

sites/skeleton.dev/src/routes/(inner)/components/paginators/+page.svelte

@@ -195,6 +195,26 @@ function onAmountChange(e: CustomEvent): void {
 			/>
 			<CodeBlock language="html" code={`<Paginator ... on:page={onPageChange} on:amount={onAmountChange}></Paginator>`} />
 		</section>
+		<section class="space-y-4">
+			<h2 class="h2">Handling Reactivity</h2>
+			<!-- prettier-ignore -->
+			<p>
+				Use the following technique if you wish to update pagination data in a reactive manner. Make sure to update <code class="code" >paginationSettings</code> directly, as <a class="anchor" href="https://learn.svelte.dev/tutorial/updating-arrays-and-objects" target="_blank">updating a reference to source will not trigger the reactivity</a>.
+			</p>
+			<CodeBlock
+				language="ts"
+				code={`
+let paginationSettings = {
+    page: 0,
+    limit: 5,
+    size: source.length,
+    amounts: [1, 2, 5, 10],
+} satisfies PaginationSettings;
+
+$: paginationSettings.size = source.length;
+				`}
+			/>
+		</section>
 		<hr />
 		<!-- See Also -->
 		<section class="!flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0 md:space-x-4">

sites/skeleton.dev/src/routes/(inner)/components/tables/+page.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { faker } from '@faker-js/faker';
 	import { writable, type Writable } from 'svelte/store';
 	// Docs
 	import DocsShell from '$lib/layouts/DocsShell/DocsShell.svelte';
@@ -46,15 +45,19 @@
 	};
 
 	// Local
-	const sourceData = Array(5)
-		.fill(undefined)
-		.map(() => faker.science.chemicalElement());
+	const sourceData = [
+		{ position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H' },
+		{ position: 2, name: 'Helium', weight: 4.0026, symbol: 'He' },
+		{ position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li' },
+		{ position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be' },
+		{ position: 5, name: 'Boron', weight: 10.811, symbol: 'B' }
+	];
 
 	// Table Simple
 	const tableSimple: TableSource = {
-		head: ['Symbol', 'Name', 'Number'],
-		body: tableMapperValues(sourceData, ['symbol', 'name', 'atomicNumber']),
-		meta: tableMapperValues(sourceData, ['name', 'symbol', 'atomicNumber']),
+		head: ['Symbol', 'Name', 'weight'],
+		body: tableMapperValues(sourceData, ['symbol', 'name', 'weight']),
+		meta: tableMapperValues(sourceData, ['name', 'symbol', 'weight']),
 		foot: ['Total Elements', '', `<span class="badge variant-soft-primary">${sourceData.length} Elements</span>`]
 	};
 

sites/skeleton.dev/src/routes/(inner)/docs/tauri/+page.svelte

@@ -108,7 +108,7 @@ export default config;
 			/>
 			<!-- prettier-ignore -->
 			<p>
-				Open your root layout, found in <code class="code">/src/routes/+layout.svelte</code>, then append the following two lines at the top of the script tag. This disables server-side rendering (SSR) while enabling prerendering. 
+				Open your root layout, found in <code class="code">/src/routes/+layout.[ts|js]</code>, then append the following two lines at the top of the script tag. This disables server-side rendering (SSR) while enabling prerendering. 
 			</p>
 			<CodeBlock
 				language="js"

sites/skeleton.dev/src/routes/(inner)/elements/chips/+page.svelte

@@ -101,10 +101,10 @@
 					<CodeBlock
 						language="html"
 						code={`
-<span class="chip variant-soft hover:variant-filled" on:click={doSomething}>
+<button class="chip variant-soft hover:variant-filled" on:click={doSomething}>
 	<span>(icon)</span>
 	<span>Action</span>
-</span>
+</button>
 `}
 					/>
 				</svelte:fragment>
@@ -139,14 +139,14 @@
 						language="html"
 						code={`
 {#each ['red', 'blue', 'green'] as c}
-	<span
+	<button
 		class="chip {color === c ? 'variant-filled' : 'variant-soft'}"
 		on:click={() => { section(c); }}
 		on:keypress
 	>
 		{#if color === c}(<span>(icon)</span>){/if}
 		<span>{c}</span>
-	</span>
+	</button>
 {/each}
 `}
 					/>
@@ -166,7 +166,7 @@
 							>
 								{#if flavors[f]}<span><i class="fa-solid fa-check" /></span>{/if}
 								<span class="capitalize">{f}</span>
-					</button>
+							</button>
 						{/each}
 					</div>
 				</svelte:fragment>
@@ -193,14 +193,14 @@ function toggle(flavor: string): void {
 						language="html"
 						code={`
 {#each Object.keys(flavors) as f}
-	<span
+	<button
 		class="chip {flavors[f] ? 'variant-filled' : 'variant-soft'}"
 		on:click={() => { toggle(f); }}
 		on:keypress
 	>
 		{#if flavors[f]}<span>(icon)</span>{/if}
 		<span class="capitalize">{f}</span>
-	</span>
+	</button>
 {/each}
 `}
 					/>

sites/skeleton.dev/src/routes/+layout.svelte

@@ -124,7 +124,8 @@
 	// Lifecycle
 	afterNavigate((params) => {
 		// Scroll to top
-		const isNewPage = params.from && params.to && params.from.route.id !== params.to.route.id;
+		console.log(params.from?.url.pathname, params.to?.url.pathname);
+		const isNewPage = params.from?.url.pathname !== params.to?.url.pathname;
 		const elemPage = document.querySelector('#page');
 		if (isNewPage && elemPage !== null) {
 			elemPage.scrollTop = 0;