windmill-components 1.83.1 → 1.83.2

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

@@ -1,5 +1,5 @@
-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';
+import type { SvelteComponent } from 'svelte';
 export declare const STYLE_STORE_KEY: "style_store";
 export type StyleStore = ReturnType<typeof createStyleStore>;
 export type StyleStoreValue = {
@@ -9,263 +9,14 @@ export type StyleStoreValue = {
     }[];
     topColors: TopColors;
 };
-export declare function createStyleStore(properties: StylePropertyKey[]): {
+export declare function createStyleStore(properties: PropertyGroup[]): {
     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;
-                    }];
-                };
-            };
+            prop: StyleProperty;
             value: string | undefined;
         };
         index: number | undefined;
@@ -281,255 +32,30 @@ export declare enum StylePropertyType {
 }
 export declare const StylePropertyUnits: string[];
 export type TopColors = [] | [string] | [string, string] | [string, string, string];
+export type StylePropertyOption = {
+    text: string;
+    icon: string | typeof SvelteComponent;
+};
+export type BaseStylePropertyValue<T extends StylePropertyType> = {
+    type: T;
+    title?: string;
+};
+export type StylePropertyColorValue = BaseStylePropertyValue<StylePropertyType.color>;
+export type StylePropertyUnitValue = BaseStylePropertyValue<StylePropertyType.unit>;
+export type StylePropertyNumberValue = BaseStylePropertyValue<StylePropertyType.number> & {
+    step?: number;
+    min?: number;
+    max?: number;
+};
+export type StylePropertyTextValue = BaseStylePropertyValue<StylePropertyType.text> & {
+    options?: StylePropertyOption[];
+};
+export type StylePropertyValue = StylePropertyColorValue | StylePropertyUnitValue | StylePropertyNumberValue | StylePropertyTextValue;
+export type StyleProperty = {
+    key: string;
+    value: StylePropertyValue | StylePropertyValue[];
+};
 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[]>>;
+export declare const StyleProperty: StyleProperty[];
+export type PropertyGroup = Record<string, StylePropertyKey[]>;
+export declare const quickStyleProperties: Record<keyof typeof components, Record<string, PropertyGroup[]>>;