windmill-components 1.82.0 → 1.82.2

package/components/apps/editor/componentsPanel/quickStyleProperties.js

@@ -0,0 +1,595 @@
+import { get, writable } from 'svelte/store';
+import { AlignCenter, AlignJustify, AlignLeft, AlignRight, Asterisk, Eye, EyeOff, Grid, Italic, Mouse, MousePointer, Pointer, RectangleHorizontal, Slash, Square, StretchVertical, Strikethrough, Type, Underline } from 'lucide-svelte';
+export const STYLE_STORE_KEY = 'style_store';
+export function createStyleStore(properties) {
+    const style = StyleProperty.filter((p) => properties.includes(p.key)).map((p) => ({
+        prop: p,
+        value: ''
+    }));
+    const store = writable({
+        style: [...style],
+        topColors: []
+    });
+    return {
+        subscribe: store.subscribe,
+        set: store.set,
+        update: store.update,
+        updatePropValue: (key, value) => {
+            if (!key) {
+                return;
+            }
+            store.update((s) => {
+                const index = s.style.findIndex((p) => p.prop.key === key);
+                if (index !== -1) {
+                    s.style[index].value = value || '';
+                }
+                return s;
+            });
+        },
+        getProp(key) {
+            const s = get(store);
+            const index = s.style.findIndex((p) => p.prop.key === key);
+            return {
+                prop: s.style[index],
+                index: index === -1 ? undefined : index
+            };
+        },
+        resetStyle: () => {
+            store.update((s) => {
+                s.style = style.map((s) => ({ ...s, value: '' }));
+                return s;
+            });
+        },
+        setTopColors: (colors) => {
+            store.update((s) => {
+                s.topColors = colors;
+                return s;
+            });
+        }
+    };
+}
+export var StylePropertyType;
+(function (StylePropertyType) {
+    StylePropertyType["color"] = "color";
+    StylePropertyType["unit"] = "unit";
+    StylePropertyType["number"] = "number";
+    StylePropertyType["text"] = "text"; // text like the value of 'display'
+})(StylePropertyType || (StylePropertyType = {}));
+export const StylePropertyUnits = ['px', 'em', 'rem', '%', 'vh', 'vw'];
+// Using an array instead of an object to preserve the order of the properties
+export const StyleProperty = [
+    {
+        key: 'display',
+        value: {
+            type: StylePropertyType.text,
+            options: [
+                {
+                    text: 'block',
+                    icon: Square
+                },
+                {
+                    text: 'inline-block',
+                    icon: RectangleHorizontal
+                },
+                {
+                    text: 'flex',
+                    icon: StretchVertical
+                },
+                {
+                    text: 'grid',
+                    icon: Grid
+                }
+            ]
+        }
+    },
+    {
+        key: 'padding',
+        value: [
+            {
+                type: StylePropertyType.unit,
+                title: 'top'
+            },
+            {
+                type: StylePropertyType.unit,
+                title: 'right'
+            },
+            {
+                type: StylePropertyType.unit,
+                title: 'bottom'
+            },
+            {
+                type: StylePropertyType.unit,
+                title: 'left'
+            }
+        ]
+    },
+    {
+        key: 'opacity',
+        value: {
+            type: StylePropertyType.number,
+            step: 0.1,
+            min: 0,
+            max: 1
+        }
+    },
+    {
+        key: 'cursor',
+        value: {
+            type: StylePropertyType.text,
+            options: [
+                {
+                    text: 'default',
+                    icon: MousePointer
+                },
+                {
+                    text: 'pointer',
+                    icon: Pointer
+                }
+            ]
+        }
+    },
+    {
+        key: 'width',
+        value: {
+            type: StylePropertyType.unit
+        }
+    },
+    {
+        key: 'min-width',
+        value: {
+            type: StylePropertyType.unit
+        }
+    },
+    {
+        key: 'max-width',
+        value: {
+            type: StylePropertyType.unit
+        }
+    },
+    {
+        key: 'height',
+        value: {
+            type: StylePropertyType.unit
+        }
+    },
+    {
+        key: 'min-height',
+        value: {
+            type: StylePropertyType.unit
+        }
+    },
+    {
+        key: 'max-height',
+        value: {
+            type: StylePropertyType.unit
+        }
+    },
+    {
+        key: 'border',
+        value: [
+            {
+                type: StylePropertyType.unit,
+                title: 'width'
+            },
+            {
+                type: StylePropertyType.text,
+                title: 'style',
+                options: [
+                    {
+                        text: 'solid',
+                        icon: '___'
+                    },
+                    {
+                        text: 'dashed',
+                        icon: '_ _'
+                    },
+                    {
+                        text: 'dotted',
+                        icon: '. .'
+                    }
+                ]
+            },
+            {
+                type: StylePropertyType.color,
+                title: 'color'
+            }
+        ]
+    },
+    {
+        key: 'border-radius',
+        value: {
+            type: StylePropertyType.unit
+        }
+    },
+    {
+        key: 'box-shadow',
+        value: [
+            {
+                type: StylePropertyType.unit,
+                title: 'offset-x'
+            },
+            {
+                type: StylePropertyType.unit,
+                title: 'offset-y'
+            },
+            {
+                type: StylePropertyType.unit,
+                title: 'blur'
+            },
+            {
+                type: StylePropertyType.unit,
+                title: 'spread'
+            },
+            {
+                type: StylePropertyType.color,
+                title: 'color'
+            }
+        ]
+    },
+    {
+        key: 'background-color',
+        value: {
+            type: StylePropertyType.color
+        }
+    },
+    {
+        key: 'color',
+        value: {
+            type: StylePropertyType.color
+        }
+    },
+    {
+        key: 'font-size',
+        value: {
+            type: StylePropertyType.unit
+        }
+    },
+    {
+        key: 'font-family',
+        value: {
+            type: StylePropertyType.text
+        }
+    },
+    {
+        key: 'font-weight',
+        value: {
+            type: StylePropertyType.number
+        }
+    },
+    {
+        key: 'font-style',
+        value: {
+            type: StylePropertyType.text,
+            options: [
+                {
+                    text: 'normal',
+                    icon: Type
+                },
+                {
+                    text: 'italic',
+                    icon: Italic
+                }
+            ]
+        }
+    },
+    {
+        key: 'text-align',
+        value: {
+            type: StylePropertyType.text,
+            options: [
+                {
+                    text: 'left',
+                    icon: AlignLeft
+                },
+                {
+                    text: 'center',
+                    icon: AlignCenter
+                },
+                {
+                    text: 'right',
+                    icon: AlignRight
+                },
+                {
+                    text: 'justify',
+                    icon: AlignJustify
+                }
+            ]
+        }
+    },
+    {
+        key: 'text-decoration',
+        value: {
+            type: StylePropertyType.text,
+            options: [
+                {
+                    text: 'none',
+                    icon: Slash
+                },
+                {
+                    text: 'underline',
+                    icon: Underline
+                },
+                {
+                    text: 'line-through',
+                    icon: Strikethrough
+                }
+            ]
+        }
+    },
+    {
+        key: 'text-transform',
+        value: {
+            type: StylePropertyType.text,
+            options: [
+                {
+                    text: 'none',
+                    icon: Slash
+                },
+                {
+                    text: 'capitalize',
+                    icon: 'Aa'
+                },
+                {
+                    text: 'uppercase',
+                    icon: 'AA'
+                },
+                {
+                    text: 'lowercase',
+                    icon: 'aa'
+                }
+            ]
+        }
+    },
+    {
+        key: 'line-height',
+        value: {
+            type: StylePropertyType.unit
+        }
+    },
+    {
+        key: 'letter-spacing',
+        value: {
+            type: StylePropertyType.unit
+        }
+    },
+    {
+        key: 'word-spacing',
+        value: {
+            type: StylePropertyType.unit
+        }
+    },
+    {
+        key: 'overflow',
+        value: {
+            type: StylePropertyType.text,
+            options: [
+                {
+                    text: 'auto',
+                    icon: Asterisk
+                },
+                {
+                    text: 'visible',
+                    icon: Eye
+                },
+                {
+                    text: 'hidden',
+                    icon: EyeOff
+                },
+                {
+                    text: 'scroll',
+                    icon: Mouse
+                }
+            ]
+        }
+    }
+];
+const allDefaultProps = StyleProperty.map(({ key }) => key);
+const containerDefaultProps = [
+    'padding',
+    'opacity',
+    'border',
+    'border-radius',
+    'box-shadow',
+    'background-color',
+    'overflow'
+];
+const textDefaultProps = [
+    'padding',
+    'opacity',
+    'background-color',
+    'color',
+    'font-size',
+    'font-family',
+    'font-weight',
+    'font-style',
+    'text-align',
+    'text-decoration',
+    'text-transform',
+    'line-height',
+    'letter-spacing',
+    'word-spacing'
+];
+const sizeDefaultProps = [
+    'width',
+    'min-width',
+    'max-width',
+    'height',
+    'min-height',
+    'max-height'
+];
+const buttonDefaultProps = [
+    'cursor',
+    'border',
+    'border-radius',
+    'box-shadow',
+    ...textDefaultProps
+];
+const inputDefaultProps = [
+    'cursor',
+    'border',
+    'border-radius',
+    ...textDefaultProps
+];
+export const quickStyleProperties = {
+    mapcomponent: {
+        map: containerDefaultProps
+    },
+    pdfcomponent: {
+        container: containerDefaultProps
+    },
+    formcomponent: {
+        container: containerDefaultProps,
+        button: buttonDefaultProps
+    },
+    htmlcomponent: {
+        container: allDefaultProps
+    },
+    iconcomponent: {
+        container: containerDefaultProps,
+        icon: [
+            'padding',
+            'opacity',
+            'cursor',
+            'width',
+            'min-width',
+            'max-width',
+            'height',
+            'min-height',
+            'max-height',
+            'color'
+        ]
+    },
+    tabscomponent: {
+        tabRow: containerDefaultProps,
+        allTabs: [...textDefaultProps, ...sizeDefaultProps],
+        selectedTab: [...textDefaultProps, ...sizeDefaultProps],
+        container: containerDefaultProps
+    },
+    textcomponent: {
+        text: textDefaultProps
+    },
+    imagecomponent: {
+        image: containerDefaultProps
+    },
+    rangecomponent: {
+        handles: ['opacity', 'cursor', 'border', 'border-radius', 'background-color'],
+        bar: ['opacity', 'cursor', 'border', 'border-radius', 'background-color'],
+        limits: textDefaultProps,
+        values: textDefaultProps
+    },
+    tablecomponent: {
+        tableHeader: containerDefaultProps,
+        tableBody: containerDefaultProps,
+        tableFooter: containerDefaultProps,
+        container: containerDefaultProps
+    },
+    aggridcomponent: {},
+    buttoncomponent: {
+        button: buttonDefaultProps
+    },
+    drawercomponent: {
+        container: containerDefaultProps
+    },
+    plotlycomponent: {},
+    selectcomponent: {
+        input: inputDefaultProps
+    },
+    slidercomponent: {
+        handles: ['opacity', 'cursor', 'border', 'border-radius', 'background-color'],
+        bar: ['opacity', 'cursor', 'border', 'border-radius', 'background-color'],
+        limits: textDefaultProps,
+        values: textDefaultProps
+    },
+    displaycomponent: {
+        header: [...containerDefaultProps, ...textDefaultProps],
+        container: containerDefaultProps
+    },
+    barchartcomponent: {
+        container: containerDefaultProps
+    },
+    checkboxcomponent: {
+        text: textDefaultProps
+    },
+    currencycomponent: {
+        input: inputDefaultProps
+    },
+    piechartcomponent: {
+        container: containerDefaultProps
+    },
+    vegalitecomponent: {},
+    containercomponent: {
+        container: containerDefaultProps
+    },
+    dateinputcomponent: {
+        input: inputDefaultProps
+    },
+    fileinputcomponent: {
+        container: containerDefaultProps
+    },
+    textinputcomponent: {
+        input: inputDefaultProps
+    },
+    emailinputcomponent: {
+        input: inputDefaultProps
+    },
+    formbuttoncomponent: {
+        button: buttonDefaultProps,
+        popup: containerDefaultProps
+    },
+    timeseriescomponent: {
+        container: containerDefaultProps
+    },
+    multiselectcomponent: {
+        input: inputDefaultProps
+    },
+    numberinputcomponent: {
+        input: inputDefaultProps
+    },
+    scatterchartcomponent: {
+        container: containerDefaultProps
+    },
+    passwordinputcomponent: {
+        input: inputDefaultProps
+    },
+    resourceselectcomponent: {
+        input: inputDefaultProps
+    },
+    verticaldividercomponent: {
+        divider: [
+            'padding',
+            'opacity',
+            'width',
+            'min-width',
+            'max-width',
+            'height',
+            'min-height',
+            'max-height',
+            'border',
+            'border-radius',
+            'background-color'
+        ],
+        container: containerDefaultProps
+    },
+    horizontaldividercomponent: {
+        divider: [
+            'padding',
+            'opacity',
+            'width',
+            'min-width',
+            'max-width',
+            'height',
+            'min-height',
+            'max-height',
+            'border',
+            'border-radius',
+            'background-color'
+        ],
+        container: containerDefaultProps
+    },
+    verticalsplitpanescomponent: {
+        container: containerDefaultProps
+    },
+    horizontalsplitpanescomponent: {
+        container: containerDefaultProps
+    }
+};

package/components/apps/editor/settingsPanel/ComponentPanel.svelte

@@ -1,5 +1,5 @@
 <script>import Button from '../../../common/button/Button.svelte';
-import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
+import { faChevronRight } from '@fortawesome/free-solid-svg-icons';
 import { getContext } from 'svelte';
 import PanelSection from './common/PanelSection.svelte';
 import InputsSpecsEditor from './InputsSpecsEditor.svelte';
@@ -7,7 +7,7 @@ import TableActions from './TableActions.svelte';
 import StaticInputEditor from './inputEditor/StaticInputEditor.svelte';
 import ConnectedInputEditor from './inputEditor/ConnectedInputEditor.svelte';
 import Badge from '../../../common/badge/Badge.svelte';
-import { capitalize, classNames, getModifierKey } from '../../../../utils';
+import { capitalize, classNames, getModifierKey, isMac } from '../../../../utils';
 import { buildExtraLib, fieldTypeToTsType } from '../../utils';
 import Recompute from './Recompute.svelte';
 import Tooltip from '../../../Tooltip.svelte';
@@ -23,6 +23,9 @@ import GridPane from './GridPane.svelte';
 import { slide } from 'svelte/transition';
 import { push } from '../../../../history';
 import Kbd from '../../../common/kbd/Kbd.svelte';
+import { secondaryMenu } from './secondaryMenu';
+import StylePanel from './StylePanel.svelte';
+import { Delete } from 'lucide-svelte';
 export let componentSettings = undefined;
 export let rowColumns = false;
 export let onDelete = undefined;
@@ -59,12 +62,10 @@ $: extraLib =
         ? buildExtraLib($worldStore?.outputsById ?? {}, componentSettings?.item?.data?.id, false, $state, false)
         : undefined;
 function keydown(event) {
-    switch (event.key) {
-        case 'Delete': {
-            removeGridElement();
-            event.stopPropagation();
-            break;
-        }
+    const { key, metaKey } = event;
+    if (key === 'Delte' || (key === 'Backspace' && metaKey)) {
+        removeGridElement();
+        event.stopPropagation();
     }
 }
 const initialConfiguration = componentSettings?.item?.data?.type
@@ -201,19 +202,20 @@ $: componentSettings?.item?.data && ($app = $app);
 		<div class="grow shrink" />
 
 		{#if Object.keys(ccomponents[component.type].customCss ?? {}).length > 0}
-			<PanelSection title="Custom CSS">
+			<PanelSection title="Styling">
 				<div slot="action">
 					<Button
 						color="light"
 						size="xs"
-						endIcon={{ icon: viewCssOptions ? faChevronUp : faChevronDown }}
-						on:click={() => (viewCssOptions = !viewCssOptions)}
+						variant="border"
+						endIcon={{ icon: faChevronRight }}
+						on:click={() => secondaryMenu.open(StylePanel, { component })}
 					>
-						{viewCssOptions ? 'Hide' : 'Show'}
+						Open
 					</Button>
 				</div>
 				{#if viewCssOptions}
-					<div transition:slide|local>
+					<div transition:slide|local class="w-full">
 						{#each Object.keys(ccomponents[component.type].customCss ?? {}) as name}
 							{#if componentSettings.item.data?.customCss != undefined}
 								<div class="w-full mb-2">
@@ -236,7 +238,15 @@ $: componentSettings?.item?.data && ($app = $app);
 				<div slot="action">
 					<Button size="xs" color="red" variant="border" on:click={removeGridElement}>
 						Delete&nbsp;&nbsp;
-						<Kbd>Del</Kbd>
+						{#if isMac()}
+							<Kbd kbdClass="center-center">
+								<span class="text-lg leading-none">⌘</span>
+								<span class="px-0.5">+</span>
+								<Delete size={16} />
+							</Kbd>
+						{:else}
+							<Kbd>Del</Kbd>
+						{/if}
 					</Button>
 				</div>
 				<div class="flex flex-col gap-1">

package/components/apps/editor/settingsPanel/StylePanel.svelte

@@ -0,0 +1,23 @@
+<script>import { getContext } from 'svelte';
+import { ccomponents } from '../component';
+import CssProperty from '../componentsPanel/CssProperty.svelte';
+import { quickStyleProperties } from '../componentsPanel/quickStyleProperties';
+export let component;
+const { app } = getContext('AppViewerContext');
+</script>
+
+{#if component && component.customCss !== undefined}
+	{#each Object.keys(ccomponents[component.type].customCss ?? {}) as name}
+		<div class="w-full">
+			<CssProperty
+				quickStyleProperties={quickStyleProperties?.[component.type]?.[name]}
+				forceStyle={ccomponents[component.type].customCss[name].style !== undefined}
+				forceClass={ccomponents[component.type].customCss[name].class !== undefined}
+				{name}
+				componentType={component.type}
+				bind:value={component.customCss[name]}
+				on:change={() => app.set($app)}
+			/>
+		</div>
+	{/each}
+{/if}