windmill-components 1.79.0 → 1.82.1

package/components/apps/editor/component/default-codes.d.ts

@@ -1,3 +1,3 @@
-import type { AppComponent } from ".";
+import type { AppComponent } from '.';
 export declare function defaultCode(component: string, language: string): string | undefined;
 export declare const DEFAULT_CODES: Partial<Record<AppComponent['type'], Record<'deno' | 'python3', string>>>;

package/components/apps/editor/component/default-codes.js

@@ -4,32 +4,32 @@ export function defaultCode(component, language) {
 export const DEFAULT_CODES = {
     tablecomponent: {
         deno: `export async function main() {
-return [
-	{
-		"id": 1,
-		"name": "A cell with a long name",
-		"age": 42
-	},
-	{
-		"id": 2,
-		"name": "A briefer cell",
-		"age": 84
-	}
-]
-}`,
+	return [
+		{
+			"id": 1,
+			"name": "A cell with a long name",
+			"age": 42
+		},
+		{
+			"id": 2,
+			"name": "A briefer cell",
+			"age": 84
+		}
+	]
+	}`,
         python3: `def main():
-return [
-	{
-		"id": 1,
-		"name": "A cell with a long name",
-		"age": 42
-	},
-	{
-		"id": 2,
-		"name": "A briefer cell",
-		"age": 84
-	}
-]`
+	return [
+		{
+			"id": 1,
+			"name": "A cell with a long name",
+			"age": 42
+		},
+		{
+			"id": 2,
+			"name": "A briefer cell",
+			"age": 84
+		}
+	]`
     },
     textcomponent: {
         deno: `export async function main() {

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

@@ -3,7 +3,7 @@ import { fade, slide } from 'svelte/transition';
 import { dirtyStore } from '../../../common/confirmationModal/dirtyStore';
 import { components as componentsRecord, COMPONENT_SETS } from '../component';
 import ListItem from './ListItem.svelte';
-import { insertNewGridItem } from '../appUtils';
+import { appComponentFromType, insertNewGridItem } from '../appUtils';
 import { X } from 'lucide-svelte';
 import { push } from '../../../../history';
 import { flip } from 'svelte/animate';
@@ -12,9 +12,9 @@ const { history } = getContext('AppEditorContext');
 function addComponent(appComponentType) {
     push(history, $app);
     $dirtyStore = true;
-    const data = componentsRecord[appComponentType].data;
-    const id = insertNewGridItem($app, data, $focusedGrid);
+    const id = insertNewGridItem($app, appComponentFromType(appComponentType), $focusedGrid);
     $selectedComponent = id;
+    $app = $app;
     $worldStore = $worldStore;
 }
 let search = '';
@@ -44,6 +44,21 @@ $: componentsFiltered = COMPONENT_SETS.map((set) => ({
 			</button>
 		{/if}
 	</div>
+	<!-- {#if $focusedGrid}
+		<Badge color="indigo" baseClass="w-full">
+			<div class="flex flex-row gap-2 justify-center items-center">
+				<div>{`Subgrid: ${$focusedGrid.parentComponentId} (${$focusedGrid.subGridIndex})`}</div>
+				<button
+					on:click={() => {
+						$selectedComponent = undefined
+						$focusedGrid = undefined
+					}}
+				>
+					<X size={14} />
+				</button>
+			</div>
+		</Badge>
+	{/if} -->
 </section>
 
 <div class="relative">

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

@@ -1,65 +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 value;
-function reset(property) {
-    if (value) {
-        value[property] = '';
+export let componentType = undefined;
+export let value = {};
+export let forceStyle = false;
+export let forceClass = false;
+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">
-		{#if value.style !== undefined}
-			<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="border-l border-gray-400/80 py-1 pl-3.5 ml-0.5">
+		{#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"> 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}
+		{#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,13 +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;
-        value: ComponentCssProperty | undefined;
+        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/CssSettings.svelte

@@ -1,16 +1,13 @@
-<script>import { onMount, getContext } from 'svelte';
-import { LayoutDashboardIcon, MousePointer2, CurlyBraces } from 'lucide-svelte';
+<script>import { getContext } from 'svelte';
+import { LayoutDashboardIcon, MousePointer2, CurlyBraces, X } from 'lucide-svelte';
 import SimpleEditor from '../../../SimpleEditor.svelte';
 import { emptyString } from '../../../../utils';
 import { Tab, TabContent, Tabs } from '../../../common';
 import ListItem from './ListItem.svelte';
-import { isOpenStore } from './store';
 import CssProperty from './CssProperty.svelte';
-import { components } from '../component';
-import { slide } from 'svelte/transition';
+import { ccomponents, components } from '../component';
 const STATIC_ELEMENTS = ['app'];
 const TITLE_PREFIX = 'Css.';
-const SHOW_UNUSED_ID = 'Setting.ShowUnused';
 const { app } = getContext('AppViewerContext');
 let rawCode = '';
 let viewJsonSchema = false;
@@ -39,53 +36,21 @@ const entries = [
         type: 'app',
         name: 'App',
         icon: LayoutDashboardIcon,
-        ids: ['viewer', 'grid', 'component']
+        ids: ['viewer', 'grid', 'component'].map((id) => ({ id, forceStyle: true, forceClass: true }))
     },
-    ...Object.values(components).map(({ name, icon, data: { type, customCss } }) => ({
-        type,
+    ...Object.entries(ccomponents).map(([type, { name, icon, customCss }]) => ({
+        type: type,
         name,
         icon,
-        ids: Object.keys(customCss ?? {}) ?? []
+        ids: Object.entries(customCss).map(([id, v]) => ({
+            id,
+            forceStyle: v?.style != undefined,
+            forceClass: v?.['class'] != undefined
+        }))
     }))
 ];
-let isCustom = Object.fromEntries(Object.keys(entries).map((k) => [k, false]));
-let newCss = $app.css ?? {};
-entries.forEach((e) => {
-    if (!newCss[e.type]) {
-        isCustom[e.type] = true;
-        newCss[e.type] = {};
-    }
-    e.ids.forEach((id) => {
-        if (!newCss[e.type][id]) {
-            newCss[e.type][id] = components?.[e.type]?.data?.customCss?.[id] ?? { class: '', style: '' };
-        }
-    });
-    e.ids
-        .map((id) => newCss[e.type][id].class != '' || newCss[e.type][id].style != '')
-        .forEach((c) => {
-        if (c) {
-            isCustom[e.type] = true;
-        }
-    });
-});
-//@ts-ignore
-$app.css = newCss;
-$: staticComponents = entries.filter(({ type }) => STATIC_ELEMENTS.includes(type));
-$: usedComponents = Object.keys($app.grid.reduce((acc, { data }) => {
-    acc[data.type] = true;
-    return acc;
-}, {}))
-    .map((type) => entries.find((entry) => entry.type === type))
-    .filter(Boolean);
-$: unusedComponents = entries.filter(({ type }) => {
-    return (!STATIC_ELEMENTS.includes(type) && !usedComponents.find((entry) => entry.type === type));
-});
-onMount(() => {
-    isOpenStore.addItems([{ name: 'App' }, ...Object.values(components)].map((component) => {
-        return { [TITLE_PREFIX + component.name]: false };
-    }));
-    isOpenStore.addItems([{ [SHOW_UNUSED_ID]: false }]);
-});
+entries.sort((a, b) => a.name.localeCompare(b.name));
+let search = '';
 </script>
 
 <Tabs selected="ui" on:selected={(e) => switchTab(e.detail === 'json')} class="relative">
@@ -103,9 +68,38 @@ onMount(() => {
 	</Tab>
 	<div slot="content" class="h-full overflow-y-auto">
 		<TabContent value="ui">
-			{#each [...staticComponents, ...usedComponents] as { type, name, icon, ids }}
+			<div class="sticky top-0 left-0 w-full bg-white p-2">
+				<div class="relative">
+					<input
+						bind:value={search}
+						class="px-2 pb-1 border border-gray-300 rounded-sm {search ? 'pr-8' : ''}"
+						placeholder="Search..."
+					/>
+					{#if search}
+						<button
+							class="absolute right-2 top-1/2 transform -translate-y-1/2 hover:bg-gray-200 rounded-full p-0.5"
+							on:click|stopPropagation|preventDefault={() => (search = '')}
+						>
+							<X size="14" />
+						</button>
+					{/if}
+				</div>
+			</div>
+			{#each search != '' ? entries.filter((x) => x.name
+							.toLowerCase()
+							.includes(search.toLowerCase())) : entries as { type, name, icon, ids } (name)}
 				{#if ids.length > 0}
-					<ListItem title={name} prefix={TITLE_PREFIX}>
+					<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, {}]))
+								}
+							}
+						}}
+					>
 						<div slot="title" class="flex items-center">
 							<svelte:component this={icon} size={18} />
 							<span class="ml-1">
@@ -113,13 +107,14 @@ onMount(() => {
 							</span>
 						</div>
 						<div class="pb-2">
-							{#each ids as id}
+							{#each ids as { id, forceStyle, forceClass }}
 								<div class="mb-3">
-									{#if $app?.css?.[type][id]}
+									{#if $app?.css?.[type]}
 										<CssProperty
+											{forceClass}
+											{forceStyle}
 											name={id}
 											bind:value={$app.css[type][id]}
-											on:focus={() => (isCustom[type] = true)}
 										/>
 									{/if}
 								</div>
@@ -128,43 +123,6 @@ onMount(() => {
 					</ListItem>
 				{/if}
 			{/each}
-			<div class="px-1 my-4">
-				<button
-					on:click|preventDefault|stopPropagation={() => isOpenStore.toggle(SHOW_UNUSED_ID)}
-					class="w-full text-xs text-gray-500 text-center font-medium hover:underline p-2"
-				>
-					{$isOpenStore[SHOW_UNUSED_ID] ? 'Hide' : 'Show'} unused components
-				</button>
-			</div>
-			{#if $isOpenStore[SHOW_UNUSED_ID]}
-				<div transition:slide|local={{ duration: 300 }}>
-					{#each unusedComponents as { type, name, icon, ids }}
-						{#if ids.length > 0}
-							<ListItem title={name} prefix={TITLE_PREFIX}>
-								<div slot="title" class="flex items-center">
-									<svelte:component this={icon} size={18} />
-									<span class="ml-1">
-										{name}
-									</span>
-								</div>
-								<div class="pb-2">
-									{#each ids as id}
-										<div class="mb-3">
-											{#if $app?.css?.[type][id]}
-												<CssProperty
-													name={id}
-													bind:value={$app.css[type][id]}
-													on:focus={() => (isCustom[type] = true)}
-												/>
-											{/if}
-										</div>
-									{/each}
-								</div>
-							</ListItem>
-						{/if}
-					{/each}
-				</div>
-			{/if}
 		</TabContent>
 		<TabContent value="json">
 			{#if !emptyString(jsonError)}

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

@@ -1,10 +1,13 @@
 <script>import { slide } from 'svelte/transition';
 import { ChevronDown } from 'lucide-svelte';
 import { isOpenStore } from './store';
+import { createEventDispatcher } from 'svelte';
 export let title;
 export let prefix = undefined;
+const dispatch = createEventDispatcher();
 $: storeTitle = prefix + title;
 $: isOpen = prefix ? $isOpenStore[storeTitle] : true;
+$: dispatch('open', isOpen);
 </script>
 
 <section class="pt-1 pb-2 px-1">

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

@@ -5,6 +5,8 @@ declare const __propDef: {
         prefix?: string | undefined;
     };
     events: {
+        open: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

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>