mertani-web-toolkit 0.1.23 → 0.1.24

package/dist/components/Button/Button.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import './button.css';
 	import { Icon } from '../../index.js';
-	import type { TIconName } from '../../types/Icon.js';
+	import type { TIconName } from '../../icons/index.js';
 
 	interface Props {
 		size?: 'small' | 'medium' | 'large';

package/dist/components/Button/Button.svelte.d.ts

@@ -1,5 +1,5 @@
 import './button.css';
-import type { TIconName } from '../../types/Icon.js';
+import type { TIconName } from '../../icons/index.js';
 interface Props {
     size?: 'small' | 'medium' | 'large';
     variant?: 'primary' | 'secondary' | 'outline';

package/dist/components/Table/Table.svelte

@@ -0,0 +1,300 @@
+<script lang="ts">
+	import TableShimmer from './TableShimmer.svelte';
+	import TableBadge from './TableBadge.svelte';
+	import TablePagination from './TablePagination.svelte';
+	import Icon from '../Icon/Icon.svelte';
+	import type { Column, DeviceStatus } from './types.js';
+
+	export type { Column } from './types';
+
+	let {
+		columns = [],
+		data = [],
+		loading = false,
+		height = 'calc(100vh - 350px)',
+		minHeight = '500px',
+		onRowClick,
+		showPagination = false,
+		currentPage = 1,
+		totalPages = 1,
+		itemsPerPage = 25,
+		totalItems = 0,
+		onPageChange,
+		onItemsPerPageChange
+	}: {
+		columns?: Column[];
+		data?: any[];
+		loading?: boolean;
+		height?: string;
+		minHeight?: string;
+		onRowClick?: (row: any, index: number) => void;
+		showPagination?: boolean;
+		currentPage?: number;
+		totalPages?: number;
+		itemsPerPage?: number;
+		totalItems?: number;
+		onPageChange?: (page: number) => void;
+		onItemsPerPageChange?: (itemsPerPage: number) => void;
+	} = $props();
+
+	const emptyMessage = 'Tidak ada data';
+
+	let scrollContainer: HTMLElement | null = $state(null);
+	let internalHasHorizontalScroll = $state(false);
+
+	function updateScrollState() {
+		internalHasHorizontalScroll = scrollContainer
+			? scrollContainer.scrollWidth > scrollContainer.clientWidth
+			: false;
+	}
+
+	$effect(() => {
+		if (scrollContainer) {
+			const updateWithDelay = () => setTimeout(updateScrollState, 100);
+			updateWithDelay();
+
+			const handleResize = () => updateWithDelay();
+			window.addEventListener('resize', handleResize);
+
+			return () => window.removeEventListener('resize', handleResize);
+		}
+	});
+
+	$effect(() => {
+		if (!loading) {
+			setTimeout(updateScrollState, 200);
+		}
+	});
+
+	const hasHorizontalScroll = $derived(internalHasHorizontalScroll);
+
+	function calculateStickyLeft(column: Column, index: number): number {
+		let left = 0;
+		for (let i = 0; i < index; i++) {
+			const prevCol = columns[i];
+			if (prevCol.sticky === 'left') {
+				const width = prevCol.width || prevCol.minWidth || '160px';
+				const widthValue = parseFloat(width.toString().replace('px', '')) || 160;
+				left += widthValue;
+			}
+		}
+		if (column.stickyOffset) {
+			left += column.stickyOffset;
+		}
+		return left;
+	}
+
+	function getStickyStyle(column: Column, index: number): string {
+		if (!column.sticky) return '';
+		if (column.sticky === 'left') {
+			return `position: sticky; left: ${calculateStickyLeft(column, index)}px; z-index: 10;`;
+		}
+		if (column.sticky === 'right') {
+			return `position: sticky; right: 0; z-index: 10;`;
+		}
+		return '';
+	}
+
+	function getHeaderStickyStyle(column: Column, index: number): string {
+		if (!column.sticky) return '';
+		if (column.sticky === 'left') {
+			return `position: sticky; left: ${calculateStickyLeft(column, index)}px; z-index: 20;`;
+		}
+		if (column.sticky === 'right') {
+			return `position: sticky; right: 0; z-index: 20;`;
+		}
+		return '';
+	}
+</script>
+
+<div
+	class="overflow-x-auto overflow-y-auto mx-4 table-scroll-container"
+	style="height: {height}; min-height: {minHeight};"
+	bind:this={scrollContainer}
+>
+	<table class="w-full border-collapse">
+		<thead class="bg-[#F8F9FA] border-b border-[#EAECF0] sticky top-0 z-30">
+			<tr>
+				{#each columns as column, index}
+					<th
+						class="px-4 py-3 text-left text-xs font-bold text-[#475467] whitespace-nowrap bg-[#F8F9FA] {column.sticky === 'left' && hasHorizontalScroll ? 'shadow-right' : ''} {column.sticky === 'right' && hasHorizontalScroll ? 'shadow-left' : ''} {column.headerClass || ''}"
+						style="
+							{column.width ? `width: ${column.width};` : ''}
+							{column.minWidth ? `min-width: ${column.minWidth};` : ''}
+							{column.maxWidth ? `max-width: ${column.maxWidth};` : ''}
+							{column.align === 'center' ? 'text-align: center;' : ''}
+							{column.align === 'right' ? 'text-align: right;' : ''}
+							{getHeaderStickyStyle(column, index)}
+						"
+					>
+						{column.label}
+					</th>
+				{/each}
+			</tr>
+		</thead>
+		<tbody>
+			{#if loading}
+				<TableShimmer rows={5} columns={columns.length} />
+			{:else if data.length === 0}
+				<tr>
+					<td colspan={columns.length} class="px-4 py-8 text-center text-sm text-[#98A2B3]">
+						{emptyMessage}
+					</td>
+				</tr>
+			{:else}
+				{#each data as row, rowIndex}
+					<tr
+						class="group border-b border-[#EAECF0] hover:bg-[#F9FAFB] {rowIndex % 2 === 0 ? 'bg-white' : 'bg-[#F8F9FA]'} {onRowClick !== undefined ? 'cursor-pointer' : ''}"
+						onclick={() => onRowClick?.(row, rowIndex)}
+					>
+						{#each columns as column, colIndex}
+							<td
+								class="px-4 py-3 text-sm text-[#2C2C30] whitespace-nowrap {column.sticky === 'left' && hasHorizontalScroll ? 'shadow-right' : ''} {column.sticky === 'right' && hasHorizontalScroll ? 'shadow-left' : ''} {rowIndex % 2 === 0 ? 'bg-white group-hover:bg-[#F9FAFB]' : 'bg-[#F8F9FA] group-hover:bg-[#F9FAFB]'} {column.cellClass || ''}"
+								style="
+									{column.width ? `width: ${column.width};` : ''}
+									{column.minWidth ? `min-width: ${column.minWidth};` : ''}
+									{column.maxWidth ? `max-width: ${column.maxWidth};` : ''}
+									{column.align === 'center' ? 'text-align: center;' : ''}
+									{column.align === 'right' ? 'text-align: right;' : ''}
+									{getStickyStyle(column, colIndex)}
+									{column.sticky ? `background-color: ${rowIndex % 2 === 0 ? 'white' : '#F8F9FA'};` : ''}
+								"
+							>
+								{#if column.actions && column.actions.length > 0}
+									<div class="flex items-center gap-2 {column.align === 'center' ? 'justify-center' : column.align === 'right' ? 'justify-end' : 'justify-start'}">
+										{#each column.actions as action}
+											{@const handleAction = () => {
+												const onClickHandler = column.onActions?.[action.actionKey];
+												const actionType = action.actionType || 'function';
+												
+												if (actionType === 'function' && onClickHandler) {
+													onClickHandler(row, rowIndex);
+												} else if (actionType === 'alert' && action.actionValue) {
+													let message = action.actionValue;
+													// Replace placeholders like {id}, {name}, etc. with row data
+													message = message.replace(/\{(\w+)\}/g, (match, key) => {
+														return String(row[key] ?? rowIndex);
+													});
+													alert(message);
+												} else if ((actionType === 'dialog' || actionType === 'modal') && action.actionValue) {
+													// Dispatch custom event for dialog/modal
+													window.dispatchEvent(new CustomEvent('table-action-dialog', {
+														detail: {
+															dialogId: action.actionValue,
+															actionKey: action.actionKey,
+															row,
+															rowIndex
+														}
+													}));
+												} else if (actionType === 'navigate' && action.actionValue) {
+													let url = action.actionValue;
+													// Replace placeholders like {id}, {name}, etc. with row data
+													url = url.replace(/\{(\w+)\}/g, (match, key) => {
+														return String(row[key] ?? rowIndex);
+													});
+													window.location.href = url;
+												}
+											}}
+											<Icon
+												name={action.icon as any}
+												width={18}
+												height={18}
+												color={action.color || '#6B7280'}
+												action={handleAction}
+												style="cursor: pointer;"
+											/>
+										{/each}
+									</div>
+								{:else if column.showBadge}
+									{@const badgeStatus = row[column.badgeKey || column.key] as DeviceStatus}
+									<div class="flex {column.align === 'center' ? 'justify-center' : column.align === 'right' ? 'justify-end' : 'justify-start'}">
+										<TableBadge status={badgeStatus} label={column.badgeLabel} />
+									</div>
+								{:else if column.render}
+									{@html String(column.render(row, rowIndex) ?? '-')}
+								{:else}
+									{row[column.key] ?? '-'}
+								{/if}
+							</td>
+						{/each}
+					</tr>
+				{/each}
+			{/if}
+		</tbody>
+	</table>
+</div>
+
+{#if showPagination}
+	<TablePagination
+		{currentPage}
+		{totalPages}
+		{itemsPerPage}
+		{totalItems}
+		{onPageChange}
+		{onItemsPerPageChange}
+	/>
+{/if}
+
+<style>
+	.table-scroll-container {
+		scrollbar-width: thin;
+		scrollbar-color: rgba(152, 162, 179, 0.3) transparent;
+	}
+
+	.table-scroll-container::-webkit-scrollbar {
+		height: 6px;
+		width: 6px;
+	}
+
+	.table-scroll-container::-webkit-scrollbar-track {
+		background: transparent;
+	}
+
+	.table-scroll-container::-webkit-scrollbar-thumb {
+		background-color: rgba(152, 162, 179, 0.3);
+		border-radius: 3px;
+	}
+
+	.table-scroll-container::-webkit-scrollbar-thumb:hover {
+		background-color: rgba(80, 103, 142, 0.5);
+	}
+
+	.table-scroll-container::-webkit-scrollbar-corner {
+		background: transparent;
+	}
+
+	:global(.shadow-right) {
+		position: relative;
+		box-shadow: 2px 0 16px -2px rgba(0, 0, 0, 0.12) !important;
+	}
+
+	:global(.shadow-right::after) {
+		content: '';
+		position: absolute;
+		top: 0;
+		right: -12px;
+		width: 12px;
+		height: 100%;
+		background: linear-gradient(to right, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.04), transparent);
+		pointer-events: none;
+		z-index: -1;
+	}
+
+	:global(.shadow-left) {
+		position: relative;
+		box-shadow: -2px 0 16px -2px rgba(0, 0, 0, 0.12) !important;
+	}
+
+	:global(.shadow-left::before) {
+		content: '';
+		position: absolute;
+		top: 0;
+		left: -12px;
+		width: 12px;
+		height: 100%;
+		background: linear-gradient(to left, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.04), transparent);
+		pointer-events: none;
+		z-index: -1;
+	}
+</style>
+

package/dist/components/Table/Table.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { Column } from './types.js';
+type $$ComponentProps = {
+    columns?: Column[];
+    data?: any[];
+    loading?: boolean;
+    height?: string;
+    minHeight?: string;
+    onRowClick?: (row: any, index: number) => void;
+    showPagination?: boolean;
+    currentPage?: number;
+    totalPages?: number;
+    itemsPerPage?: number;
+    totalItems?: number;
+    onPageChange?: (page: number) => void;
+    onItemsPerPageChange?: (itemsPerPage: number) => void;
+};
+declare const Table: import("svelte").Component<$$ComponentProps, {
+    Column: typeof Column;
+}, "">;
+type Table = ReturnType<typeof Table>;
+export default Table;

package/dist/components/Table/TableBadge.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import type { DeviceStatus } from './types.js';
+
+	function getStatusBadgeClass(status: DeviceStatus): string {
+		switch (status) {
+			case 'Online':
+				return 'bg-[#C9FFE6] text-[#12B76A] border border-[#12B76A]';
+			case 'Offline':
+				return 'bg-[#FFE1E4] text-[#F04438] border border-[#F04438]';
+			case 'Delay':
+				return 'bg-[#FFF9E6] text-[#FFA000] border border-[#FFA000]';
+			case 'Maintenance':
+				return 'bg-[#E8ECF1] text-[#212529] border border-[#7F8286]';
+			default:
+				return 'bg-[#E8ECF1] text-[#212529] border border-[#7F8286]';
+		}
+	}
+
+	const { status, label }: { status: DeviceStatus; label?: string } = $props();
+</script>
+
+<span
+	class="inline-block rounded border px-2 text-sm font-normal leading-[23px] {getStatusBadgeClass(
+		status
+	)}"
+>
+	{label || status}
+</span>
+

package/dist/components/Table/TableBadge.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { DeviceStatus } from './types.js';
+type $$ComponentProps = {
+    status: DeviceStatus;
+    label?: string;
+};
+declare const TableBadge: import("svelte").Component<$$ComponentProps, {}, "">;
+type TableBadge = ReturnType<typeof TableBadge>;
+export default TableBadge;