npm - windmill-components - Versions diffs - 1.60.3 → 1.83.1 - Mend

windmill-components 1.60.3 → 1.83.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (632) hide show

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

@@ -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[]>>;