svelte-ag 1.2.3 → 1.2.4

package/dist/components/search/combinations/SearchPassthroughHarness.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import { Search } from '../index.js';
+
+  let {
+    items,
+    value = $bindable(),
+    rootClass,
+    rootTestId,
+    inputClass,
+    inputLabel,
+    inputTestId,
+    listClass,
+    listTestId,
+    paginationClass,
+    paginationTestId,
+    perPage = $bindable(1)
+  }: {
+    items: Search.RootProps['items'];
+    value: Search.RootProps['value'];
+    rootClass?: string;
+    rootTestId?: string;
+    inputClass?: string;
+    inputLabel?: string;
+    inputTestId?: string;
+    listClass?: string;
+    listTestId?: string;
+    paginationClass?: string;
+    paginationTestId?: string;
+    perPage?: Search.PagnationProps['perPage'];
+  } = $props();
+</script>
+
+{#snippet itemSnippet(item: NonNullable<Search.RootProps['items']>[number])}
+  <span>{item.label}</span>
+{/snippet}
+
+<Search.Root {items} bind:value class={rootClass} data-testid={rootTestId}>
+  <Search.Input class={inputClass} aria-label={inputLabel} data-testid={inputTestId} />
+  <Search.List item={itemSnippet} class={listClass} data-testid={listTestId} />
+  <Search.Pagnation bind:perPage class={paginationClass} data-testid={paginationTestId} />
+</Search.Root>

package/dist/components/search/combinations/SearchPassthroughHarness.svelte.d.ts

@@ -0,0 +1,19 @@
+import { Search } from '../index.js';
+type $$ComponentProps = {
+    items: Search.RootProps['items'];
+    value: Search.RootProps['value'];
+    rootClass?: string;
+    rootTestId?: string;
+    inputClass?: string;
+    inputLabel?: string;
+    inputTestId?: string;
+    listClass?: string;
+    listTestId?: string;
+    paginationClass?: string;
+    paginationTestId?: string;
+    perPage?: Search.PagnationProps['perPage'];
+};
+declare const SearchPassthroughHarness: import("svelte").Component<$$ComponentProps, {}, "value" | "perPage">;
+type SearchPassthroughHarness = ReturnType<typeof SearchPassthroughHarness>;
+export default SearchPassthroughHarness;
+//# sourceMappingURL=SearchPassthroughHarness.svelte.d.ts.map

package/dist/components/search/combinations/SearchPassthroughHarness.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchPassthroughHarness.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/search/combinations/SearchPassthroughHarness.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAEpC,KAAK,gBAAgB,GAAI;IACtB,KAAK,EAAE,MAAM,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;IACjC,KAAK,EAAE,MAAM,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC;CAC5C,CAAC;AAgCJ,QAAA,MAAM,wBAAwB,uEAAwC,CAAC;AACvE,KAAK,wBAAwB,GAAG,UAAU,CAAC,OAAO,wBAAwB,CAAC,CAAC;AAC5E,eAAe,wBAAwB,CAAC"}

package/dist/components/search/combinations/searchPassthrough.comp.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=searchPassthrough.comp.test.d.ts.map

package/dist/components/search/combinations/searchPassthrough.comp.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"searchPassthrough.comp.test.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/search/combinations/searchPassthrough.comp.test.ts"],"names":[],"mappings":""}

package/dist/components/search/combinations/searchPassthrough.comp.test.js

@@ -0,0 +1,65 @@
+import { render, screen } from '@testing-library/svelte';
+import { describe, expect, it } from 'vitest';
+import SearchPassthroughHarness from './SearchPassthroughHarness.svelte';
+const items = [
+    { label: 'Alpha', value: 'alpha' },
+    { label: 'Beta', value: 'beta' }
+];
+describe('Search passthrough props', () => {
+    it('forwards root class and data attributes', () => {
+        render(SearchPassthroughHarness, {
+            props: {
+                items,
+                value: items[0],
+                rootClass: 'root-class',
+                rootTestId: 'search-root'
+            }
+        });
+        const root = screen.getByTestId('search-root');
+        expect(root.className).toContain('root-class');
+        expect(root.getAttribute('data-search-root')).toBe('');
+    });
+    it('forwards input class and aria attributes', () => {
+        render(SearchPassthroughHarness, {
+            props: {
+                items,
+                value: items[0],
+                inputClass: 'input-class',
+                inputLabel: 'Filter items',
+                inputTestId: 'search-input'
+            }
+        });
+        const input = screen.getByTestId('search-input');
+        expect(input.className).toContain('input-class');
+        expect(input.getAttribute('aria-label')).toBe('Filter items');
+        expect(input.getAttribute('data-search-input')).toBe('');
+    });
+    it('forwards list class and data attributes to the list container', () => {
+        render(SearchPassthroughHarness, {
+            props: {
+                items,
+                value: items[0],
+                listClass: 'list-class',
+                listTestId: 'search-list'
+            }
+        });
+        const list = screen.getByTestId('search-list');
+        const itemButton = screen.getByRole('button', { name: 'Alpha' });
+        expect(list.className).toContain('list-class');
+        expect(list.getAttribute('data-search-list')).toBe('');
+        expect(itemButton.className).not.toContain('list-class');
+    });
+    it('forwards pagination class and data attributes to the pagination root', () => {
+        render(SearchPassthroughHarness, {
+            props: {
+                items,
+                value: items[0],
+                paginationClass: 'pagination-class',
+                paginationTestId: 'search-pagination'
+            }
+        });
+        const pagination = screen.getByTestId('search-pagination');
+        expect(pagination.className).toContain('pagination-class');
+        expect(pagination.getAttribute('data-search-item')).toBe('');
+    });
+});

package/dist/components/search/combinations/searchPopover.comp.test.js

@@ -22,4 +22,15 @@ describe('SearchPopover', () => {
         const trigger = screen.getByRole('combobox');
         expect(trigger.className).toContain('consumer-class');
     });
+    it('forwards non-class trigger props to the real popover trigger button', () => {
+        render(SearchPopover, {
+            props: {
+                disabled: true,
+                item: itemSnippet,
+                items: [selectedItem],
+                value: selectedItem
+            }
+        });
+        expect(screen.getByRole('combobox')).toHaveProperty('disabled', true);
+    });
 });

package/dist/components/search/components/search-list.svelte

@@ -8,7 +8,15 @@
   import { useSearchList } from '../search.svelte';
   import type { SearchListProps } from '../types';
 
-  let { children, child, id = useId(), ref = $bindable(null), item, ...restProps }: SearchListProps = $props();
+  let {
+    children,
+    child,
+    class: className,
+    id = useId(),
+    ref = $bindable(null),
+    item,
+    ...restProps
+  }: SearchListProps = $props();
 
   const listState = useSearchList({
     id: box.with(() => id),
@@ -24,7 +32,7 @@
 {#if child}
   {@render child({ props: mergedProps })}
 {:else}
-  <div {...mergedProps} class="grid w-full auto-rows-fr px-2">
+  <div {...mergedProps} class={cn('grid w-full auto-rows-fr px-2', className)}>
     {#each listState.suggestions as listItem (listItem.value)}
       <Button
         variant="ghost"
@@ -34,8 +42,7 @@
             hover:bg-muted
           `,
           listState.selected(listItem) && 'bg-muted',
-          listState.visible(listItem) ? '' : 'hidden!',
-          mergedProps.class
+          listState.visible(listItem) ? '' : 'hidden!'
         )}
         onclick={() => listState.select(listItem)}
       >

package/dist/components/search/components/search-list.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"search-list.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/search/components/search-list.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAiDhD,QAAA,MAAM,UAAU,wDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"search-list.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/search/components/search-list.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAwDhD,QAAA,MAAM,UAAU,wDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/components/search/components/search-pagnation.svelte

@@ -3,12 +3,14 @@
   import { box, mergeProps } from 'svelte-toolbelt';
 
   import * as Pagination from '$shadcn/pagination/index.js';
+  import { cn } from '../../../utils/index.js';
 
   import { useSearchPagnation } from '../search.svelte';
   import type { SearchPagnationProps } from '../types';
 
   let {
     child,
+    class: className,
     id = useId(),
     ref = $bindable(null),
     page = $bindable(1),
@@ -40,7 +42,13 @@
 {#if child}
   {@render child({ props: mergedProps })}
 {:else}
-  <Pagination.Root class="pb-2" count={pagnationState.length} perPage={pagnationState.perPage} bind:page>
+  <Pagination.Root
+    {...mergedProps}
+    class={cn('pb-2', className)}
+    count={pagnationState.length}
+    perPage={pagnationState.perPage}
+    bind:page
+  >
     {#snippet children({ pages, currentPage })}
       <Pagination.Content>
         <Pagination.Item>

package/dist/components/search/components/search-pagnation.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"search-pagnation.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/search/components/search-pagnation.svelte.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAyErD,QAAA,MAAM,eAAe;;;;8BAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}
+{"version":3,"file":"search-pagnation.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/search/components/search-pagnation.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AA2ErD,QAAA,MAAM,eAAe;;;;8BAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-ag",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "description": "Useful svelte components",
   "bugs": "https://github.com/ageorgeh/svelte-ag/issues",
   "author": "Alexander Hornung",

package/src/lib/components/search/combinations/SearchPassthroughHarness.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import { Search } from '../index.js';
+
+  let {
+    items,
+    value = $bindable(),
+    rootClass,
+    rootTestId,
+    inputClass,
+    inputLabel,
+    inputTestId,
+    listClass,
+    listTestId,
+    paginationClass,
+    paginationTestId,
+    perPage = $bindable(1)
+  }: {
+    items: Search.RootProps['items'];
+    value: Search.RootProps['value'];
+    rootClass?: string;
+    rootTestId?: string;
+    inputClass?: string;
+    inputLabel?: string;
+    inputTestId?: string;
+    listClass?: string;
+    listTestId?: string;
+    paginationClass?: string;
+    paginationTestId?: string;
+    perPage?: Search.PagnationProps['perPage'];
+  } = $props();
+</script>
+
+{#snippet itemSnippet(item: NonNullable<Search.RootProps['items']>[number])}
+  <span>{item.label}</span>
+{/snippet}
+
+<Search.Root {items} bind:value class={rootClass} data-testid={rootTestId}>
+  <Search.Input class={inputClass} aria-label={inputLabel} data-testid={inputTestId} />
+  <Search.List item={itemSnippet} class={listClass} data-testid={listTestId} />
+  <Search.Pagnation bind:perPage class={paginationClass} data-testid={paginationTestId} />
+</Search.Root>

package/src/lib/components/search/combinations/searchPassthrough.comp.test.ts

@@ -0,0 +1,79 @@
+import { render, screen } from '@testing-library/svelte';
+import { describe, expect, it } from 'vitest';
+
+import SearchPassthroughHarness from './SearchPassthroughHarness.svelte';
+
+const items = [
+  { label: 'Alpha', value: 'alpha' },
+  { label: 'Beta', value: 'beta' }
+];
+
+describe('Search passthrough props', () => {
+  it('forwards root class and data attributes', () => {
+    render(SearchPassthroughHarness, {
+      props: {
+        items,
+        value: items[0],
+        rootClass: 'root-class',
+        rootTestId: 'search-root'
+      }
+    });
+
+    const root = screen.getByTestId('search-root');
+
+    expect(root.className).toContain('root-class');
+    expect(root.getAttribute('data-search-root')).toBe('');
+  });
+
+  it('forwards input class and aria attributes', () => {
+    render(SearchPassthroughHarness, {
+      props: {
+        items,
+        value: items[0],
+        inputClass: 'input-class',
+        inputLabel: 'Filter items',
+        inputTestId: 'search-input'
+      }
+    });
+
+    const input = screen.getByTestId('search-input');
+
+    expect(input.className).toContain('input-class');
+    expect(input.getAttribute('aria-label')).toBe('Filter items');
+    expect(input.getAttribute('data-search-input')).toBe('');
+  });
+
+  it('forwards list class and data attributes to the list container', () => {
+    render(SearchPassthroughHarness, {
+      props: {
+        items,
+        value: items[0],
+        listClass: 'list-class',
+        listTestId: 'search-list'
+      }
+    });
+
+    const list = screen.getByTestId('search-list');
+    const itemButton = screen.getByRole('button', { name: 'Alpha' });
+
+    expect(list.className).toContain('list-class');
+    expect(list.getAttribute('data-search-list')).toBe('');
+    expect(itemButton.className).not.toContain('list-class');
+  });
+
+  it('forwards pagination class and data attributes to the pagination root', () => {
+    render(SearchPassthroughHarness, {
+      props: {
+        items,
+        value: items[0],
+        paginationClass: 'pagination-class',
+        paginationTestId: 'search-pagination'
+      }
+    });
+
+    const pagination = screen.getByTestId('search-pagination');
+
+    expect(pagination.className).toContain('pagination-class');
+    expect(pagination.getAttribute('data-search-item')).toBe('');
+  });
+});

package/src/lib/components/search/combinations/searchPopover.comp.test.ts

@@ -28,4 +28,17 @@ describe('SearchPopover', () => {
 
     expect(trigger.className).toContain('consumer-class');
   });
+
+  it('forwards non-class trigger props to the real popover trigger button', () => {
+    render(SearchPopover, {
+      props: {
+        disabled: true,
+        item: itemSnippet,
+        items: [selectedItem],
+        value: selectedItem
+      }
+    });
+
+    expect(screen.getByRole('combobox')).toHaveProperty('disabled', true);
+  });
 });

package/src/lib/components/search/components/search-list.svelte

@@ -8,7 +8,15 @@
   import { useSearchList } from '../search.svelte';
   import type { SearchListProps } from '../types';
 
-  let { children, child, id = useId(), ref = $bindable(null), item, ...restProps }: SearchListProps = $props();
+  let {
+    children,
+    child,
+    class: className,
+    id = useId(),
+    ref = $bindable(null),
+    item,
+    ...restProps
+  }: SearchListProps = $props();
 
   const listState = useSearchList({
     id: box.with(() => id),
@@ -24,7 +32,7 @@
 {#if child}
   {@render child({ props: mergedProps })}
 {:else}
-  <div {...mergedProps} class="grid w-full auto-rows-fr px-2">
+  <div {...mergedProps} class={cn('grid w-full auto-rows-fr px-2', className)}>
     {#each listState.suggestions as listItem (listItem.value)}
       <Button
         variant="ghost"
@@ -34,8 +42,7 @@
             hover:bg-muted
           `,
           listState.selected(listItem) && 'bg-muted',
-          listState.visible(listItem) ? '' : 'hidden!',
-          mergedProps.class
+          listState.visible(listItem) ? '' : 'hidden!'
         )}
         onclick={() => listState.select(listItem)}
       >

package/src/lib/components/search/components/search-pagnation.svelte

@@ -3,12 +3,14 @@
   import { box, mergeProps } from 'svelte-toolbelt';
 
   import * as Pagination from '$shadcn/pagination/index.js';
+  import { cn } from '$utils/index.js';
 
   import { useSearchPagnation } from '../search.svelte';
   import type { SearchPagnationProps } from '../types';
 
   let {
     child,
+    class: className,
     id = useId(),
     ref = $bindable(null),
     page = $bindable(1),
@@ -40,7 +42,13 @@
 {#if child}
   {@render child({ props: mergedProps })}
 {:else}
-  <Pagination.Root class="pb-2" count={pagnationState.length} perPage={pagnationState.perPage} bind:page>
+  <Pagination.Root
+    {...mergedProps}
+    class={cn('pb-2', className)}
+    count={pagnationState.length}
+    perPage={pagnationState.perPage}
+    bind:page
+  >
     {#snippet children({ pages, currentPage })}
       <Pagination.Content>
         <Pagination.Item>