@djcali570/component-lib 0.0.2 → 0.0.4

package/dist/DatePicker5.svelte

@@ -2,7 +2,10 @@
 	import { browser } from '$app/environment';
 	import { fly } from 'svelte/transition';
 
-	// Props with runes
+	/**
+	 * Date Picker 5 v0.0.1
+	 */
+
 	let {
 		colorScheme = {
 			labelTextColor: '#989A9A',
@@ -319,18 +322,18 @@
 						readonly
 						bind:value={dateText}
 					/>
-					<div class="flex justify-center items-center p-3">
+					<div class="dpicker-closeBtn-container">
 						{#if dateText && !disabled}
 							<button
 								aria-label="Close Date Picker"
 								id="dpicker-CloseBtn-{id}"
-								class="dpicker-closeBtn w-6 h-6 flex justify-center items-center rounded-full"
+								class="dpicker-closeBtn"
 								onclick={(e) => {
 									e.stopPropagation();
 									clearDate();
 								}}
 							>
-								<div class="h-[14px] w-[14px] close-btn">
+								<div class="close-btn">
 									<svg
 										version="1.1"
 										id="Layer_1"
@@ -364,21 +367,18 @@
 			style="box-shadow: 0px 1px 16px 0px rgba(0,0,0,0.12);"
 			transition:fly={{ y: 10 }}
 		>
-			<div class="h-full">
-				<div class="grid grid-cols-7 month-block">
+			<div style="height:100%;">
+				<div class="month-block">
 					<button
 						id="chev-prev-{id}"
 						type="button"
 						aria-label="Previous Month"
-						class="w-full flex col-span-1 items-center justify-center cursor-pointer"
+						class="month-block-btn"
 						disabled={showPrevMonthButton}
 						onclick={prevMonth}
 					>
-						<div
-							class="size-8 flex justify-center items-center rounded-full chev"
-							class:disabled={showPrevMonthButton}
-						>
-							<div class="size-5">
+						<div class="chev" class:disabled={showPrevMonthButton}>
+							<div class="chev-svg">
 								<svg
 									version="1.1"
 									id="Layer_1"
@@ -399,7 +399,7 @@
 							</div>
 						</div>
 					</button>
-					<div class="col-span-5 flex justify-center items-center">
+					<div class="month-block-month">
 						{monthNames[viewDate.getMonth()]}
 						{viewDate.getFullYear()}
 					</div>
@@ -407,15 +407,12 @@
 						id="chev-next-{id}"
 						type="button"
 						aria-label="Next Month"
-						class="w-full flex col-span-1 items-center justify-center cursor-pointer"
+						class="month-block-btn"
 						disabled={showNextMonthButton}
 						onclick={nextMonth}
 					>
-						<div
-							class="size-8 flex justify-center items-center rounded-full chev"
-							class:disabled={showNextMonthButton}
-						>
-							<div class="size-5">
+						<div class="chev" class:disabled={showNextMonthButton}>
+							<div class="chev-svg">
 								<svg
 									version="1.1"
 									id="Layer_1"
@@ -437,21 +434,21 @@
 						</div>
 					</button>
 				</div>
-				<div class="grid grid-cols-7">
+				<div class="week">
 					{#each weekAbv as weekday}
-						<div class="flex justify-center items-center text-[var(--text-light)] text-sm">
+						<div class="week-days">
 							{weekday}
 						</div>
 					{/each}
 				</div>
-				<div class="grid grid-cols-7 grid-rows-6">
+				<div class="calendar-days">
 					{#each calendarDays as date, index (index)}
-						<div id="day-{index}" class="flex justify-center items-center">
+						<div id="day-{index}" class="calendar-days-day">
 							{#if date}
 								<button
 									id="day-btn-{index}"
 									type="button"
-									class="h-10 w-10 flex justify-center items-center calendar-day"
+									class="calendar-day"
 									class:highlighted={(selectedDate &&
 										date.toDateString() === selectedDate.toDateString()) ||
 										(!selectedDate && date.toDateString() === today.toDateString())}
@@ -467,7 +464,7 @@
 									{date.getDate()}
 								</button>
 							{:else}
-								<div class="h-10 w-10 flex justify-center items-center"></div>
+								<div class="calendar-day-else"></div>
 							{/if}
 						</div>
 					{/each}
@@ -483,6 +480,7 @@
 		display: inline-block;
 		width: 100%;
 		color: var(--dpicker-textColor);
+		font-family: Arial, sans-serif;
 	}
 	.outer {
 		background-color: var(--dpicker-inputBgColor);
@@ -506,6 +504,10 @@
 		position: relative;
 		box-sizing: border-box;
 	}
+	.close-btn {
+		height: 14px;
+		width: 14px;
+	}
 	.dpicker-title {
 		line-height: 20px;
 		color: var(--dpicker-labelTextColor);
@@ -532,6 +534,24 @@
 		appearance: none;
 		-webkit-appearance: none;
 	}
+	.dpicker-closeBtn-container {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		padding: 0.75rem;
+	}
+	.dpicker-closeBtn {
+		display: none;
+		width: 1.5rem;
+		height: 1.5rem;
+		justify-content: center;
+		align-items: center;
+		color: var(--dpicker-clearColor);
+		border-radius: calc(infinity * 1px);
+		background-color: transparent;
+		border: none;
+		cursor: pointer;
+	}
 	.dpicker-input {
 		display: flex;
 		opacity: 1;
@@ -547,10 +567,6 @@
 		border-top-right-radius: 0.5rem /* 8px */;
 		border-bottom-right-radius: 0.5rem /* 8px */;
 	}
-	.dpicker-closeBtn {
-		display: none;
-		color: var(--dpicker-clearColor);
-	}
 
 	.dpicker-closeBtn:hover {
 		background-color: var(--dpicker-clearHoverColor);
@@ -576,19 +592,76 @@
 		background-color: var(--dpicker-bgColor);
 	}
 	.month-block {
+		display: grid;
+		grid-template-columns: repeat(7, minmax(0, 1fr));
 		width: 100%;
 		background-color: var(--picker-monthBgColor);
 	}
+	.month-block-btn {
+		display: flex;
+		width: 100%;
+		justify-content: center;
+		align-items: center;
+		grid-column: span 1 / span 1;
+		cursor: pointer;
+		border: none;
+		background-color: transparent;
+	}
+
+	.month-block-month {
+		grid-column: span 5 / span 5;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.chev {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 32px;
+		height: 32px;
+		border-radius: calc(infinity * 1px);
+	}
 	.chev:hover {
 		background-color: var(--dpicker-clearHoverColor);
 	}
-
 	.chev.disabled {
 		color: var(--dpicker-inactiveDayColor);
 	}
+	.chev-svg {
+		width: 1.25rem;
+		height: 1.25rem;
+		color: var(--dpicker-textColor);
+	}
+	.calendar-days {
+		display: grid;
+		grid-template-columns: repeat(7, minmax(0, 1fr));
+		grid-template-rows: repeat(6, minmax(0, 1fr));
+	}
+	.calendar-days-day {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
 	.calendar-day {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		height: 2.5rem;
+		width: 2.5rem;
 		color: var(--dpicker-textColor);
 		border-radius: 50%;
+		background-color: transparent;
+		border: none;
+		cursor: pointer;
+	}
+	.calendar-day-else {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		height: 2.5rem;
+		width: 2.5rem;
 	}
 	.calendar-day:hover:not(:disabled) {
 		border: 1px solid var(--dpicker-textColor);
@@ -597,9 +670,12 @@
 		background-color: var(--dpicker-selectedDayBgColor);
 		color: var(--dpicker-selectedDayTextColor);
 		opacity: 1 !important; /* Ensure full opacity for highlighted dates */
+		border: none;
 	}
 
 	.other-month:not(.highlighted) {
+		background-color: transparent;
+		border: none;
 		color: var(--dpicker-textColor);
 		opacity: 0.65;
 	}
@@ -622,4 +698,15 @@
 		opacity: 0.5;
 		cursor: not-allowed;
 	}
+	.week {
+		display: grid;
+		grid-template-columns: repeat(7, minmax(0, 1fr));
+	}
+	.week-days {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		font-size: 0.875rem;
+		color: var(--dpicker-textColor);
+	}
 </style>

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;