windmill-components 1.70.0 → 1.77.0

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

@@ -1,5 +1,5 @@
 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 } 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 } 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] };
@@ -33,13 +33,9 @@ export const components = {
             softWrap: true,
             id: '',
             type: 'containercomponent',
-            configuration: {
-                noPadding: {
-                    type: 'static',
-                    fieldType: 'boolean',
-                    value: false,
-                    onlyStatic: true
-                }
+            configuration: {},
+            customCss: {
+                container: { class: '', style: '' }
             },
             componentInput: undefined,
             card: false,
@@ -74,6 +70,12 @@ export const components = {
                     value: false,
                     fieldType: 'boolean',
                     onlyStatic: true
+                },
+                fitContent: {
+                    type: 'static',
+                    value: false,
+                    fieldType: 'boolean',
+                    onlyStatic: true
                 }
             },
             customCss: {
@@ -135,6 +137,12 @@ export const components = {
                     type: 'static',
                     value: ''
                 },
+                gotoNewTab: {
+                    tooltip: 'Go to an url on a new tab',
+                    fieldType: 'boolean',
+                    type: 'static',
+                    value: true
+                },
                 beforeIcon: {
                     type: 'static',
                     value: undefined,
@@ -202,7 +210,10 @@ export const components = {
                     value: ''
                 }
             },
-            customCss: {},
+            customCss: {
+                container: { class: '', style: '' },
+                button: { class: '', style: '' }
+            },
             card: true
         }
     },
@@ -243,7 +254,10 @@ export const components = {
                     optionValuesKey: 'buttonSizeOptions'
                 }
             },
-            customCss: {},
+            customCss: {
+                button: { class: '', style: '' },
+                popup: { class: '', style: '' }
+            },
             card: true
         }
     },
@@ -274,7 +288,9 @@ export const components = {
                 fieldType: 'object',
                 value: { data: [25, 50, 25], labels: ['Pie', 'Charts', '<3'] }
             },
-            customCss: {},
+            customCss: {
+                container: { class: '', style: '' }
+            },
             card: true
         }
     },
@@ -305,7 +321,9 @@ export const components = {
                 fieldType: 'object',
                 value: { data: [25, 50, 25], labels: ['Bar', 'Charts', '<3'] }
             },
-            customCss: {},
+            customCss: {
+                container: { class: '', style: '' }
+            },
             card: true
         }
     },
@@ -328,7 +346,9 @@ Hello \${ctx.username}
 </h1>`
             },
             configuration: {},
-            customCss: {},
+            customCss: {
+                container: { class: '', style: '' }
+            },
             card: false
         }
     },
@@ -365,7 +385,7 @@ Hello \${ctx.username}
                     onlyStatic: true,
                     fieldType: 'boolean',
                     value: false,
-                    tooltip: 'use the canvas renderer instead of the svg one for more interactive plots'
+                    tooltip: 'Use the canvas renderer instead of the svg one for more interactive plots'
                 }
             },
             customCss: {},
@@ -470,7 +490,9 @@ Hello \${ctx.username}
                     }
                 ]
             },
-            customCss: {},
+            customCss: {
+                container: { class: '', style: '' }
+            },
             card: true
         }
     },
@@ -520,7 +542,9 @@ Hello \${ctx.username}
                     }
                 ]
             },
-            customCss: {},
+            customCss: {
+                container: { class: '', style: '' }
+            },
             card: true
         }
     },
@@ -557,7 +581,12 @@ Hello \${ctx.username}
                     }
                 ]
             },
-            customCss: {},
+            customCss: {
+                container: { class: '', style: '' },
+                tableHeader: { class: '', style: '' },
+                tableBody: { class: '', style: '' },
+                tableFooter: { class: '', style: '' }
+            },
             card: true,
             actionButtons: []
         }
@@ -577,10 +606,24 @@ Hello \${ctx.username}
                     value: [{ field: 'id' }, { field: 'name', editable: true }, { field: 'age' }]
                 },
                 allEditable: {
+                    type: 'static',
+                    fieldType: 'boolean',
+                    value: false,
+                    onlyStatic: true,
+                    tooltip: "Configure all columns as Editable by users"
+                },
+                pagination: {
                     type: 'static',
                     fieldType: 'boolean',
                     value: false,
                     onlyStatic: true
+                },
+                pageSize: {
+                    type: 'static',
+                    fieldType: 'number',
+                    value: 10,
+                    onlyStatic: true,
+                    tooltip: "Number of rows per page"
                 }
             },
             componentInput: {
@@ -601,7 +644,7 @@ Hello \${ctx.username}
                 ]
             },
             customCss: {},
-            card: true,
+            card: true
         }
     },
     checkboxcomponent: {
@@ -626,7 +669,9 @@ Hello \${ctx.username}
                     fieldType: 'boolean'
                 }
             },
-            customCss: {},
+            customCss: {
+                text: { class: '', style: '' }
+            },
             card: false
         }
     },
@@ -653,7 +698,9 @@ Hello \${ctx.username}
                     fieldType: 'text'
                 }
             },
-            customCss: {},
+            customCss: {
+                input: { class: '', style: '' }
+            },
             card: false
         }
     },
@@ -676,12 +723,78 @@ Hello \${ctx.username}
                         { value: 'bar', label: 'Bar' }
                     ]
                 },
-                multiple: {
+                create: {
                     type: 'static',
                     fieldType: 'boolean',
                     value: false,
+                    onlyStatic: true,
+                    tooltip: "Allows user to manually add new value"
+                },
+                placeholder: {
+                    type: 'static',
+                    fieldType: 'text',
+                    value: 'Select an item',
                     onlyStatic: true
                 },
+                defaultValue: {
+                    type: 'static',
+                    value: undefined,
+                    fieldType: 'object'
+                }
+            },
+            customCss: {
+                input: { style: '' }
+            },
+            card: false,
+            softWrap: true
+        }
+    },
+    multiselectcomponent: {
+        name: 'Multi Select',
+        icon: List,
+        dims: '2:1-3:1',
+        data: {
+            verticalAlignment: 'center',
+            id: '',
+            type: 'multiselectcomponent',
+            componentInput: undefined,
+            configuration: {
+                items: {
+                    type: 'static',
+                    fieldType: 'array',
+                    subFieldType: 'text',
+                    value: ['Foo', 'Bar']
+                },
+                placeholder: {
+                    type: 'static',
+                    fieldType: 'text',
+                    value: 'Select items',
+                    onlyStatic: true
+                }
+            },
+            customCss: {
+                input: { style: '' }
+            },
+            card: false,
+            softWrap: true
+        }
+    },
+    resourceselectcomponent: {
+        name: 'Resource Select',
+        icon: List,
+        dims: '2:1-3:1',
+        data: {
+            verticalAlignment: 'center',
+            id: '',
+            type: 'resourceselectcomponent',
+            componentInput: undefined,
+            configuration: {
+                items: {
+                    type: 'static',
+                    fieldType: 'array',
+                    subFieldType: 'labeledresource',
+                    value: []
+                },
                 placeholder: {
                     type: 'static',
                     fieldType: 'text',
@@ -689,7 +802,9 @@ Hello \${ctx.username}
                     onlyStatic: true
                 }
             },
-            customCss: {},
+            customCss: {
+                input: { style: '' }
+            },
             card: false,
             softWrap: true
         }
@@ -719,20 +834,23 @@ Hello \${ctx.username}
                 min: {
                     type: 'static',
                     value: undefined,
-                    fieldType: 'number',
+                    fieldType: 'number'
                 },
                 max: {
                     type: 'static',
                     value: undefined,
-                    fieldType: 'number',
+                    fieldType: 'number'
                 },
                 step: {
                     type: 'static',
                     value: 1,
                     fieldType: 'number',
+                    tooltip: "Spread between each number suggestion"
                 }
             },
-            customCss: {},
+            customCss: {
+                input: { class: '', style: '' }
+            },
             card: false
         }
     },
@@ -770,10 +888,13 @@ Hello \${ctx.username}
                     value: 'en-US',
                     fieldType: 'select',
                     onlyStatic: true,
-                    optionValuesKey: 'localeOptions'
+                    optionValuesKey: 'localeOptions',
+                    tooltip: "Currency format"
                 }
             },
-            customCss: {},
+            customCss: {
+                input: { class: '', style: '' }
+            },
             card: false
         }
     },
@@ -797,20 +918,26 @@ Hello \${ctx.username}
                 max: {
                     type: 'static',
                     value: 42,
-                    fieldType: 'number',
+                    fieldType: 'number'
                 },
                 defaultValue: {
                     type: 'static',
                     value: 20,
-                    fieldType: 'number',
+                    fieldType: 'number'
                 },
                 step: {
                     type: 'static',
                     value: 1,
                     fieldType: 'number',
+                    tooltip: "Spread between each number suggestion"
                 }
             },
-            customCss: {},
+            customCss: {
+                bar: { style: '' },
+                handle: { style: '' },
+                limits: { class: '', style: '' },
+                value: { class: '', style: '' }
+            },
             card: false
         }
     },
@@ -828,30 +955,36 @@ Hello \${ctx.username}
                 min: {
                     type: 'static',
                     value: 0,
-                    fieldType: 'number',
+                    fieldType: 'number'
                 },
                 max: {
                     type: 'static',
                     value: 42,
-                    fieldType: 'number',
+                    fieldType: 'number'
                 },
                 defaultLow: {
                     type: 'static',
                     value: 10,
-                    fieldType: 'number',
+                    fieldType: 'number'
                 },
                 defaultHigh: {
                     type: 'static',
                     value: 20,
-                    fieldType: 'number',
+                    fieldType: 'number'
                 },
                 step: {
                     type: 'static',
                     value: 1,
                     fieldType: 'number',
+                    tooltip: "Spread between each number suggestion"
                 }
             },
-            customCss: {},
+            customCss: {
+                handles: { style: '' },
+                bar: { style: '' },
+                limits: { class: '', style: '' },
+                values: { class: '', style: '' }
+            },
             card: false
         }
     },
@@ -873,7 +1006,38 @@ Hello \${ctx.username}
                     onlyStatic: true
                 }
             },
-            customCss: {},
+            customCss: {
+                input: { class: '', style: '' }
+            },
+            card: false
+        }
+    },
+    emailinputcomponent: {
+        name: 'Email Input',
+        icon: AtSignIcon,
+        dims: '2:1-3:1',
+        data: {
+            softWrap: true,
+            verticalAlignment: 'center',
+            id: '',
+            type: 'emailinputcomponent',
+            componentInput: undefined,
+            configuration: {
+                placeholder: {
+                    type: 'static',
+                    value: 'Email',
+                    fieldType: 'text',
+                    onlyStatic: true
+                },
+                defaultValue: {
+                    type: 'static',
+                    value: undefined,
+                    fieldType: 'text'
+                }
+            },
+            customCss: {
+                input: { class: '', style: '' }
+            },
             card: false
         }
     },
@@ -904,7 +1068,9 @@ Hello \${ctx.username}
                     fieldType: 'date'
                 }
             },
-            customCss: {},
+            customCss: {
+                input: { class: '', style: '' }
+            },
             card: false
         }
     },
@@ -917,13 +1083,20 @@ Hello \${ctx.username}
             id: '',
             type: 'tabscomponent',
             configuration: {
-                noPadding: {
+                tabsKind: {
+                    fieldType: 'select',
                     type: 'static',
-                    fieldType: 'boolean',
-                    value: false,
-                    onlyStatic: true
+                    onlyStatic: true,
+                    optionValuesKey: 'tabsKindOptions',
+                    value: 'tabs'
                 }
             },
+            customCss: {
+                tabRow: { class: '', style: '' },
+                allTabs: { class: '', style: '' },
+                selectedTab: { class: '', style: '' },
+                container: { class: '', style: '' }
+            },
             componentInput: undefined,
             card: false,
             numberOfSubgrids: 2,
@@ -950,7 +1123,7 @@ Hello \${ctx.username}
                 color: {
                     type: 'static',
                     value: 'currentColor',
-                    fieldType: 'text'
+                    fieldType: 'color'
                 },
                 size: {
                     type: 'static',
@@ -965,7 +1138,10 @@ Hello \${ctx.username}
                     onlyStatic: true
                 }
             },
-            customCss: {},
+            customCss: {
+                container: { class: '', style: '' },
+                icon: { class: '', style: '' }
+            },
             card: false
         }
     },
@@ -988,11 +1164,14 @@ Hello \${ctx.username}
                 color: {
                     type: 'static',
                     value: '#00000060',
-                    fieldType: 'text',
+                    fieldType: 'color',
                     onlyStatic: true
                 }
             },
-            customCss: {},
+            customCss: {
+                container: { class: '', style: '' },
+                divider: { class: '', style: '' }
+            },
             card: false
         }
     },
@@ -1015,11 +1194,14 @@ Hello \${ctx.username}
                 color: {
                     type: 'static',
                     value: '#00000060',
-                    fieldType: 'text',
+                    fieldType: 'color',
                     onlyStatic: true
                 }
             },
-            customCss: {},
+            customCss: {
+                container: { class: '', style: '' },
+                divider: { class: '', style: '' }
+            },
             card: false
         }
     },
@@ -1052,7 +1234,9 @@ Hello \${ctx.username}
                     onlyStatic: true
                 }
             },
-            customCss: {},
+            customCss: {
+                container: { class: '', style: '' }
+            },
             card: false
         }
     },
@@ -1071,7 +1255,7 @@ Hello \${ctx.username}
                     fieldType: 'text',
                     fileUpload: {
                         accept: 'image/*',
-                        base64: true
+                        convertTo: 'base64'
                     }
                 },
                 imageFit: {
@@ -1087,15 +1271,186 @@ Hello \${ctx.username}
                     fieldType: 'text',
                     onlyStatic: true,
                     tooltip: "This text will appear if the image can't be loaded for any reason"
-                },
-                customStyles: {
+                }
+            },
+            customCss: {
+                image: { class: '', style: '' }
+            },
+            card: false
+        }
+    },
+    drawercomponent: {
+        name: 'Drawer',
+        icon: SidebarClose,
+        dims: '1:1-2:1',
+        data: {
+            softWrap: true,
+            id: '',
+            type: 'drawercomponent',
+            horizontalAlignment: 'center',
+            verticalAlignment: 'center',
+            configuration: {
+                drawerTitle: {
                     type: 'static',
-                    value: '',
-                    fieldType: 'textarea',
+                    fieldType: 'text',
+                    value: 'Drawer title',
                     onlyStatic: true
+                },
+                label: {
+                    type: 'static',
+                    fieldType: 'text',
+                    value: 'Press me'
+                },
+                color: {
+                    fieldType: 'select',
+                    type: 'static',
+                    onlyStatic: true,
+                    optionValuesKey: 'buttonColorOptions',
+                    value: 'blue'
+                },
+                size: {
+                    fieldType: 'select',
+                    type: 'static',
+                    onlyStatic: true,
+                    optionValuesKey: 'buttonSizeOptions',
+                    value: 'xs'
+                },
+                fillContainer: {
+                    fieldType: 'boolean',
+                    type: 'static',
+                    onlyStatic: true,
+                    value: false
+                },
+                disabled: {
+                    fieldType: 'boolean',
+                    type: 'eval',
+                    expr: 'false'
                 }
             },
-            customCss: {},
+            componentInput: undefined,
+            card: false,
+            numberOfSubgrids: 1
+        }
+    },
+    mapcomponent: {
+        name: 'Map',
+        icon: MapPin,
+        dims: '3:6-6:10',
+        data: {
+            id: '',
+            type: 'mapcomponent',
+            componentInput: undefined,
+            configuration: {
+                longitude: {
+                    fieldType: 'number',
+                    type: 'static',
+                    value: 15
+                },
+                latitude: {
+                    fieldType: 'number',
+                    type: 'static',
+                    value: 50
+                },
+                zoom: {
+                    fieldType: 'number',
+                    type: 'static',
+                    value: 3
+                },
+                markers: {
+                    fieldType: 'array',
+                    type: 'static',
+                    subFieldType: 'object',
+                    fileUpload: {
+                        accept: 'application/json',
+                        convertTo: 'text'
+                    },
+                    value: [
+                        {
+                            lon: 12.496366,
+                            lat: 41.902783,
+                            title: 'Rome',
+                            radius: 7,
+                            color: '#dc2626',
+                            strokeWidth: 3,
+                            strokeColor: '#fca5a5'
+                        },
+                        {
+                            lon: -0.136439,
+                            lat: 51.507359,
+                            title: 'London'
+                        }
+                    ]
+                }
+            },
+            customCss: {
+                map: { class: '', style: '' }
+            },
+            card: false
+        }
+    },
+    verticalsplitpanescomponent: {
+        name: 'Vertical Split Panes',
+        icon: FlipHorizontal,
+        dims: '2:8-6:8',
+        data: {
+            softWrap: true,
+            id: '',
+            type: 'verticalsplitpanescomponent',
+            configuration: {},
+            customCss: {
+                container: { class: '', style: '' }
+            },
+            componentInput: undefined,
+            card: false,
+            panes: [50, 50],
+            numberOfSubgrids: 2
+        }
+    },
+    horizontalsplitpanescomponent: {
+        name: 'Horizontal Split Panes',
+        icon: FlipVertical,
+        dims: '2:8-6:8',
+        data: {
+            softWrap: true,
+            id: '',
+            type: 'horizontalsplitpanescomponent',
+            configuration: {},
+            customCss: {
+                container: { class: '', style: '' }
+            },
+            componentInput: undefined,
+            card: false,
+            panes: [50, 50],
+            numberOfSubgrids: 2
+        }
+    },
+    pdfcomponent: {
+        name: 'PDF',
+        icon: FileText,
+        dims: '3:8-8:12',
+        data: {
+            id: '',
+            type: 'pdfcomponent',
+            componentInput: undefined,
+            configuration: {
+                source: {
+                    type: 'static',
+                    value: '/dummy.pdf',
+                    fieldType: 'text',
+                    fileUpload: {
+                        accept: 'application/pdf',
+                        convertTo: 'buffer'
+                    }
+                },
+                zoom: {
+                    fieldType: 'number',
+                    type: 'static',
+                    value: 100
+                }
+            },
+            customCss: {
+                container: { class: '', style: '' }
+            },
             card: false
         }
     }