windmill-components 1.82.0 → 1.82.2

package/components/Multiselect.svelte.d.ts

@@ -4,8 +4,8 @@
 export default class Multiselect extends SvelteComponentTyped<{
     value?: any[] | undefined;
     id?: string | undefined;
-    readonly?: boolean | undefined;
     placeholder?: string | undefined;
+    readonly?: boolean | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -20,8 +20,8 @@ declare const __propDef: {
     props: {
         value?: any[] | undefined;
         id?: string | undefined;
-        readonly?: boolean | undefined;
         placeholder?: string | undefined;
+        readonly?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/apps/components/buttons/AppFormButton.svelte

@@ -3,14 +3,12 @@ import { faUser } from '@fortawesome/free-solid-svg-icons';
 import { getContext } from 'svelte';
 import { Icon } from 'svelte-awesome';
 import AlignWrapper from '../helpers/AlignWrapper.svelte';
-import InputValue from '../helpers/InputValue.svelte';
 import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
-import Portal from 'svelte-portal';
-import Modal from '../../../common/modal/Modal.svelte';
 import { concatCustomCss } from '../../utils';
 import { initConfig, initOutput } from '../../editor/appUtils';
 import { components } from '../../editor/component';
 import ResolveConfig from '../helpers/ResolveConfig.svelte';
+import AlwaysMountedModal, { getModal } from '../../../common/modal/AlwaysMountedModal.svelte';
 export let id;
 export let componentInput;
 export let configuration;
@@ -30,7 +28,6 @@ let runnableComponent;
 let isLoading = false;
 let ownClick = false;
 let errors = {};
-let open = false;
 $: errorsMessage = Object.values(errors)
     .filter((x) => x != '')
     .join('\n');
@@ -62,73 +59,64 @@ let runnableWrapper;
 	/>
 {/each}
 
-<Portal>
-	<Modal
-		{open}
-		title={resolvedConfig.label ?? ''}
-		class={css?.popup?.class}
-		style={css?.popup?.style}
-		on:canceled={() => {
-			open = false
-		}}
-		on:confirmed={() => {
-			open = false
-		}}
+<AlwaysMountedModal
+	title={resolvedConfig.label ?? ''}
+	class={css?.popup?.class}
+	style={css?.popup?.style}
+>
+	<RunnableWrapper
+		bind:this={runnableWrapper}
+		{recomputeIds}
+		{render}
+		bind:runnableComponent
+		{componentInput}
+		{id}
+		{extraQueryParams}
+		autoRefresh={false}
+		forceSchemaDisplay={true}
+		runnableClass="!block"
+		{outputs}
+		doOnSuccess={resolvedConfig.onSuccess}
 	>
-		<RunnableWrapper
-			bind:this={runnableWrapper}
-			{recomputeIds}
-			{render}
-			bind:runnableComponent
-			{componentInput}
-			{id}
-			{extraQueryParams}
-			autoRefresh={false}
-			forceSchemaDisplay={true}
-			runnableClass="!block"
-			{outputs}
-			doOnSuccess={resolvedConfig.onSuccess}
-		>
-			<div class="flex flex-col gap-2 px-4 w-full">
-				<div>
-					{#if noInputs}
-						<div class="text-gray-600 italic text-sm my-4">
-							Run forms are associated with a runnable that has user inputs.
-							<br />
-							Once a script or flow is chosen, set some <strong>Runnable Inputs</strong> to
-							<strong>
-								User Input
-								<Icon data={faUser} scale={1.3} class="rounded-sm bg-gray-200 p-1 ml-0.5" />
-							</strong>
-						</div>
-					{/if}
-				</div>
-				<div class="flex justify-end">
-					<Button
-						{loading}
-						btnClasses="my-1"
-						on:pointerdown={(e) => {
-							e?.stopPropagation()
-							window.dispatchEvent(new Event('pointerup'))
-						}}
-						on:click={async () => {
-							if (!runnableComponent) {
-								runnableWrapper.onSuccess()
-							} else {
-								await runnableComponent?.runComponent()
-							}
-							open = false
-						}}
-						size="xs"
-						color="dark"
-					>
-						Submit
-					</Button>
-				</div>
+		<div class="flex flex-col gap-2 px-4 w-full">
+			<div>
+				{#if noInputs}
+					<div class="text-gray-600 italic text-sm my-4">
+						Run forms are associated with a runnable that has user inputs.
+						<br />
+						Once a script or flow is chosen, set some <strong>Runnable Inputs</strong> to
+						<strong>
+							User Input
+							<Icon data={faUser} scale={1.3} class="rounded-sm bg-gray-200 p-1 ml-0.5" />
+						</strong>
+					</div>
+				{/if}
+			</div>
+			<div class="flex justify-end">
+				<Button
+					{loading}
+					btnClasses="my-1"
+					on:pointerdown={(e) => {
+						e?.stopPropagation()
+						window.dispatchEvent(new Event('pointerup'))
+					}}
+					on:click={async () => {
+						if (!runnableComponent) {
+							runnableWrapper.onSuccess()
+						} else {
+							await runnableComponent?.runComponent()
+						}
+						getModal().close()
+					}}
+					size="xs"
+					color="dark"
+				>
+					Submit
+				</Button>
 			</div>
-		</RunnableWrapper>
-	</Modal>
-</Portal>
+		</div>
+	</RunnableWrapper>
+</AlwaysMountedModal>
 
 <AlignWrapper {horizontalAlignment} {verticalAlignment}>
 	{#if errorsMessage}
@@ -141,7 +129,7 @@ let runnableWrapper;
 		btnClasses={css?.button?.class ?? ''}
 		style={css?.button?.style ?? ''}
 		on:click={(e) => {
-			open = true
+			getModal().open()
 		}}
 	>
 		{resolvedConfig.label}

package/components/apps/editor/AppEditor.svelte

@@ -10,8 +10,7 @@ import Tabs from '../../common/tabs/Tabs.svelte';
 import TabContent from '../../common/tabs/TabContent.svelte';
 import { Alert, Button, Tab } from '../../common';
 import ComponentList from './componentsPanel/ComponentList.svelte';
-import Icon from 'svelte-awesome';
-import { faCode, faPlus, faSliders } from '@fortawesome/free-solid-svg-icons';
+import { faPlus } from '@fortawesome/free-solid-svg-icons';
 import ContextPanel from './contextPanel/ContextPanel.svelte';
 import { classNames, encodeState } from '../../../utils';
 import AppPreview from './AppPreview.svelte';
@@ -26,6 +25,8 @@ import { initHistory } from '../../../history';
 import ComponentNavigation from './component/ComponentNavigation.svelte';
 import ItemPicker from '../../ItemPicker.svelte';
 import VariableEditor from '../../VariableEditor.svelte';
+import { SecondaryMenu } from './settingsPanel/secondaryMenu';
+import { Component, Paintbrush, Plus } from 'lucide-svelte';
 export let app;
 export let path;
 export let initialMode = 'dnd';
@@ -160,7 +161,7 @@ let variableEditor = undefined;
 					<Pane size={15} minSize={5} maxSize={33}>
 						<ContextPanel />
 					</Pane>
-					<Pane size={64}>
+					<Pane size={63}>
 						<SplitPanesWrapper>
 							<Splitpanes horizontal>
 								<Pane size={70}>
@@ -201,31 +202,32 @@ let variableEditor = undefined;
 							</Splitpanes>
 						</SplitPanesWrapper>
 					</Pane>
-					<Pane size={21} minSize={5} maxSize={33}>
+					<Pane size={22} minSize={5} maxSize={33}>
 						<div class="relative flex flex-col h-full">
 							<Tabs bind:selected={selectedTab} wrapperClass="!h-[40px]" class="!h-full">
 								<Tab value="insert" size="xs">
-									<div class="m-1 center-center gap-2">
-										<Icon data={faPlus} />
+									<div class="m-1 center-center gap-1">
+										<Plus size={18} />
 										<span>Insert</span>
 									</div>
 								</Tab>
 								<Tab value="settings" size="xs">
-									<div class="m-1 center-center gap-2">
-										<Icon data={faSliders} />
-										<span>Settings</span>
+									<div class="m-1 center-center gap-1">
+										<Component size={18} />
+										<span>Component</span>
 									</div>
 								</Tab>
 								<Tab value="css" size="xs">
-									<div class="m-1 center-center gap-2">
-										<Icon data={faCode} />
-										<span>CSS</span>
+									<div class="m-1 center-center gap-1">
+										<Paintbrush size={18} />
+										<span>Styling</span>
 									</div>
 								</Tab>
 								<div slot="content" class="h-full overflow-y-auto">
 									<TabContent class="overflow-auto h-full" value="settings">
 										{#if $selectedComponent !== undefined}
 											<SettingsPanel />
+											<SecondaryMenu />
 										{:else}
 											<div class="min-w-[150px] text-sm text-gray-500 text-center py-8 px-2">
 												Select a component to see the settings&nbsp;for&nbsp;it

package/components/apps/editor/AppPreview.svelte

@@ -82,8 +82,7 @@ $: lockedClasses = isLocked ? '!max-h-[400px] overflow-hidden pointer-events-non
 				)}
 			>
 				<div
-					class="w-full sticky top-0 flex justify-between border-b bg-gray-50 px-4 py-1 items-center gap-4"
-					style="z-index: 1000;"
+					class="w-full sticky z-[1001] top-0 flex justify-between border-b bg-gray-50 px-4 py-1 items-center gap-4"
 				>
 					<h2 class="truncate">{summary}</h2>
 					<RecomputeAllComponents />

package/components/apps/editor/component/ComponentNavigation.svelte

@@ -144,7 +144,8 @@ function handlePaste(event) {
 function keydown(event) {
     // Ignore keydown events if the user is typing in monaco
     let classes = event.target?.['className'];
-    if (typeof classes === 'string' && classes.includes('inputarea')) {
+    if ((typeof classes === 'string' && classes.includes('inputarea')) ||
+        ['INPUT', 'TEXTAREA'].includes(document.activeElement?.tagName)) {
         return;
     }
     switch (event.key) {

package/components/apps/editor/component/README.md

@@ -8,6 +8,10 @@
    1. Add the component to one of the component sets: `layout`, `buttons`,
       `inputs` or `display` _(this controls which group the component will be
       placed in in the **Insert** menu)_
+1. [**`quickStyleProperties.ts`**](../componentsPanel/quickStyleProperties.ts):
+   1. Add the component to the `quickStyleProperties` record
+   1. _(optional)_ Add the CSS properties that could be applied to the component
+      parts
 1. [**`Component.svelte`**](./Component.svelte):
    1. Add the new component in the Svelte `if` statement
 1. [**`default-codes.ts`**](./default-codes.ts):

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

@@ -1,67 +1,107 @@
-<script>import { X } from 'lucide-svelte';
+<script>import { Forward, Paintbrush2 } from 'lucide-svelte';
+import { createEventDispatcher, getContext } from 'svelte';
 import { fade } from 'svelte/transition';
-import { addWhitespaceBeforeCapitals } from '../../../../utils';
+import { addWhitespaceBeforeCapitals, sendUserToast } from '../../../../utils';
+import { Button, ClearableInput } from '../../../common';
+import Popover from '../../../Popover.svelte';
+import QuickStyleMenu from './QuickStyleMenu.svelte';
 export let name;
+export let componentType = undefined;
 export let value = {};
 export let forceStyle = false;
 export let forceClass = false;
-function reset(property) {
-    if (value) {
-        value[property] = '';
+export let quickStyleProperties = undefined;
+const { app } = getContext('AppViewerContext');
+const dispatch = createEventDispatcher();
+let isQuickMenuOpen = false;
+$: dispatch('change', value);
+function toggleQuickMenu() {
+    isQuickMenuOpen = !isQuickMenuOpen;
+}
+function applyToAllInstances() {
+    if (componentType &&
+        componentType in ($app?.css || {}) &&
+        name in ($app?.css?.[componentType] || {})) {
+        $app.css[componentType][name].style = value.style;
+        sendUserToast(`Applied style to all instances of the ${componentType.replace('component', '')} component`);
     }
 }
 </script>
 
-<div class="text-sm font-semibold text-gray-500 capitalize pt-2">
+<div
+	class="sticky top-0 z-20 text-lg bg-white font-semibold [font-variant:small-caps] text-gray-700 pt-2 pb-1"
+>
 	{addWhitespaceBeforeCapitals(name)}
 </div>
 {#if value}
-	<div class="border-l border-gray-400/80 py-1 pl-3.5 mt-1 ml-0.5">
+	<div class="border-l border-gray-400/80 py-1 pl-3.5 ml-0.5">
 		{#if value.style !== undefined || forceStyle}
-			<label class="block pb-2">
-				<div class="text-xs font-medium pb-0.5"> Style </div>
-				<div class="relative">
-					<input
-						on:keydown|stopPropagation
-						type="text"
-						class="!pr-7"
-						bind:value={value.style}
-						on:focus
-					/>
-					{#if value?.style}
-						<button
-							transition:fade|local={{ duration: 100 }}
-							class="absolute z-10 top-1.5 right-1 rounded-full p-1 duration-200 hover:bg-gray-200"
-							aria-label="Remove styles"
-							on:click|preventDefault|stopPropagation={() => reset('style')}
-						>
-							<X size={14} />
-						</button>
-					{/if}
-				</div>
-			</label>
+			<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"> Style </div>
+					<div class="flex gap-1">
+						<div class="relative grow">
+							<ClearableInput
+								bind:value={value.style}
+								type="textarea"
+								wrapperClass="h-full min-h-[72px]"
+								inputClass="h-full"
+							/>
+						</div>
+						<div class="flex flex-col gap-1">
+							{#if componentType}
+								<Popover placement="bottom" notClickable disapperTimoout={0}>
+									<Button
+										variant="border"
+										color="light"
+										size="xs"
+										btnClasses="!p-1 !w-[34px] !h-[34px]"
+										aria-label="Apply to all instances of this component"
+										on:click={applyToAllInstances}
+									>
+										<Forward size={18} />
+									</Button>
+									<svelte:fragment slot="text">
+										Apply to all instances of this component
+									</svelte:fragment>
+								</Popover>
+							{/if}
+							{#if quickStyleProperties?.length}
+								<Popover placement="bottom" notClickable disapperTimoout={0}>
+									<Button
+										variant="border"
+										color="light"
+										size="xs"
+										btnClasses="!p-1 !w-[34px] !h-[34px] {isQuickMenuOpen
+											? '!bg-gray-200/60 hover:!bg-gray-200'
+											: ''}"
+										aria-label="{isQuickMenuOpen ? 'Close' : 'Open'} styling menu"
+										on:click={toggleQuickMenu}
+									>
+										<Paintbrush2 size={18} />
+									</Button>
+									<svelte:fragment slot="text">
+										{isQuickMenuOpen ? 'Close' : 'Open'} styling menu
+									</svelte:fragment>
+								</Popover>
+							{/if}
+						</div>
+					</div>
+				</label>
+				{#if quickStyleProperties?.length && isQuickMenuOpen}
+					<div transition:fade|local={{ duration: 200 }} class="w-full pt-1">
+						<QuickStyleMenu bind:value={value.style} properties={quickStyleProperties} />
+					</div>
+				{/if}
+			</div>
 		{/if}
 		{#if value.class !== undefined || forceClass}
+			<!-- svelte-ignore a11y-label-has-associated-control -->
 			<label class="block">
-				<div class="text-xs font-medium pb-0.5"> Tailwind classes </div>
+				<div class="text-sm font-medium text-gray-600 pb-0.5"> Tailwind classes </div>
 				<div class="relative">
-					<input
-						on:keydown|stopPropagation
-						type="text"
-						class="!pr-7"
-						bind:value={value.class}
-						on:focus
-					/>
-					{#if value?.class}
-						<button
-							transition:fade|local={{ duration: 100 }}
-							class="absolute z-10 top-1.5 right-1 rounded-full p-1 duration-200 hover:bg-gray-200"
-							aria-label="Remove classes"
-							on:click|preventDefault|stopPropagation={() => reset('class')}
-						>
-							<X size={14} />
-						</button>
-					{/if}
+					<ClearableInput bind:value={value.class} />
 				</div>
 			</label>
 		{/if}

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

@@ -1,15 +1,18 @@
 import { SvelteComponentTyped } from "svelte";
 import type { ComponentCssProperty } from '../../types';
+import type { AppComponent } from '../component/components';
+import type { StylePropertyKey } from './quickStyleProperties';
 declare const __propDef: {
     props: {
         name: string;
+        componentType?: AppComponent['type'] | undefined;
         value?: ComponentCssProperty | undefined;
         forceStyle?: boolean | undefined;
         forceClass?: boolean | undefined;
+        quickStyleProperties?: StylePropertyKey[] | undefined;
     };
     events: {
-        keydown: KeyboardEvent;
-        focus: FocusEvent;
+        change: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

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

@@ -0,0 +1,167 @@
+<script>import { getContext, onMount, setContext } from 'svelte';
+import parse from 'style-to-object';
+import { isValidHexColor } from '../../../../utils';
+import { createStyleStore, StylePropertyType, StylePropertyUnits, STYLE_STORE_KEY } from './quickStyleProperties';
+import QuickStyleProperty from './QuickStyleProperty.svelte';
+export let value = '';
+export let properties;
+const { app } = getContext('AppViewerContext');
+const styleStore = createStyleStore(properties);
+setContext(STYLE_STORE_KEY, styleStore);
+let multiValues = initiateMultiValues();
+let mounted = false;
+$: mounted && $styleStore && writeStyle();
+$: mounted && (!value || value) && parseStyle();
+$: $app && setTopColors();
+function parseStyle() {
+    styleStore.resetStyle();
+    if (!value) {
+        multiValues = initiateMultiValues();
+        return;
+    }
+    const current = parse(value) || {};
+    Object.entries(current).forEach(([k, v]) => {
+        styleStore.updatePropValue(k, v);
+        const { prop, index } = styleStore.getProp(k);
+        if (Array.isArray(prop?.prop?.value) && index !== undefined) {
+            const valueArray = v.split(' ');
+            multiValues[index] = multiValues[index].map((v, i) => valueArray[i] || v);
+        }
+    });
+    setTopColors();
+}
+function writeStyle() {
+    const current = parse(value) || {};
+    $styleStore.style.forEach((s) => {
+        current[s.prop.key] = convertValue(s.value);
+    });
+    const entries = Object.entries(current);
+    value = entries.reduce((style, [k, v]) => {
+        return v ? `${style} ${k}: ${v}; `.trim() : style;
+    }, '');
+}
+function convertValue(value) {
+    switch (typeof value) {
+        case 'number':
+            return value + '';
+        case 'string':
+            return value;
+        default:
+            return '';
+    }
+}
+function setTopColors() {
+    const styles = collectStyles();
+    const parsedStyles = styles.map((style) => parse(style) || {});
+    const usedColors = {};
+    parsedStyles.forEach((style) => {
+        Object.values(style).reduce((colors, v) => {
+            // TODO: support RGB and HSL colors as well
+            // Splitting is needed so colors can be extracted
+            // from values like '1px solid #000000'
+            v.split(' ').forEach((v) => {
+                if (isValidHexColor(v)) {
+                    colors[v] = (colors[v] || 0) + 1;
+                }
+            });
+            return colors;
+        }, usedColors);
+    });
+    const colors = Object.entries(usedColors)
+        .sort((a, b) => b[1] - a[1])
+        .slice(0, 3)
+        .map(([color]) => color);
+    styleStore.setTopColors(colors);
+}
+function collectStyles() {
+    const styles = [];
+    // Getting global app styles
+    Object.values($app.css || {}).forEach((element) => {
+        Object.values(element).filter(({ style }) => style && styles.push(style));
+    });
+    // Getting styles from individual components
+    $app.grid.map((component) => {
+        Object.values(component.data.customCss || {}).forEach(({ style }) => {
+            style && styles.push(style);
+        });
+    });
+    // Getting style from subgrids
+    Object.values($app.subgrids || {}).forEach((grid) => {
+        grid.map((component) => {
+            Object.values(component.data.customCss || {}).forEach(({ style }) => {
+                style && styles.push(style);
+            });
+        });
+    });
+    return styles;
+}
+function initiateMultiValues() {
+    return $styleStore.style.reduce((acc, curr, i) => {
+        if (Array.isArray(curr.prop.value)) {
+            acc[i] = Array.from({ length: curr.prop.value.length }, () => {
+                return '';
+            });
+        }
+        return acc;
+    }, {});
+}
+function setMultiValueProperty(index) {
+    if (multiValues[index].every((v) => !v || +v === 0 || StylePropertyUnits.includes(v))) {
+        $styleStore.style[index].value = '';
+        return;
+    }
+    const values = multiValues[index].map((v, i) => {
+        v = StylePropertyUnits.includes(v) ? '' : v;
+        const type = $styleStore.style[index].prop.value[i].type;
+        if (v) {
+            multiValues[index][i] = v;
+            return v;
+        }
+        else if (type === StylePropertyType.color) {
+            return '#000000';
+        }
+        else if (type === StylePropertyType.number) {
+            return 0;
+        }
+        else if (type === StylePropertyType.unit) {
+            return 0;
+        }
+        else if (type === StylePropertyType.text) {
+            const options = $styleStore.style[index].prop.value[i].options;
+            return options ? options[0].text : '';
+        }
+        else {
+            return '';
+        }
+    });
+    $styleStore.style[index].value = values.join(' ').trim();
+}
+onMount(() => {
+    parseStyle();
+    mounted = true;
+});
+</script>
+
+<div class="bg-gray-200/60 rounded-md p-2">
+	{#each $styleStore.style as { prop }, index}
+		<div class="pb-3 last:pb-0">
+			<div class="text-sm font-medium text-gray-600 pb-0.5"> {prop.key} </div>
+			<div class="flex items-center gap-1 w-full">
+				{#if Array.isArray(prop.value)}
+					<div class="flex justify-start items-center flex-wrap gap-x-4 gap-y-1">
+						{#each prop.value as value, i}
+							<QuickStyleProperty
+								prop={{ ...prop, value }}
+								inline
+								bind:value={multiValues[index][i]}
+								on:change={() => setMultiValueProperty(index)}
+							/>
+						{/each}
+					</div>
+				{:else}
+					<QuickStyleProperty {prop} bind:value={$styleStore.style[index].value} />
+				{/if}
+			</div>
+		</div>
+	{/each}
+</div>

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

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+import { type StylePropertyKey } from './quickStyleProperties';
+declare const __propDef: {
+    props: {
+        value?: string | undefined;
+        properties: StylePropertyKey[];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type QuickStyleMenuProps = typeof __propDef.props;
+export type QuickStyleMenuEvents = typeof __propDef.events;
+export type QuickStyleMenuSlots = typeof __propDef.slots;
+export default class QuickStyleMenu extends SvelteComponentTyped<QuickStyleMenuProps, QuickStyleMenuEvents, QuickStyleMenuSlots> {
+}
+export {};