lithesome 0.23.7 → 0.24.0

package/dist/components/select/Select.svelte

@@ -14,8 +14,8 @@
 		disabled = $bindable(false),
 		portalTarget = 'body',
 		floatingConfig = {},
-		value = $bindable(),
-		multiple = false,
+		value = $bindable(null!),
+		unselectable = false,
 		onValueChanged
 	}: SelectProps = $props();
 
@@ -40,7 +40,7 @@
 		),
 		portalTarget: stateValue(() => portalTarget),
 		floatingConfig: stateValue(() => floatingConfig),
-		multiple: stateValue(() => multiple)
+		unselectable: stateValue(() => unselectable)
 	});
 </script>
 

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

@@ -1,4 +1,4 @@
 import type { SelectProps } from '../../types/index.js';
-declare const Select: import("svelte").Component<SelectProps<any>, {}, "disabled" | "visible" | "value">;
+declare const Select: import("svelte").Component<SelectProps, {}, "disabled" | "visible" | "value">;
 type Select = ReturnType<typeof Select>;
 export default Select;

package/dist/components/select/SelectValue.svelte

@@ -9,9 +9,11 @@
 	let {
 		id = parseId(uid),
 		ref = $bindable(),
-		placeholder = $bindable(''),
+		placeholder = $bindable('Select an option...'),
+		children,
+		custom,
 		...props
-	}: SelectValueProps & Record<string, any> = $props();
+	}: SelectValueProps<typeof ctx.props> & Record<string, any> = $props();
 
 	let ctx = useSelectValue({
 		id: stateValue(() => id),
@@ -20,6 +22,6 @@
 	});
 </script>
 
-<Element bind:ref {ctx} {...props} as="span">
-	{ctx.label}
+<Element bind:ref {custom} {ctx} {...props} as="span">
+	{ctx.state.placeholderVisible ? placeholder : ctx.state.selectedLabels.join(', ')}
 </Element>

package/dist/components/select/SelectValue.svelte.d.ts

@@ -1,5 +1,8 @@
 import type { SelectValueProps } from '../../types/index.js';
-type $$ComponentProps = SelectValueProps & Record<string, any>;
-declare const SelectValue: import("svelte").Component<$$ComponentProps, {}, "ref" | "placeholder">;
+declare const SelectValue: import("svelte").Component<SelectValueProps<{
+    id: string;
+    "data-select-value": string;
+    'data-placeholder': true | undefined;
+}> & Record<string, any>, {}, "ref" | "placeholder">;
 type SelectValue = ReturnType<typeof SelectValue>;
 export default SelectValue;

package/dist/components/select/state.svelte.d.ts

@@ -7,10 +7,12 @@ declare class SelectRoot extends Floating {
     $$: RootProps;
     hoveredIndex: number;
     options: HTMLElement[];
-    selectedOptions: HTMLElement[];
     sharedIds: SvelteMap<"content" | "trigger", string>;
     mounted: boolean;
+    searchable: boolean;
+    serachTerm: string;
     HoveredOption: HTMLElement | undefined;
+    SelectedOptions: HTMLElement[];
     constructor(props: RootProps);
     /**
      * Toggle the visible state of the content
@@ -25,10 +27,6 @@ declare class SelectRoot extends Floating {
      * and reset variables to reduce duplicate entries.
      */
     close: () => void;
-    /**
-     * Tells the components that checks have been completed, render as normal.
-     */
-    doneMounting: () => void;
     /**
      * Get all non-disabled options from the content.
      */
@@ -38,10 +36,6 @@ declare class SelectRoot extends Floating {
      * @param value The value to search for.
      */
     getElementByValue: (value: JsonValue) => HTMLElement | null;
-    /**
-     * Get either the hovered or first selected option id.
-     */
-    getHoveredOrFirstSelectedId: () => Promise<string | null>;
     /**
      * Append the option to the parent array, used for keeping track of options.
      * @param value The value of the option. This must be unique.
@@ -64,10 +58,6 @@ declare class SelectRoot extends Floating {
      * Handles if singular or mulitple values.
      */
     setSelected: () => void;
-    /**
-     * Sets the trigger label to the selected value, only if it's found in the options array.
-     */
-    setInitialSelected: () => Promise<void>;
     state: SelectState;
 }
 type TriggerProps = GetInternalProps<SelectTriggerProps>;
@@ -127,7 +117,6 @@ declare class SelectOption {
     _root: SelectRoot;
     Hovered: boolean;
     Selected: boolean;
-    Label: string;
     constructor(root: SelectRoot, props: OptionProps);
     props: {
         id: string;
@@ -148,7 +137,6 @@ declare class SelectValue {
     _root: SelectRoot;
     PlaceholderVisible: boolean;
     constructor(root: SelectRoot, props: ValueProps);
-    label: string;
     props: {
         id: string;
         "data-select-value": string;

package/dist/components/select/state.svelte.js

@@ -3,28 +3,48 @@ import { SvelteMap } from 'svelte/reactivity';
 import { outside } from '../../attachments/outside.js';
 import { portal } from '../../attachments/portal.js';
 import { addEvents, attach, buildContext, calculateIndex, createAttributes, floating, Floating, KEYS, removeDisabledElements, visuallyHidden } from '../../internals/index.js';
-const { attrs, selectors } = createAttributes('select', ['root', 'trigger', 'content', 'arrow', 'option', 'value']);
+const { attrs, selectors } = createAttributes('select', [
+    'root',
+    'trigger',
+    'content',
+    'arrow',
+    'option',
+    'value',
+    'search'
+]);
 class SelectRoot extends Floating {
     $$;
     hoveredIndex = $state(-1);
     options = $state([]);
-    selectedOptions = $state([]);
     sharedIds = new SvelteMap();
     mounted = $state(false);
+    searchable = $state(false);
+    serachTerm = $state('');
     HoveredOption = $derived.by(() => this.options[this.hoveredIndex] || undefined);
+    SelectedOptions = $derived(this.options.filter((opt) => {
+        if (!opt.dataset.value)
+            return false;
+        return Array.isArray(this.$$.value.val)
+            ? this.$$.value.val.includes(opt.dataset.value)
+            : this.$$.value.val === opt.dataset.value;
+    }));
     constructor(props) {
         super();
         this.$$ = props;
-        if (this.$$.value.val)
-            this.setInitialSelected();
-        else
-            this.doneMounting();
+        onMount(async () => {
+            await tick();
+            this.mounted = true;
+            this.$$.visible.val = false;
+        });
     }
     /**
      * Toggle the visible state of the content
      */
     toggle = () => {
-        this.$$.visible.val = !this.$$.visible.val;
+        if (this.$$.visible.val)
+            this.close();
+        else
+            this.open();
     };
     /**
      * Set the visible state of the content to true
@@ -38,16 +58,8 @@ class SelectRoot extends Floating {
      */
     close = () => {
         this.$$.visible.val = false;
-        this.options = [];
         this.hoveredIndex = -1;
     };
-    /**
-     * Tells the components that checks have been completed, render as normal.
-     */
-    doneMounting = () => {
-        this.mounted = true;
-        this.$$.visible.val = false;
-    };
     /**
      * Get all non-disabled options from the content.
      */
@@ -63,14 +75,6 @@ class SelectRoot extends Floating {
     getElementByValue = (value) => {
         return document.querySelector(`#${this.sharedIds.get('content')} ${selectors.option}[data-value="${value}"]`);
     };
-    /**
-     * Get either the hovered or first selected option id.
-     */
-    getHoveredOrFirstSelectedId = async () => {
-        await tick();
-        const selectedOption = this.HoveredOption || this.selectedOptions[0];
-        return selectedOption.id || null;
-    };
     /**
      * Append the option to the parent array, used for keeping track of options.
      * @param value The value of the option. This must be unique.
@@ -103,38 +107,22 @@ class SelectRoot extends Floating {
      * Handles if singular or mulitple values.
      */
     setSelected = () => {
-        if (!this.HoveredOption)
+        if (!this.HoveredOption || !this.HoveredOption.dataset.value)
             return;
-        if (this.$$.multiple.val) {
-            if (this.selectedOptions.find((el) => el.dataset.value === this.HoveredOption?.dataset.value)) {
-                this.selectedOptions = this.selectedOptions.filter((el) => el.dataset.value !== this.HoveredOption?.dataset.value);
-            }
-            else {
-                this.selectedOptions.push(this.HoveredOption);
-            }
+        const newVal = this.HoveredOption.dataset.value;
+        if (Array.isArray(this.$$.value.val)) {
+            if (this.$$.value.val.includes(newVal))
+                this.$$.value.val = this.$$.value.val.filter((el) => el !== newVal);
+            else
+                this.$$.value.val.push(newVal);
         }
         else {
-            this.selectedOptions[0] = this.HoveredOption;
+            if (this.$$.unselectable.val && this.$$.value.val === newVal)
+                this.$$.value.val = '';
+            else
+                this.$$.value.val = newVal;
+            this.close();
         }
-        if (!this.$$.multiple.val)
-            this.$$.visible.val = false;
-        this.$$.value.val = this.$$.multiple.val
-            ? this.selectedOptions.map((el) => el.dataset.value)
-            : this.selectedOptions[0].dataset.value;
-    };
-    /**
-     * Sets the trigger label to the selected value, only if it's found in the options array.
-     */
-    setInitialSelected = async () => {
-        await tick();
-        const value = this.$$.value.val;
-        this.selectedOptions = this.options.filter((el) => {
-            if (!Array.isArray(value) && el.dataset.value === value)
-                return el;
-            else if (Array.isArray(value) && value.includes(el.dataset.value))
-                return el;
-        });
-        this.doneMounting();
     };
     state = $derived.by(() => ({
         visible: this.$$.visible.val
@@ -158,18 +146,17 @@ class SelectTrigger {
         ...attach((node) => {
             this._root.trigger = node;
             // Such a hacky way, but it works :\
-            if (this._root.HoveredOption || this._root.selectedOptions[0]) {
-                tick().then(async () => {
+            if (this._root.HoveredOption || this._root.SelectedOptions[0]) {
+                tick().then(() => {
                     if (this._root.$$.visible.val) {
-                        const id = await this._root.getHoveredOrFirstSelectedId();
+                        const { id } = this._root.HoveredOption || this._root.SelectedOptions[0];
                         if (id)
                             node.setAttribute('aria-activedescendant', id);
                     }
-                    else {
-                        node.removeAttribute('aria-activedescendant');
-                    }
                 });
             }
+            if (!this._root.$$.visible.val)
+                node.removeAttribute('aria-activedescendant');
             return addEvents(node, {
                 click: () => {
                     if (this._root.$$.disabled.val)
@@ -194,7 +181,7 @@ class SelectTrigger {
                         e.preventDefault();
                         if (this._root.HoveredOption && this._root.$$.visible.val) {
                             this._root.HoveredOption?.click();
-                            if (!this._root.$$.multiple.val)
+                            if (!Array.isArray(this._root.$$.value.val))
                                 this._root.close();
                         }
                         else {
@@ -218,14 +205,17 @@ class SelectContent {
         this._root = root;
         this.$$ = props;
         this._root.sharedIds.set('content', this.$$.id.val);
+        // Get element references but wait for label to be populated.
         $effect(() => {
-            // Get element references
-            if (this._root.$$.visible.val)
-                this._root.getAvilableOptions();
+            if (this._root.$$.visible.val) {
+                tick().then(() => {
+                    this._root.getAvilableOptions();
+                });
+            }
         });
+        // Set first selected value as highlighted option
         $effect(() => {
-            // Set first selected value as highlighted option
-            if (this._root.$$.visible.val && this._root.selectedOptions.length && !this._root.HoveredOption) {
+            if (this._root.$$.visible.val && this._root.SelectedOptions.length && !this._root.HoveredOption) {
                 this._root.hoveredIndex = this._root.options.findIndex((el) => el.dataset.selected === 'true');
             }
         });
@@ -275,8 +265,7 @@ class SelectOption {
     $$;
     _root;
     Hovered = $derived.by(() => this._root.HoveredOption?.dataset.value === this.$$.value.val);
-    Selected = $derived.by(() => !!this._root.selectedOptions.find((el) => el.dataset.value === this.$$.value.val));
-    Label = $derived.by(() => this.$$.label.val);
+    Selected = $derived.by(() => !!this._root.SelectedOptions.find((el) => el.dataset.value === this.$$.value.val));
     constructor(root, props) {
         this._root = root;
         this.$$ = props;
@@ -290,11 +279,8 @@ class SelectOption {
         tabindex: 0,
         'aria-selected': this.Selected,
         'data-value': this.$$.value.val,
-        'data-label': this.Label,
+        'data-label': this.$$.ref.val && !this.$$.label.val ? this.$$.ref.val.textContent.trim() : this.$$.label.val,
         ...attach((node) => {
-            if (!this.$$.label.val && this.$$.ref.val) {
-                this.Label = this.$$.ref.val.textContent.trim();
-            }
             // Set the hovered index to the active item, if that item is "selected".
             if (this._root.$$.value.val === this.$$.value.val) {
                 this._root.hoveredIndex = this._root.options.findIndex((el) => el.dataset.value === this.$$.value.val);
@@ -321,14 +307,11 @@ class SelectOption {
 class SelectValue {
     $$;
     _root;
-    PlaceholderVisible = $derived.by(() => this._root.selectedOptions.length === 0);
+    PlaceholderVisible = $derived.by(() => !this._root.$$.value.val.length);
     constructor(root, props) {
         this._root = root;
         this.$$ = props;
     }
-    label = $derived.by(() => this.PlaceholderVisible
-        ? this.$$.placeholder.val
-        : this._root.selectedOptions.map((el) => el.dataset.label).join(','));
     props = $derived.by(() => ({
         id: this.$$.id.val,
         [attrs.value]: '',
@@ -336,7 +319,8 @@ class SelectValue {
     }));
     state = $derived.by(() => ({
         visible: this._root.$$.visible.val,
-        placeholderVisible: this.PlaceholderVisible
+        placeholderVisible: this.PlaceholderVisible,
+        selectedLabels: this._root.SelectedOptions.map((el) => el.dataset.label)
     }));
 }
 //

package/dist/types/components/select.d.ts

@@ -1,20 +1,22 @@
-import type { FloatingContent, Props, PropsNoChildren, PropsNoRender } from '../../internals/index.js';
-export interface SelectProps<V extends string | string[] = any> extends PropsNoRender<SelectState>, FloatingContent {
+import type { FloatingContent, Props, PropsNoRender } from '../../internals/index.js';
+export interface SelectProps extends PropsNoRender<SelectState>, FloatingContent {
     /**
      * The currently selected option(s).
      *
      * ### `$bindable`
      */
-    value?: V;
+    value?: string | string[];
     /**
-     * Allows multiple options to be selected at once.
+     * Allows a non-array value to be unselected.
+     *
+     * @default false
      */
-    multiple?: boolean;
+    unselectable?: boolean;
     /**
      * Fires whenever the `value` prop changes.
      * @param value The new value
      */
-    onValueChanged?: (value: V) => void;
+    onValueChanged?: (value: string | string[]) => void;
 }
 export interface SelectState {
     /**
@@ -74,7 +76,7 @@ export interface SelectOptionState {
      */
     selected: boolean;
 }
-export interface SelectValueProps extends PropsNoChildren<HTMLSpanElement, SelectValueState> {
+export interface SelectValueProps<P = any> extends Props<HTMLSpanElement, P, SelectValueState> {
     /**
      * The value displayed when no option(s) is selected.
      */
@@ -89,4 +91,8 @@ export interface SelectValueState {
      * True if no options are selected.
      */
     placeholderVisible: boolean;
+    /**
+     * The currently selected options.
+     */
+    selectedLabels: string[];
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "lithesome",
-	"version": "0.23.7",
+	"version": "0.24.0",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "bun --bun vite build && npm run prepack",