windmill-components 1.79.0 → 1.82.1

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/inlineScriptsPanel/EmptyInlineScript.svelte

@@ -6,7 +6,7 @@ import { Script } from '../../../../gen';
 import { inferArgs } from '../../../../infer';
 import { initialCode } from '../../../../script_helpers';
 import { capitalize, emptySchema, getScriptByPath } from '../../../../utils';
-import { faCodeBranch, faTrash } from '@fortawesome/free-solid-svg-icons';
+import { faCodeBranch } from '@fortawesome/free-solid-svg-icons';
 import { Building, Globe2 } from 'lucide-svelte';
 import { createEventDispatcher, getContext } from 'svelte';
 import { fly } from 'svelte/transition';