2.2.0

API.md

@@ -15,7 +15,7 @@
 - **editable**: `Boolean (default:true)` - *Used to disable the entire document modification*
 - **overlay**: `Function(page: Number, total: Number) => String` (optional) - *Function that outputs HTML overlay (header, footer, page numbers, ...) for each page depending of the arguments (`page` starts at 1). Placement inside the page should be set in CSS by setting `position: absolute` and `left, top, right, bottom` for each element.*
 - **page_format_mm**: `[width, height] (default:[210, 297])` - *Page format in mm*
-- **page_margins**: `String (default:"10mm 15mm")` - *Page margins in CSS format*
+- **page_margins**: `String (default:"10mm 15mm") or Function(page: Number, total: Number => String` - *Page margins in CSS format*
 - **zoom**: `Number (default:1.0)`- *Display zoom. Only acts on the screen display*
 
 ## Data

CHANGELOG.md

@@ -1,3 +1,10 @@
+# Vue 3
+
+## v2.2.0
+
+- User can now provide a function for `page_margins`, to set margins specific to the page number (for more info read the [API](API.md))
+- Bugfix: Display update was not triggered after exiting printing mode
+
 ## v2.1.2
 
 - Bugfix: Cursor is blurred when editing `contenteditable` fields inside components
@@ -52,6 +59,11 @@
 - Switching `master` branch to Vue3 (we provide vue2 compatibility on the vue2 branch / @1.x version of this library)
 - Dependencies upgrade
 
+# Vue 2
+
+## v1.4.0
+- User can now provide a function for `page_margins`, to set margins specific to the page number (for more info read the [API](API.md))
+
 ## v1.3.0
 
 - SCSS has been converted to basic CSS, so you don't have to install a SCSS compiler anymore

src/Demo/Demo.vue

@@ -260,7 +260,7 @@ export default {
     // Margins management
     current_margins_name () {
       const margins = this.margins.find(([, margins]) => (this.page_margins == margins));
-      return margins ? margins[0] : margins[1];
+      return margins ? margins[0] : this.page_margins;
     },
     margins: () => [
       ["Medium", "20mm"],

src/DocumentEditor/DocumentEditor.vue

@@ -57,7 +57,7 @@ export default {
 
     // Page margins in CSS
     page_margins: {
-      type: String,
+      type: [String, Function],
       default: "10mm 15mm"
     },
 
@@ -400,7 +400,7 @@ export default {
           top: "calc("+ top_mm +"mm + "+ view_padding +"px)",
           width: this.page_format_mm[0]+"mm",
           // "height" is set below
-          padding: this.page_margins,
+          padding: (typeof this.page_margins == "function") ? this.page_margins(page_idx + 1, this.pages.length) : this.page_margins,
           transform: "scale("+ this.zoom +")"
         };
         style[allow_overflow ? "minHeight" : "height"] = this.page_format_mm[1]+"mm";
@@ -470,7 +470,7 @@ export default {
         //const page_clone = page_elt.cloneNode(true);
         page.elt.style = ""; // reset page style for the clone
         page.elt.style.position = "relative";
-        page.elt.style.padding = this.page_margins;
+        page.elt.style.padding = (typeof this.page_margins == "function") ? this.page_margins(page_idx + 1, this.pages.length) : this.page_margins;
         page.elt.style.breakBefore = page_idx ? "page" : "auto";
 
         // add overlays if any
@@ -525,6 +525,9 @@ export default {
         }
       }
       document.body = this._page_body;
+
+      // reposition pages
+      this.update_pages_elts();
     }
   },