windmill-components 1.89.1 → 1.103.1

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 } 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 } 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] };
@@ -27,18 +27,32 @@ export const selectOptions = {
         'en-CA'
     ],
     objectFitOptions: ['contain', 'cover', 'fill'],
-    splitPanelOptions: ['2', '3', '4']
+    splitPanelOptions: ['2', '3', '4'],
+    formorientationOptions: ['Horizontal', 'Vertical'],
+    chartTypeOptions: [
+        'bar',
+        'bubble',
+        'doughnut',
+        'line',
+        'pie',
+        'polarArea',
+        'radar',
+        'scatter'
+    ]
+};
+const labels = {
+    none: 'Do nothing',
+    errorOverlay: 'Show error overlay',
+    gotoUrl: 'Go to an url',
+    setTab: 'Set the tab of a tabs component',
+    sendToast: 'Display a toast notification',
+    sendErrorToast: 'Display an error toast notification'
 };
 const onSuccessClick = {
     type: 'oneOf',
     tooltip: 'Action to perform on success',
     selected: 'none',
-    labels: {
-        none: 'Do nothing',
-        gotoUrl: 'Go to an url',
-        setTab: 'Set the tab of a tabs component',
-        sendToast: 'Display a toast notification'
-    },
+    labels,
     configuration: {
         none: {},
         gotoUrl: {
@@ -66,12 +80,61 @@ const onSuccessClick = {
             }
         },
         sendToast: {
+            message: {
+                tooltip: 'The message of the toast to diplay',
+                fieldType: 'text',
+                type: 'static',
+                value: '',
+                placeholder: 'Hello there',
+                noVariablePicker: true
+            }
+        }
+    }
+};
+const onErrorClick = {
+    type: 'oneOf',
+    tooltip: 'Action to perform on error',
+    selected: 'errorOverlay',
+    labels,
+    configuration: {
+        errorOverlay: {},
+        gotoUrl: {
+            url: {
+                tooltip: 'Go to the given url, absolute or relative',
+                fieldType: 'text',
+                type: 'static',
+                value: '',
+                placeholder: '/apps/get/foo'
+            },
+            newTab: {
+                tooltip: 'Open the url in a new tab',
+                fieldType: 'boolean',
+                type: 'static',
+                value: true
+            }
+        },
+        setTab: {
+            setTab: {
+                type: 'static',
+                value: [],
+                fieldType: 'array',
+                subFieldType: 'tab-select',
+                tooltip: 'Set the tabs id and index to go to on error'
+            }
+        },
+        sendErrorToast: {
             message: {
                 tooltip: 'The message of the toast to diplay',
                 fieldType: 'text',
                 type: 'static',
                 value: '',
                 placeholder: 'Hello there'
+            },
+            appendError: {
+                tooltip: 'Append the error message to the toast',
+                fieldType: 'boolean',
+                type: 'static',
+                value: true
             }
         }
     }
@@ -121,6 +184,42 @@ export const components = {
             configuration: {}
         }
     },
+    logcomponent: {
+        name: 'Log',
+        icon: Monitor,
+        dims: '2:8-6:8',
+        customCss: {
+            header: { class: '', style: '' },
+            container: { class: '', style: '' }
+        },
+        initialData: {
+            configuration: {},
+            componentInput: {
+                type: 'runnable',
+                fieldType: 'any',
+                fields: {},
+                runnable: undefined
+            }
+        }
+    },
+    flowstatuscomponent: {
+        name: 'Flow Status',
+        icon: Monitor,
+        dims: '2:8-6:8',
+        customCss: {
+            header: { class: '', style: '' },
+            container: { class: '', style: '' }
+        },
+        initialData: {
+            configuration: {},
+            componentInput: {
+                type: 'runnable',
+                fieldType: 'any',
+                fields: {},
+                runnable: undefined
+            }
+        }
+    },
     containercomponent: {
         name: 'Container',
         icon: BoxSelect,
@@ -178,7 +277,8 @@ export const components = {
         icon: Inspect,
         dims: '1:1-2:1',
         customCss: {
-            button: { style: '', class: '' }
+            button: { style: '', class: '' },
+            container: { style: '', class: '' }
         },
         initialData: {
             ...defaultAlignement,
@@ -188,7 +288,7 @@ export const components = {
                 fields: {},
                 runnable: undefined
             },
-            recomputeIds: undefined,
+            recomputeIds: true,
             configuration: {
                 label: {
                     type: 'static',
@@ -198,9 +298,9 @@ export const components = {
                 color: {
                     fieldType: 'select',
                     type: 'static',
-                    onlyStatic: true,
                     selectOptions: selectOptions.buttonColorOptions,
-                    value: 'blue'
+                    value: 'blue',
+                    tooltip: 'Theses presets can be overwritten with custom styles.'
                 },
                 size: {
                     fieldType: 'select',
@@ -213,12 +313,13 @@ export const components = {
                     fieldType: 'boolean',
                     type: 'static',
                     onlyStatic: true,
-                    value: false
+                    value: false,
+                    tooltip: 'This will make the button fill the container width and height. Height and width can be overwritten with custom styles.'
                 },
                 disabled: {
                     fieldType: 'boolean',
-                    type: 'eval',
-                    expr: 'false'
+                    type: 'static',
+                    value: false
                 },
                 beforeIcon: {
                     type: 'static',
@@ -238,12 +339,77 @@ export const components = {
                     fieldType: 'boolean',
                     onlyStatic: true
                 },
-                onSuccess: onSuccessClick
+                onSuccess: onSuccessClick,
+                onError: onErrorClick
+            }
+        }
+    },
+    downloadcomponent: {
+        name: 'Download Button',
+        icon: Download,
+        dims: '1:1-2:1',
+        customCss: {
+            button: { style: '', class: '' }
+        },
+        initialData: {
+            ...defaultAlignement,
+            configuration: {
+                source: {
+                    type: 'static',
+                    value: '',
+                    fieldType: 'text',
+                    fileUpload: {
+                        accept: '*',
+                        convertTo: 'base64'
+                    },
+                    placeholder: 'Enter URL or upload file'
+                },
+                filename: {
+                    type: 'static',
+                    fieldType: 'text',
+                    value: 'windmill.file'
+                },
+                label: {
+                    type: 'static',
+                    fieldType: 'text',
+                    value: 'Press me'
+                },
+                color: {
+                    fieldType: 'select',
+                    type: 'static',
+                    selectOptions: selectOptions.buttonColorOptions,
+                    value: 'blue'
+                },
+                size: {
+                    fieldType: 'select',
+                    type: 'static',
+                    onlyStatic: true,
+                    selectOptions: selectOptions.buttonSizeOptions,
+                    value: 'xs'
+                },
+                fillContainer: {
+                    fieldType: 'boolean',
+                    type: 'static',
+                    onlyStatic: true,
+                    value: false
+                },
+                beforeIcon: {
+                    type: 'static',
+                    value: undefined,
+                    fieldType: 'icon-select',
+                    onlyStatic: true
+                },
+                afterIcon: {
+                    type: 'static',
+                    value: undefined,
+                    fieldType: 'icon-select',
+                    onlyStatic: true
+                }
             }
         }
     },
     formcomponent: {
-        name: 'Form',
+        name: 'Submit form',
         icon: FormInput,
         dims: '3:5-6:5',
         customCss: {
@@ -258,7 +424,7 @@ export const components = {
                 fields: {},
                 runnable: undefined
             },
-            recomputeIds: undefined,
+            recomputeIds: true,
             configuration: {
                 label: {
                     type: 'static',
@@ -268,7 +434,6 @@ export const components = {
                 color: {
                     fieldType: 'select',
                     type: 'static',
-                    onlyStatic: true,
                     value: 'dark',
                     selectOptions: selectOptions.buttonColorOptions
                 },
@@ -279,7 +444,8 @@ export const components = {
                     onlyStatic: true,
                     selectOptions: selectOptions.buttonSizeOptions
                 },
-                onSuccess: onSuccessClick
+                onSuccess: onSuccessClick,
+                onError: onErrorClick
             }
         }
     },
@@ -300,7 +466,7 @@ export const components = {
                 fields: {},
                 runnable: undefined
             },
-            recomputeIds: undefined,
+            recomputeIds: true,
             configuration: {
                 label: {
                     type: 'static',
@@ -310,9 +476,9 @@ export const components = {
                 color: {
                     fieldType: 'select',
                     type: 'static',
-                    onlyStatic: true,
                     value: 'dark',
-                    selectOptions: buttonColorOptions
+                    selectOptions: buttonColorOptions,
+                    tooltip: 'Theses presets can be overwritten with custom styles.'
                 },
                 size: {
                     fieldType: 'select',
@@ -322,10 +488,11 @@ export const components = {
                     selectOptions: selectOptions.buttonSizeOptions
                 },
                 onSuccess: onSuccessClick,
+                onError: onErrorClick,
                 disabled: {
                     fieldType: 'boolean',
-                    type: 'eval',
-                    expr: 'false'
+                    type: 'static',
+                    value: false
                 }
             }
         }
@@ -360,6 +527,38 @@ export const components = {
             }
         }
     },
+    chartjscomponent: {
+        name: 'ChartJs',
+        icon: PieChart,
+        dims: '2:8-6:8',
+        customCss: {
+            container: { class: '', style: '' }
+        },
+        initialData: {
+            configuration: {
+                type: {
+                    type: 'static',
+                    onlyStatic: true,
+                    fieldType: 'select',
+                    selectOptions: selectOptions.chartTypeOptions,
+                    value: 'pie'
+                }
+            },
+            componentInput: {
+                type: 'static',
+                fieldType: 'object',
+                value: {
+                    labels: ['Pie', 'Charts', '<3'],
+                    datasets: [
+                        {
+                            data: [25, 50, 25],
+                            backgroundColor: ['#FF6384', '#4BC0C0', '#FFCE56']
+                        }
+                    ]
+                }
+            }
+        }
+    },
     barchartcomponent: {
         name: 'Bar/Line Chart',
         icon: BarChart4,
@@ -699,6 +898,7 @@ Hello \${ctx.username}
         initialData: {
             ...defaultAlignement,
             componentInput: undefined,
+            recomputeIds: true,
             configuration: {
                 label: {
                     type: 'static',
@@ -767,9 +967,13 @@ Hello \${ctx.username}
         icon: List,
         dims: '2:1-3:1',
         customCss: {
-            input: { style: '' }
+            input: {
+                style: '',
+                tooltip: 'https://github.com/rob-balfre/svelte-select/blob/master/docs/theming_variables.md'
+            }
         },
         initialData: {
+            recomputeIds: true,
             verticalAlignment: 'center',
             componentInput: undefined,
             configuration: {
@@ -788,7 +992,7 @@ Hello \${ctx.username}
                     value: false,
                     onlyStatic: true,
                     tooltip: 'Allows user to manually add new value',
-                    customTitle: 'Manually add new value '
+                    customTitle: 'User creatable'
                 },
                 placeholder: {
                     type: 'static',
@@ -800,6 +1004,13 @@ Hello \${ctx.username}
                     type: 'static',
                     value: undefined,
                     fieldType: 'object'
+                },
+                fullWidth: {
+                    type: 'static',
+                    fieldType: 'boolean',
+                    value: true,
+                    onlyStatic: true,
+                    tooltip: 'Set the width of the options popup to 100% of the select width'
                 }
             }
         }
@@ -809,7 +1020,10 @@ Hello \${ctx.username}
         icon: List,
         dims: '2:1-3:1',
         customCss: {
-            input: { style: '' }
+            multiselect: {
+                style: '',
+                tooltip: 'See https://multiselect.janosh.dev/#with-css-variables for the available variables'
+            }
         },
         initialData: {
             componentInput: undefined,
@@ -825,6 +1039,21 @@ Hello \${ctx.username}
                     fieldType: 'text',
                     value: 'Select items',
                     onlyStatic: true
+                },
+                create: {
+                    type: 'static',
+                    fieldType: 'boolean',
+                    value: false,
+                    onlyStatic: true,
+                    tooltip: 'Allows user to manually add new value',
+                    customTitle: 'User creatable'
+                },
+                allowOverflow: {
+                    type: 'static',
+                    fieldType: 'boolean',
+                    value: true,
+                    onlyStatic: true,
+                    tooltip: 'If too many items, the box overflow its container instead of having an internal scroll'
                 }
             }
         }
@@ -851,6 +1080,13 @@ Hello \${ctx.username}
                     fieldType: 'text',
                     value: 'Select an item',
                     onlyStatic: true
+                },
+                fullWidth: {
+                    type: 'static',
+                    fieldType: 'boolean',
+                    value: true,
+                    onlyStatic: true,
+                    tooltip: 'Set the width of the options popup to 100% of the select width'
                 }
             }
         }
@@ -1109,7 +1345,8 @@ Hello \${ctx.username}
                     type: 'static',
                     onlyStatic: true,
                     selectOptions: selectOptions.tabsKindOptions,
-                    value: 'tabs'
+                    value: 'tabs',
+                    tooltip: `Tabs can be configured to be either horizontal (tabs), vertical (sidebar), or invisible.`
                 }
             },
             componentInput: undefined,
@@ -1117,6 +1354,25 @@ Hello \${ctx.username}
             tabs: ['First tab', 'Second tab']
         }
     },
+    steppercomponent: {
+        name: 'Stepper',
+        icon: ListOrdered,
+        dims: '2:8-6:8',
+        customCss: {
+            container: { class: '', style: '' }
+        },
+        initialData: {
+            configuration: {},
+            componentInput: {
+                type: 'runnable',
+                fieldType: 'any',
+                fields: {},
+                runnable: undefined
+            },
+            numberOfSubgrids: 2,
+            tabs: ['First', 'Second']
+        }
+    },
     iconcomponent: {
         name: 'Icon',
         icon: Smile,
@@ -1133,12 +1389,14 @@ Hello \${ctx.username}
                 icon: {
                     type: 'static',
                     value: 'Smile',
-                    fieldType: 'icon-select'
+                    fieldType: 'icon-select',
+                    tooltip: 'The icons can be found at https://lucide.dev/'
                 },
                 color: {
                     type: 'static',
                     value: 'currentColor',
-                    fieldType: 'color'
+                    fieldType: 'color',
+                    tooltip: 'The color of the icon can be overridden by the `background-color` property in the styling menu'
                 },
                 size: {
                     type: 'static',
@@ -1161,7 +1419,11 @@ Hello \${ctx.username}
         dims: '3:1-12:1',
         customCss: {
             container: { class: '', style: '' },
-            divider: { class: '', style: '' }
+            divider: {
+                class: '',
+                style: '',
+                tooltip: '`background-color` and `height` are handled by the component configuration'
+            }
         },
         initialData: {
             verticalAlignment: 'center',
@@ -1171,13 +1433,15 @@ Hello \${ctx.username}
                     type: 'static',
                     value: 2,
                     fieldType: 'number',
-                    onlyStatic: true
+                    onlyStatic: true,
+                    tooltip: 'The height of the divider in pixels can be overridden by the `height` property in the styling menu'
                 },
                 color: {
                     type: 'static',
                     value: '#00000060',
                     fieldType: 'color',
-                    onlyStatic: true
+                    onlyStatic: true,
+                    tooltip: 'The color of the divider can be overridden by the `background-color` property in the styling menu'
                 }
             }
         }
@@ -1198,13 +1462,15 @@ Hello \${ctx.username}
                     type: 'static',
                     value: 2,
                     fieldType: 'number',
-                    onlyStatic: true
+                    onlyStatic: true,
+                    tooltip: 'The width of the divider in pixels can be overridden by the `width` property in the styling menu'
                 },
                 color: {
                     type: 'static',
                     value: '#00000060',
                     fieldType: 'color',
-                    onlyStatic: true
+                    onlyStatic: true,
+                    tooltip: 'The color of the divider can be overridden by the `background-color` property in the styling menu'
                 }
             }
         }
@@ -1265,7 +1531,8 @@ Hello \${ctx.username}
                     type: 'static',
                     onlyStatic: true,
                     selectOptions: selectOptions.objectFitOptions,
-                    value: 'contain'
+                    value: 'contain',
+                    tooltip: 'The image fit property can be overridden by the `object-fit` property in the styling menu'
                 },
                 altText: {
                     type: 'static',
@@ -1282,6 +1549,7 @@ Hello \${ctx.username}
         icon: SidebarClose,
         dims: '1:1-2:1',
         customCss: {
+            button: { style: '', class: '' },
             container: { class: '', style: '' }
         },
         initialData: {
@@ -1302,9 +1570,9 @@ Hello \${ctx.username}
                 color: {
                     fieldType: 'select',
                     type: 'static',
-                    onlyStatic: true,
                     selectOptions: buttonColorOptions,
-                    value: 'blue'
+                    value: 'blue',
+                    tooltip: 'The color of the button can be overridden by the `background-color` property in the styling menu'
                 },
                 size: {
                     fieldType: 'select',
@@ -1317,12 +1585,13 @@ Hello \${ctx.username}
                     fieldType: 'boolean',
                     type: 'static',
                     onlyStatic: true,
-                    value: false
+                    value: false,
+                    tooltip: 'This will make the button fill the container width and height. Height and width can be overwritten with custom styles.'
                 },
                 disabled: {
                     fieldType: 'boolean',
-                    type: 'eval',
-                    expr: 'false'
+                    type: 'static',
+                    value: false
                 }
             },
             componentInput: undefined,
@@ -1427,7 +1696,8 @@ Hello \${ctx.username}
                     fileUpload: {
                         accept: 'application/pdf',
                         convertTo: 'base64'
-                    }
+                    },
+                    placeholder: 'Enter URL or upload file'
                 },
                 zoom: {
                     fieldType: 'number',
@@ -1436,6 +1706,221 @@ Hello \${ctx.username}
                 }
             }
         }
+    },
+    modalcomponent: {
+        name: 'Modal',
+        icon: SidebarClose,
+        dims: '1:1-2:1',
+        customCss: {
+            button: { class: '', style: '' },
+            buttonContainer: { class: '', style: '' },
+            popup: { class: '', style: '' }
+        },
+        initialData: {
+            horizontalAlignment: 'center',
+            verticalAlignment: 'center',
+            configuration: {
+                modalTitle: {
+                    type: 'static',
+                    fieldType: 'text',
+                    value: 'Modal title',
+                    onlyStatic: true
+                },
+                buttonLabel: {
+                    type: 'static',
+                    fieldType: 'text',
+                    value: 'Press me'
+                },
+                buttonColor: {
+                    fieldType: 'select',
+                    type: 'static',
+                    onlyStatic: true,
+                    selectOptions: buttonColorOptions,
+                    value: 'blue',
+                    tooltip: 'Theses presets can be overwritten with custom styles.'
+                },
+                buttonSize: {
+                    fieldType: 'select',
+                    type: 'static',
+                    onlyStatic: true,
+                    selectOptions: selectOptions.buttonSizeOptions,
+                    value: 'xs'
+                },
+                buttonFillContainer: {
+                    fieldType: 'boolean',
+                    type: 'static',
+                    onlyStatic: true,
+                    value: false,
+                    tooltip: 'This will make the button fill the container width and height. Height and width can be overwritten with custom styles.'
+                },
+                buttonDisabled: {
+                    fieldType: 'boolean',
+                    type: 'static',
+                    value: false
+                }
+            },
+            componentInput: undefined,
+            numberOfSubgrids: 1
+        }
+    },
+    schemaformcomponent: {
+        name: 'Form',
+        icon: FileText,
+        dims: '3:8-8:12',
+        customCss: {
+            container: { class: '', style: '' },
+            label: { class: '', style: '' },
+            description: { class: '', style: '' }
+        },
+        initialData: {
+            componentInput: {
+                type: 'static',
+                fieldType: 'schema',
+                value: {
+                    properties: {
+                        first_name: {
+                            type: 'string',
+                            description: 'your name',
+                            default: 'default'
+                        }
+                    },
+                    required: []
+                }
+            },
+            configuration: {
+                displayType: {
+                    fieldType: 'boolean',
+                    type: 'static',
+                    value: false,
+                    onlyStatic: true,
+                    tooltip: 'This will diplay the type and/or the format on the field next to the label.'
+                },
+                largeGap: {
+                    fieldType: 'boolean',
+                    type: 'static',
+                    value: false,
+                    onlyStatic: true,
+                    tooltip: 'This will add a large gap between the form elements.'
+                }
+            }
+        }
+    },
+    selecttabcomponent: {
+        name: 'Select Tab',
+        icon: List,
+        dims: '2:1-3:1',
+        customCss: {
+            tabRow: { class: '', style: '' },
+            allTabs: { class: '', style: '' },
+            selectedTab: { class: '', style: '' }
+        },
+        initialData: {
+            verticalAlignment: 'center',
+            componentInput: undefined,
+            configuration: {
+                items: {
+                    type: 'static',
+                    fieldType: 'array',
+                    subFieldType: 'labeledselect',
+                    value: [
+                        { value: 'foo', label: 'Foo' },
+                        { value: 'bar', label: 'Bar' }
+                    ]
+                },
+                defaultValue: {
+                    type: 'static',
+                    value: undefined,
+                    fieldType: 'object'
+                },
+                tabSize: {
+                    type: 'static',
+                    value: 'sm',
+                    fieldType: 'select',
+                    selectOptions: selectOptions.buttonSizeOptions,
+                    tooltip: 'Size of the tabs can be overwritten with custom styles using `font-size` in CSS or using tailwind classes.'
+                }
+            }
+        }
+    },
+    selectstepcomponent: {
+        name: 'Select Step',
+        icon: List,
+        dims: '2:1-3:1',
+        customCss: {
+            tabRow: { class: '', style: '' },
+            allTabs: { class: '', style: '' },
+            selectedTab: { class: '', style: '' }
+        },
+        initialData: {
+            verticalAlignment: 'center',
+            componentInput: undefined,
+            configuration: {
+                items: {
+                    type: 'static',
+                    fieldType: 'array',
+                    subFieldType: 'labeledselect',
+                    value: [
+                        { value: 'foo', label: 'Foo' },
+                        { value: 'bar', label: 'Bar' }
+                    ]
+                },
+                defaultValue: {
+                    type: 'static',
+                    value: undefined,
+                    fieldType: 'object'
+                }
+            }
+        }
+    },
+    conditionalwrapper: {
+        name: 'Conditional tabs',
+        icon: Split,
+        dims: '2:8-6:8',
+        customCss: {
+            container: { class: '', style: '' }
+        },
+        initialData: {
+            configuration: {},
+            componentInput: undefined,
+            numberOfSubgrids: 2,
+            conditions: [
+                {
+                    type: 'eval',
+                    expr: 'false',
+                    fieldType: 'boolean'
+                },
+                {
+                    type: 'eval',
+                    expr: 'true',
+                    fieldType: 'boolean'
+                }
+            ]
+        }
+    }
+};
+export const presetComponents = {
+    sidebartabscomponent: {
+        name: 'Sidebar Tabs',
+        icon: PanelLeft,
+        targetComponent: 'tabscomponent',
+        configuration: {
+            tabsKind: {
+                value: 'sidebar'
+            }
+        },
+        type: 'sidebartabscomponent'
+    },
+    invisibletabscomponent: {
+        name: 'Invisible Tabs',
+        icon: PanelTopInactive,
+        targetComponent: 'tabscomponent',
+        configuration: {
+            tabsKind: {
+                value: 'invisibleOnView'
+            }
+        },
+        type: 'invisibletabscomponent'
     }
 };
+export const presets = presetComponents;
 export const ccomponents = components;