windmill-components 1.473.1 → 1.493.3

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

@@ -1,6 +1,6 @@
 import { BUTTON_COLORS } from '../../../common';
 import { defaultAlignement } from '../componentsPanel/componentDefaultProps';
-import { BarChart4, Binary, FormInput, Inspect, List, Monitor, PieChart, Table2, TextCursorInput, Type, Lock, Calendar, ToggleLeft, GripHorizontal, Code2, SlidersHorizontal, PlusSquare, ListOrdered, BoxSelect, Smile, DollarSign, SeparatorHorizontal, SeparatorVertical, Paperclip, Image, SidebarClose, MapPin, FlipHorizontal, FlipVertical, FileText, AtSignIcon, Split, Download, PanelLeft, PanelTopInactive, ListIcon, Heading1, FileBarChart, Menu, Network, Database, UploadCloud, AlertTriangle, Clock, CalendarClock, AppWindow, PanelTop, RefreshCw, ListCollapse, GalleryThumbnails } from 'lucide-svelte';
+import { BarChart4, Binary, FormInput, Inspect, List, Monitor, PieChart, Table2, TextCursorInput, Type, Lock, Calendar, ToggleLeft, GripHorizontal, Code2, SlidersHorizontal, PlusSquare, ListOrdered, BoxSelect, Smile, DollarSign, SeparatorHorizontal, SeparatorVertical, Paperclip, Image, SidebarClose, MapPin, FlipHorizontal, FlipVertical, FileText, AtSignIcon, Split, Download, PanelLeft, PanelTopInactive, ListIcon, Heading1, FileBarChart, Menu, Network, Database, UploadCloud, AlertTriangle, Clock, CalendarClock, AppWindow, PanelTop, RefreshCw, ListCollapse, GalleryThumbnails, Code } from 'lucide-svelte';
 export function getRecommendedDimensionsByComponent(componentType, column) {
     return processDimension(components[componentType].dims, column);
 }
@@ -52,6 +52,13 @@ export const selectOptions = {
         'png encoded as base64',
         'jpeg encoded as base64',
         'svg encoded as base64'
+    ],
+    imageSourceKindWithS3: [
+        'url',
+        's3 (workspace storage)',
+        'png encoded as base64',
+        'jpeg encoded as base64',
+        'svg encoded as base64'
     ]
 };
 const labels = {
@@ -505,6 +512,12 @@ export const components = {
                     fieldType: 'boolean',
                     value: false,
                     tooltip: 'Hide the details section: the object keys, the clipboard button and the maximise button'
+                },
+                forceJson: {
+                    type: 'static',
+                    fieldType: 'boolean',
+                    value: false,
+                    tooltip: 'Force the result to be displayed as JSON'
                 }
             }
         }
@@ -729,6 +742,65 @@ export const components = {
             }
         }
     },
+    codeinputcomponent: {
+        name: 'Code Input',
+        icon: Code,
+        dims: '2:1-4:4',
+        documentationLink: `${documentationBaseUrl}/code`,
+        customCss: {
+            text: { class: '', style: '' },
+            container: { class: '', style: '' }
+        },
+        initialData: {
+            componentInput: undefined,
+            configuration: {
+                placeholder: {
+                    type: 'static',
+                    value: 'Type...',
+                    fieldType: 'text'
+                },
+                defaultValue: {
+                    type: 'static',
+                    value: undefined,
+                    fieldType: 'text'
+                },
+                lang: {
+                    type: 'static',
+                    fieldType: 'select',
+                    value: 'javascript',
+                    selectOptions: [
+                        'javascript',
+                        'typescript',
+                        'python',
+                        'sql',
+                        'json',
+                        'html',
+                        'css',
+                        'markdown',
+                        'yaml'
+                    ]
+                },
+                disableSuggestions: {
+                    type: 'static',
+                    fieldType: 'boolean',
+                    value: false,
+                    tooltip: 'Disable code completion suggestions'
+                },
+                disableLinting: {
+                    type: 'static',
+                    fieldType: 'boolean',
+                    value: false,
+                    tooltip: 'Disable code validation/linting (keeps only syntax highlighting)'
+                },
+                hideLineNumbers: {
+                    type: 'static',
+                    fieldType: 'boolean',
+                    value: false,
+                    tooltip: 'Hide line numbers in the editor'
+                }
+            }
+        }
+    },
     buttoncomponent: {
         name: 'Button',
         icon: Inspect,
@@ -1167,9 +1239,9 @@ Hello \${ctx.username}
                 type: 'templatev2',
                 fieldType: 'template',
                 eval: `# This is a header
-## This is a subheader				
+## This is a subheader
 This is a paragraph.
-				
+
 * This is a list
 * With two items`,
                 connections: []
@@ -2172,7 +2244,7 @@ This is a paragraph.
                     type: 'static',
                     value: 'yyyy-MM-dd',
                     fieldType: 'text',
-                    markdownTooltip: `### Output format				
+                    markdownTooltip: `### Output format
 See date-fns format for more information. By default, it is 'yyyy-MM-dd'
 
 | Format      | Result | Description |
@@ -2186,6 +2258,11 @@ See date-fns format for more information. By default, it is 'yyyy-MM-dd'
 `,
                     documentationLink: 'https://date-fns.org/v2.30.0/docs/format',
                     placeholder: 'yyyy-MM-dd'
+                },
+                disabled: {
+                    type: 'static',
+                    value: false,
+                    fieldType: 'boolean'
                 }
             }
         }
@@ -2226,7 +2303,7 @@ See date-fns format for more information. By default, it is 'yyyy-MM-dd'
                     fieldType: 'text',
                     documentationLink: 'https://date-fns.org/v2.30.0/docs/format',
                     placeholder: 'dd.MM.yyyy HH:mm',
-                    markdownTooltip: `### Output format				
+                    markdownTooltip: `### Output format
 See date-fns format for more information. By default, it is 'dd.MM.yyyy HH:mm'
 
 | Format      | Result | Description |
@@ -2380,7 +2457,11 @@ See date-fns format for more information. By default, it is 'dd.MM.yyyy HH:mm'
                 type: 'static',
                 fieldType: 'array',
                 subFieldType: 'object',
-                value: [{ header: 'First', foo: 1 }, { header: 'Second', foo: 2 }, { header: 'Third', foo: 3 }]
+                value: [
+                    { header: 'First', foo: 1 },
+                    { header: 'Second', foo: 2 },
+                    { header: 'Third', foo: 3 }
+                ]
             },
             numberOfSubgrids: 1
         }
@@ -2548,12 +2629,16 @@ See date-fns format for more information. By default, it is 'dd.MM.yyyy HH:mm'
                     fileUpload: {
                         accept: 'image/*',
                         convertTo: 'base64'
+                    },
+                    fileUploadS3: {
+                        accept: 'image/*',
+                        convertTo: 'base64'
                     }
                 },
                 sourceKind: {
                     fieldType: 'select',
                     type: 'static',
-                    selectOptions: selectOptions.imageSourceKind,
+                    selectOptions: selectOptions.imageSourceKindWithS3,
                     value: 'url'
                 },
                 imageFit: {
@@ -2758,7 +2843,8 @@ See date-fns format for more information. By default, it is 'dd.MM.yyyy HH:mm'
         customCss: {
             button: { class: '', style: '' },
             buttonContainer: { class: '', style: '' },
-            popup: { class: '', style: '' }
+            popup: { class: '', style: '' },
+            container: { class: '', style: '' }
         },
         initialData: {
             horizontalAlignment: 'center',
@@ -3597,6 +3683,12 @@ See date-fns format for more information. By default, it is 'dd.MM.yyyy HH:mm'
                     fieldType: 'boolean',
                     value: false,
                     tooltip: 'Hide the details section: the object keys, the clipboard button and the maximise button'
+                },
+                forceJson: {
+                    type: 'static',
+                    fieldType: 'boolean',
+                    value: false,
+                    tooltip: 'Force the result to be displayed as JSON'
                 }
             }
         }

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

@@ -32,6 +32,7 @@ const inputs = {
     components: [
         'schemaformcomponent',
         'textinputcomponent',
+        'codeinputcomponent',
         'textareainputcomponent',
         'quillcomponent',
         'passwordinputcomponent',

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

@@ -1,4 +1,4 @@
-<script>import { getContext, tick } from 'svelte';
+<script lang="ts">import { getContext, tick } from 'svelte';
 import { components as componentsRecord, presets as presetsRecord, COMPONENT_SETS, DEPRECATED_COMPONENTS, processDimension } from '../component';
 import ListItem from './ListItem.svelte';
 import { appComponentFromType, copyComponent, insertNewGridItem, setUpTopBarComponentContent } from '../appUtils';
@@ -85,14 +85,7 @@ async function addCustomComponent(cc) {
 function addPresetComponent(appComponentType) {
     const preset = presetsRecord[appComponentType];
     push(history, $app);
-    const id = insertNewGridItem($app, appComponentFromType(preset.targetComponent, preset.configuration, undefined, {
-        customCss: {
-            container: {
-                class: '!p-0',
-                style: ''
-            }
-        }
-    }), $focusedGrid, undefined, undefined, { x: 0, y: 0 }, {
+    const id = insertNewGridItem($app, appComponentFromType(preset.targetComponent, preset.configuration, undefined), $focusedGrid, undefined, undefined, { x: 0, y: 0 }, {
         3: processDimension(preset.dims, 3),
         12: processDimension(preset.dims, 12)
     });

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

@@ -1,14 +1,18 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    slots: {};
-};
-export type ComponentListProps = typeof __propDef.props;
-export type ComponentListEvents = typeof __propDef.events;
-export type ComponentListSlots = typeof __propDef.slots;
-export default class ComponentList extends SvelteComponent<ComponentListProps, ComponentListEvents, ComponentListSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const ComponentList: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ComponentList = InstanceType<typeof ComponentList>;
+export default ComponentList;

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

@@ -1,4 +1,4 @@
-<script>import { getContext } from 'svelte';
+<script lang="ts">import { getContext } from 'svelte';
 import InputsSpecEditor from '../settingsPanel/InputsSpecEditor.svelte';
 export let evalClass;
 export let key;

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

@@ -1,18 +1,22 @@
-import { SvelteComponent } from "svelte";
 import type { RichConfiguration } from '../../types';
-declare const __propDef: {
-    props: {
-        evalClass: RichConfiguration;
-        key: string;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type CssEvalProps = typeof __propDef.props;
-export type CssEvalEvents = typeof __propDef.events;
-export type CssEvalSlots = typeof __propDef.slots;
-export default class CssEval extends SvelteComponent<CssEvalProps, CssEvalEvents, CssEvalSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const CssEval: $$__sveltets_2_IsomorphicComponent<{
+    evalClass: RichConfiguration;
+    key: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type CssEval = InstanceType<typeof CssEval>;
+export default CssEval;

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

@@ -1,4 +1,4 @@
-<script>import { getContext } from 'svelte';
+<script lang="ts">import { getContext } from 'svelte';
 import { LayoutDashboardIcon, ArrowUpSquare, ExternalLink, TextCursorInput } from 'lucide-svelte';
 import { Badge, Button, ClearableInput, Tab, TabContent, Tabs } from '../../../common';
 import ListItem from './ListItem.svelte';
@@ -13,12 +13,26 @@ const STATIC_ELEMENTS = ['app'];
 const TITLE_PREFIX = 'Css.';
 const dispatch = createEventDispatcher();
 const { app } = getContext('AppViewerContext');
+const descriptions = {
+    buttoncomponent: 'The button component also has additional color specific classes to allow customizing classes by color. wm-button-wrapper-blue, wm-button-container-blue, ...'
+};
 const entries = [
+    {
+        name: 'Dark Mode',
+        icon: LayoutDashboardIcon,
+        description: 'When in dark mode, the entire document has the .dark class applied to it. You can apply selective styling by using the .dark class: e.g. .dark .my-element { color: white; }',
+        order: 3
+    },
     {
         type: 'app',
         name: 'App',
         icon: LayoutDashboardIcon,
-        ids: ['viewer', 'grid', 'component'].map((id) => ({ id, forceStyle: true, forceClass: true }))
+        ids: ['viewer', 'grid', 'component'].map((id) => ({
+            id,
+            forceStyle: true,
+            forceClass: true
+        })),
+        order: 2
     },
     {
         type: 'quillcomponent',
@@ -36,10 +50,11 @@ const entries = [
             id,
             forceStyle: v?.style != undefined,
             forceClass: v?.['class'] != undefined
-        }))
+        })),
+        description: descriptions[type]
     }))
 ];
-entries.sort((a, b) => a.name.localeCompare(b.name));
+entries.sort((a, b) => (b.order ?? 0) - (a.order ?? 0) + a.name.localeCompare(b.name));
 let search = '';
 </script>
 
@@ -49,15 +64,15 @@ 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 + type)}
-		{#if ids.length > 0}
+					.includes(search.toLowerCase())) : entries as { type, name, icon, ids, description } (name + type)}
+		{#if description || (ids && ids.length > 0)}
 			<ListItem
 				title={name}
 				prefix={TITLE_PREFIX}
 				on:open={(e) => {
 					if ($app.css != undefined) {
-						if (e.detail && $app.css[type] == undefined) {
-							$app.css[type] = Object.fromEntries(ids.map(({ id }) => [id, {}]))
+						if (type && e.detail && $app.css[type] == undefined) {
+							$app.css[type] = Object.fromEntries((ids ?? []).map(({ id }) => [id, {}]))
 						}
 					}
 				}}
@@ -68,115 +83,120 @@ let search = '';
 						{name}
 					</span>
 				</div>
-				<div class="py-2">
-					{#each customisationByComponent.filter( (c) => c.components.includes(type) ) as customisation (customisation.components.join('-'))}
-						{#if customisation.link}
-							<a
-								href={customisation.link}
-								target="_blank"
-								class="text-frost-500 dark:text-frost-300 font-semibold text-xs"
-							>
-								<div class="flex flex-row gap-2">
-									See documentation
-									<ExternalLink size="16" />
-								</div>
-							</a>
-						{/if}
-
-						<Tabs selected="selectors">
-							{#if customisation.selectors.length > 0}
-								<Tab value="selectors" size="xs">
-									Selectors ({customisation.selectors.length})
-								</Tab>
-							{/if}
-							{#if customisation.variables.length > 0}
-								<Tab value="variables" size="xs">
-									<div class="flex flex-row gap-2 justify-center-center items-center">
-										Variables ({customisation.variables.length})
+				{#if description}
+					<div class="py-2 text-xs text-gray-500">{description}</div>
+				{/if}
+				{#if type}
+					<div class="py-2">
+						{#each customisationByComponent.filter( (c) => c.components.includes(type) ) as customisation (customisation.components.join('-'))}
+							{#if customisation.link}
+								<a
+									href={customisation.link}
+									target="_blank"
+									class="text-frost-500 dark:text-frost-300 font-semibold text-xs"
+								>
+									<div class="flex flex-row gap-2">
+										See documentation
+										<ExternalLink size="16" />
 									</div>
-								</Tab>
+								</a>
 							{/if}
-							<div slot="content" class="h-full">
-								<TabContent value="selectors" class="h-full mt-2 ">
-									<DataTable size="sm">
-										<Head>
-											<tr>
-												<Cell head first>Selector</Cell>
-												<Cell head>Comment</Cell>
-												<Cell head last />
-											</tr>
-										</Head>
-										{#each customisation.selectors as { selector, comment }}
-											<Row>
-												<Cell first>
-													<Badge color="gray">{selector}</Badge>
-												</Cell>
-												<Cell>
-													{#if comment}
-														<div class="max-w-24 whitespace-pre-wrap">{comment}</div>
-													{/if}
-												</Cell>
-												<Cell>
-													<Button
-														size="xs2"
-														color="light"
-														on:click={() => {
-															dispatch('insertSelector', `${selector} {}`)
-														}}
-													>
-														<ArrowUpSquare size={16} />
-													</Button>
-												</Cell>
-											</Row>
-										{/each}
-									</DataTable>
-								</TabContent>
-								<TabContent value="variables" class="h-full mt-2">
-									<DataTable>
-										<Head>
-											<tr>
-												<Cell head first>Variable</Cell>
-												<Cell head>Default value</Cell>
-												<Cell head>Comment</Cell>
-												<Cell head last />
-											</tr>
-										</Head>
-										{#each customisation.variables as { variable, value, comment }}
-											<Row>
-												<Cell first>
-													<Badge color="gray">{variable}</Badge>
-												</Cell>
-												<Cell>
-													<Badge color="gray">{value}</Badge>
-												</Cell>
-												<Cell>
-													{#if comment}
-														<div class="w-80 whitespace-pre-wrap">{comment}</div>
-													{/if}
-												</Cell>
-												<Cell sticky>
-													<Button
-														size="xs2"
-														color="light"
-														on:click={() => {
-															dispatch(
-																'insertSelector',
-																`${customisation.root} { ${variable}: ${value};}`
-															)
-														}}
-														wrapperClasses="px-2 py-3.5 bg-surface"
-													>
-														<ArrowUpSquare size={16} />
-													</Button>
-												</Cell>
-											</Row>
-										{/each}
-									</DataTable>
-								</TabContent>
-							</div>
-						</Tabs>
-					{/each}
-				</div>
+
+							<Tabs selected="selectors">
+								{#if customisation.selectors.length > 0}
+									<Tab value="selectors" size="xs">
+										Selectors ({customisation.selectors.length})
+									</Tab>
+								{/if}
+								{#if customisation.variables.length > 0}
+									<Tab value="variables" size="xs">
+										<div class="flex flex-row gap-2 justify-center-center items-center">
+											Variables ({customisation.variables.length})
+										</div>
+									</Tab>
+								{/if}
+								<div slot="content" class="h-full">
+									<TabContent value="selectors" class="h-full mt-2 ">
+										<DataTable size="sm">
+											<Head>
+												<tr>
+													<Cell head first>Selector</Cell>
+													<Cell head>Comment</Cell>
+													<Cell head last />
+												</tr>
+											</Head>
+											{#each customisation.selectors as { selector, comment }}
+												<Row>
+													<Cell first>
+														<Badge color="gray">{selector}</Badge>
+													</Cell>
+													<Cell>
+														{#if comment}
+															<div class="max-w-24 whitespace-pre-wrap">{comment}</div>
+														{/if}
+													</Cell>
+													<Cell>
+														<Button
+															size="xs2"
+															color="light"
+															on:click={() => {
+																dispatch('insertSelector', `${selector} {}`)
+															}}
+														>
+															<ArrowUpSquare size={16} />
+														</Button>
+													</Cell>
+												</Row>
+											{/each}
+										</DataTable>
+									</TabContent>
+									<TabContent value="variables" class="h-full mt-2">
+										<DataTable>
+											<Head>
+												<tr>
+													<Cell head first>Variable</Cell>
+													<Cell head>Default value</Cell>
+													<Cell head>Comment</Cell>
+													<Cell head last />
+												</tr>
+											</Head>
+											{#each customisation.variables as { variable, value, comment }}
+												<Row>
+													<Cell first>
+														<Badge color="gray">{variable}</Badge>
+													</Cell>
+													<Cell>
+														<Badge color="gray">{value}</Badge>
+													</Cell>
+													<Cell>
+														{#if comment}
+															<div class="w-80 whitespace-pre-wrap">{comment}</div>
+														{/if}
+													</Cell>
+													<Cell sticky>
+														<Button
+															size="xs2"
+															color="light"
+															on:click={() => {
+																dispatch(
+																	'insertSelector',
+																	`${customisation.root} { ${variable}: ${value};}`
+																)
+															}}
+															wrapperClasses="px-2 py-3.5 bg-surface"
+														>
+															<ArrowUpSquare size={16} />
+														</Button>
+													</Cell>
+												</Row>
+											{/each}
+										</DataTable>
+									</TabContent>
+								</div>
+							</Tabs>
+						{/each}
+					</div>
+				{/if}
 			</ListItem>
 		{/if}
 	{/each}

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

@@ -1,16 +1,20 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        insertSelector: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    slots: {};
-};
-export type CssHelperPanelProps = typeof __propDef.props;
-export type CssHelperPanelEvents = typeof __propDef.events;
-export type CssHelperPanelSlots = typeof __propDef.slots;
-export default class CssHelperPanel extends SvelteComponent<CssHelperPanelProps, CssHelperPanelEvents, CssHelperPanelSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const CssHelperPanel: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    insertSelector: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type CssHelperPanel = InstanceType<typeof CssHelperPanel>;
+export default CssHelperPanel;

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

@@ -1,4 +1,4 @@
-<script>import { Code, Copy, MoveLeft, MoveRight, Paintbrush2 } from 'lucide-svelte';
+<script lang="ts">import { Code, Copy, MoveLeft, MoveRight, Paintbrush2 } from 'lucide-svelte';
 import { createEventDispatcher } from 'svelte';
 import { slide } from 'svelte/transition';
 import { addWhitespaceBeforeCapitals, copyToClipboard, sendUserToast } from '../../../../utils';
@@ -15,6 +15,7 @@ import ToggleButtonGroup from '../../../common/toggleButton-v2/ToggleButtonGroup
 import ToggleButton from '../../../common/toggleButton-v2/ToggleButton.svelte';
 import Popover from '../../../Popover.svelte';
 import { tailwindClasses } from './tailwindUtils';
+import { createDispatcherIfMounted } from '../../../../createDispatcherIfMounted';
 export let name;
 export let value = {};
 export let forceStyle = false;
@@ -28,8 +29,9 @@ export let overriden = false;
 export let overridding = false;
 export let wmClass = undefined;
 const dispatch = createEventDispatcher();
+const dispatchIfMounted = createDispatcherIfMounted(dispatch);
 let isQuickMenuOpen = false;
-$: dispatch('change', value);
+$: dispatchIfMounted('change', value);
 function toggleQuickMenu() {
     try {
         if (!value.style) {