@djcali570/component-lib 0.1.9 → 0.1.91

package/dist/Checkbox5.svelte

@@ -34,10 +34,6 @@
 	// svelte-ignore state_referenced_locally
 	const colorScheme = { ...defaultColorScheme, ...partialColorScheme };
 	const id = `checkbox-${Math.random().toString(36).slice(2, 8)}`;
-
-	$effect(() => {
-		onChange(checked);
-	});
 </script>
 
 <div
@@ -51,7 +47,19 @@
   "
 >
 	<label for={id}>
-		<input type="checkbox" {id} {name} bind:checked {disabled} />
+		<input
+			type="checkbox"
+			{id}
+			{name}
+			{checked}
+			{disabled}
+			onchange={(e) => {
+				const value = (e.target as HTMLInputElement).checked;
+				checked = value;
+				onChange(value);
+			}}
+		/>
+
 		<span class="air5__checkbox__custom">
 			{#if checked}
 				<svg viewBox="0 0 24 24">

package/dist/Input5.svelte

@@ -2,14 +2,6 @@
 	import { onMount } from 'svelte';
 	import type { Input5ColorScheme } from './types.js';
 
-	/**
-	 * Input5 v0.0.2
-	 *
-	 * Added color scheme partials
-	 * Added read only option
-	 * Allow 4 digits after decimal for floats
-	 */
-
 	let {
 		colorScheme: partialColorScheme = {},
 		name = 'input',
@@ -25,6 +17,8 @@
 		textArea = false,
 		textAreaHeight = 80,
 		readonly = false,
+		placeholder = '',
+		hideTitle = false,
 		onUpdate = (value) => {}
 	}: {
 		colorScheme?: Partial<Input5ColorScheme>;
@@ -41,6 +35,8 @@
 		textArea?: boolean;
 		textAreaHeight?: number;
 		readonly?: boolean | null | undefined;
+		placeholder?: string;
+		hideTitle?: boolean;
 		onUpdate?: (value: string) => void;
 	} = $props();
 
@@ -53,10 +49,12 @@
 		clearColor: '#989A9A',
 		clearHoverColor: '#1F2023',
 		counterTextColor: '#5ac1dd',
-		counterBgColor: '#1F2023'
+		counterBgColor: '#1F2023',
+		placeholderColor: '#989A9A'
 	};
 
 	// Merge partial colorScheme with defaults
+	// svelte-ignore state_referenced_locally
 	const colorScheme = { ...defaultColorScheme, ...partialColorScheme };
 
 	const id = generateRandomString();
@@ -161,6 +159,7 @@
 	 * Assign function to validator
 	 */
 	if (
+		// svelte-ignore state_referenced_locally
 		validator === 'float' ||
 		validator === 'number' ||
 		validator === 'phone' ||
@@ -169,22 +168,23 @@
 		keydownHandler = mainKeyDownHandler;
 	}
 
+	// svelte-ignore state_referenced_locally
 	if (validator === 'float') {
 		inputHandler = (e: Event) => mainInputInputHandler(e, floatPattern);
 	}
-
+	// svelte-ignore state_referenced_locally
 	if (validator === 'number') {
 		inputHandler = (e: Event) => mainInputInputHandler(e, numberOnlyPattern);
 	}
-
+	// svelte-ignore state_referenced_locally
 	if (validator === 'phone') {
 		inputHandler = (e: Event) => mainInputInputHandler(e, phoneNumberPattern);
 	}
-
+	// svelte-ignore state_referenced_locally
 	if (validator === 'phone') {
 		inputHandler = (e: Event) => mainInputInputHandler(e, phoneNumberPattern);
 	}
-
+	// svelte-ignore state_referenced_locally
 	if (validator === 'letter') {
 		inputHandler = (e: Event) => mainInputInputHandler(e, letterOnlyPattern);
 	}
@@ -225,11 +225,16 @@
 --air5__counterTextColor: {colorScheme.counterTextColor};
 --air5__counterBgColor: {colorScheme.counterBgColor};
 --air5__textAreaHeight: {textAreaHeight}px;
+--air5__placeholderColor: {colorScheme.placeholderColor};
 "
 >
 	<label for="input-{id}">
 		<div>
-			<div class="air5__title">{title}</div>
+			{#if !hideTitle}
+				<div class="air5__title">{title}</div>
+			{:else}
+				<div class="air5__title">&nbsp;</div>
+			{/if}
 			<div class="air5__input">
 				{#if textArea}
 					<textarea
@@ -241,6 +246,7 @@
 						{maxlength}
 						{autocomplete}
 						{readonly}
+						{placeholder}
 					></textarea>
 				{:else}
 					<input
@@ -253,6 +259,7 @@
 						{autocomplete}
 						{type}
 						{readonly}
+						{placeholder}
 					/>
 				{/if}
 				<div class="air5__options__container">
@@ -327,7 +334,7 @@
 
 	.air5__input {
 		display: grid;
-		grid-template-columns: 1fr min-content;		
+		grid-template-columns: 1fr min-content;
 		padding-inline: 0.75rem;
 		color: var(--air5__mainTextColor);
 	}
@@ -415,4 +422,10 @@
 		color: var(--air5__counterTextColor);
 		background-color: var(--air5__counterBgColor);
 	}
+
+	input::placeholder,
+	textarea::placeholder {
+		color: var(--air5__placeholderColor);
+		opacity: 1; /* ensures color is fully visible across browsers */
+	}
 </style>

package/dist/Input5.svelte.d.ts

@@ -14,6 +14,8 @@ type $$ComponentProps = {
     textArea?: boolean;
     textAreaHeight?: number;
     readonly?: boolean | null | undefined;
+    placeholder?: string;
+    hideTitle?: boolean;
     onUpdate?: (value: string) => void;
 };
 declare const Input5: import("svelte").Component<$$ComponentProps, {}, "value">;

package/dist/types.d.ts

@@ -9,6 +9,7 @@ export interface Input5ColorScheme {
     clearHoverColor?: string;
     counterTextColor?: string;
     counterBgColor?: string;
+    placeholderColor?: string;
 }
 export interface DatePicker5ColorScheme {
     labelTextColor?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@djcali570/component-lib",
-	"version": "0.1.9",
+	"version": "0.1.91",
 	"files": [
 		"dist",
 		"!dist/**/*.test.*",