@makolabs/ripple 0.0.1-dev.44 → 0.0.1-dev.48

package/dist/elements/accordion/Accordion.svelte

@@ -18,12 +18,7 @@
 		icon: Icon
 	}: AccordionProps = $props();
 
-	const {
-		base,
-		header,
-		title: titleClass,
-		body
-	} = accordion({ color, open, bordered });
+	const { base, header, title: titleClass, body } = accordion({ color, open, bordered });
 
 	function handleClick() {
 		open = !open;
@@ -58,23 +53,25 @@
 			</div>
 		</div>
 		{@render summary?.()}
-		<div class="flex items-center">
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				width="20"
-				height="20"
-				viewBox="0 0 20 20"
-				class="text-default-500 size-5 transition-transform duration-200"
-				class:rotate-180={open}
-			>
-				<path
-					fill="currentColor"
-					d="M15.794 7.733a.75.75 0 0 1-.026 1.06l-5.25 5.001a.75.75 0 0 1-1.035 0l-5.25-5a.75.75 0 0 1 1.034-1.087l4.734 4.509l4.733-4.51a.75.75 0 0 1 1.06.027"
-				/>
-			</svg>
-		</div>
+		{#if children}
+			<div class="flex items-center">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					width="20"
+					height="20"
+					viewBox="0 0 20 20"
+					class="text-default-500 size-5 transition-transform duration-200"
+					class:rotate-180={open}
+				>
+					<path
+						fill="currentColor"
+						d="M15.794 7.733a.75.75 0 0 1-.026 1.06l-5.25 5.001a.75.75 0 0 1-1.035 0l-5.25-5a.75.75 0 0 1 1.034-1.087l4.734 4.509l4.733-4.51a.75.75 0 0 1 1.06.027"
+					/>
+				</svg>
+			</div>
+		{/if}
 	</button>
-	{#if open}
+	{#if open && children}
 		<div class={body()} {id}>
 			{@render children()}
 		</div>

package/dist/index.d.ts

@@ -198,11 +198,8 @@ export type SortState = {
 export type TableProps<T extends DataRow = any> = {
     data: T[];
     columns: TableColumn<T>[];
-    color?: VariantColors;
-    size?: VariantSizes;
     bordered?: boolean;
     striped?: boolean;
-    emptyStateText?: string;
     pageSize?: number;
     selectable?: boolean;
     selected?: T[];
@@ -220,6 +217,7 @@ export type TableProps<T extends DataRow = any> = {
     onselect?: (selected: T[]) => void;
     rowclass?: (row: T, index: number) => ClassValue;
     loading?: boolean;
+    expandedContent?: Snippet<[T]>;
 };
 export type BreadcrumbItem = {
     label: string;
@@ -726,7 +724,7 @@ export type AccordionProps = {
     id?: string;
     title?: string;
     description?: string;
-    children: Snippet;
+    children?: Snippet;
     summary?: Snippet;
     open?: boolean;
     color?: VariantColors;

package/dist/layout/table/Table.svelte

@@ -2,11 +2,10 @@
 	import { cn } from '../../helper/cls.js';
 	import { table } from './table.js';
 	import type { TableProps, SortDirection, SortState } from '../../index.js';
+
 	let {
 		data = [],
 		columns = [],
-		color = 'default',
-		size = 'base',
 		bordered = true,
 		striped = false,
 		pageSize = 10,
@@ -25,7 +24,8 @@
 		tdclass: tdClass = '',
 		footerclass: footerClass = '',
 		rowclass = () => '',
-		loading = false
+		loading = false,
+		expandedContent
 	}: TableProps<any> = $props();
 
 	let sortColumn = $state('');
@@ -36,38 +36,36 @@
 	const pagination = $derived(pageSize > 0 && data.length > pageSize);
 
 	const {
-		base,
-		wrapper,
+		base: baseClass,
+		wrapper: wrapperBaseClass,
 		table: tableBaseClass,
-		thead,
-		tbody,
-		tr,
-		th,
-		td,
-		footer,
-		pagination: paginationClass,
-		emptyState,
-		sortButton,
-		sortIcon
+		thead: theadBaseClass,
+		tbody: tbodyBaseClass,
+		tr: trBaseClass,
+		th: thBaseClass,
+		td: tdBaseClass,
+		footer: footerBaseClass,
+		pagination: paginationBaseClass,
+		emptyState: emptyStateBaseClass,
+		sortButton: sortButtonBaseClass,
+		sortIcon: sortIconBaseClass
 	} = $derived(
 		table({
-			size,
-			color,
 			bordered,
 			striped
 		})
 	);
 
-	const baseClasses = $derived(cn(base(), classname));
-	const wrapperClasses = $derived(cn(wrapper(), wrapperClass));
+	const baseClasses = $derived(cn(baseClass(), classname));
+	const wrapperClasses = $derived(cn(wrapperBaseClass(), wrapperClass));
 	const tableClasses = $derived(cn(tableBaseClass(), tableClass));
-	const theadClasses = $derived(cn(thead(), theadClass));
-	const tbodyClasses = $derived(cn(tbody(), tbodyClass));
-	const trClasses = $derived(cn(tr(), trClass));
-	const thClasses = $derived(cn(th(), thClass));
-	const tdClasses = $derived(cn(td(), tdClass));
-	const footerClasses = $derived(cn(footer(), footerClass));
-	const emptyStateClasses = $derived(emptyState());
+	const theadClasses = $derived(cn(theadBaseClass(), theadClass));
+	const tbodyClasses = $derived(cn(tbodyBaseClass(), tbodyClass));
+	const trClasses = $derived(cn(trBaseClass(), trClass));
+	const thClasses = $derived(cn(thBaseClass(), thClass));
+	const tdClasses = $derived(cn(tdBaseClass(), tdClass));
+	const footerClasses = $derived(cn(footerBaseClass(), footerClass));
+	const emptyStateClasses = $derived(emptyStateBaseClass());
 
 	// Handle pagination
 	const totalPages = $derived(Math.ceil(data.length / pageSize));
@@ -175,12 +173,12 @@
 							{#if column.sortable}
 								<button
 									type="button"
-									class={sortButton()}
+									class={sortButtonBaseClass()}
 									onclick={() => toggleSort(column.sortKey || column.key)}
 									aria-label={`Sort by ${column.header}`}
 								>
 									{column.header}
-									<span class={sortIcon()}>
+									<span class={sortIconBaseClass()}>
 										{#if sortColumn === (column.sortKey || column.key)}
 											{#if sortDirection === 'asc'}
 												<svg
@@ -315,6 +313,13 @@
 								</td>
 							{/each}
 						</tr>
+						{#if expandedContent}
+							<tr class="expandedContent-row">
+								<td colspan={selectable ? columns.length + 1 : columns.length} class="border-0 p-0">
+									{@render expandedContent(row)}
+								</td>
+							</tr>
+						{/if}
 					{/each}
 				{/if}
 			</tbody>
@@ -323,7 +328,7 @@
 
 	{#if pagination && totalPages > 1}
 		<div class={footerClasses}>
-			<div class={paginationClass}>
+			<div class={paginationBaseClass()}>
 				<div class="flex items-center gap-2">
 					<span class="text-default-500 text-sm">
 						Showing {Math.min((currentPage - 1) * pageSize + 1, data.length)}

package/dist/layout/table/table.d.ts

@@ -1,5 +1,3 @@
-import type { ClassValue } from 'tailwind-variants';
-import type { VariantColors, VariantSizes } from '../../index.js';
 export declare const table: import("tailwind-variants").TVReturnType<{
     size: {
         xs: {
@@ -256,29 +254,3 @@ export declare const table: import("tailwind-variants").TVReturnType<{
     sortButton: string;
     sortIcon: string;
 }, undefined, unknown, unknown, undefined>>;
-export type TableProps<T extends DataRow = any> = {
-    data: T[];
-    columns: TableColumn<T>[];
-    color?: VariantColors;
-    size?: VariantSizes;
-    bordered?: boolean;
-    striped?: boolean;
-    emptyStateText?: string;
-    pageSize?: number;
-    selectable?: boolean;
-    selected?: T[];
-    class?: ClassValue;
-    wrapperclass?: ClassValue;
-    tableclass?: ClassValue;
-    theadclass?: ClassValue;
-    tbodyclass?: ClassValue;
-    trclass?: ClassValue;
-    thclass?: ClassValue;
-    tdclass?: ClassValue;
-    footerclass?: ClassValue;
-    onrowclick?: (row: T, index: number) => void;
-    onsort?: (sortState: SortState) => void;
-    onselect?: (selected: T[]) => void;
-    rowclass?: (row: T, index: number) => ClassValue;
-    loading?: boolean;
-};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@makolabs/ripple",
-	"version": "0.0.1-dev.44",
+	"version": "0.0.1-dev.48",
 	"description": "Simple Svelte 5 powered component library ✨",
 	"repository": {
 		"type": "git",