@djcali570/component-lib 0.0.2 → 0.0.4

package/dist/TimePicker5.svelte

@@ -0,0 +1,687 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { fly } from 'svelte/transition';
+
+	/**
+	 * Time Picker 5 v.0.0.1
+	 */
+
+	let {
+		colorScheme = {
+			textColor: '#D6D6D6',
+			bgColor: '#121212',
+			borderColor: '#262626',
+			focusedColor: '#4787ac',
+			titleColor: '#989A9A',
+			clearColor: '#989A9A',
+			clearHoverColor: '#1F2023',
+			dropdownBgColor: '#141414'
+		},
+		timeText = '',
+		name = 'timePicker',
+		title = 'Title',
+		placeholder = '',
+		disabled = false,
+		position = 'left-0',
+		radius = 'full',
+		onTimePicked = (value) => {}
+	}: {
+		colorScheme?: any;
+		timeText?: string;
+		name?: string;
+		title?: string;
+		placeholder?: string;
+		disabled?: boolean;
+		position?: 'left-0' | 'right-0';
+		radius?: 'right' | 'left' | 'full';
+		onTimePicked?: (value: string) => void;
+	} = $props();
+
+	/**
+	 * Variables, arrays
+	 */
+
+	const hours = [12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
+	const minutes = [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55];
+
+	let clockSystem: string = $state('AM');
+	let hour: number = $state(12);
+	let minute: number = $state(0);
+	let hourMenuOpen: boolean = $state(false);
+	let minuteMenuOpen: boolean = $state(false);
+
+	const id = generateRandomString();
+
+	let showDropdown = $state(false);
+	let dropdownRef: HTMLDivElement | null = $state(null);
+	let inputRef: HTMLDivElement | null = $state(null);
+
+	onMount(() => {
+		document.addEventListener('click', closeDropdown);
+	});
+
+	/**
+	 * Generate a random string so that each
+	 * picker 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;
+	}
+
+	function clear() {
+		timeText = '';
+		hour = 12;
+		minute = 0;
+		clockSystem = 'AM';
+	}
+
+	$effect(() => {
+		if (showDropdown) {
+			scrollToDropdown();
+		}
+	});
+
+	function closeDropdown(event: Event) {
+		if (event.target) {
+			const e = event.target as HTMLElement;
+
+			if (
+				e.id !== `timer-dropdown-${id}` &&
+				!e.closest('#hour-btn') &&
+				!e.closest('#min-btn') &&
+				!e.closest('#up-btn') &&
+				!e.closest('#down-btn') &&
+				!e.closest('#clr-btn') &&
+				!e.closest('#clock') &&
+				!e.closest('[id^="hour-"]') &&
+				!e.closest('[id^="minute-"]')
+			) {
+				showDropdown = false;
+			}
+		}
+	}
+
+	function toggleDropdown() {
+		showDropdown = !showDropdown;
+		hourMenuOpen = false;
+		minuteMenuOpen = false;
+
+		if (showDropdown) {
+			// If the dropdown is being opened, you may want to perform some additional actions.
+			scrollToDropdown();
+		} else {
+			scrollToInput();
+		}
+
+		updatePickerValues();
+	}
+
+	function scrollToDropdown() {
+		if (dropdownRef) {
+			// Scroll to the dropdown element.
+			dropdownRef.scrollIntoView({
+				behavior: 'smooth',
+				block: 'center',
+				inline: 'nearest'
+			});
+		}
+	}
+
+	function scrollToInput() {
+		if (inputRef) {
+			inputRef.scrollIntoView({
+				behavior: 'smooth',
+				block: 'center',
+				inline: 'nearest'
+			});
+			showDropdown = false;
+		}
+	}
+
+	function updatePickerValues() {
+		if (timeText === '') return;
+
+		const hourVal = timeText.split(':')[0];
+		const minVal = timeText.split(':')[1];
+		clockSystem = timeText.split(' ')[1];
+		hour = parseInt(hourVal);
+		minute = parseInt(minVal);
+	}
+
+	function hourSelected(hourItem: number) {
+		hour = hourItem;
+		hourMenuOpen = false;
+		updateTime();
+	}
+
+	function minuteSelected(minuteItem: number): any {
+		minute = minuteItem;
+		minuteMenuOpen = false;
+		updateTime();
+	}
+
+	function updateTime() {
+		const formattedHour = hour < 10 ? `0${hour}` : `${hour}`;
+		const formattedMin = minute < 10 ? `0${minute}` : `${minute}`;
+		timeText = `${formattedHour}:${formattedMin} ${clockSystem}`;
+		onTimePicked(timeText);
+	}
+
+	function updateClockSystem() {
+		if (clockSystem === 'AM') {
+			clockSystem = 'PM';
+		} else {
+			clockSystem = 'AM';
+		}
+		updateTime();
+	}
+
+	function increaseMinute() {
+		minute += 1;
+		updateTime();
+	}
+
+	function decreaseMinute() {
+		if (minute > 0) {
+			minute -= 1;
+			updateTime();
+		}
+	}
+</script>
+
+<div
+	class="timer__container"
+	style="
+--tp__textColor: {colorScheme.textColor};
+--tp__bgColor: {colorScheme.bgColor};
+--tp__borderColor: {colorScheme.borderColor};
+--tp__focusedColor: {colorScheme.focusedColor};
+--tp__titleColor: {colorScheme.titleColor};
+--tp__clearColor: {colorScheme.clearColor};
+--tp__clearHoverColor: {colorScheme.clearHoverColor};
+--tp__dropdownBgColor: {colorScheme.dropdownBgColor};
+"
+>
+	<div
+		class="timer__dropdown"
+		class:radius--l--only={radius === 'left'}
+		class:radius--r--only={radius === 'right'}
+		class:radius--full={radius === 'full'}
+		bind:this={inputRef}
+	>
+		<label for="timer-dropdown-{id}"
+			><div class="timer__title">
+				<div>
+					{title}
+				</div>
+			</div>
+
+			<div class="timer__input">
+				<input
+					aria-label="Timer Input"
+					id="timer-dropdown-{id}"
+					autocomplete="off"
+					type="text"
+					readonly
+					{placeholder}
+					{name}
+					bind:value={timeText}
+					onclick={toggleDropdown}
+				/>
+				<div class="options__container">
+					{#if timeText}
+						<div class="clear__container">
+							<button aria-label="Time Picker Close Button" type="button" onclick={clear}
+								><div class="timer__close__btn">
+									<svg
+										version="1.1"
+										id="Layer_1"
+										xmlns="http://www.w3.org/2000/svg"
+										xmlns:xlink="http://www.w3.org/1999/xlink"
+										x="0px"
+										y="0px"
+										viewBox="0 0 100 100"
+										style="enable-background:new 0 0 100 100;"
+										xml:space="preserve"
+									>
+										<path
+											fill="currentColor"
+											d="M87.8,87.4c-0.7,0.7-1.6,1.1-2.6,1.1c-0.9,0-1.8-0.4-2.5-1.1L50,55.1L17.8,87.8c-0.7,0.7-1.6,1.1-2.6,1.1
+									c-0.9,0-1.8-0.3-2.5-1.1c-1.4-1.4-1.4-3.7,0-5.1L44.9,50L12.2,17.8c-1.4-1.4-1.4-3.7,0-5.1c1.4-1.4,3.7-1.4,5.1,0L50,44.9l32.3-32.6
+									c1.4-1.4,3.7-1.4,5.1,0c1.4,1.4,1.4,3.7,0,5.1L55.1,50l32.6,32.3C89.2,83.7,89.2,86,87.8,87.4z"
+										/>
+									</svg>
+								</div></button
+							>
+						</div>
+					{/if}
+				</div>
+			</div>
+		</label>
+	</div>
+	{#if showDropdown && !disabled}
+		<div
+			class="timer__dropdown__menu time__flex__center {position}"
+			style="box-shadow: 0px 1px 16px 0px rgba(0,0,0,0.12);"
+			bind:this={dropdownRef}
+			transition:fly={{
+				y: 10
+			}}
+		>
+			<div class="time__flex__center" style="height: 100%; width: 80%; flex-direction:column;">
+				{#if !hourMenuOpen && !minuteMenuOpen}
+					<div class="time__flex__center" style="height:100%; width:100%;">
+						<div class="time__container">
+							<!-- Hour Button -->
+							<button
+								id="hour-btn"
+								class="flex__center time__border__hover"
+								type="button"
+								onclick={() => (hourMenuOpen = true)}
+							>
+								{#if hour < 10}
+									0{hour}
+								{:else}
+									{hour}
+								{/if}
+							</button>
+							<!-- Colon -->
+							<div class="time__flex__center">:</div>
+							<!-- Minute Button -->
+							<button
+								id="min-btn"
+								type="button"
+								class="time__flex__center time__border__hover"
+								onclick={() => (minuteMenuOpen = true)}
+							>
+								{#if minute < 10}
+									0{minute}
+								{:else}
+									{minute}
+								{/if}
+							</button>
+							<!-- Arrow Buttons -->
+							<div class="arrow__btn__container">
+								<div class="time__flex__center">
+									<button
+										aria-label="Time Picker Increase Minute Button"
+										id="up-btn"
+										type="button"
+										class="arrow__btn rounded-t"
+										onclick={increaseMinute}
+									>
+										<svg
+											version="1.1"
+											id="Layer_1"
+											xmlns="http://www.w3.org/2000/svg"
+											xmlns:xlink="http://www.w3.org/1999/xlink"
+											x="0px"
+											y="0px"
+											viewBox="0 0 200 200"
+											style="enable-background:new 0 0 200 200;"
+											xml:space="preserve"
+										>
+											<path
+												fill="currentColor"
+												d="M96.5,63.4c1.9-1.9,5.1-1.9,7.1,0l65.8,65.8c1,1,1.5,2.2,1.5,3.5s-0.5,2.6-1.5,3.5c-1.9,1.9-5.1,1.9-7.1,0l-62.2-62.1
+	l-62.5,62.5c-1.9,1.9-5.1,1.9-7.1,0l-0.1-0.1c-0.9-1.1-1.4-2.3-1.4-3.6c0-1.3,0.5-2.6,1.5-3.5L96.5,63.4z"
+											/>
+										</svg>
+									</button>
+								</div>
+								<div class="time__flex__center">
+									<button
+										aria-label="Time Picker Decrease Minute Button"
+										id="down-btn"
+										type="button"
+										class="arrow__btn rounded-b"
+										onclick={decreaseMinute}
+									>
+										<svg
+											version="1.1"
+											id="Layer_1"
+											xmlns="http://www.w3.org/2000/svg"
+											xmlns:xlink="http://www.w3.org/1999/xlink"
+											x="0px"
+											y="0px"
+											viewBox="0 0 200 200"
+											style="enable-background:new 0 0 200 200;"
+											xml:space="preserve"
+										>
+											<path
+												fill="currentColor"
+												d="M103.5,136.6c-1.9,1.9-5.1,1.9-7.1,0L30.5,70.8c-1-1-1.5-2.2-1.5-3.5s0.5-2.6,1.5-3.5c1.9-1.9,5.1-1.9,7.1,0l62.2,62.1
+	l62.5-62.5c1.9-1.9,5.1-1.9,7.1,0l0.1,0.1c0.9,1.1,1.4,2.3,1.4,3.6s-0.5,2.6-1.5,3.5L103.5,136.6z"
+											/>
+										</svg>
+									</button>
+								</div>
+							</div>
+							<!-- AM/PM Button -->
+							<button
+								id="clock"
+								class="time__flex__center time__border__hover"
+								type="button"
+								onclick={updateClockSystem}>{clockSystem}</button
+							>
+						</div>
+					</div>
+				{/if}
+				{#if hourMenuOpen}
+					<!-- Hour Grid -->
+					<div class="minute__hour__grid">
+						{#each hours as hourItem, index}
+							<button
+								id="hour-{index}"
+								type="button"
+								class="time__flex__center"
+								onclick={() => hourSelected(hourItem)}
+							>
+								<div
+									class="time__flex__center time__border__hover size-8 rounded-full {hour ===
+									hourItem
+										? 'bg-white text-black'
+										: ''}"
+								>
+									{#if hourItem < 10}
+										0{hourItem}
+									{:else}
+										{hourItem}
+									{/if}
+								</div>
+							</button>
+						{/each}
+					</div>
+				{/if}
+				{#if minuteMenuOpen}
+					<!-- Minute Grid -->
+					<div class="minute__hour__grid">
+						{#each minutes as minuteItem, index}
+							<button
+								id="minute-{index}"
+								type="button"
+								class="time__flex__center"
+								onclick={() => minuteSelected(minuteItem)}
+							>
+								<div
+									class="time__flex__center time__border__hover size-8 rounded-full {minute ===
+									minuteItem
+										? 'bg-white text-black'
+										: ''}"
+								>
+									{#if minuteItem < 10}
+										0{minuteItem}
+									{:else}
+										{minuteItem}
+									{/if}
+								</div>
+							</button>
+						{/each}
+					</div>
+				{/if}
+				<!-- Clear & Done buttons -->
+				{#if !hourMenuOpen && !minuteMenuOpen}
+					<div class="action__btn__container">
+						<button
+							id="clr-btn"
+							class="time__border__hover time__border__hover__btn"
+							type="button"
+							onclick={() => (timeText = '')}>Clear</button
+						>
+						<button class="time__border__hover time__border__hover__btn" type="button">Done</button>
+					</div>
+				{/if}
+			</div>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.time__flex__center {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.time__text__hover:hover {
+		color: var(--color-linkupTheme-primary-500);
+		transition-property:
+			color, background-color, border-color, outline-color, text-decoration-color, fill, stroke,
+			--tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
+		transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+		transition-duration: 300ms;
+	}
+
+	.time__border__hover {
+		background-color: transparent;
+		color: var(--tp__textColor);
+		border-radius: 0.5rem;
+		border: none;
+		cursor: pointer;
+		font-size: inherit;
+	}
+	.time__border__hover__btn {
+		height: 100%;
+		flex: 1;
+	}
+	.time__border__hover:hover {
+		border: 1px solid var(--tp__focusedColor);
+	}
+
+	.timer__input__close__btn {
+		display: none;
+		color: var(--air-timepicker-close-color);
+	}
+
+	.timer__input__close__btn:hover {
+		background-color: var(--air-timepicker-close-hover-color);
+	}
+
+	.timer__container {
+		position: relative;
+		display: inline-block;
+		width: 100%;
+		color: var(--tp__textColor);
+		font-family: Arial, sans-serif;
+	}
+
+	.timer__dropdown__menu {
+		position: absolute;
+		top: 110%;
+		display: flex;
+		flex-direction: column;
+		overflow-y: auto;
+		height: 130px;
+		width: 100%;
+		min-width: 300px;
+		background-color: var(--tp__dropdownBgColor);
+		border-radius: 0.5rem;
+		z-index: 20;
+	}
+
+	.timer__dropdown {
+		background-color: var(--tp__bgColor);
+		border: none;
+		line-height: 20px;
+		font-size: 16px;
+		margin: 0;
+		box-shadow: inset 0 0 0 1px var(--tp__borderColor);
+		width: 100%;
+		display: flex;
+		position: relative;
+		min-height: 64px;
+		text-size-adjust: 100%;
+	}
+
+	input::placeholder {
+		color: var(--air-timepicker-placeholder-color);
+	}
+
+	.radius--full {
+		border-radius: 0.5rem;
+	}
+
+	.radius--l--only {
+		border-top-left-radius: var(--radius-lg);
+		border-bottom-left-radius: var(--radius-lg);
+	}
+
+	.radius--r--only {
+		border-top-right-radius: var(--radius-lg);
+		border-bottom-right-radius: var(--radius-lg);
+	}
+
+	label {
+		line-height: 20px;
+		color: var(--air-timepicker-main-text-color);
+		flex-grow: 1;
+		flex-basis: 0%;
+		flex-shrink: 1;
+		position: relative;
+		box-sizing: border-box;
+	}
+
+	.timer__title {
+		font-size: 0.75rem;
+		font-family: inherit;
+		line-height: 20px;
+		color: var(--tp__titleColor);
+		padding-inline: 0.75rem;
+		padding-top: 0.5rem;
+	}
+
+	.timer__input {
+		display: grid;
+		grid-template-columns: 1fr min-content;
+		opacity: 1;
+		padding-inline: 0.75rem;
+	}
+
+	input {
+		font-family: inherit;
+		height: 24px;
+		color: inherit;
+		background-color: var(--tp__bgColor);
+		border: none;
+		width: 100%;
+		outline: none;
+	}
+
+	.timer__dropdown:focus-within {
+		box-shadow: inset 0 0 0 2px var(--tp__focusedColor);
+	}
+
+	.fca {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+	.p3 {
+		padding: 0.75rem;
+	}
+	.rf {
+		border-radius: calc(infinity * 1px);
+	}
+	.options__container {
+		display: flex;
+		flex-direction: column;
+		min-width: 2rem;
+	}
+	.clear__container {
+		display: flex;
+		height: 100%;
+		width: 100%;
+		justify-content: flex-end;
+		align-items: flex-start;
+	}
+
+	.clear__container button {
+		display: none;
+		height: 24px;
+		width: 24px;
+		border-radius: calc(infinity * 1px);
+		border: none;
+		cursor: pointer;
+		background-color: transparent;
+	}
+	.clear__container button:hover {
+		background-color: var(--tp__clearHoverColor);
+	}
+	.timer__close__btn {
+		height: 14px;
+		width: 14px;
+		color: var(--tp__clearColor);
+	}
+	.timer__dropdown:focus-within .clear__container button {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	.time__container {
+		display: grid;
+		grid-template-columns: repeat(5, minmax(0, 1fr));
+		width: 100%;
+		font-size: 1.875rem;
+	}
+	.arrow__btn__container {
+		display: grid;
+		grid-template-rows: repeat(2, minmax(0, 1fr));
+	}
+	.arrow__btn {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		width: 1.8rem;
+		height: 1.8rem;
+		background-color: transparent;
+		border: none;
+		color: inherit;
+		cursor: pointer;
+		font-size: inherit;
+	}
+	.arrow__btn:hover {
+		border: 1px solid var(--tp__focusedColor);
+	}
+
+	.rounded-t {
+		border-top-left-radius: 0.5rem;
+		border-top-right-radius: 0.5rem;
+	}
+	.rounded-b {
+		border-bottom-left-radius: 0.5rem;
+		border-bottom-right-radius: 0.5rem;
+	}
+	.action__btn__container {
+		display: flex;
+		width: 100%;
+		height: 4rem;
+		justify-content: space-between;
+		margin-bottom: 0.75rem;
+	}
+	.minute__hour__grid {
+		display: grid;
+		grid-template-columns: repeat(4, minmax(0, 1fr));
+		grid-template-rows: repeat(3, minmax(0, 1fr));
+		width: 100%;
+	}
+	.minute__hour__grid button {
+		height: 2.5rem;
+		background-color: transparent;
+		border: none;
+		font-size: 1.3rem;
+	}
+	.minute__hour__grid button div {
+		border-radius: calc(infinity * 1px);
+		width: 32px;
+		height: 32px;
+	}
+</style>

package/dist/TimePicker5.svelte.d.ts

@@ -0,0 +1,14 @@
+type $$ComponentProps = {
+    colorScheme?: any;
+    timeText?: string;
+    name?: string;
+    title?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    position?: 'left-0' | 'right-0';
+    radius?: 'right' | 'left' | 'full';
+    onTimePicked?: (value: string) => void;
+};
+declare const TimePicker5: import("svelte").Component<$$ComponentProps, {}, "">;
+type TimePicker5 = ReturnType<typeof TimePicker5>;
+export default TimePicker5;

package/dist/index.d.ts

@@ -1,2 +1,5 @@
 import DatePicker5 from "./DatePicker5.svelte";
-export { DatePicker5 };
+import DropDown5 from "./DropDown5.svelte";
+import Input5 from "./Input5.svelte";
+import TimePicker5 from "./TimePicker5.svelte";
+export { DatePicker5, Input5, DropDown5, TimePicker5 };

package/dist/index.js

@@ -1,3 +1,6 @@
 // Reexport your entry components here
 import DatePicker5 from "./DatePicker5.svelte";
-export { DatePicker5 };
+import DropDown5 from "./DropDown5.svelte";
+import Input5 from "./Input5.svelte";
+import TimePicker5 from "./TimePicker5.svelte";
+export { DatePicker5, Input5, DropDown5, TimePicker5 };