runeforge 0.0.40 → 0.0.42

package/dist/components/crud/views/List.svelte

@@ -102,6 +102,7 @@
 	const allowRead = $derived(read.enabled ?? true);
 	const allowUpdate = $derived(update.enabled ?? true);
 	const allowDelete = $derived(deletion.enabled ?? true);
+	const allowCreate = $derived(creation.enabled ?? true);
 	const deleteLabel = $derived(deletion.label ?? strings.delete);
 	const updateLabel = $derived(update.label ?? strings.edit);
 	const readLabel = $derived(read.label ?? strings.view);
@@ -353,15 +354,17 @@
 		</Button>
 	{/if}
 
-	{@const CreateIcon = icons.create}
-	<Button variant="primary" onclick={measuring ? undefined : handleCreate}>
-		<CreateIcon class="size-5" />
-		{#if creation.label}
-			<span>{creation.label}</span>
-		{:else}
-			<span>{strings.create}<span class="hidden sm:inline">&nbsp;{labelOne}</span></span>
-		{/if}
-	</Button>
+	{#if allowCreate}
+		{@const CreateIcon = icons.create}
+		<Button variant="primary" onclick={measuring ? undefined : handleCreate}>
+			<CreateIcon class="size-5" />
+			{#if creation.label}
+				<span>{creation.label}</span>
+			{:else}
+				<span>{strings.create}<span class="hidden sm:inline">&nbsp;{labelOne}</span></span>
+			{/if}
+		</Button>
+	{/if}
 {/snippet}
 
 {#snippet actionsCell(item: T)}
@@ -415,7 +418,6 @@
 						<SearchInput config={search} />
 					{/if}
 
-					{@const CreateIcon = icons.create}
 					<Button
 						variant="ghost"
 						class="btn-square"
@@ -433,17 +435,20 @@
 						class="dropdown dropdown-end w-56 rounded-box border border-base-content/10 bg-base-100 p-1 shadow-lg"
 						bind:this={actionsPopoverEl}
 					>
-						<Button
-							variant="ghost"
-							class="btn-sm w-full justify-start"
-							onclick={() => {
-								actionsPopoverEl?.hidePopover();
-								handleCreate();
-							}}
-						>
-							<CreateIcon class="size-4" />
-							{creation.label || `${strings.create} ${labelOne}`}
-						</Button>
+						{#if allowCreate}
+							{@const CreateIcon = icons.create}
+							<Button
+								variant="ghost"
+								class="btn-sm w-full justify-start"
+								onclick={() => {
+									actionsPopoverEl?.hidePopover();
+									handleCreate();
+								}}
+							>
+								<CreateIcon class="size-4" />
+								{creation.label || `${strings.create} ${labelOne}`}
+							</Button>
+						{/if}
 
 						{#if allowDelete}
 							<Button

package/dist/components/form/MultiSelect.svelte

@@ -1,9 +1,13 @@
 <script lang="ts">
   import { SvelteMap } from 'svelte/reactivity';
   import { getStrings } from '../../i18n/context.js';
+  import { getIconSet } from '../../icons/context.js';
+  import { defaultIconSet } from '../../icons/sets/default.js';
+  import Button from './Button.svelte';
   import type { SearchResolver, SelectOption } from '../../types/attribute.js';
 
   const strings = getStrings();
+  const icons = $derived(getIconSet() ?? defaultIconSet);
 
   let {
     name,
@@ -14,6 +18,12 @@
     placeholder = strings.selectPlaceholder,
     error = '',
     disabled = false,
+    // When passed, the dropdown's top row selects every option instead of
+    // clearing the selection (labelled `strings.selectAll` instead of
+    // `placeholder`) — clearing moves to the trigger's own × button instead.
+    // Left unset, existing callers keep today's behavior unchanged: top row
+    // clears, no × button.
+    onSelectAll,
   }: {
     name?: string;
     value?: string[];
@@ -23,6 +33,7 @@
     placeholder?: string;
     error?: string;
     disabled?: boolean;
+    onSelectAll?: () => void;
   } = $props();
 
   const popId = $props.id();
@@ -87,6 +98,17 @@
   function onToggle(e: Event) {
     if ((e as ToggleEvent).newState === 'closed') query = '';
   }
+
+  const hasSelection = $derived(value.length > 0);
+
+  function clearFromTrigger(e: MouseEvent) {
+    // Stop the click from also reaching the popover-trigger button
+    // underneath (they're overlapping siblings, not nested) so clearing
+    // doesn't toggle the dropdown open at the same time.
+    e.preventDefault();
+    e.stopPropagation();
+    clear();
+  }
 </script>
 
 <div class="relative w-full">
@@ -94,18 +116,34 @@
     <input type="hidden" {name} value={JSON.stringify(value)} />
   {/if}
 
-  <button
-    type="button"
-    class="select select-bordered w-full text-left font-normal"
-    class:select-error={!!error}
-    class:opacity-40={value.length === 0}
-    {disabled}
-    popovertarget={popId}
-    style="anchor-name:{anchorName}"
-    title={selectedLabels.join(', ')}
-  >
-    {buttonLabel}
-  </button>
+  <div class="relative">
+    <button
+      type="button"
+      class="select select-bordered w-full text-left font-normal"
+      class:select-error={!!error}
+      class:opacity-40={value.length === 0}
+      class:pr-8={hasSelection}
+      {disabled}
+      popovertarget={popId}
+      style="anchor-name:{anchorName}"
+      title={selectedLabels.join(', ')}
+    >
+      {buttonLabel}
+    </button>
+
+    {#if hasSelection && !disabled}
+      {@const Icon = icons.clear}
+      <Button
+        variant="ghost"
+        class="btn-xs btn-square btn-circle absolute top-1/2 right-6 -translate-y-1/2"
+        aria-label={strings.selectClear}
+        title={strings.selectClear}
+        onclick={clearFromTrigger}
+      >
+        <Icon class="size-3" />
+      </Button>
+    {/if}
+  </div>
 
   <div
     popover="auto"
@@ -129,9 +167,9 @@
         <button
           type="button"
           class="w-full rounded-btn px-3 py-2 text-left text-sm text-base-content/40 hover:bg-base-200"
-          onclick={clear}
+          onclick={onSelectAll ?? clear}
         >
-          {placeholder}
+          {onSelectAll ? strings.selectAll : placeholder}
         </button>
       </li>
       {#if searching}

package/dist/components/form/MultiSelect.svelte.d.ts

@@ -8,6 +8,7 @@ type $$ComponentProps = {
     placeholder?: string;
     error?: string;
     disabled?: boolean;
+    onSelectAll?: () => void;
 };
 declare const MultiSelect: import("svelte").Component<$$ComponentProps, {}, "value">;
 type MultiSelect = ReturnType<typeof MultiSelect>;

package/dist/i18n/en.js

@@ -13,6 +13,8 @@ export const en = {
     selectSearching: 'Searching...',
     selectNoResults: 'No results',
     selectedCount: (count) => `${count} selected`,
+    selectAll: 'Select all',
+    selectClear: 'Clear selection',
     view: 'View',
     edit: 'Edit',
     delete: 'Delete',

package/dist/i18n/es.js

@@ -13,6 +13,8 @@ export const es = {
     selectSearching: 'Buscando...',
     selectNoResults: 'Sin resultados',
     selectedCount: (count) => `${count} seleccionado${count === 1 ? '' : 's'}`,
+    selectAll: 'Seleccionar todo',
+    selectClear: 'Limpiar selección',
     view: 'Ver',
     edit: 'Editar',
     delete: 'Eliminar',

package/dist/i18n/types.d.ts

@@ -13,6 +13,8 @@ export interface RuneforgeStrings {
     selectSearching: string;
     selectNoResults: string;
     selectedCount: (count: number) => string;
+    selectAll: string;
+    selectClear: string;
     view: string;
     edit: string;
     delete: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "runeforge",
-  "version": "0.0.40",
+  "version": "0.0.42",
   "description": "SvelteKit toolkit for building metadata-driven CRUD interfaces with tables, forms, and actions",
   "license": "MIT",
   "author": "Ezequiel Puerta",