@djcali570/component-lib 0.0.9 → 0.0.11

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,15 @@ 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>
 ```

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}
@@ -69,7 +77,7 @@
 				<!-- Y-axis labels -->
 				<div class="yaxis">
 					{#each yAxis as label, i}
-						<div class="yaxis__label" style="bottom: {(i / yAxis.length) * 100 - 2.6}%;">
+						<div class="yaxis__label" style="bottom: {(i / yAxis.length) * 100 - 3.2}%;">
 							{label}
 						</div>
 					{/each}
@@ -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: Arial, sans-serif;
+		font-family: inherit;
 	}
 
 	.chart5__layout__container {
@@ -156,16 +169,21 @@
 	}
 
 	.yaxis {
-		padding-right: 0.5rem;
+		position: relative;
+		padding-right: 0.5em;
 		height: 100%;
-		width: 1em;
+		width: 1.2em;
+		box-sizing: border-box;
 	}
 
 	.yaxis__label {
 		position: absolute;
+		width: 100%;
 		text-align: right;
 		font-size: 0.9rem;
 		color: var(--chart5__yTextColor);
+		padding-right: 0.25em;
+		box-sizing: border-box;
 	}
 
 	.data-area {
@@ -230,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: 1em;
-		padding-right: 0.5rem;
+		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/package.json

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