@djcali570/component-lib 0.0.2 → 0.0.4

package/dist/Input5.svelte

@@ -0,0 +1,412 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+
+	/**
+	 * Input5 v0.0.1
+	 *
+	 * Added read only option
+	 * Allow 4 digits after decimal for floats
+	 */
+
+	let {
+		colorScheme = {
+			mainTextColor: '#D6D6D6',
+			mainBgColor: '#121212',
+			titleColor: '#989A9A',
+			borderColor: '#262626',
+			focusedColor: '#4787ac',
+			clearColor: '#989A9A',
+			clearHoverColor: '#1F2023',
+			counterTextColor: '#4787ac',
+			counterBgColor: '#1F2023'
+		},
+		name = 'input',
+		title = 'Title',
+		value = $bindable(),
+		type = 'text',
+		disabled = false,
+		showCounter = false,
+		maxlength,
+		uppercase,
+		autocomplete = 'off',
+		validator = 'none',
+		textArea = false,
+		textAreaHeight = 80,
+		readonly = false,
+		onUpdate = (value) => {}
+	}: {
+		colorScheme?: any;
+		name?: string;
+		title?: string;
+		value?: any;
+		type?: 'text' | 'number' | 'password';
+		disabled?: boolean;
+		showCounter?: boolean;
+		maxlength?: number;
+		uppercase?: boolean;
+		autocomplete?: AutoFill | null | undefined;
+		validator?: 'none' | 'number' | 'float' | 'phone' | 'letter';
+		textArea?: boolean;
+		textAreaHeight?: number;
+		readonly?: boolean | null | undefined;
+		onUpdate?: (value: string) => void;
+	} = $props();
+
+	const id = generateRandomString();
+	let count = $state(0);
+	let inputOldValue: string = $state('');
+	let inputOldCursor: number | null = $state(null);
+	let inputElement: HTMLInputElement | null = $state(null);
+	let keydownHandler: (e: Event) => void = $state(() => {});
+	let inputHandler: (e: Event) => void = $state(() => {});
+
+	/**
+	 * Regex Validators
+	 */
+	const floatPattern: RegExp = /^[0-9]{0,10}(\.[0-9]{0,4})?$/;
+	const numberOnlyPattern: RegExp = /^[0-9]*$/;
+	const phoneNumberPattern: RegExp = /^[0-9]{0,10}$/;
+	const letterOnlyPattern: RegExp = /^[A-Za-z]*$/;
+
+	$effect(() => {
+		if (value) {
+			count = value.length;
+			if (uppercase) {
+				if (typeof value === 'string') {
+					value = value.toUpperCase();
+				}
+			}
+		} else {
+			count = 0;
+		}
+	});
+
+	$effect(() => {
+		if (value) {
+			onUpdate(value);
+		}
+	});
+
+	/**
+	 * Keydown Handlers
+	 */
+	const mainKeyDownHandler = (e: Event) => {
+		const el = e.target as HTMLInputElement;
+		inputOldValue = el.value;
+		inputOldCursor = el.selectionEnd;
+	};
+
+	/**
+	 * Input Handlers
+	 */
+	const mainInputInputHandler = (e: Event, exp: RegExp) => {
+		let newValue: string;
+
+		// Validation for phone input
+		if (validator === 'phone') {
+			if (!value) return value;
+
+			newValue = value.replace(/[^\d]/g, '');
+
+			if (newValue === '') {
+				value = '';
+			}
+
+			const phoneLength = newValue.length;
+
+			if (phoneLength < 4) {
+				value = `${newValue.slice(0, 3)}`;
+				return newValue;
+			}
+
+			if (phoneLength < 7) {
+				value = `${newValue.slice(0, 3)}-${newValue.slice(3)}`;
+				return newValue;
+			}
+			if (phoneLength > 7) {
+				value = `${newValue.slice(0, 3)}-${newValue.slice(3)}-`;
+			}
+
+			value = `${newValue.slice(0, 3)}-${newValue.slice(3, 6)}-${newValue.slice(6, 10)}`;
+		} else {
+			// Validation for others
+			newValue = value;
+			if (newValue.match(exp)) {
+				value = newValue;
+			} else {
+				value = inputOldValue;
+			}
+		}
+	};
+
+	/**
+	 * Add the event listeners for validation
+	 */
+	onMount(() => {
+		inputElement = document.querySelector(`#input-${id}`);
+		if (inputElement && validator !== 'none') {
+			inputElement.addEventListener('keydown', keydownHandler);
+			inputElement.addEventListener('input', inputHandler);
+		}
+	});
+
+	/**
+	 * Assign function to validator
+	 */
+	if (
+		validator === 'float' ||
+		validator === 'number' ||
+		validator === 'phone' ||
+		validator === 'letter'
+	) {
+		keydownHandler = mainKeyDownHandler;
+	}
+
+	if (validator === 'float') {
+		inputHandler = (e: Event) => mainInputInputHandler(e, floatPattern);
+	}
+
+	if (validator === 'number') {
+		inputHandler = (e: Event) => mainInputInputHandler(e, numberOnlyPattern);
+	}
+
+	if (validator === 'phone') {
+		inputHandler = (e: Event) => mainInputInputHandler(e, phoneNumberPattern);
+	}
+
+	if (validator === 'phone') {
+		inputHandler = (e: Event) => mainInputInputHandler(e, phoneNumberPattern);
+	}
+
+	if (validator === 'letter') {
+		inputHandler = (e: Event) => mainInputInputHandler(e, letterOnlyPattern);
+	}
+
+	/**
+	 * 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;
+	}
+
+	function clearField() {
+		value = '';
+		count = 0;
+	}
+</script>
+
+<div
+	class="air5__input__container"
+	style="
+--air5__mainTextColor: {colorScheme.mainTextColor};
+--air5__mainBgColor: {colorScheme.mainBgColor};
+--air5__titleColor: {colorScheme.titleColor};
+--air5__borderColor: {colorScheme.borderColor};
+--air5__focusedColor: {colorScheme.focusedColor};
+--air5__clearColor: {colorScheme.clearColor};
+--air5__clearHoverColor: {colorScheme.clearHoverColor};
+--air5__counterTextColor: {colorScheme.counterTextColor};
+--air5__counterBgColor: {colorScheme.counterBgColor};
+--air5__textAreaHeight: {textAreaHeight}px;
+"
+>
+	<label for="input-{id}">
+		<div>
+			<div class="air5__title">{title}</div>
+			<div class="air5__input">
+				{#if textArea}
+					<textarea
+						id="input-{id}"
+						{name}
+						bind:value
+						{disabled}
+						aria-label={name}
+						{maxlength}
+						{autocomplete}
+						{readonly}
+					></textarea>
+				{:else}
+					<input
+						id="input-{id}"
+						{name}
+						bind:value
+						{disabled}
+						aria-label={name}
+						{maxlength}
+						{autocomplete}
+						{type}
+						{readonly}
+					/>
+				{/if}
+				<div class="air5__options__container">
+					<div class="air5__clear__container">
+						{#if value && !disabled}
+							<button
+								aria-label="clear {title}"
+								id="air5__clear__btn-{id}"
+								type="button"
+								tabindex="-1"
+								onclick={clearField}
+								><div class="air5__clear__button__svg">
+									<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
+							>
+						{/if}
+					</div>
+					{#if showCounter}
+						<div class="air5__counter__container">
+							<div class="air5__counter">{count}/{maxlength}</div>
+						</div>
+					{/if}
+				</div>
+			</div>
+		</div>
+	</label>
+</div>
+
+<style>
+	.air5__input__container {
+		display: flex;
+		flex-direction: column;
+		width: 100%;
+		min-height: 64px;
+		margin: 0;
+		line-height: 1.25rem;
+		border-radius: 0.5rem;
+		background-color: var(--air5__mainBgColor);
+		box-shadow: inset 0 0 0 1px var(--air5__borderColor);
+		border: none;
+		font-family: Arial, sans-serif;
+	}
+
+	.air5__input__container:focus-within {
+		box-shadow: inset 0 0 0 2px var(--air5__focusedColor);
+	}
+
+	.air5__title {
+		font-size: 0.75rem;
+		padding-inline: 0.75rem;
+		padding-top: 0.5rem;
+		font-family: inherit;
+		color: var(--air5__titleColor);
+	}
+
+	.air5__input {
+		display: grid;
+		grid-template-columns: 1fr min-content;
+		height: 24px;
+		padding-inline: 0.75rem;
+		color: var(--air5__mainTextColor);
+	}
+	input {
+		width: 100%;
+		outline: none;
+		font-family: inherit;
+		height: 24px;
+		color: var(--air5__mainTextColor);
+		background-color: var(--air5__mainBgColor);
+		border: none;
+		padding: 0px;
+	}
+
+	textarea {
+		background-color: transparent;
+		border: none;
+		font-family: inherit;
+		padding: 0;
+		line-height: inherit;
+		width: 100%;
+		height: var(--air5__textAreaHeight);
+		outline: none;
+		color: inherit;
+		appearance: none;
+		resize: none;
+		-webkit-appearance: none;
+	}
+
+	input:autofill {
+		box-shadow: 0 0 0 50px var(--air5__mainBgColor) inset;
+		-webkit-text-fill-color: var(--air5__mainTextColor);
+	}
+	.air5__options__container {
+		display: flex;
+		flex-direction: column;
+		min-width: 2rem;
+	}
+	.air5__clear__container {
+		display: flex;
+		height: 100%;
+		width: 100%;
+		justify-content: flex-end;
+		align-items: flex-start;
+	}
+
+	.air5__input__container:focus-within .air5__clear__container button {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.air5__clear__container button {
+		display: none;
+		height: 24px;
+		width: 24px;
+		border-radius: calc(infinity * 1px);
+		border: none;
+		cursor: pointer;
+		background-color: transparent;
+	}
+
+	.air5__clear__container button:hover {
+		background-color: var(--air5__clearHoverColor);
+	}
+
+	.air5__clear__button__svg {
+		height: 14px;
+		width: 14px;
+		color: var(--air5__clearColor);
+	}
+
+	.air5__counter__container {
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+		padding-bottom: 0.5rem;
+	}
+
+	.air5__counter {
+		font-size: 0.65rem;
+		padding: 0.25rem;
+		border-radius: 0.75rem;
+		font-family: inherit;
+		color: var(--air5__counterTextColor);
+		background-color: var(--air5__counterBgColor);
+	}
+</style>

package/dist/Input5.svelte.d.ts

@@ -0,0 +1,20 @@
+type $$ComponentProps = {
+    colorScheme?: any;
+    name?: string;
+    title?: string;
+    value?: any;
+    type?: 'text' | 'number' | 'password';
+    disabled?: boolean;
+    showCounter?: boolean;
+    maxlength?: number;
+    uppercase?: boolean;
+    autocomplete?: AutoFill | null | undefined;
+    validator?: 'none' | 'number' | 'float' | 'phone' | 'letter';
+    textArea?: boolean;
+    textAreaHeight?: number;
+    readonly?: boolean | null | undefined;
+    onUpdate?: (value: string) => void;
+};
+declare const Input5: import("svelte").Component<$$ComponentProps, {}, "value">;
+type Input5 = ReturnType<typeof Input5>;
+export default Input5;