runeforge 0.0.13 → 0.0.15

package/README.md

@@ -69,6 +69,7 @@ Runeforge provides a set of composable, metadata-driven components for building
 - Svelte 5 (runes mode)
 - Tailwind CSS 4
 - DaisyUI 5
+- Cally
 
 ---
 

package/dist/components/crud/Field.svelte

@@ -1,4 +1,5 @@
 <script lang="ts" generics="T extends object = Record<string, unknown>">
+  import { onMount } from 'svelte';
   import Avatar from '../Avatar.svelte';
   import Label from '../form/Label.svelte';
   import Select from '../form/Select.svelte';
@@ -8,6 +9,10 @@
 
   const strings = getStrings();
 
+  onMount(() => {
+    import('cally');
+  });
+
   let {
     field,
     record = $bindable({} as Record<string, unknown>),

package/dist/components/table/ColumnFilter.svelte

@@ -1,4 +1,5 @@
 <script lang="ts" generics="T extends object">
+  import { onMount } from 'svelte';
   import Label from '../form/Label.svelte';
   import Button from '../form/Button.svelte';
   import { getIconSet } from '../../icons/context.js';
@@ -6,6 +7,10 @@
   import { getStrings } from '../../i18n/context.js';
 
   const strings = getStrings();
+
+  onMount(() => {
+    import('cally');
+  });
   import type { DistinctEntry } from '../../types/table.js';
   import type { FilterState } from './state.svelte.js';
   import type { ColumnDefinition } from '../../types/crud.js';
@@ -106,14 +111,33 @@
         {dateRange.from || '…'} → {dateRange.to || '…'}
       </p>
     {/if}
+    {#if filter.hasActive(column.attribute)}
+      <Button variant="ghost" class="btn-sm mt-2 w-full" onclick={clear}>
+        {strings.clearFilter}
+      </Button>
+    {/if}
   {:else}
-    <input
-      type="text"
-      class="input input-bordered input-sm w-full"
-      placeholder={strings.filterPlaceholder}
-      value={filter.textFor(column.attribute)}
-      oninput={(e) => setText(e.currentTarget.value)}
-    />
+    <div class="relative">
+      <input
+        type="text"
+        class={['input input-bordered input-sm w-full', filter.hasActive(column.attribute) && 'pr-7']}
+        placeholder={strings.filterPlaceholder}
+        value={filter.textFor(column.attribute)}
+        oninput={(e) => setText(e.currentTarget.value)}
+      />
+      {#if filter.hasActive(column.attribute)}
+        {@const Icon = icons.clear}
+        <Button
+          variant="ghost"
+          class="btn-xs btn-square btn-circle absolute top-1/2 right-1 -translate-y-1/2"
+          aria-label={strings.clearFilter}
+          title={strings.clearFilter}
+          onclick={clear}
+        >
+          <Icon class="size-3" />
+        </Button>
+      {/if}
+    </div>
 
     {#if entries.length > 0 && entries.length < maxCheckboxValues}
       <div class="mt-2 flex max-h-60 flex-col gap-1 overflow-y-auto">
@@ -133,10 +157,4 @@
       </div>
     {/if}
   {/if}
-
-  {#if filter.hasActive(column.attribute)}
-    <Button variant="ghost" class="btn-sm mt-2 w-full" onclick={clear}>
-      {strings.clearFilter}
-    </Button>
-  {/if}
 </div>

package/dist/icons/defaults/Clear.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+  let { size = '1em', class: cls = '' }: { size?: string | number; class?: string } = $props();
+</script>
+<svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 16 16" fill="currentColor" class={cls}>
+  <path d="M2.146 2.146a.5.5 0 0 1 .708 0L8 7.293l5.146-5.147a.5.5 0 1 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854a.5.5 0 0 1 0-.708z"/>
+</svg>

package/dist/icons/defaults/Clear.svelte.d.ts

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    size?: string | number;
+    class?: string;
+};
+declare const Clear: import("svelte").Component<$$ComponentProps, {}, "">;
+type Clear = ReturnType<typeof Clear>;
+export default Clear;

package/dist/icons/sets/bootstrap.js

@@ -10,7 +10,7 @@
  *   setIconSet(bootstrapIconSet);
  */
 import * as Icons from 'svelte-bootstrap-icons';
-const { ChevronExpand, CaretUpFill, CaretDownFill, Funnel, FunnelFill, Plus, Eye, PencilSquare, Trash3, HouseDoor, Folder, EyeSlash, } = Icons;
+const { ChevronExpand, CaretUpFill, CaretDownFill, Funnel, FunnelFill, Plus, Eye, PencilSquare, Trash3, HouseDoor, Folder, EyeSlash, X, } = Icons;
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function asIcon(c) { return c; }
 export const bootstrapIconSet = {
@@ -19,6 +19,7 @@ export const bootstrapIconSet = {
     sortDesc: asIcon(CaretDownFill),
     filter: asIcon(Funnel),
     filterActive: asIcon(FunnelFill),
+    clear: asIcon(X),
     create: asIcon(Plus),
     view: asIcon(Eye),
     edit: asIcon(PencilSquare),

package/dist/icons/sets/default.js

@@ -3,6 +3,7 @@ import SortAsc from '../defaults/SortAsc.svelte';
 import SortDesc from '../defaults/SortDesc.svelte';
 import Filter from '../defaults/Filter.svelte';
 import FilterActive from '../defaults/FilterActive.svelte';
+import Clear from '../defaults/Clear.svelte';
 import Create from '../defaults/Create.svelte';
 import View from '../defaults/View.svelte';
 import Edit from '../defaults/Edit.svelte';
@@ -17,6 +18,7 @@ export const defaultIconSet = {
     sortDesc: SortDesc,
     filter: Filter,
     filterActive: FilterActive,
+    clear: Clear,
     create: Create,
     view: View,
     edit: Edit,

package/dist/icons/types.d.ts

@@ -9,6 +9,7 @@ export interface CRUDIconSet {
     sortDesc: IconComponent;
     filter: IconComponent;
     filterActive: IconComponent;
+    clear: IconComponent;
     create: IconComponent;
     view: IconComponent;
     edit: IconComponent;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "runeforge",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "description": "SvelteKit toolkit for building metadata-driven CRUD interfaces with tables, forms, and actions",
   "license": "MIT",
   "author": "Ezequiel Puerta",
@@ -37,6 +37,9 @@
     "svelte": "^5.0.0",
     "tailwindcss": "^4.0.0"
   },
+  "dependencies": {
+    "cally": "^0.9.2"
+  },
   "devDependencies": {
     "@eslint/js": "^10.0.1",
     "@playwright/test": "^1.60.0",