windmill-components 1.122.0 → 1.138.2

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

@@ -46,7 +46,9 @@ const labels = {
     gotoUrl: 'Go to an url',
     setTab: 'Set the tab of a tabs component',
     sendToast: 'Display a toast notification',
-    sendErrorToast: 'Display an error toast notification'
+    sendErrorToast: 'Display an error toast notification',
+    openModal: 'Open a modal',
+    closeModal: 'Close a modal'
 };
 const onSuccessClick = {
     type: 'oneOf',
@@ -88,6 +90,24 @@ const onSuccessClick = {
                 placeholder: 'Hello there',
                 noVariablePicker: true
             }
+        },
+        openModal: {
+            modalId: {
+                tooltip: 'The id of the modal to open',
+                fieldType: 'text',
+                type: 'static',
+                value: '',
+                noVariablePicker: true
+            }
+        },
+        closeModal: {
+            modalId: {
+                tooltip: 'The id of the modal to close',
+                fieldType: 'text',
+                type: 'static',
+                value: '',
+                noVariablePicker: true
+            }
         }
     }
 };
@@ -136,6 +156,24 @@ const onErrorClick = {
                 type: 'static',
                 value: true
             }
+        },
+        openModal: {
+            modalId: {
+                tooltip: 'The id of the modal to open',
+                fieldType: 'text',
+                type: 'static',
+                value: '',
+                noVariablePicker: true
+            }
+        },
+        closeModal: {
+            modalId: {
+                tooltip: 'The id of the modal to close',
+                fieldType: 'text',
+                type: 'static',
+                value: '',
+                noVariablePicker: true
+            }
         }
     }
 };
@@ -166,10 +204,12 @@ const paginationOneOf = {
         }
     }
 };
+const documentationBaseUrl = 'https://www.windmill.dev/docs/apps/app_configuration-settings/app_component_library';
 export const components = {
     displaycomponent: {
         name: 'Rich Result',
         icon: Monitor,
+        documentationLink: `${documentationBaseUrl}#rich-result`,
         dims: '2:8-6:8',
         customCss: {
             header: { class: '', style: '' },
@@ -184,9 +224,30 @@ export const components = {
             configuration: {}
         }
     },
+    jobidlogcomponent: {
+        name: 'Log',
+        icon: Monitor,
+        documentationLink: `${documentationBaseUrl}#log-display`,
+        dims: '2:8-6:8',
+        customCss: {
+            header: { class: '', style: '' },
+            container: { class: '', style: '' }
+        },
+        initialData: {
+            configuration: {
+                jobId: {
+                    type: 'static',
+                    fieldType: 'text',
+                    value: '',
+                    tooltip: 'Job id to display logs from'
+                }
+            }
+        }
+    },
     logcomponent: {
         name: 'Log',
         icon: Monitor,
+        documentationLink: `${documentationBaseUrl}#log-display`,
         dims: '2:8-6:8',
         customCss: {
             header: { class: '', style: '' },
@@ -205,6 +266,7 @@ export const components = {
     flowstatuscomponent: {
         name: 'Flow Status',
         icon: Monitor,
+        documentationLink: `${documentationBaseUrl}#flow-status`,
         dims: '2:8-6:8',
         customCss: {
             header: { class: '', style: '' },
@@ -220,9 +282,30 @@ export const components = {
             }
         }
     },
+    jobidflowstatuscomponent: {
+        name: 'Flow Status',
+        icon: Monitor,
+        documentationLink: `${documentationBaseUrl}#flow-status`,
+        dims: '2:8-6:8',
+        customCss: {
+            header: { class: '', style: '' },
+            container: { class: '', style: '' }
+        },
+        initialData: {
+            configuration: {
+                jobId: {
+                    type: 'static',
+                    fieldType: 'text',
+                    value: '',
+                    tooltip: 'Job id to display logs from'
+                }
+            }
+        }
+    },
     containercomponent: {
         name: 'Container',
         icon: BoxSelect,
+        documentationLink: `${documentationBaseUrl}#container`,
         dims: '2:8-6:8',
         customCss: {
             container: { class: '', style: '' }
@@ -236,6 +319,7 @@ export const components = {
     listcomponent: {
         name: 'List',
         icon: ListIcon,
+        documentationLink: `${documentationBaseUrl}#list`,
         dims: '3:8-12:8',
         customCss: {
             container: { class: '', style: '' }
@@ -281,6 +365,7 @@ export const components = {
         name: 'Text',
         icon: Type,
         dims: '1:1-3:1',
+        documentationLink: `${documentationBaseUrl}#text`,
         customCss: {
             text: { class: '', style: '' }
         },
@@ -320,6 +405,7 @@ export const components = {
         name: 'Button',
         icon: Inspect,
         dims: '1:1-2:1',
+        documentationLink: `${documentationBaseUrl}#button`,
         customCss: {
             button: { style: '', class: '' },
             container: { style: '', class: '' }
@@ -391,6 +477,7 @@ export const components = {
     downloadcomponent: {
         name: 'Download Button',
         icon: Download,
+        documentationLink: `${documentationBaseUrl}#download-button`,
         dims: '1:1-2:1',
         customCss: {
             button: { style: '', class: '' }
@@ -455,6 +542,7 @@ export const components = {
     formcomponent: {
         name: 'Submit form',
         icon: FormInput,
+        documentationLink: `${documentationBaseUrl}#submit-form`,
         dims: '3:5-6:5',
         customCss: {
             container: { class: '', style: '' },
@@ -496,6 +584,7 @@ export const components = {
     formbuttoncomponent: {
         name: 'Modal Form',
         icon: PlusSquare,
+        documentationLink: `${documentationBaseUrl}#modal-form`,
         dims: '1:1-2:1',
         customCss: {
             button: { class: '', style: '' },
@@ -550,6 +639,7 @@ export const components = {
     piechartcomponent: {
         name: 'Pie Chart',
         icon: PieChart,
+        documentationLink: `${documentationBaseUrl}#pie-chart`,
         dims: '2:8-6:8',
         customCss: {
             container: { class: '', style: '' }
@@ -580,6 +670,7 @@ export const components = {
     chartjscomponent: {
         name: 'ChartJs',
         icon: PieChart,
+        documentationLink: `${documentationBaseUrl}#chartjs`,
         dims: '2:8-6:8',
         customCss: {
             container: { class: '', style: '' }
@@ -618,6 +709,7 @@ export const components = {
     barchartcomponent: {
         name: 'Bar/Line Chart',
         icon: BarChart4,
+        documentationLink: `${documentationBaseUrl}#barline-chart`,
         dims: '2:8-6:8',
         customCss: {
             container: { class: '', style: '' }
@@ -648,6 +740,7 @@ export const components = {
     htmlcomponent: {
         name: 'HTML',
         icon: Code2,
+        documentationLink: `${documentationBaseUrl}#html`,
         dims: '1:2-1:2',
         customCss: {
             container: { class: '', style: '' }
@@ -669,6 +762,7 @@ Hello \${ctx.username}
     vegalitecomponent: {
         name: 'Vega Lite',
         icon: PieChart,
+        documentationLink: `${documentationBaseUrl}#vega-lite`,
         dims: '2:8-6:8',
         customCss: {},
         initialData: {
@@ -705,6 +799,7 @@ Hello \${ctx.username}
     plotlycomponent: {
         name: 'Plotly',
         icon: PieChart,
+        documentationLink: `${documentationBaseUrl}#plotly`,
         dims: '2:8-6:8',
         customCss: {},
         initialData: {
@@ -729,7 +824,7 @@ Hello \${ctx.username}
                     fieldType: 'object',
                     value: {},
                     tooltip: 'Layout options for the plot. See https://plotly.com/javascript/reference/layout/ for more information',
-                    onlyStatic: true
+                    onlyStatic: false
                 }
             }
         }
@@ -737,6 +832,7 @@ Hello \${ctx.username}
     timeseriescomponent: {
         name: 'Timeseries',
         icon: GripHorizontal,
+        documentationLink: `${documentationBaseUrl}#timeseries`,
         dims: '2:8-6:8',
         customCss: {
             container: { class: '', style: '' }
@@ -810,6 +906,7 @@ Hello \${ctx.username}
     scatterchartcomponent: {
         name: 'Scatter Chart',
         icon: GripHorizontal,
+        documentationLink: `${documentationBaseUrl}#scatter-chart`,
         dims: '2:8-6:8',
         customCss: {
             container: { class: '', style: '' }
@@ -859,6 +956,7 @@ Hello \${ctx.username}
     tablecomponent: {
         name: 'Table',
         icon: Table2,
+        documentationLink: `${documentationBaseUrl}#table`,
         dims: '3:10-6:10',
         customCss: {
             container: { class: '', style: '' },
@@ -883,6 +981,13 @@ Hello \${ctx.username}
                     value: true,
                     onlyStatic: true,
                     tooltip: 'display a button to download the table as a csv file'
+                },
+                initialState: {
+                    type: 'static',
+                    fieldType: 'object',
+                    value: {},
+                    tooltip: 'any configuration that can be passed to the tanstack table component as initial state (https://tanstack.com/table/v8/docs/api/core/table#initialstate)',
+                    onlyStatic: true
                 }
             },
             componentInput: {
@@ -908,6 +1013,7 @@ Hello \${ctx.username}
     aggridcomponent: {
         name: 'AgGrid Table',
         icon: Table2,
+        documentationLink: `${documentationBaseUrl}#aggrid-table`,
         dims: '3:10-6:10',
         customCss: {},
         initialData: {
@@ -982,6 +1088,7 @@ Hello \${ctx.username}
     checkboxcomponent: {
         name: 'Toggle',
         icon: ToggleLeft,
+        documentationLink: `${documentationBaseUrl}#toggle`,
         dims: '1:1-2:1',
         customCss: {
             text: { class: '', style: '' }
@@ -1007,6 +1114,7 @@ Hello \${ctx.username}
     textinputcomponent: {
         name: 'Text Input',
         icon: TextCursorInput,
+        documentationLink: `${documentationBaseUrl}#text-input`,
         dims: '2:1-2:1',
         customCss: {
             input: { class: '', style: '' }
@@ -1032,7 +1140,8 @@ Hello \${ctx.username}
     quillcomponent: {
         name: 'Rich Text Editor',
         icon: TextCursorInput,
-        dims: '2:1-2:1',
+        documentationLink: `${documentationBaseUrl}#rich-text-editor`,
+        dims: '2:1-4:4',
         customCss: {
             input: { class: '', style: '' }
         },
@@ -1056,6 +1165,7 @@ Hello \${ctx.username}
     textareainputcomponent: {
         name: 'Textarea',
         icon: TextCursorInput,
+        documentationLink: `${documentationBaseUrl}#textarea`,
         dims: '2:1-2:1',
         customCss: {
             input: { class: '', style: '' }
@@ -1080,6 +1190,7 @@ Hello \${ctx.username}
     selectcomponent: {
         name: 'Select',
         icon: List,
+        documentationLink: `${documentationBaseUrl}#select`,
         dims: '2:1-3:1',
         customCss: {
             input: {
@@ -1140,6 +1251,7 @@ Hello \${ctx.username}
     multiselectcomponent: {
         name: 'Multi Select',
         icon: List,
+        documentationLink: `${documentationBaseUrl}#multiselect`,
         dims: '2:1-3:1',
         customCss: {
             multiselect: {
@@ -1189,6 +1301,7 @@ Hello \${ctx.username}
     resourceselectcomponent: {
         name: 'Resource Select',
         icon: List,
+        documentationLink: `${documentationBaseUrl}#resource-select`,
         dims: '2:1-3:1',
         customCss: {
             input: { style: '' }
@@ -1222,6 +1335,7 @@ Hello \${ctx.username}
     numberinputcomponent: {
         name: 'Number',
         icon: Binary,
+        documentationLink: `${documentationBaseUrl}#number-input`,
         dims: '2:1-3:1',
         customCss: {
             input: { class: '', style: '' }
@@ -1263,6 +1377,7 @@ Hello \${ctx.username}
     currencycomponent: {
         name: 'Currency',
         icon: DollarSign,
+        documentationLink: `${documentationBaseUrl}#currency-input`,
         dims: '2:1-3:1',
         customCss: {
             input: { class: '', style: '' }
@@ -1303,6 +1418,7 @@ Hello \${ctx.username}
     slidercomponent: {
         name: 'Slider',
         icon: SlidersHorizontal,
+        documentationLink: `${documentationBaseUrl}#slider`,
         dims: '3:1-4:1',
         customCss: {
             bar: { style: '' },
@@ -1347,6 +1463,7 @@ Hello \${ctx.username}
     rangecomponent: {
         name: 'Range',
         icon: SlidersHorizontal,
+        documentationLink: `${documentationBaseUrl}#range`,
         dims: '3:2-4:2',
         customCss: {
             handles: { style: '' },
@@ -1390,6 +1507,7 @@ Hello \${ctx.username}
     passwordinputcomponent: {
         name: 'Password',
         icon: Lock,
+        documentationLink: `${documentationBaseUrl}#password-input`,
         dims: '2:1-3:1',
         customCss: {
             input: { class: '', style: '' }
@@ -1410,6 +1528,7 @@ Hello \${ctx.username}
     emailinputcomponent: {
         name: 'Email Input',
         icon: AtSignIcon,
+        documentationLink: `${documentationBaseUrl}#email-input`,
         dims: '2:1-3:1',
         customCss: {
             input: { class: '', style: '' }
@@ -1435,6 +1554,7 @@ Hello \${ctx.username}
     dateinputcomponent: {
         name: 'Date',
         icon: Calendar,
+        documentationLink: `${documentationBaseUrl}#date-input`,
         dims: '2:1-3:1',
         customCss: {
             input: { class: '', style: '' }
@@ -1457,6 +1577,11 @@ Hello \${ctx.username}
                     type: 'static',
                     value: undefined,
                     fieldType: 'date'
+                },
+                outputFormat: {
+                    type: 'static',
+                    value: undefined,
+                    fieldType: 'text'
                 }
             }
         }
@@ -1464,6 +1589,7 @@ Hello \${ctx.username}
     tabscomponent: {
         name: 'Tabs',
         icon: ListOrdered,
+        documentationLink: `${documentationBaseUrl}#tabs-2`,
         dims: '2:8-6:8',
         customCss: {
             tabRow: { class: '', style: '' },
@@ -1490,6 +1616,7 @@ Hello \${ctx.username}
     steppercomponent: {
         name: 'Stepper',
         icon: ListOrdered,
+        documentationLink: `${documentationBaseUrl}#stepper`,
         dims: '2:8-6:8',
         customCss: {
             container: { class: '', style: '' }
@@ -1509,6 +1636,7 @@ Hello \${ctx.username}
     iconcomponent: {
         name: 'Icon',
         icon: Smile,
+        documentationLink: `${documentationBaseUrl}#icon`,
         dims: '1:3-1:2',
         customCss: {
             container: { class: '', style: '' },
@@ -1549,6 +1677,7 @@ Hello \${ctx.username}
     horizontaldividercomponent: {
         name: 'Divider X',
         icon: SeparatorHorizontal,
+        documentationLink: `${documentationBaseUrl}#divider-x`,
         dims: '3:1-12:1',
         customCss: {
             container: { class: '', style: '' },
@@ -1582,6 +1711,7 @@ Hello \${ctx.username}
     verticaldividercomponent: {
         name: 'Divider Y',
         icon: SeparatorVertical,
+        documentationLink: `${documentationBaseUrl}#divider-y`,
         dims: '1:4-1:6',
         customCss: {
             container: { class: '', style: '' },
@@ -1611,6 +1741,7 @@ Hello \${ctx.username}
     fileinputcomponent: {
         name: 'File Input',
         icon: Paperclip,
+        documentationLink: `${documentationBaseUrl}#file-input`,
         dims: '3:4-6:4',
         customCss: {
             container: { class: '', style: '' }
@@ -1643,6 +1774,7 @@ Hello \${ctx.username}
     imagecomponent: {
         name: 'Image',
         icon: Image,
+        documentationLink: `${documentationBaseUrl}#image`,
         dims: '3:4-5:4',
         customCss: {
             image: { class: '', style: '' }
@@ -1680,6 +1812,7 @@ Hello \${ctx.username}
     drawercomponent: {
         name: 'Drawer',
         icon: SidebarClose,
+        documentationLink: `${documentationBaseUrl}#drawer`,
         dims: '1:1-2:1',
         customCss: {
             button: { style: '', class: '' },
@@ -1693,7 +1826,7 @@ Hello \${ctx.username}
                     type: 'static',
                     fieldType: 'text',
                     value: 'Drawer title',
-                    onlyStatic: true
+                    onlyStatic: false
                 },
                 label: {
                     type: 'static',
@@ -1734,6 +1867,7 @@ Hello \${ctx.username}
     mapcomponent: {
         name: 'Map',
         icon: MapPin,
+        documentationLink: `${documentationBaseUrl}#map`,
         dims: '3:6-6:10',
         customCss: {
             map: { class: '', style: '' }
@@ -1787,6 +1921,7 @@ Hello \${ctx.username}
     verticalsplitpanescomponent: {
         name: 'Vertical Split Panes',
         icon: FlipHorizontal,
+        documentationLink: `${documentationBaseUrl}#vertical-split-panes`,
         dims: '2:8-6:8',
         customCss: {
             container: { class: '', style: '' }
@@ -1801,6 +1936,7 @@ Hello \${ctx.username}
     horizontalsplitpanescomponent: {
         name: 'Horizontal Split Panes',
         icon: FlipVertical,
+        documentationLink: `${documentationBaseUrl}#horizontal-split-panes`,
         dims: '2:8-6:8',
         customCss: {
             container: { class: '', style: '' }
@@ -1815,6 +1951,7 @@ Hello \${ctx.username}
     pdfcomponent: {
         name: 'PDF',
         icon: FileText,
+        documentationLink: `${documentationBaseUrl}#pdf`,
         dims: '3:8-8:12',
         customCss: {
             container: { class: '', style: '' }
@@ -1843,6 +1980,7 @@ Hello \${ctx.username}
     modalcomponent: {
         name: 'Modal',
         icon: SidebarClose,
+        documentationLink: `${documentationBaseUrl}#modal-layout`,
         dims: '1:1-2:1',
         customCss: {
             button: { class: '', style: '' },
@@ -1899,6 +2037,7 @@ Hello \${ctx.username}
     schemaformcomponent: {
         name: 'Form',
         icon: FileText,
+        documentationLink: `${documentationBaseUrl}#form-input`,
         dims: '3:8-8:12',
         customCss: {
             container: { class: '', style: '' },
@@ -1941,6 +2080,7 @@ Hello \${ctx.username}
     selecttabcomponent: {
         name: 'Select Tab',
         icon: List,
+        documentationLink: `${documentationBaseUrl}#select-tab`,
         dims: '2:1-3:1',
         customCss: {
             tabRow: { class: '', style: '' },
@@ -1978,6 +2118,7 @@ Hello \${ctx.username}
     selectstepcomponent: {
         name: 'Select Step',
         icon: List,
+        documentationLink: `${documentationBaseUrl}#select-step`,
         dims: '2:1-3:1',
         customCss: {
             tabRow: { class: '', style: '' },
@@ -2008,6 +2149,7 @@ Hello \${ctx.username}
     conditionalwrapper: {
         name: 'Conditional tabs',
         icon: Split,
+        documentationLink: `${documentationBaseUrl}#conditional-tabs`,
         dims: '2:8-6:8',
         customCss: {
             container: { class: '', style: '' }

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

@@ -54,8 +54,8 @@ const display = {
         'htmlcomponent',
         'pdfcomponent',
         'displaycomponent',
-        'logcomponent',
-        'flowstatuscomponent'
+        'jobidlogcomponent',
+        'jobidflowstatuscomponent'
     ]
 };
 const tables = {

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

@@ -35,7 +35,7 @@ $: componentsFiltered = COMPONENT_SETS.map((set) => ({
 }));
 </script>
 
-<section class="p-2 sticky bg-white w-full z-10 top-0">
+<section class="p-2 sticky w-full z-10 top-0">
 	<ClearableInput bind:value={search} placeholder="Search components..." />
 </section>
 
@@ -44,7 +44,7 @@ $: componentsFiltered = COMPONENT_SETS.map((set) => ({
 		<div
 			in:fade|local={{ duration: 50, delay: 50 }}
 			out:fade|local={{ duration: 50 }}
-			class="absolute left-0 top-0 w-full text-sm text-gray-500 text-center py-6 px-2"
+			class="absolute left-0 top-0 w-full text-sm text-tertiary text-center py-6 px-2"
 		>
 			No components found
 		</div>
@@ -61,11 +61,11 @@ $: componentsFiltered = COMPONENT_SETS.map((set) => ({
 											on:click={() => addComponent(item)}
 											title={componentsRecord[item].name}
 											class="transition-all border w-20 shadow-sm h-16 p-2 flex flex-col gap-2 items-center
-											justify-center bg-white rounded-md hover:bg-blue-50 duration-200 hover:border-blue-500"
+											justify-center bg-surface rounded-md hover:bg-blue-50 dark:hover:bg-blue-900 duration-200 hover:border-blue-500"
 										>
-											<svelte:component this={componentsRecord[item].icon} class="text-gray-600" />
+											<svelte:component this={componentsRecord[item].icon} class="text-primary" />
 										</button>
-										<div class="text-xs text-center flex-wrap text-gray-600 mt-1">
+										<div class="text-xs text-center flex-wrap text-secondary mt-1">
 											{componentsRecord[item].name}
 										</div>
 									</div>
@@ -77,14 +77,14 @@ $: componentsFiltered = COMPONENT_SETS.map((set) => ({
 												on:click={() => addPresetComponent(presetItem)}
 												title={presetsRecord[presetItem].name}
 												class="transition-all border w-20 shadow-sm h-16 p-2 flex flex-col gap-2 items-center
-										justify-center bg-white rounded-md hover:bg-blue-50 duration-200 hover:border-blue-500"
+										justify-center bg-surface rounded-md hover:bg-blue-50 dark:hover:bg-blue-900 duration-200 hover:border-blue-500"
 											>
 												<svelte:component
 													this={presetsRecord[presetItem].icon}
-													class="text-gray-600"
+													class="text-secondary"
 												/>
 											</button>
-											<div class="text-xs text-center flex-wrap text-gray-600 mt-1">
+											<div class="text-xs text-center flex-wrap text-secondary mt-1">
 												{presetsRecord[presetItem].name}
 											</div>
 										</div>

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

@@ -22,20 +22,20 @@ function toggleQuickMenu() {
 </script>
 
 <div
-	class="sticky top-0 z-20 text-lg bg-gray-100 font-semibold lowercase leading-none [font-variant:small-caps] text-gray-700 px-3 pb-1 mt-4 mb-1"
+	class="sticky top-0 z-20 text-lg bg-surface-secondary font-semibold lowercase leading-none [font-variant:small-caps] text-secondary px-3 pb-1 mt-4 mb-1"
 >
 	{addWhitespaceBeforeCapitals(name)}
 </div>
 {#if value}
 	<div class="px-3">
 		{#if tooltip}
-			<div class="text-gray-600 text-2xs py-2">{tooltip}</div>
+			<div class="text-tertiary text-2xs py-2">{tooltip}</div>
 		{/if}
 		{#if value.style !== undefined || forceStyle}
 			<div class="pb-2">
 				<!-- svelte-ignore a11y-label-has-associated-control -->
 				<label class="block">
-					<div class="text-sm font-medium text-gray-600 pb-0.5"> Plain CSS </div>
+					<div class="text-sm font-medium text-tertiary pb-0.5"> Plain CSS </div>
 					<div class="flex gap-1">
 						<div class="relative grow">
 							<ClearableInput
@@ -83,7 +83,7 @@ function toggleQuickMenu() {
 		{#if value.class !== undefined || forceClass}
 			<!-- svelte-ignore a11y-label-has-associated-control -->
 			<label class="block">
-				<div class="text-sm font-medium text-gray-600 pb-0.5">
+				<div class="text-sm font-medium text-tertiary pb-0.5">
 					Tailwind classes<Tooltip documentationLink="https://tailwindcss.com/"
 						>Use any tailwind classes to style your component</Tooltip
 					></div

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

@@ -53,7 +53,7 @@ entries.sort((a, b) => a.name.localeCompare(b.name));
 let search = '';
 </script>
 
-<!-- <div class="w-full text-lg font-semibold text-center text-gray-600 p-2">Global Styling</div> -->
+<!-- <div class="w-full text-lg font-semibold text-center text-tertiary p-2">Global Styling</div> -->
 <Tabs selected="ui" on:selected={(e) => switchTab(e.detail === 'json')} class="h-full">
 	<Tab value="ui" size="xs" class="w-1/2">
 		<div class="m-1 center-center">
@@ -75,7 +75,7 @@ let search = '';
 			<div class="h-[calc(100%-50px)] overflow-auto relative">
 				{#each search != '' ? entries.filter((x) => x.name
 								.toLowerCase()
-								.includes(search.toLowerCase())) : entries as { type, name, icon, ids } (name)}
+								.includes(search.toLowerCase())) : entries as { type, name, icon, ids } (name + type)}
 					{#if ids.length > 0}
 						<ListItem
 							title={name}

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

@@ -24,8 +24,8 @@ onMount(() => {
 	{#if prefix !== undefined}
 		<button
 			on:click|preventDefault={() => isOpenStore.toggle(storeTitle)}
-			class="w-full flex justify-between items-center text-gray-700 px-2 py-1
-			rounded-sm duration-200 hover:bg-gray-100 {toggleClasses}"
+			class="w-full flex justify-between items-center text-secondary px-2 py-1
+			rounded-sm duration-200 hover:bg-surface-hover {toggleClasses}"
 		>
 			<h1 class="text-sm font-semibold text-left">
 				<slot name="title">
@@ -40,7 +40,7 @@ onMount(() => {
 			</div>
 		{/if}
 	{:else}
-		<h1 class="text-sm font-semibold text-left px-2 py-1 text-gray-600">
+		<h1 class="text-sm font-semibold text-left px-2 py-1 text-secondary">
 			<slot name="title">
 				{title}
 			</slot>