@dynect/base 0.1.0 → 0.2.0

package/src/runtime/components/dynect/SwitchLanguage.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+const { locale, setLocale } = useI18n();
+const props = withDefaults(
+	defineProps<{
+		class?: string;
+	}>(),
+	{
+		class: '',
+	}
+);
+</script>
+
+<template>
+	<DropdownMenu>
+		<DropdownMenuTrigger as-child>
+			<button type="button" :class="cn('flex items-center gap-1.5 rounded-lg border px-2.5 py-1.5 text-sm font-medium transition-colors hover:bg-gray-50', locale === 'en' ? 'text-text-body-subtle dark:text-text-body-subtle border-border-base' : 'border-gray-300 text-gray-500', props.class)">
+				<Icon name="lucide:globe" class="size-3.5" />
+				{{ locale.toUpperCase() }}
+				<Icon name="lucide:chevron-down" class="size-3.5 text-gray-400" />
+			</button>
+		</DropdownMenuTrigger>
+		<DropdownMenuContent align="end" class="min-w-24">
+			<DropdownMenuItem
+				v-for="lang in [
+					{ code: 'en', label: 'English' },
+					{ code: 'ms', label: 'Melayu' },
+				]"
+				:key="lang.code"
+				class="cursor-pointer"
+				@click="setLocale(lang.code as 'en' | 'ms')"
+			>
+				<Icon v-if="locale === lang.code" name="lucide:check" class="size-3.5" />
+				<span v-else class="size-3.5" />
+				{{ lang.label }}
+			</DropdownMenuItem>
+		</DropdownMenuContent>
+	</DropdownMenu>
+</template>

package/src/runtime/components/dynect/Table.vue

@@ -0,0 +1,488 @@
+<script setup lang="ts" generic="TData extends Record<string, any>">
+import { cn } from '@/lib/utils';
+
+// Column definition
+export interface TableColumn<T = any> {
+	key: string;
+	label: string;
+	sortable?: boolean;
+	width?: string;
+	align?: 'left' | 'center' | 'right';
+	render?: (value: any, row: T) => any;
+	class?: string;
+	show?: (row: T) => boolean;
+}
+
+// Action definition
+export interface TableAction<T = any> {
+	label: string;
+	icon?: any;
+	variant?: 'default' | 'destructive';
+	onClick: (row: T) => void;
+	show?: (row: T) => boolean;
+}
+
+// Props
+interface Props {
+	data: TData[];
+	columns: TableColumn<TData>[];
+	selectable?: boolean;
+	showActions?: boolean;
+	tableClass?: string;
+	actions?: TableAction<TData>[];
+	loading?: boolean;
+	emptyText?: string;
+	striped?: boolean;
+	hoverable?: boolean;
+	bordered?: boolean;
+	dense?: boolean;
+	pagination?: boolean;
+	paginationData?: Pagination;
+	expandable?: boolean;
+	childrenKey?: string;
+	expandedKey?: string;
+	headerTitle?: string | null;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	selectable: false,
+	showActions: false,
+	actions: () => [],
+	loading: false,
+	emptyText: 'No data available',
+	striped: false,
+	hoverable: true,
+	bordered: true,
+	dense: false,
+	pagination: false,
+	headerTitle: null,
+	paginationData: () => ({
+		total: 0,
+		perPage: 10,
+		currentPage: 1,
+		totalPages: 0,
+	}),
+	expandable: false,
+	childrenKey: 'children',
+	expandedKey: 'expanded',
+});
+
+// Emits
+const emit = defineEmits<{
+	'row-click': [row: TData];
+	'page-click': [page: number];
+	'selection-change': [selectedRows: TData[]];
+	sort: [column: TableColumn<TData>, direction: 'asc' | 'desc' | null];
+}>();
+
+const isDouble = (value: any) => {
+	return value && value.type === 'double';
+};
+
+// Selection state
+const selectedRows = ref<Set<any>>(new Set());
+
+// Sorting state
+const sortColumn = ref<string | null>(null);
+const sortDirection = ref<'asc' | 'desc' | null>(null);
+
+// Expandable tree state
+interface FlattenedRow {
+	row: TData;
+	index: number;
+	level: number;
+	hasChildren: boolean;
+}
+
+const expandedRows = ref<Set<any>>(new Set());
+
+// Initialize expanded state from data
+const initializeExpandedState = () => {
+	if (!props.expandable) return;
+
+	const traverse = (items: TData[]) => {
+		items.forEach((item) => {
+			if (item[props.expandedKey] && item[props.childrenKey]?.length > 0) {
+				const key = getRowKey(item, 0);
+				expandedRows.value.add(key);
+			}
+			if (item[props.childrenKey]?.length > 0) {
+				traverse(item[props.childrenKey]);
+			}
+		});
+	};
+
+	traverse(props.data);
+};
+
+onMounted(() => initializeExpandedState());
+
+// Computed properties
+const allSelected = computed(() => props.data.length > 0 && selectedRows.value.size === props.data.length);
+
+const someSelected = computed(() => selectedRows.value.size > 0 && selectedRows.value.size < props.data.length);
+
+const totalColspan = computed(() => (props.expandable ? 1 : 0) + (props.selectable ? 1 : 0) + props.columns.length + (props.showActions && props.actions.length > 0 ? 1 : 0));
+
+const headerClasses = 'h-11 bg-gray-50 dark:bg-gray-900';
+const headerClassesMedium = 'bg-bg-secondary-medium dark:bg-bg-secondary-medium h-11 px-5 select-none';
+
+const sortedData = computed(() => {
+	if (!sortColumn.value || !sortDirection.value) return props.data;
+
+	return [...props.data].sort((a, b) => {
+		const aVal = a[sortColumn.value!];
+		const bVal = b[sortColumn.value!];
+
+		if (aVal === bVal) return 0;
+
+		const comparison = aVal > bVal ? 1 : -1;
+		return sortDirection.value === 'asc' ? comparison : -comparison;
+	});
+});
+
+// Flatten data for expandable tree view
+const flattenedData = computed<FlattenedRow[]>(() => {
+	if (!props.expandable) {
+		return sortedData.value.map((row, index) => ({
+			row,
+			index,
+			level: 0,
+			hasChildren: false,
+		}));
+	}
+
+	const result: FlattenedRow[] = [];
+	let globalIndex = 0;
+
+	const traverse = (items: TData[], level: number = 0) => {
+		items.forEach((item) => {
+			const hasChildren = item[props.childrenKey]?.length > 0;
+			const rowKey = getRowKey(item, globalIndex);
+			const isExpanded = expandedRows.value.has(rowKey);
+
+			result.push({
+				row: item,
+				index: globalIndex++,
+				level,
+				hasChildren,
+			});
+
+			if (hasChildren && isExpanded) {
+				traverse(item[props.childrenKey], level + 1);
+			}
+		});
+	};
+
+	traverse(sortedData.value);
+	return result;
+});
+
+// Methods
+const getRowKey = (row: TData, index: number) => (row.id === undefined ? index : row.id);
+
+const isRowSelected = (row: TData, index: number) => selectedRows.value.has(getRowKey(row, index));
+
+const toggleSelectAll = () => {
+	if (allSelected.value) {
+		selectedRows.value.clear();
+	} else {
+		props.data.forEach((row, index) => selectedRows.value.add(getRowKey(row, index)));
+	}
+	emitSelectionChange();
+};
+
+const toggleRowSelection = (row: TData, index: number) => {
+	const key = getRowKey(row, index);
+	if (selectedRows.value.has(key)) {
+		selectedRows.value.delete(key);
+	} else {
+		selectedRows.value.add(key);
+	}
+	emitSelectionChange();
+};
+
+const emitSelectionChange = () => {
+	const selected = props.data.filter((row, index) => selectedRows.value.has(getRowKey(row, index)));
+	emit('selection-change', selected);
+};
+
+const handleSort = (column: TableColumn<TData>) => {
+	if (!column.sortable) return;
+
+	if (sortColumn.value === column.key) {
+		// Cycle through: asc -> desc -> null
+		sortDirection.value = sortDirection.value === 'asc' ? 'desc' : null;
+		if (!sortDirection.value) sortColumn.value = null;
+	} else {
+		sortColumn.value = column.key;
+		sortDirection.value = 'asc';
+	}
+
+	emit('sort', column, sortDirection.value);
+};
+
+const handleRowClick = (row: TData) => emit('row-click', row);
+
+const getCellValue = (row: TData, column: TableColumn<TData>) => {
+	const value = row[column.key];
+	return column.render ? column.render(value, row) : value;
+};
+
+const shouldShowAction = (action: TableAction<TData>, row: TData) => (action.show ? action.show(row) : true);
+
+const toggleExpand = (row: TData, index: number) => {
+	const key = getRowKey(row, index);
+	if (expandedRows.value.has(key)) {
+		expandedRows.value.delete(key);
+	} else {
+		expandedRows.value.add(key);
+	}
+};
+
+const isRowExpanded = (row: TData, index: number) => {
+	return expandedRows.value.has(getRowKey(row, index));
+};
+
+const limitModel = defineModel<number>('limit', {
+	required: false,
+});
+
+// Single watcher: re-init expand state + prune stale selections when data changes
+watch(
+	() => props.data,
+	(newData) => {
+		initializeExpandedState();
+		const validKeys = new Set(newData.map((row, index) => getRowKey(row, index)));
+		selectedRows.value = new Set([...selectedRows.value].filter((key) => validKeys.has(key)));
+	},
+	{ deep: true }
+);
+
+// Expose methods for parent component
+defineExpose({
+	clearSelection: () => {
+		selectedRows.value.clear();
+		emitSelectionChange();
+	},
+	getSelectedRows: () => {
+		return props.data.filter((row, index) => selectedRows.value.has(getRowKey(row, index)));
+	},
+});
+</script>
+
+<template>
+	<div>
+		<!-- bordered wrapper -->
+		<div :class="cn([{ 'border-border-base overflow-x-auto rounded-md border': bordered }, props.tableClass])">
+			<!-- Loading skeleton -->
+			<LazyTable v-if="loading" class="overflow-hidden rounded-md border">
+				<TableHeader>
+					<TableRow>
+						<TableHead v-if="expandable" :class="[headerClasses, 'w-12']" />
+						<TableHead v-if="selectable" :class="[headerClasses, 'w-12']">
+							<Skeleton class="size-4" />
+						</TableHead>
+						<TableHead
+							v-for="column in columns"
+							:key="column.key"
+							:class="[
+								column.class,
+								headerClasses,
+								{
+									'text-center': column.align === 'center',
+									'text-right': column.align === 'right',
+								},
+							]"
+							:style="{ width: column.width }"
+						>
+							<Skeleton class="h-4 w-24" />
+						</TableHead>
+						<TableHead v-if="showActions && actions.length > 0" :class="[headerClasses, 'w-20']" />
+					</TableRow>
+				</TableHeader>
+				<TableBody>
+					<TableRow v-for="i in paginationData.perPage" :key="i" class="h-14">
+						<TableCell v-if="expandable">
+							<Skeleton class="size-4" />
+						</TableCell>
+						<TableCell v-if="selectable">
+							<Skeleton class="size-4" />
+						</TableCell>
+						<TableCell v-for="column in columns" :key="column.key">
+							<Skeleton class="h-4 w-full" />
+						</TableCell>
+						<TableCell v-if="showActions && actions.length > 0">
+							<Skeleton class="h-9 w-9 rounded-xl" />
+						</TableCell>
+					</TableRow>
+				</TableBody>
+			</LazyTable>
+
+			<!-- Main table -->
+			<LazyTable v-else :class="{ 'rounded-md': bordered }">
+				<TableHeader>
+					<!-- Optional title row -->
+					<TableRow v-if="headerTitle">
+						<TableHead :colspan="totalColspan" class="h-11 bg-gray-50 px-5 text-sm font-semibold text-gray-600 dark:bg-gray-900 dark:text-gray-400">
+							{{ headerTitle }}
+						</TableHead>
+					</TableRow>
+
+					<!-- Column header row -->
+					<TableRow class="border-border-base border-b" :class="{ 'border-t': !bordered }">
+						<!-- Expand column -->
+						<TableHead v-if="expandable" :class="[headerClassesMedium, 'w-12']" />
+
+						<!-- Selection column -->
+						<TableHead v-if="selectable" :class="[headerClassesMedium, 'w-12 px-5']">
+							<Checkbox :indeterminate="someSelected" :model-value="allSelected" @update:model-value="toggleSelectAll" />
+						</TableHead>
+
+						<!-- Data columns -->
+						<TableHead
+							v-for="column in columns"
+							:key="column.key"
+							:class="[
+								column.class,
+								headerClassesMedium,
+								{
+									'cursor-pointer': column.sortable,
+									'text-center': column.align === 'center',
+									'text-right': column.align === 'right',
+									'text-left': column.align === 'left' || !column.align,
+								},
+							]"
+							:style="{ width: column.width }"
+							@click.prevent="column.sortable ? handleSort(column) : undefined"
+						>
+							<div class="flex items-center gap-1 text-sm leading-none font-medium text-gray-600 dark:text-gray-400" :class="{ 'justify-end': column.align === 'right', 'justify-center': column.align === 'center' }">
+								<span>{{ column.label }}</span>
+								<div v-if="column.sortable" class="flex flex-col">
+									<Icon name="lucide:chevron-up" :class="['size-3', sortColumn === column.key && sortDirection === 'asc' ? 'text-gray-600 dark:text-gray-400' : 'text-gray-400 dark:text-gray-600']" />
+									<Icon name="lucide:chevron-down" :class="['-mt-1 size-3', sortColumn === column.key && sortDirection === 'desc' ? 'text-gray-600 dark:text-gray-400' : 'text-gray-400 dark:text-gray-600']" />
+								</div>
+							</div>
+						</TableHead>
+
+						<!-- Actions column -->
+						<TableHead
+							v-if="showActions && actions.length > 0"
+							:class="[
+								headerClasses,
+								'bg-bg-secondary-medium dark:bg-bg-secondary-medium sticky right-0 z-10 w-20 px-5 text-right text-sm font-medium text-gray-600 dark:text-gray-400',
+								{
+									'shadow-[inset_1px_0_0_0_var(--color-border-base)]': props.data.length,
+								},
+							]"
+						/>
+					</TableRow>
+				</TableHeader>
+
+				<TableBody>
+					<!-- Empty state -->
+					<TableEmpty v-if="sortedData.length === 0 && !loading" :colspan="totalColspan">
+						<SvgImagesDocumentFolders filled :font-controlled="false" class="size-16" />
+						<slot name="empty">{{ emptyText }}</slot>
+					</TableEmpty>
+
+					<!-- Data rows -->
+					<TableRow
+						v-for="{ row, index, level, hasChildren } in flattenedData"
+						:key="getRowKey(row, index)"
+						class="border-border-base h-14 border-b"
+						:class="{
+							'last:border-b-0': bordered,
+							'hover:bg-bg-secondary-medium dark:hover:bg-bg-secondary-strong cursor-pointer': hoverable,
+							'bg-bg-secondary-medium dark:bg-bg-secondary-medium': striped && index % 2 === 1,
+							'h-12': dense,
+							'bg-dynect-50 hover:bg-dynect-100 dark:bg-dynect-950 dark:hover:bg-dynect-900': isRowSelected(row, index),
+						}"
+						@click="handleRowClick(row)"
+					>
+						<!-- Expand/Collapse cell -->
+						<TableCell v-if="expandable" class="px-5" @click.stop>
+							<div :style="{ paddingLeft: `${level * 1}rem` }" class="flex items-center">
+								<Button v-if="hasChildren" variant="ghost" :icon-only="true" @click="toggleExpand(row, index)">
+									<Icon name="lucide:chevron-right" class="size-4" :class="{ 'rotate-90': isRowExpanded(row, index) }" />
+								</Button>
+							</div>
+						</TableCell>
+
+						<!-- Selection cell -->
+						<TableCell v-if="selectable" class="px-5" @click.stop>
+							<Checkbox :model-value="isRowSelected(row, index)" @update:model-value="toggleRowSelection(row, index)" />
+						</TableCell>
+
+						<!-- Data cells -->
+						<TableCell
+							v-for="column in columns"
+							:key="column.key"
+							:class="[
+								column.class,
+								'px-5',
+								{
+									'text-center': column.align === 'center',
+									'text-right': column.align === 'right',
+								},
+							]"
+						>
+							<!-- Custom slot for column -->
+							<slot :name="column.key" :row="row" :value="row[column.key]" :column="column" :index="index">
+								<template v-if="getCellValue(row, column) as any">
+									<!-- Double-value cell (primary + secondary text) -->
+									<div v-if="isDouble(getCellValue(row, column))" class="flex flex-col gap-0.5">
+										<span class="text-sm leading-none font-medium text-gray-900 dark:text-gray-50">{{ getCellValue(row, column).value1 }}</span>
+										<span class="text-xs leading-none font-normal text-gray-500 dark:text-gray-400">{{ getCellValue(row, column).value2 }}</span>
+									</div>
+
+									<!-- Component value -->
+									<component :is="getCellValue(row, column)" v-else-if="typeof getCellValue(row, column) === 'object'" />
+
+									<!-- Scalar value -->
+									<span v-else class="text-sm leading-none font-medium text-gray-900 dark:text-gray-50">{{ getCellValue(row, column) }}</span>
+								</template>
+							</slot>
+						</TableCell>
+
+						<!-- Actions cell -->
+						<TableCell
+							v-if="showActions && actions.length > 0"
+							class="sticky right-0 z-10 px-5 text-right"
+							:class="{
+								'shadow-[inset_1px_0_0_0_var(--color-border-base)]': props.data.length,
+							}"
+							@click.stop
+						>
+							<DropdownMenu>
+								<DropdownMenuTrigger as-child>
+									<!-- Matches design: 36×36, cornerRadius 12, border -->
+									<DynectButton color="ghost" :icon-only="true">
+										<Icon name="lucide:more-horizontal" class="size-4" />
+									</DynectButton>
+								</DropdownMenuTrigger>
+								<DropdownMenuContent align="end" class="max-w-48">
+									<DropdownMenuGroup>
+										<template v-for="(action, actionIndex) in actions" :key="actionIndex">
+											<DropdownMenuItem
+												v-if="shouldShowAction(action, row)"
+												:class="{
+													'text-text-fg-danger': action.variant === 'destructive',
+												}"
+												@click="action.onClick(row)"
+											>
+												<Icon v-if="action.icon" :name="action.icon" class="size-4" />
+												<span>{{ action.label }}</span>
+											</DropdownMenuItem>
+										</template>
+									</DropdownMenuGroup>
+								</DropdownMenuContent>
+							</DropdownMenu>
+						</TableCell>
+					</TableRow>
+				</TableBody>
+			</LazyTable>
+		</div>
+		<LazyDynectPagination v-if="props.pagination" v-model:limit="limitModel" :bordered="props.bordered" :pagination="props.paginationData" @page-click="(page: number) => emit('page-click', page)" />
+	</div>
+</template>