@djcali570/component-lib 0.0.3 → 0.0.5

package/dist/DropDown5.svelte

@@ -0,0 +1,329 @@
+<script module lang="ts">
+	/**
+	 * Dropdown5 v0.0.1
+	 */
+	export interface DropDownItem<TProps extends Record<string, any> = {}> {
+		id?: string;
+		value: string;
+		extraValue?: string;
+		component?: Component<TProps>;
+		componentStyles?: string;
+		props?: TProps;
+	}
+</script>
+
+<script lang="ts">
+	import { browser } from '$app/environment';
+	import { onDestroy, onMount, type Component } from 'svelte';
+	import { fly } from 'svelte/transition';
+
+	let {
+		colorScheme = {
+			textColor: '#D6D6D6',
+			bgColor: '#121212',
+			borderColor: '#262626',
+			titleColor: '#989A9A',
+			dropdownBgColor: '#141414',
+			focusedColor: '#4787ac',
+			itemTextColor: '#D6D6D6',
+			itemHoverBgColor: '#4787ac',
+			itemHoverTextColor: '#121212'
+		},
+		name = 'dropdown',
+		title = 'Title',
+		value = $bindable(),
+		valueKey = $bindable(),
+		extraValue = $bindable(),
+		onUpdate = (key, v, ev) => {},
+		disabled = false,
+		dropdownItems = [] as DropDownItem[]
+	}: {
+		colorScheme?: any;
+		name?: string;
+		title?: string;
+		value: any;
+		valueKey?: string | null | undefined;
+		extraValue?: string | null | undefined;
+		onUpdate?: (valueKey: string, value: string, extraValue: string) => void;
+		disabled?: boolean;
+		dropdownItems?: DropDownItem[];
+	} = $props();
+
+	const id = generateRandomString();
+	let showDropdown = $state(false);
+	let dropdownRef: HTMLDivElement | null = $state(null);
+	let filteredItems: DropDownItem[] = $state([]);
+
+	$effect(() => {
+		if (!browser || !showDropdown || !dropdownRef) return;
+		setTimeout(() => {
+			if (!dropdownRef) return;
+			const dropdownRect = dropdownRef.getBoundingClientRect();
+			const viewportHeight = window.innerHeight;
+			if (dropdownRect.bottom > viewportHeight) {
+				const scrollY = window.scrollY + (dropdownRect.bottom - viewportHeight) + 10;
+				window.scrollTo({ top: scrollY, behavior: 'smooth' });
+			}
+		}, 0);
+	});
+
+	onMount(() => {
+		document.addEventListener('click', closeDropdown);
+	});
+
+	onDestroy(() => {
+		try {
+			document.removeEventListener('click', closeDropdown);
+		} catch (error) {}
+	});
+
+	/**
+	 * Generate a random string so that each
+	 * input will have a unique id in the dom
+	 */
+	function generateRandomString() {
+		const length = 6;
+		const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+
+		let result = '';
+		for (let i = 0; i < length; i++) {
+			const randomIndex = Math.floor(Math.random() * characters.length);
+			result += characters.charAt(randomIndex);
+		}
+
+		return result;
+	}
+
+	/**
+	 * Show the dropdown list
+	 */
+	function showDropdownList() {
+		showDropdown = true;
+		filteredItems = dropdownItems;
+	}
+
+	function closeDropdown(event: Event) {
+		const target = event.target as HTMLElement;
+
+		if (target.id !== `dropdown-${id}`) {
+			showDropdown = false;
+			validateInput();
+		}
+	}
+	function filterItems() {
+		filteredItems = dropdownItems.filter((item) =>
+			item.value.toLowerCase().includes(value.toLowerCase())
+		);
+	}
+	function selectItem(item: DropDownItem) {
+		valueKey = item.id ?? '';
+		extraValue = item.extraValue ?? '';
+		value = item.value;
+		onUpdate(valueKey, value, extraValue);
+		showDropdown = false;
+	}
+	function validateInput() {
+		const matchedItem = dropdownItems.find((item) => {
+			return item.value.toLowerCase() === value.toLowerCase(); // Add return statement
+		});
+		if (!matchedItem) {
+			// Clear input if the entered value is not in the list
+			value = '';
+		} else if (value !== matchedItem.value) {
+			// Set the inputText to the matched item's value if it's different
+			value = matchedItem.value;
+		}
+	}
+</script>
+
+<div
+	class="dropdown5__container"
+	style="
+--dropdown5__textColor: {colorScheme.textColor};
+--dropdown5__mainBgColor: {colorScheme.bgColor};
+--dropdown5__borderColor: {colorScheme.borderColor};
+--dropdown5__titleColor: {colorScheme.titleColor};
+--dropdown5__bgColor: {colorScheme.dropdownBgColor};
+--dropdown5__focusedColor: {colorScheme.focusedColor};
+--dropdown5__itemTextColor: {colorScheme.itemTextColor};
+--dropdown5__itemHoverBgColor: {colorScheme.itemHoverBgColor};
+--dropdown5__itemHoverTextColor: {colorScheme.itemHoverTextColor};
+"
+>
+	<div>
+		<div class="dropdown5__title">{title}</div>
+		<div class="dropdown5__input">
+			<input
+				id="dropdown-{id}"
+				type="text"
+				aria-controls="dropdown-{id}-list"
+				aria-haspopup="listbox"
+				{name}
+				bind:value
+				oninput={filterItems}
+				onfocus={showDropdownList}
+				onblur={validateInput}
+				autocomplete="off"
+				{disabled}
+			/>
+			<input
+				id="dropdown-valueKey-{id}"
+				name={`${name}-valueKey-${id}`}
+				type="hidden"
+				bind:value={valueKey}
+			/>
+		</div>
+	</div>
+
+	{#if showDropdown}
+		<div
+			class="dropdown5__list__container"
+			style="box-shadow: 0px 1px 16px 0px rgba(0,0,0,0.12);"
+			role="listbox"
+			aria-labelledby="dropdown-{id}-title"
+			bind:this={dropdownRef}
+			oninput={filterItems}
+			transition:fly={{
+				y: 10
+			}}
+		>
+			<div style="height:100%;">
+				{#each filteredItems as item, index}
+					<button
+						type="button"
+						class="dropdown5__list__item"
+						role="option"
+						aria-selected={item.value === value ? 'true' : 'false'}
+						onclick={() => selectItem(item)}
+					>
+						{#if item.value === value}
+							<div class="fic">
+								<div style="padding-right: 0.5rem;">
+									<div class="fca" style="width: 1rem; height: 1rem;">
+										<svg
+											viewBox="0 0 12 12"
+											xmlns="http://www.w3.org/2000/svg"
+											aria-hidden="true"
+											role="presentation"
+											focusable="false"
+											style="display: block; height: 12px; width: 12px; fill: currentcolor;"
+											><path
+												d="m10.5 1.939 1.061 1.061-7.061 7.061-.53-.531-3-3-.531-.53 1.061-1.061 3 3 5.47-5.469z"
+											></path></svg
+										>
+									</div>
+								</div>
+								{#if item.component}
+									{@const Component = item.component}
+									<div class="component" style={item.componentStyles}>
+										<Component {...item.props} />
+									</div>
+								{/if}
+								<div>{item.value}</div>
+							</div>
+						{:else}
+							<div class="fic">
+								<div style="padding-right: 0.5rem;">
+									<div style="width: 1rem; height: 1rem;"></div>
+								</div>
+
+								{#if item.component}
+									{@const Component = item.component}
+									<div class="component" style={item.componentStyles}>
+										<Component {...item.props} />
+									</div>
+								{/if}
+
+								<div>{item.value}</div>
+							</div>
+						{/if}
+					</button>
+				{/each}
+			</div>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.dropdown5__container {
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		width: 100%;
+		min-height: 64px;
+		font-family: Arial, sans-serif;
+		margin: calc(var(--spacing) * 0);
+		background-color: var(--dropdown5__mainBgColor);
+		box-shadow: inset 0 0 0 1px var(--dropdown5__borderColor);
+		border: none;
+		border-radius: 0.5rem;
+		line-height: 1.25rem;
+	}
+
+	.dropdown5__container:focus-within {
+		box-shadow: inset 0 0 0 2px var(--dropdown5__focusedColor);
+	}
+	.dropdown5__title {
+		font-size: 0.75rem;
+		font-family: inherit;
+		color: var(--dropdown5__titleColor);
+		padding-inline: 0.75rem;
+		padding-top: 0.5rem;
+	}
+	.dropdown5__input {
+		display: flex;		
+		padding-inline: 0.75rem;
+		color: var(--dropdown5__textColor);
+	}
+
+	input {
+		width: 100%;
+		color: inherit;
+		outline: none;
+		font-family: inherit;
+		max-height: 24px;
+		background-color: var(--dropdown5__mainBgColor);
+		border: none;
+	}
+	.dropdown5__list__container {
+		position: absolute;
+		top: 110%;
+		left: 0;
+		display: flex;
+		flex-direction: column;
+		width: 100%;
+		max-height: 10rem;
+		overflow-y: auto;
+		background-color: var(--dropdown5__bgColor);
+		border-radius: 0.75rem;
+		z-index: 10;
+	}
+	.dropdown5__list__item {
+		display: flex;
+		width: 100%;
+		padding: 0.5rem;
+		cursor: pointer;
+		color: var(--dropdown5__itemTextColor);
+		text-align: start;
+		background-color: transparent;
+		border: none;
+	}
+	.dropdown5__list__item:hover {
+		background-color: var(--dropdown5__itemHoverBgColor);
+		color: var(--dropdown5__itemHoverTextColor);
+	}
+	.fic {
+		display: flex;
+		align-items: center;
+	}
+	.fca {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	.component {
+		margin-right: 0.5rem;
+		width: 2rem;
+		height: 2rem;
+	}
+</style>

package/dist/DropDown5.svelte.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Dropdown5 v0.0.1
+ */
+export interface DropDownItem<TProps extends Record<string, any> = {}> {
+    id?: string;
+    value: string;
+    extraValue?: string;
+    component?: Component<TProps>;
+    componentStyles?: string;
+    props?: TProps;
+}
+import { type Component } from 'svelte';
+type $$ComponentProps = {
+    colorScheme?: any;
+    name?: string;
+    title?: string;
+    value: any;
+    valueKey?: string | null | undefined;
+    extraValue?: string | null | undefined;
+    onUpdate?: (valueKey: string, value: string, extraValue: string) => void;
+    disabled?: boolean;
+    dropdownItems?: DropDownItem[];
+};
+declare const DropDown5: Component<$$ComponentProps, {}, "value" | "valueKey" | "extraValue">;
+type DropDown5 = ReturnType<typeof DropDown5>;
+export default DropDown5;