Add stepper prop to MenuField to easily transverse options

.changeset/smooth-eyes-hope.md

@@ -0,0 +1,5 @@
+---
+'svelte-ux': patch
+---
+
+Add stepper prop to MenuField to easily transverse options

src/lib/components/MenuField.svelte

@@ -1,40 +1,72 @@
 <script lang="ts">
   import { createEventDispatcher } from 'svelte';
   import type { ComponentProps } from '$lib/types';
-  import { mdiMenuDown } from '@mdi/js';
+  import { mdiChevronLeft, mdiChevronRight, mdiMenuDown } from '@mdi/js';
 
   import { cls } from '../utils/styles';
 
   import Field from './Field.svelte';
   import Icon from './Icon.svelte';
   import Menu from './Menu.svelte';
   import MenuItem from './MenuItem.svelte';
+  import Button from './Button.svelte';
 
-  export let options: Array<{ label: string; value: any; icon?: string }>;
+  type Options = Array<{ label: string; value: any; icon?: string }>;
+
+  export let options: Options;
   export let value: any = null;
   export let menuProps: ComponentProps<Menu> | undefined = undefined;
   export let menuIcon = mdiMenuDown;
-  $: selected = options?.find((x) => x.value === value);
+  /** If true, show left/right buttons to step through options */
+  export let stepper = false;
 
   let open = false;
+  $: selected = options?.find((x) => x.value === value);
+
+  $: previous = () => {
+    const index = options.findIndex((o) => o.value === value);
+    if (index === 0 || index === -1) {
+      // If first item, or no selected value yet, return last item
+      return options[options.length - 1].value;
+    } else {
+      // Previous item
+      return options[index - 1].value;
+    }
+  };
+
+  $: next = () => {
+    const index = options.findIndex((x) => x.value === value);
+    if (index === options.length - 1) {
+      // First value
+      return options[0].value;
+    } else {
+      // Next value
+      return options[index + 1].value;
+    }
+  };
 
   const dispatch = createEventDispatcher();
   $: dispatch('change', { value });
 </script>
 
 <Field
-  on:click={() => (open = !open)}
   class="cursor-pointer"
   {...$$restProps}
   classes={{ input: 'overflow-hidden', ...$$restProps.classes }}
+  on:click={() => (open = !open)}
 >
   <slot name="selection">
     <div class="truncate text-sm">
       {selected?.label ?? 'No selection'}
     </div>
   </slot>
 
-  <slot slot="prepend" name="prepend" />
+  <span slot="prepend">
+    {#if stepper}
+      <Button icon={mdiChevronLeft} on:click={() => (value = previous())} class="mr-2" size="sm" />
+    {/if}
+    <slot name="prepend" />
+  </span>
 
   <span slot="append" class="flex items-center">
     <slot name="append" />
@@ -46,6 +78,10 @@
       })}
       on:click={() => (open = !open)}
     />
+
+    {#if stepper}
+      <Button icon={mdiChevronRight} on:click={() => (value = next())} class="mr-2" size="sm" />
+    {/if}
   </span>
 
   <Menu

src/routes/docs/components/MenuField/+page.svelte

@@ -22,37 +22,37 @@
 
 <h1>Examples</h1>
 
-<h2>Basic</h2>
+<h2>basic</h2>
 
 <Preview>
   <MenuField {options} />
 </Preview>
 
-<h2>Label</h2>
+<h2>label</h2>
 
 <Preview>
   <MenuField label="View" {options} />
 </Preview>
 
-<h2>Value</h2>
+<h2>value</h2>
 
 <Preview>
   <MenuField {options} value="copy" />
 </Preview>
 
-<h2>Empty selection</h2>
+<h2>empty selection</h2>
 
 <Preview>
   <MenuField options={[{ label: 'Please make a selection', value: null }, ...options]} />
 </Preview>
 
-<h2>Icon</h2>
+<h2>icon</h2>
 
 <Preview>
   <MenuField {options} icon={mdiMagnify} />
 </Preview>
 
-<h2>Option icons</h2>
+<h2>option icons</h2>
 
 <Preview>
   <MenuField options={optionsWithIcons} />
@@ -110,7 +110,13 @@
   </MenuField>
 </Preview>
 
-<h2>Style</h2>
+<h2>stepper</h2>
+
+<Preview>
+  <MenuField {options} stepper />
+</Preview>
+
+<h2>style</h2>
 
 <Preview>
   <MenuField {options} classes={{ container: 'bg-blue-50 rounded-full border-0 text-blue-500' }} />