lithesome 0.2.5 → 0.3.0

package/dist/components/Accordion/Accordion.svelte

@@ -6,7 +6,7 @@ export const context = () => getContext(contextName);
 
 <script>import { createUID, useActions, classProp } from "../../internal/index.js";
 import { setContext } from "svelte";
-let { children, use = [], class: klass, self, single, ...props } = $props();
+let { children, use = [], class: klass, self = $bindable(), single, ...props } = $props();
 const { uid } = createUID("accordion");
 const API = createContext(uid, single);
 const active = $derived(API.activeItems.length > 0);

package/dist/components/Accordion/AccordionButton.svelte

@@ -1,7 +1,7 @@
 <script>import { context } from "./Accordion.svelte";
 import { useActions, classProp } from "../../internal/index.js";
 import { getContext } from "svelte";
-let { children, class: klass, use = [], self, onClick, ...props } = $props();
+let { children, class: klass, use = [], self = $bindable(), onClick, ...props } = $props();
 const API = context();
 const itemId = getContext("accordionitem-id");
 const active = $derived(API.activeItems.includes(itemId));

package/dist/components/Accordion/AccordionContent.svelte

@@ -1,7 +1,7 @@
 <script>import { context } from "./Accordion.svelte";
 import { useActions, getTransition, classProp } from "../../internal/index.js";
 import { getContext } from "svelte";
-let { children, class: klass, use = [], self, transition, ...props } = $props();
+let { children, class: klass, use = [], self = $bindable(), transition, ...props } = $props();
 const API = context();
 const itemId = getContext("accordionitem-id");
 const active = $derived(API.activeItems.includes(itemId));

package/dist/components/Accordion/AccordionHeading.svelte

@@ -1,5 +1,5 @@
 <script>import { useActions, classProp } from "../../internal/index.js";
-let { children, class: klass, use = [], level = 3, self, ...props } = $props();
+let { children, class: klass, use = [], level = 3, self = $bindable(), ...props } = $props();
 </script>
 
 <div

package/dist/components/Accordion/AccordionItem.svelte

@@ -1,7 +1,7 @@
 <script>import { context } from "./Accordion.svelte";
 import { log, useActions, createUID, classProp } from "../../internal/index.js";
 import { onMount, setContext } from "svelte";
-let { children, class: klass, use = [], self, disabled = false, ...props } = $props();
+let { children, class: klass, use = [], self = $bindable(), disabled = false, ...props } = $props();
 const API = context();
 const { uid } = createUID("item");
 onMount(() => {

package/dist/components/Checkbox/Checkbox.svelte

@@ -8,8 +8,8 @@ let {
   children,
   class: klass,
   use = [],
-  self,
-  checked = false,
+  self = $bindable(),
+  checked = $bindable(false),
   required = false,
   disabled = false,
   onClick,

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

@@ -22,6 +22,7 @@ declare const __propDef: {
         contextmenu?: string | null | undefined;
         dir?: string | null | undefined;
         draggable?: import("svelte/elements").Booleanish | null | undefined;
+        elementtiming?: string | null | undefined;
         enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | null | undefined;
         hidden?: boolean | null | undefined;
         id?: string | null | undefined;

package/dist/components/Combobox/Combobox.svelte

@@ -0,0 +1,55 @@
+<script context="module">import { getContext, onMount, tick } from "svelte";
+import { createContext } from "./context.svelte.js";
+const contextName = "combobox-context";
+export const context = () => getContext(contextName);
+</script>
+
+<script generics="ValueType">import { createUID, useActions, classProp } from "../../internal/index.js";
+import { setContext } from "svelte";
+let {
+  children,
+  use = [],
+  class: klass,
+  value = $bindable(),
+  label = $bindable(),
+  touched = $bindable(),
+  self = $bindable(),
+  onChange,
+  ...props
+} = $props();
+const { uid } = createUID("combobox");
+const multiple = Array.isArray(value);
+const API = createContext(uid, multiple, {
+  onChange({ newValue, newTouched, newLabel }) {
+    if (newValue) {
+      value = newValue;
+      onChange?.({ value: newValue });
+    }
+    if (newLabel && !multiple) {
+      label = newLabel;
+      onChange?.({ label: newLabel });
+    }
+    if (typeof newTouched === "boolean")
+      touched = newTouched;
+  }
+});
+setContext(contextName, API);
+onMount(async () => {
+  await tick();
+  API.setInitialSelected(value);
+  API.close();
+  API.setMounted(true);
+});
+</script>
+
+<div
+	bind:this={self}
+	use:useActions={use}
+	id={uid()}
+	class={classProp(klass, { visible: API.visible && API.mounted })}
+	data-select=""
+	data-state={API.visible && API.mounted ? 'opened' : 'closed'}
+	{...props}
+>
+	{@render children({ visible: API.visible && API.mounted })}
+</div>

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

@@ -0,0 +1,50 @@
+import { SvelteComponent } from "svelte";
+export declare const context: () => {
+    visible: boolean;
+    hoveredIndex: number;
+    options: HTMLElement[];
+    touched: HTMLElement[];
+    dropdown: HTMLElement | null;
+    mounted: boolean;
+    selectedOptions: HTMLElement[];
+    hoveredOption: HTMLElement;
+    trigger: HTMLInputElement | null;
+    multiple: boolean;
+    open(): void;
+    close(): void;
+    toggle(): void;
+    queryElements(): void;
+    navigateOptions(action: import("../../internal/index.js").CalcIndexAction): void;
+    setHoveredOption(optionId?: string | undefined): void;
+    setSelectedOptions(): void;
+    setInitialSelected(value: unknown): Promise<void>;
+    setTrigger(node: HTMLInputElement): void;
+    setDropdown(node: HTMLElement): void;
+    setMounted(value: boolean): void;
+    setTouched(value: boolean): void;
+    uid: import("../../internal/index.js").UID;
+};
+import { type BaseProps } from '../../internal/index.js';
+declare class __sveltets_Render<ValueType> {
+    props(): BaseProps<HTMLDivElement, {
+        visible: boolean;
+    }> & {
+        value: ValueType;
+        label?: string | undefined;
+        touched?: boolean | undefined;
+        onChange?: ((payload?: {
+            value?: ValueType | undefined;
+            label?: string | undefined;
+        } | undefined) => void) | undefined;
+    };
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+}
+export type ComboboxProps<ValueType> = ReturnType<__sveltets_Render<ValueType>['props']>;
+export type ComboboxEvents<ValueType> = ReturnType<__sveltets_Render<ValueType>['events']>;
+export type ComboboxSlots<ValueType> = ReturnType<__sveltets_Render<ValueType>['slots']>;
+export default class Combobox<ValueType> extends SvelteComponent<ComboboxProps<ValueType>, ComboboxEvents<ValueType>, ComboboxSlots<ValueType>> {
+}
+export {};

package/dist/components/Combobox/ComboboxDropdown.svelte

@@ -0,0 +1,83 @@
+<script>import { context } from "./Combobox.svelte";
+import {
+  clickOutside,
+  anchorElement,
+  portal,
+  useActions,
+  getTransition,
+  classProp
+} from "../../internal/index.js";
+import { log } from "../../internal/index.js";
+import { onMount } from "svelte";
+let {
+  children,
+  transition,
+  use = [],
+  portalTarget = "body",
+  sameWidth = false,
+  class: klass,
+  self = $bindable(),
+  placement = "bottom",
+  constrainViewport = false,
+  ...props
+} = $props();
+const API = context();
+let dropdownCleanup = $state(void 0);
+const _transition = getTransition(transition);
+const attrs = $derived({
+  id: API.uid("dropdown"),
+  "aria-labelledby": API.uid("trigger"),
+  role: "listbox",
+  class: classProp(klass, { visible: API.visible }),
+  "data-comboboxdropdown": "",
+  hidden: !API.mounted || void 0
+});
+onMount(() => {
+  if (!API)
+    log.error("<ComboboxDropdown> Must be a direct child of <Combobox />");
+});
+$effect(() => {
+  if (API.visible && self)
+    API.setDropdown(self);
+});
+$effect(() => {
+  if (API.visible && API.trigger && API.dropdown) {
+    dropdownCleanup = anchorElement(API.trigger, API.dropdown, {
+      placement,
+      constrainViewport,
+      sameWidth
+    });
+  }
+  return () => {
+    dropdownCleanup?.();
+  };
+});
+</script>
+
+{#if _transition}
+	{#if API.visible}
+		<div
+			bind:this={self}
+			use:clickOutside={{ exclude: [API.trigger], callback: API.close }}
+			use:portal={portalTarget}
+			use:useActions={use}
+			in:_transition.in.fn={_transition.in.params}
+			out:_transition.out.fn={_transition.out.params}
+			{...attrs}
+			{...props}
+		>
+			{@render children({ visible: API.visible })}
+		</div>
+	{/if}
+{:else if API.visible}
+	<div
+		bind:this={self}
+		use:clickOutside={{ exclude: [API.trigger], callback: API.close }}
+		use:portal={portalTarget}
+		use:useActions={use}
+		{...attrs}
+		{...props}
+	>
+		{@render children({ visible: API.visible })}
+	</div>
+{/if}

package/dist/components/Combobox/ComboboxDropdown.svelte.d.ts

@@ -0,0 +1,33 @@
+import { SvelteComponent } from "svelte";
+import { type Transition, type BaseProps } from '../../internal/index.js';
+import type { Placement } from '@floating-ui/dom';
+declare const __propDef: {
+    props: BaseProps<HTMLDivElement, {
+        visible: boolean;
+    }> & {
+        /**
+         * The `svelte/transtion` you wish to use.
+         *
+         * @see https://lithesome.dev/docs/api#transition-prop
+         */
+        transition?: Transition | undefined;
+        /** The element to portal the dropdown menu to. */
+        portalTarget?: string | HTMLElement | undefined;
+        /** The anchor point of the dropdown relative to the trigger. */
+        placement?: Placement | undefined;
+        /** Keeps the dropdown from ever growing outside of the viewport. */
+        constrainViewport?: boolean | undefined;
+        /** Makes the dropdown the same width as the trigger. */
+        sameWidth?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ComboboxDropdownProps = typeof __propDef.props;
+export type ComboboxDropdownEvents = typeof __propDef.events;
+export type ComboboxDropdownSlots = typeof __propDef.slots;
+export default class ComboboxDropdown extends SvelteComponent<ComboboxDropdownProps, ComboboxDropdownEvents, ComboboxDropdownSlots> {
+}
+export {};

package/dist/components/Combobox/ComboboxInput.svelte

@@ -0,0 +1,82 @@
+<script>import { context } from "./Combobox.svelte";
+import {
+  useActions,
+  classProp,
+  PREVENT_KEYS,
+  KEYS
+} from "../../internal/index.js";
+import { onMount } from "svelte";
+let {
+  class: klass,
+  use = [],
+  value = $bindable(),
+  self = $bindable(),
+  disabled,
+  onClick,
+  onFocus,
+  onKeydown,
+  ...props
+} = $props();
+const API = context();
+onMount(() => {
+  if (!API || !self)
+    return;
+  API.setTrigger(self);
+});
+const handleClick = (e) => {
+  onClick?.(e);
+  if (disabled)
+    return;
+  API.toggle();
+};
+const handleKeydown = (e) => {
+  onKeydown?.(e);
+  if (disabled)
+    return;
+  const { key } = e;
+  if (!PREVENT_KEYS.includes(key)) {
+    API.setTouched(true);
+    if (!API.visible)
+      API.open();
+  }
+  if (key === KEYS.arrowUp || key === KEYS.arrowDown || key === KEYS.end || key === KEYS.home) {
+    e.preventDefault();
+    if (!API.visible)
+      API.open();
+  }
+  if (key === KEYS.home)
+    API.navigateOptions("first");
+  if (key === KEYS.end)
+    API.navigateOptions("last");
+  if (key === KEYS.arrowUp)
+    API.navigateOptions("prev");
+  if (key === KEYS.arrowDown)
+    API.navigateOptions("next");
+  if (key === KEYS.escape)
+    API.close();
+  if (key === KEYS.enter) {
+    e.preventDefault();
+    if (API.hoveredOption && API.visible) {
+      document.querySelector(`#${API.hoveredOption.id}`).click();
+      if (!API.multiple)
+        API.close();
+    } else {
+      API.open();
+    }
+  }
+  if (key === "Tab")
+    API.close();
+};
+</script>
+
+<input
+	type="text"
+	bind:this={self}
+	use:useActions={use}
+	id={API.uid('input')}
+	class={classProp(klass, { visible: API.visible })}
+	onclick={handleClick}
+	onkeydown={handleKeydown}
+	bind:value
+	{...props}
+/>

package/dist/components/Combobox/ComboboxInput.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+import { type BasePropsNoChildren, type Handler } from '../../internal/index.js';
+declare const __propDef: {
+    props: BasePropsNoChildren<HTMLInputElement, {
+        visible: boolean;
+    }> & {
+        value: string;
+        disabled?: boolean | undefined;
+        onClick?: Handler<MouseEvent, HTMLInputElement> | undefined;
+        onFocus?: Handler<FocusEvent, HTMLInputElement> | undefined;
+        onKeydown?: Handler<KeyboardEvent, HTMLInputElement> | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ComboboxInputProps = typeof __propDef.props;
+export type ComboboxInputEvents = typeof __propDef.events;
+export type ComboboxInputSlots = typeof __propDef.slots;
+export default class ComboboxInput extends SvelteComponent<ComboboxInputProps, ComboboxInputEvents, ComboboxInputSlots> {
+}
+export {};

package/dist/components/Combobox/ComboboxOption.svelte

@@ -0,0 +1,75 @@
+<script>import { context } from "./Combobox.svelte";
+import {
+  useActions,
+  classProp,
+  isBrowser
+} from "../../internal/index.js";
+import { createUID } from "../../internal/index.js";
+import { onMount, tick } from "svelte";
+let {
+  children,
+  class: klass,
+  use = [],
+  value,
+  label: labelProp,
+  self = $bindable(),
+  disabled,
+  onClick,
+  onFocus,
+  onMouseenter,
+  ...props
+} = $props();
+let optionEl;
+const API = context();
+const { uid } = createUID("item");
+const hovered = $derived(API.hoveredOption?.id === uid());
+const selected = $derived(!!API.selectedOptions.find((el) => el.dataset.value === value));
+const label = $derived(labelProp || isBrowser && self ? self?.textContent?.trim() : "");
+const handleClick = (e) => {
+  onClick?.(e);
+  if (!disabled) {
+    API.setSelectedOptions();
+  }
+};
+const handleFocus = (e) => {
+  onFocus?.(e);
+};
+const handleMouseover = (e) => {
+  onMouseenter?.(e);
+  if (!disabled)
+    API.setHoveredOption(uid());
+};
+onMount(() => {
+  API.queryElements();
+  return async () => {
+    if (!API.visible)
+      return;
+    await tick();
+    API.queryElements();
+  };
+});
+</script>
+
+<button
+	bind:this={self}
+	bind:this={optionEl}
+	use:useActions={use}
+	id={uid()}
+	class={classProp(klass, { hovered, selected })}
+	type="button"
+	{disabled}
+	role="option"
+	tabindex="0"
+	aria-selected={selected}
+	data-hovered={hovered ? '' : undefined}
+	data-selected={selected ? '' : undefined}
+	data-comboboxoption=""
+	data-value={value}
+	data-label={label}
+	onmouseover={handleMouseover}
+	onfocus={handleFocus}
+	onclick={handleClick}
+	{...props}
+>
+	{@render children({ hovered, selected })}
+</button>

package/dist/components/Combobox/ComboboxOption.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponent } from "svelte";
+import { type BaseProps, type JsonValue, type Handler } from '../../internal/index.js';
+declare const __propDef: {
+    props: BaseProps<HTMLButtonElement | HTMLAnchorElement, {
+        hovered: boolean;
+        selected: boolean;
+    }> & {
+        value: JsonValue;
+        disabled?: boolean | undefined;
+        label?: string | undefined;
+        onClick?: Handler<MouseEvent, HTMLButtonElement | HTMLAnchorElement> | undefined;
+        onFocus?: Handler<FocusEvent, HTMLButtonElement | HTMLAnchorElement> | undefined;
+        onMouseenter?: Handler<MouseEvent, HTMLButtonElement | HTMLAnchorElement> | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ComboboxOptionProps = typeof __propDef.props;
+export type ComboboxOptionEvents = typeof __propDef.events;
+export type ComboboxOptionSlots = typeof __propDef.slots;
+export default class ComboboxOption extends SvelteComponent<ComboboxOptionProps, ComboboxOptionEvents, ComboboxOptionSlots> {
+}
+export {};

package/dist/components/Combobox/context.svelte.d.ts

@@ -0,0 +1,40 @@
+import { type CalcIndexAction, type UID, type JsonValue } from '../../internal/index.js';
+export interface Option {
+    value: JsonValue;
+    label: string;
+    id: string;
+    disabled?: boolean;
+}
+interface Hooks<ValueType> {
+    onChange: (values: {
+        newValue?: ValueType;
+        newTouched?: boolean;
+        newLabel?: string;
+    }) => void;
+}
+export declare const createContext: <ValueType>(uid: UID, multiple: boolean | undefined, hooks: Hooks<ValueType>) => {
+    visible: boolean;
+    hoveredIndex: number;
+    options: HTMLElement[];
+    touched: HTMLElement[];
+    dropdown: HTMLElement | null;
+    mounted: boolean;
+    selectedOptions: HTMLElement[];
+    hoveredOption: HTMLElement;
+    trigger: HTMLInputElement | null;
+    multiple: boolean;
+    open(): void;
+    close(): void;
+    toggle(): void;
+    queryElements(): void;
+    navigateOptions(action: CalcIndexAction): void;
+    setHoveredOption(optionId?: string): void;
+    setSelectedOptions(): void;
+    setInitialSelected(value: ValueType): Promise<void>;
+    setTrigger(node: HTMLInputElement): void;
+    setDropdown(node: HTMLElement): void;
+    setMounted(value: boolean): void;
+    setTouched(value: boolean): void;
+    uid: UID;
+};
+export {};

package/dist/components/Combobox/context.svelte.js

@@ -0,0 +1,136 @@
+import { calculateIndex, disableScroll, removeDisabledElements } from '../../internal/index.js';
+import { tick } from 'svelte';
+export const createContext = (uid, multiple = false, hooks) => {
+    let visible = $state(true);
+    let hoveredIndex = $state(-1);
+    let options = $state([]);
+    let trigger = $state(null);
+    let dropdown = $state(null);
+    let selectedOptions = $state([]);
+    let mounted = $state(false);
+    let touched = $state(false);
+    const hoveredOption = $derived(options[hoveredIndex]);
+    $effect(() => {
+        disableScroll(visible && !document.body.style.overflow);
+    });
+    $effect(() => {
+        if (!visible || !options || hoveredIndex > options.length - 1) {
+            hoveredIndex = -1;
+        }
+    });
+    $effect(() => {
+        if (visible) {
+            tick().then(() => {
+                hoveredIndex = options.findIndex((option) => option.ariaSelected === 'true');
+            });
+        }
+        else {
+            options = [];
+            touched = false;
+        }
+    });
+    $effect(() => {
+        if (!visible)
+            return;
+        hooks.onChange({ newTouched: touched });
+    });
+    const functions = {
+        open() {
+            visible = true;
+        },
+        close() {
+            visible = false;
+        },
+        toggle() {
+            visible = !visible;
+        },
+        queryElements() {
+            const elements = removeDisabledElements(`#${uid('dropdown')} [data-comboboxoption]`);
+            if (!elements)
+                return;
+            options = elements;
+        },
+        navigateOptions(action) {
+            hoveredIndex = calculateIndex(action, options, hoveredIndex);
+            document.querySelector(`#${hoveredOption?.id}`)?.scrollIntoView({ block: 'nearest' });
+        },
+        setHoveredOption(optionId) {
+            if (!optionId)
+                return;
+            hoveredIndex = options.findIndex((el) => el.id === optionId);
+        },
+        setSelectedOptions() {
+            if (!hoveredOption)
+                return;
+            if (multiple) {
+                if (selectedOptions.find((el) => el.dataset.value === hoveredOption.dataset.value)) {
+                    selectedOptions = selectedOptions.filter((el) => el.dataset.value !== hoveredOption.dataset.value);
+                }
+                else {
+                    selectedOptions = [...selectedOptions, hoveredOption];
+                }
+            }
+            else {
+                selectedOptions[0] = hoveredOption;
+            }
+            if (!multiple) {
+                functions.close();
+            }
+            const value = multiple ? selectedOptions.map((el) => el.dataset.value) : selectedOptions[0].dataset.value;
+            const label = multiple ? '' : selectedOptions[0].dataset.label || '';
+            hooks.onChange({ newValue: value, newLabel: label });
+        },
+        async setInitialSelected(value) {
+            selectedOptions = 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;
+            });
+        },
+        setTrigger(node) {
+            trigger = node;
+        },
+        setDropdown(node) {
+            dropdown = node;
+        },
+        setMounted(value) {
+            mounted = value;
+        },
+        setTouched(value) {
+            touched = value;
+        }
+    };
+    return {
+        uid,
+        ...functions,
+        get visible() {
+            return visible;
+        },
+        get hoveredIndex() {
+            return hoveredIndex;
+        },
+        get options() {
+            return options;
+        },
+        get touched() {
+            return options;
+        },
+        get dropdown() {
+            return dropdown;
+        },
+        get mounted() {
+            return mounted;
+        },
+        get selectedOptions() {
+            return selectedOptions;
+        },
+        get hoveredOption() {
+            return hoveredOption;
+        },
+        get trigger() {
+            return trigger;
+        },
+        multiple
+    };
+};

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

@@ -0,0 +1,4 @@
+export { default as Combobox } from './Combobox.svelte';
+export { default as ComboboxDropdown } from './ComboboxDropdown.svelte';
+export { default as ComboboxInput } from './ComboboxInput.svelte';
+export { default as ComboboxOption } from './ComboboxOption.svelte';