@djcali570/component-lib 0.0.10 → 0.0.12

package/README.md

@@ -1,8 +1,36 @@
 # DJCali570 Svelte 5 Component Library
 
-
 Components make use of Svelte's runes so will only work with Svelte 5
 
+## Input
+
+Use default or customize the input color scheme
+
+```bash
+import { Input5 } from '@djcali570/component-lib';
+import type { Input5ColorScheme } from '@djcali570/component-lib';
+
+let ics: Input5ColorScheme = {
+	mainTextColor: '#D6D6D6',
+	mainBgColor: '#121212',
+	titleColor: '#989A9A'
+}
+```
+
+#### Features
+- Counter
+- readonly / disabled options
+- onUpdate Callback
+- types: Text, Number or Password
+- Input formatting
+- Input or Textarea
+
+### Use of the Input component
+
+```
+<Input5 title="Input Title" colorScheme={ics} validator="phone" />
+```
+
 ## Accordion
 
 Use default or customize the accordion color scheme
@@ -18,12 +46,13 @@ let acs: Accordion5ColorScheme = {
 }
 ```
 
-Use of the Accordion component
+### Use of the Accordion component
+
 ```
 <Accordion5 colorScheme={acs} title='My Title'>
     {#snippet panel()}
         <p>Accordion Contents</p>
-    {/Snippet}
+    {/snippet}
 </Accordion5>
 ```
 
@@ -43,10 +72,18 @@ let ccs: Chart5ColorScheme = {
 }
 ```
 
-Use of the Chart component
+### Use of the Chart component
+
 ```
 let labels: string[] = ['Label1', 'label2'];
 let values: number[] = [35, 20];
 
-<Chart5 {labels} {values} colorScheme={ccs} height="300px" />
+<Chart5 {labels} {values} colorScheme={ccs} height="300px">
+	{#snippet title()}
+		<p>My Title</p>
+	{/snippet}
+</Chart5>
 ```
+
+# Updates
+0.0.12	- Made all components colorScheme properties optional.

package/dist/Chart5.svelte

@@ -1,14 +1,17 @@
 <script lang="ts">
+	import type { Snippet } from 'svelte';
 	import type { Chart5ColorScheme } from './types.js';
 
 	let {
 		colorScheme: partialColorScheme = {},
+		title,
 		maxWidth = '400px',
 		height = '400px',
 		labels = [],
 		values = []
 	}: {
 		colorScheme?: Partial<Chart5ColorScheme>;
+		title?: Snippet;
 		maxWidth?: string;
 		height?: string;
 		labels?: string[];
@@ -16,7 +19,7 @@
 	} = $props();
 
 	const defaultColorScheme: Chart5ColorScheme = {
-		bgColor: '#121212',
+		bgColor: '#121212',		
 		gridLineColor: '#303030',
 		xAxisTextColor: '#5ac1dd',
 		yAxisTextColor: '#5ac1dd'
@@ -58,9 +61,14 @@
         --chart5__bgColor: {colorScheme.bgColor};
         --chart5__glColor: {colorScheme.gridLineColor};
         --chart5__yTextColor: {colorScheme.yAxisTextColor};
-        --chart5__xTextColor: {colorScheme.xAxisTextColor};
+        --chart5__xTextColor: {colorScheme.xAxisTextColor};        
 	"
 >
+	{#if title}
+		<div class="title">
+            {@render title()}
+        </div>
+	{/if}
 	{#if values.length === 0}
 		<div class="empty-state">No data available</div>
 	{:else}
@@ -92,7 +100,7 @@
 								<div
 									class="data-bar"
 									style="height: {(data / maxY) * highPct}%;"
-									title="Value: {data} for {labels[i]}"
+									title={data.toString()}
 								></div>
 							</div>
 						{/each}
@@ -116,6 +124,11 @@
 </div>
 
 <style>
+	.title {
+		width: 100%;
+		padding: 0.5em;		
+		box-sizing: border-box;
+	}
 	.empty-state {
 		display: flex;
 		justify-content: center;
@@ -135,7 +148,7 @@
 		flex-direction: column;
 		justify-content: center;
 		align-items: center;
-		font-family: inherit, sans-serif, Helvetica;
+		font-family: inherit;
 	}
 
 	.chart5__layout__container {
@@ -156,21 +169,21 @@
 	}
 
 	.yaxis {
-        position: relative;
+		position: relative;
 		padding-right: 0.5em;
 		height: 100%;
 		width: 1.2em;
-        box-sizing: border-box;
+		box-sizing: border-box;
 	}
 
 	.yaxis__label {
 		position: absolute;
-        width: 100%;
+		width: 100%;
 		text-align: right;
 		font-size: 0.9rem;
 		color: var(--chart5__yTextColor);
-        padding-right: 0.25em;
-        box-sizing: border-box;
+		padding-right: 0.25em;
+		box-sizing: border-box;
 	}
 
 	.data-area {
@@ -235,24 +248,26 @@
 	.xaxis__container {
 		display: flex;
 		width: 100%;
+		height: 2em;
 		box-sizing: border-box;
 		padding-block: 0.5rem;
 		padding-inline: 0.5rem;
 	}
 	.xaxis {
 		display: grid;
-		min-height: 2rem;
 		flex: 1;
 		box-sizing: border-box;
 	}
 
 	.xaxis__label {
 		text-align: center;
-		font-size: 0.9rem;
+		font-size: 0.7rem;
 		color: var(--chart5__xTextColor);
 	}
 	.xaxis__dummy {
 		width: 1.2em;
+		height: 100%;
 		padding-right: 0.5em;
+		box-sizing: border-box;
 	}
 </style>

package/dist/Chart5.svelte.d.ts

@@ -1,6 +1,8 @@
+import type { Snippet } from 'svelte';
 import type { Chart5ColorScheme } from './types.js';
 type $$ComponentProps = {
     colorScheme?: Partial<Chart5ColorScheme>;
+    title?: Snippet;
     maxWidth?: string;
     height?: string;
     labels?: string[];

package/dist/DatePicker5.svelte

@@ -40,7 +40,7 @@
 		inputTextColor: '#D6D6D6',
 		inputBgColor: '#121212',
 		inputBorderColor: '#262626',
-		inputFocusedBorderColor: '#4787ac',
+		inputFocusedBorderColor: '#5ac1dd',
 		inputClearColor: '#989A9A',
 		inputClearHoverColor: '#1F2023',
 		placeholderColor: '#46464A',
@@ -49,7 +49,7 @@
 		pickerTextColor: '#D6D6D6',
 		pickerInactiveDayColor: '#46464A',
 		pickerTodayColor: '#BF3131',
-		pickerSelectedDayBgColor: '#4787ac',
+		pickerSelectedDayBgColor: '#5ac1dd',
 		pickerSelectedDayTextColor: '#121212',
 		pickerChevronHoverColor: '#1F2023',
 		pickerMaxHeight: '340px'

package/dist/DropDown5.svelte

@@ -32,9 +32,9 @@
 		borderColor: '#262626',
 		titleColor: '#989A9A',
 		dropdownBgColor: '#141414',
-		focusedColor: '#4787ac',
+		focusedColor: '#5ac1dd',
 		itemTextColor: '#D6D6D6',
-		itemHoverBgColor: '#4787ac',
+		itemHoverBgColor: '#5ac1dd',
 		itemHoverTextColor: '#121212'
 	};
 

package/dist/Input5.svelte

@@ -49,10 +49,10 @@
 		mainBgColor: '#121212',
 		titleColor: '#989A9A',
 		borderColor: '#262626',
-		focusedColor: '#4787ac',
+		focusedColor: '#5ac1dd',
 		clearColor: '#989A9A',
 		clearHoverColor: '#1F2023',
-		counterTextColor: '#4787ac',
+		counterTextColor: '#5ac1dd',
 		counterBgColor: '#1F2023'
 	};
 

package/dist/TimePicker5.svelte

@@ -33,7 +33,7 @@
 		textColor: '#D6D6D6',
 		bgColor: '#121212',
 		borderColor: '#262626',
-		focusedColor: '#4787ac',
+		focusedColor: '#5ac1dd',
 		titleColor: '#989A9A',
 		clearColor: '#989A9A',
 		clearHoverColor: '#1F2023',

package/dist/types.d.ts

@@ -1,43 +1,43 @@
 import type { Component } from "svelte";
 export interface Input5ColorScheme {
-    mainTextColor: string;
-    mainBgColor: string;
-    titleColor: string;
-    borderColor: string;
-    focusedColor: string;
-    clearColor: string;
-    clearHoverColor: string;
-    counterTextColor: string;
-    counterBgColor: string;
+    mainTextColor?: string;
+    mainBgColor?: string;
+    titleColor?: string;
+    borderColor?: string;
+    focusedColor?: string;
+    clearColor?: string;
+    clearHoverColor?: string;
+    counterTextColor?: string;
+    counterBgColor?: string;
 }
 export interface DatePicker5ColorScheme {
-    labelTextColor: string;
-    inputTextColor: string;
-    inputBgColor: string;
-    inputBorderColor: string;
-    inputFocusedBorderColor: string;
-    inputClearColor: string;
-    inputClearHoverColor: string;
-    placeholderColor: string;
-    pickerBgColor: string;
-    pickerMonthBgColor: string;
-    pickerTextColor: string;
-    pickerInactiveDayColor: string;
-    pickerTodayColor: string;
-    pickerSelectedDayBgColor: string;
-    pickerSelectedDayTextColor: string;
-    pickerChevronHoverColor: string;
-    pickerMaxHeight: string;
+    labelTextColor?: string;
+    inputTextColor?: string;
+    inputBgColor?: string;
+    inputBorderColor?: string;
+    inputFocusedBorderColor?: string;
+    inputClearColor?: string;
+    inputClearHoverColor?: string;
+    placeholderColor?: string;
+    pickerBgColor?: string;
+    pickerMonthBgColor?: string;
+    pickerTextColor?: string;
+    pickerInactiveDayColor?: string;
+    pickerTodayColor?: string;
+    pickerSelectedDayBgColor?: string;
+    pickerSelectedDayTextColor?: string;
+    pickerChevronHoverColor?: string;
+    pickerMaxHeight?: string;
 }
 export interface TimePicker5ColorScheme {
-    textColor: string;
-    bgColor: string;
-    borderColor: string;
-    focusedColor: string;
-    titleColor: string;
-    clearColor: string;
-    clearHoverColor: string;
-    dropdownBgColor: string;
+    textColor?: string;
+    bgColor?: string;
+    borderColor?: string;
+    focusedColor?: string;
+    titleColor?: string;
+    clearColor?: string;
+    clearHoverColor?: string;
+    dropdownBgColor?: string;
 }
 export interface Accordion5ColorScheme {
     bgColor?: string;
@@ -49,12 +49,12 @@ export interface DropDown5ColorScheme {
     bgColor?: string;
     textColor?: string;
     borderColor?: string;
-    titleColor: string;
-    dropdownBgColor: string;
-    focusedColor: string;
-    itemTextColor: string;
-    itemHoverBgColor: string;
-    itemHoverTextColor: string;
+    titleColor?: string;
+    dropdownBgColor?: string;
+    focusedColor?: string;
+    itemTextColor?: string;
+    itemHoverBgColor?: string;
+    itemHoverTextColor?: string;
 }
 export interface DropDownItem<TProps extends Record<string, any> = {}> {
     id?: string;

package/package.json

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