@djcali570/component-lib

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

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

import { Accordion5 } from '@djcali570/component-lib';
import type { Accordion5ColorScheme } from '@djcali570/component-lib';

let acs: Accordion5ColorScheme = {
		bgColor: '#121212',
		textColor: '#D6D6D6',
		triggerColor: '#D6D6D6'
}

Props

• title (Snippet) - Snippet for title content
• panel (Snippet) - Snippet for accordion content
• iconWidth (string) - Width of icon eg. "1rem"
• iconHeight (string) - Height of icon eg. "1rem"

Use of the Accordion component

<Accordion5 colorScheme={acs}>
	{#snippet title()}
		<h1>My Title</h1>
	{/snippet}
    {#snippet panel()}
        <p>Accordion Contents</p>
    {/snippet}
</Accordion5>

Chart

Use the default or customize the chart color scheme

import { Chart5 } from '@djcali570/component-lib';
import type { Chart5ColorScheme } from '@djcali570/component-lib';

let ccs: Chart5ColorScheme = {
	bgColor: '#121212',
	gridLineColor: '#303030',
	xAxisTextColor: '#5ac1dd',
	yAxisTextColor: '#5ac1dd'
}

Props

• title (Snippet) - Use for title of chart
• maxWidth (string) - Sets the max width of chart eg. "400px"
• height (string) - Sets the height of the chart eg. "400px"
• labels (string[]) - Array of strings for the labels
• values (number[]) - Array of numbers for the values

Use of the Chart component

let labels: string[] = ['Label1', 'label2'];
let values: number[] = [35, 20];

<Chart5 {labels} {values} colorScheme={ccs} height="300px">
	{#snippet title()}
		<p>My Title</p>
	{/snippet}
</Chart5>

Admin Panel

Use the default or customize the color scheme

import { AdminPanel5 } from '@djcali570/component-lib';
import type { AdminPanel5ColorScheme } from '@djcali570/component-lib';

let apcs: AdminPanel5ColorScheme = {
	panelMenuBgColor: '#181818',
	panelBgColor: '#151515',
	drawerBgColor: '#121212',
	drawerTitleBgColor: '#151515',
	iconColor: '#D6D6D6'
}

Use of the Admin Panel component

<AdminPanel5>
	{#snippet navigation()}
		<div>This is Navigation</div>
	{/snippet}
	{#snippet title()}
		<div style="display: flex; align-items:center; height:100%; width:100%;">
			<p style="color: #fff;">Title</p>
		</div>
	{/snippet}
	{#snippet panel()}
		<div style="display: flex; align-items:center; width:100%; padding:1em;">
			<p style="color: #fff;">This is the content</p>
		</div>
	{/snippet}
	{#snippet drawerTitle()}
		<div
			style="display:flex; justify-content:flex-start; align-items:center; width: 100%; height:100%;"
		>
			<div style="color: white;">This is a drawer title</div>
		</div>
	{/snippet}
</AdminPanel5>

Bottom Sheet

Use the default or customize the color scheme

import { BottomSheet5 } from '@djcali570/component-lib';
import type { BottomSheet5ColorScheme } from '@djcali570/component-lib';

let bscs: BottomSheet5ColorScheme = {
	bgColor: '#121212',
}

Props

• modalStatus (boolean) - bindable to close/open modal outside component
• content (Snippet) - Snippet for sheet content
• rounded (boolean) - Set rounded corners to top
• top (string) - Set height of bottom sheet. eg. "50%", "1rem"

Use of the component

let modalStatus = $state(false);

<BottomSheet5 bind:modalStatus top="50%">
	{#snippet content()}
		<div>Place bottom sheet content here</div>
	{/snippet}
</BottomSheet5>

Dialog

Use the default or customize the color scheme

import { Dialog5 } from '@djcali570/component-lib';
import type { Dialog5ColorScheme } from '@djcali570/component-lib';

let d5cs: Dialog5ColorScheme = {
		bgColor: '#121212',
        titleBgColor: '#181818',
		textColor: '#fcfcfc',
        confirmTextColor: '#fb2c36',
		borderColor: '#262626',
		okButtonBgColor: '#181818',
		confirmButtonBgColor: '#181818'
}

Props

• modalStatus (boolean) - bindable to close/open modal outside component
• minWidth / minHeight (string) - set height or width of the dialog. eg '320px'
• dialogType ('confirm-cancel' | 'ok') - use ok for a simple message or use confirm/cancel to use the onUpdate callback.
• title (Snippet) - use for title section of the dialog
• content (Snippet) - use for the content or message of the dialog
• confirmButtonText / cancelButtonText / okButtonText (string) - Change default button text
• onUpdate ((value: boolean) => void)) - Callback for the cancel/confirm button.

Use of the component

let modalStatus = $state(false);

function dialogUpdated(v: boolean) {
	console.log(v);
}

<Dialog5
bind:modalStatus
dialogType="confirm-cancel"
onUpdate={(v) => dialogUpdated(v)}
>
{#snippet title()}
	<div style="width: 100%; display: flex; justify-content: center; padding: 1rem;">
		Dialog Title
	</div>
{/snippet}
{#snippet content()}
	<div>Place dialog content here</div>
{/snippet}
</Dialog5>

Updates

0.1.5 - Fixed issue where Accordion did not handle dynamic content.

0.1.4 - Updated Accordion component to add innerPadding prop.

0.1.3 - Updated Time Picker to allow binding to timeText.

0.1.2 - Fixed some minor styling issues with Dialog component.

0.1.1 - Added Bottom Sheet component & Dialog component.

0.1.0 - Updated Accordion component to use snippets for title.

0.0.14 - Fixed Input5 textarea height was not being applied. Removed Tailwind dependencies.

0.0.13 - Added Admin Panel 5 Component.

0.0.12 - Made all components colorScheme properties optional.