windmill-components 1.408.1 → 1.430.2

package/package/components/apps/components/display/AppPdf.svelte

@@ -1,175 +1,20 @@
-<script>import { Download, Loader2, MoveHorizontal, ZoomIn, ZoomOut } from 'lucide-svelte';
-import { getDocument } from 'pdfjs-dist';
-import 'pdfjs-dist/build/pdf.worker.entry';
-import { getContext } from 'svelte';
-import { fade } from 'svelte/transition';
-import { twMerge } from 'tailwind-merge';
-import { throttle } from '../../../../utils';
-import { Button } from '../../../common';
-import { findGridItem, initOutput } from '../../editor/appUtils';
+<script>import { getContext } from 'svelte';
+import { initOutput } from '../../editor/appUtils';
 import { initCss } from '../../utils';
 import InputValue from '../helpers/InputValue.svelte';
 import InitializeComponent from '../helpers/InitializeComponent.svelte';
 import ResolveStyle from '../helpers/ResolveStyle.svelte';
+import PdfViewer from '../../../display/PdfViewer.svelte';
 export let id;
 export let configuration;
 export let customCss = undefined;
 export let render;
-const { app, mode, worldStore, selectedComponent } = getContext('AppViewerContext');
+const { app, worldStore } = getContext('AppViewerContext');
 const outputs = initOutput($worldStore, id, {
     loading: false
 });
 let source = undefined;
-let wrapper = undefined;
-let error = undefined;
-let doc = undefined;
-let pages = [];
 let zoom = undefined;
-let controlsWidth = undefined;
-let controlsHeight = undefined;
-let pageNumber = 1;
-$: if (source == '') {
-    resetDoc();
-    error = 'Set the "Source" attribute of the PDF component';
-}
-$: zoom && handleZoom();
-$: wrapper && loadDocument(source);
-$: wideView = controlsWidth && controlsWidth > 450;
-async function resetDoc() {
-    await doc?.destroy();
-    doc = undefined;
-}
-function handleZoom() {
-    if (zoom && wrapper) {
-        try {
-            renderPdf(false);
-        }
-        catch (err) {
-            error = err?.message ?? (typeof err === 'string' ? err : 'Error loading PDF');
-        }
-    }
-}
-async function loadDocument(src) {
-    if (!src) {
-        return;
-    }
-    try {
-        outputs.loading.set(true);
-        await resetDoc();
-        doc = await getDocument(src).promise;
-        pageNumber = 1;
-        await renderPdf(false, false);
-        error = undefined;
-    }
-    catch (err) {
-        await resetDoc();
-        error = err?.message ?? (typeof err === 'string' ? err : 'Error loading PDF');
-        console.log(err);
-    }
-    outputs.loading.set(false);
-}
-async function renderPdf(scaleToViewport = true, resizing = false) {
-    if (!(doc && wrapper && zoom)) {
-        return;
-    }
-    const scrollPosition = wrapper.scrollTop / wrapper.scrollHeight;
-    if (!resizing) {
-        pages = [];
-    }
-    const nextPages = [];
-    const nextChildren = [];
-    const { width } = wrapper.getBoundingClientRect();
-    let scale = zoom / 100;
-    if (scaleToViewport) {
-        const firstViewport = (await doc.getPage(1)).getViewport({ scale: 1 });
-        // Rounded to the first integer that is a multiple of 10 and is less than the viewport width
-        zoom = Math.floor((width / firstViewport.width) * 10) * 10;
-        scale = zoom / 100;
-    }
-    for (let i = 0; i < doc.numPages; i++) {
-        const canvas = document.createElement('canvas');
-        const canvasContext = canvas.getContext('2d');
-        if (!canvasContext) {
-            console.warn('Could not get canvas context for PDF page ' + i);
-            continue;
-        }
-        const page = await doc.getPage(i + 1);
-        nextPages.push(page);
-        const viewport = page.getViewport({ scale });
-        canvas.height = viewport.height;
-        canvas.width = viewport.width;
-        canvas.classList.add('mx-auto', 'my-4', 'shadow-sm');
-        await page.render({ canvasContext, viewport }).promise;
-        nextChildren.push(canvas);
-    }
-    while (wrapper.firstChild) {
-        wrapper.removeChild(wrapper.firstChild);
-    }
-    pages = [...nextPages];
-    wrapper.append(...nextChildren);
-    wrapper.scrollTo({
-        top: scrollPosition * wrapper.scrollHeight
-    });
-}
-function scrollToPage(page) {
-    page = pageNumber = minMax(page, 1, pages.length);
-    const offset = wrapper?.children.item(page - 1)?.offsetTop;
-    if (!offset) {
-        return;
-    }
-    //                       controlsHeight + 2px border + half of the top margin
-    const padding = (controlsHeight ? controlsHeight + 2 : 0) + 8;
-    wrapper?.scrollTo({
-        top: offset - padding
-    });
-}
-const throttledScroll = throttle(onScroll, 400);
-function onScroll() {
-    if (!wrapper) {
-        return;
-    }
-    const THRESHOLD = 50;
-    let scrollPosition = wrapper.scrollTop + THRESHOLD + (controlsHeight ?? 0);
-    let page = 1;
-    for (let i = 0; i < pages.length; i++) {
-        const canvas = wrapper.children.item(i);
-        if (scrollPosition < (canvas?.offsetTop ?? wrapper.scrollHeight)) {
-            break;
-        }
-        page = i + 1;
-    }
-    pageNumber = page;
-}
-function syncZoomValue() {
-    const gridItem = findGridItem($app, id);
-    //@ts-ignore
-    if (gridItem && gridItem.data.configuration.zoom.value !== zoom) {
-        //@ts-ignore
-        gridItem.data.configuration.zoom.value = zoom;
-    }
-    $app = $app;
-}
-async function downloadPdf() {
-    if (!doc) {
-        return;
-    }
-    const data = await doc.saveDocument();
-    const url = URL.createObjectURL(new Blob([data.buffer]));
-    const link = document.createElement('a');
-    link.href = url;
-    link.download = 'document.pdf';
-    link.click();
-    URL.revokeObjectURL(url);
-}
-function minMax(value, min, max) {
-    if (value < min) {
-        return min;
-    }
-    else if (value > max) {
-        return max;
-    }
-    return value;
-}
 let css = initCss($app.css?.pdfcomponent, customCss);
 </script>
 
@@ -189,133 +34,18 @@ let css = initCss($app.css?.pdfcomponent, customCss);
 <InitializeComponent {id} />
 
 {#if render}
-	<div class="relative flex flex-col w-full h-full bg-gray-100 component-wrapper">
-		{#if source && zoom}
-			{#if pages?.length}
-				<div
-					bind:clientWidth={controlsWidth}
-					bind:clientHeight={controlsHeight}
-					class="flex flex-row w-full justify-between overflow-x-auto bg-surface border-b mx-auto py-1"
-				>
-					<div class="flex justify-start items-center px-2 text-secondary text-sm">
-						<Button
-							on:click={() => zoom && (zoom -= 10)}
-							disabled={!doc}
-							size="xs"
-							color="light"
-							variant="border"
-							title="Zoom out"
-							aria-label="Zoom out"
-							btnClasses="!rounded-r-none !px-2"
-						>
-							<ZoomOut size={16} />
-						</Button>
-						{#if wideView}
-							<Button
-								on:click={() => (zoom = 100)}
-								disabled={!doc}
-								size="xs"
-								color="light"
-								variant="border"
-								title="Reset zoom"
-								aria-label="Reset zoom"
-								btnClasses="!w-[50px] !font-medium !rounded-none !border-l-0 !px-1"
-							>
-								{zoom.toFixed(0)}%
-							</Button>
-						{/if}
-						<Button
-							on:click={() => renderPdf(true, true)}
-							disabled={!doc}
-							size="xs"
-							color="light"
-							variant="border"
-							title="Scale to viewport"
-							aria-label="Scale to viewport"
-							btnClasses="!rounded-none !border-l-0 !px-2"
-						>
-							<MoveHorizontal size={16} />
-						</Button>
-						<Button
-							on:click={() => zoom && (zoom += 10)}
-							disabled={!doc}
-							size="xs"
-							color="light"
-							variant="border"
-							title="Zoom in"
-							aria-label="Zoom in"
-							btnClasses="!rounded-l-none !px-2 !border-l-0"
-						>
-							<ZoomIn size={16} />
-						</Button>
-					</div>
-					<div class="center-center px-2 text-secondary text-sm">
-						<input
-							on:input={({ currentTarget }) => {
-								scrollToPage(currentTarget.valueAsNumber)
-							}}
-							min="1"
-							max={pages.length}
-							value={pageNumber}
-							disabled={!doc}
-							type="number"
-							class="!w-[45px] !px-1 !py-0"
-						/>
-						<span class="whitespace-nowrap pl-1">
-							/ {pages.length}
-						</span>
-					</div>
-					<div class="flex justify-end items-center px-2 text-secondary text-sm">
-						<Button
-							on:click={downloadPdf}
-							disabled={!doc}
-							size="xs"
-							color="light"
-							title="Download PDF"
-							aria-label="Download PDF"
-							btnClasses="!font-medium !px-2"
-						>
-							<Download size={14} />
-						</Button>
-					</div>
-				</div>
-			{:else}
-				<div
-					out:fade={{ duration: 200 }}
-					class="absolute inset-0 center-center flex-col text-center text-sm bg-surface text-secondary"
-				>
-					<Loader2 class="animate-spin mb-2" />
-					Loading PDF
-				</div>
-			{/if}
-			<div
-				bind:this={wrapper}
-				on:scroll={throttledScroll}
-				class={twMerge(
-					'w-full h-full overflow-auto',
-					css?.container?.class ?? '',
-					'bg-gray-100',
-					'wm-pdf'
-				)}
-				style={css?.container?.style ?? ''}
-			/>
-		{/if}
-		{#if $mode !== 'preview' && $selectedComponent?.includes(id)}
-			<button
-				class="fixed z-10 bottom-0 left-0 px-2 py-0.5 bg-indigo-500/90
-			hover:bg-indigo-500 focus:bg-indigo-500 duration-200 text-white text-2xs"
-				on:click={() => syncZoomValue()}
-			>
-				Sync zoom value
-			</button>
-		{/if}
-		{#if error}
-			<div
-				class="absolute inset-0 z-20 center-center
-		bg-gray-100 text-center text-secondary text-sm"
-			>
-				{error}
-			</div>
-		{/if}
+	<div class="relative w-full h-full bg-gray-100 component-wrapper">
+		<PdfViewer
+			{source}
+			{zoom}
+			class={css?.container?.class}
+			style={css?.container?.style}
+			on:loading={() => {
+				outputs.loading.set(true)
+			}}
+			on:loaded={() => {
+				outputs.loading.set(false)
+			}}
+		/>
 	</div>
 {/if}

package/package/components/apps/components/display/AppPdf.svelte.d.ts

@@ -1,5 +1,4 @@
 import { SvelteComponent } from "svelte";
-import 'pdfjs-dist/build/pdf.worker.entry';
 import type { ComponentCustomCSS, RichConfigurations } from '../../types';
 declare const __propDef: {
     props: {

package/package/components/apps/components/display/dbtable/InsertRow.svelte.d.ts

@@ -1,31 +1,32 @@
 import { SvelteComponent } from "svelte";
-import { type ColumnMetadata, type DbType } from './utils';
+import { type ColumnMetadata, type DbType, type ColumnDef } from './utils';
 declare const __propDef: {
     props: {
         args?: Record<string, any> | undefined;
         dbType?: DbType | undefined;
         columnDefs?: ({
-            minWidth: number;
-            hide: boolean;
-            flex: number;
-            sort: "desc" | "asc";
-            sortIndex: number;
-            aggFunc: string;
-            pivot: boolean;
-            pivotIndex: number;
-            pinned: boolean | "right" | "left";
-            rowGroup: boolean;
-            rowGroupIndex: number;
-            valueFormatter: string;
-            valueParser: string;
-            field: string;
-            headerName: string;
-            ignored: boolean;
-            hideInsert: boolean;
-            editable: boolean;
-            overrideDefaultValue: boolean;
-            defaultUserValue: any;
-            defaultValueNull: boolean;
+            minWidth?: number | undefined;
+            hide?: boolean | undefined;
+            flex?: number | undefined;
+            sort?: "desc" | "asc" | undefined;
+            sortIndex?: number | undefined;
+            aggFunc?: string | undefined;
+            pivot?: boolean | undefined;
+            pivotIndex?: number | undefined;
+            pinned?: boolean | "right" | "left" | undefined;
+            rowGroup?: boolean | undefined;
+            rowGroupIndex?: number | undefined;
+            valueFormatter?: string | undefined;
+            valueParser?: string | undefined;
+            field?: string | undefined;
+            headerName?: string | undefined;
+            children?: ColumnDef[] | undefined;
+            ignored?: boolean | undefined;
+            hideInsert?: boolean | undefined;
+            editable?: boolean | undefined;
+            overrideDefaultValue?: boolean | undefined;
+            defaultUserValue?: any;
+            defaultValueNull?: boolean | undefined;
         } & ColumnMetadata)[] | undefined;
         isInsertable?: boolean | undefined;
     };

package/package/components/apps/components/display/dbtable/utils.d.ts

@@ -17,27 +17,28 @@ export type ColumnMetadata = {
 };
 export type TableMetadata = ColumnMetadata[];
 export type ColumnDef = {
-    minWidth: number;
-    hide: boolean;
-    flex: number;
-    sort: 'asc' | 'desc';
-    sortIndex: number;
-    aggFunc: string;
-    pivot: boolean;
-    pivotIndex: number;
-    pinned: 'left' | 'right' | boolean;
-    rowGroup: boolean;
-    rowGroupIndex: number;
-    valueFormatter: string;
-    valueParser: string;
-    field: string;
-    headerName: string;
-    ignored: boolean;
-    hideInsert: boolean;
-    editable: boolean;
-    overrideDefaultValue: boolean;
-    defaultUserValue: any;
-    defaultValueNull: boolean;
+    minWidth?: number;
+    hide?: boolean;
+    flex?: number;
+    sort?: 'asc' | 'desc';
+    sortIndex?: number;
+    aggFunc?: string;
+    pivot?: boolean;
+    pivotIndex?: number;
+    pinned?: 'left' | 'right' | boolean;
+    rowGroup?: boolean;
+    rowGroupIndex?: number;
+    valueFormatter?: string;
+    valueParser?: string;
+    field?: string;
+    headerName?: string;
+    children?: ColumnDef[];
+    ignored?: boolean;
+    hideInsert?: boolean;
+    editable?: boolean;
+    overrideDefaultValue?: boolean;
+    defaultUserValue?: any;
+    defaultValueNull?: boolean;
 } & ColumnMetadata;
 export declare function loadTableMetaData(resource: string, workspace: string | undefined, table: string | undefined, resourceType: string): Promise<TableMetadata | undefined>;
 export declare function resourceTypeToLang(rt: string): string;

package/package/components/apps/components/display/table/AppAggridExplorerTable.svelte

@@ -221,10 +221,18 @@ function validateColumnDefs(columnDefs) {
     }
     // Validate each column definition
     columnDefs.forEach((colDef, index) => {
+        let noField = !colDef.field || typeof colDef.field !== 'string' || colDef.field.trim() === '';
         // Check if 'field' property exists and is a non-empty string
-        if (!colDef.field || typeof colDef.field !== 'string' || colDef.field.trim() === '') {
+        if (noField && !(colDef.children && Array.isArray(colDef.children))) {
             isValid = false;
-            errors.push(`Column at index ${index} is missing a valid 'field' property.`);
+            errors.push(`Column at index ${index} is missing a valid 'field' property nor having any children.`);
+        }
+        if (colDef.children && Array.isArray(colDef.children)) {
+            const { isValid: isChildrenValid, errors: childrenErrors } = validateColumnDefs(colDef.children);
+            if (!isChildrenValid) {
+                isValid = false;
+                errors.push(...childrenErrors.map((err) => `Error in children at index ${index}: ${err}`));
+            }
         }
     });
     return { isValid, errors };
@@ -260,6 +268,7 @@ function mountGrid() {
                 : false,
             initialState: state,
             suppressRowDeselection: true,
+            enableCellTextSelection: true,
             ...(resolvedConfig?.extraConfig ?? {}),
             onViewportChanged: (e) => {
                 firstRow = e.firstRow;
@@ -287,9 +296,9 @@ function mountGrid() {
                 onSelectionChanged(e.api);
                 resolvedConfig?.extraConfig?.['onSelectionChanged']?.(e);
             },
-            getRowId: (data) => {
-                return data.data['__index'];
-            }
+            getRowId: (data) => resolvedConfig?.rowIdCol && resolvedConfig?.rowIdCol != ''
+                ? data.data?.[resolvedConfig?.rowIdCol]
+                : data.data?.['id'] ?? data.data['__index']
         }, {});
     }
 }

package/package/components/apps/components/display/table/AppAggridTable.svelte

@@ -40,15 +40,23 @@ const rowHeights = {
 };
 let css = initCss($app.css?.aggridcomponent, customCss);
 let result = undefined;
+$: resolvedConfig?.rowIdCol && resetValues();
 $: result && setValues();
+function resetValues() {
+    api?.setGridOption('rowData', value);
+}
+let uid = Math.random().toString(36).substring(7);
+let prevUid = undefined;
 let value = Array.isArray(result)
-    ? result.map((x, i) => ({ ...x, __index: i.toString() }))
+    ? result.map((x, i) => ({ ...x, __index: i.toString() + '-' + uid }))
     : [{ error: 'input was not an array' }];
 let loaded = false;
 async function setValues() {
     value = Array.isArray(result)
-        ? result.map((x, i) => ({ ...x, __index: i.toString() }))
+        ? result.map((x, i) => ({ ...x, __index: i.toString() + '-' + uid }))
         : [{ error: 'input was not an array' }];
+    prevUid = uid;
+    uid = Math.random().toString(36).substring(7);
     if (api && loaded) {
         let selected = api.getSelectedNodes();
         if (selected && selected.length > 0 && resolvedConfig?.selectFirstRowByDefault != false) {
@@ -117,13 +125,15 @@ function onCellValueChanged(event) {
             dataCell = JSON.parse(dataCell);
         }
         catch (e) { }
+        let idx = Number(event.node.data['__index'].split('-')[0]);
+        uid = prevUid ?? '';
         outputs?.newChange?.set({
             row: event.node.rowIndex,
             column: event.colDef.field,
             value: dataCell,
-            old: result[Number(event.node.data['__index'])][event.colDef.field]
+            old: result[idx][event.colDef.field]
         });
-        result[Number(event.node.data['__index'])][event.colDef.field] = dataCell;
+        result[idx][event.colDef.field] = dataCell;
         let data = { ...result[event.node.rowIndex] };
         outputs?.selectedRow?.set(data);
     }
@@ -214,6 +224,11 @@ const tableActionsFactory = cellRendererFactory((c, p) => {
         }
     };
 });
+function getIdFromData(data) {
+    return resolvedConfig?.rowIdCol && resolvedConfig?.rowIdCol != ''
+        ? data?.[resolvedConfig?.rowIdCol] ?? data['__index']
+        : data['__index'];
+}
 function mountGrid() {
     if (eGui) {
         try {
@@ -264,6 +279,7 @@ function mountGrid() {
                 initialState: state,
                 suppressRowDeselection: true,
                 suppressDragLeaveHidesColumns: true,
+                enableCellTextSelection: true,
                 ...(resolvedConfig?.extraConfig ?? {}),
                 onStateUpdated: (e) => {
                     state = e?.api?.getState();
@@ -272,11 +288,11 @@ function mountGrid() {
                 onGridReady: (e) => {
                     outputs?.ready.set(true);
                     value = value;
-                    if (result &&
-                        result.length > 0 &&
+                    if (value &&
+                        value.length > 0 &&
                         resolvedConfig?.selectFirstRowByDefault === true &&
                         selectedRowIndex === -1) {
-                        e.api.getRowNode('0')?.setSelected(true);
+                        e.api.getRowNode(getIdFromData(value[0]))?.setSelected(true);
                     }
                     $componentControl[id] = {
                         agGrid: { api: e.api, columnApi: e.columnApi },
@@ -299,14 +315,14 @@ function mountGrid() {
                     resolvedConfig?.extraConfig?.['onSelectionChanged']?.(e);
                 },
                 onCellEditingStarted: (e) => {
-                    e.api.getRowNode(e.data['__index'])?.setSelected(true);
+                    e.api.getRowNode(getIdFromData(e.data))?.setSelected(true);
                 },
                 onFilterChanged: (e) => {
                     outputs?.filters?.set(e.api.getFilterModel());
                     outputs?.displayedRowCount?.set(e.api.getDisplayedRowCount());
                     resolvedConfig?.extraConfig?.['onFilterChanged']?.(e);
                 },
-                getRowId: (data) => data.data['__index']
+                getRowId: (data) => getIdFromData(data.data)
             }, {});
         }
         catch (e) {
@@ -338,7 +354,7 @@ function onSelectionChanged(api) {
     }
 }
 function updateValue() {
-    api?.updateGridOptions({ rowData: value });
+    api?.setGridOption('rowData', value);
     const displayedRowCount = api?.getDisplayedRowCount();
     if (displayedRowCount) {
         outputs?.displayedRowCount?.set(displayedRowCount);

package/package/components/apps/components/display/table/AppAggridTableActions.svelte

@@ -206,23 +206,25 @@ onMount(() => {
 							{controls}
 						/>
 					{:else if action.type == 'selectcomponent'}
-						<AppSelect
-							noDefault
-							noInitialize
-							extraKey={'idx' + rowIndex}
-							{render}
-							--font-size="10px"
-							id={action.id}
-							customCss={action.customCss}
-							configuration={action.configuration}
-							recomputeIds={action.recomputeIds}
-							onSelect={action.onSelect}
-							preclickAction={async () => {
-								dispatch('toggleRow')
-								selectRow(p)
-							}}
-							{controls}
-						/>
+						<div style="height: 30px; margin-top: -3px;">
+							<AppSelect
+								noDefault
+								noInitialize
+								extraKey={'idx' + rowIndex}
+								{render}
+								--font-size="10px"
+								id={action.id}
+								customCss={action.customCss}
+								configuration={action.configuration}
+								recomputeIds={action.recomputeIds}
+								onSelect={action.onSelect}
+								preclickAction={async () => {
+									dispatch('toggleRow')
+									selectRow(p)
+								}}
+								{controls}
+							/>
+						</div>
 					{/if}
 				{:else if action.type == 'buttoncomponent'}
 					<AppButton
@@ -260,22 +262,24 @@ onMount(() => {
 						}}
 					/>
 				{:else if action.type == 'selectcomponent'}
-					<AppSelect
-						noDefault
-						noInitialize
-						extraKey={'idx' + rowIndex}
-						{render}
-						--font-size="10px"
-						id={action.id}
-						customCss={action.customCss}
-						configuration={action.configuration}
-						recomputeIds={action.recomputeIds}
-						onSelect={action.onSelect}
-						preclickAction={async () => {
-							dispatch('toggleRow')
-							selectRow(p)
-						}}
-					/>
+					<div style="height: 30px; margin-top: -3px;">
+						<AppSelect
+							noDefault
+							noInitialize
+							extraKey={'idx' + rowIndex}
+							{render}
+							--font-size="10px"
+							id={action.id}
+							customCss={action.customCss}
+							configuration={action.configuration}
+							recomputeIds={action.recomputeIds}
+							onSelect={action.onSelect}
+							preclickAction={async () => {
+								dispatch('toggleRow')
+								selectRow(p)
+							}}
+						/>
+					</div>
 				{/if}
 			</div>
 		{/each}