do-ui-design-system 1.1.13 → 1.1.14

package/dist/do-theme/pagination.css

@@ -1,9 +1,28 @@
 .do-pagination {
     display: flex;
+    gap: 0.5rem;
 
     .do-pagination__nav {
         display: flex;
-        align-items: center;
+        align-items: stretch;
         gap: 0.2rem;
+
+        .do-pagination__nav__back {
+            transform: rotate(90deg);
+        }
+
+        .do-pagination__nav__next {
+            transform: rotate(-90deg);
+        }
+    }
+
+    .do-pagination__size {
+        display: flex;
+        gap: 0.5rem;
+        align-items: center;
+
+        select {
+            height: 100%;
+        }
     }
 }

package/dist/do-theme/table.css

@@ -1,15 +1,22 @@
 .do-table {
     .do-table__header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 1rem;
+
         .do-table__header__tags {
             display: flex;
             align-items: center;
             gap: 0.5rem;
-            margin-bottom: 1rem;
         }
     }
 
     .do-table__content {
-
+        border-radius: 12px;
+        overflow: hidden;
+        background: var(--do-table-bg);
+        font-size: 1rem;
         width: 100%;
         border-collapse: collapse;
 
@@ -84,6 +91,16 @@
             }
         }
 
+        .do-table__content__th-filter {
+            padding: 0.2rem 0.5rem;
+            max-width: 90%;
+        }
+
+        .do-table__content__th-action {
+            padding: 0.2rem 0.5rem;
+            max-width: 1rem;
+        }
+
         td {
             padding: 0.75rem 1rem;
             color: inherit;
@@ -126,13 +143,4 @@
             font-weight: 500;
         }
     }
-}
-
-.do-table-card {
-    border: 1px solid var(--do-bg-secondary);
-    border-radius: 12px;
-    overflow: hidden;
-    background: var(--do-table-bg);
-    font-size: 1rem;
-    padding: 0.75rem 1rem;
 }

package/dist/molecules/Pagination/Pagination.svelte

@@ -16,7 +16,11 @@
 
 	let { pagination, goToPage, pageSizeChange }: Props = $props();
 
-	const getPaginationPages = (current: number, total: number, maxPages: number = 5) => {
+	const getPaginationPages = (
+		current: number,
+		total: number,
+		maxPages: number = pagination.pageSize
+	) => {
 		if (total <= maxPages) {
 			return Array.from({ length: total }, (_, i) => i + 1);
 		}
@@ -52,9 +56,12 @@
 </script>
 
 <div class="do-pagination">
-	<label>
+	<label class="do-pagination__size">
 		Mostrar:
-		<select bind:value={pagination.pageSize} onchange={() => pageSizeChange(pagination.pageSize)}>
+		<select
+			bind:value={pagination.pageSize}
+			onchange={() => pageSizeChange(pagination.pageSize || 5)}
+		>
 			<option value={5}>5</option>
 			<option value={10}>10</option>
 			<option value={25}>25</option>
@@ -66,7 +73,7 @@
 		<div class="do-pagination__nav">
 			<IconButton
 				iconName="icon-chevron-down"
-				iCustomClass="rotate-90"
+				iCustomClass="do-pagination__nav__back"
 				disabled={pagination.currentPage === 1}
 				onClick={() => goToPage(pagination.currentPage - 1)}
 				ariaLabel="página anterior"
@@ -91,7 +98,7 @@
 
 			<IconButton
 				iconName="icon-chevron-down"
-				iCustomClass="-rotate-90"
+				iCustomClass="do-pagination__nav__next"
 				disabled={pagination.currentPage === pagination.totalPages}
 				onClick={() => goToPage(pagination.currentPage + 1)}
 				ariaLabel="página siguiente"

package/dist/molecules/Pagination/Pagination.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/molecules/Pagination/Pagination.svelte.ts"],"names":[],"mappings":"AAMC,KAAK,eAAe,GAAG;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,KAAK,KAAK,GAAG;IACZ,UAAU,EAAE,eAAe,CAAC;IAC5B,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,cAAc,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC,CAAC;AA6EH,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"Pagination.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/molecules/Pagination/Pagination.svelte.ts"],"names":[],"mappings":"AAMC,KAAK,eAAe,GAAG;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,KAAK,KAAK,GAAG;IACZ,UAAU,EAAE,eAAe,CAAC;IAC5B,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,cAAc,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC,CAAC;AAiFH,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/organisms/TableBasic/TableBasic.svelte

@@ -1,9 +1,30 @@
 <script lang="ts">
 	import { Button, Chip, Icon } from '../../atoms/index.js';
+	import type { IconNames } from '../../do-theme/index.ts';
+	import IconButton from '../../molecules/IconButton/IconButton.svelte';
 	import Pagination from '../../molecules/Pagination/Pagination.svelte';
 
 	type SortDirection = 'asc' | 'desc' | null;
 
+	type TagConfig<T> = {
+		column: keyof T;
+		label: string;
+	};
+
+	export type HeaderAction = {
+		icon: IconNames;
+		label: string;
+		onClick: () => void;
+	};
+
+	export type ActionColumnDef<T> = {
+		key: string;
+		icon: IconNames;
+		label?: string;
+		showHeader?: boolean;
+		onClick: (row: T) => void;
+	};
+
 	export type ColumnDef<T> = {
 		key: keyof T;
 		label: string;
@@ -12,8 +33,11 @@
 	type Props<T extends { id: string | number }> = {
 		data: T[];
 		columns: ColumnDef<T>[];
-		tagColumn?: keyof T;
+		actionColumns?: ActionColumnDef<T>[];
+		tagConfig?: TagConfig<T>;
 		idKey?: keyof T;
+		headerActions?: HeaderAction[];
+		pageSize?: number;
 		showCheckbox?: boolean;
 		onSelectionChange?: (ids: (string | number)[]) => void;
 	};
@@ -21,8 +45,11 @@
 	let {
 		data = [],
 		columns = [],
-		tagColumn,
+		actionColumns = [],
+		tagConfig,
 		idKey = 'id',
+		headerActions = [],
+		pageSize = 5,
 		showCheckbox = true,
 		onSelectionChange
 	}: Props<any> = $props();
@@ -33,8 +60,8 @@
 	let columnFilters: Record<string, string> = $state({});
 
 	const tagOptions = $derived(() => {
-		if (!tagColumn) return [];
-		return [...new Set(data.map((row) => String(row[tagColumn])))];
+		if (!tagConfig?.column) return [];
+		return [...new Set(data.map((row) => String(row[tagConfig?.column])))];
 	});
 
 	let activeTags: Set<string> = $state(new Set());
@@ -47,7 +74,7 @@
 
 	const filtered = $derived(() => {
 		return data.filter((row) => {
-			const passesTag = activeTags.size === 0 || activeTags.has(String(row[tagColumn!]));
+			const passesTag = activeTags.size === 0 || activeTags.has(String(row[tagConfig?.column!]));
 
 			const passesColumns = columns.every((col) => {
 				const filterVal = columnFilters[String(col.key)];
@@ -124,7 +151,7 @@
 
 	let pagination = $state({
 		totalPages: 10,
-		pageSize: 5,
+		pageSize: 25,
 		currentPage: 1,
 		loading: false
 	});
@@ -137,6 +164,12 @@
 		pagination.pageSize = size;
 		pagination.currentPage = 1;
 	};
+
+	const clearTags = () => {
+		activeTags = new Set();
+	};
+
+	let columnName = columns.find((c) => c.key === tagConfig?.column)?.label;
 </script>
 
 <!-- @component
@@ -156,13 +189,23 @@
 	- `onSelectionChange`: () => void
 -->
 
-<div class="do-table do-table-card">
-	{#if tagColumn}
-		<section class="do-table__header">
+<div class="do-table">
+	<section class="do-table__header">
+		{#if tagConfig?.column}
 			<div class="do-table__header__tags">
-				<h5>
-					{columns.find((t) => tagColumn === t.key)?.label}:
-				</h5>
+				{#if tagConfig.label}
+					<Button
+						label={tagConfig?.label}
+						ariaLabel="Ver todos"
+						rounded
+						variant={activeTags.size === 0 ? 'do-btn-accent' : 'do-btn-primary'}
+						onClick={clearTags}
+					/>
+				{:else}
+					<p>
+						{columnName}:
+					</p>
+				{/if}
 				{#each tagOptions() as value}
 					<Button
 						label={value}
@@ -173,8 +216,23 @@
 					/>
 				{/each}
 			</div>
-		</section>
-	{/if}
+		{/if}
+
+		{#if headerActions.length}
+			<div class="do-table__actions">
+				{#each headerActions as action}
+					<IconButton
+						iconName={action.icon}
+						ariaLabel={action.label}
+						label={action.label}
+						variant="do-btn-accent"
+						title="descargar"
+						onClick={action.onClick}
+					/>
+				{/each}
+			</div>
+		{/if}
+	</section>
 
 	<section class="do-table-wrapper">
 		<table class="do-table__content">
@@ -211,12 +269,17 @@
 							{/if}
 						</th>
 					{/each}
+					{#each actionColumns as col}
+						<th class="do-table__content__th">
+							{col.showHeader !== false ? (col.label ?? '') : ''}
+						</th>
+					{/each}
 				</tr>
 
 				<!--filtros x columna -->
 				<tr class="do-table__content__filters">
 					{#if showCheckbox}
-						<th class="col-check"></th>
+						<th class=""></th>
 					{/if}
 					{#each columns as col}
 						<th class="do-table__content__th-filter">
@@ -243,7 +306,7 @@
 					{@const isSelected = selected.has(row[idKey])}
 					<tr class="do-row" class:selected={isSelected}>
 						{#if showCheckbox}
-							<td class="col-check">
+							<td class="">
 								<input
 									type="checkbox"
 									class="do-checkbox"
@@ -255,6 +318,18 @@
 						{#each columns as col}
 							<td>{row[col.key]}</td>
 						{/each}
+
+						{#each actionColumns as col}
+							<td class="do-table__content__th-action">
+								<IconButton
+									iconName={col.icon}
+									ariaLabel="ver capa"
+									title={col.label}
+									square
+									onClick={() => col.onClick(row)}
+								/>
+							</td>
+						{/each}
 					</tr>
 				{/each}
 			</tbody>

package/dist/organisms/TableBasic/TableBasic.svelte.d.ts

@@ -1,3 +1,20 @@
+import type { IconNames } from '../../do-theme/index.ts';
+type TagConfig<T> = {
+    column: keyof T;
+    label: string;
+};
+export type HeaderAction = {
+    icon: IconNames;
+    label: string;
+    onClick: () => void;
+};
+export type ActionColumnDef<T> = {
+    key: string;
+    icon: IconNames;
+    label?: string;
+    showHeader?: boolean;
+    onClick: (row: T) => void;
+};
 export type ColumnDef<T> = {
     key: keyof T;
     label: string;
@@ -7,8 +24,11 @@ type Props<T extends {
 }> = {
     data: T[];
     columns: ColumnDef<T>[];
-    tagColumn?: keyof T;
+    actionColumns?: ActionColumnDef<T>[];
+    tagConfig?: TagConfig<T>;
     idKey?: keyof T;
+    headerActions?: HeaderAction[];
+    pageSize?: number;
     showCheckbox?: boolean;
     onSelectionChange?: (ids: (string | number)[]) => void;
 };

package/dist/organisms/TableBasic/TableBasic.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableBasic.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/organisms/TableBasic/TableBasic.svelte.ts"],"names":[],"mappings":"AASC,MAAM,MAAM,SAAS,CAAC,CAAC,IAAI;IAC1B,GAAG,EAAE,MAAM,CAAC,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,KAAK,KAAK,CAAC,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,IAAI;IAC/C,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC,CAAC;IAChB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,iBAAiB,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,KAAK,IAAI,CAAC;CACvD,CAAC;AAyOH;;;;;;;;;;;;;;;GAeG;AACH,QAAA,MAAM,UAAU,gDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"TableBasic.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/organisms/TableBasic/TableBasic.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAOvD,KAAK,SAAS,CAAC,CAAC,IAAI;IACnB,MAAM,EAAE,MAAM,CAAC,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IAC1B,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,eAAe,CAAC,CAAC,IAAI;IAChC,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,IAAI,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,SAAS,CAAC,CAAC,IAAI;IAC1B,GAAG,EAAE,MAAM,CAAC,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,KAAK,KAAK,CAAC,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,IAAI;IAC/C,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;IACxB,aAAa,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;IACrC,SAAS,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC,CAAC;IAChB,aAAa,CAAC,EAAE,YAAY,EAAE,CAAC;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,iBAAiB,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,KAAK,IAAI,CAAC;CACvD,CAAC;AA8QH;;;;;;;;;;;;;;;GAeG;AACH,QAAA,MAAM,UAAU,gDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "do-ui-design-system",
-	"version": "1.1.13",
+	"version": "1.1.14",
 	"description": "Design system en Svelte + CSS + Storybook",
 	"author": "Data Observatory",
 	"license": "MIT",