windmill-components 1.309.7 → 1.352.0

package/package/components/table/AutoDataTable.svelte

@@ -1,27 +1,26 @@
-<script>import { ArrowDown, ArrowUp, Download, EyeIcon, MoreVertical, MoveVertical, Columns, EyeOff } from 'lucide-svelte';
+<script>import { ArrowDown, ArrowUp, Download, MoreVertical, MoveVertical, Columns } from 'lucide-svelte';
 import Dropdown from '../DropdownV2.svelte';
 import Cell from './Cell.svelte';
 import DataTable from './DataTable.svelte';
 import Head from './Head.svelte';
 import Row from './Row.svelte';
-import { pluralize, sendUserToast } from '../../utils';
+import { pluralize } from '../../utils';
 import Badge from '../common/badge/Badge.svelte';
-import { isEmail, isLink } from './tableUtils';
+import { computeStructuredObjectsAndHeaders, convertJsonToCsv, isEmail, isLink } from './tableUtils';
 import Popover from '../Popover.svelte';
 import DarkModeObserver from '../DarkModeObserver.svelte';
-import Button from '../common/button/Button.svelte';
-import { Parser } from '@json2csv/plainjs';
+import DownloadCsv from './DownloadCsv.svelte';
 export let objects = [];
 let currentPage = 1;
-let perPage = 5;
+let perPage = 25;
 let search = '';
-let nextId = 1;
-$: structuredObjects = objects.map((obj) => {
-    return {
-        _id: nextId++,
-        rowData: { ...obj }
-    };
-});
+let structuredObjects = [];
+let headers = [];
+$: recomputeObjectsAndHeaders(objects);
+function recomputeObjectsAndHeaders(objects) {
+    ;
+    [headers, structuredObjects] = computeStructuredObjectsAndHeaders(objects);
+}
 function adjustCurrentPage() {
     const totalItems = objects.length;
     const totalPages = Math.ceil(totalItems / perPage);
@@ -30,24 +29,39 @@ function adjustCurrentPage() {
     }
 }
 $: perPage && adjustCurrentPage();
-$: data = structuredObjects
-    .filter(({ rowData }) => Object.values(rowData).some((value) => JSON.stringify(value).toLowerCase().includes(search.toLowerCase())))
-    .sort((a, b) => {
-    if (!activeSorting)
-        return 0;
-    const valA = a.rowData[activeSorting.column];
-    const valB = b.rowData[activeSorting.column];
-    if (activeSorting.direction === 'asc') {
-        return valA > valB ? 1 : -1;
+$: data = computeData(structuredObjects, activeSorting, search);
+let activeSorting = undefined;
+function computeData(structuredObjects, activeSorting, search) {
+    let objects = structuredObjects;
+    if (search != undefined && search != '') {
+        objects = objects.filter((obj) => Object.values(obj.rowData).some((value) => JSON.stringify(value).toLowerCase().includes(search.toLowerCase())));
     }
-    else {
-        return valA < valB ? 1 : -1;
+    if (activeSorting) {
+        objects = objects.sort((a, b) => {
+            if (!activeSorting)
+                return 0;
+            const valA = a.rowData[activeSorting.column];
+            const valB = b.rowData[activeSorting.column];
+            const isAsc = activeSorting.direction === 'asc';
+            if (valA == undefined || valA == null) {
+                return isAsc ? -1 : 1;
+            }
+            if (valB == undefined || valB == null) {
+                return isAsc ? 1 : -1;
+            }
+            if (isAsc) {
+                return valA > valB ? 1 : -1;
+            }
+            else {
+                return valA > valB ? -1 : 1;
+            }
+        });
     }
-})
-    .slice((currentPage - 1) * perPage, currentPage * perPage);
-let hiddenColumns = [];
-let activeSorting = undefined;
+    return objects;
+}
+$: slicedData = data.slice((currentPage - 1) * perPage, currentPage * perPage);
 let selection = [];
+let colSelection = [];
 // Function to handle individual row checkbox change
 function handleCheckboxChange(rowId) {
     if (selection.includes(rowId)) {
@@ -61,41 +75,43 @@ function handleCheckboxChange(rowId) {
 }
 // Function to handle select all checkbox change
 function handleSelectAllChange() {
-    if (selection.length === 0 || selection.length < data.length) {
+    if (selection.length === 0 ||
+        (selection.length < slicedData.length &&
+            (colSelection.length === 0 || colSelection.length < headers.length))) {
         // Select all rows
-        selection = data.map((row) => row._id);
+        selection = slicedData.map((row) => row._id);
+        colSelection = [...headers];
     }
     else {
         // Deselect all rows
         selection = [];
+        colSelection = [];
     }
-    selection = [...selection];
 }
 let renderCount = 0;
-const badgeColors = ['gray', 'blue', 'red', 'green', 'yellow', 'indigo'];
+const badgeColors = ['gray', 'blue', 'green', 'yellow', 'indigo'];
 const darkBadgeColors = [
     'dark-gray',
     'dark-blue',
-    'dark-red',
     'dark-green',
     'dark-yellow',
     'dark-indigo'
 ];
 let darkMode = false;
 let wrapperWidth = 0;
-function isSortable(key) {
-    return ((objects?.[0]?.[key] != undefined && typeof objects[0][key] === 'string') ||
-        typeof objects[0][key] === 'number' ||
-        typeof objects[0][key] === 'boolean');
-}
-function convertJsonToCsv(arr) {
-    try {
-        const parser = new Parser({});
-        const csv = parser.parse(arr);
-        return csv;
+// function isSortable(key: string) {
+// 	let value = objects?.[0]?.[key]
+// 	let typof = typeof value
+// 	return (value != undefined && typof === 'string') || typof === 'number' || typof === 'boolean'
+// }
+function handleColumnSelected(key) {
+    if (colSelection.includes(key)) {
+        // Remove the id from the colSelection array
+        colSelection = colSelection.filter((id) => id !== key);
     }
-    catch (err) {
-        throw new Error('An error occured when generating CSV:' + err);
+    else {
+        // Add the id to the colSelection array
+        colSelection = [...colSelection, key];
     }
 }
 </script>
@@ -112,65 +128,36 @@ function convertJsonToCsv(arr) {
 						{pluralize(selection?.length ?? 1, 'item') + ' selected'}
 					</span>
 				{/if}
-				{#if hiddenColumns.length > 0}
-					<div class="flex flex-row gap-2 justify-center items-center mx-2">
-						<span class="text-xs text-gray-500 dark:text-gray-200" />
-						<Button
-							size="xs2"
-							color="light"
-							variant="border"
-							on:click={() => {
-								hiddenColumns = []
-							}}
-							startIcon={{
-								icon: Columns
-							}}
-						>
-							Display hidden columns ({pluralize(hiddenColumns?.length ?? 1, 'column')})
-						</Button>
-					</div>
-				{/if}
 			</div>
 			<div class="flex flex-row items-center gap-2">
-				<Button
-					size="xs"
-					color="light"
-					startIcon={{ icon: Download }}
-					on:click={() => {
-						try {
-							const csvContent = convertJsonToCsv(
-								structuredObjects
-									.filter(({ _id }) => {
-										if (selection.length > 0) {
-											return selection.includes(_id)
-										} else {
-											return true
-										}
-									})
-									.map((obj) => obj.rowData)
-							)
-
-							const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' })
-							const url = URL.createObjectURL(blob)
-							const link = document.createElement('a')
-							link.setAttribute('href', url)
-							link.setAttribute('download', 'data.csv')
-							link.style.visibility = 'hidden'
-							document.body.appendChild(link)
-							link.click()
-
-							document.body.removeChild(link)
-						} catch (err) {
-							sendUserToast(err, true)
-						}
+				<DownloadCsv
+					getContent={() => {
+						return convertJsonToCsv(
+							selection.length > 0
+								? structuredObjects
+										.filter(({ _id }) => selection.includes(_id))
+										.map((obj) =>
+											colSelection.length == 0
+												? obj.rowData
+												: Object.fromEntries(
+														Object.entries(obj.rowData).filter(([key, _]) =>
+															colSelection.includes(key)
+														)
+												  )
+										)
+								: colSelection.length == 0
+								? objects
+								: objects.map((obj) =>
+										Object.fromEntries(
+											Object.entries(obj).filter(([key, _]) => colSelection.includes(key))
+										)
+								  )
+						)
 					}}
-				>
-					{#if selection.length > 0}
-						Download selected as CSV
-					{:else}
-						Download as CSV
-					{/if}
-				</Button>
+					customText={selection.length > 0 || colSelection.length > 0
+						? 'Download selected as CSV'
+						: undefined}
+				/>
 				<Dropdown
 					items={() => {
 						const actions = [
@@ -194,21 +181,12 @@ function convertJsonToCsv(arr) {
 							}
 						]
 
-						if (hiddenColumns.length > 0) {
-							actions.push({
-								displayName: 'Display hidden columns',
-								icon: EyeIcon,
-								action: () => {
-									hiddenColumns = []
-								}
-							})
-						}
-
 						if (selection.length > 0) {
 							actions.push({
 								displayName: 'Clear selection',
 								icon: Columns,
 								action: () => {
+									colSelection = []
 									selection = []
 									renderCount++
 								}
@@ -252,79 +230,60 @@ function convertJsonToCsv(arr) {
 						currentPage = event.detail
 					}}
 					showNext={currentPage * perPage < objects.length}
+					rowCount={data.length}
 				>
 					<Head>
 						<tr>
 							<Cell head first={true} last={false}>
 								<input type="checkbox" class="!w-4 !h-4" on:change={handleSelectAllChange} />
 							</Cell>
-							{#each Object.keys(data?.[0]?.rowData ?? {}) ?? [] as key, index}
-								<Cell head last={index == Object.keys(objects?.[0] ?? {}).length - 1}>
+							{#each headers ?? [] as key, index}
+								<Cell head last={index == headers.length - 1}>
 									<div class="flex flex-row gap-1 items-center">
 										{key}
-										{#if hiddenColumns.includes(key)}
+										{#if activeSorting?.column === key}
 											<button
 												class="p-1 w-6 h-6 flex justify-center items-center"
 												on:click={() => {
-													hiddenColumns = hiddenColumns.filter((col) => col !== key)
+													activeSorting = {
+														column: key,
+														direction: activeSorting?.direction == 'asc' ? 'desc' : 'asc'
+													}
 												}}
 											>
-												<EyeOff size="16" class="hover:text-gray-600 text-gray-400 rounded-full " />
+												{#if activeSorting?.direction == 'asc'}
+													<ArrowDown size="16" />
+												{:else}
+													<ArrowUp size="16" />
+												{/if}
 											</button>
 										{:else}
 											<button
 												class="p-1 w-6 h-6 flex justify-center items-center"
 												on:click={() => {
-													hiddenColumns = [...hiddenColumns, key]
+													activeSorting = {
+														column: key,
+														direction: activeSorting?.direction == 'asc' ? 'desc' : 'asc'
+													}
 												}}
 											>
-												<EyeIcon
-													size="16"
-													class="hover:text-gray-600 text-gray-400 rounded-full "
-												/>
+												<MoveVertical size="16" class=" hover:text-gray-600 text-gray-400" />
 											</button>
 										{/if}
-										{#if isSortable(key)}
-											{#if activeSorting?.column === key}
-												<button
-													class="p-1 w-6 h-6 flex justify-center items-center"
-													on:click={() => {
-														activeSorting = {
-															column: key,
-															direction: activeSorting?.direction == 'asc' ? 'desc' : 'asc'
-														}
-													}}
-													disabled={hiddenColumns.includes(key)}
-												>
-													{#if activeSorting?.direction == 'asc'}
-														<ArrowDown size="16" />
-													{:else}
-														<ArrowUp size="16" />
-													{/if}
-												</button>
-											{:else}
-												<button
-													class="p-1 w-6 h-6 flex justify-center items-center"
-													on:click={() => {
-														activeSorting = {
-															column: key,
-															direction: activeSorting?.direction == 'asc' ? 'desc' : 'asc'
-														}
-													}}
-													disabled={hiddenColumns.includes(key)}
-												>
-													<MoveVertical size="16" class=" hover:text-gray-600 text-gray-400" />
-												</button>
-											{/if}
-										{/if}
+										<input
+											type="checkbox"
+											class="!w-4 !h-4"
+											checked={colSelection.includes(key)}
+											on:change={() => handleColumnSelected(key)}
+										/>
 									</div>
 								</Cell>
 							{/each}
 						</tr>
 					</Head>
 					<tbody class="divide-y">
-						{#each data as { _id, rowData }, index (index)}
-							<Row dividable selected={selection.includes(_id)}>
+						{#each slicedData.filter((x) => x) as { _id, rowData }, index (index)}
+							<Row dividable selected={selection.includes(_id) && colSelection.length == 0}>
 								<Cell first={true} last={false} class="w-6">
 									<input
 										type="checkbox"
@@ -333,12 +292,14 @@ function convertJsonToCsv(arr) {
 										on:change={() => handleCheckboxChange(_id)}
 									/>
 								</Cell>
-								{#each Object.keys(data?.[0]?.rowData ?? {}) ?? [] as key, index}
+								{#each headers as key, index}
 									{@const value = rowData[key]}
-									<Cell last={index == Object.values(rowData ?? {}).length - 1}>
-										{#if hiddenColumns.includes(key)}
-											...
-										{:else if Array.isArray(value) && value.length === 0}
+									<Cell
+										selected={colSelection.includes(key) &&
+											(selection.length == 0 || selection.includes(_id))}
+										last={index == Object.values(rowData ?? {}).length - 1}
+									>
+										{#if Array.isArray(value) && value.length === 0}
 											<div />
 										{:else if Array.isArray(value) && typeof value?.[0] === 'string'}
 											<div class="flex flex-row gap-1 w-full max-w-32 flex-wrap min-w-32">
@@ -382,7 +343,7 @@ function convertJsonToCsv(arr) {
 											</a>
 										{:else}
 											{@const txt =
-												value == undefined
+												value == undefined || value == null
 													? ''
 													: typeof value != 'string'
 													? JSON.stringify(value)
@@ -395,7 +356,7 @@ function convertJsonToCsv(arr) {
 												<div
 													class="max-w-80 text-wrap whitespace-pre-wrap flex flex-grow w-max three-lines cursor-text"
 												>
-													{txt.length > 100 ? txt.slice(0, 100) + '...' : txt}
+													{txt?.length > 100 ? txt.slice(0, 100) + '...' : txt}
 												</div>
 												<svelte:fragment slot="text">{txt}</svelte:fragment>
 											</Popover>

package/package/components/table/Cell.svelte

@@ -5,6 +5,7 @@ export let last = false;
 export let numeric = false;
 export let head = false;
 export let shouldStopPropagation = false;
+export let selected = false;
 export let sticky = false;
 let Tag = head ? 'th' : 'td';
 const { size } = getContext('datatable');
@@ -31,7 +32,9 @@ const { size } = getContext('datatable');
 		sticky ? `!p-0 sticky ${first ? 'left-0' : 'right-0'}` : 'px-2 py-3.5',
 		size === 'sm' ? 'px-1.5 py-2.5' : '',
 		size === 'lg' ? 'px-3 py-4' : '',
-		size === 'xs' ? 'px-1 py-1.5' : ''
+		size === 'xs' ? 'px-1 py-1.5' : '',
+		selected ? 'bg-blue-50 dark:bg-blue-900/50' : '',
+		'transition-all'
 	)}
 >
 	{#if sticky}

package/package/components/table/Cell.svelte.d.ts

@@ -7,6 +7,7 @@ declare const __propDef: {
         numeric?: boolean | undefined;
         head?: boolean | undefined;
         shouldStopPropagation?: boolean | undefined;
+        selected?: boolean | undefined;
         sticky?: boolean | undefined;
     };
     events: {

package/package/components/table/DataTable.svelte

@@ -15,6 +15,7 @@ export let size = 'md';
 export let perPage = undefined;
 export let shouldHidePagination = false;
 export let noBorder = false;
+export let rowCount = undefined;
 const dispatch = createEventDispatcher();
 setContext('datatable', {
     size
@@ -35,18 +36,25 @@ setContext('datatable', {
 	</div>
 	{#if paginated && !shouldHidePagination}
 		<div
-			class="bg-surface border-t flex flex-row justify-end p-1 items-center gap-2 sticky bottom-0"
+			class="bg-surface border-t flex flex-row justify-between p-1 items-center gap-2 sticky bottom-0"
 		>
+			<div>
+				{#if rowCount}
+					<span class="text-xs mx-2"> {rowCount} items</span>
+				{/if}
+			</div>
+
 			<div class="flex flex-row gap-2 items-center">
-				<span class="text-xs">Page: {currentPage}</span>
+				<span class="text-xs">
+					Page: {currentPage}
+					{perPage && rowCount ? `/ ${Math.ceil(rowCount / perPage)}` : ''}
+				</span>
 
 				{#if perPage !== undefined}
 					<select class="!text-xs !w-16" bind:value={perPage}>
-						<option value={5}>5</option>
-						<option value={10}>10</option>
 						<option value={25}>25</option>
-						<option value={50}>50</option>
 						<option value={100}>100</option>
+						<option value={1000}>1000</option>
 					</select>
 				{/if}
 				<Button

package/package/components/table/DataTable.svelte.d.ts

@@ -14,6 +14,7 @@ declare const __propDef: {
         perPage?: number | undefined;
         shouldHidePagination?: boolean | undefined;
         noBorder?: boolean | undefined;
+        rowCount?: number | undefined;
     };
     events: {
         previous: CustomEvent<any>;

package/package/components/table/DownloadCsv.svelte

@@ -0,0 +1,30 @@
+<script>import { Download } from 'lucide-svelte';
+import { Button } from '../common';
+import { sendUserToast } from '../../toast';
+export let getContent;
+export let customText = undefined;
+</script>
+
+<Button
+	size="xs"
+	color="light"
+	startIcon={{ icon: Download }}
+	on:click={() => {
+		try {
+			const blob = new Blob([getContent()], { type: 'text/csv;charset=utf-8;' })
+			const url = URL.createObjectURL(blob)
+			const link = document.createElement('a')
+			link.setAttribute('href', url)
+			link.setAttribute('download', 'data.csv')
+			link.style.visibility = 'hidden'
+			document.body.appendChild(link)
+			link.click()
+
+			document.body.removeChild(link)
+		} catch (err) {
+			sendUserToast(err, true)
+		}
+	}}
+>
+	{customText || 'Download as CSV'}
+</Button>

package/package/components/table/DownloadCsv.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        getContent: () => string;
+        customText?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type DownloadCsvProps = typeof __propDef.props;
+export type DownloadCsvEvents = typeof __propDef.events;
+export type DownloadCsvSlots = typeof __propDef.slots;
+export default class DownloadCsv extends SvelteComponent<DownloadCsvProps, DownloadCsvEvents, DownloadCsvSlots> {
+}
+export {};

package/package/components/table/tableUtils.d.ts

@@ -1,2 +1,10 @@
 export declare function isLink(value: string): boolean;
 export declare function isEmail(value: string): boolean;
+export declare function computeStructuredObjectsAndHeaders(objects: Array<Record<string, any>>): [
+    string[],
+    {
+        _id: number;
+        rowData: Record<string, any>;
+    }[]
+];
+export declare function convertJsonToCsv(arr: Array<Record<string, any>>): string;

package/package/components/table/tableUtils.js

@@ -1,6 +1,43 @@
+import { Parser } from '@json2csv/plainjs';
 export function isLink(value) {
     return value?.startsWith('http://') || value?.startsWith('https://');
 }
 export function isEmail(value) {
     return value?.includes('@');
 }
+export function computeStructuredObjectsAndHeaders(objects) {
+    if (Array.isArray(objects)) {
+        let nextId = 1;
+        let hds = [];
+        let objs = objects.map((obj) => {
+            let rowData = obj && typeof obj == 'object' ? obj : {};
+            if (Array.isArray(rowData)) {
+                rowData = Object.fromEntries(rowData.map((x, i) => ['col' + i, x]));
+            }
+            let ks = Object.keys(rowData);
+            ks.forEach((x) => {
+                if (!hds.includes(x)) {
+                    hds.push(x);
+                }
+            });
+            return {
+                _id: nextId++,
+                rowData
+            };
+        });
+        return [hds, objs];
+    }
+    else {
+        return [[], []];
+    }
+}
+export function convertJsonToCsv(arr) {
+    try {
+        const parser = new Parser({});
+        const csv = parser.parse(arr);
+        return csv;
+    }
+    catch (err) {
+        throw new Error('An error occured when generating CSV:' + err);
+    }
+}

package/package/components/vscode.js

@@ -99,7 +99,7 @@ export async function initializeVscode() {
                 ],
                 colors: {
                     'editor.foreground': '#D8DEE9',
-                    'editor.background': '#2E3440',
+                    'editor.background': '#272D38',
                     'editor.selectionBackground': '#434C5ECC',
                     'editor.lineHighlightBackground': '#3B4252',
                     'editorCursor.foreground': '#D8DEE9',

package/package/components/wizards/AgGridWizard.svelte

@@ -1,4 +1,4 @@
-<script>import { Popup } from '../common';
+<script>import { Alert, Popup } from '../common';
 import Toggle from '../Toggle.svelte';
 import SimpleEditor from '../SimpleEditor.svelte';
 import Label from '../Label.svelte';
@@ -57,6 +57,9 @@ const presets = [
     }
 ];
 let renderCount = 0;
+$: if (value && value.cellRendererType === null) {
+    value.cellRendererType = 'text';
+}
 </script>
 
 <Popup
@@ -73,7 +76,7 @@ let renderCount = 0;
 	{#if value}
 		<div class="flex flex-col w-96 p-2 gap-4">
 			<span class="text-sm mb-2 leading-6 font-semibold">
-				Column definition
+				Column definitions
 				<Tooltip
 					documentationLink="https://www.ag-grid.com/javascript-data-grid/column-definitions/"
 				>
@@ -245,6 +248,28 @@ let renderCount = 0;
 			<input type="number" placeholder="row group index" bind:value={value.rowGroupIndex} />
 		</Label>
 		 -->
+
+			<Label label="Type">
+				<select bind:value={value.cellRendererType}>
+					<option value="text">Text</option>
+					<option value="link">Link</option>
+				</select>
+			</Label>
+
+			{#if value.cellRendererType === 'link'}
+				<Alert type="info" title="Label" size="xs">
+					They are two ways to define a link:
+					<ul class="list-disc list-inside">
+						<li>
+							<strong>String</strong>: The string will be used as the link and the label.
+						</li>
+						<li>
+							<strong>Object</strong>: The object must have a <code>href</code> and a
+							<code>label</code> property.
+						</li>
+					</ul>
+				</Alert>
+			{/if}
 		</div>
 	{/if}
 </Popup>

package/package/components/wizards/AgGridWizard.svelte.d.ts

@@ -19,6 +19,7 @@ declare const __propDef: {
             headerName: string;
             editable: boolean;
             filter: boolean;
+            cellRendererType: 'text' | 'badge' | 'link';
         } | undefined;
     };
     events: {