windmill-components 1.60.3 → 1.70.0

package/components/apps/editor/component/Component.svelte

@@ -0,0 +1,209 @@
+<script>import { getContext } from 'svelte';
+import { fade } from 'svelte/transition';
+import { Loader2 } from 'lucide-svelte';
+import { twMerge } from 'tailwind-merge';
+import ComponentHeader from '../ComponentHeader.svelte';
+import { deepEqual } from 'fast-equals';
+import { AppBarChart, AppDisplayComponent, AppTable, AppText, AppButton, AppPieChart, AppSelect, AppCheckbox, AppTextInput, AppNumberInput, AppDateInput, AppForm, AppScatterChart, AppTimeseries, AppHtml, AppSliderInputs, AppFormButton, VegaLiteHtml, PlotlyHtml, AppRangeInput, AppTabs, AppIcon, AppCurrencyInput, AppDivider, AppFileInput, AppImage, AppContainer } from '../../components';
+import AppAggridTable from '../../components/display/table/AppAggridTable.svelte';
+export let pComponent;
+export let selected;
+export let locked = false;
+export let pointerdown = false;
+const { staticOutputs, mode, connectingInput, app } = getContext('AppEditorContext');
+let hover = false;
+let initializing = undefined;
+let componentContainerHeight = 0;
+let component = JSON.parse(JSON.stringify(pComponent));
+$: if (pComponent && !deepEqual(pComponent, component)) {
+    component = JSON.parse(JSON.stringify(pComponent));
+}
+</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) => {
+			// Removed in https://github.com/windmill-labs/windmill/pull/1171
+			// In case of a bug, try stopping propagation on the native event
+			// and dispatch a custom event: `e?.stopPropagation(); dispatch('select');`
+			// if ($mode === 'preview') {
+			// 	e?.stopPropagation()
+			// }
+		}}
+		class={twMerge(
+			'h-full bg-white/40',
+			selected && $mode !== 'preview' ? 'border border-blue-500' : '',
+			!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',
+			$app.css?.['app']?.['component']?.class
+		)}
+		style={$app.css?.['app']?.['component']?.style}
+		bind:clientHeight={componentContainerHeight}
+	>
+		{#if component.type === 'displaycomponent'}
+			<AppDisplayComponent
+				{...component}
+				bind:initializing
+				bind:componentInput={component.componentInput}
+				bind:staticOutputs={$staticOutputs[component.id]}
+			/>
+		{:else if component.type === 'barchartcomponent'}
+			<AppBarChart
+				{...component}
+				bind:initializing
+				bind:componentInput={component.componentInput}
+				bind:staticOutputs={$staticOutputs[component.id]}
+			/>
+		{:else if component.type === 'timeseriescomponent'}
+			<AppTimeseries
+				{...component}
+				bind:initializing
+				bind:componentInput={component.componentInput}
+				bind:staticOutputs={$staticOutputs[component.id]}
+			/>
+		{:else if component.type === 'htmlcomponent'}
+			<AppHtml
+				{...component}
+				bind:initializing
+				bind:componentInput={component.componentInput}
+				bind:staticOutputs={$staticOutputs[component.id]}
+			/>
+		{:else if component.type === 'vegalitecomponent'}
+			<VegaLiteHtml
+				{...component}
+				bind:initializing
+				bind:componentInput={component.componentInput}
+				bind:staticOutputs={$staticOutputs[component.id]}
+			/>
+		{:else if component.type === 'plotlycomponent'}
+			<PlotlyHtml
+				{...component}
+				bind:initializing
+				bind:componentInput={component.componentInput}
+				bind:staticOutputs={$staticOutputs[component.id]}
+			/>
+		{:else if component.type === 'scatterchartcomponent'}
+			<AppScatterChart
+				{...component}
+				bind:initializing
+				bind:componentInput={component.componentInput}
+				bind:staticOutputs={$staticOutputs[component.id]}
+			/>
+		{:else if component.type === 'piechartcomponent'}
+			<AppPieChart
+				{...component}
+				bind:initializing
+				bind:staticOutputs={$staticOutputs[component.id]}
+				bind:componentInput={component.componentInput}
+			/>
+		{:else if component.type === 'tablecomponent'}
+			<AppTable
+				{...component}
+				bind:initializing
+				bind:staticOutputs={$staticOutputs[component.id]}
+				bind:componentInput={component.componentInput}
+				bind:actionButtons={component.actionButtons}
+			/>
+		{:else if component.type === 'aggridcomponent'}
+			<AppAggridTable
+				{...component}
+				bind:initializing
+				bind:staticOutputs={$staticOutputs[component.id]}
+				bind:componentInput={component.componentInput}
+			/>
+		{:else if component.type === 'textcomponent'}
+			<AppText
+				{...component}
+				bind:initializing
+				bind:componentInput={component.componentInput}
+				bind:staticOutputs={$staticOutputs[component.id]}
+			/>
+		{:else if component.type === 'buttoncomponent'}
+			<AppButton
+				{...component}
+				bind:componentInput={component.componentInput}
+				bind:staticOutputs={$staticOutputs[component.id]}
+			/>
+		{:else if component.type === 'selectcomponent'}
+			<AppSelect {...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 === 'formbuttoncomponent'}
+			<AppFormButton
+				{...component}
+				bind:componentInput={component.componentInput}
+				bind:staticOutputs={$staticOutputs[component.id]}
+			/>
+		{:else if component.type === 'checkboxcomponent'}
+			<AppCheckbox {...component} bind:staticOutputs={$staticOutputs[component.id]} />
+		{:else if component.type === 'textinputcomponent'}
+			<AppTextInput {...component} bind:staticOutputs={$staticOutputs[component.id]} />
+		{:else if component.type === 'passwordinputcomponent'}
+			<AppTextInput
+				inputType="password"
+				{...component}
+				bind:staticOutputs={$staticOutputs[component.id]}
+			/>
+		{:else if component.type === 'dateinputcomponent'}
+			<AppDateInput
+				inputType="date"
+				{...component}
+				bind:staticOutputs={$staticOutputs[component.id]}
+			/>
+		{:else if component.type === 'numberinputcomponent'}
+			<AppNumberInput {...component} bind:staticOutputs={$staticOutputs[component.id]} />
+		{:else if component.type === 'currencycomponent'}
+			<AppCurrencyInput {...component} bind:staticOutputs={$staticOutputs[component.id]} />
+		{:else if component.type === 'slidercomponent'}
+			<AppSliderInputs {...component} bind:staticOutputs={$staticOutputs[component.id]} />
+		{:else if component.type === 'horizontaldividercomponent'}
+			<AppDivider {...component} position="horizontal" />
+		{:else if component.type === 'verticaldividercomponent'}
+			<AppDivider {...component} position="vertical" />
+		{:else if component.type === 'rangecomponent'}
+			<AppRangeInput {...component} bind:staticOutputs={$staticOutputs[component.id]} />
+		{:else if component.type === 'tabscomponent'}
+			<AppTabs
+				{...component}
+				bind:staticOutputs={$staticOutputs[component.id]}
+				{componentContainerHeight}
+			/>
+		{:else if component.type === 'containercomponent'}
+			<AppContainer
+				{...component}
+				bind:staticOutputs={$staticOutputs[component.id]}
+				{componentContainerHeight}
+			/>
+		{:else if component.type === 'iconcomponent'}
+			<AppIcon {...component} bind:staticOutputs={$staticOutputs[component.id]} />
+		{:else if component.type === 'fileinputcomponent'}
+			<AppFileInput {...component} bind:staticOutputs={$staticOutputs[component.id]} />
+		{:else if component.type === 'imagecomponent'}
+			<AppImage {...component} bind:staticOutputs={$staticOutputs[component.id]} />
+		{/if}
+	</div>
+</div>
+{#if initializing}
+	<div
+		out:fade={{ duration: 200 }}
+		class="absolute inset-0 center-center flex-col bg-white text-gray-600 border"
+	>
+		<Loader2 class="animate-spin" size={16} />
+		<span class="text-xs mt-1">Loading</span>
+	</div>
+{/if}

package/components/apps/editor/component/Component.svelte.d.ts

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

package/components/apps/editor/component/README.md

@@ -0,0 +1,15 @@
+# How to add new components
+
+1. [**`components.ts`**](./components.ts):
+   1. Create a type for the new component and add it to the `AppComponent` union
+      type
+   1. Add the component to the `components` record
+1. [**`sets.ts`**](./sets.ts):
+   1. Add the component to one of the component sets: `layout`, `buttons`,
+      `inputs` or `display` _(this controls which group the component will be
+      placed in in the **Insert** menu)_
+1. [**`Component.svelte`**](./Component.svelte):
+   1. Add the new component in the Svelte `if` statement
+1. [**`default-codes.ts`**](./default-codes.ts):
+   1. _(optional)_ Add the default code associated with the new component to the
+      `DEFAULT_CODES` record

package/components/apps/editor/component/components.d.ts

@@ -0,0 +1,65 @@
+import type { Size } from '@windmill-labs/svelte-grid';
+import type { IntRange } from '../../../../common';
+import type { NARROW_GRID_COLUMNS, WIDE_GRID_COLUMNS } from '../../gridUtils';
+import type { BaseAppComponent } from '../../types';
+type BaseComponent<T extends string> = {
+    type: T;
+};
+export type TextComponent = BaseComponent<'textcomponent'>;
+export type TextInputComponent = BaseComponent<'textinputcomponent'>;
+export type PasswordInputComponent = BaseComponent<'passwordinputcomponent'>;
+export type DateInputComponent = BaseComponent<'dateinputcomponent'>;
+export type NumberInputComponent = BaseComponent<'numberinputcomponent'>;
+export type CurrencyComponent = BaseComponent<'currencycomponent'>;
+export type SliderComponent = BaseComponent<'slidercomponent'>;
+export type RangeComponent = BaseComponent<'rangecomponent'>;
+export type HtmlComponent = BaseComponent<'htmlcomponent'>;
+export type VegaLiteComponent = BaseComponent<'vegalitecomponent'>;
+export type PlotlyComponent = BaseComponent<'plotlycomponent'>;
+export type TimeseriesComponent = BaseComponent<'timeseriescomponent'>;
+export type ButtonComponent = BaseComponent<'buttoncomponent'> & {
+    recomputeIds: string[] | undefined;
+};
+export type FormComponent = BaseComponent<'formcomponent'> & {
+    recomputeIds: string[] | undefined;
+};
+export type FormButtonComponent = BaseComponent<'formbuttoncomponent'> & {
+    recomputeIds: string[] | undefined;
+};
+export type RunFormComponent = BaseComponent<'runformcomponent'>;
+export type BarChartComponent = BaseComponent<'barchartcomponent'>;
+export type PieChartComponent = BaseComponent<'piechartcomponent'>;
+export type ScatterChartComponent = BaseComponent<'scatterchartcomponent'>;
+export type TableComponent = BaseComponent<'tablecomponent'> & {
+    actionButtons: (BaseAppComponent & ButtonComponent)[];
+};
+export type AggridComponent = BaseComponent<'aggridcomponent'>;
+export type DisplayComponent = BaseComponent<'displaycomponent'>;
+export type ImageComponent = BaseComponent<'imagecomponent'>;
+export type InputComponent = BaseComponent<'inputcomponent'>;
+export type SelectComponent = BaseComponent<'selectcomponent'>;
+export type CheckboxComponent = BaseComponent<'checkboxcomponent'>;
+export type RadioComponent = BaseComponent<'radiocomponent'>;
+export type IconComponent = BaseComponent<'iconcomponent'>;
+export type HorizontalDividerComponent = BaseComponent<'horizontaldividercomponent'>;
+export type VerticalDividerComponent = BaseComponent<'verticaldividercomponent'>;
+export type FileInputComponent = BaseComponent<'fileinputcomponent'>;
+export type TabsComponent = BaseComponent<'tabscomponent'> & {
+    tabs: string[];
+};
+export type ContainerComponent = BaseComponent<'containercomponent'>;
+export type AppComponent = BaseAppComponent & (DisplayComponent | TextInputComponent | PasswordInputComponent | DateInputComponent | NumberInputComponent | CurrencyComponent | SliderComponent | RangeComponent | BarChartComponent | TimeseriesComponent | HtmlComponent | TableComponent | TextComponent | TableComponent | ButtonComponent | PieChartComponent | ScatterChartComponent | SelectComponent | CheckboxComponent | FormComponent | FormButtonComponent | VegaLiteComponent | PlotlyComponent | TabsComponent | ContainerComponent | IconComponent | HorizontalDividerComponent | VerticalDividerComponent | FileInputComponent | ImageComponent | AggridComponent);
+export type AppComponentDimensions = `${IntRange<1, typeof NARROW_GRID_COLUMNS>}:${number}-${IntRange<1, typeof WIDE_GRID_COLUMNS>}:${number}`;
+export type AppComponentConfig = {
+    name: string;
+    icon: any;
+    /**
+     * Dimensions key formula:
+     * [**mobile width**]:[**mobile height**]-[**desktop width**]:[**desktop height**]
+     */
+    dims: AppComponentDimensions;
+    data: AppComponent;
+};
+export declare function getRecommendedDimensionsByComponent(componentType: AppComponent['type'], column: number): Size;
+export declare const components: Record<AppComponent['type'], AppComponentConfig>;
+export {};