windmill-components 1.269.3 → 1.291.4

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

@@ -1,6 +1,6 @@
 import type { IntRange } from '../../../../common';
 import type { NARROW_GRID_COLUMNS, WIDE_GRID_COLUMNS } from '../../gridUtils';
-import { BarChart4, Binary, FormInput, Inspect, List, Monitor, PieChart, Table2, TextCursorInput, Type, Lock, Calendar, ToggleLeft, GripHorizontal, Code2, SlidersHorizontal, PlusSquare, ListOrdered, BoxSelect, Smile, DollarSign, SeparatorHorizontal, SeparatorVertical, Paperclip, Image, SidebarClose, MapPin, FlipHorizontal, FlipVertical, FileText, AtSignIcon, Split, Download, PanelLeft, PanelTopInactive, ListIcon, Heading1, FileBarChart, Menu, Network, Database, UploadCloud, AlertTriangle } from 'lucide-svelte';
+import { BarChart4, Binary, FormInput, Inspect, List, Monitor, PieChart, Table2, TextCursorInput, Type, Lock, Calendar, ToggleLeft, GripHorizontal, Code2, SlidersHorizontal, PlusSquare, ListOrdered, BoxSelect, Smile, DollarSign, SeparatorHorizontal, SeparatorVertical, Paperclip, Image, SidebarClose, MapPin, FlipHorizontal, FlipVertical, FileText, AtSignIcon, Split, Download, PanelLeft, PanelTopInactive, ListIcon, Heading1, FileBarChart, Menu, Network, Database, UploadCloud, AlertTriangle, Clock, CalendarClock } from 'lucide-svelte';
 import type { Aligned, BaseAppComponent, ComponentCustomCSS, GridItem, RichConfiguration, RichConfigurations, StaticRichConfigurations } from '../../types';
 import type { Size } from '../../svelte-grid/types';
 import type { AppInputSpec, EvalV2AppInput, InputConnectionEval, ResultAppInput, StaticAppInput, TemplateV2AppInput } from '../../inputType';
@@ -23,6 +23,8 @@ export type TextareaInputComponent = BaseComponent<'textareainputcomponent'>;
 export type PasswordInputComponent = BaseComponent<'passwordinputcomponent'>;
 export type EmailInputComponent = BaseComponent<'emailinputcomponent'>;
 export type DateInputComponent = BaseComponent<'dateinputcomponent'>;
+export type TimeInputComponent = BaseComponent<'timeinputcomponent'>;
+export type DateTimeInputComponent = BaseComponent<'datetimeinputcomponent'>;
 export type NumberInputComponent = BaseComponent<'numberinputcomponent'>;
 export type CurrencyComponent = BaseComponent<'currencycomponent'>;
 export type SliderComponent = BaseComponent<'slidercomponent'>;
@@ -76,10 +78,16 @@ export type FlowStatusComponent = BaseComponent<'flowstatuscomponent'>;
 export type JobIdFlowStatusComponent = BaseComponent<'jobidflowstatuscomponent'>;
 export type ImageComponent = BaseComponent<'imagecomponent'>;
 export type InputComponent = BaseComponent<'inputcomponent'>;
-export type SelectComponent = BaseComponent<'selectcomponent'> & RecomputeOthersSource;
-export type ResourceSelectComponent = BaseComponent<'resourceselectcomponent'> & RecomputeOthersSource;
+export type SelectComponent = BaseComponent<'selectcomponent'> & RecomputeOthersSource & {
+    onSelect?: string[];
+};
+export type ResourceSelectComponent = BaseComponent<'resourceselectcomponent'> & RecomputeOthersSource & {
+    onSelect?: string[];
+};
 export type MultiSelectComponent = BaseComponent<'multiselectcomponent'>;
-export type CheckboxComponent = BaseComponent<'checkboxcomponent'> & RecomputeOthersSource;
+export type CheckboxComponent = BaseComponent<'checkboxcomponent'> & RecomputeOthersSource & {
+    onToggle?: string[];
+};
 export type RadioComponent = BaseComponent<'radiocomponent'>;
 export type IconComponent = BaseComponent<'iconcomponent'>;
 export type HorizontalDividerComponent = BaseComponent<'horizontaldividercomponent'>;
@@ -134,7 +142,7 @@ export type DecisionTreeComponent = BaseComponent<'decisiontreecomponent'> & {
     nodes: DecisionTreeNode[];
 };
 export type AlertComponent = BaseComponent<'alertcomponent'>;
-export type TypedComponent = DBExplorerComponent | DisplayComponent | LogComponent | JobIdLogComponent | FlowStatusComponent | JobIdFlowStatusComponent | TextInputComponent | QuillComponent | TextareaInputComponent | PasswordInputComponent | EmailInputComponent | DateInputComponent | NumberInputComponent | CurrencyComponent | SliderComponent | RangeComponent | BarChartComponent | TimeseriesComponent | HtmlComponent | CustomComponent | MarkdownComponent | TableComponent | TextComponent | ButtonComponent | PieChartComponent | ScatterChartComponent | SelectComponent | ResourceSelectComponent | MultiSelectComponent | CheckboxComponent | FormComponent | FormButtonComponent | VegaLiteComponent | PlotlyComponent | TabsComponent | ContainerComponent | ListComponent | IconComponent | HorizontalDividerComponent | VerticalDividerComponent | FileInputComponent | ImageComponent | AggridComponent | AggridComponentEe | DrawerComponent | MapComponent | VerticalSplitPanesComponent | HorizontalSplitPanesComponent | PdfComponent | ModalComponent | StepperComponent | Schemaformcomponent | SelectTabComponent | ConditionalWrapperComponent | SelectStepComponent | DownloadComponent | ChartJsComponent | CarouselListComponent | PlotlyComponentV2 | ChartJsComponentV2 | StatisticCardComponent | MenuComponent | DecisionTreeComponent | S3FileInputComponent | AgChartsComponent | AgChartsComponentEe | AlertComponent | DateSliderComponent;
+export type TypedComponent = DBExplorerComponent | DisplayComponent | LogComponent | JobIdLogComponent | FlowStatusComponent | JobIdFlowStatusComponent | TextInputComponent | QuillComponent | TextareaInputComponent | PasswordInputComponent | EmailInputComponent | DateInputComponent | NumberInputComponent | CurrencyComponent | SliderComponent | RangeComponent | BarChartComponent | TimeseriesComponent | HtmlComponent | CustomComponent | MarkdownComponent | TableComponent | TextComponent | ButtonComponent | PieChartComponent | ScatterChartComponent | SelectComponent | ResourceSelectComponent | MultiSelectComponent | CheckboxComponent | FormComponent | FormButtonComponent | VegaLiteComponent | PlotlyComponent | TabsComponent | ContainerComponent | ListComponent | IconComponent | HorizontalDividerComponent | VerticalDividerComponent | FileInputComponent | ImageComponent | AggridComponent | AggridComponentEe | DrawerComponent | MapComponent | VerticalSplitPanesComponent | HorizontalSplitPanesComponent | PdfComponent | ModalComponent | StepperComponent | Schemaformcomponent | SelectTabComponent | ConditionalWrapperComponent | SelectStepComponent | DownloadComponent | ChartJsComponent | CarouselListComponent | PlotlyComponentV2 | ChartJsComponentV2 | StatisticCardComponent | MenuComponent | DecisionTreeComponent | S3FileInputComponent | AgChartsComponent | AgChartsComponentEe | AlertComponent | DateSliderComponent | TimeInputComponent | DateTimeInputComponent;
 export type AppComponent = BaseAppComponent & TypedComponent;
 export type AppComponentDimensions = `${IntRange<1, typeof NARROW_GRID_COLUMNS>}:${number}-${IntRange<1, typeof WIDE_GRID_COLUMNS>}:${number}`;
 export declare function getRecommendedDimensionsByComponent(componentType: AppComponent['type'], column: number): Size;
@@ -1943,6 +1951,7 @@ export declare const components: {
         };
         readonly initialData: {
             readonly componentInput: undefined;
+            readonly onToggle: readonly [];
             readonly recomputeIds: true;
             readonly configuration: {
                 readonly label: {
@@ -2071,6 +2080,7 @@ export declare const components: {
             readonly input: {
                 readonly style: "";
                 readonly tooltip: "https://github.com/rob-balfre/svelte-select/blob/master/docs/theming_variables.md";
+                readonly class: "";
             };
         };
         readonly initialData: {
@@ -2556,11 +2566,13 @@ export declare const components: {
                     readonly type: "static";
                     readonly value: "";
                     readonly fieldType: "date";
+                    readonly tooltip: "The minimum date that can be selected. The format is: \"yyyy-MM-dd\"";
                 };
                 readonly maxDate: {
                     readonly type: "static";
                     readonly value: "";
                     readonly fieldType: "date";
+                    readonly tooltip: "The maximum date that can be selected. The format is: \"yyyy-MM-dd\"";
                 };
                 readonly defaultValue: {
                     readonly type: "static";
@@ -2571,8 +2583,99 @@ export declare const components: {
                     readonly type: "static";
                     readonly value: undefined;
                     readonly fieldType: "text";
-                    readonly tooltip: "See date-fns format for more information";
+                    readonly markdownTooltip: "### Output format\t\t\t\t\nSee date-fns format for more information. By default, it is 'dd.MM.yyyy'\n\n| Format      | Result | Description |\n| ----------- | ----------- | ----------- |\n| DD \t\t\t\t| 01, 02, ..., 31 | Day of the month |\n| D \t\t\t\t| 1, 2, ..., 31 | Day of the month |\n| MM \t\t\t\t| 01, 02, ..., 12 | Month |\n| MMM \t\t\t\t| Jan, Feb, ..., Dec | Month |\n| MMMM \t\t\t\t| January, February, ..., December | Month |\n| YYYY \t\t\t\t| 2021, 2022, ... | Year |\n";
+                    readonly documentationLink: "https://date-fns.org/v1.29.0/docs/format";
+                    readonly placeholder: "dd.MM.yyyy";
+                };
+            };
+        };
+    };
+    readonly datetimeinputcomponent: {
+        readonly name: "Date & Time";
+        readonly icon: typeof CalendarClock;
+        readonly documentationLink: "https://www.windmill.dev/docs/apps/app_configuration_settings/datetime_input";
+        readonly dims: `2:${number}-2:${number}` | `2:${number}-1:${number}` | `2:${number}-5:${number}` | `2:${number}-7:${number}` | `2:${number}-3:${number}` | `2:${number}-8:${number}` | `2:${number}-10:${number}` | `2:${number}-4:${number}` | `2:${number}-6:${number}` | `2:${number}-9:${number}` | `2:${number}-11:${number}` | `2:${number}-12:${number}` | `1:${number}-2:${number}` | `1:${number}-1:${number}` | `1:${number}-5:${number}` | `1:${number}-7:${number}` | `1:${number}-3:${number}` | `1:${number}-8:${number}` | `1:${number}-10:${number}` | `1:${number}-4:${number}` | `1:${number}-6:${number}` | `1:${number}-9:${number}` | `1:${number}-11:${number}` | `1:${number}-12:${number}` | `3:${number}-2:${number}` | `3:${number}-1:${number}` | `3:${number}-5:${number}` | `3:${number}-7:${number}` | `3:${number}-3:${number}` | `3:${number}-8:${number}` | `3:${number}-10:${number}` | `3:${number}-4:${number}` | `3:${number}-6:${number}` | `3:${number}-9:${number}` | `3:${number}-11:${number}` | `3:${number}-12:${number}`;
+        readonly customCss: {
+            readonly container: {
+                readonly class: "";
+                readonly style: "";
+            };
+        };
+        readonly initialData: {
+            readonly verticalAlignment: "center";
+            readonly componentInput: undefined;
+            readonly configuration: {
+                readonly displayPresets: {
+                    readonly type: "static";
+                    readonly value: false;
+                    readonly fieldType: "boolean";
+                    readonly tooltip: "Display presets to select the date for example, in 1 week, in 1 month, etc.";
+                };
+                readonly minDateTime: {
+                    readonly type: "static";
+                    readonly value: "";
+                    readonly fieldType: "datetime";
+                    readonly tooltip: "The minimum date that can be selected. The format is the ISO 8601 format: \"yyyy-MM-ddTHH:mm:ss:SSSZ\", for example \"2021-11-06T23:39:30.000Z\", or toISOString() from a Date";
+                };
+                readonly maxDateTime: {
+                    readonly type: "static";
+                    readonly value: "";
+                    readonly fieldType: "datetime";
+                    readonly tooltip: "The maximum date that can be selected. The format is the ISO 8601 format: \"yyyy-MM-ddTHH:mm:ss:SSSZ\", for example \"2021-11-06T23:39:30.000Z\", or toISOString() from a Date";
+                };
+                readonly outputFormat: {
+                    readonly type: "static";
+                    readonly value: undefined;
+                    readonly fieldType: "text";
                     readonly documentationLink: "https://date-fns.org/v1.29.0/docs/format";
+                    readonly placeholder: "dd.MM.yyyy HH:mm";
+                    readonly markdownTooltip: "### Output format\t\t\t\t\nSee date-fns format for more information. By default, it is 'dd.MM.yyyy HH:mm'\n\n| Format      | Result | Description |\n| ----------- | ----------- | ----------- |\n| DD \t\t\t\t| 01, 02, ..., 31 | Day of the month |\n| D \t\t\t\t| 1, 2, ..., 31 | Day of the month |\n| MM \t\t\t\t| 01, 02, ..., 12 | Month |\n| MMM \t\t\t\t| Jan, Feb, ..., Dec | Month |\n| MMMM \t\t\t\t| January, February, ..., December | Month |\n| YYYY \t\t\t\t| 2021, 2022, ... | Year |\n| HH \t\t\t\t| 00, 01, ..., 23 | Hours |\n| mm \t\t\t\t| 00, 01, ..., 59 | Minutes |\n| ss \t\t\t\t| 00, 01, ..., 59 | Seconds |\n\t\t\t\t\t";
+                };
+                readonly defaultValue: {
+                    readonly type: "static";
+                    readonly value: undefined;
+                    readonly fieldType: "datetime";
+                };
+            };
+        };
+    };
+    readonly timeinputcomponent: {
+        readonly name: "Time";
+        readonly icon: typeof Clock;
+        readonly documentationLink: "https://www.windmill.dev/docs/apps/app_configuration_settings/time_input";
+        readonly dims: `2:${number}-2:${number}` | `2:${number}-1:${number}` | `2:${number}-5:${number}` | `2:${number}-7:${number}` | `2:${number}-3:${number}` | `2:${number}-8:${number}` | `2:${number}-10:${number}` | `2:${number}-4:${number}` | `2:${number}-6:${number}` | `2:${number}-9:${number}` | `2:${number}-11:${number}` | `2:${number}-12:${number}` | `1:${number}-2:${number}` | `1:${number}-1:${number}` | `1:${number}-5:${number}` | `1:${number}-7:${number}` | `1:${number}-3:${number}` | `1:${number}-8:${number}` | `1:${number}-10:${number}` | `1:${number}-4:${number}` | `1:${number}-6:${number}` | `1:${number}-9:${number}` | `1:${number}-11:${number}` | `1:${number}-12:${number}` | `3:${number}-2:${number}` | `3:${number}-1:${number}` | `3:${number}-5:${number}` | `3:${number}-7:${number}` | `3:${number}-3:${number}` | `3:${number}-8:${number}` | `3:${number}-10:${number}` | `3:${number}-4:${number}` | `3:${number}-6:${number}` | `3:${number}-9:${number}` | `3:${number}-11:${number}` | `3:${number}-12:${number}`;
+        readonly customCss: {
+            readonly input: {
+                readonly class: "";
+                readonly style: "";
+            };
+        };
+        readonly initialData: {
+            readonly verticalAlignment: "center";
+            readonly componentInput: undefined;
+            readonly configuration: {
+                readonly minTime: {
+                    readonly type: "static";
+                    readonly value: "";
+                    readonly fieldType: "time";
+                    readonly tooltip: "The minimum date that can be selected. If the time provided is not valid, it will set the output \"validity\" to false. The format is: \"HH:mm\"";
+                };
+                readonly maxTime: {
+                    readonly type: "static";
+                    readonly value: "";
+                    readonly fieldType: "time";
+                    readonly tooltip: "The maximum date that can be selected. If the time provided is not valid, it will set the output \"validity\" to false. The format is: \"HH:mm\"";
+                };
+                readonly defaultValue: {
+                    readonly type: "static";
+                    readonly value: undefined;
+                    readonly fieldType: "time";
+                };
+                readonly "24hFormat": {
+                    readonly type: "static";
+                    readonly value: true;
+                    readonly fieldType: "boolean";
+                    readonly tooltip: "Use 24h format. Will change the format of the output of the component: HH:mm to hh:mm am/pm";
                 };
             };
         };
@@ -3448,7 +3551,7 @@ export declare const components: {
         };
     };
     readonly dbexplorercomponent: {
-        readonly name: "Database Studio";
+        readonly name: "Database Studio Table";
         readonly icon: typeof Database;
         readonly documentationLink: "https://www.windmill.dev/docs/apps/app_configuration_settings/database_studio";
         readonly dims: `2:${number}-2:${number}` | `2:${number}-1:${number}` | `2:${number}-5:${number}` | `2:${number}-7:${number}` | `2:${number}-3:${number}` | `2:${number}-8:${number}` | `2:${number}-10:${number}` | `2:${number}-4:${number}` | `2:${number}-6:${number}` | `2:${number}-9:${number}` | `2:${number}-11:${number}` | `2:${number}-12:${number}` | `1:${number}-2:${number}` | `1:${number}-1:${number}` | `1:${number}-5:${number}` | `1:${number}-7:${number}` | `1:${number}-3:${number}` | `1:${number}-8:${number}` | `1:${number}-10:${number}` | `1:${number}-4:${number}` | `1:${number}-6:${number}` | `1:${number}-9:${number}` | `1:${number}-11:${number}` | `1:${number}-12:${number}` | `3:${number}-2:${number}` | `3:${number}-1:${number}` | `3:${number}-5:${number}` | `3:${number}-7:${number}` | `3:${number}-3:${number}` | `3:${number}-8:${number}` | `3:${number}-10:${number}` | `3:${number}-4:${number}` | `3:${number}-6:${number}` | `3:${number}-9:${number}` | `3:${number}-11:${number}` | `3:${number}-12:${number}`;
@@ -3465,14 +3568,58 @@ export declare const components: {
                     readonly selected: "postgresql";
                     readonly labels: {
                         readonly postgresql: "PostgreSQL";
-                        readonly msql: "MySQL";
+                        readonly mysql: "MySQL";
+                        readonly ms_sql_server: "MS SQL Server";
+                        readonly snowflake: "Snowflake";
+                        readonly bigquery: "BigQuery";
                     };
                     readonly configuration: {
                         readonly postgresql: {
                             readonly resource: StaticAppInput;
                             readonly table: {
                                 readonly fieldType: "select";
-                                readonly subfieldType: "db-table";
+                                readonly subFieldType: "db-table";
+                                readonly type: "static";
+                                readonly selectOptions: readonly [];
+                                readonly value: undefined;
+                                readonly allowTypeChange: false;
+                            };
+                        };
+                        readonly mysql: {
+                            readonly resource: StaticAppInput;
+                            readonly table: {
+                                readonly fieldType: "select";
+                                readonly subFieldType: "db-table";
+                                readonly type: "static";
+                                readonly selectOptions: readonly [];
+                                readonly value: undefined;
+                            };
+                        };
+                        readonly ms_sql_server: {
+                            readonly resource: StaticAppInput;
+                            readonly table: {
+                                readonly fieldType: "select";
+                                readonly subFieldType: "db-table";
+                                readonly type: "static";
+                                readonly selectOptions: readonly [];
+                                readonly value: undefined;
+                            };
+                        };
+                        readonly snowflake: {
+                            readonly resource: StaticAppInput;
+                            readonly table: {
+                                readonly fieldType: "select";
+                                readonly subFieldType: "db-table";
+                                readonly type: "static";
+                                readonly selectOptions: readonly [];
+                                readonly value: undefined;
+                            };
+                        };
+                        readonly bigquery: {
+                            readonly resource: StaticAppInput;
+                            readonly table: {
+                                readonly fieldType: "select";
+                                readonly subFieldType: "db-table";
                                 readonly type: "static";
                                 readonly selectOptions: readonly [];
                                 readonly value: undefined;
@@ -3530,6 +3677,18 @@ export declare const components: {
                     readonly value: {};
                     readonly tooltip: "any configuration that can be passed to ag-grid top level";
                 };
+                readonly hideInsert: {
+                    readonly type: "static";
+                    readonly fieldType: "boolean";
+                    readonly value: false;
+                    readonly tooltip: "Hide the insert button";
+                };
+                readonly hideSearch: {
+                    readonly type: "static";
+                    readonly fieldType: "boolean";
+                    readonly value: false;
+                    readonly tooltip: "Hide the search bar";
+                };
             };
             readonly componentInput: undefined;
         };

package/package/components/apps/editor/component/components.js

@@ -1,6 +1,6 @@
 import { BUTTON_COLORS } from '../../../common';
 import { defaultAlignement } from '../componentsPanel/componentDefaultProps';
-import { BarChart4, Binary, FormInput, Inspect, List, Monitor, PieChart, Table2, TextCursorInput, Type, Lock, Calendar, ToggleLeft, GripHorizontal, Code2, SlidersHorizontal, PlusSquare, ListOrdered, BoxSelect, Smile, DollarSign, SeparatorHorizontal, SeparatorVertical, Paperclip, Image, SidebarClose, MapPin, FlipHorizontal, FlipVertical, FileText, AtSignIcon, Split, Download, PanelLeft, PanelTopInactive, ListIcon, Heading1, FileBarChart, Menu, Network, Database, UploadCloud, AlertTriangle } from 'lucide-svelte';
+import { BarChart4, Binary, FormInput, Inspect, List, Monitor, PieChart, Table2, TextCursorInput, Type, Lock, Calendar, ToggleLeft, GripHorizontal, Code2, SlidersHorizontal, PlusSquare, ListOrdered, BoxSelect, Smile, DollarSign, SeparatorHorizontal, SeparatorVertical, Paperclip, Image, SidebarClose, MapPin, FlipHorizontal, FlipVertical, FileText, AtSignIcon, Split, Download, PanelLeft, PanelTopInactive, ListIcon, Heading1, FileBarChart, Menu, Network, Database, UploadCloud, AlertTriangle, Clock, CalendarClock } from 'lucide-svelte';
 export function getRecommendedDimensionsByComponent(componentType, column) {
     const size = components[componentType].dims.split('-')[column === 3 ? 0 : 1].split(':');
     return { w: +size[0], h: +size[1] };
@@ -1333,6 +1333,7 @@ This is a paragraph.
         initialData: {
             ...defaultAlignement,
             componentInput: undefined,
+            onToggle: [],
             recomputeIds: true,
             configuration: {
                 label: {
@@ -1452,7 +1453,8 @@ This is a paragraph.
         customCss: {
             input: {
                 style: '',
-                tooltip: 'https://github.com/rob-balfre/svelte-select/blob/master/docs/theming_variables.md'
+                tooltip: 'https://github.com/rob-balfre/svelte-select/blob/master/docs/theming_variables.md',
+                class: ''
             }
         },
         initialData: {
@@ -1909,12 +1911,14 @@ This is a paragraph.
                 minDate: {
                     type: 'static',
                     value: '',
-                    fieldType: 'date'
+                    fieldType: 'date',
+                    tooltip: 'The minimum date that can be selected. The format is: "yyyy-MM-dd"'
                 },
                 maxDate: {
                     type: 'static',
                     value: '',
-                    fieldType: 'date'
+                    fieldType: 'date',
+                    tooltip: 'The maximum date that can be selected. The format is: "yyyy-MM-dd"'
                 },
                 defaultValue: {
                     type: 'static',
@@ -1925,8 +1929,118 @@ This is a paragraph.
                     type: 'static',
                     value: undefined,
                     fieldType: 'text',
-                    tooltip: 'See date-fns format for more information',
-                    documentationLink: 'https://date-fns.org/v1.29.0/docs/format'
+                    markdownTooltip: `### Output format				
+See date-fns format for more information. By default, it is 'dd.MM.yyyy'
+
+| Format      | Result | Description |
+| ----------- | ----------- | ----------- |
+| DD 				| 01, 02, ..., 31 | Day of the month |
+| D 				| 1, 2, ..., 31 | Day of the month |
+| MM 				| 01, 02, ..., 12 | Month |
+| MMM 				| Jan, Feb, ..., Dec | Month |
+| MMMM 				| January, February, ..., December | Month |
+| YYYY 				| 2021, 2022, ... | Year |
+`,
+                    documentationLink: 'https://date-fns.org/v1.29.0/docs/format',
+                    placeholder: 'dd.MM.yyyy'
+                }
+            }
+        }
+    },
+    datetimeinputcomponent: {
+        name: 'Date & Time',
+        icon: CalendarClock,
+        documentationLink: `${documentationBaseUrl}/datetime_input`,
+        dims: '2:1-6:2',
+        customCss: {
+            container: { class: '', style: '' }
+        },
+        initialData: {
+            verticalAlignment: 'center',
+            componentInput: undefined,
+            configuration: {
+                displayPresets: {
+                    type: 'static',
+                    value: false,
+                    fieldType: 'boolean',
+                    tooltip: 'Display presets to select the date for example, in 1 week, in 1 month, etc.'
+                },
+                minDateTime: {
+                    type: 'static',
+                    value: '',
+                    fieldType: 'datetime',
+                    tooltip: 'The minimum date that can be selected. The format is the ISO 8601 format: "yyyy-MM-ddTHH:mm:ss:SSSZ", for example "2021-11-06T23:39:30.000Z", or toISOString() from a Date'
+                },
+                maxDateTime: {
+                    type: 'static',
+                    value: '',
+                    fieldType: 'datetime',
+                    tooltip: 'The maximum date that can be selected. The format is the ISO 8601 format: "yyyy-MM-ddTHH:mm:ss:SSSZ", for example "2021-11-06T23:39:30.000Z", or toISOString() from a Date'
+                },
+                outputFormat: {
+                    type: 'static',
+                    value: undefined,
+                    fieldType: 'text',
+                    documentationLink: 'https://date-fns.org/v1.29.0/docs/format',
+                    placeholder: 'dd.MM.yyyy HH:mm',
+                    markdownTooltip: `### Output format				
+See date-fns format for more information. By default, it is 'dd.MM.yyyy HH:mm'
+
+| Format      | Result | Description |
+| ----------- | ----------- | ----------- |
+| DD 				| 01, 02, ..., 31 | Day of the month |
+| D 				| 1, 2, ..., 31 | Day of the month |
+| MM 				| 01, 02, ..., 12 | Month |
+| MMM 				| Jan, Feb, ..., Dec | Month |
+| MMMM 				| January, February, ..., December | Month |
+| YYYY 				| 2021, 2022, ... | Year |
+| HH 				| 00, 01, ..., 23 | Hours |
+| mm 				| 00, 01, ..., 59 | Minutes |
+| ss 				| 00, 01, ..., 59 | Seconds |
+					`
+                },
+                defaultValue: {
+                    type: 'static',
+                    value: undefined,
+                    fieldType: 'datetime'
+                }
+            }
+        }
+    },
+    timeinputcomponent: {
+        name: 'Time',
+        icon: Clock,
+        documentationLink: `${documentationBaseUrl}/time_input`,
+        dims: '2:1-3:1',
+        customCss: {
+            input: { class: '', style: '' }
+        },
+        initialData: {
+            verticalAlignment: 'center',
+            componentInput: undefined,
+            configuration: {
+                minTime: {
+                    type: 'static',
+                    value: '',
+                    fieldType: 'time',
+                    tooltip: 'The minimum date that can be selected. If the time provided is not valid, it will set the output "validity" to false. The format is: "HH:mm"'
+                },
+                maxTime: {
+                    type: 'static',
+                    value: '',
+                    fieldType: 'time',
+                    tooltip: 'The maximum date that can be selected. If the time provided is not valid, it will set the output "validity" to false. The format is: "HH:mm"'
+                },
+                defaultValue: {
+                    type: 'static',
+                    value: undefined,
+                    fieldType: 'time'
+                },
+                ['24hFormat']: {
+                    type: 'static',
+                    value: true,
+                    fieldType: 'boolean',
+                    tooltip: 'Use 24h format. Will change the format of the output of the component: HH:mm to hh:mm am/pm'
                 }
             }
         }
@@ -2782,7 +2896,7 @@ This is a paragraph.
         }
     },
     dbexplorercomponent: {
-        name: 'Database Studio',
+        name: 'Database Studio Table',
         icon: Database,
         documentationLink: `${documentationBaseUrl}/database_studio`,
         dims: '2:8-6:8',
@@ -2796,18 +2910,84 @@ This is a paragraph.
                     selected: 'postgresql',
                     labels: {
                         postgresql: 'PostgreSQL',
-                        msql: 'MySQL'
+                        mysql: 'MySQL',
+                        ms_sql_server: 'MS SQL Server',
+                        snowflake: 'Snowflake',
+                        bigquery: 'BigQuery'
                     },
                     configuration: {
                         postgresql: {
                             resource: {
                                 type: 'static',
                                 fieldType: 'resource',
+                                subFieldType: 'postgres',
+                                value: '',
+                                allowTypeChange: false
+                            },
+                            table: {
+                                fieldType: 'select',
+                                subFieldType: 'db-table',
+                                type: 'static',
+                                selectOptions: [],
+                                value: undefined,
+                                allowTypeChange: false
+                            }
+                        },
+                        mysql: {
+                            resource: {
+                                type: 'static',
+                                fieldType: 'resource',
+                                subFieldType: 'mysql',
                                 value: ''
                             },
                             table: {
                                 fieldType: 'select',
-                                subfieldType: 'db-table',
+                                subFieldType: 'db-table',
+                                type: 'static',
+                                selectOptions: [],
+                                value: undefined
+                            }
+                        },
+                        ms_sql_server: {
+                            resource: {
+                                type: 'static',
+                                fieldType: 'resource',
+                                subFieldType: 'ms_sql_server',
+                                value: ''
+                            },
+                            table: {
+                                fieldType: 'select',
+                                subFieldType: 'db-table',
+                                type: 'static',
+                                selectOptions: [],
+                                value: undefined
+                            }
+                        },
+                        snowflake: {
+                            resource: {
+                                type: 'static',
+                                fieldType: 'resource',
+                                subFieldType: 'snowflake',
+                                value: ''
+                            },
+                            table: {
+                                fieldType: 'select',
+                                subFieldType: 'db-table',
+                                type: 'static',
+                                selectOptions: [],
+                                value: undefined
+                            }
+                        },
+                        bigquery: {
+                            resource: {
+                                type: 'static',
+                                fieldType: 'resource',
+                                subFieldType: 'bigquery',
+                                value: ''
+                            },
+                            table: {
+                                fieldType: 'select',
+                                subFieldType: 'db-table',
                                 type: 'static',
                                 selectOptions: [],
                                 value: undefined
@@ -2819,7 +2999,8 @@ This is a paragraph.
                     type: 'static',
                     fieldType: 'array',
                     subFieldType: 'db-explorer',
-                    value: []
+                    value: [],
+                    loading: false
                 },
                 whereClause: {
                     type: 'static',
@@ -2869,6 +3050,18 @@ This is a paragraph.
                     fieldType: 'object',
                     value: {},
                     tooltip: 'any configuration that can be passed to ag-grid top level'
+                },
+                hideInsert: {
+                    type: 'static',
+                    fieldType: 'boolean',
+                    value: false,
+                    tooltip: 'Hide the insert button'
+                },
+                hideSearch: {
+                    type: 'static',
+                    fieldType: 'boolean',
+                    value: false,
+                    tooltip: 'Hide the search bar'
                 }
             },
             componentInput: undefined

package/package/components/apps/editor/component/sets.js

@@ -38,6 +38,8 @@ const inputs = {
         'dateslidercomponent',
         'rangecomponent',
         'dateinputcomponent',
+        'timeinputcomponent',
+        'datetimeinputcomponent',
         'fileinputcomponent',
         's3fileinputcomponent',
         'checkboxcomponent',

package/package/components/apps/editor/componentsPanel/ComponentList.svelte

@@ -93,11 +93,11 @@ $: componentsFiltered = COMPONENT_SETS.map((set) => ({
     ...set,
     components: set.components.filter((component) => {
         const name = componentsRecord[component].name.toLowerCase();
-        return name.includes(search.toLowerCase());
+        return name.includes(search.toLowerCase().trim());
     }),
     presets: set.presets?.filter((preset) => {
         const presetName = presetsRecord[preset].name.toLowerCase();
-        return presetName.includes(search.toLowerCase());
+        return presetName.includes(search.toLowerCase().trim());
     })
 }));
 $: {
@@ -115,7 +115,7 @@ let ccDrawer;
 		title="Custom Components"
 		on:close={ccDrawer.closeDrawer}
 		documentationLink="https://www.windmill.dev/docs/apps/react_components"
-		>
+	>
 		<ComponentsList on:reload={fetchCustomComponents} />
 	</DrawerContent>
 </Drawer>

package/package/components/apps/editor/componentsPanel/ThemeList.svelte

@@ -123,6 +123,7 @@ onDestroy(() => {
 									on:reloadThemes={() => {
 										getThemes()
 									}}
+									on:setCodeTab
 								/>
 							{/key}
 						{/each}

package/package/components/apps/editor/componentsPanel/ThemeList.svelte.d.ts

@@ -2,6 +2,8 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: Record<string, never>;
     events: {
+        setCodeTab: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/package/components/apps/editor/componentsPanel/ThemeRow.svelte

@@ -77,12 +77,16 @@ async function preview() {
     }, $workspaceStore);
     $previewTheme = theme ?? '';
 }
-async function fork() {
+async function fork(path) {
     stopPreview();
-    const theme = await resolveTheme($app.theme, $workspaceStore);
+    const theme = {
+        type: 'path',
+        path: path ?? ''
+    };
+    const resolvedTheme = await resolveTheme(theme, $workspaceStore);
     $app.theme = {
         type: 'inlined',
-        css: theme
+        css: resolvedTheme
     };
     dispatch('setCodeTab');
 }
@@ -148,7 +152,7 @@ let themeDrawer;
 								View code
 							</div>
 						</MenuItem>
-						<MenuItem on:click={fork}>
+						<MenuItem on:click={() => fork(row.path)}>
 							<div
 								class={classNames(
 									'!text-primary flex flex-row items-center text-left px-4 py-2 gap-2 cursor-pointer hover:bg-gray-100 !text-xs font-semibold'

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

@@ -85,6 +85,8 @@ export function getComponentControl(type) {
             return [clearFiles];
         case 'displaycomponent':
         case 'dateinputcomponent':
+        case 'timeinputcomponent':
+        case 'datetimeinputcomponent':
         case 'textinputcomponent':
         case 'numberinputcomponent':
         case 'currencycomponent':