feat(Select): added mobile version

N00nDay · Jul 17, 2023 · 1abb66c · 1abb66c
1 parent e4495d0
commit 1abb66c
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 21 deletions.
diff --git a/src/lib/components/select/Options.svelte b/src/lib/components/select/Options.svelte
@@ -5,6 +5,7 @@
 	import { floatingUI, forwardEventsBuilder, useActions, type ActionArray } from '../../actions';
 	export let use: ActionArray = [];
 	import { exclude } from '../../utils/exclude';
+	import type { Writable } from 'svelte/store';
 	const forwardEvents = forwardEventsBuilder(get_current_component());
 
 	let list: HTMLUListElement;
@@ -13,6 +14,9 @@
 	let focusIndex = 0;
 
 	const handleClose: () => void = getContext('select-handleClose');
+	const mobile: Writable<boolean> = getContext('select-mobile');
+
+	$: console.log('mobile', $mobile);
 
 	function handleKeydown(e: KeyboardEvent) {
 		e.preventDefault();
@@ -30,8 +34,13 @@
 		}
 	}
 
-	const defaultClass =
-		'origin-top-right absolute z-10 border border-border left-0 right-0 w-full p-1 rounded-md shadow-xl py-1 bg-surface';
+	let defaultClass = 'w-full bg-surface';
+	$: if ($mobile) {
+		defaultClass += ' h-full p-3 space-y-1';
+	} else {
+		defaultClass +=
+			' p-1 shadow-xl border border-border rounded-md origin-top-right absolute z-10 left-0 right-0';
+	}
 	$: finalClass = twMerge(defaultClass, $$props.class);
 
 	onMount(() => {
@@ -42,16 +51,29 @@
 
 <svelte:window on:keydown|preventDefault={handleKeydown} />
 
-<ul
-	bind:this={list}
-	class={finalClass}
-	in:scale={{ start: 0.9, duration: 100, delay: 150 }}
-	out:scale={{ start: 0.95, duration: 75 }}
-	use:useActions={use}
-	use:forwardEvents
-	use:floatingUI={{ placement: 'bottom-start', offset: 8 }}
-	{...exclude($$props, ['use', 'class'])}
-	role="listbox"
->
-	<slot />
-</ul>
+{#if $mobile}
+	<ul
+		bind:this={list}
+		class={finalClass}
+		use:useActions={use}
+		use:forwardEvents
+		{...exclude($$props, ['use', 'class'])}
+		role="listbox"
+	>
+		<slot />
+	</ul>
+{:else}
+	<ul
+		bind:this={list}
+		class={finalClass}
+		in:scale={{ start: 0.9, duration: 100, delay: 150 }}
+		out:scale={{ start: 0.95, duration: 75 }}
+		use:useActions={use}
+		use:forwardEvents
+		use:floatingUI={{ placement: 'bottom-start', offset: 8 }}
+		{...exclude($$props, ['use', 'class'])}
+		role="listbox"
+	>
+		<slot />
+	</ul>
+{/if}
diff --git a/src/lib/components/select/Select.svelte b/src/lib/components/select/Select.svelte
@@ -8,6 +8,8 @@
 	import type { SelectOption } from '../../types/select-option';
 	import { flip } from 'svelte/animate';
 	import Badge from '../badge';
+	import Portal from '../portal/Portal.svelte';
+	import Drawer from '../drawer';
 
 	export let name: string;
 	export let error: string | undefined = undefined;
@@ -19,6 +21,7 @@
 	export let multiple = false;
 	export let closeOnSelect = true;
 	export let disabled = false;
+	export let mobile = false;
 
 	$: stringifyValues = multiple
 		? JSON.stringify(value)
@@ -28,6 +31,8 @@
 	let selectedValue: Writable<SelectOption | SelectOption[] | undefined> = writable(value);
 	let currentError: Writable<string | undefined> = writable(error);
 	$: currentError.set(error);
+	let isMobile: Writable<boolean> = writable(mobile);
+	$: isMobile.set(mobile);
 
 	let input: HTMLInputElement;
 
@@ -66,7 +71,7 @@
 			}
 		}
 		if (closeOnSelect) {
-			toggleVisible();
+			handleClose();
 		}
 	}
 
@@ -88,6 +93,7 @@
 	setContext('select-option-value', optionValue);
 	setContext('select-multiple', multiple);
 	setContext('select-handleClose', handleClose);
+	setContext('select-mobile', isMobile);
 </script>
 
 <div class={$$props.class} style={$$props.style} use:clickOutside={handleClose}>
@@ -97,10 +103,9 @@
 			aria-label="toggle select"
 			type="button"
 			on:click|stopPropagation|preventDefault={toggleVisible}
-			class="relative border pl-3 pr-10 py-2 min-h-[2.5rem] text-left focus:outline-none sm:text-sm block w-full outline-none ring-0 focus:ring-0 rounded-md"
+			class="relative border pr-10 py-2 min-h-[2.5rem] text-left focus:outline-none sm:text-sm block w-full outline-none ring-0 focus:ring-0 rounded-md"
 			class:border-danger={error}
 			class:text-danger={error}
-			class:placeholder-red-300={error}
 			class:focus:border-red-500={error}
 			class:focus:border-primary={!error}
 			class:border-border={!error}
@@ -109,13 +114,13 @@
 			class:cursor-pointer={!disabled}
 			class:cursor-default={disabled}
 			class:pl-10={$$slots.leading}
+			class:pl-3={!$$slots.leading}
 			{disabled}
 		>
 			<span
 				class="flex flex-row flex-wrap gap-2 truncate text-content"
-				class:pl-1.5={$$slots.leading}
 				class:text-secondary-content={placeholder && (!value || value.length === 0)}
-				class:placeholder-opacity-80={placeholder && (!value || value.length === 0)}
+				class:text-opacity-80={placeholder && (!value || value.length === 0)}
 			>
 				{#if multiple}
 					{#if value && value.length > 0 && Array.isArray(value)}
@@ -172,7 +177,13 @@
 			{/if}
 		</button>
 
-		{#if visible}
+		{#if visible && mobile}
+			<Portal>
+				<Drawer {handleClose} placement="bottom" class="select-mobile" panelClass="!max-h-[14rem]">
+					<slot name="options" />
+				</Drawer>
+			</Portal>
+		{:else if visible}
 			<slot name="options" />
 		{/if}
 	</div>