windmill-components 1.82.5 → 1.82.7

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

@@ -0,0 +1,130 @@
+<script>import { createEventDispatcher, getContext } from 'svelte';
+import { Button, ClearableInput, Menu } from '../../../common';
+import Popover from '../../../Popover.svelte';
+import ColorInput from '../settingsPanel/inputEditor/ColorInput.svelte';
+import { StylePropertyType, StylePropertyUnits, STYLE_STORE_KEY } from './quickStyleProperties';
+export let prop;
+export let value;
+export let inline = false;
+const styleStore = getContext(STYLE_STORE_KEY);
+const dispatch = createEventDispatcher();
+const key = prop.key;
+const type = prop.value?.['type'];
+let unit = StylePropertyUnits[0];
+let internalValue;
+$: internalValue = value ? +value.replace(unit, '') : '';
+$: dispatch('change', value);
+function updateValue(next) {
+    value = next ? next + unit : '';
+}
+function updateUnit(next) {
+    value = value?.replace(unit, next) || '';
+    unit = next;
+}
+</script>
+
+<div class={inline && type !== StylePropertyType.color ? '' : 'w-full'}>
+	{#if prop.value['title']}
+		<div class="font-medium text-xs text-gray-500">
+			{prop.value['title']}
+		</div>
+	{/if}
+	<div class="flex gap-1">
+		{#if type === StylePropertyType.color}
+			<ColorInput bind:value />
+			{#each $styleStore.topColors as color}
+				<Popover placement="bottom" notClickable disapperTimoout={0} class="flex">
+					<Button
+						color="light"
+						size="xs"
+						variant="border"
+						btnClasses="!p-0 !w-[34px] !h-[34px]"
+						aria-label="Set {key} to {color}"
+						style={`background-color: ${color};`}
+						on:click={() => (value = color)}
+					/>
+					<svelte:fragment slot="text">{color}</svelte:fragment>
+				</Popover>
+			{/each}
+		{:else if type === StylePropertyType.number}
+			<ClearableInput
+				type="number"
+				bind:value
+				step={prop.value?.['step'] || 1}
+				min={prop.value?.['min']}
+				max={prop.value?.['max']}
+			/>
+		{:else if type === StylePropertyType.unit}
+			<ClearableInput
+				wrapperClass="flex items-center {inline ? '!grow-0' : ''}"
+				inputClass="!border-r-0 !rounded-r-none {inline ? '!w-[90px]' : ''}"
+				buttonClass="!right-9"
+				type="number"
+				value={internalValue}
+				on:change={({ detail }) => updateValue(detail)}
+			>
+				<Menu
+					let:close
+					noMinW
+					wrapperClasses="h-full bg-white rounded-r-md border-y border-r border-gray-300 pr-0.5"
+					popupClasses="!mt-0"
+				>
+					<button
+						slot="trigger"
+						type="button"
+						class="font-normal text-xs px-1 py-1.5 w-8 rounded mt-0.5 duration-200 hover:bg-gray-200/90"
+					>
+						{unit}
+					</button>
+					<ul class="bg-white rounded border py-1 overflow-auto">
+						{#each StylePropertyUnits as u}
+							<li class="w-full">
+								<Button
+									type="button"
+									color="light"
+									size="xs"
+									variant="contained"
+									btnClasses="!justify-start !rounded-none !w-full !px-3 !py-1.5"
+									on:click={() => {
+										updateUnit(u)
+										close()
+									}}
+								>
+									{u}
+								</Button>
+							</li>
+						{/each}
+					</ul>
+				</Menu>
+			</ClearableInput>
+		{:else if type === StylePropertyType.text}
+			{#each prop.value?.['options'] || [] as option}
+				<Popover placement="bottom" notClickable disapperTimoout={0}>
+					<Button
+						color={value === option.text ? 'dark' : 'light'}
+						size="xs"
+						variant={value === option.text ? 'contained' : 'border'}
+						btnClasses="!p-1 !min-w-[34px] !h-[34px]"
+						aria-label="Set {key} to {option.text}"
+						on:click={() => {
+							if (value === option.text) {
+								value = ''
+							} else {
+								value = option.text
+							}
+						}}
+					>
+						{#if typeof option.icon === 'string'}
+							{option.icon}
+						{:else}
+							<svelte:component this={option.icon} size={18} />
+						{/if}
+					</Button>
+					<svelte:fragment slot="text">{option.text}</svelte:fragment>
+				</Popover>
+			{:else}
+				<ClearableInput inputClass="min-w-[32px]" bind:value />
+			{/each}
+		{/if}
+	</div>
+</div>

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

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+import { type StyleStoreValue } from './quickStyleProperties';
+declare const __propDef: {
+    props: {
+        prop: StyleStoreValue['style'][number]['prop'];
+        value: string | undefined;
+        inline?: boolean | undefined;
+    };
+    events: {
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type QuickStylePropertyProps = typeof __propDef.props;
+export type QuickStylePropertyEvents = typeof __propDef.events;
+export type QuickStylePropertySlots = typeof __propDef.slots;
+export default class QuickStyleProperty extends SvelteComponentTyped<QuickStylePropertyProps, QuickStylePropertyEvents, QuickStylePropertySlots> {
+}
+export {};

package/components/apps/editor/componentsPanel/quickStyleProperties.d.ts

@@ -0,0 +1,535 @@
+import { AlignCenter, AlignJustify, AlignLeft, AlignRight, Asterisk, Eye, EyeOff, Grid, Italic, Mouse, MousePointer, Pointer, RectangleHorizontal, Slash, Square, StretchVertical, Strikethrough, Type, Underline } from 'lucide-svelte';
+import type { components } from '../component';
+export declare const STYLE_STORE_KEY: "style_store";
+export type StyleStore = ReturnType<typeof createStyleStore>;
+export type StyleStoreValue = {
+    style: {
+        prop: (typeof StyleProperty)[number];
+        value: string | undefined;
+    }[];
+    topColors: TopColors;
+};
+export declare function createStyleStore(properties: StylePropertyKey[]): {
+    subscribe: (this: void, run: import("svelte/store").Subscriber<StyleStoreValue>, invalidate?: ((value?: StyleStoreValue | undefined) => void) | undefined) => import("svelte/store").Unsubscriber;
+    set: (this: void, value: StyleStoreValue) => void;
+    update: (this: void, updater: import("svelte/store").Updater<StyleStoreValue>) => void;
+    updatePropValue: (key: StylePropertyKey, value?: string) => void;
+    getProp(key: StylePropertyKey): {
+        prop: {
+            prop: {
+                readonly key: "display";
+                readonly value: {
+                    readonly type: StylePropertyType.text;
+                    readonly options: readonly [{
+                        readonly text: "block";
+                        readonly icon: typeof Square;
+                    }, {
+                        readonly text: "inline-block";
+                        readonly icon: typeof RectangleHorizontal;
+                    }, {
+                        readonly text: "flex";
+                        readonly icon: typeof StretchVertical;
+                    }, {
+                        readonly text: "grid";
+                        readonly icon: typeof Grid;
+                    }];
+                };
+            } | {
+                readonly key: "padding";
+                readonly value: readonly [{
+                    readonly type: StylePropertyType.unit;
+                    readonly title: "top";
+                }, {
+                    readonly type: StylePropertyType.unit;
+                    readonly title: "right";
+                }, {
+                    readonly type: StylePropertyType.unit;
+                    readonly title: "bottom";
+                }, {
+                    readonly type: StylePropertyType.unit;
+                    readonly title: "left";
+                }];
+            } | {
+                readonly key: "opacity";
+                readonly value: {
+                    readonly type: StylePropertyType.number;
+                    readonly step: 0.1;
+                    readonly min: 0;
+                    readonly max: 1;
+                };
+            } | {
+                readonly key: "cursor";
+                readonly value: {
+                    readonly type: StylePropertyType.text;
+                    readonly options: readonly [{
+                        readonly text: "default";
+                        readonly icon: typeof MousePointer;
+                    }, {
+                        readonly text: "pointer";
+                        readonly icon: typeof Pointer;
+                    }];
+                };
+            } | {
+                readonly key: "width";
+                readonly value: {
+                    readonly type: StylePropertyType.unit;
+                };
+            } | {
+                readonly key: "min-width";
+                readonly value: {
+                    readonly type: StylePropertyType.unit;
+                };
+            } | {
+                readonly key: "max-width";
+                readonly value: {
+                    readonly type: StylePropertyType.unit;
+                };
+            } | {
+                readonly key: "height";
+                readonly value: {
+                    readonly type: StylePropertyType.unit;
+                };
+            } | {
+                readonly key: "min-height";
+                readonly value: {
+                    readonly type: StylePropertyType.unit;
+                };
+            } | {
+                readonly key: "max-height";
+                readonly value: {
+                    readonly type: StylePropertyType.unit;
+                };
+            } | {
+                readonly key: "border";
+                readonly value: readonly [{
+                    readonly type: StylePropertyType.unit;
+                    readonly title: "width";
+                }, {
+                    readonly type: StylePropertyType.text;
+                    readonly title: "style";
+                    readonly options: readonly [{
+                        readonly text: "solid";
+                        readonly icon: "___";
+                    }, {
+                        readonly text: "dashed";
+                        readonly icon: "_ _";
+                    }, {
+                        readonly text: "dotted";
+                        readonly icon: ". .";
+                    }];
+                }, {
+                    readonly type: StylePropertyType.color;
+                    readonly title: "color";
+                }];
+            } | {
+                readonly key: "border-radius";
+                readonly value: {
+                    readonly type: StylePropertyType.unit;
+                };
+            } | {
+                readonly key: "box-shadow";
+                readonly value: readonly [{
+                    readonly type: StylePropertyType.unit;
+                    readonly title: "offset-x";
+                }, {
+                    readonly type: StylePropertyType.unit;
+                    readonly title: "offset-y";
+                }, {
+                    readonly type: StylePropertyType.unit;
+                    readonly title: "blur";
+                }, {
+                    readonly type: StylePropertyType.unit;
+                    readonly title: "spread";
+                }, {
+                    readonly type: StylePropertyType.color;
+                    readonly title: "color";
+                }];
+            } | {
+                readonly key: "background-color";
+                readonly value: {
+                    readonly type: StylePropertyType.color;
+                };
+            } | {
+                readonly key: "color";
+                readonly value: {
+                    readonly type: StylePropertyType.color;
+                };
+            } | {
+                readonly key: "font-size";
+                readonly value: {
+                    readonly type: StylePropertyType.unit;
+                };
+            } | {
+                readonly key: "font-family";
+                readonly value: {
+                    readonly type: StylePropertyType.text;
+                };
+            } | {
+                readonly key: "font-weight";
+                readonly value: {
+                    readonly type: StylePropertyType.number;
+                };
+            } | {
+                readonly key: "font-style";
+                readonly value: {
+                    readonly type: StylePropertyType.text;
+                    readonly options: readonly [{
+                        readonly text: "normal";
+                        readonly icon: typeof Type;
+                    }, {
+                        readonly text: "italic";
+                        readonly icon: typeof Italic;
+                    }];
+                };
+            } | {
+                readonly key: "text-align";
+                readonly value: {
+                    readonly type: StylePropertyType.text;
+                    readonly options: readonly [{
+                        readonly text: "left";
+                        readonly icon: typeof AlignLeft;
+                    }, {
+                        readonly text: "center";
+                        readonly icon: typeof AlignCenter;
+                    }, {
+                        readonly text: "right";
+                        readonly icon: typeof AlignRight;
+                    }, {
+                        readonly text: "justify";
+                        readonly icon: typeof AlignJustify;
+                    }];
+                };
+            } | {
+                readonly key: "text-decoration";
+                readonly value: {
+                    readonly type: StylePropertyType.text;
+                    readonly options: readonly [{
+                        readonly text: "none";
+                        readonly icon: typeof Slash;
+                    }, {
+                        readonly text: "underline";
+                        readonly icon: typeof Underline;
+                    }, {
+                        readonly text: "line-through";
+                        readonly icon: typeof Strikethrough;
+                    }];
+                };
+            } | {
+                readonly key: "text-transform";
+                readonly value: {
+                    readonly type: StylePropertyType.text;
+                    readonly options: readonly [{
+                        readonly text: "none";
+                        readonly icon: typeof Slash;
+                    }, {
+                        readonly text: "capitalize";
+                        readonly icon: "Aa";
+                    }, {
+                        readonly text: "uppercase";
+                        readonly icon: "AA";
+                    }, {
+                        readonly text: "lowercase";
+                        readonly icon: "aa";
+                    }];
+                };
+            } | {
+                readonly key: "line-height";
+                readonly value: {
+                    readonly type: StylePropertyType.unit;
+                };
+            } | {
+                readonly key: "letter-spacing";
+                readonly value: {
+                    readonly type: StylePropertyType.unit;
+                };
+            } | {
+                readonly key: "word-spacing";
+                readonly value: {
+                    readonly type: StylePropertyType.unit;
+                };
+            } | {
+                readonly key: "overflow";
+                readonly value: {
+                    readonly type: StylePropertyType.text;
+                    readonly options: readonly [{
+                        readonly text: "auto";
+                        readonly icon: typeof Asterisk;
+                    }, {
+                        readonly text: "visible";
+                        readonly icon: typeof Eye;
+                    }, {
+                        readonly text: "hidden";
+                        readonly icon: typeof EyeOff;
+                    }, {
+                        readonly text: "scroll";
+                        readonly icon: typeof Mouse;
+                    }];
+                };
+            };
+            value: string | undefined;
+        };
+        index: number | undefined;
+    };
+    resetStyle: () => void;
+    setTopColors: (colors: TopColors) => void;
+};
+export declare enum StylePropertyType {
+    'color' = "color",
+    'unit' = "unit",
+    'number' = "number",
+    'text' = "text"
+}
+export declare const StylePropertyUnits: string[];
+export type TopColors = [] | [string] | [string, string] | [string, string, string];
+export type StylePropertyKey = (typeof StyleProperty)[number]['key'];
+export declare const StyleProperty: readonly [{
+    readonly key: "display";
+    readonly value: {
+        readonly type: StylePropertyType.text;
+        readonly options: readonly [{
+            readonly text: "block";
+            readonly icon: typeof Square;
+        }, {
+            readonly text: "inline-block";
+            readonly icon: typeof RectangleHorizontal;
+        }, {
+            readonly text: "flex";
+            readonly icon: typeof StretchVertical;
+        }, {
+            readonly text: "grid";
+            readonly icon: typeof Grid;
+        }];
+    };
+}, {
+    readonly key: "padding";
+    readonly value: readonly [{
+        readonly type: StylePropertyType.unit;
+        readonly title: "top";
+    }, {
+        readonly type: StylePropertyType.unit;
+        readonly title: "right";
+    }, {
+        readonly type: StylePropertyType.unit;
+        readonly title: "bottom";
+    }, {
+        readonly type: StylePropertyType.unit;
+        readonly title: "left";
+    }];
+}, {
+    readonly key: "opacity";
+    readonly value: {
+        readonly type: StylePropertyType.number;
+        readonly step: 0.1;
+        readonly min: 0;
+        readonly max: 1;
+    };
+}, {
+    readonly key: "cursor";
+    readonly value: {
+        readonly type: StylePropertyType.text;
+        readonly options: readonly [{
+            readonly text: "default";
+            readonly icon: typeof MousePointer;
+        }, {
+            readonly text: "pointer";
+            readonly icon: typeof Pointer;
+        }];
+    };
+}, {
+    readonly key: "width";
+    readonly value: {
+        readonly type: StylePropertyType.unit;
+    };
+}, {
+    readonly key: "min-width";
+    readonly value: {
+        readonly type: StylePropertyType.unit;
+    };
+}, {
+    readonly key: "max-width";
+    readonly value: {
+        readonly type: StylePropertyType.unit;
+    };
+}, {
+    readonly key: "height";
+    readonly value: {
+        readonly type: StylePropertyType.unit;
+    };
+}, {
+    readonly key: "min-height";
+    readonly value: {
+        readonly type: StylePropertyType.unit;
+    };
+}, {
+    readonly key: "max-height";
+    readonly value: {
+        readonly type: StylePropertyType.unit;
+    };
+}, {
+    readonly key: "border";
+    readonly value: readonly [{
+        readonly type: StylePropertyType.unit;
+        readonly title: "width";
+    }, {
+        readonly type: StylePropertyType.text;
+        readonly title: "style";
+        readonly options: readonly [{
+            readonly text: "solid";
+            readonly icon: "___";
+        }, {
+            readonly text: "dashed";
+            readonly icon: "_ _";
+        }, {
+            readonly text: "dotted";
+            readonly icon: ". .";
+        }];
+    }, {
+        readonly type: StylePropertyType.color;
+        readonly title: "color";
+    }];
+}, {
+    readonly key: "border-radius";
+    readonly value: {
+        readonly type: StylePropertyType.unit;
+    };
+}, {
+    readonly key: "box-shadow";
+    readonly value: readonly [{
+        readonly type: StylePropertyType.unit;
+        readonly title: "offset-x";
+    }, {
+        readonly type: StylePropertyType.unit;
+        readonly title: "offset-y";
+    }, {
+        readonly type: StylePropertyType.unit;
+        readonly title: "blur";
+    }, {
+        readonly type: StylePropertyType.unit;
+        readonly title: "spread";
+    }, {
+        readonly type: StylePropertyType.color;
+        readonly title: "color";
+    }];
+}, {
+    readonly key: "background-color";
+    readonly value: {
+        readonly type: StylePropertyType.color;
+    };
+}, {
+    readonly key: "color";
+    readonly value: {
+        readonly type: StylePropertyType.color;
+    };
+}, {
+    readonly key: "font-size";
+    readonly value: {
+        readonly type: StylePropertyType.unit;
+    };
+}, {
+    readonly key: "font-family";
+    readonly value: {
+        readonly type: StylePropertyType.text;
+    };
+}, {
+    readonly key: "font-weight";
+    readonly value: {
+        readonly type: StylePropertyType.number;
+    };
+}, {
+    readonly key: "font-style";
+    readonly value: {
+        readonly type: StylePropertyType.text;
+        readonly options: readonly [{
+            readonly text: "normal";
+            readonly icon: typeof Type;
+        }, {
+            readonly text: "italic";
+            readonly icon: typeof Italic;
+        }];
+    };
+}, {
+    readonly key: "text-align";
+    readonly value: {
+        readonly type: StylePropertyType.text;
+        readonly options: readonly [{
+            readonly text: "left";
+            readonly icon: typeof AlignLeft;
+        }, {
+            readonly text: "center";
+            readonly icon: typeof AlignCenter;
+        }, {
+            readonly text: "right";
+            readonly icon: typeof AlignRight;
+        }, {
+            readonly text: "justify";
+            readonly icon: typeof AlignJustify;
+        }];
+    };
+}, {
+    readonly key: "text-decoration";
+    readonly value: {
+        readonly type: StylePropertyType.text;
+        readonly options: readonly [{
+            readonly text: "none";
+            readonly icon: typeof Slash;
+        }, {
+            readonly text: "underline";
+            readonly icon: typeof Underline;
+        }, {
+            readonly text: "line-through";
+            readonly icon: typeof Strikethrough;
+        }];
+    };
+}, {
+    readonly key: "text-transform";
+    readonly value: {
+        readonly type: StylePropertyType.text;
+        readonly options: readonly [{
+            readonly text: "none";
+            readonly icon: typeof Slash;
+        }, {
+            readonly text: "capitalize";
+            readonly icon: "Aa";
+        }, {
+            readonly text: "uppercase";
+            readonly icon: "AA";
+        }, {
+            readonly text: "lowercase";
+            readonly icon: "aa";
+        }];
+    };
+}, {
+    readonly key: "line-height";
+    readonly value: {
+        readonly type: StylePropertyType.unit;
+    };
+}, {
+    readonly key: "letter-spacing";
+    readonly value: {
+        readonly type: StylePropertyType.unit;
+    };
+}, {
+    readonly key: "word-spacing";
+    readonly value: {
+        readonly type: StylePropertyType.unit;
+    };
+}, {
+    readonly key: "overflow";
+    readonly value: {
+        readonly type: StylePropertyType.text;
+        readonly options: readonly [{
+            readonly text: "auto";
+            readonly icon: typeof Asterisk;
+        }, {
+            readonly text: "visible";
+            readonly icon: typeof Eye;
+        }, {
+            readonly text: "hidden";
+            readonly icon: typeof EyeOff;
+        }, {
+            readonly text: "scroll";
+            readonly icon: typeof Mouse;
+        }];
+    };
+}];
+export declare const quickStyleProperties: Record<keyof typeof components, Record<string, StylePropertyKey[]>>;