svelte-ag 0.0.2-dev.73 → 0.0.2-dev.81

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

@@ -1,150 +0,0 @@
-import Fuse from 'fuse.js';
-import fuse, {} from 'fuse.js';
-import { value } from '../utils/args';
-import { untrack } from 'svelte';
-export class Typeahead {
-    // Props
-    args = $state(null);
-    initialValue = $derived(value(this.args?.initialValue));
-    data = $derived(value(this.args?.data));
-    searchWith = $derived(value(this.args?.searchWith));
-    onStopTyping = $derived(this.args?.onStopTyping);
-    debounceDelay = $derived(300);
-    onInput = $derived(this.args?.onInput);
-    // DOM elements
-    inputE = $state(null);
-    wrapperE = $state(null);
-    // State
-    _value = $state('');
-    debounceTimer = $state(null);
-    // Fuse
-    fuse = $derived.by(() => {
-        const options = {
-            threshold: 0.6,
-            includeMatches: true
-        };
-        // if (keys) options.keys = keys;
-        return new Fuse(this.data, options);
-    });
-    _suggestions = $state([]);
-    showSuggestions = $state(false);
-    constructor(args) {
-        this.args = args;
-        $effect(() => {
-            if (this.data) {
-                untrack(() => {
-                    if (this.inputE) {
-                        const searchResult = this.fuse.search(this.searchWith ?? this.inputE.value);
-                        this._suggestions = searchResult;
-                    }
-                });
-            }
-        });
-    }
-    get elements() {
-        return {
-            /**
-             * The input element
-             */
-            input: (node) => {
-                this.inputE = node;
-                this.inputE.spellcheck = false;
-                $effect(() => {
-                    this.inputE.value = this.initialValue;
-                    this._value = this.initialValue;
-                });
-                node.oninput = (e) => {
-                    this._value = this.inputE.value;
-                    this.onInput(e);
-                    const isSynthetic = e.isSynthetic === true;
-                    const searchResult = this.fuse.search(this.searchWith ?? this.inputE.value);
-                    this._suggestions = searchResult;
-                    // Don't show suggestions if the input is synthetic (ie from a click)
-                    if (!isSynthetic)
-                        this.showSuggestions = true;
-                    if (this.onStopTyping) {
-                        // Clear any existing timer
-                        if (this.debounceTimer !== null) {
-                            clearTimeout(this.debounceTimer);
-                        }
-                        // Set a new timer
-                        this.debounceTimer = setTimeout(() => {
-                            if (this.onStopTyping) {
-                                this.onStopTyping(this._value);
-                            }
-                            this.debounceTimer = null;
-                        }, this.debounceDelay);
-                    }
-                };
-                this.inputE.onfocus = () => {
-                    if (this.inputE)
-                        this._suggestions = this.fuse.search(this.inputE.value);
-                    this.showSuggestions = true;
-                };
-            },
-            /**
-             * The wrapper element
-             */
-            wrapper: (node) => {
-                this.wrapperE = node;
-                this.wrapperE.addEventListener('focusout', (event) => {
-                    const relatedTarget = event.relatedTarget;
-                    if (!relatedTarget || !event.currentTarget.contains(relatedTarget)) {
-                        this.showSuggestions = false;
-                    }
-                });
-            },
-            /**
-             * Suggestion button
-             */
-            suggestionButton: (node, suggestion) => {
-                const selectSuggestion = () => {
-                    if (this.inputE) {
-                        this.inputE.value = suggestion.item;
-                        const e = new InputEvent('input', { bubbles: true, cancelable: true });
-                        e.isSynthetic = true;
-                        this.inputE.dispatchEvent(e);
-                    }
-                    // Un focus so that the suggestions go away
-                    if (this.wrapperE) {
-                        this.wrapperE.blur();
-                        const focusableChildren = this.wrapperE.querySelectorAll('button, input, textarea, select, a, [tabindex]');
-                        focusableChildren.forEach((child) => child.blur());
-                    }
-                };
-                node.onmousedown = selectSuggestion.bind(this);
-                node.onkeydown = (e) => {
-                    if (e.key === 'Enter')
-                        selectSuggestion.bind(this)();
-                };
-            },
-            /**
-             * Produces html with matches given the 'highlight' class
-             */
-            matches: (suggestion) => {
-                let result = '';
-                let lastIndex = 0;
-                const text = suggestion.item;
-                const matches = suggestion.matches?.[0];
-                if (!matches)
-                    return text;
-                for (const [start, end] of matches.indices) {
-                    result += text.slice(lastIndex, start);
-                    result += `<span class="bg-primary/70 rounded-xs">${text.slice(start, end + 1)}</span>`;
-                    lastIndex = end + 1;
-                }
-                result += text.slice(lastIndex); // Add remaining unhighlighted part
-                return result;
-            }
-        };
-    }
-    get suggestions() {
-        return this._suggestions.length !== 0 && this.showSuggestions ? this._suggestions : undefined;
-    }
-    get value() {
-        return this._value;
-    }
-    get input() {
-        return this.inputE;
-    }
-}

package/dist/lib/components/combo/combo.svelte

@@ -1,186 +0,0 @@
-<script lang="ts" module>
-</script>
-
-<script lang="ts">
-  import { cn } from '../../utils/utils.js';
-  import * as Popover from '$shadcn/popover/index.js';
-  import { Button } from '$shadcn/button/index.js';
-  import * as Command from '$shadcn/command/index.js';
-  import { tick, type Snippet } from 'svelte';
-  import { watch } from 'runed';
-  import * as Pagination from '$shadcn/pagination/index.js';
-  import { Input } from '$shadcn/input/index.js';
-
-  import type { HTMLDivAttributes } from '../../utils';
-  import CommandInput from '$shadcn/command/command-input.svelte';
-
-  type Props = HTMLDivAttributes & {
-    value: string;
-    total: number;
-    allItems: { label: string; value: string }[];
-    activeItems: { label: string; value: string }[];
-    itemSnippet: Snippet<[item: { label: string; value: string }]>;
-  };
-
-  // TODO move away from command
-  // TODO make all items optional in the case where searching should be external
-  let {
-    value = $bindable(),
-    activeItems = $bindable(),
-    class: className = '',
-    itemSnippet,
-    total,
-    allItems,
-    children,
-    ...restProps
-  }: Props = $props();
-
-  const itemsPerPage = 2;
-
-  let open = $state(false);
-  let triggerRef = $state<HTMLButtonElement>(null!);
-
-  let page = $state(1);
-  let start = $state(0);
-  let end = $state(Math.min(total, itemsPerPage));
-
-  let searchTerm = $state('');
-  let validItems = $state(allItems);
-
-  // Allows total to start as 0 and be set later
-  watch(
-    () => total,
-    () => {
-      if (end === 0 && total > 0) {
-        end = Math.min(total, itemsPerPage);
-      }
-    }
-  );
-
-  // Change the start and end when the page changes
-  $effect(() => {
-    start = page * itemsPerPage - itemsPerPage;
-    end = Math.min(total, start + itemsPerPage);
-  });
-
-  // Get items when the start/end changes
-  $effect(() => {
-    if (open) {
-      activeItems = validItems.slice(start, end);
-    } else {
-      activeItems = [];
-    }
-  });
-
-  // Search through all items and set valid items
-  $effect(() => {
-    if (searchTerm) {
-      validItems = allItems.filter((item) => item.label.toLowerCase().includes(searchTerm.toLowerCase()));
-    } else {
-      validItems = allItems;
-    }
-  });
-
-  let selectedLabel = $state('');
-
-  // We want to refocus the trigger button when the user selects
-  // an item from the list so users can continue navigating the
-  // rest of the form with the keyboard.
-  function closeAndFocusTrigger() {
-    open = false;
-    tick().then(() => {
-      triggerRef.focus();
-    });
-  }
-</script>
-
-<div {...restProps} class={cn(className)}>
-  {@render children?.()}
-</div>
-
-<Popover.Root bind:open>
-  <Popover.Trigger bind:ref={triggerRef}>
-    {#snippet child({ props })}
-      <Button variant="outline" class="w-full justify-between" {...props} role="combobox" aria-expanded={open}>
-        {selectedLabel || 'Select an item...'}
-        <span class="icon-[lucide--chevrons-up-down] opacity-50"></span>
-      </Button>
-    {/snippet}
-  </Popover.Trigger>
-  <Popover.Content class="w-full p-0">
-    <Command.Root shouldFilter={false}>
-      <CommandInput placeholder="Search item..." bind:value={searchTerm} />
-      <!-- <div class="flex items-center border-b px-2" data-command-input-wrapper="">
-        <Search class="mr-2 size-4 shrink-0 opacity-50" />
-        <Input
-          class="
-            placeholder:text-muted-foreground
-            flex h-11 w-full rounded-md bg-transparent py-3 text-base outline-none
-            disabled:cursor-not-allowed disabled:opacity-50
-            md:text-sm
-          "
-          placeholder="Search item..."
-          bind:value={searchTerm}
-        />
-      </div> -->
-      <div class="flex flex-col items-center justify-center gap-2 p-1">
-        <Command.List
-          class="
-            scrollbar-thin scrollbar-track-sidebar scrollbar-track-rounded-full scrollbar-thumb-sidebar-accent
-            scrollbar-thumb-rounded-full
-            scrollbar-hover:scrollbar-thumb-sidebar-primary/30
-            scrollbar-active:scrollbar-thumb-sidebar-primary/60
-          "
-        >
-          <Command.Empty>No item found.</Command.Empty>
-          <Command.Group>
-            {#each activeItems as item (item.value)}
-              <Command.Item
-                value={item.label}
-                onSelect={() => {
-                  value = item.value;
-                  selectedLabel = item.label;
-                  closeAndFocusTrigger();
-                }}
-              >
-                <span class={cn('icon-[lucide--check]', value !== item.value && 'text-transparent')}> </span>
-
-                {#if itemSnippet}
-                  {@render itemSnippet(item)}
-                {:else}
-                  {item.label}
-                {/if}
-              </Command.Item>
-            {/each}
-          </Command.Group>
-        </Command.List>
-
-        <Pagination.Root count={validItems.length} perPage={itemsPerPage} bind:page>
-          {#snippet children({ pages, currentPage })}
-            <Pagination.Content>
-              <Pagination.Item>
-                <Pagination.PrevButton />
-              </Pagination.Item>
-              {#each pages as page (page.key)}
-                {#if page.type === 'ellipsis'}
-                  <Pagination.Item>
-                    <Pagination.Ellipsis />
-                  </Pagination.Item>
-                {:else}
-                  <Pagination.Item isVisible={currentPage === page.value}>
-                    <Pagination.Link {page} isActive={currentPage === page.value}>
-                      {page.value}
-                    </Pagination.Link>
-                  </Pagination.Item>
-                {/if}
-              {/each}
-              <Pagination.Item>
-                <Pagination.NextButton />
-              </Pagination.Item>
-            </Pagination.Content>
-          {/snippet}
-        </Pagination.Root>
-      </div>
-    </Command.Root>
-  </Popover.Content>
-</Popover.Root>

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

@@ -1,21 +0,0 @@
-import { type Snippet } from 'svelte';
-import type { HTMLDivAttributes } from '../../utils';
-type Props = HTMLDivAttributes & {
-    value: string;
-    total: number;
-    allItems: {
-        label: string;
-        value: string;
-    }[];
-    activeItems: {
-        label: string;
-        value: string;
-    }[];
-    itemSnippet: Snippet<[item: {
-        label: string;
-        value: string;
-    }]>;
-};
-declare const Combo: import("svelte").Component<Props, {}, "value" | "activeItems">;
-type Combo = ReturnType<typeof Combo>;
-export default Combo;

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

@@ -1,2 +0,0 @@
-import Combo from './combo.svelte';
-export { Combo };

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

@@ -1,2 +0,0 @@
-import Combo from './combo.svelte';
-export { Combo };

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

@@ -1,200 +0,0 @@
-import Fuse from 'fuse.js';
-import fuse, { type FuseResult, type IFuseOptions } from 'fuse.js';
-import { value, type Wrap } from '../utils/args';
-import { untrack } from 'svelte';
-
-// <div use:wrapper class="typeahead">
-//   <input use:input />
-
-//   {#if suggestions.length !== 0 && showSuggestions}
-//     <ol transition:slide={{ axis: 'y', duration: 100 }}>
-//       {#each suggestions as suggestion, index (suggestion.item)}
-//         <li animate:flip={{ delay: 0, duration: 200 }}>
-//           <button use:suggestionButton={suggestion}>
-//             {@html matches(suggestion)}
-//           </button>
-//         </li>
-//       {/each}
-//     </ol>
-//   {/if}
-// </div>
-
-export type Args = Wrap<{
-  onInput: (e: InputEvent) => void;
-  searchWith?: () => string;
-  initialValue: () => string;
-  onStopTyping?: (value: string) => void;
-  data: string[];
-}>;
-
-export class Typeahead {
-  // Props
-  private args: Args | null = $state(null);
-  private initialValue: string = $derived(value(this.args?.initialValue));
-  private data: string[] = $derived(value(this.args?.data));
-  private searchWith: string = $derived(value(this.args?.searchWith));
-  private onStopTyping: ((value: string) => void) | undefined = $derived(this.args?.onStopTyping);
-  private debounceDelay: number = $derived(300);
-
-  private onInput: (e: InputEvent) => void = $derived(this.args?.onInput);
-
-  // DOM elements
-  private inputE: HTMLInputElement | null = $state(null);
-  private wrapperE: HTMLDivElement | null = $state(null);
-
-  // State
-  private _value = $state('');
-  private debounceTimer: number | null = $state(null);
-
-  // Fuse
-  private fuse = $derived.by(() => {
-    const options: IFuseOptions<string> = {
-      threshold: 0.6,
-      includeMatches: true
-    };
-    // if (keys) options.keys = keys;
-
-    return new Fuse(this.data, options);
-  });
-  private _suggestions: FuseResult<string>[] = $state([]);
-  private showSuggestions: boolean = $state(false);
-
-  constructor(args: Args) {
-    this.args = args;
-
-    $effect(() => {
-      if (this.data) {
-        untrack(() => {
-          if (this.inputE) {
-            const searchResult = this.fuse.search(this.searchWith ?? this.inputE.value);
-            this._suggestions = searchResult;
-          }
-        });
-      }
-    });
-  }
-
-  get elements() {
-    return {
-      /**
-       * The input element
-       */
-      input: (node: HTMLInputElement) => {
-        this.inputE = node;
-        this.inputE.spellcheck = false;
-
-        $effect(() => {
-          this.inputE.value = this.initialValue;
-          this._value = this.initialValue;
-        });
-
-        node.oninput = (e: InputEvent) => {
-          this._value = this.inputE.value;
-          this.onInput(e);
-
-          const isSynthetic = (e as any).isSynthetic === true;
-
-          const searchResult = this.fuse.search(this.searchWith ?? this.inputE.value);
-
-          this._suggestions = searchResult;
-
-          // Don't show suggestions if the input is synthetic (ie from a click)
-          if (!isSynthetic) this.showSuggestions = true;
-
-          if (this.onStopTyping) {
-            // Clear any existing timer
-            if (this.debounceTimer !== null) {
-              clearTimeout(this.debounceTimer);
-            }
-
-            // Set a new timer
-            this.debounceTimer = setTimeout(() => {
-              if (this.onStopTyping) {
-                this.onStopTyping(this._value);
-              }
-              this.debounceTimer = null;
-            }, this.debounceDelay) as unknown as number;
-          }
-        };
-
-        this.inputE.onfocus = () => {
-          if (this.inputE) this._suggestions = this.fuse.search(this.inputE.value);
-          this.showSuggestions = true;
-        };
-      },
-
-      /**
-       * The wrapper element
-       */
-      wrapper: (node: HTMLDivElement) => {
-        this.wrapperE = node;
-        this.wrapperE.addEventListener('focusout', (event: FocusEvent) => {
-          const relatedTarget = event.relatedTarget;
-          if (!relatedTarget || !event.currentTarget.contains(relatedTarget)) {
-            this.showSuggestions = false;
-          }
-        });
-      },
-
-      /**
-       * Suggestion button
-       */
-      suggestionButton: (node: HTMLButtonElement, suggestion: FuseResult<string>) => {
-        const selectSuggestion = () => {
-          if (this.inputE) {
-            this.inputE.value = suggestion.item;
-            const e = new InputEvent('input', { bubbles: true, cancelable: true });
-            (e as any).isSynthetic = true;
-            this.inputE.dispatchEvent(e);
-          }
-
-          // Un focus so that the suggestions go away
-          if (this.wrapperE) {
-            this.wrapperE.blur();
-            const focusableChildren = this.wrapperE.querySelectorAll('button, input, textarea, select, a, [tabindex]');
-            focusableChildren.forEach((child) => child.blur());
-          }
-        };
-
-        node.onmousedown = selectSuggestion.bind(this);
-        node.onkeydown = (e) => {
-          if (e.key === 'Enter') selectSuggestion.bind(this)();
-        };
-      },
-
-      /**
-       * Produces html with matches given the 'highlight' class
-       */
-      matches: (suggestion: FuseResult<string>) => {
-        let result = '';
-        let lastIndex = 0;
-
-        const text = suggestion.item;
-        const matches = suggestion.matches?.[0];
-
-        if (!matches) return text;
-
-        for (const [start, end] of matches.indices) {
-          result += text.slice(lastIndex, start);
-          result += `<span class="bg-primary/70 rounded-xs">${text.slice(start, end + 1)}</span>`;
-          lastIndex = end + 1;
-        }
-
-        result += text.slice(lastIndex); // Add remaining unhighlighted part
-        return result;
-      }
-    };
-  }
-
-  get suggestions() {
-    return this._suggestions.length !== 0 && this.showSuggestions ? this._suggestions : undefined;
-  }
-
-  get value() {
-    return this._value;
-  }
-
-  get input() {
-    return this.inputE;
-  }
-}