windmill-components 1.70.0 → 1.75.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] };
@@ -41,6 +41,9 @@ export const components = {
                     onlyStatic: true
                 }
             },
+            customCss: {
+                container: { class: '', style: '' }
+            },
             componentInput: undefined,
             card: false,
             numberOfSubgrids: 1
@@ -74,6 +77,12 @@ export const components = {
                     value: false,
                     fieldType: 'boolean',
                     onlyStatic: true
+                },
+                fitContent: {
+                    type: 'static',
+                    value: false,
+                    fieldType: 'boolean',
+                    onlyStatic: true
                 }
             },
             customCss: {
@@ -135,6 +144,12 @@ export const components = {
                     type: 'static',
                     value: ''
                 },
+                gotoNewTab: {
+                    tooltip: 'Go to create a new tab',
+                    fieldType: 'boolean',
+                    type: 'static',
+                    value: true
+                },
                 beforeIcon: {
                     type: 'static',
                     value: undefined,
@@ -202,7 +217,10 @@ export const components = {
                     value: ''
                 }
             },
-            customCss: {},
+            customCss: {
+                container: { class: '', style: '' },
+                button: { class: '', style: '' }
+            },
             card: true
         }
     },
@@ -243,7 +261,10 @@ export const components = {
                     optionValuesKey: 'buttonSizeOptions'
                 }
             },
-            customCss: {},
+            customCss: {
+                button: { class: '', style: '' },
+                popup: { class: '', style: '' }
+            },
             card: true
         }
     },
@@ -274,7 +295,9 @@ export const components = {
                 fieldType: 'object',
                 value: { data: [25, 50, 25], labels: ['Pie', 'Charts', '<3'] }
             },
-            customCss: {},
+            customCss: {
+                container: { class: '', style: '' }
+            },
             card: true
         }
     },
@@ -305,7 +328,9 @@ export const components = {
                 fieldType: 'object',
                 value: { data: [25, 50, 25], labels: ['Bar', 'Charts', '<3'] }
             },
-            customCss: {},
+            customCss: {
+                container: { class: '', style: '' }
+            },
             card: true
         }
     },
@@ -328,7 +353,9 @@ Hello \${ctx.username}
 </h1>`
             },
             configuration: {},
-            customCss: {},
+            customCss: {
+                container: { class: '', style: '' }
+            },
             card: false
         }
     },
@@ -470,7 +497,9 @@ Hello \${ctx.username}
                     }
                 ]
             },
-            customCss: {},
+            customCss: {
+                container: { class: '', style: '' }
+            },
             card: true
         }
     },
@@ -520,7 +549,9 @@ Hello \${ctx.username}
                     }
                 ]
             },
-            customCss: {},
+            customCss: {
+                container: { class: '', style: '' }
+            },
             card: true
         }
     },
@@ -557,7 +588,12 @@ Hello \${ctx.username}
                     }
                 ]
             },
-            customCss: {},
+            customCss: {
+                container: { class: '', style: '' },
+                tableHeader: { class: '', style: '' },
+                tableBody: { class: '', style: '' },
+                tableFooter: { class: '', style: '' }
+            },
             card: true,
             actionButtons: []
         }
@@ -581,6 +617,18 @@ Hello \${ctx.username}
                     fieldType: 'boolean',
                     value: false,
                     onlyStatic: true
+                },
+                pagination: {
+                    type: 'static',
+                    fieldType: 'boolean',
+                    value: false,
+                    onlyStatic: true
+                },
+                pageSize: {
+                    type: 'static',
+                    fieldType: 'number',
+                    value: 10,
+                    onlyStatic: true
                 }
             },
             componentInput: {
@@ -601,7 +649,7 @@ Hello \${ctx.username}
                 ]
             },
             customCss: {},
-            card: true,
+            card: true
         }
     },
     checkboxcomponent: {
@@ -626,7 +674,9 @@ Hello \${ctx.username}
                     fieldType: 'boolean'
                 }
             },
-            customCss: {},
+            customCss: {
+                text: { class: '', style: '' }
+            },
             card: false
         }
     },
@@ -653,7 +703,9 @@ Hello \${ctx.username}
                     fieldType: 'text'
                 }
             },
-            customCss: {},
+            customCss: {
+                input: { class: '', style: '' }
+            },
             card: false
         }
     },
@@ -676,7 +728,7 @@ Hello \${ctx.username}
                         { value: 'bar', label: 'Bar' }
                     ]
                 },
-                multiple: {
+                create: {
                     type: 'static',
                     fieldType: 'boolean',
                     value: false,
@@ -687,9 +739,76 @@ Hello \${ctx.username}
                     fieldType: 'text',
                     value: 'Select an item',
                     onlyStatic: true
+                },
+                defaultValue: {
+                    type: 'static',
+                    value: undefined,
+                    fieldType: 'object'
                 }
             },
-            customCss: {},
+            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',
+                    value: 'Select an item',
+                    onlyStatic: true
+                }
+            },
+            customCss: {
+                input: { style: '' }
+            },
             card: false,
             softWrap: true
         }
@@ -719,20 +838,22 @@ 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',
+                    fieldType: 'number'
                 }
             },
-            customCss: {},
+            customCss: {
+                input: { class: '', style: '' }
+            },
             card: false
         }
     },
@@ -773,7 +894,9 @@ Hello \${ctx.username}
                     optionValuesKey: 'localeOptions'
                 }
             },
-            customCss: {},
+            customCss: {
+                input: { class: '', style: '' }
+            },
             card: false
         }
     },
@@ -797,20 +920,25 @@ 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',
+                    fieldType: 'number'
                 }
             },
-            customCss: {},
+            customCss: {
+                bar: { style: '' },
+                handle: { style: '' },
+                limits: { class: '', style: '' },
+                value: { class: '', style: '' }
+            },
             card: false
         }
     },
@@ -828,30 +956,35 @@ 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',
+                    fieldType: 'number'
                 }
             },
-            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
         }
     },
@@ -924,6 +1090,12 @@ Hello \${ctx.username}
                     onlyStatic: true
                 }
             },
+            customCss: {
+                tabRow: { class: '', style: '' },
+                allTabs: { class: '', style: '' },
+                selectedTab: { class: '', style: '' },
+                container: { class: '', style: '' }
+            },
             componentInput: undefined,
             card: false,
             numberOfSubgrids: 2,
@@ -950,7 +1122,7 @@ Hello \${ctx.username}
                 color: {
                     type: 'static',
                     value: 'currentColor',
-                    fieldType: 'text'
+                    fieldType: 'color'
                 },
                 size: {
                     type: 'static',
@@ -965,7 +1137,10 @@ Hello \${ctx.username}
                     onlyStatic: true
                 }
             },
-            customCss: {},
+            customCss: {
+                container: { class: '', style: '' },
+                icon: { class: '', style: '' }
+            },
             card: false
         }
     },
@@ -988,11 +1163,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 +1193,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 +1233,9 @@ Hello \${ctx.username}
                     onlyStatic: true
                 }
             },
-            customCss: {},
+            customCss: {
+                container: { class: '', style: '' }
+            },
             card: false
         }
     },
@@ -1071,7 +1254,7 @@ Hello \${ctx.username}
                     fieldType: 'text',
                     fileUpload: {
                         accept: 'image/*',
-                        base64: true
+                        convertTo: 'base64'
                     }
                 },
                 imageFit: {
@@ -1087,15 +1270,206 @@ Hello \${ctx.username}
                     fieldType: 'text',
                     onlyStatic: true,
                     tooltip: "This text will appear if the image can't be loaded for any reason"
+                }
+            },
+            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: {
+                noPadding: {
+                    type: 'static',
+                    fieldType: 'boolean',
+                    value: false,
+                    onlyStatic: true
                 },
-                customStyles: {
+                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: {
+                noPadding: {
+                    type: 'static',
+                    fieldType: 'boolean',
+                    value: false,
+                    onlyStatic: true
+                }
+            },
+            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: {
+                noPadding: {
+                    type: 'static',
+                    fieldType: 'boolean',
+                    value: false,
+                    onlyStatic: true
+                }
+            },
+            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
         }
     }