windmill-components 1.60.4 → 1.83.1

package/components/apps/components/dateInputs/AppDateInput.svelte

@@ -1,34 +0,0 @@
-<script>import { getContext } from 'svelte';
-import AlignWrapper from '../helpers/AlignWrapper.svelte';
-import InputValue from '../helpers/InputValue.svelte';
-export let id;
-export let configuration;
-export let inputType;
-export let verticalAlignment = undefined;
-export const staticOutputs = ['result'];
-const { worldStore } = getContext('AppEditorContext');
-let input;
-let labelValue = 'Title';
-let minValue = '';
-let maxValue = '';
-$: outputs = $worldStore?.outputsById[id];
-function handleInput() {
-    outputs?.result.set(input.value);
-}
-</script>
-
-<InputValue {id} input={configuration.label} bind:value={labelValue} />
-<InputValue {id} input={configuration.minDate} bind:value={minValue} />
-<InputValue {id} input={configuration.maxDate} bind:value={maxValue} />
-
-<AlignWrapper {verticalAlignment}>
-	<input
-		type={inputType}
-		bind:this={input}
-		on:input={handleInput}
-		min={minValue}
-		max={maxValue}
-		placeholder="Type..."
-		class="h-full"
-	/>
-</AlignWrapper>

package/components/apps/components/numberInputs/AppNumberInput.svelte

@@ -1,33 +0,0 @@
-<script>import { getContext } from 'svelte';
-import AlignWrapper from '../helpers/AlignWrapper.svelte';
-import InputValue from '../helpers/InputValue.svelte';
-export let id;
-export let configuration;
-export let verticalAlignment = undefined;
-export const staticOutputs = ['result'];
-const { worldStore } = getContext('AppEditorContext');
-let value;
-let labelValue = 'Title';
-$: outputs = $worldStore?.outputsById[id];
-$: if (value || !value) {
-    // Disallow 'e' character in numbers
-    // if(value && value.toString().includes('e')) {
-    // 	value = +value.toString().replaceAll('e', '')
-    // }
-    const num = isNaN(+value) ? null : +value;
-    outputs?.result.set(num);
-}
-</script>
-
-<InputValue {id} input={configuration.label} bind:value={labelValue} />
-
-<AlignWrapper {verticalAlignment}>
-	<input
-		bind:value
-		type="number"
-		inputmode="numeric"
-		pattern="\d*"
-		placeholder="Type..."
-		class="h-full"
-	/>
-</AlignWrapper>

package/components/apps/components/numberInputs/AppSliderInputs.svelte

@@ -1,37 +0,0 @@
-<script>import { Badge } from '../../../common';
-import Range from '../../../Range.svelte';
-import { getContext } from 'svelte';
-import AlignWrapper from '../helpers/AlignWrapper.svelte';
-import InputValue from '../helpers/InputValue.svelte';
-export let id;
-export let configuration;
-export let verticalAlignment = undefined;
-export const staticOutputs = ['result'];
-const { worldStore } = getContext('AppEditorContext');
-let value;
-let min = 0;
-let max = 42;
-$: outputs = $worldStore?.outputsById[id];
-$: if (value || !value) {
-    // Disallow 'e' character in numbers
-    // if(value && value.toString().includes('e')) {
-    // 	value = +value.toString().replaceAll('e', '')
-    // }
-    const num = isNaN(+value) ? null : +value;
-    outputs?.result.set(num);
-}
-</script>
-
-<InputValue {id} input={configuration.min} bind:value={min} />
-<InputValue {id} input={configuration.max} bind:value={max} />
-
-<AlignWrapper {verticalAlignment}>
-	<div class="flex w-full gap-1 px-1">
-		<span>{min}</span>
-		<div class="grow ">
-			<Range bind:value {min} {max} />
-		</div>
-		<span>{max}</span>
-		<span class="mx-2"><Badge large color="blue">{value}</Badge></span>
-	</div>
-</AlignWrapper>

package/components/apps/components/selectInputs/AppCheckbox.svelte

@@ -1,32 +0,0 @@
-<script>import Toggle from '../../../Toggle.svelte';
-import { getContext } from 'svelte';
-import AlignWrapper from '../helpers/AlignWrapper.svelte';
-import InputValue from '../helpers/InputValue.svelte';
-export let id;
-export let configuration;
-export let horizontalAlignment = undefined;
-export let verticalAlignment = undefined;
-const { worldStore } = getContext('AppEditorContext');
-export const staticOutputs = ['result'];
-let labelValue = 'Default label';
-let value = false;
-// As the checkbox is a special case and has no input
-// we need to manually set the output
-$: outputs = $worldStore?.outputsById[id];
-</script>
-
-<InputValue {id} input={configuration.label} bind:value={labelValue} />
-
-<AlignWrapper {horizontalAlignment} {verticalAlignment}>
-	<Toggle
-		on:pointerdown={(e) => {
-			e?.stopPropagation()
-			window.dispatchEvent(new Event('pointerup'))
-		}}
-		bind:value
-		options={{ right: labelValue }}
-		on:change={(e) => {
-			outputs.result.set(e.detail)
-		}}
-	/>
-</AlignWrapper>

package/components/apps/components/selectInputs/AppSelect.svelte

@@ -1,47 +0,0 @@
-<script>import { createEventDispatcher, getContext } from 'svelte';
-import Select from 'svelte-select';
-import AlignWrapper from '../helpers/AlignWrapper.svelte';
-import InputValue from '../helpers/InputValue.svelte';
-export const staticOutputs = ['loading', 'result'];
-export let id;
-export let configuration;
-export let horizontalAlignment = undefined;
-export let verticalAlignment = undefined;
-const { worldStore, connectingInput, selectedComponent } = getContext('AppEditorContext');
-let label;
-let items;
-let itemKey;
-$: outputs = $worldStore?.outputsById[id];
-function onChange(e) {
-    e?.stopPropagation();
-    window.dispatchEvent(new Event('pointerup'));
-    outputs?.result.set(e.detail?.[itemKey] || undefined);
-}
-let value = undefined;
-$: items?.[0]?.['value'] != value && (value = items?.[0]?.['value']);
-</script>
-
-<InputValue {id} input={configuration.label} bind:value={label} />
-<InputValue {id} input={configuration.items} bind:value={items} />
-<InputValue {id} input={configuration.itemKey} bind:value={itemKey} />
-
-<AlignWrapper {horizontalAlignment} {verticalAlignment}>
-	<Select
-		--height="34px"
-		class="select"
-		on:clear={onChange}
-		on:change={onChange}
-		on:focus={(e) => {
-			e?.stopPropagation()
-			window.dispatchEvent(new Event('pointerup'))
-		}}
-		{items}
-		{value}
-		placeholder="Select an item"
-		on:click={() => {
-			if (!$connectingInput.opened) {
-				$selectedComponent = id
-			}
-		}}
-	/>
-</AlignWrapper>

package/components/apps/components/table/AppTable.svelte

@@ -1,198 +0,0 @@
-<script>import { getContext, onMount } from 'svelte';
-import InputValue from '../helpers/InputValue.svelte';
-import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
-import { writable } from 'svelte/store';
-import { createSvelteTable, flexRender } from '@tanstack/svelte-table';
-import AppButton from '../buttons/AppButton.svelte';
-import { classNames, isObject } from '../../../../utils';
-import DebouncedInput from '../helpers/DebouncedInput.svelte';
-import AppTableFooter from './AppTableFooter.svelte';
-import { tableOptions } from './tableOptions';
-import Alert from '../../../common/alert/Alert.svelte';
-export let id;
-export let componentInput;
-export let configuration;
-export let actionButtons;
-export const staticOutputs = ['selectedRow', 'loading', 'result', 'search'];
-let result = undefined;
-let search = undefined;
-let searchValue = '';
-let pagination = true;
-$: setSearch(searchValue);
-function setSearch(srch) {
-    outputs?.search?.set(srch);
-}
-const options = writable({
-    ...tableOptions,
-    data: [],
-    columns: []
-});
-let table = createSvelteTable(options);
-const { worldStore, staticOutputs: staticOutputsStore } = getContext('AppEditorContext');
-let selectedRowIndex = -1;
-function toggleRow(row, rowIndex) {
-    if (selectedRowIndex !== rowIndex) {
-        selectedRowIndex = rowIndex;
-        outputs?.selectedRow.set(row.original);
-    }
-}
-let mounted = false;
-onMount(() => {
-    mounted = true;
-});
-$: selectedRowIndex === -1 &&
-    Array.isArray(result) &&
-    result.length > 0 &&
-    // We need to wait until the component is mounted so the world is created
-    mounted &&
-    toggleRow({ original: result[0] }, 0);
-function setOptions(filteredResult) {
-    if (!Array.isArray(result)) {
-        return;
-    }
-    const headers = Array.from(new Set(result.flatMap((row) => Object.keys(row))));
-    $options = {
-        ...tableOptions,
-        data: filteredResult,
-        columns: headers.map((header) => {
-            return {
-                accessorKey: header,
-                cell: (info) => info.getValue()
-            };
-        })
-    };
-}
-function searchInResult(result, searchValue) {
-    if (searchValue === '') {
-        return result;
-    }
-    return result.filter((row) => Object.values(row).some((value) => value?.toString()?.includes(searchValue)));
-}
-function renderCell(x, props) {
-    try {
-        return flexRender(x, props);
-    }
-    catch (e) {
-        return undefined;
-    }
-}
-function cellIsObject(x, props) {
-    return typeof x != 'string' && typeof x(props) == 'object';
-}
-let filteredResult = [];
-$: filteredResult && setOptions(filteredResult);
-$: search === 'By Component' && (filteredResult = searchInResult(result ?? [], searchValue));
-$: (search === 'By Runnable' || search === 'Disabled') && (filteredResult = result ?? []);
-$: outputs = $worldStore?.outputsById[id];
-function rerender() {
-    table = createSvelteTable(options);
-}
-$: result && rerender();
-</script>
-
-<InputValue {id} input={configuration.search} bind:value={search} />
-
-<RunnableWrapper flexWrap bind:componentInput {id} bind:result>
-	{#if Array.isArray(result) && result.every(isObject)}
-		<div class="border border-gray-300 shadow-sm divide-y divide-gray-300  flex flex-col h-full">
-			{#if search !== 'Disabled'}
-				<div class="px-2 py-1">
-					<div class="flex items-center">
-						<div class="grow max-w-[300px]">
-							<DebouncedInput placeholder="Search..." bind:value={searchValue} />
-						</div>
-					</div>
-				</div>
-			{/if}
-
-			<div class="overflow-x-auto flex-1 w-full">
-				<table class="relative w-full border-b border-b-gray-200">
-					<thead class="sticky top-0 z-40 bg-gray-50 text-left">
-						{#each $table.getHeaderGroups() as headerGroup}
-							<tr class="divide-x">
-								{#each headerGroup.headers as header}
-									{#if header?.column?.columnDef?.header}
-										{@const context = header?.getContext()}
-										{#if context}
-											{@const component = renderCell(header.column.columnDef.header, context)}
-											<th class="!p-0">
-												<span class="block px-4 py-4 text-sm font-semibold border-b">
-													{#if !header.isPlaceholder && component}
-														<svelte:component this={component} />
-													{/if}
-												</span>
-											</th>
-										{/if}
-									{/if}
-								{/each}
-								{#if actionButtons.length > 0}
-									<th class="!p-0">
-										<span class="block px-4 py-4 text-sm font-semibold border-b"> Actions </span>
-									</th>
-								{/if}
-							</tr>
-						{/each}
-					</thead>
-					<tbody class="divide-y divide-gray-200 bg-white ">
-						{#each $table.getRowModel().rows as row, rowIndex (row.id)}
-							<tr
-								class={classNames(
-									'last-of-type:!border-b-0',
-									selectedRowIndex === rowIndex
-										? 'bg-blue-100 hover:bg-blue-200'
-										: 'hover:bg-blue-50',
-									'divide-x w-full',
-									selectedRowIndex === rowIndex
-										? 'divide-blue-200 hover:divide-blue-300'
-										: 'divide-gray-200'
-								)}
-							>
-								{#each row.getVisibleCells() as cell, index (index)}
-									{#if cell?.column?.columnDef?.cell}
-										{@const context = cell?.getContext()}
-										{#if context}
-											{@const component = renderCell(cell.column.columnDef.cell, context)}
-											<td
-												on:click={() => toggleRow(row, rowIndex)}
-												class="p-4 whitespace-pre-wrap truncate text-xs text-gray-900"
-											>
-												{#if typeof cell.column.columnDef.cell != 'string' && cellIsObject(cell.column.columnDef.cell, context)}
-													{JSON.stringify(cell.column.columnDef.cell(context), null, 4)}
-												{:else if component != undefined}
-													<svelte:component this={component} />
-												{/if}
-											</td>
-										{/if}
-									{/if}
-								{/each}
-
-								{#if actionButtons.length > 0}
-									<td
-										class="flex w-full flex-row gap-2 p-4"
-										on:click={() => toggleRow(row, rowIndex)}
-									>
-										{#each actionButtons as actionButton, actionIndex (actionIndex)}
-											<AppButton
-												noWFull
-												{...actionButton}
-												extraQueryParams={{ row: row.original }}
-												bind:componentInput={actionButton.componentInput}
-												bind:staticOutputs={$staticOutputsStore[actionButton.id]}
-											/>
-										{/each}
-									</td>
-								{/if}
-							</tr>
-						{/each}
-					</tbody>
-				</table>
-			</div>
-
-			<AppTableFooter paginationEnabled={pagination} {result} {table} />
-		</div>
-	{:else if result != undefined}
-		<Alert title="Parsing issues" type="error" size="xs">
-			The result should be an array of objects
-		</Alert>
-	{/if}
-</RunnableWrapper>

package/components/apps/components/textInputs/AppTextInput.svelte

@@ -1,31 +0,0 @@
-<script>import { getContext } from 'svelte';
-import AlignWrapper from '../helpers/AlignWrapper.svelte';
-import InputValue from '../helpers/InputValue.svelte';
-export let id;
-export let configuration;
-export let inputType = 'text';
-export let verticalAlignment = undefined;
-export const staticOutputs = ['result'];
-const { worldStore } = getContext('AppEditorContext');
-let input;
-let placeholder = undefined;
-$: outputs = $worldStore?.outputsById[id];
-function handleInput() {
-    outputs?.result.set(input.value);
-}
-</script>
-
-<InputValue {id} input={configuration.placeholder} bind:value={placeholder} />
-
-<AlignWrapper {verticalAlignment}>
-	<input
-		on:focus={(e) => {
-			e?.stopPropagation()
-			window.dispatchEvent(new Event('pointerup'))
-		}}
-		type={inputType}
-		bind:this={input}
-		on:input={handleInput}
-		{placeholder}
-	/>
-</AlignWrapper>

package/components/apps/editor/ComponentEditor.svelte

@@ -1,145 +0,0 @@
-<script>import { classNames } from '../../../utils';
-import { getContext } from 'svelte';
-import BarChartComponent from '../components/dataDisplay/AppBarChart.svelte';
-import DisplayComponent from '../components/DisplayComponent.svelte';
-import TableComponent from '../components/table/AppTable.svelte';
-import TextComponent from '../components/dataDisplay/AppText.svelte';
-import ButtonComponent from '../components/buttons/AppButton.svelte';
-import PieChartComponent from '../components/dataDisplay/AppPieChart.svelte';
-import SelectComponent from '../components/selectInputs/AppSelect.svelte';
-import CheckboxComponent from '../components/selectInputs/AppCheckbox.svelte';
-import TextInputComponent from '../components/textInputs/AppTextInput.svelte';
-import NumberInputComponent from '../components/numberInputs/AppNumberInput.svelte';
-import DateInputComponent from '../components/dateInputs/AppDateInput.svelte';
-import ComponentHeader from './ComponentHeader.svelte';
-import AppForm from '../components/form/AppForm.svelte';
-import AppScatterChart from '../components/dataDisplay/AppScatterChart.svelte';
-import AppTimeseries from '../components/dataDisplay/AppTimeseries.svelte';
-import AppHtml from '../components/dataDisplay/AppHtml.svelte';
-import AppSliderInputs from '../components/numberInputs/AppSliderInputs.svelte';
-import VegaLiteHtml from '../components/dataDisplay/VegaLiteHtml.svelte';
-export let component;
-export let selected;
-export let locked = false;
-export let pointerdown = false;
-let hover = false;
-const { staticOutputs, mode, connectingInput } = getContext('AppEditorContext');
-</script>
-
-<div
-	on:pointerenter={() => (hover = true)}
-	on:pointerleave={() => (hover = false)}
-	class="h-full flex flex-col w-full component"
->
-	{#if $mode !== 'preview'}
-		<ComponentHeader {hover} {pointerdown} {component} {selected} on:delete on:lock {locked} />
-	{/if}
-
-	<div
-		on:pointerdown={(e) => {
-			if ($mode === 'preview') {
-				e?.stopPropagation()
-			}
-		}}
-		class={classNames(
-			'border h-full bg-white',
-			selected && $mode !== 'preview' ? 'border-blue-500' : 'border-white',
-			!selected && $mode !== 'preview' && !component.card ? 'border-gray-100' : '',
-			$mode !== 'preview' && !$connectingInput.opened ? 'hover:border-blue-500' : '',
-			component.softWrap ? '' : 'overflow-auto',
-			$mode != 'preview' ? 'cursor-pointer' : '',
-			'relative z-auto'
-		)}
-	>
-		{#if component.type === 'displaycomponent'}
-			<DisplayComponent
-				{...component}
-				bind:componentInput={component.componentInput}
-				bind:staticOutputs={$staticOutputs[component.id]}
-			/>
-		{:else if component.type === 'barchartcomponent'}
-			<BarChartComponent
-				{...component}
-				bind:componentInput={component.componentInput}
-				bind:staticOutputs={$staticOutputs[component.id]}
-			/>
-		{:else if component.type === 'timeseriescomponent'}
-			<AppTimeseries
-				{...component}
-				bind:componentInput={component.componentInput}
-				bind:staticOutputs={$staticOutputs[component.id]}
-			/>
-		{:else if component.type === 'htmlcomponent'}
-			<AppHtml
-				{...component}
-				bind:componentInput={component.componentInput}
-				bind:staticOutputs={$staticOutputs[component.id]}
-			/>
-		{:else if component.type === 'vegalitecomponent'}
-			<VegaLiteHtml
-				{...component}
-				bind:componentInput={component.componentInput}
-				bind:staticOutputs={$staticOutputs[component.id]}
-			/>
-		{:else if component.type === 'scatterchartcomponent'}
-			<AppScatterChart
-				{...component}
-				bind:componentInput={component.componentInput}
-				bind:staticOutputs={$staticOutputs[component.id]}
-			/>
-		{:else if component.type === 'piechartcomponent'}
-			<PieChartComponent
-				{...component}
-				bind:staticOutputs={$staticOutputs[component.id]}
-				bind:componentInput={component.componentInput}
-			/>
-		{:else if component.type === 'tablecomponent'}
-			<TableComponent
-				{...component}
-				bind:staticOutputs={$staticOutputs[component.id]}
-				bind:componentInput={component.componentInput}
-				bind:actionButtons={component.actionButtons}
-			/>
-		{:else if component.type === 'textcomponent'}
-			<TextComponent
-				{...component}
-				bind:componentInput={component.componentInput}
-				bind:staticOutputs={$staticOutputs[component.id]}
-			/>
-		{:else if component.type === 'buttoncomponent'}
-			<ButtonComponent
-				{...component}
-				bind:componentInput={component.componentInput}
-				bind:staticOutputs={$staticOutputs[component.id]}
-			/>
-		{:else if component.type === 'selectcomponent'}
-			<SelectComponent {...component} bind:staticOutputs={$staticOutputs[component.id]} />
-		{:else if component.type === 'formcomponent'}
-			<AppForm
-				{...component}
-				bind:componentInput={component.componentInput}
-				bind:staticOutputs={$staticOutputs[component.id]}
-			/>
-		{:else if component.type === 'checkboxcomponent'}
-			<CheckboxComponent {...component} bind:staticOutputs={$staticOutputs[component.id]} />
-		{:else if component.type === 'textinputcomponent'}
-			<TextInputComponent {...component} bind:staticOutputs={$staticOutputs[component.id]} />
-		{:else if component.type === 'passwordinputcomponent'}
-			<TextInputComponent
-				inputType="password"
-				{...component}
-				bind:staticOutputs={$staticOutputs[component.id]}
-			/>
-		{:else if component.type === 'dateinputcomponent'}
-			<DateInputComponent
-				inputType="date"
-				{...component}
-				bind:staticOutputs={$staticOutputs[component.id]}
-			/>
-		{:else if component.type === 'numberinputcomponent'}
-			<NumberInputComponent {...component} bind:staticOutputs={$staticOutputs[component.id]} />
-		{:else if component.type === 'slidercomponent'}
-			<AppSliderInputs {...component} bind:staticOutputs={$staticOutputs[component.id]} />
-		{/if}
-	</div>
-</div>

package/components/apps/editor/ComponentEditor.svelte.d.ts

@@ -1,23 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { AppComponent } from '../types';
-declare const __propDef: {
-    props: {
-        component: AppComponent;
-        selected: boolean;
-        locked?: boolean | undefined;
-        pointerdown?: boolean | undefined;
-    };
-    events: {
-        delete: CustomEvent<any>;
-        lock: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type ComponentEditorProps = typeof __propDef.props;
-export type ComponentEditorEvents = typeof __propDef.events;
-export type ComponentEditorSlots = typeof __propDef.slots;
-export default class ComponentEditor extends SvelteComponentTyped<ComponentEditorProps, ComponentEditorEvents, ComponentEditorSlots> {
-}
-export {};

package/components/apps/editor/TablePanel.svelte

@@ -1,17 +0,0 @@
-<script>import { getContext } from 'svelte';
-import ComponentPanel from './settingsPanel/ComponentPanel.svelte';
-export let component;
-const { selectedComponent } = getContext('AppEditorContext');
-</script>
-
-{#each component.actionButtons as actionButton (actionButton.id)}
-	{#if actionButton.id === $selectedComponent}
-		<ComponentPanel
-			rowColumns
-			bind:component={actionButton}
-			onDelete={() => {
-				component.actionButtons = component.actionButtons.filter((c) => c.id !== actionButton.id)
-			}}
-		/>
-	{/if}
-{/each}

package/components/apps/editor/TablePanel.svelte.d.ts

@@ -1,17 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { TableComponent } from '../types';
-declare const __propDef: {
-    props: {
-        component: TableComponent;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type TablePanelProps = typeof __propDef.props;
-export type TablePanelEvents = typeof __propDef.events;
-export type TablePanelSlots = typeof __propDef.slots;
-export default class TablePanel extends SvelteComponentTyped<TablePanelProps, TablePanelEvents, TablePanelSlots> {
-}
-export {};

package/components/apps/editor/componentsPanel/componentStaticValues.d.ts

@@ -1,7 +0,0 @@
-export declare const staticValues: {
-    readonly buttonColorOptions: ("blue" | "gray" | "red" | "green" | "dark" | "light")[];
-    readonly buttonSizeOptions: readonly ["xs", "sm", "md", "lg", "xl"];
-    readonly tableSearchOptions: readonly ["By Component", "By Runnable", "Disabled"];
-    readonly chartThemeOptions: readonly ["theme1", "theme2", "theme3"];
-    readonly textStyleOptions: readonly ["Title", "Subtitle", "Body", "Label", "Caption"];
-};

package/components/apps/editor/componentsPanel/componentStaticValues.js

@@ -1,9 +0,0 @@
-import { BUTTON_COLORS } from '../../../common';
-const buttonColorOptions = [...BUTTON_COLORS];
-export const staticValues = {
-    buttonColorOptions,
-    buttonSizeOptions: ['xs', 'sm', 'md', 'lg', 'xl'],
-    tableSearchOptions: ['By Component', 'By Runnable', 'Disabled'],
-    chartThemeOptions: ['theme1', 'theme2', 'theme3'],
-    textStyleOptions: ['Title', 'Subtitle', 'Body', 'Label', 'Caption']
-};

package/components/apps/editor/componentsPanel/data.d.ts

@@ -1,3 +0,0 @@
-import type { ComponentSet } from '../../types';
-declare const componentSets: ComponentSet[];
-export { componentSets };