@spaethtech/svelte-ui 0.1.10

package/dist/components/Select/Select.svelte

@@ -0,0 +1,278 @@
+<script lang="ts">
+  import { slide } from 'svelte/transition';
+  import type { Snippet } from 'svelte';
+  import { faChevronDown } from '@fortawesome/free-solid-svg-icons';
+  import Input from '../Input/Input.svelte';
+  import List from '../List/List.svelte';
+
+  type Option = Record<string, any> & {
+    value: string;
+    label: string;
+  };
+
+  let {
+    options = [],
+    value = $bindable(""),
+    multiSelect = false,
+    placeholder = "Select an option...",
+    maxVisibleItems = 10,
+    itemHeight = 32,
+    autoAdvance = false,
+    class: className = "",
+    inputClass = "",
+    dropdownClass = "",
+    itemClass = "",
+    itemSnippet,
+    methods = $bindable(),
+    // API integration props
+    url,
+    searchParam,
+    transform,
+    debounceMs = 300,
+    maxResults,
+    headers = {},
+    searchTerm = $bindable(""),
+    onError,
+    onLoadStart,
+    onLoadEnd,
+    onSelection,
+    disabled = false,
+    ...restProps
+  }: {
+    options?: Option[];
+    value: string | string[];
+    multiSelect?: boolean;
+    placeholder?: string;
+    maxVisibleItems?: number;
+    itemHeight?: number;
+    autoAdvance?: boolean;
+    class?: string;
+    inputClass?: string;
+    dropdownClass?: string;
+    itemClass?: string;
+    itemSnippet?: Snippet<[Option, number, boolean, boolean]>; // option, index, isSelected, isFocused
+    methods?: any;
+    // API integration
+    url?: string;
+    searchParam?: string;
+    transform?: (apiResponse: any) => Option[];
+    debounceMs?: number;
+    maxResults?: number;
+    headers?: Record<string, string>;
+    searchTerm?: string;
+    onError?: (error: Error) => void;
+    onLoadStart?: () => void;
+    onLoadEnd?: () => void;
+    onSelection?: (option: Option) => void;
+    disabled?: boolean;
+  } & Record<string, any> = $props();
+
+  let isOpen = $state(false);
+  let inputElement = $state<HTMLInputElement>();
+  let listElement = $state<any>();
+
+  // Get display text for selected value
+  const selectedLabel = $derived(() => {
+    if (multiSelect && Array.isArray(value)) {
+      if (value.length === 0) return "";
+      if (value.length === 1) {
+        const selectedOption = options.find(option => option.value === value[0]);
+        return selectedOption?.label || "";
+      }
+      return `${value.length} items selected`;
+    } else {
+      const selectedOption = options.find(option => option.value === value);
+      return selectedOption?.label || "";
+    }
+  });
+
+  // Global dropdown manager - only one dropdown open at a time
+  let dropdownId = Math.random().toString(36).substring(2, 9);
+  let zIndex = $state(50);
+
+  function toggleDropdown(event?: MouseEvent | KeyboardEvent) {
+    event?.stopPropagation();
+    event?.preventDefault(); // Prevent text selection
+    if (disabled) return;
+    
+    isOpen = !isOpen;
+    
+    if (isOpen) {
+      // Set focus to the selected item in the list
+      setTimeout(() => {
+        if (listElement?.focus) {
+          listElement.focus();
+        }
+      }, 50);
+    }
+  }
+
+  function handleInputMouseDown(event: MouseEvent) {
+    event.preventDefault(); // Prevent text selection on mousedown
+    toggleDropdown(event);
+  }
+
+  function handleInputDoubleClick(event: MouseEvent) {
+    event.preventDefault(); // Prevent text selection on double-click
+    event.stopPropagation();
+  }
+
+  function handleSelection(option: Option) {
+    // In single-select mode, close dropdown. In multi-select mode, keep it open
+    if (!multiSelect) {
+      isOpen = false;
+    }
+    
+    if (onSelection) {
+      onSelection(option);
+    }
+    
+    if (!multiSelect && autoAdvance) {
+      // Move to next focusable element (only in single-select mode)
+      setTimeout(() => {
+        if (inputElement) {
+          const focusableElements = document.querySelectorAll(
+            'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+          );
+          const currentIndex = Array.from(focusableElements).indexOf(inputElement);
+          const nextElement = focusableElements[currentIndex + 1] as HTMLElement;
+          nextElement?.focus();
+        }
+      }, 50);
+    } else if (!multiSelect) {
+      inputElement?.focus();
+    }
+    // In multi-select mode, keep focus on the list for continued selection
+  }
+
+  function handleKeydown(event: KeyboardEvent) {
+    if (event.key === 'Escape') {
+      isOpen = false;
+      inputElement?.focus();
+    } else if (event.key === 'Enter') {
+      if (isOpen) {
+        // Close dropdown and allow Enter to propagate for form submission
+        isOpen = false;
+        inputElement?.focus();
+      } else {
+        // Open dropdown when closed
+        event.preventDefault();
+        toggleDropdown(event);
+      }
+    } else if (event.key === ' ') {
+      event.preventDefault();
+      toggleDropdown(event);
+    } else if (event.key === 'ArrowDown' && !isOpen) {
+      event.preventDefault();
+      isOpen = true;
+    }
+  }
+
+  // Expose methods to parent
+  $effect(() => {
+    methods = {
+      openDropdown: () => {
+        isOpen = true;
+        setTimeout(() => {
+          if (listElement?.focus) {
+            listElement.focus();
+          }
+        }, 50);
+      }
+    };
+  });
+
+  // Close dropdown when clicking outside or when another dropdown opens
+  $effect(() => {
+    if (isOpen) {
+      // Increment z-index for newly opened dropdown
+      zIndex = 50 + Date.now() % 1000;
+      
+      // Set this as the active dropdown
+      document.dispatchEvent(new CustomEvent('dropdown-opened', { detail: { id: dropdownId } }));
+      
+      const handleClickOutside = (event: MouseEvent) => {
+        const target = event.target as Element;
+        if (!target.closest('.select-container')) {
+          isOpen = false;
+        }
+      };
+
+      const handleOtherDropdownOpen = (event: CustomEvent) => {
+        if (event.detail.id !== dropdownId) {
+          isOpen = false;
+        }
+      };
+
+      document.addEventListener('click', handleClickOutside);
+      document.addEventListener('dropdown-opened', handleOtherDropdownOpen as EventListener);
+      
+      return () => {
+        document.removeEventListener('click', handleClickOutside);
+        document.removeEventListener('dropdown-opened', handleOtherDropdownOpen as EventListener);
+      };
+    }
+  });
+</script>
+
+<div class="relative select-container {className}">
+  <Input
+    bind:element={inputElement}
+    value={selectedLabel()}
+    {placeholder}
+    readonly={true}
+    icon={faChevronDown}
+    iconPosition="right"
+    iconClickable={true}
+    onIconClick={toggleDropdown}
+    onmousedown={handleInputMouseDown}
+    ondblclick={handleInputDoubleClick}
+    onkeydown={handleKeydown}
+    {disabled}
+    class={inputClass}
+    inputClass={disabled ? "!cursor-default select-none" : "!cursor-pointer select-none"}
+    {...restProps}
+  />
+
+  <!-- Always render List to maintain cache, show/hide with CSS -->
+  <div 
+    class="absolute w-full {isOpen ? '' : 'opacity-0 pointer-events-none'}"
+    style="z-index: {isOpen ? zIndex : -1}; top: calc(100% + 0.25rem);"
+  >
+    <List
+      bind:this={listElement}
+      {options}
+      bind:value
+      {multiSelect}
+      {maxVisibleItems}
+      {itemHeight}
+      {itemSnippet}
+      onSelection={handleSelection}
+      class={dropdownClass}
+      {itemClass}
+      {url}
+      {searchParam}
+      {transform}
+      {debounceMs}
+      {maxResults}
+      {headers}
+      {searchTerm}
+      {onError}
+      {onLoadStart}
+      {onLoadEnd}
+    />
+  </div>
+
+  <!-- Transition effect overlay -->
+  {#if isOpen}
+    <div 
+      class="absolute w-full pointer-events-none"
+      style="z-index: {zIndex + 1}; top: calc(100% + 0.25rem);"
+      transition:slide={{ duration: 200 }}
+    >
+      <div style="height: {maxVisibleItems * itemHeight}px; opacity: 0;">
+        <!-- Invisible placeholder for slide transition -->
+      </div>
+    </div>
+  {/if}
+</div>

package/dist/components/Select/Select.svelte.d.ts

@@ -0,0 +1,35 @@
+import type { Snippet } from 'svelte';
+type Option = Record<string, any> & {
+    value: string;
+    label: string;
+};
+type $$ComponentProps = {
+    options?: Option[];
+    value: string | string[];
+    multiSelect?: boolean;
+    placeholder?: string;
+    maxVisibleItems?: number;
+    itemHeight?: number;
+    autoAdvance?: boolean;
+    class?: string;
+    inputClass?: string;
+    dropdownClass?: string;
+    itemClass?: string;
+    itemSnippet?: Snippet<[Option, number, boolean, boolean]>;
+    methods?: any;
+    url?: string;
+    searchParam?: string;
+    transform?: (apiResponse: any) => Option[];
+    debounceMs?: number;
+    maxResults?: number;
+    headers?: Record<string, string>;
+    searchTerm?: string;
+    onError?: (error: Error) => void;
+    onLoadStart?: () => void;
+    onLoadEnd?: () => void;
+    onSelection?: (option: Option) => void;
+    disabled?: boolean;
+} & Record<string, any>;
+declare const Select: import("svelte").Component<$$ComponentProps, {}, "value" | "searchTerm" | "methods">;
+type Select = ReturnType<typeof Select>;
+export default Select;

package/dist/components/Select/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Select.svelte';

package/dist/components/Select/index.js

@@ -0,0 +1 @@
+export { default } from './Select.svelte';