windmill-components 1.82.4 → 1.82.6

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

@@ -1,598 +0,0 @@
-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
-    },
-    textareainputcomponent: {
-        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/StylePanel.svelte

@@ -1,61 +0,0 @@
-<script>import { Button } from '../../../common';
-import { sendUserToast } from '../../../../utils';
-import { Copy } from 'lucide-svelte';
-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');
-function applyToAllInstances() {
-    if (component) {
-        if (!$app.css) {
-            $app.css = {};
-        }
-        let componentType = component?.type;
-        if (!$app.css[componentType]) {
-            $app.css[componentType] = {};
-        }
-        Object.keys(ccomponents[component.type].customCss ?? {}).forEach((name) => {
-            if (!$app.css[componentType][name]) {
-                $app.css[componentType][name] = {};
-            }
-            if (component) {
-                let nstyle = component.customCss[name];
-                if (nstyle.style) {
-                    $app.css[componentType][name].style = nstyle.style;
-                }
-                if (nstyle.class) {
-                    $app.css[componentType][name].class = nstyle.class;
-                }
-            }
-        });
-        sendUserToast(`Applied style to all instances of the ${componentType.replace('component', '')} component`);
-    }
-}
-</script>
-
-<Button
-	variant="border"
-	color="light"
-	size="xs"
-	aria-label="Apply to all instances of this component"
-	on:click={applyToAllInstances}
->
-	Copy style to global CSS &nbsp;<Copy size={18} />
-</Button>
-
-{#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}
-				bind:value={component.customCss[name]}
-				on:change={() => app.set($app)}
-			/>
-		</div>
-	{/each}
-{/if}

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

@@ -1,17 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import { type AppComponent } from '../component';
-declare const __propDef: {
-    props: {
-        component: AppComponent | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type StylePanelProps = typeof __propDef.props;
-export type StylePanelEvents = typeof __propDef.events;
-export type StylePanelSlots = typeof __propDef.slots;
-export default class StylePanel extends SvelteComponentTyped<StylePanelProps, StylePanelEvents, StylePanelSlots> {
-}
-export {};