svelte-ag 0.0.2-dev.72

package/dist/lib/components/search/exports.js

@@ -0,0 +1,5 @@
+export { default as Root } from './components/search.svelte';
+export { default as Input } from './components/search-input.svelte';
+export { default as List } from './components/search-list.svelte';
+export { default as Empty } from './components/search-empty.svelte';
+export { default as Pagnation } from './components/search-pagnation.svelte';

package/dist/lib/components/search/index.d.ts

@@ -0,0 +1,2 @@
+export * as Search from './exports.js';
+export { default as SearchPopover, type SearchPopoverProps } from './combinations/searchPopover.svelte';

package/dist/lib/components/search/index.js

@@ -0,0 +1,2 @@
+export * as Search from './exports.js';
+export { default as SearchPopover } from './combinations/searchPopover.svelte';

package/dist/lib/components/search/search.svelte.d.ts

@@ -0,0 +1,102 @@
+import { type ReadableBoxedValues, type WithRefProps, type WritableBoxedValues } from 'svelte-toolbelt';
+import type { Item } from './types';
+export type SearchRootStateProps = WithRefProps<ReadableBoxedValues<{
+    items: Item[];
+    searchWith?: string;
+    search?: (term: string) => Promise<Item[]>;
+}> & WritableBoxedValues<{
+    value: Item;
+}>>;
+export declare class SearchRootState {
+    readonly opts: SearchRootStateProps;
+    searchState: {
+        value: string;
+        sortedList: (Item & {
+            score?: number;
+        })[];
+        showSuggestions: boolean;
+    };
+    numPerPage: number;
+    start: number;
+    end: number;
+    loading: boolean;
+    inputRef: HTMLInputElement | null;
+    debounceTimer: number | null;
+    constructor(opts: SearchRootStateProps);
+    /**
+     * This function needs to update the sorted list of items based on the search term.
+     */
+    search(): Promise<void>;
+    getFilteredList(): (Item & {
+        score?: number;
+    })[];
+    props: {
+        readonly id: string;
+        readonly "data-search-root": "";
+    };
+}
+export type SearchInputStateProps = WithRefProps<WritableBoxedValues<{
+    value: string;
+}>>;
+export declare class SearchInputState {
+    readonly opts: SearchInputStateProps;
+    readonly root: SearchRootState;
+    constructor(opts: SearchInputStateProps, root: SearchRootState);
+    onFocus: () => void;
+    props: {
+        readonly id: string;
+        readonly onfocus: () => void;
+        readonly "data-search-input": "";
+    };
+}
+export type SearchListStateProps = WithRefProps;
+export declare class SearchListState {
+    readonly opts: SearchListStateProps;
+    readonly root: SearchRootState;
+    constructor(opts: SearchListStateProps, root: SearchRootState);
+    props: {
+        readonly id: string;
+        readonly "data-search-list": "";
+    };
+    get suggestions(): (Item & {
+        score?: number;
+    })[];
+    visible(item: Item & {
+        score?: number;
+    }): boolean;
+    selected(item: Item): boolean;
+    select(item: Item): void;
+}
+export type SearchPagnationStateProps = WithRefProps<WritableBoxedValues<{
+    page: number;
+    perPage: number;
+}>>;
+export declare class SearchPagnationState {
+    readonly opts: SearchPagnationStateProps;
+    readonly root: SearchRootState;
+    constructor(opts: SearchPagnationStateProps, root: SearchRootState);
+    props: {
+        readonly id: string;
+        readonly "data-search-item": "";
+    };
+    get length(): number;
+    get perPage(): number;
+    get activeItems(): (Item & {
+        score?: number;
+    })[];
+}
+export type SearchEmptyStateProps = WithRefProps;
+export declare class SearchEmptyState {
+    readonly opts: SearchEmptyStateProps;
+    readonly root: SearchRootState;
+    constructor(opts: SearchEmptyStateProps, root: SearchRootState);
+    props: {
+        readonly id: string;
+        readonly "data-search-empty": "";
+    };
+}
+export declare function useSearchRoot(props: SearchRootStateProps): SearchRootState;
+export declare function useSearchInput(props: SearchInputStateProps): SearchInputState;
+export declare function useSearchList(props: SearchListStateProps): SearchListState;
+export declare function useSearchPagnation(props: SearchPagnationStateProps): SearchPagnationState;
+export declare function useSearchEmpty(props: SearchEmptyStateProps): SearchEmptyState;

package/dist/lib/components/search/search.svelte.js

@@ -0,0 +1,202 @@
+import { useRefById } from 'svelte-toolbelt';
+import { Context, watch } from 'runed';
+import { computeCommandScore } from 'bits-ui';
+import { dequal } from 'dequal';
+const SEARCH_ROOT_ATTR = 'data-search-root';
+const SEARCH_INPUT_ATTR = 'data-search-input';
+const SEARCH_LIST_ATTR = 'data-search-list';
+const SEARCH_ITEM_ATTR = 'data-search-item';
+const SEARCH_EMPTY_ATTR = 'data-search-empty';
+export class SearchRootState {
+    opts;
+    // State
+    searchState = $state({
+        value: '',
+        sortedList: [],
+        showSuggestions: false
+    });
+    numPerPage = $state(0);
+    start = $state(0);
+    end = $state(0);
+    loading = $state(false);
+    inputRef = $state(null);
+    debounceTimer = $state(null);
+    constructor(opts) {
+        this.opts = opts;
+        useRefById(opts);
+        if (opts.items !== null) {
+            // Watch for changes in items and update the sorted list
+            watch(() => this.opts.items.current, (newItems, oldItems) => {
+                if (dequal(newItems, oldItems))
+                    return;
+                this.search();
+            });
+        }
+        watch(() => this.searchState.sortedList, () => {
+            this.start = 0;
+        });
+        watch([() => this.searchState.sortedList, () => this.numPerPage, () => this.start], () => {
+            const filteredList = this.getFilteredList();
+            this.end = this.numPerPage === 0 ? 0 : Math.min(filteredList.length, this.start + this.numPerPage);
+        });
+        this.search();
+        this.searchState.value = this.opts.value.current.value;
+    }
+    /**
+     * This function needs to update the sorted list of items based on the search term.
+     */
+    async search() {
+        if (this.opts.search !== undefined) {
+            const func = this.opts.search.current;
+            if (func) {
+                this.searchState.sortedList = await func(this.searchState.value);
+                return;
+            }
+        }
+        const searchTerm = this.opts.searchWith?.current ?? this.searchState.value;
+        const scoredItems = this.opts.items.current.map((item) => ({
+            ...item,
+            score: searchTerm ? computeCommandScore(item.label, searchTerm, []) : 1
+        }));
+        // Sort items by score (highest first) then alphabetically
+        const newSortedList = scoredItems.sort((a, b) => {
+            if (a.score !== b.score)
+                return b.score - a.score;
+            return a.label.localeCompare(b.label);
+        });
+        if (dequal(this.searchState.sortedList, newSortedList))
+            return;
+        this.searchState.sortedList = newSortedList;
+    }
+    getFilteredList() {
+        return this.searchState.sortedList.filter((item) => item.score === undefined || item.score > 0);
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        [SEARCH_ROOT_ATTR]: ''
+    }));
+}
+const SearchRootContext = new Context('Search.Root');
+export class SearchInputState {
+    opts;
+    root;
+    constructor(opts, root) {
+        this.opts = opts;
+        this.root = root;
+        useRefById({
+            ...opts,
+            onRefChange: (node) => {
+                if (node instanceof HTMLInputElement) {
+                    this.root.inputRef = node;
+                }
+            }
+        });
+        /**
+         * This is essentially our oninput handler
+         */
+        watch(() => this.opts.value.current, () => {
+            this.root.searchState.value = this.opts.value.current;
+            this.root.search();
+            this.root.searchState.showSuggestions = true;
+        });
+    }
+    onFocus = () => {
+        this.root.search();
+    };
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        onfocus: this.onFocus,
+        [SEARCH_INPUT_ATTR]: ''
+    }));
+}
+export class SearchListState {
+    opts;
+    root;
+    constructor(opts, root) {
+        this.opts = opts;
+        this.root = root;
+        useRefById(opts);
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        [SEARCH_LIST_ATTR]: ''
+    }));
+    get suggestions() {
+        return this.root.searchState.sortedList;
+    }
+    visible(item) {
+        // Check if item has a score of 0
+        if (item.score === 0)
+            return false;
+        return this.root
+            .getFilteredList()
+            .slice(this.root.start, this.root.end)
+            .some((i) => dequal({ label: i.label, value: i.value }, { label: item.label, value: item.value }));
+    }
+    selected(item) {
+        return this.root.opts.value.current.value === item.value;
+    }
+    select(item) {
+        this.root.opts.value.current = item;
+        this.root.searchState.showSuggestions = false;
+        this.root.inputRef?.focus();
+    }
+}
+export class SearchPagnationState {
+    opts;
+    root;
+    constructor(opts, root) {
+        this.opts = opts;
+        this.root = root;
+        useRefById(opts);
+        this.root.numPerPage = this.opts.perPage.current;
+        watch(() => this.opts.perPage.current, (perPage) => {
+            this.root.numPerPage = perPage;
+        });
+        watch(() => this.opts.page.current, (page) => {
+            this.root.start = (page - 1) * this.root.numPerPage;
+        });
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        [SEARCH_ITEM_ATTR]: ''
+    }));
+    get length() {
+        return this.root.getFilteredList().length;
+    }
+    get perPage() {
+        return this.opts.perPage.current;
+    }
+    get activeItems() {
+        return this.root.getFilteredList().slice(this.root.start, this.root.end);
+    }
+}
+export class SearchEmptyState {
+    opts;
+    root;
+    constructor(opts, root) {
+        this.opts = opts;
+        this.root = root;
+        useRefById(opts);
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        [SEARCH_EMPTY_ATTR]: ''
+    }));
+}
+// -------------------- Search Hooks --------------------
+export function useSearchRoot(props) {
+    return SearchRootContext.set(new SearchRootState(props));
+}
+export function useSearchInput(props) {
+    return new SearchInputState(props, SearchRootContext.get());
+}
+export function useSearchList(props) {
+    return new SearchListState(props, SearchRootContext.get());
+}
+export function useSearchPagnation(props) {
+    return new SearchPagnationState(props, SearchRootContext.get());
+}
+export function useSearchEmpty(props) {
+    return new SearchEmptyState(props, SearchRootContext.get());
+}

package/dist/lib/components/search/types.d.ts

@@ -0,0 +1,28 @@
+import type { BitsPrimitiveDivAttributes, WithChild, Without, BitsPrimitiveInputAttributes } from 'bits-ui';
+import type { Snippet } from 'svelte';
+export type Item = {
+    label: string;
+    value: string;
+};
+export type SearchRootPropsWithoutHTML = WithChild<{
+    items?: Item[];
+    searchWith?: string;
+    value: Item;
+    search?: (term: string) => Promise<Item[]>;
+}>;
+export type SearchProps = SearchRootPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, SearchRootPropsWithoutHTML>;
+export type SearchInputPropsWithoutHTML = WithChild<{
+    value?: string;
+}>;
+export type SearchInputProps = SearchInputPropsWithoutHTML & Without<BitsPrimitiveInputAttributes, SearchInputPropsWithoutHTML>;
+export type SearchListPropsWithoutHTML = WithChild<{
+    item: Snippet<[Item]>;
+}>;
+export type SearchListProps = SearchListPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, SearchListPropsWithoutHTML>;
+export type SearchPagnationPropsWithoutHTML = WithChild<{
+    page?: number;
+    perPage?: number;
+}>;
+export type SearchPagnationProps = SearchPagnationPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, SearchPagnationPropsWithoutHTML>;
+export type SearchEmptyPropsWithoutHTML = WithChild;
+export type SearchEmptyProps = SearchEmptyPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, SearchEmptyPropsWithoutHTML>;

package/dist/lib/components/search/types.js

@@ -0,0 +1 @@
+export {};

package/dist/lib/components/utilities/arrow/arrow.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { mergeProps } from 'svelte-toolbelt';
+  import type { ArrowProps } from './types.js';
+  import { useId } from '../../../bits/internal/use-id.js';
+
+  let { id = useId(), children, child, width = 10, height = 5, ...restProps }: ArrowProps = $props();
+
+  const mergedProps = $derived(mergeProps(restProps, { id }));
+</script>
+
+{#if child}
+  {@render child({ props: mergedProps })}
+{:else}
+  <span {...mergedProps}>
+    {#if children}
+      {@render children?.()}
+    {:else}
+      <svg {width} {height} viewBox="0 0 30 10" preserveAspectRatio="none" data-arrow="">
+        <polygon points="0,0 30,0 15,10" fill="currentColor" />
+      </svg>
+    {/if}
+  </span>
+{/if}

package/dist/lib/components/utilities/arrow/arrow.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const Arrow: import("svelte").Component<any, {}, "">;
+type Arrow = ReturnType<typeof Arrow>;
+export default Arrow;

package/dist/lib/components/utilities/arrow/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Arrow } from "./arrow.svelte";
+export type { ArrowProps } from "./types.js";

package/dist/lib/components/utilities/arrow/index.js

@@ -0,0 +1 @@
+export { default as Arrow } from "./arrow.svelte";

package/dist/lib/components/utilities/arrow/types.d.ts

@@ -0,0 +1,17 @@
+import type { WithChild } from "../../../internal/types.js";
+import type { BitsPrimitiveSpanAttributes } from "../../../shared/attributes.js";
+export type ArrowPropsWithoutHTML = WithChild<{
+    /**
+     * The width of the arrow in pixels.
+     *
+     * @defaultValue 10
+     */
+    width?: number;
+    /**
+     * The height of the arrow in pixels.
+     *
+     * @defaultValue 5
+     */
+    height?: number;
+}>;
+export type ArrowProps = ArrowPropsWithoutHTML & BitsPrimitiveSpanAttributes;

package/dist/lib/components/utilities/arrow/types.js

@@ -0,0 +1 @@
+export {};

package/dist/lib/components/utilities/floating-layer/components/floating-layer-anchor.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { box } from 'svelte-toolbelt';
+  import { useFloatingAnchorState } from '../use-floating-layer.svelte.js';
+  import type { AnchorProps } from './index.js';
+  import type { Measurable } from '../../../../bits/internal/floating-svelte/types.js';
+
+  let { id, children, virtualEl }: AnchorProps = $props();
+
+  useFloatingAnchorState({
+    id: box.with(() => id),
+    virtualEl: box.with(() => virtualEl as unknown as Measurable | null)
+  });
+</script>
+
+{@render children?.()}

package/dist/lib/components/utilities/floating-layer/components/floating-layer-anchor.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { AnchorProps } from './index.js';
+declare const FloatingLayerAnchor: import("svelte").Component<AnchorProps, {}, "">;
+type FloatingLayerAnchor = ReturnType<typeof FloatingLayerAnchor>;
+export default FloatingLayerAnchor;

package/dist/lib/components/utilities/floating-layer/components/floating-layer-arrow.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { box, mergeProps } from 'svelte-toolbelt';
+  import { useFloatingArrowState } from '../use-floating-layer.svelte.js';
+  import { Arrow, type ArrowProps } from '../../arrow/index.js';
+  import { useId } from 'bits-ui';
+
+  let { id = useId(), ref = $bindable(null), ...restProps }: ArrowProps = $props();
+
+  const arrowState = useFloatingArrowState({
+    id: box.with(() => id),
+    ref: box.with(
+      () => ref,
+      (v) => (ref = v)
+    )
+  });
+
+  const mergedProps = $derived(mergeProps(restProps, arrowState.props));
+</script>
+
+<Arrow {...mergedProps} />

package/dist/lib/components/utilities/floating-layer/components/floating-layer-arrow.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const FloatingLayerArrow: import("svelte").Component<any, {}, "ref">;
+type FloatingLayerArrow = ReturnType<typeof FloatingLayerArrow>;
+export default FloatingLayerArrow;

package/dist/lib/components/utilities/floating-layer/components/floating-layer-content-static.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { type Snippet, onMount } from "svelte";
+
+	let {
+		content,
+		onPlaced,
+	}: {
+		content?: Snippet<
+			[{ props: Record<string, unknown>; wrapperProps: Record<string, unknown> }]
+		>;
+		onPlaced?: () => void;
+	} = $props();
+
+	onMount(() => {
+		onPlaced?.();
+	});
+</script>
+
+{@render content?.({ props: {}, wrapperProps: {} })}

package/dist/lib/components/utilities/floating-layer/components/floating-layer-content-static.svelte.d.ts

@@ -0,0 +1,13 @@
+import { type Snippet } from "svelte";
+type $$ComponentProps = {
+    content?: Snippet<[
+        {
+            props: Record<string, unknown>;
+            wrapperProps: Record<string, unknown>;
+        }
+    ]>;
+    onPlaced?: () => void;
+};
+declare const FloatingLayerContentStatic: import("svelte").Component<$$ComponentProps, {}, "">;
+type FloatingLayerContentStatic = ReturnType<typeof FloatingLayerContentStatic>;
+export default FloatingLayerContentStatic;

package/dist/lib/components/utilities/floating-layer/components/floating-layer-content.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+  import { box, mergeProps } from 'svelte-toolbelt';
+  import { useFloatingContentState } from '../use-floating-layer.svelte.js';
+  import type { ContentImplProps } from './index.js';
+  import { useId } from 'bits-ui';
+
+  let {
+    content,
+    side = 'bottom',
+    sideOffset = 0,
+    align = 'center',
+    alignOffset = 0,
+    id,
+    arrowPadding = 0,
+    avoidCollisions = true,
+    collisionBoundary = [],
+    collisionPadding = 0,
+    hideWhenDetached = false,
+    onPlaced = () => {},
+    sticky = 'partial',
+    updatePositionStrategy = 'optimized',
+    strategy = 'fixed',
+    dir = 'ltr',
+    style = {},
+    wrapperId = useId(),
+    customAnchor = null,
+    enabled
+  }: ContentImplProps = $props();
+
+  const contentState = useFloatingContentState({
+    side: box.with(() => side),
+    sideOffset: box.with(() => sideOffset),
+    align: box.with(() => align),
+    alignOffset: box.with(() => alignOffset),
+    id: box.with(() => id),
+    arrowPadding: box.with(() => arrowPadding),
+    avoidCollisions: box.with(() => avoidCollisions),
+    collisionBoundary: box.with(() => collisionBoundary),
+    collisionPadding: box.with(() => collisionPadding),
+    hideWhenDetached: box.with(() => hideWhenDetached),
+    onPlaced: box.with(() => onPlaced),
+    sticky: box.with(() => sticky),
+    updatePositionStrategy: box.with(() => updatePositionStrategy),
+    strategy: box.with(() => strategy),
+    dir: box.with(() => dir),
+    style: box.with(() => style),
+    enabled: box.with(() => enabled),
+    wrapperId: box.with(() => wrapperId),
+    customAnchor: box.with(() => customAnchor)
+  });
+
+  const mergedProps = $derived(
+    mergeProps(contentState.wrapperProps, {
+      style: {
+        pointerEvents: 'auto'
+      }
+    })
+  );
+</script>
+
+{@render content?.({ props: contentState.props, wrapperProps: mergedProps })}

package/dist/lib/components/utilities/floating-layer/components/floating-layer-content.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ContentImplProps } from './index.js';
+declare const FloatingLayerContent: import("svelte").Component<ContentImplProps, {}, "">;
+type FloatingLayerContent = ReturnType<typeof FloatingLayerContent>;
+export default FloatingLayerContent;

package/dist/lib/components/utilities/floating-layer/components/floating-layer.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import { useFloatingRootState } from "../use-floating-layer.svelte.js";
+
+	let { children }: { children?: Snippet } = $props();
+
+	useFloatingRootState();
+</script>
+
+{@render children?.()}

package/dist/lib/components/utilities/floating-layer/components/floating-layer.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    children?: Snippet;
+};
+declare const FloatingLayer: import("svelte").Component<$$ComponentProps, {}, "">;
+type FloatingLayer = ReturnType<typeof FloatingLayer>;
+export default FloatingLayer;

package/dist/lib/components/utilities/floating-layer/components/index.d.ts

@@ -0,0 +1,6 @@
+export { default as Anchor } from "./floating-layer-anchor.svelte";
+export { default as Arrow } from "./floating-layer-arrow.svelte";
+export { default as Content } from "./floating-layer-content.svelte";
+export { default as ContentStatic } from "./floating-layer-content-static.svelte";
+export { default as Root } from "./floating-layer.svelte";
+export type { FloatingLayerContentImplProps as ContentImplProps, FloatingLayerContentProps as ContentProps, FloatingLayerAnchorProps as AnchorProps, } from "../types.js";

package/dist/lib/components/utilities/floating-layer/components/index.js

@@ -0,0 +1,5 @@
+export { default as Anchor } from "./floating-layer-anchor.svelte";
+export { default as Arrow } from "./floating-layer-arrow.svelte";
+export { default as Content } from "./floating-layer-content.svelte";
+export { default as ContentStatic } from "./floating-layer-content-static.svelte";
+export { default as Root } from "./floating-layer.svelte";

package/dist/lib/components/utilities/floating-layer/index.d.ts

@@ -0,0 +1 @@
+export * as FloatingLayer from "./components/index.js";

package/dist/lib/components/utilities/floating-layer/index.js

@@ -0,0 +1 @@
+export * as FloatingLayer from "./components/index.js";