Fix Popups

It worked before but not now for some reason, ho hum, add some
middleware in to size the new selects correctly.

charts/ui/Chart.yaml

@@ -4,8 +4,8 @@ description: A Helm chart for deploying Unikorn UI
 
 type: application
 
-version: v0.2.29
-appVersion: v0.2.29
+version: v0.2.30
+appVersion: v0.2.30
 
 icon: https://assets.unikorn-cloud.org/assets/images/logos/dark-on-light/icon.png
 

src/lib/forms/SelectNew.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
 	import { popup } from '@skeletonlabs/skeleton';
 	import { ListBox } from '@skeletonlabs/skeleton';
+	import type { PopupSettings } from '@skeletonlabs/skeleton';
+	import type { SizeOptions } from '@floating-ui/dom';
 
 	// Unique element ID.
 	export let id: string;
@@ -10,6 +12,23 @@
 
 	// Formatting hint.
 	export let hint: string = '';
+
+	let sizeOptions: SizeOptions = {
+		apply({ rects, elements }) {
+			Object.assign(elements.floating.style, {
+				width: `${rects.reference.width}px`
+			});
+		}
+	};
+
+	let settings: PopupSettings = {
+		event: 'click',
+		target: `select-${id}`,
+		closeQuery: '.listbox-item',
+		middleware: {
+			size: sizeOptions
+		}
+	};
 </script>
 
 <div class="flex flex-col gap-1">
@@ -20,16 +39,13 @@
 	{/if}
 </div>
 
-<button
-	class="btn variant-ghost w-full justify-between"
-	use:popup={{ event: 'click', target: `select-${id}`, closeQuery: '.listbox-item' }}
->
+<button class="btn variant-ghost w-full justify-between" use:popup={settings}>
 	<slot name="selected_body" />
 	<iconify-icon icon="ph:caret-down-bold" />
 </button>
 
-<div class="w-full py-2i z-10" data-popup={`select-${id}`}>
-	<div class="card shadow-xl mx-4">
+<div class="z-10" data-popup={`select-${id}`}>
+	<div class="card shadow-xl">
 		<ListBox>
 			<slot />
 		</ListBox>

src/routes/(shell)/+layout.svelte

@@ -25,8 +25,8 @@
 
 	/* Required for popups */
 	import { storePopup } from '@skeletonlabs/skeleton';
-	import { computePosition, autoUpdate, offset, shift, flip, arrow } from '@floating-ui/dom';
-	storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
+	import { computePosition, autoUpdate, offset, shift, flip, arrow, size } from '@floating-ui/dom';
+	storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow, size });
 
 	/* Shell components */
 	import { AppShell } from '@skeletonlabs/skeleton';

src/routes/+layout.svelte

@@ -1,12 +1,6 @@
 <script lang="ts">
 	/* Required for styling */
 	import '../app.postcss';
-
-	/* Required for popups (rich selects essentially) */
-	import { computePosition, autoUpdate, offset, shift, flip, arrow } from '@floating-ui/dom';
-
-	import { storePopup } from '@skeletonlabs/skeleton';
-	storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
 </script>
 
 <svelte:head>

src/routes/+page.svelte

@@ -17,26 +17,16 @@
 	provider.register();
 
 	/* Required for drawers and modals */
-	import { initializeStores, Modal } from '@skeletonlabs/skeleton';
+	import { initializeStores } from '@skeletonlabs/skeleton';
 	initializeStores();
 
-	/* Required for toasts */
-	import { Toast } from '@skeletonlabs/skeleton';
-
-	/* Required for popups */
-	import { storePopup } from '@skeletonlabs/skeleton';
-	import { computePosition, autoUpdate, offset, shift, flip, arrow } from '@floating-ui/dom';
-	storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
-
 	/* Shell components */
 	import { AppShell } from '@skeletonlabs/skeleton';
 	import ShellAppBar from '$lib/shell/ShellAppBar.svelte';
 	import ShellSideBar from '$lib/shell/ShellSideBar.svelte';
 	import ShellDrawer from '$lib/shell/ShellDrawer.svelte';
 </script>
 
-<Modal />
-<Toast />
 <ShellDrawer />
 
 <AppShell class="h-screen">