@websline/system-components 1.0.11 → 1.0.13

package/dist/components/molecules/tagSelector/TagSelector.svelte

@@ -0,0 +1,241 @@
+<script>
+	import { getContext } from "svelte";
+	import Dropdown from "./Dropdown.svelte";
+	import ValueList from "./ValueList.svelte";
+	import { tagSelectorVariants } from "./tagSelector.variants.js";
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {boolean} [autofocus=false] Whether the input should be autofocused on mount
+	 * @property {string} [class=""] Additional CSS classes to apply to the component
+	 * @property {boolean} [disabled=false] Whether the component is disabled
+	 * @property {string} [id=""] The ID of the input element
+	 * @property {string} [labelCreate=""] The label for the create new tag option
+	 * @property {string} [name] The name of the input, used for form submission
+	 * @property {Array<{id: string | number, label: string}>} [options=[]] The available tag options
+	 * @property {string} [placeholder=""] The placeholder text for the input
+	 * @property {Array<string | number>} [value=[]] The currently selected tags, bound to the component
+	 */
+
+	/** @type {Props} */
+	let {
+		autofocus = false,
+		class: className = "",
+		disabled = false,
+		id = "",
+		labelCreate = "",
+		name,
+		options = [],
+		placeholder = "",
+		value = $bindable([]),
+		...rest
+	} = $props();
+
+	let store = getContext("form-field-store");
+
+	let localValues = $derived.by(() => {
+		if (store) {
+			return {
+				...store(),
+			};
+		}
+
+		return {
+			disabled,
+			id,
+		};
+	});
+
+	let open = $state(false);
+	let query = $state("");
+	let highlighted = $state(-1);
+
+	let inputRef = $state();
+	let rootRef = $state();
+
+	let normalized = $derived(query.trim().toLowerCase());
+
+	let filtered = $derived(
+		options.filter((i) => i.label.toLowerCase().includes(normalized)),
+	);
+
+	let showCreate = $derived(
+		normalized.length > 0 &&
+			!filtered.some((i) => i.label.toLowerCase() === normalized),
+	);
+
+	$effect(() => {
+		if (autofocus && inputRef) inputRef.focus();
+	});
+
+	const openDropdown = () => {
+		open = true;
+		highlighted = -1;
+	};
+
+	const closeDropdown = () => {
+		open = false;
+		highlighted = -1;
+	};
+
+	const dispatchChange = () => {
+		rootRef.dispatchEvent(new CustomEvent("change", { detail: value }));
+	};
+
+	const dispatchCreate = (item) => {
+		rootRef.dispatchEvent(new CustomEvent("create", { detail: item }));
+	};
+
+	const refocusInput = () => {
+		query = "";
+		open = true;
+		requestAnimationFrame(() => inputRef?.focus());
+	};
+
+	const removeItem = (id) => {
+		value = value.filter((vId) => vId !== id);
+		dispatchChange();
+	};
+
+	const selectItem = (id) => {
+		if (value.includes(id)) {
+			removeItem(id);
+		} else {
+			value = [...value, id];
+			dispatchChange();
+		}
+
+		refocusInput();
+	};
+
+	const handleFocusOut = (e) => {
+		const next = e.relatedTarget;
+
+		if (next && rootRef.contains(next)) return;
+		if (document.activeElement === inputRef) return;
+
+		closeDropdown();
+	};
+
+	const createItem = () => {
+		const label = query.trim();
+		if (label === "") return; // also reset here?
+
+		const lower = label.toLowerCase();
+
+		const preset = options.find((i) => i.label.toLowerCase() === lower);
+
+		if (preset) {
+			const alreadySelected = value.includes(preset.id);
+
+			if (!alreadySelected) {
+				value = [...value, preset.id];
+				dispatchChange();
+			}
+
+			refocusInput();
+			return;
+		}
+
+		const selectedMatch = value.find(
+			(id) => typeof id === "string" && id.toLowerCase() === lower,
+		);
+
+		if (!selectedMatch) {
+			value = [...value, label];
+			dispatchChange();
+			dispatchCreate(label);
+		}
+
+		refocusInput();
+	};
+
+	const handleKey = (e) => {
+		if (!open) return;
+
+		const total = filtered.length + (showCreate ? 1 : 0);
+		const presetHighlighted = highlighted >= 0 && highlighted < filtered.length;
+
+		if (e.key === "ArrowDown") {
+			e.preventDefault();
+			highlighted = (highlighted + 1) % total;
+			return;
+		}
+
+		if (e.key === "ArrowUp") {
+			e.preventDefault();
+			highlighted = (highlighted - 1 + total) % total;
+			return;
+		}
+
+		if (e.key === "Escape") {
+			e.preventDefault();
+			if (normalized === "") open = false;
+			else refocusInput();
+			return;
+		}
+
+		if (e.key === "Enter" || (e.key === " " && presetHighlighted)) {
+			e.preventDefault();
+
+			if (presetHighlighted) {
+				selectItem(filtered[highlighted].id);
+				return;
+			}
+
+			if (showCreate && highlighted === filtered.length) {
+				createItem();
+				return;
+			}
+
+			if (normalized !== "") {
+				createItem();
+				return;
+			}
+		}
+	};
+
+	let styles = $derived(tagSelectorVariants({ disabled: localValues.disabled }));
+</script>
+
+<div
+	bind:this={rootRef}
+	aria-expanded={open}
+	class={styles.base({ class: className })}
+	onfocusout={handleFocusOut}
+	role="combobox"
+	{...open
+		? {
+				"aria-controls": localValues.id,
+				"aria-haspopup": "listbox",
+				"aria-owns": localValues.id,
+			}
+		: {}}
+	{...rest}>
+	<input {name} readonly type="hidden" value={value.join(",")} />
+	<ValueList
+		bind:inputRef
+		{localValues}
+		onKeydown={handleKey}
+		onOpenDropdown={openDropdown}
+		onRemoveItem={removeItem}
+		{open}
+		{options}
+		{placeholder}
+		bind:query
+		{value} />
+
+	{#if open}
+		<Dropdown
+			{filtered}
+			{highlighted}
+			{inputRef}
+			{labelCreate}
+			{localValues}
+			onCreateItem={createItem}
+			onSelectItem={selectItem}
+			{query}
+			{showCreate}
+			{value} />
+	{/if}
+</div>

package/dist/components/molecules/tagSelector/TagSelector.svelte.d.ts

@@ -0,0 +1,87 @@
+export default TagSelector;
+type TagSelector = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const TagSelector: import("svelte").Component<{
+    /**
+     * Whether the input should be autofocused on mount
+     */
+    autofocus?: boolean;
+    /**
+     * Additional CSS classes to apply to the component
+     */
+    class?: string;
+    /**
+     * Whether the component is disabled
+     */
+    disabled?: boolean;
+    /**
+     * The ID of the input element
+     */
+    id?: string;
+    /**
+     * The label for the create new tag option
+     */
+    labelCreate?: string;
+    /**
+     * The name of the input, used for form submission
+     */
+    name?: string;
+    /**
+     * The available tag options
+     */
+    options?: Array<{
+        id: string | number;
+        label: string;
+    }>;
+    /**
+     * The placeholder text for the input
+     */
+    placeholder?: string;
+    /**
+     * The currently selected tags, bound to the component
+     */
+    value?: Array<string | number>;
+}, {}, "value">;
+type Props = {
+    /**
+     * Whether the input should be autofocused on mount
+     */
+    autofocus?: boolean;
+    /**
+     * Additional CSS classes to apply to the component
+     */
+    class?: string;
+    /**
+     * Whether the component is disabled
+     */
+    disabled?: boolean;
+    /**
+     * The ID of the input element
+     */
+    id?: string;
+    /**
+     * The label for the create new tag option
+     */
+    labelCreate?: string;
+    /**
+     * The name of the input, used for form submission
+     */
+    name?: string;
+    /**
+     * The available tag options
+     */
+    options?: Array<{
+        id: string | number;
+        label: string;
+    }>;
+    /**
+     * The placeholder text for the input
+     */
+    placeholder?: string;
+    /**
+     * The currently selected tags, bound to the component
+     */
+    value?: Array<string | number>;
+};

package/dist/components/molecules/tagSelector/ValueList.svelte

@@ -0,0 +1,52 @@
+<script>
+	import { Chip } from "../../../index.js";
+	import { tagSelectorVariants } from "./tagSelector.variants.js";
+
+	let {
+		inputRef = $bindable(),
+		localValues,
+		onKeydown,
+		onOpenDropdown,
+		onRemoveItem,
+		open = false,
+		options = [],
+		placeholder,
+		query = $bindable(),
+		value = [],
+	} = $props();
+
+	let styles = $derived(tagSelectorVariants());
+</script>
+
+<div class={styles.valueList()}>
+	{#each value as s (s)}
+		{@const opt = options.find((i) => i.id === s)}
+		<Chip
+			class={styles.item()}
+			clickable
+			icon="closeSmall"
+			onclick={() => onRemoveItem(s)}>
+			{opt?.label ?? s}
+		</Chip>
+	{/each}
+
+	{#if !localValues.disabled}
+		<Chip class={styles.searchField()} icon="add" variant="outline">
+			<input
+				bind:this={inputRef}
+				bind:value={query}
+				autocomplete="off"
+				class={styles.searchInput()}
+				onfocus={onOpenDropdown}
+				oninput={onOpenDropdown}
+				onkeydown={onKeydown}
+				{...open
+					? {
+							"aria-controls": localValues.id,
+						}
+					: {}}
+				{placeholder}
+				role="searchbox" />
+		</Chip>
+	{/if}
+</div>

package/dist/components/molecules/tagSelector/ValueList.svelte.d.ts

@@ -0,0 +1,29 @@
+export default ValueList;
+type ValueList = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const ValueList: import("svelte").Component<{
+    inputRef?: any;
+    localValues: any;
+    onKeydown: any;
+    onOpenDropdown: any;
+    onRemoveItem: any;
+    open?: boolean;
+    options?: any[];
+    placeholder: any;
+    query?: any;
+    value?: any[];
+}, {}, "inputRef" | "query">;
+type $$ComponentProps = {
+    inputRef?: any;
+    localValues: any;
+    onKeydown: any;
+    onOpenDropdown: any;
+    onRemoveItem: any;
+    open?: boolean;
+    options?: any[];
+    placeholder: any;
+    query?: any;
+    value?: any[];
+};

package/dist/components/molecules/tagSelector/tagSelector.variants.d.ts

@@ -0,0 +1,79 @@
+export const tagSelectorVariants: import("tailwind-variants").TVReturnType<{
+    dropdownPosition: {
+        bottom: {
+            dropdown: string;
+        };
+        top: {
+            dropdown: string;
+        };
+    };
+    showDropdown: {
+        true: {
+            dropdown: string;
+        };
+        false: {
+            dropdown: string;
+        };
+    };
+}, {
+    base: string;
+    valueList: string;
+    item: string;
+    searchField: string;
+    searchInput: string;
+    dropdown: string;
+    dropdownCheckmark: string;
+    dropdownItem: string[];
+}, undefined, {
+    disabled: {
+        true: {
+            base: string;
+        };
+    };
+    error: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string[];
+}, import("tailwind-variants").TVReturnType<{
+    disabled: {
+        true: {
+            base: string;
+        };
+    };
+    error: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string[];
+}, undefined, {
+    disabled: {
+        true: {
+            base: string;
+        };
+    };
+    error: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string[];
+}, import("tailwind-variants").TVReturnType<{
+    disabled: {
+        true: {
+            base: string;
+        };
+    };
+    error: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string[];
+}, undefined, unknown, unknown, undefined>>>;

package/dist/components/molecules/tagSelector/tagSelector.variants.js

@@ -0,0 +1,44 @@
+import { tv } from "tailwind-variants";
+import { inputBaseVariant } from "../../atoms/input/input.variants.js";
+
+const tagSelectorVariants = tv({
+	extend: inputBaseVariant,
+	slots: {
+		base: "relative min-h-10 p-1",
+		valueList: "flex flex-wrap gap-1",
+		item: "h-7.5",
+		searchField: "relative h-7.5 w-30",
+		searchInput:
+			"absolute inset-0 appearance-none border-0 bg-transparent pr-1 pl-8 ui-tag-badge placeholder-current focus:ring-0",
+		dropdown:
+			"absolute w-full max-w-100 overflow-y-auto bg-white p-1 pr-5 shadow-sm dark:border-neutral-700 dark:bg-neutral-800",
+		dropdownCheckmark: "ml-auto shrink-0",
+		dropdownItem: [
+			"flex w-full grow items-center gap-2 rounded-sm p-2 ui-select-label",
+			"bg-white dark:bg-neutral-800",
+			"bg-linear-to-r to-transparent",
+			"cursor-pointer text-neutral-900 hover:from-black/15 dark:text-neutral-200 dark:hover:from-white/15",
+			"data-[highlighted=true]:from-black/15 dark:data-[highlighted=true]:from-white/15",
+		],
+	},
+	variants: {
+		dropdownPosition: {
+			bottom: {
+				dropdown: "top-full mt-1",
+			},
+			top: {
+				dropdown: "bottom-full mb-1",
+			},
+		},
+		showDropdown: {
+			true: {
+				dropdown: "block",
+			},
+			false: {
+				dropdown: "hidden",
+			},
+		},
+	},
+});
+
+export { tagSelectorVariants };

package/dist/components/molecules/toggleGroup/ToggleGroupItem.svelte

@@ -1,5 +1,6 @@
 <script>
 	import { getContext } from "svelte";
+	import { Icon } from "../../../index.js";
 	import {
 		toggleGroupItemVariants,
 		toggleGroupItemTabVariants,
@@ -9,15 +10,16 @@
 	 * @typedef {Object} Props
 	 * @property {import('svelte').Snippet} [children] Children content – can be text, HTML, or other Svelte components
 	 * @property {string} [class=""] Additional CSS classes to apply to the component
+	 * @property {string} [icon] The name of the icon to display alongside the content
 	 * @property {string} [value=""] The value of the toggle group item
 	 */
 
 	/** @type {Props} */
-	let { children, class: className = "", value: localeValue } = $props();
+	let { children, class: className = "", icon, value: localeValue } = $props();
 
-	let store = getContext("toggle-group-store");
-	let { appearance, send, receive, size, variant } = $derived(store());
-	let isActive = $derived(store().value === localeValue);
+	let store = $derived(getContext("toggle-group-store")());
+	let { appearance, send, receive, size, variant } = $derived(store);
+	let isActive = $derived(store.value === localeValue);
 
 	let stylesByVariant = $derived.by(() => {
 		if (variant === "tabs") {
@@ -33,10 +35,18 @@
 		class={stylesByVariant.button({ appearance, class: className, isActive, size })}
 		role="tab"
 		onclick={() => {
-			store().update(localeValue);
+			store.update(localeValue);
 		}}
 		type="button">
-		<span class={stylesByVariant.span()}>{@render children?.()}</span>
+		<span class={stylesByVariant.span()}>
+			{#if icon}
+				<Icon
+					class={stylesByVariant.icon()}
+					name={icon}
+					size={variant === "tabs" || size === "small" ? 16 : 24} />
+			{/if}
+			{@render children?.()}
+		</span>
 		{#if isActive}
 			<div
 				class={stylesByVariant.trigger({ appearance })}

package/dist/components/molecules/toggleGroup/ToggleGroupItem.svelte.d.ts

@@ -12,6 +12,10 @@ declare const ToggleGroupItem: import("svelte").Component<{
      * Additional CSS classes to apply to the component
      */
     class?: string;
+    /**
+     * The name of the icon to display alongside the content
+     */
+    icon?: string;
     /**
      * The value of the toggle group item
      */
@@ -26,6 +30,10 @@ type Props = {
      * Additional CSS classes to apply to the component
      */
     class?: string;
+    /**
+     * The name of the icon to display alongside the content
+     */
+    icon?: string;
     /**
      * The value of the toggle group item
      */

package/dist/components/molecules/toggleGroup/toggleGroup.variants.js

@@ -2,7 +2,7 @@ import { tv } from "tailwind-variants";
 
 const toggleGroupVariants = tv({
 	slots: {
-		base: "overflow-hidden rounded-sm bg-current",
+		base: "overflow-hidden rounded-lg bg-current",
 		tabs: "flex gap-1",
 	},
 	variants: {
@@ -12,7 +12,7 @@ const toggleGroupVariants = tv({
 		},
 		size: {
 			small: {
-				tabs: "h-6 p-0.5",
+				tabs: "h-9 p-1",
 			},
 			medium: {
 				tabs: "h-10 p-1",
@@ -24,7 +24,7 @@ const toggleGroupVariants = tv({
 const toggleGroupTabVariants = tv({
 	slots: {
 		base: "",
-		tabs: "flex h-10 gap-5 border-b border-b-neutral-500",
+		tabs: "flex h-9 gap-4 border-b border-neutral-300 dark:border-neutral-700",
 	},
 });
 

package/dist/components/molecules/toggleGroup/toggleGroupItem.variants.d.ts

@@ -18,6 +18,7 @@ export const toggleGroupItemVariants: import("tailwind-variants").TVReturnType<{
 }, {
     base: string;
     button: string;
+    icon: string;
     span: string;
     trigger: string;
 }, undefined, {
@@ -40,6 +41,7 @@ export const toggleGroupItemVariants: import("tailwind-variants").TVReturnType<{
 }, {
     base: string;
     button: string;
+    icon: string;
     span: string;
     trigger: string;
 }, import("tailwind-variants").TVReturnType<{
@@ -62,6 +64,7 @@ export const toggleGroupItemVariants: import("tailwind-variants").TVReturnType<{
 }, {
     base: string;
     button: string;
+    icon: string;
     span: string;
     trigger: string;
 }, undefined, unknown, unknown, undefined>>;
@@ -77,6 +80,7 @@ export const toggleGroupItemTabVariants: import("tailwind-variants").TVReturnTyp
 }, {
     base: string;
     button: string;
+    icon: string;
     span: string;
     trigger: string;
 }, undefined, {
@@ -91,6 +95,7 @@ export const toggleGroupItemTabVariants: import("tailwind-variants").TVReturnTyp
 }, {
     base: string;
     button: string;
+    icon: string;
     span: string;
     trigger: string;
 }, import("tailwind-variants").TVReturnType<{
@@ -105,6 +110,7 @@ export const toggleGroupItemTabVariants: import("tailwind-variants").TVReturnTyp
 }, {
     base: string;
     button: string;
+    icon: string;
     span: string;
     trigger: string;
 }, undefined, unknown, unknown, undefined>>;