@1urso/generic-editor 0.1.10 → 0.1.13

package/README.md

@@ -88,10 +88,8 @@ At the top of the left sidebar, the **Settings** button (gear icon) allows you t
 - **List Configuration Tab**:
   - _Sort Property_: Defines which field will be used to sort the list (e.g., `price`, `name`).
   - _Order_: Ascending or Descending.
-- **Mock Data Tab**:
-  - _List Data_: A JSON array `[...]` to test list mode.
-  - _Single Data_: A JSON object `{...}` to test single mode.
-    > Edit these JSONs to see the layout react in real-time to your variables.
+  - _Newest Position_: Defines where the newest item appears ('top' or 'bottom').
+  - _Scroll Behavior_: Defines the scroll direction ('down' - default, or 'up' - chat-like).
 
 ### Working with Text and Fonts
 
@@ -104,6 +102,7 @@ When right-clicking on a **Text** element:
 - **Text Color**: Pre-defined color palette.
 - **Weight**: Normal or Bold.
 - **Alignment**: Left, Center, or Right.
+- **Vertical Alignment**: Top, Center, or Bottom.
 
 ### Working with Images
 
@@ -179,6 +178,7 @@ The `isList` property drastically changes how the editor and HTML generator beha
   - The user designs the "Template Item".
   - The editor repeats this model vertically for each item in the mock data array.
   - Allows visualization of how the list behaves with multiple items.
+  - **Height Limit**: Elements are constrained within the defined item height (canvas height).
 
 ### JSON Structure
 
@@ -208,7 +208,9 @@ The output of `onSave` is a JSON ready to be stored.
   ],
   "listSettings": {
     "sortProp": "nome",
-    "sortOrder": "asc"
+    "sortOrder": "asc",
+    "newestPosition": "bottom",
+    "scrollDirection": "down"
   }
 }
 ```
@@ -228,6 +230,7 @@ const dados = db.getFuncionarios(); // Array or Object
 const htmlString = generateHTML(layout.elements, dados, {
   isList: layout.isList, // Important to pass the correct mode
   listSettings: layout.listSettings,
+  canvasHeight: layout.canvasHeight, // Optional: Force item height
 });
 
 // 3. Inject where needed

package/dist/editor/context.d.ts

@@ -14,6 +14,8 @@ export interface IElement {
 export interface IListSettings {
     sortProp?: string;
     sortOrder: 'asc' | 'desc';
+    newestPosition?: 'top' | 'bottom';
+    scrollDirection?: 'up' | 'down';
 }
 export interface IProp {
     name: string;
@@ -26,6 +28,7 @@ interface IEditorState {
     mockData: any[];
     singleMockData: Record<string, any>;
     listSettings: IListSettings;
+    canvasHeight?: number;
     availableProps: IProp[];
     availableFonts: string[];
     theme: 'light' | 'dark';
@@ -39,6 +42,7 @@ interface IEditorContext {
     updateElement: (id: string, updates: Partial<IElement>) => void;
     setMockData: (data: any[], singleData: Record<string, any>) => void;
     updateListSettings: (settings: Partial<IListSettings>) => void;
+    setCanvasHeight: (height: number) => void;
     loadState: (savedState: Partial<IEditorState>) => void;
 }
 export declare const EditorProvider: React.FC<{

package/dist/editor/utils/htmlGenerator.d.ts

@@ -2,6 +2,7 @@ import { IElement, IListSettings } from '../context';
 interface RenderOptions {
     isList?: boolean;
     listSettings?: IListSettings;
+    canvasHeight?: number;
 }
 export declare const generateHTML: (elements: IElement[], data: any, options?: RenderOptions) => string;
 export declare const getRendererCode: () => string;