windmill-components 1.309.7 → 1.339.2

package/package/components/table/AutoDataTable.svelte

@@ -1,4 +1,4 @@
-<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';
@@ -13,15 +13,38 @@ import Button from '../common/button/Button.svelte';
 import { Parser } from '@json2csv/plainjs';
 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 }
-    };
-});
+$: structuredObjects = computeStructuredObjects(objects);
+let headers = [];
+function computeStructuredObjects(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
+            };
+        });
+        headers = hds;
+        return objs;
+    }
+    else {
+        headers = [];
+        return [];
+    }
+}
 function adjustCurrentPage() {
     const totalItems = objects.length;
     const totalPages = Math.ceil(totalItems / perPage);
@@ -31,21 +54,29 @@ function adjustCurrentPage() {
 }
 $: perPage && adjustCurrentPage();
 $: data = structuredObjects
-    .filter(({ rowData }) => Object.values(rowData).some((value) => JSON.stringify(value).toLowerCase().includes(search.toLowerCase())))
+    .filter(({ rowData }) => search == undefined ||
+    search == '' ||
+    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') {
+    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;
+        return valA > valB ? -1 : 1;
     }
-})
-    .slice((currentPage - 1) * perPage, currentPage * perPage);
-let hiddenColumns = [];
+});
+$: slicedData = data.slice((currentPage - 1) * perPage, currentPage * perPage);
 let activeSorting = undefined;
 let selection = [];
 // Function to handle individual row checkbox change
@@ -61,9 +92,9 @@ 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) {
         // Select all rows
-        selection = data.map((row) => row._id);
+        selection = slicedData.map((row) => row._id);
     }
     else {
         // Deselect all rows
@@ -72,22 +103,21 @@ function handleSelectAllChange() {
     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 isSortable(key: string) {
+// 	let value = objects?.[0]?.[key]
+// 	let typof = typeof value
+// 	return (value != undefined && typof === 'string') || typof === 'number' || typof === 'boolean'
+// }
 function convertJsonToCsv(arr) {
     try {
         const parser = new Parser({});
@@ -112,24 +142,6 @@ 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
@@ -194,16 +206,6 @@ 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',
@@ -252,78 +254,53 @@ 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}
 									</div>
 								</Cell>
 							{/each}
 						</tr>
 					</Head>
 					<tbody class="divide-y">
-						{#each data as { _id, rowData }, index (index)}
+						{#each slicedData as { _id, rowData }, index (index)}
 							<Row dividable selected={selection.includes(_id)}>
 								<Cell first={true} last={false} class="w-6">
 									<input
@@ -333,12 +310,10 @@ 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}
+										{#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 +357,7 @@ function convertJsonToCsv(arr) {
 											</a>
 										{:else}
 											{@const txt =
-												value == undefined
+												value == undefined || value == null
 													? ''
 													: typeof value != 'string'
 													? JSON.stringify(value)
@@ -395,7 +370,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/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/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: {

package/package/consts.js

@@ -59,7 +59,11 @@ export const POSTGRES_TYPES = [
     'TIME',
     'TIME[]',
     'TIMESTAMP',
-    'TIMESTAMP[]'
+    'TIMESTAMP[]',
+    'JSON',
+    'JSON[]',
+    'JSONB',
+    'JSONB[]'
 ];
 export const MYSQL_TYPES = [
     'varchar',

package/package/defaults.d.ts

@@ -1,5 +1,5 @@
 export declare const SELECT_INPUT_DEFAULT_STYLE: {
     readonly inputStyles: "border-radius: 0;";
-    readonly containerStyles: "--height: 34px; --padding: 0 0 0 8px; --font-size: 0.875rem; --border: 1px solid #d1d5db;";
-    readonly containerStylesDark: "--height: 34px; --padding: 0 0 0 8px; --font-size: 0.875rem; --border: 1px solid #374151; --background: #3b4252; --disabled-background: #2a2f3a; --list-background: #3b4252;--item-is-active-bg:#434c5e;--item-hover-bg:#4c566a;";
+    readonly containerStyles: "--height: 34px; --padding: 0 0 0 8px; --font-size: 0.875rem;";
+    readonly containerStylesDark: "--height: 34px; --padding: 0 0 0 8px; --font-size: 0.875rem; --background: #3b4252; --disabled-background: #2a2f3a; --list-background: #3b4252;--item-is-active-bg:#434c5e;--item-hover-bg:#4c566a;";
 };

package/package/defaults.js

@@ -1,5 +1,5 @@
 export const SELECT_INPUT_DEFAULT_STYLE = {
     inputStyles: 'border-radius: 0;',
-    containerStyles: '--height: 34px; --padding: 0 0 0 8px; --font-size: 0.875rem; --border: 1px solid #d1d5db;',
-    containerStylesDark: '--height: 34px; --padding: 0 0 0 8px; --font-size: 0.875rem; --border: 1px solid #374151; --background: #3b4252; --disabled-background: #2a2f3a; --list-background: #3b4252;--item-is-active-bg:#434c5e;--item-hover-bg:#4c566a;'
+    containerStyles: '--height: 34px; --padding: 0 0 0 8px; --font-size: 0.875rem;',
+    containerStylesDark: '--height: 34px; --padding: 0 0 0 8px; --font-size: 0.875rem; --background: #3b4252; --disabled-background: #2a2f3a; --list-background: #3b4252;--item-is-active-bg:#434c5e;--item-hover-bg:#4c566a;'
 };

package/package/deno_fetch.d.ts.txt

@@ -405,3 +405,33 @@ declare function fetch(
   input: URL | Request | string,
   init?: RequestInit,
 ): Promise<Response>;
+
+interface Console {
+    log(...data: any[]): void;
+}
+
+declare var console: Console;
+
+declare var process: Process
+
+interface Process {
+    env: {
+      WM_TOKEN: string;
+      WM_WORKSPACE: string;
+      WM_EMAIL: string;
+      WM_USERNAME: string;
+      WM_BASE_URL: string;
+      WM_JOB_ID: string;
+      WM_JOB_PATH: string;
+      WM_FLOW_JOB_ID: string;
+      WM_ROOT_FLOW_JOB_ID: string;
+      WM_FLOW_PATH: string;
+      WM_SCHEDULE_PATH: string;
+      WM_PERMISSIONED_AS: string;
+      WM_STATE_PATH: string;
+      WM_FLOW_STEP_ID: string;
+      WM_OBJECT_PATH: string;
+      WM_OIDC_JWT: string;
+      WM_WORKER_GROUP: string;
+    }
+}

package/package/editorUtils.js

@@ -51,6 +51,8 @@ export function langToExt(lang) {
             return 'sh';
         case 'powershell':
             return 'ps1';
+        case 'php':
+            return 'php';
         case 'deno':
             return 'ts';
         case 'nativets':

package/package/gen/core/OpenAPI.js

@@ -6,10 +6,7 @@ export class Interceptors {
     eject(fn) {
         const index = this._fns.indexOf(fn);
         if (index !== -1) {
-            this._fns = [
-                ...this._fns.slice(0, index),
-                ...this._fns.slice(index + 1),
-            ];
+            this._fns = [...this._fns.slice(0, index), ...this._fns.slice(index + 1)];
         }
     }
     use(fn) {
@@ -24,8 +21,10 @@ export const OpenAPI = {
     PASSWORD: undefined,
     TOKEN: undefined,
     USERNAME: undefined,
-    VERSION: '1.309.1',
+    VERSION: '1.336.1',
     WITH_CREDENTIALS: false,
-    interceptors: { request: new Interceptors(), response: new Interceptors(),
+    interceptors: {
+        request: new Interceptors(),
+        response: new Interceptors(),
     },
 };

package/package/gen/core/request.js

@@ -30,7 +30,10 @@ export const getQueryString = (params) => {
         if (value === undefined || value === null) {
             return;
         }
-        if (Array.isArray(value)) {
+        if (value instanceof Date) {
+            append(key, value.toISOString());
+        }
+        else if (Array.isArray(value)) {
             value.forEach(v => encodePair(key, v));
         }
         else if (typeof value === 'object') {

package/package/gen/index.d.ts

@@ -1,7 +1,6 @@
 export { ApiError } from './core/ApiError';
 export { CancelablePromise, CancelError } from './core/CancelablePromise';
 export { OpenAPI, type OpenAPIConfig } from './core/OpenAPI';
-export * from './enums.gen';
 export * from './schemas.gen';
 export * from './services.gen';
 export * from './types.gen';

package/package/gen/index.js

@@ -2,7 +2,6 @@
 export { ApiError } from './core/ApiError';
 export { CancelablePromise, CancelError } from './core/CancelablePromise';
 export { OpenAPI } from './core/OpenAPI';
-export * from './enums.gen';
 export * from './schemas.gen';
 export * from './services.gen';
 export * from './types.gen';