[MultiSelect(Field|Menu)] Improve actions with mode="immediate"

Author: techniq

.changeset/silent-geckos-listen.md

@@ -0,0 +1,5 @@
+---
+'svelte-ux': patch
+---
+
+[MultiSelect(Field|Menu)] Improve actions with mode="immediate"

packages/svelte-ux/src/lib/components/MultiSelect.svelte

@@ -268,7 +268,7 @@
   class={cls(
     'actions',
     'flex items-center justify-end',
-    mode === 'actions' && 'border-t border-surface-content/10 pt-2',
+    '[&:not(:has(>:first-child))]:hidden border-t border-surface-content/10 pt-2',
     settingsClasses.actions,
     classes.actions
   )}

packages/svelte-ux/src/lib/components/MultiSelectField.svelte

@@ -22,6 +22,8 @@
   // MultiSelectMenu props
   export let options: MultiSelectMenuProps['options'];
   export let value: MultiSelectMenuProps['value'];
+  export let mode: MultiSelectMenuProps['mode'] | undefined = undefined;
+  export let maintainOrder: MultiSelectMenuProps['maintainOrder'] | undefined = undefined;
   export let indeterminateSelected: typeof value = [];
   /** Maximum number of options that can be selected  */
   export let max: number | undefined = undefined;
@@ -203,6 +205,8 @@
   <MultiSelectMenu
     {options}
     {value}
+    {mode}
+    {maintainOrder}
     {indeterminateSelected}
     {max}
     {placement}
@@ -237,8 +241,6 @@
       </slot>
     </svelte:fragment>
 
-    <slot name="actions" slot="actions" let:selection {selection}>
-      <div></div>
-    </slot>
+    <slot name="actions" slot="actions" let:selection {selection} />
   </MultiSelectMenu>
 </div>

packages/svelte-ux/src/lib/components/MultiSelectMenu.svelte

@@ -13,6 +13,8 @@
 
   export let options: MultiSelectProps['options'];
   export let value: MultiSelectProps['value'];
+  export let mode: MultiSelectProps['mode'] | undefined = undefined;
+  export let maintainOrder: MultiSelectProps['maintainOrder'] | undefined = undefined;
   export let indeterminateSelected: typeof value = [];
   export let open = false;
   export let duration = 200;
@@ -53,6 +55,8 @@
   <MultiSelect
     {options}
     {value}
+    {mode}
+    {maintainOrder}
     {indeterminateSelected}
     {max}
     {open}
@@ -69,9 +73,9 @@
       ...settingsClasses.multiSelect,
       ...classes.multiSelect,
     }}
-    on:cancel={() => close()}
+    on:cancel={() => mode !== 'immediate' && close()}
     on:cancel
-    on:change={() => close()}
+    on:change={() => mode !== 'immediate' && close()}
     on:change
   >
     <slot name="beforeOptions" slot="beforeOptions" let:selection {selection} />
@@ -95,8 +99,6 @@
       </slot>
     </svelte:fragment>
 
-    <slot name="actions" slot="actions" let:selection {selection}>
-      <div></div>
-    </slot>
+    <slot name="actions" slot="actions" let:selection {selection} />
   </MultiSelect>
 </Menu>

packages/svelte-ux/src/routes/docs/components/MultiSelect/+page.svelte

@@ -42,7 +42,7 @@
   <MultiSelect {options} {value} maintainOrder on:change={(e) => (value = e.detail.value)} />
 </Preview>
 
-<h2>Immediate apply changes (no actions)</h2>
+<h2>Immediately apply changes (no actions)</h2>
 
 <Preview>
   {value.length} selected

packages/svelte-ux/src/routes/docs/components/MultiSelectField/+page.svelte

@@ -79,6 +79,34 @@
   />
 </Preview>
 
+<h2>Immediately apply changes (no actions)</h2>
+
+<Preview>
+  <MultiSelectField
+    {options}
+    {value}
+    on:change={(e) => (value = e.detail.value)}
+    mode="immediate"
+    maintainOrder
+  />
+</Preview>
+
+<h2>Immediately apply changes (with custom action)</h2>
+
+<Preview>
+  <MultiSelectField
+    {options}
+    {value}
+    on:change={(e) => (value = e.detail.value)}
+    mode="immediate"
+    maintainOrder
+  >
+    <div slot="actions">
+      <Button color="primary" icon={mdiPlus}>Add item</Button>
+    </div>
+  </MultiSelectField>
+</Preview>
+
 <h2>formatSelected</h2>
 
 <Preview>

packages/svelte-ux/src/routes/docs/components/MultiSelectMenu/+page.svelte

@@ -129,6 +129,52 @@
   </span>
 </Preview>
 
+<h2>Immediately apply changes (no actions)</h2>
+<Preview>
+  <span>
+    <ToggleButton let:on={open} let:toggleOff transition={false}>
+      {value.length} selected
+      <MultiSelectMenu
+        {options}
+        {value}
+        mode="immediate"
+        maintainOrder
+        on:change={(e) => {
+          // @ts-expect-error
+          value = e.detail.value;
+        }}
+        {open}
+        on:close={toggleOff}
+      />
+    </ToggleButton>
+  </span>
+</Preview>
+
+<h2>Immediately apply changes (with custom action)</h2>
+<Preview>
+  <span>
+    <ToggleButton let:on={open} let:toggleOff transition={false}>
+      {value.length} selected
+      <MultiSelectMenu
+        {options}
+        {value}
+        mode="immediate"
+        maintainOrder
+        on:change={(e) => {
+          // @ts-expect-error
+          value = e.detail.value;
+        }}
+        {open}
+        on:close={toggleOff}
+      >
+        <div slot="actions">
+          <Button color="primary" icon={mdiPlus}>Add item</Button>
+        </div>
+      </MultiSelectMenu>
+    </ToggleButton>
+  </span>
+</Preview>
+
 <h2>actions slot</h2>
 
 <Preview>