@djcali570/component-lib 0.1.0 → 0.1.2

package/README.md

@@ -46,9 +46,12 @@ let acs: Accordion5ColorScheme = {
 }
 ```
 
-#### Features
-- Use of snippets to customize all text
-- Change size of chevron icon
+#### 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
 
@@ -79,6 +82,13 @@ let ccs: Chart5ColorScheme = {
 }
 ```
 
+#### 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
 
 ```
@@ -136,8 +146,93 @@ let apcs: AdminPanel5ColorScheme = {
 </AdminPanel5>
 ```
 
+## Bottom Sheet
+
+Use the default or customize the color scheme
+
+```bash
+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
+
+```bash
+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.00	- Updated Accordion component to use snippets for title.
+#### 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.

package/dist/BottomSheet5.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { fly } from 'svelte/transition';
+	import type { BottomSheet5ColorScheme } from './types.js';
+
+	let {
+		colorScheme: partialColorScheme = {},
+		modalStatus = $bindable(),
+		content,
+		rounded = true,
+		top = '1rem'
+	}: {
+		colorScheme?: Partial<BottomSheet5ColorScheme>;
+		modalStatus: boolean;
+		content?: Snippet;
+		position?: 'centered' | 'fixed bottom';
+		rounded?: boolean;
+		top?: string;
+	} = $props();
+
+	// Default colorScheme
+	const defaultColorScheme: BottomSheet5ColorScheme = {
+		bgColor: '#121212'
+	};
+
+	// Merge partial colorScheme with defaults
+	const colorScheme = { ...defaultColorScheme, ...partialColorScheme };
+</script>
+
+{#if modalStatus}
+	<div class="dialog__bg" style="--m5-bgColor: {colorScheme.bgColor}; --m5-top: {top};">
+		<div
+			class="dialog__container"
+			role="dialog"
+			aria-modal="true"
+			aria-label="Bottom Sheet Dialog"
+			transition:fly={{ y: 400, duration: 200 }}
+			class:m5__rounded={rounded}
+		>
+			{#if content}
+				{@render content()}
+			{:else}
+				<div class="m5__default__content">
+					<button onclick={() => (modalStatus = false)}>Close</button>
+				</div>
+			{/if}
+		</div>
+	</div>
+{/if}
+
+<style>
+	.dialog__bg {
+		position: fixed;
+		top: var(--m5-top);
+		left: 0;
+		width: 100%;
+		height: 100%;
+		z-index: 50;
+	}
+	.dialog__container {
+		display: flex;
+		width: 100%;
+		height: 100%;
+		overflow-y: hidden;
+		background-color: var(--m5-bgColor);
+	}
+	.m5__rounded {
+		border-top-left-radius: 1rem;
+		border-top-right-radius: 1rem;
+	}
+	.m5__default__content {
+		display: flex;
+		justify-content: flex-end;
+		width: 100%;
+		height: 50px;
+		background-color: #181818;
+	}
+	.m5__default__content button {
+		color: white;
+		background-color: transparent;
+		border: none;
+		cursor: pointer;
+	}
+</style>

package/dist/BottomSheet5.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+import type { BottomSheet5ColorScheme } from './types.js';
+type $$ComponentProps = {
+    colorScheme?: Partial<BottomSheet5ColorScheme>;
+    modalStatus: boolean;
+    content?: Snippet;
+    position?: 'centered' | 'fixed bottom';
+    rounded?: boolean;
+    top?: string;
+};
+declare const BottomSheet5: import("svelte").Component<$$ComponentProps, {}, "modalStatus">;
+type BottomSheet5 = ReturnType<typeof BottomSheet5>;
+export default BottomSheet5;

package/dist/Dialog5.svelte

@@ -0,0 +1,219 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { Dialog5ColorScheme } from './types.js';
+	import { fly } from 'svelte/transition';
+
+	let {
+		colorScheme: partialColorScheme = {},
+		modalStatus = $bindable(),
+		minWidth = '360px',
+		minHeight = '250px',
+		dialogType = 'ok',
+		title,
+		content,
+		confirmButtonText = 'Confirm',
+		cancelButtonText = 'Cancel',
+		okButtonText = 'OK',
+		onUpdate = (value) => {}
+	}: {
+		colorScheme?: Partial<Dialog5ColorScheme>;
+		modalStatus: boolean;
+		minWidth?: string;
+		minHeight?: string;
+		dialogType?: 'confirm-cancel' | 'ok';
+		title?: Snippet;
+		message?: string;
+		content?: Snippet;
+		confirmButtonText?: string;
+		cancelButtonText?: string;
+		okButtonText?: string;
+		onUpdate?: (value: boolean) => void;
+	} = $props();
+
+	// Default colorScheme
+	const defaultColorScheme: Dialog5ColorScheme = {
+		bgColor: '#121212',
+		titleBgColor: '#181818',
+		textColor: '#fcfcfc',
+		confirmTextColor: '#fb2c36',
+		borderColor: '#262626',
+		okButtonBgColor: '#181818',
+		confirmButtonBgColor: '#181818'
+	};
+
+	// Merge partial colorScheme with defaults
+	const colorScheme = { ...defaultColorScheme, ...partialColorScheme };
+
+	let confirmed: boolean = $state(false);
+	const menuId = `dialog5-${generateRandomString()}`;
+	const contentId = `dialog5-content-${generateRandomString()}`;
+
+	function canceled() {
+		confirmed = false;
+		modalStatus = false;
+		onUpdate(false);
+	}
+
+	function confirm() {
+		confirmed = true;
+		modalStatus = false;
+		onUpdate(true);
+	}
+
+	/**
+	 * Generate a random 6 digit string to differentiate
+	 * the menus
+	 */
+	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;
+	}
+</script>
+
+{#if modalStatus}
+	<div id={menuId} class="d5__container">
+		<div
+			id={contentId}
+			class="d5__content__container"
+			style="color: {colorScheme.textColor};"
+			transition:fly={{ y: 100 }}
+		>
+			<div
+				class="d5__dialog"
+				style="--d5-bgColor: {colorScheme.bgColor};
+                --d5-titleBgColor: {colorScheme.titleBgColor};
+                --d5-textColor: {colorScheme.textColor};
+                --d5-confirmTextColor: {colorScheme.confirmTextColor};
+                --d5-borderColor: {colorScheme.borderColor}; 
+                --d5-width: {minWidth};
+                --d5-height: {minHeight};
+                --d5-okButtonBgColor: {colorScheme.okButtonBgColor};
+                --d5-confirmButtonBgColor: {colorScheme.confirmButtonBgColor};"
+			>
+				{#if title}
+					<div class="d5__title__container">{@render title()}</div>
+				{/if}
+
+				{#if content}
+					{@render content()}
+				{:else}
+					<div
+						style="display:flex; justify-content:center; align-items:center; height:100%; font-size:1rem; color:gray;"
+					>
+						[Add Content Snippet]
+					</div>
+				{/if}
+				<div class="d5__btn__container">
+					{#if dialogType === 'confirm-cancel'}
+						<div class="d5__confirm__grid">
+							<div class="fca">
+								<button type="button" class="ok__btn" onclick={canceled}>{cancelButtonText}</button>
+							</div>
+							<div class="fca">
+								<button type="button" class="confirm__btn" onclick={confirm}
+									>{confirmButtonText}</button
+								>
+							</div>
+						</div>
+					{/if}
+					{#if dialogType === 'ok'}
+						<div class="d5__ok">
+							<button type="button" class="ok__btn" onclick={confirm}>{okButtonText}</button>
+						</div>
+					{/if}
+				</div>
+			</div>
+		</div>
+	</div>
+{/if}
+
+<style>
+	.d5__container {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100vw;
+		height: 100vh;
+		z-index: 999;
+	}
+	.d5__content__container {
+		display: flex;
+		width: 100%;
+		height: 100%;
+		justify-content: center;
+		align-items: center;
+		padding: 0.75rem;
+	}
+	.d5__dialog {
+		position: relative;
+		min-width: var(--d5-width);
+		min-height: var(--d5-height);
+		display: grid;
+		grid-template-rows: auto 1fr 65px;
+		border-width: 1px;
+		border-radius: 0.75rem;
+		border-color: var(--d5-borderColor);
+		background-color: var(--d5-bgColor);
+		border-style: solid;
+		overflow: hidden;
+	}
+	.d5__title__container {
+		display: flex;
+		justify-content: center;
+		width: 100%;
+		background-color: var(--d5-titleBgColor);
+	}
+	.d5__btn__container {
+		padding: 0.75rem;
+	}
+	.d5__confirm__grid {
+		display: grid;
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+		height: 100%;
+		gap: 0.75rem;
+	}
+
+	.confirm__btn {
+		color: var(--d5-confirmTextColor);
+		background-color: var(--d5-confirmButtonBgColor);
+		transition: colors;
+	}
+	button:hover {
+		filter: brightness(1.2);
+	}
+	.ok__btn {
+		color: var(--d5-textColor);
+		background-color: var(--d5-okButtonBgColor);
+		transition: colors;
+	}
+	.d5__ok {
+		display: flex;
+		justify-content: center;
+		height: 100%;
+		color: var(--d5-textColor);
+	}
+
+	button {
+		cursor: pointer;
+		border: none;
+		background-color: transparent;
+		border-radius: 0.25rem;
+		height: 100%;
+		width: 100%;
+		min-width: 150px;
+		max-width: 250px;
+	}
+	.fca {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+</style>

package/dist/Dialog5.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+import type { Dialog5ColorScheme } from './types.js';
+type $$ComponentProps = {
+    colorScheme?: Partial<Dialog5ColorScheme>;
+    modalStatus: boolean;
+    minWidth?: string;
+    minHeight?: string;
+    dialogType?: 'confirm-cancel' | 'ok';
+    title?: Snippet;
+    message?: string;
+    content?: Snippet;
+    confirmButtonText?: string;
+    cancelButtonText?: string;
+    okButtonText?: string;
+    onUpdate?: (value: boolean) => void;
+};
+declare const Dialog5: import("svelte").Component<$$ComponentProps, {}, "modalStatus">;
+type Dialog5 = ReturnType<typeof Dialog5>;
+export default Dialog5;

package/dist/index.d.ts

@@ -5,6 +5,8 @@ import TimePicker5 from "./TimePicker5.svelte";
 import Accordion5 from "./Accordion5.svelte";
 import Chart5 from "./Chart5.svelte";
 import AdminPanel5 from "./AdminPanel5.svelte";
-import type { Input5ColorScheme, DatePicker5ColorScheme, TimePicker5ColorScheme, DropDownItem, DropDown5ColorScheme, Accordion5ColorScheme, Chart5ColorScheme, AdminPanel5ColorScheme } from "./types.js";
-export { DatePicker5, Input5, DropDown5, TimePicker5, Accordion5, Chart5, AdminPanel5 };
-export type { Input5ColorScheme, DatePicker5ColorScheme, TimePicker5ColorScheme, Accordion5ColorScheme, DropDown5ColorScheme, DropDownItem, Chart5ColorScheme, AdminPanel5ColorScheme };
+import type { Input5ColorScheme, DatePicker5ColorScheme, TimePicker5ColorScheme, DropDownItem, DropDown5ColorScheme, Accordion5ColorScheme, Chart5ColorScheme, AdminPanel5ColorScheme, BottomSheet5ColorScheme, Dialog5ColorScheme } from "./types.js";
+import BottomSheet5 from "./BottomSheet5.svelte";
+import Dialog5 from "./Dialog5.svelte";
+export { DatePicker5, Input5, DropDown5, TimePicker5, Accordion5, Chart5, AdminPanel5, BottomSheet5, Dialog5 };
+export type { Input5ColorScheme, DatePicker5ColorScheme, TimePicker5ColorScheme, Accordion5ColorScheme, DropDown5ColorScheme, DropDownItem, Chart5ColorScheme, AdminPanel5ColorScheme, BottomSheet5ColorScheme, Dialog5ColorScheme };

package/dist/index.js

@@ -6,4 +6,6 @@ import TimePicker5 from "./TimePicker5.svelte";
 import Accordion5 from "./Accordion5.svelte";
 import Chart5 from "./Chart5.svelte";
 import AdminPanel5 from "./AdminPanel5.svelte";
-export { DatePicker5, Input5, DropDown5, TimePicker5, Accordion5, Chart5, AdminPanel5 };
+import BottomSheet5 from "./BottomSheet5.svelte";
+import Dialog5 from "./Dialog5.svelte";
+export { DatePicker5, Input5, DropDown5, TimePicker5, Accordion5, Chart5, AdminPanel5, BottomSheet5, Dialog5 };

package/dist/types.d.ts

@@ -77,3 +77,15 @@ export interface AdminPanel5ColorScheme {
     drawerTitleBgColor?: string;
     iconColor?: string;
 }
+export interface BottomSheet5ColorScheme {
+    bgColor?: string;
+}
+export interface Dialog5ColorScheme {
+    bgColor?: string;
+    titleBgColor?: string;
+    textColor?: string;
+    confirmTextColor?: string;
+    borderColor?: string;
+    okButtonBgColor?: string;
+    confirmButtonBgColor?: string;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djcali570/component-lib",
-  "version": "0.1.00",
+  "version": "0.1.2",
   "files": [
     "dist",
     "!dist/**/*.test.*",
@@ -19,8 +19,8 @@
     }
   },
   "peerDependencies": {
-    "svelte": "^5.0.0",
-    "@sveltejs/kit": "^2.16.0"
+    "@sveltejs/kit": "^2.16.0",
+    "svelte": "^5.0.0"
   },
   "devDependencies": {
     "@eslint/compat": "^1.2.5",