svelte-ag 0.0.2-dev.72

package/src/lib/components/search/search.svelte.ts

@@ -0,0 +1,286 @@
+import { useRefById, type ReadableBoxedValues, type WithRefProps, type WritableBoxedValues } from 'svelte-toolbelt';
+import { Context, watch } from 'runed';
+import { computeCommandScore } from 'bits-ui';
+import type { Item } from './types';
+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';
+
+// -------------------- Search Root --------------------
+export type SearchRootStateProps = WithRefProps<
+  ReadableBoxedValues<{
+    items: Item[];
+    searchWith?: string;
+    search?: (term: string) => Promise<Item[]>;
+  }> &
+    WritableBoxedValues<{
+      value: Item;
+    }>
+>;
+
+export class SearchRootState {
+  // State
+  searchState = $state({
+    value: '',
+    sortedList: [] as (Item & { score?: number })[],
+    showSuggestions: false
+  });
+  numPerPage = $state(0);
+  start = $state(0);
+  end = $state(0);
+
+  loading = $state(false);
+  inputRef = $state<HTMLInputElement | null>(null);
+  debounceTimer: number | null = $state(null);
+
+  constructor(readonly opts: SearchRootStateProps) {
+    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]: ''
+      }) as const
+  );
+}
+
+const SearchRootContext = new Context<SearchRootState>('Search.Root');
+
+// -------------------- Search Input --------------------
+export type SearchInputStateProps = WithRefProps<
+  WritableBoxedValues<{
+    value: string;
+  }>
+>;
+export class SearchInputState {
+  constructor(
+    readonly opts: SearchInputStateProps,
+    readonly root: SearchRootState
+  ) {
+    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]: ''
+      }) as const
+  );
+}
+
+// -------------------- Search List --------------------
+export type SearchListStateProps = WithRefProps;
+export class SearchListState {
+  constructor(
+    readonly opts: SearchListStateProps,
+    readonly root: SearchRootState
+  ) {
+    useRefById(opts);
+  }
+
+  props = $derived.by(
+    () =>
+      ({
+        id: this.opts.id.current,
+        [SEARCH_LIST_ATTR]: ''
+      }) as const
+  );
+
+  get suggestions() {
+    return this.root.searchState.sortedList;
+  }
+
+  visible(item: Item & { score?: number }) {
+    // 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: Item) {
+    return this.root.opts.value.current.value === item.value;
+  }
+  select(item: Item) {
+    this.root.opts.value.current = item;
+    this.root.searchState.showSuggestions = false;
+    this.root.inputRef?.focus();
+  }
+}
+
+// -------------------- Search Item --------------------
+export type SearchPagnationStateProps = WithRefProps<
+  WritableBoxedValues<{
+    page: number;
+    perPage: number;
+  }>
+>;
+export class SearchPagnationState {
+  constructor(
+    readonly opts: SearchPagnationStateProps,
+    readonly root: SearchRootState
+  ) {
+    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]: ''
+      }) as const
+  );
+
+  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);
+  }
+}
+
+// -------------------- Search Empty --------------------
+export type SearchEmptyStateProps = WithRefProps;
+export class SearchEmptyState {
+  constructor(
+    readonly opts: SearchEmptyStateProps,
+    readonly root: SearchRootState
+  ) {
+    useRefById(opts);
+  }
+  props = $derived.by(
+    () =>
+      ({
+        id: this.opts.id.current,
+        [SEARCH_EMPTY_ATTR]: ''
+      }) as const
+  );
+}
+
+// -------------------- Search Hooks --------------------
+export function useSearchRoot(props: SearchRootStateProps) {
+  return SearchRootContext.set(new SearchRootState(props));
+}
+export function useSearchInput(props: SearchInputStateProps) {
+  return new SearchInputState(props, SearchRootContext.get());
+}
+export function useSearchList(props: SearchListStateProps) {
+  return new SearchListState(props, SearchRootContext.get());
+}
+export function useSearchPagnation(props: SearchPagnationStateProps) {
+  return new SearchPagnationState(props, SearchRootContext.get());
+}
+export function useSearchEmpty(props: SearchEmptyStateProps) {
+  return new SearchEmptyState(props, SearchRootContext.get());
+}

package/src/lib/components/search/types.ts

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

package/src/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/src/lib/components/utilities/arrow/index.ts

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

package/src/lib/components/utilities/arrow/types.ts

@@ -0,0 +1,20 @@
+import type { WithChild } from "$lib/internal/types.js";
+import type { BitsPrimitiveSpanAttributes } from "$lib/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/src/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/src/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 '$components/utilities/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/src/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/src/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/src/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/src/lib/components/utilities/floating-layer/components/index.ts

@@ -0,0 +1,11 @@
+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/src/lib/components/utilities/floating-layer/index.ts

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

package/src/lib/components/utilities/floating-layer/types.ts

@@ -0,0 +1,133 @@
+import type { Snippet } from 'svelte';
+import type { ReadableBox } from 'svelte-toolbelt';
+import type { Align, Boundary, Side } from './use-floating-layer.svelte.js';
+import type { Arrayable } from '$bits/internal/types.js';
+import type { Direction, StyleProperties } from 'bits-ui';
+import type { Measurable } from '$bits/internal/floating-svelte/types.js';
+
+export type FloatingLayerContentProps = {
+  /**
+   * The preferred side of the anchor to render against when open.
+   * Will be reversed when collisions occur.
+   *
+   * @see https://floating-ui.com/docs/computePosition#placement
+   */
+  side?: Side;
+
+  /**
+   * The distance in pixels from the anchor to the floating element.
+   * @see https://floating-ui.com/docs/offset#options
+   */
+  sideOffset?: number;
+
+  /**
+   * The preferred alignment of the anchor to render against when open.
+   * This may change when collisions occur.
+   *
+   * @see https://floating-ui.com/docs/computePosition#placement
+   */
+  align?: Align;
+
+  /**
+   * An offset in pixels from the "start" or "end" alignment options.
+   * @see https://floating-ui.com/docs/offset#options
+   */
+  alignOffset?: number | undefined;
+
+  /**
+   * This describes the padding between the arrow and the edges of the floating element.
+   * If your floating element has border-radius, this will prevent it from overflowing
+   * the corners.
+   */
+  arrowPadding?: number;
+
+  /**
+   * When `true`, overrides the `side` and `align` options to prevent collisions
+   * with the boundary edges.
+   *
+   * @default true
+   * @see https://floating-ui.com/docs/flip
+   */
+  avoidCollisions?: boolean | undefined;
+
+  /**
+   * A boundary element or array of elements to check for collisions against.
+   *
+   * @see https://floating-ui.com/docs/detectoverflow#boundary
+   */
+  collisionBoundary?: Arrayable<Boundary>;
+
+  /**
+   * The amount in pixels of virtual padding around the viewport edges to check
+   * for overflow which will cause a collision.
+   *
+   * @default 8
+   * @see https://floating-ui.com/docs/detectOverflow#padding
+   */
+  collisionPadding?: number | Partial<Record<Side, number>>;
+
+  sticky?: 'partial' | 'always';
+
+  hideWhenDetached?: boolean;
+
+  /**
+   * "optimized" will only update the position when necessary, while "always"
+   * will update the position on each animation frame, which is useful if the floating
+   * content is following something like a mouse cursor.
+   *
+   * @defaultValue "optimized"
+   */
+  updatePositionStrategy?: 'optimized' | 'always';
+
+  content?: Snippet<[{ props: Record<string, unknown>; wrapperProps: Record<string, unknown> }]>;
+
+  /**
+   * The positioning strategy to use for the floating element.
+   * @see https://floating-ui.com/docs/computeposition#strategy
+   */
+  strategy?: 'absolute' | 'fixed' | undefined;
+
+  /**
+   * The text direction of the content.
+   */
+  dir?: Direction;
+
+  /**
+   * Whether to prevent scrolling the body when the content is open.
+   */
+  preventScroll?: boolean;
+
+  /**
+   * Use an element other than the trigger to anchor the content to. If provided,
+   * the content will be anchored to the provided element instead of the trigger.
+   *
+   * You can pass a selector string or an HTMLElement.
+   */
+  customAnchor?: string | HTMLElement | Measurable | null;
+};
+
+export type FloatingLayerContentImplProps = {
+  id: string;
+
+  /**
+   * The ID of the content wrapper element.
+   */
+  wrapperId?: string;
+
+  /**
+   * The style properties to apply to the content.
+   */
+  style?: StyleProperties | string | null;
+
+  /**
+   * Callback that is called when the floating element is placed.
+   */
+  onPlaced?: () => void;
+  enabled: boolean;
+} & FloatingLayerContentProps;
+
+export type FloatingLayerAnchorProps = {
+  id: string;
+  children?: Snippet;
+  virtualEl?: ReadableBox<Measurable | null>;
+};